/* Landing: the template-1 hero composition, then six pinned chapters over the WebGL plate. */

.landing { min-height: 100%; overflow-x: hidden; }

/* ── plate ─────────────────────────────────────────────────────────────── */

.plate { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--stage); }
.plate-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.has-webgl .plate-canvas.is-ready { opacity: 1; }
.poster {
  position: absolute; inset: 0; background-size: cover; background-position: 70% center;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.poster-globe { background-image: url("../assets/lunar/poster_globe.jpg"); }
.poster-pole { background-image: url("../assets/lunar/poster_pole.jpg"); background-position: center; }
.no-webgl .poster-globe { opacity: 1; }
.no-webgl.at-pole .poster-globe { opacity: 0; }
.no-webgl.at-pole .poster-pole { opacity: .8; }

/* Measured edge fades from the template, plus a left scrim for chapter copy. */
.plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(5,5,5,0) 78.8%, rgba(5,5,5,.23) 79.6%, rgba(5,5,5,.45) 81.4%,
      rgba(5,5,5,.75) 83.3%, rgba(5,5,5,.84) 85.2%, rgba(5,5,5,.888) 88%,
      rgba(5,5,5,.905) 91%, rgba(5,5,5,.96) 95%, #050505 100%),
    linear-gradient(to right,
      #050505 calc(50% - 746 * var(--u)),
      transparent calc(50% - 676 * var(--u)),
      transparent calc(50% + 676 * var(--u)),
      #050505 calc(50% + 746 * var(--u)));
  transition: opacity .8s var(--ease);
}
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(5,5,5,.82) 0%, rgba(5,5,5,.55) 30%, rgba(5,5,5,0) 58%);
  opacity: 0; transition: opacity .8s var(--ease);
}
.in-story .plate::before { opacity: 1; }
.in-story .plate::after { opacity: .35; }
.plate::after { z-index: 1; }

