/* Page-level styles. Home sections first; other pages append below. */

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: calc(var(--header-h) + clamp(40px, 6vw, 84px)); padding-bottom: 0; background: var(--ink); color: var(--fg); }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__mesh i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.hero__mesh i:nth-child(1) { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; left: -14%; top: -30%; background: radial-gradient(circle, rgba(255,122,26,.85), transparent 65%); animation: drift1 18s ease-in-out infinite alternate; }
.hero__mesh i:nth-child(2) { width: 58vw; height: 58vw; max-width: 860px; max-height: 860px; right: -16%; top: -22%; background: radial-gradient(circle, rgba(109,74,255,.9), transparent 65%); animation: drift2 22s ease-in-out infinite alternate; }
.hero__mesh i:nth-child(3) { width: 40vw; height: 40vw; max-width: 600px; max-height: 600px; left: 32%; top: 28%; background: radial-gradient(circle, rgba(25,195,166,.35), transparent 65%); animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14%, 12%) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12%, 16%) scale(.9); } }
@keyframes drift3 { to { transform: translate(-18%, -10%) scale(1.2); } }
.hero__grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); }
.hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; transition: opacity 1s; }
.hero__fallback path.edge { fill: none; stroke: rgba(146,121,255,.4); stroke-width: 1.2; }
.hero__fallback path.pulse { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 14 600; animation: dash 5s linear infinite; animation-delay: var(--pd, 0s); filter: drop-shadow(0 0 6px var(--orange)); }
@keyframes dash { from { stroke-dashoffset: 614; } to { stroke-dashoffset: 0; } }
.hero__fallback rect.node { fill: #172033; stroke: rgba(255,255,255,.18); }
.hero__fallback rect.bar { fill: var(--orange); opacity: .85; }
.hero.has-3d .hero__fallback { opacity: 0; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.hero.has-3d #hero-canvas { opacity: 1; }
.hero__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 45% at 50% 34%, rgba(11,14,20,.78), rgba(11,14,20,.35) 55%, transparent 80%), linear-gradient(180deg, transparent 70%, var(--ink)); }
.hero__inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero h1 { max-width: 13.5em; color: #fff; text-shadow: 0 2px 40px rgba(11,14,20,.5); }
.hero .lede { max-width: 38em; color: #b6bed0; text-shadow: 0 1px 20px rgba(11,14,20,.8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }
.hero__note { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: #8a93a8; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; }
.hero__note i { width: 3px; height: 3px; border-radius: 50%; background: #4b5468; display: inline-block; }
.hero__stage { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 64px); max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.hero__stage .frame { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); }
.hero__stage .frame__screen { aspect-ratio: 2.1 / 1; }
.hero__stage .frame__screen > img { object-position: 50% 92%; transform: scale(1.18); transform-origin: 72% 78%; }
.hero__stage .tilt { position: relative; }
.hero__stage .chip:nth-of-type(1) { left: -2%; top: 24%; --fd: 0s; }
.hero__stage .chip:nth-of-type(2) { right: -3%; top: 14%; --fd: 1.4s; }
.hero__stage .chip:nth-of-type(3) { right: 4%; bottom: 24%; --fd: 2.6s; --c: var(--violet-2); }
.hero__stage .chip:nth-of-type(1) { --c: var(--teal); }

/* ---------- logos section ---------- */
.logos .section__head { margin-bottom: 40px; }
.logos__rows { display: grid; gap: 14px; margin-bottom: clamp(48px, 6vw, 80px); }
.logos .marquee__track { padding-inline: 8px; }

/* ---------- how it works ---------- */
.how { overflow: hidden; }
.how__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 50% at 80% 0%, rgba(109,74,255,.18), transparent 70%), radial-gradient(50% 40% at 10% 100%, rgba(255,122,26,.12), transparent 70%); pointer-events: none; }
.how .wrap { position: relative; z-index: 1; }

/* ---------- governance ---------- */
.gov-section { overflow: hidden; }
.gov-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 40%, rgba(109,74,255,.2), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(255,122,26,.1), transparent 70%); pointer-events: none; }
.gov__copy h2 { margin: 16px 0 20px; }

/* ---------- pricing head ---------- */
.pricing__head { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; margin-bottom: 48px; }
.pricing__head .section__head { margin-bottom: 0; }

/* ---------- cloud / on-prem ---------- */
.deploy-section { overflow: hidden; }
.deploy-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 0%, rgba(255,122,26,.12), transparent 70%); pointer-events: none; }

/* ---------- final cta ---------- */
.final { padding-top: 0; }
.faq-section { padding-bottom: clamp(56px, 7vw, 96px); }
.final-wrap { padding-bottom: clamp(56px, 7vw, 96px); background: var(--paper); }

@media (max-width: 760px) {
  .hero__stage { padding-inline: 12px; }
  .hero__stage .chip:nth-of-type(1) { left: 6px; top: -14px; }
  .hero__stage .chip:nth-of-type(2) { right: 6px; top: auto; bottom: 26%; }
  .hero__stage .chip:nth-of-type(3) { display: none; }
  .hero__stage .frame__screen { aspect-ratio: 1.5 / 1; }
}
@media (max-width: 760px) { .hero__fallback { opacity: .22; } .hero.has-3d .hero__fallback { opacity: 0; } }

/* The closing CTA card must never touch the section above it: when that section is not a light one (so it has no bottom padding to lean on), give the CTA its own breathing room. */
:not(.theme-light) + .final-wrap { padding-top: clamp(56px, 7vw, 96px); }