/* ==========================================================================
   hero.css — the WebGL hero shell.
   The canvas only ever draws the particle network; every gradient, vignette
   and light pool below is CSS, so the hero is fully composed at first paint
   and WebGL arriving late never shifts or flashes anything.
   ========================================================================== */

.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100svh;
  padding-top:calc(var(--header-h) + 2rem);
  padding-bottom:clamp(4rem,10vh,7rem);
  overflow:hidden;
  isolation:isolate;

  /* The base field. Two light pools — a cool one low-left, a violet one
     high-right — over the darkest surface, so the particle network has
     something to sit in rather than float on flat black. */
  background:
    radial-gradient(58% 46% at 18% 88%,rgba(6,182,212,.13) 0%,rgba(6,182,212,0) 70%),
    radial-gradient(64% 54% at 88% 6%,rgba(139,92,246,.15) 0%,rgba(139,92,246,0) 68%),
    radial-gradient(46% 38% at 52% 42%,rgba(99,102,241,.10) 0%,rgba(99,102,241,0) 72%),
    var(--surface-0);
}

/* fine grid, fading out toward the edges — reads as engineering paper */
.hero::before{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(72% 62% at 50% 44%,#000 0%,transparent 82%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 44%,#000 0%,transparent 82%);
}

/* bottom fade, so the hero dissolves into the next section instead of
   ending on a hard edge */
.hero::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:clamp(90px,16vh,190px);
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(11,17,32,.6) 55%,var(--surface-0) 100%);
}

/* Scrim between the network and the copy. The particle field is decorative
   and lands wherever it lands, so the headline's contrast ratio must not
   depend on it — this guarantees a dark ground under the text column at any
   viewport, while leaving the right-hand side of the field fully visible. */
.hero__scrim{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(58% 62% at 22% 50%,rgba(11,17,32,.82) 0%,rgba(11,17,32,.55) 42%,rgba(11,17,32,0) 76%),
    linear-gradient(90deg,rgba(11,17,32,.55) 0%,rgba(11,17,32,.12) 46%,rgba(11,17,32,0) 68%);
}
@media (max-width:719px){
  /* on a phone the copy spans the full width, so the scrim has to as well */
  .hero__scrim{
    background:linear-gradient(180deg,rgba(11,17,32,.72) 0%,rgba(11,17,32,.5) 62%,rgba(11,17,32,.2) 100%);
  }
}

/* ── canvas ─────────────────────────────────────────────────────────────── */
.hero__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
  opacity:0;
  transition:opacity 1200ms var(--ease-out);
  /* the network is decorative; pointer events belong to the copy above it */
  pointer-events:none;
}
.hero__canvas.is-ready{ opacity:1; }

/* ── content ────────────────────────────────────────────────────────────── */
.hero__inner{ position:relative; z-index:2; width:100%; }

.hero__content{ max-width:60rem; }

.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem .95rem .45rem .5rem;
  border-radius:99px;
  border:1px solid var(--rule-strong);
  background:rgba(148,163,184,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:var(--t-xs); font-weight:500;
  color:var(--ink-soft);
  margin-bottom:var(--sp-5);
}
.hero__badge .dot{
  position:relative;
  width:7px; height:7px; margin-left:.35rem;
  border-radius:50%;
  background:var(--success);
  flex:none;
}
.hero__badge .dot::after{
  content:'';
  position:absolute; inset:-3px;
  border-radius:50%;
  border:1px solid var(--success);
  opacity:.6;
  animation:pulseRing 2.4s var(--ease-out) infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(.75); opacity:.75; }
  70%,100%{ transform:scale(1.9); opacity:0; }
}

.hero__title{
  font-size:var(--t-hero);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.032em;
  margin-bottom:var(--sp-5);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }

.hero__lede{
  font-size:clamp(1.05rem,1vw + .85rem,1.3125rem);
  line-height:1.6;
  color:var(--ink-muted);
  max-width:36rem;
  margin-bottom:var(--sp-7);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--sp-4);
  align-items:center;
}

.hero__proof{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--sp-4) var(--sp-6);
  margin-top:var(--sp-8);
  padding-top:var(--sp-5);
  border-top:1px solid var(--rule);
  max-width:44rem;
}
.hero__proof-item{
  display:flex; flex-direction:column; gap:.1rem;
}
.hero__proof-item b{
  font-family:var(--font-display);
  font-size:var(--t-xl);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.02em;
  line-height:1.2;
}
.hero__proof-item span{
  font-size:var(--t-xs);
  color:var(--gray);
  letter-spacing:.04em;
}

/* ── scroll cue ─────────────────────────────────────────────────────────── */
.scroll-cue{
  position:absolute;
  left:50%; bottom:clamp(1.25rem,3.5vh,2.25rem);
  transform:translateX(-50%);
  z-index:3;
  display:none;
  flex-direction:column; align-items:center; gap:.55rem;
  font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray);
  transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
@media (min-height:680px) and (min-width:640px){ .scroll-cue{ display:flex; } }
.scroll-cue:hover{ color:var(--ink-soft); }
.scroll-cue__track{
  position:relative;
  width:1px; height:38px;
  background:linear-gradient(180deg,var(--rule-strong),transparent);
  overflow:hidden;
}
.scroll-cue__track::after{
  content:'';
  position:absolute; left:0; top:0;
  width:1px; height:14px;
  background:linear-gradient(180deg,var(--primary-light),transparent);
  animation:cueRun 2.1s var(--ease-out) infinite;
}
@keyframes cueRun{
  0%{ transform:translateY(-14px); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(38px); opacity:0; }
}
/* hidden once the reader has clearly started scrolling */
.scroll-cue.is-gone{ opacity:0; pointer-events:none; }

/* ── staged entrance ────────────────────────────────────────────────────── */
/* Elements start hidden only when JS is present, so a no-JS visitor still
   sees a complete hero. */
.js .hero__reveal{
  opacity:0;
  transform:translateY(22px);
}
.js .hero.is-live .hero__reveal{
  animation:heroIn 900ms var(--ease-out) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* ── page hero (interior pages) ─────────────────────────────────────────── */
.page-hero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(3.5rem,9vh,6rem));
  padding-bottom:clamp(2.5rem,6vh,4rem);
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(60% 70% at 22% 0%,rgba(99,102,241,.16) 0%,transparent 66%),
    radial-gradient(50% 60% at 86% 10%,rgba(6,182,212,.11) 0%,transparent 68%),
    var(--surface-0);
  border-bottom:1px solid var(--rule);
}
.page-hero::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 100% at 30% 0%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(70% 100% at 30% 0%,#000,transparent 80%);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ font-size:var(--t-4xl); font-weight:500; letter-spacing:-.028em; }
.page-hero .section-lede{ margin-top:var(--sp-4); }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:var(--t-xs);
  color:var(--gray);
  margin-bottom:var(--sp-4);
}
.breadcrumb a{ color:var(--ink-muted); transition:color var(--dur) var(--ease); }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb svg{ width:.75rem; height:.75rem; opacity:.5; }

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .js .hero__reveal{ opacity:1; transform:none; animation:none!important; }
  .hero__badge .dot::after,
  .scroll-cue__track::after{ animation:none; }
  .scroll-cue__track::after{ opacity:.7; height:20px; }
}