/* ============================================================
   HERO — "Aurora Bloom"
   A layered mesh of brand orbs, a wide bloom behind the headline, and a
   film grain on top so the gradients don't read as flat CSS. The same
   palette then continues down the rest of the page as a much fainter
   wash (body::before in index.css).
============================================================ */
.hero{
  position:relative;
  margin-top:-108px;            /* pull under the sticky transparent header */
  padding:212px 0 128px;         /* 104 default top + 108 to compensate for the margin pull */
  overflow:hidden;
  isolation:isolate;
}

/* ---- Layer 1: brand orb mesh + headline bloom ---- */
.hero::before{
  content:"";position:absolute;inset:-10% -10% 0;z-index:0;pointer-events:none;
  background:
    /* wide bloom directly behind the headline */
    radial-gradient(58% 34% at 50% 30%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(620px 520px at 50% 2%,  rgba(143,83,161,0.34), transparent 66%),
    radial-gradient(520px 460px at 86% 26%, rgba(36,162,177,0.28), transparent 66%),
    radial-gradient(440px 400px at 10% 46%, rgba(225,133,10,0.22), transparent 66%),
    radial-gradient(400px 360px at 68% 76%, rgba(140,174,28,0.20), transparent 66%);
  filter:blur(14px);
  animation:hero-drift 22s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
@keyframes hero-drift{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(-26px,-18px,0) scale(1.06);}
}

/* ---- Layer 2: film grain ---- */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:0.5;
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 50% 34%, #000 12%, transparent 78%);
  mask-image:radial-gradient(ellipse 82% 62% at 50% 34%, #000 12%, transparent 78%);
}

:root[data-theme="dark"] .hero::before{
  background:
    radial-gradient(58% 34% at 50% 30%, rgba(255,255,255,0.08), transparent 70%),
    radial-gradient(620px 520px at 50% 2%,  rgba(176,111,196,0.38), transparent 66%),
    radial-gradient(520px 460px at 86% 26%, rgba(60,192,208,0.28), transparent 66%),
    radial-gradient(440px 400px at 10% 46%, rgba(225,133,10,0.20), transparent 66%),
    radial-gradient(400px 360px at 68% 76%, rgba(140,174,28,0.18), transparent 66%);
}
:root[data-theme="dark"] .hero::after{opacity:0.35;}

.hero-inner{text-align:center;max-width:920px;margin:0 auto;position:relative;z-index:2;}

/* Faint lift off the bloom in light mode; unnecessary once the paper is
   dark, where it would only smear the letterforms. */
.hero h1{text-shadow:0 1px 0 rgba(255,255,255,0.45);}
:root[data-theme="dark"] .hero h1{text-shadow:none;}

.hero h1{
  margin-top:24px;font-size:clamp(44px, 7.5vw, 92px);
  line-height:0.98;letter-spacing:-0.035em;font-weight:500;
}
.hero h1 .accent{
  font-weight:500;
  /* Deep stops, not the base tokens: the base purple-to-orange sweep washed
     out to lavender over the bloom. Same three brand hues, readable weight. */
  background:linear-gradient(120deg, var(--purple-deep) 0%, var(--purple) 34%, var(--orange-deep) 72%, var(--turquoise-deep) 108%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Extend the gradient fill area below the baseline so descenders (g, p, y)
     receive the gradient instead of rendering transparent. */
  padding-bottom:0.18em;
  margin-bottom:-0.18em;
  /* The h1's white lift shadow paints above a background-clip:text fill and
     was bleaching this word to pastel. The gradient needs no lift. */
  text-shadow:none;
}
.title-line{display:block;}
.title-word{
  display:inline-block;opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease;
}
.title-word.in{opacity:1;transform:none;filter:blur(0);}

.hero p.lede{
  margin:24px auto 0;max-width:640px;
  font-size:clamp(16px, 1.6vw, 19px);color:var(--ink-dim);line-height:1.55;
}
.hero p.lede strong{color:var(--ink);font-weight:600;}

.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap;}

/* ----- Stat strip ----- */
.stat-strip{
  margin:64px auto 0;max-width:880px;
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:center;
  padding:18px 28px;border:1px solid color-mix(in srgb, var(--purple) 18%, var(--line));border-radius:999px;
  background:color-mix(in srgb, var(--bg-card) 58%, transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 18px 44px rgba(15,15,20,0.08);
}
:root[data-theme="dark"] .stat-strip{
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 44px rgba(0,0,0,0.34);
}

/* Depth on the hero CTAs so they sit on the bloom rather than in it. */
.hero-actions .btn-primary{
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 28px rgba(15,15,20,0.20);
}
.hero-actions .btn-ghost{
  background:color-mix(in srgb, var(--bg-card) 62%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(15,15,20,0.06);
}
.stat-strip .stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.stat-strip .num{
  font-family:var(--font-display);
  font-size:34px;font-weight:500;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);
}
.stat-strip .num em{
  font-style:normal;font-weight:500;
  background:linear-gradient(120deg,var(--purple-deep),var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-strip .lbl{ font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.stat-strip .vsep{width:1px;height:38px;background:var(--line);}

/* ----- Trust row ----- */
.trust{margin-top:56px;text-align:center;}
.trust .label{ margin-bottom:18px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.trust-row{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;align-items:center;color:var(--ink-mute);}
.trust-row span{font-size:14px;letter-spacing:-0.005em;display:inline-flex;align-items:center;gap:8px;}
.trust-row span i{font-size:16px;color:var(--ink-dim);}

@media (max-width: 760px){
  .hero{margin-top:-52px;padding:124px 0 72px;}
  /* Three across stays one compact row on phones instead of a tall stack. */
  .stat-strip{margin-top:44px;padding:16px 8px;border-radius:24px;column-gap:6px;}
  .stat-strip .num{font-size:22px;}
  .stat-strip .lbl{font-size:12.5px;text-align:center;line-height:1.25;}
  .stat-strip .vsep{height:44px;}
  .trust-row{gap:20px;}
}

@media (prefers-reduced-motion: reduce){
  .hero::before{animation:none;}
}