/* Chapter index on the right edge. */
.story-rail {
  position: fixed; z-index: 9; right: calc(34 * var(--u)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u));
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s;
}
.in-story .story-rail { opacity: 1; visibility: visible; }
.rail-tick {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(7 * var(--u)) 0 calc(7 * var(--u)) calc(12 * var(--u));
  background: none; border: 0; cursor: pointer; color: var(--faint);
  font: inherit;
}
.rail-num { font-family: var(--mono); font-size: calc(11.5 * var(--u)); letter-spacing: .1em; transition: color .4s var(--ease); }
.rail-tick i {
  display: block; width: calc(14 * var(--u)); height: 1px; background: currentColor;
  transition: width .5s var(--ease), background-color .4s var(--ease);
}
.rail-title {
  font-size: calc(13.5 * var(--u)); color: var(--nav); white-space: nowrap;
  opacity: 0; transform: translateX(calc(8 * var(--u)));
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.rail-tick:hover, .rail-tick:focus-visible { color: var(--nav); }
.rail-tick:hover .rail-title, .rail-tick:focus-visible .rail-title { opacity: 1; transform: none; }
.rail-tick[aria-current="step"] { color: var(--ink); }
.rail-tick[aria-current="step"] i { width: calc(30 * var(--u)); background: var(--verified); }

/* Handoff to the workspace: the page falls away, the globe dims under the
   same gradient the workspace backdrop uses. */
.stage, .story, .try, .gallery, .pipeline, .proof, .site-footer, .story-rail { transition: opacity .55s var(--ease); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, #050505 0%, rgba(5,5,5,.92) 38%, rgba(5,5,5,.55) 100%);
  opacity: 0; transition: opacity .7s var(--ease);
}
.is-leaving::after { opacity: 1; }
.is-leaving :is(.stage, .story, .try, .gallery, .pipeline, .proof, .site-footer, .story-rail, .lock-label) { opacity: 0 !important; }
.is-leaving .capsule { opacity: 0 !important; transition: opacity .45s var(--ease); }  /* beats its entrance animation */
.is-leaving .plate-canvas { opacity: .16 !important; transition: opacity .75s var(--ease); }  /* ≈ the workspace backdrop: dimmer material and light, under .38 */
.is-leaving.at-pole .plate-canvas { opacity: 0 !important; }

/* "Locked" tag that follows the reticle's corner in the final chapter. */
.lock-label {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
  transform: translate(var(--lx, -999px), var(--ly, -999px));
  opacity: var(--lo, 0);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--verified);
}
.lock-label i {
  align-self: center; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verified); box-shadow: 0 0 8px var(--verified);
}
.lock-label b { font-weight: 500; }
.lock-label span { font-family: var(--font); font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.no-webgl .lock-label { display: none; }

/* ── stage: first viewport ─────────────────────────────────────────────── */

.stage {
  position: relative; z-index: 2;
  height: 100vh; height: 100dvh; min-height: 520px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Glass capsule: brand, links and the primary pill in one floating bar. */
.capsule {
  position: fixed; z-index: 10; left: 50%; top: calc(27 * var(--u)); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(30 * var(--u));
  height: calc(58 * var(--u)); padding: 0 calc(7 * var(--u)) 0 calc(20 * var(--u));
  border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  font-size: calc(17 * var(--u)); color: var(--nav);
  transition: top .6s var(--ease), height .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.pill-nav { transition: height .6s var(--ease), transform .5s var(--ease), background-color .3s var(--ease); }
.nav-condensed .capsule {
  top: calc(14 * var(--u)); height: calc(50 * var(--u));
  background: rgba(12,12,12,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.55);
}
.nav-condensed .pill-nav { height: calc(38 * var(--u)); }

/* Glass sheen that follows the pointer across the capsule. */
.capsule::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(calc(160 * var(--u)) circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.capsule.is-lit::before { opacity: 1; }

/* Story progress: a hairline along the capsule's lower edge, filled by scroll. */
.story-progress {
  position: absolute; left: calc(28 * var(--u)); right: calc(28 * var(--u)); bottom: -1px; height: 1px;
  background: rgba(255,255,255,.08); overflow: hidden;
  opacity: 0; transition: opacity .6s var(--ease);
}
.story-progress::after {
  content: ""; position: absolute; inset: 0; background: var(--verified);
  transform-origin: left center; transform: scaleX(var(--story, 0));
}
.nav-condensed .story-progress { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); color: #fff; }
.brand-mark { width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex: none; }
.wordmark { font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: .02em; }
.capsule-sep { width: 1px; height: calc(22 * var(--u)); background: rgba(255,255,255,.14); }
.capsule-link { transition: color .3s var(--ease); }
.capsule-link:hover { color: var(--ink); }
.pill-nav { height: calc(44 * var(--u)); padding: 0 calc(20 * var(--u)); font-size: calc(16.5 * var(--u)); }
.pill span { transform: translateY(calc(1 * var(--u))); }

.burger { display: none; }
.menu { display: none; }

/* Status chip above the headline. */
.chip {
  position: absolute; left: calc(75.5 * var(--u)); top: calc(230.5 * var(--u) - 64 * var(--h));
  display: inline-flex; align-items: center; gap: calc(10 * var(--h));
  margin: 0; padding: calc(7 * var(--h)) calc(15 * var(--h));
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-size: calc(15 * var(--h)); color: #cfcfcf; white-space: nowrap;
}
.chip i {
  width: calc(8 * var(--h)); height: calc(8 * var(--h)); border-radius: 50%;
  background: var(--verified); box-shadow: 0 0 calc(10 * var(--h)) var(--verified);
}
@media (prefers-reduced-motion: no-preference) {
  .chip i { animation: pulse 2.8s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .45; box-shadow: 0 0 calc(4 * var(--h)) var(--verified); } }

.headline {
  position: absolute; left: calc(75.5 * var(--u)); top: calc(230.5 * var(--u));
  margin: 0;
  font-size: calc(80 * var(--h)); line-height: calc(84 * var(--h));
  font-weight: 500; letter-spacing: -.035em;
  white-space: nowrap; color: var(--ink);
}
/* Each line rises from behind its own edge; the silver runs top line to bottom
   line, and one highlight sweeps across after the lines have landed. */
.headline .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.headline .line-inner {
  display: block;
  background-image:
    linear-gradient(100deg, transparent 42%, rgba(244,248,255,.95) 50%, transparent 58%),
    linear-gradient(180deg, var(--silver-top), var(--silver-bottom));
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.headline .line:first-child .line-inner { --silver-top: #ffffff; --silver-bottom: #e4e4e4; }
.headline .line:last-child .line-inner { --silver-top: #cdcdcd; --silver-bottom: #8f8f8f; }
@keyframes lineUp { from { transform: translateY(108%); } }
@keyframes sheen { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }

.sub {
  position: absolute; left: calc(75.5 * var(--u)); top: calc(230.5 * var(--u) + 196 * var(--h));
  margin: 0;
  font-size: calc(20.7 * var(--h)); line-height: calc(29 * var(--h));
  color: var(--muted);
}
.sub span { display: block; white-space: nowrap; }

.hero .pill-cta {
  position: absolute; left: calc(74.9 * var(--u)); top: calc(230.5 * var(--u) + 284 * var(--h));
  height: calc(52 * var(--h)); padding: 0 calc(28 * var(--h));
  font-size: calc(18.5 * var(--h));
}
.hero .ghost {
  position: absolute; top: calc(230.5 * var(--u) + 299 * var(--h));
  left: calc(74.9 * var(--u) + 232 * var(--h));
  font-size: calc(18.5 * var(--h)); letter-spacing: calc(.12 * var(--h));
}

/* Telemetry readout along the bottom of the first screen. */
.readout {
  position: absolute; left: calc(75.5 * var(--u)); right: calc(75.5 * var(--u)); top: calc(962 * var(--u));
  display: flex; gap: calc(84 * var(--u));
  margin: 0; padding-top: calc(20 * var(--u));
  border-top: 1px solid rgba(255,255,255,.08);
}
.readout dt {
  font-family: var(--mono); font-size: calc(12.5 * var(--u)); letter-spacing: .12em;
  text-transform: uppercase; color: var(--strip);
}
.readout dd { margin: calc(6 * var(--u)) 0 0; font-size: calc(17 * var(--u)); font-weight: 500; color: var(--ink); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .capsule { animation: riseCapsule .8s var(--ease) both; }
  .chip { animation: rise .9s var(--ease) both; }
  .headline .line-inner { animation: lineUp 1.1s var(--ease) .06s both, sheen 1.6s ease-in-out 1.2s both; }
  .headline .line:last-child .line-inner { animation-delay: .18s, 1.35s; }
  .sub { animation: rise .9s var(--ease) .14s both; }
  .hero .pill-cta, .hero .ghost { animation: rise .9s var(--ease) .22s both; }
  .readout { animation: fade 1.1s ease .34s both; }
}
@keyframes riseCapsule {
  from { opacity: 0; transform: translate(-50%, calc(14 * var(--u))); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ── chapters ──────────────────────────────────────────────────────────── */

.story { position: relative; z-index: 2; }
.chapter { position: relative; height: 220vh; }   /* 120vh pinned per chapter */
.chapter:last-child { height: 200vh; }
.chapter-pin {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; align-items: center;
  padding-left: calc(75.5 * var(--u));
}
.chapter:not(.is-active) .chapter-copy { visibility: hidden; }
.chapter-copy {
  width: min(calc(560 * var(--h)), 42vw);
  /* --vis is the exit: the block lifts and fades as its chapter scrolls away. */
  opacity: var(--vis, 1);
  transform: translateY(calc((1 - var(--vis, 1)) * -18px));
  will-change: opacity, transform;
}
/* Entry is per line (--r, 0..1, set by scroll): each rises out of its own mask. */
.cline { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.cline-inner { display: block; }
.js .cline-inner {
  transform: translateY(calc((1 - var(--r, 0)) * 110%));
  opacity: calc(.15 + .85 * var(--r, 0));
}
.js .reveal {
  opacity: var(--r, 0);
  transform: translateY(calc((1 - var(--r, 0)) * 12px));
}
.chapter-index {
  margin: 0 0 calc(22 * var(--h));
  font-family: var(--mono); font-size: calc(13 * var(--h)); letter-spacing: .16em; color: var(--strip);
  font-variant-numeric: tabular-nums;
}
.chapter h2 {
  margin: 0 0 calc(22 * var(--h));
  font-size: calc(50 * var(--h)); line-height: 1.1; font-weight: 400; letter-spacing: calc(.2 * var(--h));
}
.chapter-copy > p:not(.chapter-index) {
  margin: 0; font-size: calc(19.5 * var(--h)); line-height: 1.55; color: var(--muted);
}
.actions-flow { display: flex; align-items: center; gap: calc(34 * var(--h)); margin-top: calc(40 * var(--h)); }
.actions-flow .pill { height: calc(50 * var(--h)); padding: 0 calc(28 * var(--h)); font-size: calc(20.6 * var(--h)); }
.actions-flow .ghost { font-size: calc(20.6 * var(--h)); }



/* ── portrait / narrow: flow layout ────────────────────────────────────── */

@media (max-aspect-ratio: 11/10) {
  :root { --m: min(calc(100vw / 430), 1.34px); --u: var(--m); --h: var(--m); }

  .plate::after {
    background:
      linear-gradient(to right, rgba(5,5,5,.86), rgba(5,5,5,.66) 42%, rgba(5,5,5,.20) 78%, rgba(5,5,5,.10)),
      linear-gradient(to bottom, rgba(5,5,5,.72), rgba(5,5,5,.34) 24%, rgba(5,5,5,.34) 56%, rgba(5,5,5,.80) 82%, rgba(5,5,5,.97) 94%, #050505);
  }
  .plate::before { background: linear-gradient(to bottom, rgba(5,5,5,.2) 30%, rgba(5,5,5,.85) 75%); }

  .stage {
    display: flex; flex-direction: column;
    padding: calc(22 * var(--m) + env(safe-area-inset-top)) calc(22 * var(--m) + env(safe-area-inset-right))
             calc(28 * var(--m) + env(safe-area-inset-bottom)) calc(22 * var(--m) + env(safe-area-inset-left));
  }
  .topbar {
    position: fixed; z-index: 5; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(14 * var(--m) + env(safe-area-inset-top)) calc(22 * var(--m) + env(safe-area-inset-right))
             calc(14 * var(--m)) calc(22 * var(--m) + env(safe-area-inset-left));
    border-bottom: 1px solid transparent;
    transition: background-color .5s var(--ease), border-color .5s var(--ease);
  }
  .nav-condensed .topbar {
    background: rgba(5,5,5,.62); border-bottom-color: rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  }
  .nav-condensed .capsule { top: auto; height: auto; background: none; box-shadow: none; }
  .story-progress { left: 0; right: 0; bottom: -1px; }
  .capsule {
    position: static; transform: none; height: auto; padding: 0; gap: 0;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .capsule-sep, .capsule-link, .pill-nav { display: none; }
  /* Opacity only: a transform animation would re-centre the capsule (riseCapsule)
     and make it the containing block for the full-width progress hairline. */
  .capsule { animation-name: fade; }
  .brand-mark { width: calc(34 * var(--m)); height: calc(34 * var(--m)); }
  .wordmark { font-size: calc(18 * var(--m)); }

  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(6 * var(--m));
    width: calc(52 * var(--m)); height: calc(40 * var(--m)); border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .burger i { display: block; width: calc(18 * var(--m)); height: 1.5px; background: var(--ink); transition: transform .42s var(--ease); }
  .is-open .burger i:first-child { transform: translateY(calc(3.8 * var(--m))) rotate(45deg); }
  .is-open .burger i:last-child { transform: translateY(calc(-3.8 * var(--m))) rotate(-45deg); }

  .menu {
    display: block; position: fixed; inset: 0; z-index: 4;
    background: linear-gradient(to bottom, rgba(5,5,5,.94), rgba(5,5,5,.98));
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transition: opacity .42s var(--ease), visibility .42s;
  }
  .is-open .menu { opacity: 1; visibility: visible; }
  .menu-inner { padding: calc(110 * var(--m)) calc(22 * var(--m)) calc(40 * var(--m)); }
  .menu-eyebrow { margin: 0 0 calc(20 * var(--m)); color: var(--strip); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
  .menu-list { list-style: none; margin: 0; padding: 0; }
  .menu-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(14 * var(--m)) 0; border-bottom: 1px solid var(--line);
    font-size: max(25px, calc(31 * var(--m)));
  }
  .menu-list a::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg); }
  .menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: calc(34 * var(--m)); }
  .menu-foot .pill { height: 48px; padding: 0 24px; font-size: 17px; }
  .menu-foot .ghost { font-size: 17px; }
  .menu-eyebrow, .menu-list li, .menu-foot { opacity: 0; transform: translateY(12px); transition: opacity .42s var(--ease), transform .42s var(--ease); }
  .is-open .menu-eyebrow, .is-open .menu-list li, .is-open .menu-foot { opacity: 1; transform: none; }
  .is-open .menu-eyebrow { transition-delay: .06s; }
  .is-open .menu-list li:nth-child(1) { transition-delay: .10s; }
  .is-open .menu-list li:nth-child(2) { transition-delay: .16s; }
  .is-open .menu-list li:nth-child(3) { transition-delay: .22s; }
  .is-open .menu-list li:nth-child(4) { transition-delay: .28s; }
  .is-open .menu-foot { transition-delay: .34s; }

  .hero { margin-top: auto; }
  .chip, .headline, .sub, .hero .pill-cta, .hero .ghost, .readout { position: static; transform: none; }
  .chip { margin-bottom: calc(18 * var(--m)); font-size: calc(13 * var(--m)); }
  .headline { white-space: normal; font-size: calc(46 * var(--m)); line-height: 1.06; }
  .sub { margin-top: calc(18 * var(--m)); font-size: calc(17 * var(--m)); line-height: 1.45; word-spacing: 0; }
  .sub span { display: inline; white-space: normal; }
  .hero .actions { display: flex; align-items: center; gap: calc(26 * var(--m)); margin-top: calc(28 * var(--m)); }
  .hero .pill-cta { height: calc(48 * var(--m)); padding: 0 calc(24 * var(--m)); font-size: calc(17 * var(--m)); }
  .hero .ghost { font-size: calc(17 * var(--m)); }
  .readout {
    display: grid; grid-template-columns: 1fr; gap: calc(12 * var(--m));
    margin-top: calc(40 * var(--m)); padding-top: calc(16 * var(--m));
  }
  .readout dt { font-size: calc(11 * var(--m)); }
  .readout dd { font-size: calc(15 * var(--m)); white-space: normal; }

  .story-rail { display: none; }
  .chapter-pin { align-items: flex-end; padding: 0 calc(22 * var(--m)) calc(56 * var(--m)); }
  .chapter-copy { width: 100%; }
  .chapter h2 { font-size: calc(34 * var(--m)); }
  .chapter-copy > p:not(.chapter-index) { font-size: calc(16 * var(--m)); }
  .chapter-index { font-size: calc(12 * var(--m)); }
  .actions-flow { flex-wrap: wrap; gap: 20px; }
  .actions-flow .pill { height: 48px; padding: 0 24px; font-size: 17px; }
  .actions-flow .ghost { font-size: 17px; }
}

@media (min-width: 600px) and (max-aspect-ratio: 11/10) {
  :root { --m: min(calc(100vw / 860), calc(100vh / 760), 1.25px); }
  .readout { grid-template-columns: repeat(3, auto); justify-content: start; gap: calc(40 * var(--m)); }
}

/* ── first-visit intro ─────────────────────────────────────────────────── */

.intro { display: none; }
.intro-pending .intro {
  position: fixed; inset: 0; z-index: 40; display: block; pointer-events: none;
  visibility: visible; opacity: 1; transition: opacity .6s var(--ease), visibility .6s;
}
.intro-done .intro { opacity: 0; visibility: hidden; }

/* Hold the hero's entrance until the intro hands over. */
.intro-pending:not(.intro-done) :is(.capsule, .chip, .headline .line-inner, .sub, .hero .pill-cta, .hero .ghost, .readout) {
  animation-play-state: paused;
}
.intro-pending:not(.intro-done) .plate-canvas { transition-duration: .9s; }

.intro-lock {
  position: absolute; left: 74.7%; top: 49%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.intro-reticle { width: calc(250 * var(--u)); height: calc(250 * var(--u)); overflow: visible; opacity: 0; }
.intro-reticle circle, .intro-reticle path { fill: none; stroke: var(--verified); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.intro-reticle .intro-ring-outer { stroke-dasharray: 4 7; opacity: .6; }
.intro-status {
  margin: 0; position: relative; height: 14px; width: 120px; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--verified);
}
.intro-status span { position: absolute; inset: 0; opacity: 0; }

.intro-skip {
  position: absolute; right: calc(34 * var(--u)); bottom: calc(30 * var(--u)); pointer-events: auto;
  background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; cursor: pointer;
  padding: 7px 14px; font: 500 12px var(--font); color: var(--nav);
  opacity: 0; animation: statusOn .6s var(--ease) .6s forwards;
}
.intro-skip:hover { color: var(--ink); border-color: rgba(255,255,255,.4); }

.intro-play .intro-reticle { animation: reticleIn 1.1s cubic-bezier(.34, 1.56, .64, 1) .7s forwards, reticleOut .5s var(--ease) 2.1s forwards; }
.intro-play .intro-ring-outer { transform-origin: 100px 100px; animation: spin 2.4s linear .7s infinite; }
.intro-play .intro-acquiring { animation: statusOn .3s ease .8s forwards, statusOff .2s ease 1.55s forwards; }
.intro-play .intro-locked { animation: statusOn .25s ease 1.6s forwards, statusOff .4s ease 2.1s forwards; }
@keyframes reticleIn { from { opacity: 0; transform: scale(1.9) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes reticleOut { to { opacity: 0; transform: scale(.92); } }
@keyframes statusOn { to { opacity: 1; } }
@keyframes statusOff { to { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-aspect-ratio: 11/10) {
  .intro-lock { left: 50%; top: 42%; }
}

/* ── hands-on demo ─────────────────────────────────────────────────────── */

.try {
  position: relative; z-index: 2; background: var(--stage);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: calc(70 * var(--h)); align-items: center;
  padding: calc(140 * var(--u)) calc(75.5 * var(--u));
  border-top: 1px solid var(--line);
}
.eyebrow-mono { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--strip); }
.try h2 { margin: 0 0 18px; font-size: calc(50 * var(--h)); line-height: 1.08; font-weight: 400; letter-spacing: -.01em; }
.try-copy > p:not(.eyebrow-mono) { margin: 0; font-size: calc(18.5 * var(--h)); line-height: 1.6; color: var(--muted); max-width: 470px; }
.try-copy .try-readout { margin-top: 26px; font-family: var(--mono); font-size: 13px; color: var(--ink); min-height: 1.6em; }
.try-reset { margin-top: 18px; font-size: 15px; }

.try-stage {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: #0a0a0a; touch-action: none;
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
}
.try-terrain, .try-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.try-strip {
  position: absolute; left: 0; top: 0; cursor: grab; outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 18px 40px rgba(0,0,0,.55);
  transform-origin: 50% 50%; will-change: transform;
}
.try-strip img { width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.try-strip:focus-visible { box-shadow: 0 0 0 2px var(--verified), 0 18px 40px rgba(0,0,0,.55); }
[data-state="dragging"] .try-strip { cursor: grabbing; box-shadow: 0 0 0 1px #fff, 0 28px 60px rgba(0,0,0,.7); }
[data-state="registered"] .try-strip { box-shadow: 0 0 0 1px rgba(232,241,255,.5); }

.try-reticle { position: absolute; overflow: visible; pointer-events: none; opacity: 0; transform: scale(1.6); transition: opacity .35s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.try-reticle path { fill: none; stroke: var(--verified); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-state="registered"] .try-reticle { opacity: 1; transform: none; }

.try-hint {
  position: absolute; left: 18px; bottom: 16px; margin: 0; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--nav);
  transition: opacity .4s;
}
.try-stage:not([data-state="idle"]) .try-hint { opacity: 0; }

@media (max-aspect-ratio: 11/10) {
  .try { grid-template-columns: minmax(0, 1fr); padding: 80px 22px; gap: 34px; }
  .try h2 { font-size: calc(34 * var(--m)); }
  .try-copy > p:not(.eyebrow-mono) { font-size: 16px; }
}

/* ── gallery ───────────────────────────────────────────────────────────── */

.gallery {
  position: relative; z-index: 2; background: var(--stage);
  padding: calc(120 * var(--u)) 0 calc(130 * var(--u));
  border-top: 1px solid var(--line);
}
.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 40px; align-items: end;
  padding: 0 calc(75.5 * var(--u)); margin-bottom: 44px;
}
.section-head h2 { margin: 0; font-size: calc(50 * var(--h)); line-height: 1.08; font-weight: 400; letter-spacing: -.01em; }
.section-head > p { margin: 0; font-size: calc(17.5 * var(--h)); line-height: 1.6; color: var(--muted); max-width: 520px; }
.gallery-nav { display: flex; gap: 10px; }
.gallery-arrow {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 17px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); color: var(--ink);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.gallery-arrow:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }

.gallery-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 calc(75.5 * var(--u));
  padding: 0 calc(75.5 * var(--u)) 8px; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.pair-card { flex: 0 0 min(620px, 78vw); scroll-snap-align: start; }

.ba-compare {
  position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: #0a0a0a; user-select: none;
}
.ba-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-compare .ba-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.4); pointer-events: none; }
.ba-line::after {
  content: "⇄"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #050505; font-size: 15px;
}
.ba-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-compare:focus-within .ba-line::after { outline: 2px solid var(--verified); outline-offset: 3px; }
.ba-tag {
  position: absolute; top: 14px; padding: 4px 10px; border-radius: 999px; pointer-events: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(5,5,5,.6); color: var(--nav); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; }

.pair-meta { padding: 18px 4px 0; }
.pair-badge { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--strip); }
.pair-meta h3 { margin: 0 0 8px; font-size: 20px; font-weight: 500; }
.pair-desc { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.pair-stats { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink); }

@media (max-aspect-ratio: 11/10) {
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 22px; }
  .section-head h2 { font-size: calc(34 * var(--m)); }
  .gallery-track { padding: 0 22px 8px; scroll-padding: 0 22px; }
}

/* ── pipeline ──────────────────────────────────────────────────────────── */

.pipeline, .proof {
  position: relative; z-index: 2; background: var(--stage);
  padding: calc(120 * var(--u)) 0 calc(130 * var(--u)); border-top: 1px solid var(--line);
}
.stages {
  list-style: none; margin: 0; padding: 0 calc(75.5 * var(--u));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative;
}
/* A hairline runs through the stage markers; a pulse travels along it once lit. */
.stages::before {
  content: ""; position: absolute; left: calc(75.5 * var(--u)); right: calc(75.5 * var(--u)); top: 17px; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--line-strong));
}
.stages::after {
  content: ""; position: absolute; top: 16px; height: 3px; width: 120px; left: calc(75.5 * var(--u));
  background: linear-gradient(90deg, transparent, var(--verified), transparent); border-radius: 3px;
  opacity: 0; filter: blur(.5px);
}
.stages.is-flowing::after { animation: pulse-run 3.2s var(--ease) infinite; opacity: 1; }
@keyframes pulse-run { from { transform: translateX(0); } to { transform: translateX(calc(100vw - 2 * 75.5 * var(--u) - 120px)); } }
.stage-node { position: relative; padding-top: 44px; opacity: .35; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.stage-node[data-lit] { opacity: 1; transform: none; }
.stage-index {
  position: absolute; top: 0; left: 0; width: 35px; height: 35px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--nav);
  background: var(--stage); border: 1px solid var(--line-strong); transition: border-color .6s, color .6s, box-shadow .6s;
}
.stage-node[data-lit] .stage-index { border-color: var(--verified); color: var(--ink); box-shadow: 0 0 18px rgba(232,241,255,.25); }
.stage-node h3 { margin: 0 0 10px; font-size: 21px; font-weight: 500; }
.stage-node p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.stage-tech { font-family: var(--mono); font-size: 11.5px; color: var(--strip); letter-spacing: .04em; }

/* ── proof ─────────────────────────────────────────────────────────────── */

.proof-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 calc(75.5 * var(--u)) 36px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.proof-stat { padding: 28px 24px 26px 0; }
.proof-stat + .proof-stat { padding-left: 28px; border-left: 1px solid var(--line); }
.proof-value {
  margin: 0; font-size: calc(58 * var(--h)); font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, #9a9a9a 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-label { margin: 6px 0 0; font-size: 14px; color: var(--muted); max-width: 260px; }
.proof-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 calc(75.5 * var(--u)); }
.chart-card { margin: 0; padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); }
.chart-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; color: var(--nav); }
.chart-unit, .chart-legend { font-family: var(--mono); font-size: 11.5px; color: var(--strip); display: inline-flex; align-items: center; gap: 8px; }
.chart-legend i { display: inline-block; width: 16px; height: 2px; margin-left: 6px; }
.lg-flat { background: repeating-linear-gradient(90deg, var(--strip) 0 4px, transparent 4px 7px); }
.lg-bridge { background: var(--verified); }
.chart-note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--strip); }

.bars { position: relative; height: 240px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: end; padding-bottom: 28px; }
.bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar-fill {
  width: 100%; max-width: 110px; height: 0; border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, rgba(232,241,255,.9), rgba(232,241,255,.25));
  transition: height 1.1s var(--ease);
}
.bar:nth-child(3) .bar-fill { background: linear-gradient(180deg, rgba(160,160,160,.75), rgba(160,160,160,.2)); }
.bar-value { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--ink); transition: bottom 1.1s var(--ease); }
.bar-label { position: absolute; bottom: -26px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--strip); }
.bars-threshold { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--amber); }
.bars-threshold span { position: absolute; left: 0; top: -18px; font-family: var(--mono); font-size: 11px; color: var(--amber); }

