/* ---- HERO ---- */
/* Issue 1 fix: symmetric padding just clears the fixed nav (80px ≈ nav height);
   flex align-items:center then centers the content block in the remaining space.
   The previous 112px/72px asymmetric padding shifted the flex midpoint ~20px below
   visual center — noticeable on mid-height viewports. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 80px 0; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero .vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 75% 15%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 55%),
    radial-gradient(90% 70% at 10% 90%, color-mix(in oklch, var(--accent-2) 7%, transparent), transparent 50%),
    linear-gradient(180deg, transparent 55%, var(--bg) 99%);
}
.hero-inner { position: relative; z-index: 4; width: 100%; }
.hero .tagline { margin-bottom: 28px; }
.hero h1 {
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.0;
  max-width: 15ch;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.26em;
  row-gap: 0;
}
.hero h1 .w { display: inline-block; }
.hero h1 .w > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  animation: heroUp .6s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--d, 0ms);
}
.hero h1 em { font-style: normal; color: var(--accent); }
@keyframes heroUp { to { opacity: 1; transform: none; } }

.hero .sub {
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeIn .6s ease forwards .42s;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; animation: fadeIn .6s ease forwards .54s; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-mute);
  opacity: 0; animation: fadeIn .6s ease forwards .8s;
}
.scroll-cue .bar { width: 1px; height: 42px; background: linear-gradient(var(--ink-mute), transparent); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content:""; position:absolute; top:0; left:0; width:100%; height:40%; background: var(--accent); animation: cueRun 1.8s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes cueRun { 0%{ transform: translateY(-100%);} 60%,100%{ transform: translateY(260%);} }

.hero .stat-strip {
  display: flex; gap: 38px; margin-top: 54px; flex-wrap: wrap;
  opacity: 0; animation: fadeIn .6s ease forwards .64s;
}
.hero .stat-strip .s { }
.hero .stat-strip .n { font-family: var(--display); font-size: 30px; color: var(--ink); }
.hero .stat-strip .l { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce){
  .hero h1 .w > span, .hero .sub, .hero .cta-row, .scroll-cue, .hero .stat-strip { animation: none !important; opacity: 1 !important; transform: none !important; }
}