/* ============================================================
   RAIL Technologies — stylesheet
   Palette + type sampled from client logo (RAIL_Website_Build_Spec.md)
   ============================================================ */

:root {
  --ink:        #0B1F3D;   /* deep navy */
  --ink-deep:   #071628;   /* darker navy for full-bleed sections */
  --royal:      #1447E6;   /* brand blue (dark) */
  --sky:        #4C8DFF;   /* brand blue (light) */
  --sky-soft:   #7DB0FF;
  --paper:      #FAFBFC;   /* off-white */
  --paper-2:    #EAEFF5;   /* alternating section tint */
  --slate:      #414A5A;   /* body copy */
  --slate-soft: #6B7688;
  --line:       #D8E0EA;
  --line-strong:#C3CEDC;
  --line-dark:  rgba(255,255,255,.12);
  --card-shadow: 0 1px 2px rgba(11,31,61,.05), 0 18px 36px -26px rgba(11,31,61,.35);
  --card-shadow-hover: 0 2px 4px rgba(11,31,61,.06), 0 30px 56px -30px rgba(11,31,61,.5);

  --grad:       linear-gradient(118deg, var(--royal) 0%, var(--sky) 100%);
  --grad-soft:  linear-gradient(118deg, rgba(20,71,230,.14), rgba(76,141,255,.14));

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --wrap: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 16px;
  --nav-h: 74px;
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.05; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
::selection { background: var(--sky); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--royal); margin: 0 0 20px;
}
.dark .eyebrow { color: var(--sky-soft); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   Scroll-progress rail — the "current" through the system
   ============================================================ */
.rail-spine {
  position: fixed; left: 0; top: 0; bottom: 0; width: 4px;
  background: rgba(11,31,61,.06); z-index: 90;
}
.rail-fill {
  display: block; width: 100%; height: 0;
  background: var(--grad);
  box-shadow: 0 0 18px rgba(76,141,255,.6);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --pad: 12px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  padding: var(--pad); border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-position .5s var(--ease), color .3s, border-color .3s;
}
.btn--solid {
  color: #fff; background: var(--grad); background-size: 160% 160%; background-position: 0% 50%;
  box-shadow: 0 8px 22px -8px rgba(20,71,230,.65);
}
.btn--solid:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(20,71,230,.7); }
.btn--ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn--ghost:hover { border-color: var(--royal); color: var(--royal); transform: translateY(-2px); }
.dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.dark .btn--ghost:hover { border-color: var(--sky); color: var(--sky-soft); }
.btn--lg { --pad: 16px 30px; font-size: .82rem; }
.btn--block { width: 100%; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(20px, 4vw, 44px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s, box-shadow .4s;
}
.nav.is-scrolled {
  background: rgba(250,251,252,.82);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line); box-shadow: 0 6px 30px -18px rgba(11,31,61,.4);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.brand__mark { height: 30px; width: auto; display: block; transition: transform .5s var(--ease); }
.brand:hover .brand__mark { transform: translate(2px,-2px); }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.34rem; letter-spacing: .06em; }
.nav.is-scrolled .brand { color: var(--ink); }
/* logo swaps: white knockout over dark (top / footer), full colour on light scrolled nav */
.brand__mark--color { display: none; }
.nav.is-scrolled .brand__mark--knockout { display: none !important; }
.nav.is-scrolled .brand__mark--color { display: block !important; }