.line-chart { width: 100%; height: auto; display: block; overflow: visible; }
.line-chart .grid { stroke: var(--line); }
.line-chart .tick { fill: var(--strip); font-family: var(--mono); font-size: 11px; }
.line-chart .line-flat { fill: none; stroke: var(--strip); stroke-width: 1.5; stroke-dasharray: 5 5; }
.line-chart .line-bridge { fill: none; stroke: var(--verified); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(232,241,255,.35)); transition: stroke-dashoffset 1.6s var(--ease); }
.line-chart .dot { fill: var(--verified); }
.line-chart .dot-flat { fill: var(--strip); }
.line-chart .limit { stroke: var(--rejected); stroke-dasharray: 3 4; }
.line-chart .limit-label { fill: var(--rejected); font-family: var(--mono); font-size: 11px; }

/* ── footer ────────────────────────────────────────────────────────────── */

.site-footer { position: relative; z-index: 2; background: var(--stage); border-top: 1px solid var(--line); overflow: hidden; }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px;
  padding: calc(110 * var(--u)) calc(75.5 * var(--u)) 40px;
}
.footer-tagline { margin: 0 0 12px; font-size: calc(40 * var(--h)); line-height: 1.1; letter-spacing: -.02em; }
.footer-sub { margin: 0 0 30px; font-size: 16px; color: var(--muted); max-width: 420px; }
.footer-cta { height: 48px; padding: 0 24px; font-size: 16px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-cols a { display: block; padding: 6px 0; font-size: 15px; color: var(--nav); transition: color .3s; }
.footer-cols a:hover { color: var(--ink); }
.footer-heading { margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--strip); }
.footer-wordmark {
  margin: 0; padding: 0 calc(40 * var(--u)); text-align: center; white-space: nowrap; user-select: none;
  font-size: min(19vw, 330px); line-height: .82; font-weight: 600; letter-spacing: -.05em;
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 70%);
  -webkit-background-clip: text; background-clip: text;
  transform: translateY(12%);
}
.footer-bottom {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 30px; align-items: end;
  padding: 28px calc(75.5 * var(--u)) 36px; border-top: 1px solid var(--line); position: relative; background: var(--stage);
}
.footer-bottom p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--strip); }
.footer-toplink { font-size: 13px; color: var(--nav); white-space: nowrap; }
.footer-toplink:hover { color: var(--ink); }

@media (max-aspect-ratio: 11/10) {
  .stages { grid-template-columns: minmax(0, 1fr); padding: 0 22px; gap: 26px; }
  .stages::before, .stages::after { display: none; }
  .proof-stats { grid-template-columns: minmax(0, 1fr); margin: 0 22px 28px; }
  .proof-stat + .proof-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof-value { font-size: calc(44 * var(--m)); }
  .proof-charts { grid-template-columns: minmax(0, 1fr); padding: 0 22px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); padding: 70px 22px 30px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { grid-template-columns: minmax(0, 1fr); padding: 24px 22px 30px; }
}

/* ── film finish ───────────────────────────────────────────────────────── */

/* Grain: an SVG noise tile, nudged a few times a second. */
.grain {
  position: fixed; inset: -50%; z-index: 35; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain 1s steps(8) infinite; }
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); }
}
.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 60% 45%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* Skip link: off-screen until focused. */
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 110; padding: 10px 16px; border-radius: 999px;
  background: var(--pill); color: var(--pill-ink); font-weight: 500; transition: top .25s var(--ease);
}
.skip:focus { top: 16px; }
.hero:focus { outline: none; }