.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.82); position: relative; padding: 6px 0;
}
.nav.is-scrolled .nav__links a { color: var(--slate); }
.nav__links a.is-active { color: #fff; }
.nav.is-scrolled .nav__links a.is-active { color: var(--royal); }
.nav__links a.is-active::after { width: 100%; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--grad); transition: width .4s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav.is-scrolled .nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

.nav .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.nav .btn--ghost:hover { border-color: var(--sky); color: var(--sky-soft); }
.nav.is-scrolled .btn--ghost { color: var(--ink); border-color: var(--line); }
.nav.is-scrolled .btn--ghost:hover { border-color: var(--royal); color: var(--royal); }

.nav__cta { display: flex; gap: 10px; }
.nav__toggle { display: none; }

/* ============================================================
   Section shell
   ============================================================ */
.section { position: relative; padding: clamp(64px, 7.5vw, 104px) 0; }
/* clear divider between consecutive sections */
.section + .section { border-top: 1px solid var(--line); }
.section.dark + .section, .section + .section.dark { border-top-color: rgba(255,255,255,.09); }
.section--kiosks   { background: var(--paper); }
.section--verticals{ background: var(--paper-2); }
.section--investors{ background: var(--paper); }
.section--story    { background: var(--paper-2); }
.section--advantage{ background: var(--paper-2); }
.section--reserve  { background: var(--paper); }

/* dark full-bleed sections */
.section--ecosystem, .section--vision { background: var(--ink-deep); color: rgba(255,255,255,.82); }
.section--ecosystem h2, .section--vision h2,
.section--ecosystem h3, .section--vision h3 { color: #fff; }
.dark { color: rgba(255,255,255,.82); }

.section-head { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 16ch; margin-bottom: 22px; }
.section--ecosystem .section-head, .section--vision .section-head,
.section--advantage .section-head { max-width: 20ch; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.24rem); max-width: 56ch; color: var(--slate); }
.section--ecosystem .lede, .section--vision .lede { color: rgba(255,255,255,.7); }

.statement { font-size: clamp(3rem, 9vw, 7.2rem); line-height: .92; font-weight: 700; margin-bottom: 44px; }

/* ============================================================
   Reveal / motion — ramp in from lower-left to upper-right
   ============================================================ */
.reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* content tiles slide in with more travel + a spring settle, echoing the hero's glass motion */
.reveal--slide { transform: translate3d(-34px, 30px, 0) scale(.978); transition: opacity .72s var(--ease), transform .92s cubic-bezier(.2,.82,.26,1.08); }
.reveal--slide.is-visible { transform: none; }
/* alternate the entry direction across a row so tiles converge, not march */
.reveal--slide:nth-child(even) { transform: translate3d(34px, 30px, 0) scale(.978); }
.reveal--slide:nth-child(even).is-visible { transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 40px) 0 60px;
  background:
    radial-gradient(1100px 620px at 82% 18%, rgba(20,71,230,.28), transparent 60%),
    radial-gradient(900px 600px at 12% 92%, rgba(76,141,255,.16), transparent 55%),
    var(--ink-deep);
  color: rgba(255,255,255,.82); overflow: hidden;
}
.hero::before { /* faint rail grid */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 100% 48px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.hero__grid {
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
.hero__title { font-size: clamp(2.5rem, 6vw, 4.7rem); font-weight: 700; color: #fff; margin: 0 0 24px; letter-spacing: -.03em; }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.32rem); max-width: 46ch; color: rgba(255,255,255,.74); margin-bottom: 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* editorial part labels — technical-diagram callouts pointing to each part */
.kiosk-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.klabel { position: absolute; top: 0; left: 0; display: flex; align-items: center; opacity: 0; will-change: transform, opacity; transition: opacity .35s var(--ease); }
.klabel__txt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #eef2f8; white-space: nowrap; padding: 7px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(18,20,26,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.klabel__line { width: 62px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.72)); }
.klabel__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 9px rgba(120,170,255,.95); margin-left: -3px; }

/* the teardown page is a neutral editorial studio (anime.js "blend"): a grey
   backdrop behind the transparent 3D canvas, keeping the kiosk's LED accents */
.hero.dark.hero--teardown {
  background:
    radial-gradient(1100px 760px at 68% 34%, #232529, transparent 62%),
    linear-gradient(180deg, #141519, #0d0e11);
  color: rgba(255,255,255,.82);
}
/* --- kiosk deconstruction: crossfade steps in the pinned left column --- */
.hero--teardown .hero__copy { position: relative; min-height: 58vh; }
/* The intro step carries the full brand headline, which runs much longer than the five
   part-step headlines. The steps are absolutely positioned and vertically centred, so an
   over-tall step 0 bleeds past the nav and off the bottom of the pinned viewport — it needs
   its own (smaller) type scale. Scoped to step 0 so the part steps keep their exact look. */
/* The intro headline runs much longer than the five part-step headlines, and the steps are
   absolutely positioned + vertically centred, so an over-tall step 0 bleeds past the nav and
   off the bottom of the pinned viewport. Its own scale, scoped to step 0. */
.hero--teardown .hero__step[data-step="0"] .hero__title { font-size: clamp(2rem, 3.9vw, 3.5rem); }
.hero--teardown .hero__step[data-step="0"] .hero__sub { font-size: clamp(.98rem, 1.15vw, 1.06rem); max-width: 40ch; }
.hero--teardown .hero__step {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%) translateX(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .55s var(--ease), transform .65s var(--ease);
}
.hero--teardown .hero__step.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%); }
/* staggered child reveal — each line of the active step cascades in */
body.has-kiosk-scroll .hero--teardown .hero__step > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
body.has-kiosk-scroll .hero--teardown .hero__step.is-active > * { opacity: 1; transform: none; }
body.has-kiosk-scroll .hero--teardown .hero__step.is-active > *:nth-child(2) { transition-delay: .07s; }
body.has-kiosk-scroll .hero--teardown .hero__step.is-active > *:nth-child(3) { transition-delay: .14s; }
body.has-kiosk-scroll .hero--teardown .hero__step.is-active > *:nth-child(4) { transition-delay: .21s; }
body.has-kiosk-scroll .hero--teardown .hero__step.is-active > *:nth-child(5) { transition-delay: .28s; }
.hero__step-k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sky); margin: 0 0 16px; }
.hero__step-h { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; color: #fff; letter-spacing: -.025em; margin: 0 0 18px; max-width: 15ch; line-height: 1.05; }
.hero__step-p { font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: rgba(255,255,255,.74); max-width: 44ch; margin: 0; }
.hero__step-tag {
  display: inline-flex; align-items: center; margin-top: 24px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 15px;
}
.hero__teardown-cue {
  margin: 26px 0 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
body:not(.has-kiosk-scroll) .hero__teardown-cue { display: none; }

/* --- progress dots on the visual side --- */
.hero--teardown .hero__dots { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 13px; z-index: 3; }
.hero--teardown .hero__dots::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; transform: translateX(-50%); background: linear-gradient(rgba(76,141,255,.05), rgba(76,141,255,.35), rgba(76,141,255,.05)); }
body.has-kiosk-scroll .hero--teardown .hero__dots { display: flex; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: transform .3s var(--ease), background .3s, box-shadow .3s; }
.hero__dot.is-active { background: var(--sky); box-shadow: 0 0 12px rgba(76,141,255,.85); transform: scale(1.3); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.hero__scroll i { width: 1px; height: 40px; background: linear-gradient(var(--sky), transparent); animation: scrollpulse 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes scrollpulse { 0%,100% { transform: scaleY(.3); opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } }

/* --- hero visual slot (holds the 3D kiosk stage) --- */
.hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 440px; }

/* --- interactive 3D kiosk model (three.js) --- */
.kioskstage { position: relative; width: 100%; height: min(80vh, 800px); }
.kioskstage canvas { display: block; }

/* desktop: the 3D scene is a full-bleed cinematic stage behind the hero copy */
@media (min-width: 921px) {
  /* the grid must stay non-positioned so the stage's absolute containing block is the hero */
  .hero:has(.kioskstage) .hero__visual { position: static; }
  .hero:has(.kioskstage) .kioskstage { position: absolute; inset: 0; height: auto; z-index: 0; }
  .hero:has(.kioskstage)::before { z-index: 1; }
  .hero:has(.kioskstage) .hero__grid { pointer-events: none; }
  .hero:has(.kioskstage) .hero__copy { position: relative; z-index: 2; }
  .hero:has(.kioskstage) .hero__grid a, .hero:has(.kioskstage) .hero__grid button { pointer-events: auto; }
  .hero:has(.kioskstage) .hero__scroll, .hero:has(.kioskstage) .hero__dots { z-index: 3; }
  .hero:has(.kioskstage) .kioskstage__fallback { inset: auto; right: 6%; top: 50%; transform: translateY(-50%); margin: 0; }

  /* liquid-glass panel behind the hero copy so it stays legible over the moving
     3D scene (desktop teardown) — translucent, blurred, with an edge sheen */
  .hero--teardown .hero__step {
    left: 0; width: fit-content; max-width: 30rem;
    padding: 30px 34px; border-radius: 26px;
    background: linear-gradient(155deg, rgba(38,41,48,.5), rgba(18,20,25,.38));
    -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 70px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 40px -18px rgba(255,255,255,.1);
    /* dynamic entry: slide + scale with a spring overshoot */
    transform: translateY(-50%) translateX(56px) scale(.965);
    transition: opacity .5s var(--ease), transform .72s cubic-bezier(.2,.86,.3,1.15);
  }
  .hero--teardown .hero__step.is-active { transform: translateY(-50%) translateX(0) scale(1); }
  .hero--teardown .hero__step[data-step="0"] { max-width: 33rem; }
  .hero--teardown .hero__step-tag { background: rgba(255,255,255,.06); }
  /* children cascade in behind the tile */
  .hero--teardown .hero__step > * { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .hero--teardown .hero__step.is-active > * { opacity: 1; transform: none; }
  .hero--teardown .hero__step.is-active > *:nth-child(2) { transition-delay: .08s; }
  .hero--teardown .hero__step.is-active > *:nth-child(3) { transition-delay: .15s; }
  .hero--teardown .hero__step.is-active > *:nth-child(4) { transition-delay: .22s; }
}
.kioskstage__fallback {
  position: absolute; inset: 0; margin: auto; height: min(74vh, 760px); width: auto; max-width: 100%;
  object-fit: contain; pointer-events: none; transition: opacity .7s var(--ease);
  filter: drop-shadow(0 42px 55px rgba(0,0,0,.6));
}
/* The still is a WebGL/no-JS fallback ONLY. It used to be visible by default and hidden once
   the 3D booted, so every load briefly flashed the old flyer-cutout kiosk. Now: no JS at all
   (no html.js) keeps it visible, JS hides it immediately, and kiosk3d.js puts it back via
   .is-fallback only if WebGL actually fails to start. */
.js .kioskstage__fallback { opacity: 0; }
.js .kioskstage.is-fallback .kioskstage__fallback { opacity: 1; }

/* --- revamped customer verticals: responsive grid (no side-scroll) --- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 44px; }
.vtile {
  position: relative; padding: 30px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--card-shadow); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.vtile:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: var(--line-strong); }
.vtile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--grad); transition: width .5s var(--ease); }
.vtile:hover::after { width: 100%; }
.vtile__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--grad-soft); color: var(--royal);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.vtile:hover .vtile__icon { background: var(--grad); color: #fff; transform: translateY(-2px); }
.vtile__icon svg { width: 26px; height: 26px; }
.vtile h3 { font-size: 1.24rem; }
.vtile p { font-size: .93rem; color: var(--slate-soft); margin-top: 7px; }

/* --- subpage hero (investors) --- */
.hero--sub { min-height: 78vh; }
.hero--sub .hero__grid { grid-template-columns: 1fr; }
.hero--sub .hero__title { max-width: 18ch; }
.hero--sub .hero__sub { max-width: 60ch; }

/* --- investor advantage grid + home cross-link --- */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }

/* --- kiosk: vendor consolidation (before -> after) --- */
/* full-bleed dark stage: the whole section is the dark studio; the orbit fills it edge to edge */
.section--replace { position: relative; overflow: hidden; min-height: 100svh; min-height: 100lvh; padding: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(900px 720px at 50% 76%, #24272d, transparent 66%),
    linear-gradient(180deg, #15171b, #0d0e11);
  color: rgba(255,255,255,.82); }
/* GSAP pins by setting the section position:fixed with an INLINE PIXEL height measured at
   refresh time — so `lvh` is already baked to a number before iOS retracts its toolbar. When
   it does, the visual viewport grows past that frozen height and the transparent .pin-spacer
   lets the light body background show as a white strip along the bottom. Painting the spacers
   dark makes any such shortfall read as more section instead of a white gap. Both pinned
   elements on this page (the teardown hero and this stage) are dark, so one rule covers them.
   Height alone can't fix this — the px value is frozen at pin time. */
body.has-kiosk-scroll .pin-spacer { background: #0d0e11; }
.section--replace .eyebrow { color: var(--sky); }
.section--replace .section-head { color: #fff; font-size: clamp(1.9rem, 3.4vw, 3rem); margin-bottom: 12px; }
.section--replace .lede { color: rgba(255,255,255,.66); font-size: 1rem; max-width: 40ch; }
/* compact intro pinned to the top-left so it clears the radial fan below it */
/* clears the 74px fixed nav so the eyebrow + title stay fully visible through the pinned reveal */
.replace__intro { position: relative; z-index: 3; padding-top: clamp(94px, 12vh, 118px); max-width: 640px; }
/* radial orbital funnel — six legacy systems fan out and converge into the kiosk.
   Fills the section below the intro; nodes/lines reveal on the pinned scroll (script.js). */
.orbit { position: absolute; left: 0; right: 0; bottom: 0; top: clamp(320px, 40vh, 470px); z-index: 1; overflow: visible; background: transparent; }
.orbit__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.orbit__links line { stroke: rgba(120,170,255,.42); stroke-width: 1.3;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease), stroke .5s var(--ease); }
.orbit__links line.is-lit { stroke-dashoffset: 0; stroke: rgba(120,170,255,.6); }

.orbit__hub { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.orbit__kiosk { height: clamp(104px, 17vw, 162px); width: auto; filter: drop-shadow(0 22px 40px rgba(0,0,0,.6)); }
.orbit__kiosk3d { width: 240px; height: 300px; }
/* the live 3D kiosk is used at every width now; the image is only the reduced-motion fallback */
.orbit__kiosk--img { display: none; }
@media (prefers-reduced-motion: reduce) { .orbit__kiosk3d { display: none; } .orbit__kiosk--img { display: block; } }
.orbit__hub-glow { position: absolute; top: 40%; left: 50%; width: 230px; height: 230px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(76,141,255,.42), transparent 62%); filter: blur(6px); z-index: -1; pointer-events: none; }
.orbit__hub-label { margin-top: 10px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #eaf1ff; white-space: nowrap; }

/* dots + cards are positioned independently by script.js (dot on the arc,
   card pushed radially outward) so nothing collides in the crowded middle */
.orbit__node { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.orbit__node.is-shown { opacity: 1; }
.orbit__dot { position: absolute; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(22,25,31,.66); border: 1px solid rgba(255,255,255,.2); color: #cfe0ff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.7); transform: translate(-50%,-50%) scale(.5); transition: transform .5s cubic-bezier(.2,.86,.3,1.3); }
.orbit__node.is-shown .orbit__dot { transform: translate(-50%,-50%) scale(1); }
.orbit__dot svg { width: 22px; height: 22px; }
.orbit__card { position: absolute; width: clamp(140px, 15vw, 168px); padding: 15px 17px; text-align: center;
  border-radius: 15px; background: rgba(20,23,29,.55); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 20px 46px -26px rgba(0,0,0,.75);
  opacity: 0; transform: translate(-50%,-50%) scale(.94); transition: opacity .5s var(--ease) .1s, transform .6s cubic-bezier(.2,.82,.26,1.08) .1s; }
.orbit__node.is-shown .orbit__card { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.orbit__card h4 { font-size: .95rem; color: #fff; margin: 0; letter-spacing: -.01em; }
/* caption stays collapsed until the node's caption stage; then it expands in */
.orbit__card p { font-size: .78rem; line-height: 1.34; color: rgba(255,255,255,.66); margin: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: opacity .4s var(--ease), max-height .45s var(--ease), margin .4s var(--ease); }
.orbit__node.is-full .orbit__card p { max-height: 72px; opacity: 1; margin-top: 6px; }

.orbit__foot { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%); z-index: 4;
  width: min(90%, 620px); text-align: center; font-size: .86rem; color: rgba(255,255,255,.58); margin: 0; }
@media (max-width: 620px) {
  /* MOBILE = vertical converge timeline. Intro compact (long lede dropped); the strip of
     systems rides a central spine and folds into the kiosk (positions/motion in script.js). */
  .section--replace .lede { display: none; }
  /* clear the 74px fixed nav (+ notch) so the eyebrow + title are never cut off */
  .replace__intro { padding-top: clamp(102px, 13.5vh, 126px); }
  .orbit { top: clamp(236px, 30vh, 288px); overflow: hidden; }
  .orbit__links { display: none; }
  .orbit__dot { display: none; }
  /* the central "current" the six systems ride into the kiosk */
  .orbit::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 12%; width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(120,170,255,.04), rgba(120,170,255,.5) 16%, rgba(120,170,255,.5) 74%, rgba(76,141,255,.95));
    box-shadow: 0 0 14px rgba(76,141,255,.4); z-index: 0; }
  .orbit__node { will-change: transform, opacity; }
  /* JS controls the node's fade + slide; the card itself just sits at its timeline row */
  /* Every tile is the SAME fixed box — the caption reveals inside it rather than growing it.
     Constant height means the strip never reflows mid-reveal and, more importantly, the
     kiosk's clearance (measured in layoutOrbit) holds before and after the captions open. */
  .orbit__card, .orbit__node.is-shown .orbit__card { width: 43%; max-width: 188px; height: 92px;
    padding: 10px 13px; border-radius: 13px; display: flex; flex-direction: column; justify-content: center;
    opacity: 1; transform: translateY(-50%); transition: none; box-shadow: 0 16px 34px -20px rgba(0,0,0,.8); }
  .orbit__node--l .orbit__card { right: calc(50% + 20px); left: auto; text-align: right; }
  .orbit__node--r .orbit__card { left: calc(50% + 20px); right: auto; text-align: left; }
  .orbit__card h4 { font-size: .86rem; }
  .orbit__card p { font-size: .72rem; line-height: 1.3; }
  .orbit__node.is-full .orbit__card p { max-height: 84px; }
  .orbit__hub { will-change: transform; }
  .orbit__kiosk { height: clamp(96px, 26vw, 132px); }
  /* live 3D hub kiosk sized for the timeline foot */
  .orbit__kiosk3d { width: min(64vw, 240px); height: min(84vw, 300px); }
  .orbit__hub.is-converging .orbit__kiosk,
  .orbit__hub.is-converging .orbit__kiosk3d {
    filter: drop-shadow(0 0 calc(10px + 26px * var(--conv, 0)) rgba(76,141,255, calc(.25 + .55 * var(--conv, 0)))); }
  .orbit__hub-label { font-size: .6rem; }
  .orbit__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .orbit__node { opacity: 1; } .orbit__node .orbit__dot, .orbit__node .orbit__card { transform: none; opacity: 1; } .orbit__links line { stroke-dashoffset: 0; } }

/* FINALE — the real capabilities section is CLONED into #capScreen and positioned by the
   3D loop directly onto the kiosk screen (letterboxed by the black screen). As the camera
   zooms in, the screen rect grows; then --bo (break-out) lerps the overlay from the screen
   rect to the full viewport, the black fades, and the kiosk leaves frame. Vars from JS:
   --sx/--sy screen centre, --sw/--sh screen size, --iscale inner scale, --bo break-out, --op opacity. */
#capScreen { --sx: 50vw; --sy: 50svh; --sw: 60vw; --sh: 80svh; --iscale: 1; --bo: 0; --op: 0; --va: 0;
  position: fixed; z-index: 60; pointer-events: none; overflow: hidden; opacity: var(--op);
  left: calc(var(--sx) + (50vw - var(--sx)) * var(--bo));
  top: calc(var(--sy) + (50lvh - var(--sy)) * var(--bo));
  width: calc(var(--sw) + (100vw - var(--sw)) * var(--bo));
  height: calc(var(--sh) + (100lvh - var(--sh)) * var(--bo));
  transform: translate(-50%, -50%);
  /* dark screen while on the kiosk → page paper as it breaks out to fill (covers the kiosk) */
  background: color-mix(in srgb, #07080c, var(--paper) calc(var(--bo) * 100%));
  /* as it breaks out, a matching full-viewport field (--va fades in) veils the 3D kiosk so its
     bezel/grid never flash around the expanding card; fades away with --op at the swap */
  box-shadow: 0 0 0 100vmax color-mix(in srgb, transparent, color-mix(in srgb, #07080c, var(--paper) calc(var(--bo) * 100%)) calc(var(--va) * 100%));
  display: flex; align-items: center; justify-content: center; will-change: left, top, width, height; }
/* horizontal padding matches the real section's .wrap (0 24px) so the content box lines up
   exactly when the overlay hands off to the real section; vertical padding keeps the card look */
.capscreen__inner { flex: none; width: min(1180px, 100vw); background: var(--paper); border-radius: 6px; padding: 40px 24px;
  transform: scale(var(--iscale)); transform-origin: center center; }
.capscreen__inner .wrap { max-width: none; padding: 0; }
/* keep the reveal animations off inside the clone — it's shown fully assembled */
.capscreen__inner .reveal { opacity: 1 !important; transform: none !important; }
/* centred so the real section lines up with the (centred) break-out overlay = no ghosting */
#capabilities[data-capfinale] { position: relative; min-height: 100svh; min-height: 100lvh; display: flex; flex-direction: column; justify-content: center; }
/* Pulled up to overlap the hero so the real section sits exactly where the overlay ends, and
   held at opacity 0 until the overlay swaps to it (kiosk3d.js drives the inline opacity).
   padding:0 so justify-content centres the content at the TRUE viewport centre = the #capScreen
   overlay's centred card, so the two are pixel-aligned at the swap. Mobile overrides the
   padding below (it top-aligns instead), but otherwise runs the same finale. */
#capabilities[data-capfinale].is-finale { margin-top: -100lvh; opacity: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  #capScreen { display: none; }
  #capabilities[data-capfinale].is-finale { margin-top: 0; opacity: 1; }
}
/* MOBILE finale: the capabilities section is a tall 1-col, so TOP-align it on the kiosk screen
   (and through the break-out) — shows the "Six functions" header, not the middle cards.
   Both the overlay clone and the real section get the same top padding so the header clears the
   fixed nav at break-out AND they stay aligned at the swap. Placed after the base
   #capScreen rules so it wins (same specificity — source order decides). */
@media (max-width: 620px) {
  #capScreen { align-items: flex-start; }
  .capscreen__inner { transform-origin: top center; padding-top: 92px; }
  /* bottom padding matters here: without it the last tile (Data Intelligence) sits flush
     against the dark consolidation section with no breathing room */
  #capabilities[data-capfinale].is-finale { padding: 92px 0 56px; }
}

/* --- kiosk: operator visibility --- */
.section--visibility { background: var(--ink-deep); color: rgba(255,255,255,.82); }
.section--visibility h2 { color: #fff; }
.visibility__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.tag-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tag-list li { padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #fff; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .03em; }
.reserve__flag { margin-top: 22px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em; color: var(--slate-soft); border-left: 2px solid var(--sky); padding-left: 14px; }

/* ============================================================
   Section 01 — feature grid
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  padding: 30px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--card-shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.feature:hover { transform: translate(2px,-6px); box-shadow: var(--card-shadow-hover); border-color: var(--line-strong); }
.feature h3 { font-size: 1.16rem; margin: 20px 0 8px; }
.feature p { font-size: .95rem; color: var(--slate-soft); }
.feature__icon { display: block; width: 46px; height: 46px; color: var(--royal); }

/* ============================================================
   Section 02 — ecosystem flow (self-drawing spine)
   ============================================================ */
.flow { list-style: none; margin: 60px 0 0; padding: 0; position: relative; max-width: 720px; }
.flow::before { /* the track */
  content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px;
  background: rgba(255,255,255,.12);
}
.flow::after { /* the drawn current */
  content: ""; position: absolute; left: 15px; top: 10px; width: 2px; height: var(--flow, 0%);
  background: var(--grad); box-shadow: 0 0 16px rgba(76,141,255,.7);
  transition: height 1.4s var(--ease);
}
.flow__node { position: relative; padding: 0 0 40px 56px; }
.flow__node:last-child { padding-bottom: 0; }
.flow__dot {
  position: absolute; left: 6px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-deep); border: 2px solid rgba(255,255,255,.25); z-index: 1; transition: border-color .5s, box-shadow .5s;
}
.flow__node.is-visible .flow__dot { border-color: var(--sky); box-shadow: 0 0 0 5px rgba(76,141,255,.16); }
.flow__k { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: #fff; display: block; }
.flow__card p { color: rgba(255,255,255,.62); font-size: .96rem; margin-top: 4px; }


/* ============================================================
   Section 04 — investor pillars
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 50px; }
.pillar {
  position: relative; padding: 34px 26px; border-radius: var(--radius); overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--card-shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); border-color: var(--line-strong); }
.pillar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.pillar__no { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; color: var(--sky); }
.pillar h3 { font-size: 1.28rem; margin: 14px 0 10px; }
.pillar p { font-size: .95rem; color: var(--slate-soft); }

/* ============================================================
   Section 05 — story beats
   ============================================================ */
.beats { max-width: 860px; margin: 46px auto 0; padding: 0 24px; }
.beat { display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding: 34px 0; border-top: 1px solid var(--line); }
.beat:first-child { border-top: none; }
.beat__no { font-family: var(--font-mono); font-size: 1.5rem; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; font-weight: 700; }
.beat h3 { font-size: 1.5rem; margin-bottom: 12px; }
.beat p { color: var(--slate); font-size: 1.02rem; }
.beat p + p { margin-top: 12px; }
.beat__quote { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; color: var(--ink); border-left: 3px solid var(--sky); padding-left: 18px; }

.thesis { margin: 50px auto 0; max-width: 860px; padding: 46px; text-align: center; border-radius: 22px; background: var(--ink-deep); color: rgba(255,255,255,.72); }
.thesis p { font-size: 1.1rem; max-width: 60ch; margin: 0 auto; }
.thesis__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.9rem); margin-top: 20px; letter-spacing: -.02em; }

/* ============================================================
   Section 06 — journey timeline
   ============================================================ */

/* ============================================================
   Advantage cards (.adv-grid — investors page)
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translate3d(-10px, 18px, 0); } to { opacity: 1; transform: none; } }
.adv { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.adv__no { font-family: var(--font-mono); font-size: .8rem; color: var(--sky); }
.adv h3 { font-size: 1.18rem; margin: 12px 0 10px; }
.adv p { font-size: .96rem; color: var(--slate-soft); }

/* ============================================================
   Section 08 — bigger vision toggle
   ============================================================ */
.vision-toggle { position: relative; display: inline-flex; margin: 44px 0 34px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.vtoggle { position: relative; z-index: 1; background: none; border: none; cursor: pointer; padding: 11px 34px; border-radius: 999px; color: rgba(255,255,255,.6); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; transition: color .4s; }
.vtoggle.is-active { color: #fff; }
.vtoggle__thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--grad); transition: transform .5s var(--ease); box-shadow: 0 8px 20px -8px rgba(20,71,230,.8); }
.vision-toggle[data-active="tomorrow"] .vtoggle__thumb { transform: translateX(100%); }

.vision-panels { min-height: 96px; }
.chips { list-style: none; margin: 0; padding: 0; display: none; flex-wrap: wrap; gap: 12px; }
.chips.is-active { display: flex; animation: fadeUp .6s var(--ease); }
.chips li { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .04em; padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.chips[data-when="tomorrow"] li { border-color: rgba(76,141,255,.5); background: rgba(76,141,255,.12); }

.pullquote {
  margin: 60px auto 0; max-width: 900px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.24; color: #fff; letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ============================================================
   Section 09 — reserve / contact
   ============================================================ */
.reserve__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.reserve__points { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.reserve__points li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); }
.reserve__points span { display: inline-flex; width: 22px; height: 22px; color: var(--royal); }

.reserve__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 34px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(11,31,61,.5); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-soft); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: .98rem; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--paper); resize: vertical;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 4px rgba(20,71,230,.1); }
.reserve__form .btn { grid-column: 1 / -1; }
.form__note { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .78rem; color: var(--royal); min-height: 1em; margin: 0; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink-deep); color: rgba(255,255,255,.6); padding: 80px 0 34px; }
.footer .brand, .footer h3 { color: #fff; }
.footer .brand__mark { height: 34px; width: auto; }
.footer__top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid var(--line-dark); }
.footer__tag { margin: 18px 0 26px; max-width: 34ch; }
.footer__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 40px; align-content: start; justify-content: end; }
.footer__nav a { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); transition: color .3s; }
.footer__nav a:hover { color: var(--sky-soft); }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; flex-wrap: wrap; }
.footer__note { color: rgba(255,255,255,.36); }

/* ============================================================
   Proof / traction band
   ============================================================ */
.section--proof { background: var(--paper-2); }
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
.proof__item {
  padding: 30px 26px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--card-shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.proof__item:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); border-color: var(--line-strong); }
.proof__lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--ink); letter-spacing: -.02em; line-height: 1.02; }
.proof__label { margin-top: 12px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-soft); line-height: 1.5; }
.proof__note { margin-top: 30px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em; color: var(--slate-soft); }

/* ============================================================
   Cash → Commerce → Data triad
   ============================================================ */
.section--flow-hl { background: var(--ink-deep); color: rgba(255,255,255,.82); }
.section--flow-hl .section-head, .section--flow-hl h3 { color: #fff; }
.section--flow-hl .lede { color: rgba(255,255,255,.7); }
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.triad__stage {
  position: relative; padding: 34px 30px; border-radius: var(--radius);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
}
.triad__stage:not(:first-child)::before {
  content: "→"; position: absolute; left: -25px; top: 50%; transform: translateY(-50%);
  color: var(--sky); font-family: var(--font-mono); font-size: 1.4rem; line-height: 1;
}
.triad__k { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sky-soft); }
.triad__stage h3 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 12px 0 14px; }
.triad__stage p { color: rgba(255,255,255,.72); font-size: 1rem; }
.triad__close { margin: 44px auto 0; max-width: 760px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.35; color: #fff; letter-spacing: -.01em; }
.triad__close b { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }

/* ============================================================
   Why Now
   ============================================================ */
.section--why { background: var(--paper); }
.whynow { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; counter-reset: why; }
.whynow li {
  position: relative; padding: 26px 28px 26px 66px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--card-shadow);
  font-size: 1.06rem; color: var(--ink); font-weight: 500; line-height: 1.5;
}
.whynow li::before {
  counter-increment: why; content: counter(why, decimal-leading-zero);
  position: absolute; left: 28px; top: 28px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .08em; color: var(--sky);
}
.whynow li:last-child { grid-column: 1 / -1; background: var(--ink-deep); color: #fff; border: none; font-weight: 600; }
.whynow li:last-child::before { color: var(--sky-soft); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .nav__links, .nav__cta { display: none; }
  .nav__links.is-open {
    display: flex; flex-direction: column; gap: 4px; position: absolute; top: var(--nav-h); left: 0; right: 0; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 16px 24px 24px;
  }
  .nav__links.is-open a { padding: 12px 0; color: var(--slate); }
  .nav__toggle {
    display: inline-flex; flex-direction: column; gap: 5px; margin-left: auto;
    background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav__toggle span { width: 24px; height: 2px; background: #fff; transition: transform .4s var(--ease), opacity .3s, background .4s; }
  .nav.is-scrolled .nav__toggle span { background: var(--ink); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .hero__grid { grid-template-columns: 1fr; }
  /* static fallback (reduced-motion / no JS): show intro copy only */
  body:not(.has-kiosk-scroll) .hero--teardown .hero__copy { min-height: 0; }
  body:not(.has-kiosk-scroll) .hero--teardown .hero__step { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  body:not(.has-kiosk-scroll) .hero--teardown .hero__step:not([data-step="0"]) { display: none; }
  body:not(.has-kiosk-scroll) .hero__teardown-cue { display: none; }
  /* pinned mobile deconstruction: the kiosk stage is full-bleed the WHOLE time,
     with copy overlaid — so the resting hero eases into the teardown with no
     layout swap. The kiosk is framed low (below the copy) at rest by the camera. */
  /* 100lvh (largest viewport) so the dark hero always covers the screen — otherwise when the
     mobile toolbar retracts on scroll, a strip of the white page body shows below it */
  body.has-kiosk-scroll .hero--teardown { position: relative; min-height: 100svh; min-height: 100lvh; padding: 0; }
  body.has-kiosk-scroll .hero--teardown .hero__grid { display: block; height: 100svh; height: 100lvh; padding: 0; }
  body.has-kiosk-scroll .hero--teardown .hero__visual { position: absolute; inset: 0; min-height: 0; z-index: 0; }
  body.has-kiosk-scroll .hero--teardown .kioskstage { position: absolute; inset: 0; height: auto; }
  body.has-kiosk-scroll .hero--teardown .hero__copy { position: absolute; inset: 0; min-height: 0; z-index: 2; pointer-events: none; }
  body.has-kiosk-scroll .hero--teardown .hero__copy a, body.has-kiosk-scroll .hero--teardown .hero__copy button { pointer-events: auto; }
  /* Intro sits in the same frosted tile as the capability steps, pinned to the top of the
     fold. On load this tile is the ONLY thing on screen — the kiosk is framed below the
     fold by the camera (see kiosk3d.js REST_Y) and rises in as the teardown starts. */
  body.has-kiosk-scroll .hero--teardown .hero__step[data-step="0"] {
    position: absolute; top: calc(var(--nav-h) + 18px); left: 16px; right: 16px; bottom: auto; transform: none;
    background: rgba(9, 16, 32, .5);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(120, 160, 255, .16); border-radius: 18px;
    padding: 20px 18px 18px;
    /* overflow clips the copy as kiosk3d.js collapses max-height; transition off so the
       shrink/fade scrubs 1:1 with scroll instead of lagging behind the kiosk */
    overflow: hidden; transition: none;
  }
  /* the tile fades as a whole now, so its children must not re-fade on their own */
  body.has-kiosk-scroll .hero--teardown .hero__step[data-step="0"].is-active > * { transition-delay: 0s; }
  /* capability steps ride in a frosted-glass tile anchored high on the fold */
  body.has-kiosk-scroll .hero--teardown .hero__step:not([data-step="0"]) {
    position: absolute; left: 16px; right: 16px; top: auto; bottom: 16svh; transform: translateY(14px);
    background: rgba(9, 16, 32, .5);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(120, 160, 255, .16); border-radius: 18px;
    padding: 18px 18px 16px;
  }
  body.has-kiosk-scroll .hero--teardown .hero__step:not([data-step="0"]).is-active { transform: translateY(0); }
  body.has-kiosk-scroll .hero--teardown .hero__title { font-size: clamp(1.7rem, 6.6vw, 2.2rem); line-height: 1.08; margin-bottom: 12px; }
  body.has-kiosk-scroll .hero--teardown .hero__sub { font-size: .95rem; margin-bottom: 18px; max-width: none; }
  body.has-kiosk-scroll .hero--teardown .hero__step-h { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
  body.has-kiosk-scroll .hero--teardown .hero__step-p { font-size: .95rem; }
  body.has-kiosk-scroll .hero--teardown .hero__scroll { display: none; }
  .hero__visual { min-height: 300px; order: -1; }
  .kioskstage { height: min(54vh, 460px); }
  .kioskstage__fallback { height: min(48vh, 430px); }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  /* single column, both blocks centred and width-capped so the form is centred on the
     page rather than stretched edge-to-edge; tighter form padding so the inputs still
     have room at 390px, and the flag note can always wrap. */
  .reserve__grid { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .reserve__intro, .reserve__form { width: 100%; max-width: 460px; margin-inline: auto; }
  .reserve__form { padding: 22px 18px; }
  /* .btn is white-space:nowrap, so the long submit label ('Request Briefing & Reserve
     Capacity') has a ~399px min-content. That sets the automatic minimum of the grid
     track it sits in, which blows the whole reserve column past a 390px viewport — the
     form ran off the right edge. Let the submit label wrap, and let the tracks shrink
     below their content's min-content (grid/flex default is min-width:auto). */
  .reserve__form .btn { white-space: normal; }
  .reserve__grid > *, .reserve__form > * { min-width: 0; }
  .reserve__flag { overflow-wrap: anywhere; }
  .adv-grid { grid-template-columns: 1fr; }
  .visibility__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__nav { justify-content: start; }
  .proof { grid-template-columns: 1fr 1fr; }
  .triad { grid-template-columns: 1fr; gap: 36px; }
  .triad__stage:not(:first-child)::before { left: 50%; top: -26px; transform: translateX(-50%) rotate(90deg); }
  .whynow { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .feature-grid, .pillars, .reserve__form { grid-template-columns: 1fr; }
  .beat { grid-template-columns: 1fr; gap: 8px; }
  .thesis { padding: 32px 22px; }
  .proof { grid-template-columns: 1fr; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* reduced motion: no scroll teardown — show intro copy only */
  .hero--teardown .hero__copy { min-height: 0 !important; }
  .hero--teardown .hero__step { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; transition: none !important; }
  .hero--teardown .hero__step:not([data-step="0"]) { display: none !important; }
  .hero__teardown-cue, .hero--teardown .hero__dots { display: none !important; }
}

/* ============================================================
   Boot screen — animated RAIL mark held for ~3.5s while the
   3D kiosk, fonts and textures finish loading
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 620px at 50% 42%, #12203a, var(--ink-deep) 68%);
  /* swallow scroll gestures while it's up, so nothing scrubs behind it */
  touch-action: none; overscroll-behavior: none;
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* mark: settles in, then a brand-gradient sheen sweeps across it on a loop */
.loader__mark { position: relative; display: block; overflow: hidden; border-radius: 12px;
  animation: bootMark .9s var(--ease) both; }
.loader__mark img { width: clamp(96px, 16vw, 132px); height: auto; }
.loader__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(180,214,255,.55) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: bootSheen 1.5s var(--ease) .5s infinite;
}
@keyframes bootMark { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bootSheen { to { transform: translateX(130%); } }

/* wordmark tightens into place */
.loader__word {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff;
  letter-spacing: .5em; padding-left: .5em;
  animation: bootWord 1.1s var(--ease) .18s both;
}
@keyframes bootWord { from { opacity: 0; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: .18em; } }

/* progress bar fills across the hold */
.loader__bar { display: block; width: clamp(140px, 22vw, 210px); height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.14); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--grad);
  transform-origin: left; transform: scaleX(0);
  animation: bootBar 3.5s cubic-bezier(.35,.62,.28,1) both; }
@keyframes bootBar { to { transform: scaleX(1); } }

/* reduced motion: keep the hold + the brand, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .loader__mark, .loader__word, .loader__sheen { animation: none !important; }
  .loader__sheen { display: none; }
  .loader__word { letter-spacing: .18em; }
  .loader__bar i { animation: bootBar 3.5s linear both; }
}