/* ============================================================================
   Vexor front-door landing — self-contained, zero external requests.
   Type: Space Grotesk (SIL OFL 1.1, vendored) + system stack.
   Palette: dark slate base + neon magenta (primary) / electric cyan-blue
   (secondary) / sparing amber highlight. Deliberately not Solana-flavored.
   Motion: transform/opacity only on animated layers; all continuous animation
   is gated behind (prefers-reduced-motion: no-preference).
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/space-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  --bg:        #0A0C10;
  --bg-1:      #0D1016;
  --bg-2:      #12151C;
  --bg-3:      #171B24;
  --line:      #ffffff12;
  --fg:        #EDEFF3;
  --fg-mut:    #C7CBD4;
  --fg-dim:    #8C93A3;

  /* Neon tokens (old → new): --purple #A855F7 → --mag #F72585;
     --purple-gl #C084FC → --mag-gl #FF6EC7; --cyan #22D3EE → --blue #3EC5FF;
     --cyan-gl #67E8F9 → --blue-gl #8FE3FF; --pink #EC4899 → --amber #FFB84D. */
  --mag:     #F72585;
  --mag-gl:  #FF6EC7;
  --blue:    #3EC5FF;
  --blue-gl: #8FE3FF;
  --amber:   #FFB84D;

  --disp: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1160px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mag); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip:focus { left: 12px; top: 12px; }

.grad {
  background: linear-gradient(100deg, var(--mag-gl), var(--blue));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.grad--blue {
  background: linear-gradient(100deg, var(--blue), var(--mag-gl));
  /* background shorthand RESETS background-clip — must re-apply or iOS renders solid blocks */
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(18px, 5vw, 56px);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10, 12, 16, .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__word { font-family: var(--disp); font-weight: 700; letter-spacing: .18em; font-size: 1.05rem; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); font-size: .95rem; }
.nav__links > a { color: var(--fg-mut); transition: color .25s; }
.nav__links > a:hover { color: var(--fg); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--fg) !important;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.nav__cta:hover { border-color: var(--mag); box-shadow: 0 0 0 1px var(--mag), 0 8px 30px -12px var(--mag); }
.nav__cta svg { transition: transform .25s; }
.nav__cta:hover svg { transform: translateX(3px); }
@media (max-width: 560px) { .nav__links > a:not(.nav__cta) { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--disp); font-weight: 500; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .3s, border-color .25s, background .3s;
  border: 1px solid transparent; will-change: transform;
}
.btn svg { transition: transform .25s; }
.btn:hover svg { transform: translateX(4px); }
.btn--primary {
  color: #0A0C10;
  background: linear-gradient(100deg, var(--mag-gl), var(--blue));
  box-shadow: 0 10px 40px -14px var(--mag), 0 2px 0 0 #ffffff30 inset;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 48px -14px var(--mag); }
.btn--primary:hover { background: linear-gradient(100deg, var(--mag-gl), var(--blue-gl)); }
.btn--ghost { color: var(--fg-mut); border-color: var(--line); background: var(--bg-2); }
.btn--ghost:hover { color: var(--fg); border-color: var(--blue); }
.btn--lg { font-size: 1.1rem; padding: 17px 34px; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: 0 clamp(18px, 5vw, 56px);
  overflow: hidden;
  isolation: isolate;
}

/* Starfield canvas — stars only; the grid itself is the CSS 3D plane below. */
.hero__stars {
  position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%;
  opacity: .9;
}

/* Neon grid horizon: a repeating-gradient texture rasterized ONCE, tilted in
   3D, and scrolled with a compositor-only transform (one cell per loop, so the
   wrap is seamless). No per-frame repaints. */
.hero__horizon {
  position: absolute; left: 0; right: 0; top: 58%; bottom: 0; z-index: -3;
  overflow: hidden;
  perspective: 600px;
  perspective-origin: 50% 0%;
  pointer-events: none;
}
.hero__plane {
  position: absolute; left: -55%; top: 0; width: 210%;
  height: min(140%, 560px); /* stays clear of the perspective singularity */
  transform-origin: 50% 0;
  transform: rotateX(72deg) translateY(0);
  background-image:
    repeating-linear-gradient(90deg, rgba(62, 197, 255, .30) 0 2px, transparent 2px 76px),
    repeating-linear-gradient(0deg,  rgba(247, 37, 133, .38) 0 2px, transparent 2px 76px);
  background-position: 50% 0;
}
.hero__fog { /* distance fog at the horizon + soft exit at the hero's foot */
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,16,.94) 0%, rgba(10,12,16,.5) 26%, rgba(10,12,16,0) 62%),
    linear-gradient(0deg, rgba(10,12,16,.85) 0%, rgba(10,12,16,0) 22%);
}
.hero__hline { /* glowing horizon line, amber-cored — the "sunset" seam */
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(247,37,133,.75) 32%,
              rgba(255,184,77,.95) 50%, rgba(247,37,133,.75) 68%, transparent 96%);
}
.hero__hline::after { /* pre-blurred halo; only its opacity animates */
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 16px;
  background: inherit; filter: blur(9px); opacity: .8;
}

/* Aurora glows: outer wrapper takes JS parallax, inner layer takes CSS drift —
   both transform-only, so they never fight over the same property. */
.hero__glowwrap {
  position: absolute; z-index: -2; pointer-events: none; will-change: transform;
}
.hero__glowwrap--a { width: 46vw; height: 46vw; left: -8vw; top: -10vw; }
.hero__glowwrap--b { width: 52vw; height: 52vw; right: -14vw; top: 8vh; }
.hero__glowwrap--c { width: 44vw; height: 44vw; left: 26vw; bottom: -10vw; }
.hero__glow {
  width: 100%; height: 100%; border-radius: 50%;
  filter: blur(58px); will-change: transform;
}
.hero__glow--a { background: radial-gradient(circle, var(--mag) 0%, var(--mag) 8%, transparent 62%); opacity: .74; }
.hero__glow--b { background: radial-gradient(circle, var(--blue) 0%, var(--blue) 8%, transparent 60%); opacity: .68; }
.hero__glow--c { background: radial-gradient(circle, var(--amber) 0%, transparent 64%); opacity: .52; }

.hero::after { /* top vignette so nav reads */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; z-index: -1;
  background: linear-gradient(180deg, #0A0C10cc, transparent);
}

.hero__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; padding-top: 8vh; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .9rem; letter-spacing: .04em; color: var(--fg-mut);
  padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: #ffffff08; margin-bottom: 28px;
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 0 var(--blue-gl); animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 #8FE3FFaa; } 70% { box-shadow: 0 0 0 9px #8FE3FF00; } 100% { box-shadow: 0 0 0 0 #8FE3FF00; }
}
.hero__title {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(4.5rem, 18vw, 15rem); line-height: .88;
  letter-spacing: -.02em; margin: 0 0 6px -.04em;
  background-image: linear-gradient(150deg, #ffffff 2%, var(--mag-gl) 40%, #FF9AD5 56%, var(--blue) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 64px #F7258547, 0 0 130px #3EC5FF2b;
}
.hero__lede {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1.12;
  letter-spacing: -.01em; max-width: 20ch; margin-bottom: 22px;
}
.hero__sub {
  color: #E9EEFB; font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 56ch; margin-bottom: 34px;
  text-shadow: 0 1px 16px rgba(8, 10, 14, .9), 0 0 30px rgba(8, 10, 14, .7);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--fg-dim); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
}
.hero__cue-line { width: 1px; height: 40px; background: linear-gradient(var(--fg-dim), transparent);
  animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- section shell ---------- */
section { position: relative; }
.stats, .feature, .showcase, .timeline, .cta {
  padding: clamp(72px, 12vh, 150px) clamp(18px, 5vw, 56px);
}
.feature__kicker {
  display: inline-block; font-family: var(--disp); font-weight: 500;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mag-gl); margin-bottom: 18px;
}
.feature__kicker--blue { color: var(--blue); }

/* ---------- STATS ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0D101600, #12151C55, #0D101600); }
/* section-break neon hairlines over the plain borders (static, cheap) */
.stats::before, .stats::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(640px, 72%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--mag) 32%, var(--blue) 68%, transparent);
  box-shadow: 0 0 14px #F7258544;
}
.stats::before { top: -1px; }
.stats::after { bottom: -1px; }
.stats__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px);
}
.stat { position: relative; padding-left: 2px; }
.stat + .stat::before {
  content: ""; position: absolute; left: calc(-1 * clamp(10px, 1.5vw, 22px)); top: 6px; bottom: 6px;
  width: 1px; background: var(--line);
}
.stat__icon { width: 26px; height: 26px; color: var(--blue); margin-bottom: 16px;
  filter: drop-shadow(0 0 10px #3EC5FF55); }
.stat:nth-child(odd) .stat__icon { color: var(--mag-gl); filter: drop-shadow(0 0 10px #FF6EC755); }
.stat__num {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(135deg, var(--fg) 32%, var(--blue) 98%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 26px #3EC5FF33;
}
.stat:nth-child(odd) .stat__num {
  background-image: linear-gradient(135deg, var(--fg) 32%, var(--mag-gl) 98%);
  text-shadow: 0 0 26px #FF6EC733;
}
.stat__label { margin-top: 12px; font-weight: 500; color: var(--fg); }
.stat__label::before { /* accent tick */
  content: ""; display: block; width: 24px; height: 2px; border-radius: 1px;
  margin-bottom: 9px; background: linear-gradient(90deg, var(--mag), var(--blue));
  box-shadow: 0 0 8px #F7258566;
}
.stat__note { margin-top: 6px; font-size: .86rem; color: var(--fg-dim); }
@media (max-width: 860px) {
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 34px 26px; }
  .stat:nth-child(3)::before, .stat:nth-child(odd)::before { display: none; }
}
@media (max-width: 460px) { .stats__grid { grid-template-columns: 1fr; } .stat + .stat::before { display: none; } }
.stats__disclosure {
  max-width: var(--maxw); margin: 22px auto 0; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: .8rem; color: var(--fg-dim); text-align: center;
}
.stats__verify {
  max-width: var(--maxw); margin: 30px auto 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.stats__verify .feature__kicker { margin-bottom: 0; }
.stats__verify-txt { color: var(--fg-mut); font-size: .95rem; max-width: 72ch; }
.stats__verify-txt strong { color: var(--fg); font-weight: 500; }

/* ---------- FEATURE panels ---------- */
.feature__row {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.feature__row--rev .feature__copy { order: 2; }
.feature--alt { background: linear-gradient(180deg, transparent, #0D1016 40%, transparent); }
.feature__head {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.02; letter-spacing: -.02em;
  margin-bottom: 22px;
}
.feature__body { color: var(--fg-mut); font-size: clamp(1.02rem, 1.4vw, 1.22rem); max-width: 52ch; margin-bottom: 16px; }
.feature__body--muted { color: var(--fg-dim); }

.chip-stack { display: flex; flex-direction: column; gap: 14px; }
.chip {
  border: 1px solid var(--line); background: var(--bg-2); border-radius: 14px;
  padding: 18px 22px; font-family: var(--disp); font-weight: 500; font-size: 1.1rem;
  position: relative; overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.chip:hover {
  border-color: #3EC5FF55; transform: translateX(6px);
  box-shadow: 0 0 0 1px #3EC5FF33, 0 14px 44px -22px var(--blue);
}
.chip::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--mag), var(--blue));
}
.chip--accent { border-color: #F7258555; box-shadow: 0 0 0 1px #F7258533, 0 20px 50px -30px var(--mag); }
.chip--accent:hover {
  border-color: #F7258588; transform: translateX(6px);
  box-shadow: 0 0 0 1px #F7258555, 0 14px 44px -22px var(--mag);
}
.chip--accent::before { width: 4px; background: linear-gradient(var(--mag-gl), var(--blue-gl)); }

.pull {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -.01em;
  padding: 26px 30px; border-left: 3px solid var(--blue); position: relative;
  background: linear-gradient(100deg, #3EC5FF10, transparent 70%); border-radius: 0 16px 16px 0;
}
.pull__mark { position: absolute; left: 12px; top: -18px; font-size: 5rem; color: var(--blue);
  opacity: .28; font-family: var(--disp); }
@media (max-width: 780px) {
  .feature__row, .feature__row--rev { grid-template-columns: 1fr; }
  .feature__row--rev .feature__copy { order: 0; }
}

/* ---------- SHOWCASE ---------- */
.showcase { background: radial-gradient(120% 60% at 50% 0%, #12151C, transparent 70%); }
.showcase__head { max-width: 720px; margin: 0 auto clamp(38px, 6vh, 64px); text-align: center; }
.showcase__title {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 16px;
}
.showcase__sub { color: var(--fg-mut); max-width: 58ch; margin: 0 auto; font-size: 1.08rem; }

.panel {
  max-width: 940px; margin: 0 auto;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 120px -50px #000, 0 0 0 1px #ffffff06 inset,
              0 30px 90px -60px var(--mag);
}
.panel__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: #ffffff05;
}
.panel__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-3); }
.panel__dot:nth-child(1) { background: #F7258588; }
.panel__dot:nth-child(2) { background: #FFB84D88; }
.panel__dot:nth-child(3) { background: #3EC5FF88; }
.panel__caption { margin-left: 12px; font-family: var(--disp); font-size: .82rem; color: var(--fg-dim); letter-spacing: .04em; }
.panel__body { padding: clamp(18px, 3vw, 34px); }

.flow { width: 100%; height: auto; }
.flow .node-box { fill: var(--bg-3); stroke: var(--line); stroke-width: 1; }
.flow .node-box--hot { stroke: #F7258566; fill: #1c1017; }
.flow .node-box--ok { stroke: #3EC5FF66; fill: #0e161f; }
.flow .node-t { fill: var(--fg); font-family: var(--disp); font-weight: 500; font-size: 15px; text-anchor: middle; }
.flow .node-t--ok { fill: var(--blue-gl); }
.flow .node-s { fill: var(--fg-dim); font-size: 11.5px; text-anchor: middle; }

.rings { display: flex; justify-content: center; gap: clamp(22px, 5vw, 60px); margin-top: 30px; flex-wrap: wrap; }
.ring { position: relative; width: 132px; text-align: center; }
.ring svg { transform: rotate(-90deg); width: 100%; height: auto; }
.ring__track { fill: none; stroke: #ffffff10; stroke-width: 8; }
.ring__arc {
  fill: none; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  filter: drop-shadow(0 0 6px currentColor);
}
.ring__mid { position: absolute; inset: 0 0 26px 0; display: flex; align-items: center; justify-content: center; }
.ring__val { font-family: var(--disp); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px currentColor; }
.ring__cap { margin-top: 8px; font-size: .84rem; color: var(--fg-dim); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- ECOSYSTEM ---------- */
.eco { background: linear-gradient(180deg, transparent, #0D1016 30%, transparent); }
.eco__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px);
}
.eco__card {
  display: block; border: 1px solid var(--line); background: var(--bg-2); border-radius: 16px;
  padding: 26px 24px; position: relative; overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.eco__card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--mag), var(--blue));
}
.eco__card:hover {
  border-color: #3EC5FF55; transform: translateY(-4px);
  box-shadow: 0 0 0 1px #3EC5FF33, 0 20px 50px -28px var(--blue);
}
.eco__icon { width: 30px; height: 30px; color: var(--mag-gl); margin-bottom: 16px;
  filter: drop-shadow(0 0 10px #FF6EC755); }
.eco__card:nth-child(2) .eco__icon { color: var(--blue); filter: drop-shadow(0 0 10px #3EC5FF55); }
.eco__card:nth-child(3) .eco__icon { color: var(--amber); filter: drop-shadow(0 0 10px #FFB84D55); }
.eco__name { font-family: var(--disp); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: 10px; }
.eco__desc { color: var(--fg-mut); font-size: .95rem; line-height: 1.55; margin-bottom: 18px; }
.eco__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--disp); font-weight: 500; font-size: .9rem; color: var(--blue);
}
.eco__link svg { transition: transform .25s; }
.eco__card:hover .eco__link svg { transform: translate(3px, -3px); }
@media (max-width: 780px) { .eco__grid { grid-template-columns: 1fr; } }

/* ---------- TIMELINE ---------- */
.timeline { }
.timeline__head { max-width: var(--maxw); margin: 0 auto clamp(34px, 5vh, 56px); }
.track {
  list-style: none; padding: 0; max-width: 720px; margin: 0 auto; position: relative;
}
.track::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--mag), var(--blue), var(--amber));
  transform: scaleY(var(--line-progress, 0)); transform-origin: top;
  transition: transform 1.1s var(--ease);
}
.track__item { position: relative; padding: 0 0 34px 44px; }
.track__item:last-child { padding-bottom: 0; }
.track__node {
  position: absolute; left: 3px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--mag);
  box-shadow: 0 0 0 4px #0A0C10, 0 0 14px -1px var(--mag);
}
.track__item:nth-child(even) .track__node { border-color: var(--blue); box-shadow: 0 0 0 4px #0A0C10, 0 0 14px -1px var(--blue); }
.track__item h3 { font-family: var(--disp); font-weight: 500; font-size: 1.28rem; letter-spacing: -.01em; }
.track__item p { color: var(--fg-dim); font-size: .98rem; margin-top: 4px; }
.tag {
  font-family: var(--body); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  background: #3EC5FF1a; color: var(--blue); border: 1px solid #3EC5FF44;
  white-space: nowrap; display: inline-block;
}
/* Mobile: badge drops UNDER the title instead of wrapping mid-badge next to it. */
@media (max-width: 560px) {
  .track__item h3 .tag { display: block; width: fit-content; margin-left: 0; margin-top: 6px; }
}
.tag--plan { background: #8C93A31a; color: var(--fg-dim); border-color: #8C93A344; }
.track__item--wip .track__node { border-color: var(--blue); animation: pulse 2.4s var(--ease) infinite; }
.track__item--plan .track__node { border-color: var(--fg-dim); border-style: dashed; box-shadow: none; background: var(--bg); }

/* ---------- CTA ---------- */
.cta { position: relative; text-align: center; overflow: hidden; border-top: 1px solid var(--line); }
.cta::before { /* section-break hairline, matches stats band */
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(640px, 72%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue) 32%, var(--mag) 68%, transparent);
  box-shadow: 0 0 14px #3EC5FF44;
}
.cta__glow {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 70vw; height: 40vh; border-radius: 50%; filter: blur(90px); z-index: -1;
  background: radial-gradient(circle, #F7258540 0%, #3EC5FF22 45%, transparent 70%);
  will-change: transform;
}
.cta__inner { max-width: 720px; margin: 0 auto; }
.cta__head { font-family: var(--disp); font-weight: 700; font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.02; letter-spacing: -.02em; margin-bottom: 18px; }
.cta__sub { color: var(--fg-mut); font-size: 1.12rem; max-width: 54ch; margin: 0 auto 34px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 40px clamp(18px, 5vw, 56px); background: #05060A; }
.foot__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; }
.foot__brand { display: flex; align-items: center; gap: 9px; font-family: var(--disp); font-weight: 700; letter-spacing: .16em; }
.foot__links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.foot__links a { color: var(--fg-mut); transition: color .25s; }
.foot__links a:hover { color: var(--blue); }
.foot__x { display: inline-flex; align-items: center; gap: 7px; }
.foot__x svg { transition: filter .25s; }
.foot__x:hover svg { filter: drop-shadow(0 0 6px var(--blue)); }
.foot__fine { flex-basis: 100%; color: var(--fg-dim); font-size: .82rem; line-height: 1.5; }

/* ---------- reveal / motion primitives ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.draw { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); transition: stroke-dashoffset 1.1s var(--ease); }
.draw.is-in { stroke-dashoffset: 0; }
.pop { opacity: 0; transform: scale(.94); transform-box: fill-box; transform-origin: center;
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pop.is-in { opacity: 1; transform: none; }
.flow__pulse { opacity: 0; }
.flow.is-live .flow__pulse { opacity: 1; animation: travel 3.6s linear infinite; }
@keyframes travel {
  0%   { transform: translate(150px, 90px); }
  26%  { transform: translate(305px, 90px); }
  50%  { transform: translate(455px, 90px); }
  74%  { transform: translate(610px, 90px); }
  100% { transform: translate(618px, 90px); }
}

/* ---------- continuous ambient motion (opt-in via no-preference only) ------
   Everything here animates transform or opacity exclusively, on small or
   pre-composited layers. The lone exception is background-position on the
   hero title sheen + timeline comet: both repaint tiny regions (glyph box /
   a 2px strip) and idle at held keyframes most of each cycle. */
@media (prefers-reduced-motion: no-preference) {
  /* grid scroll toward the viewer — one 76px cell per loop, seamless wrap */
  .hero__plane { animation: grid-scroll 1.8s linear infinite; will-change: transform; }
  @keyframes grid-scroll {
    from { transform: rotateX(72deg) translateY(0); }
    to   { transform: rotateX(72deg) translateY(76px); }
  }

  /* horizon halo breathing */
  .hero__hline::after { animation: hline-pulse 5.5s ease-in-out infinite; }
  @keyframes hline-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .95; } }

  /* aurora drift — blur is rasterized once, drift is compositor-only */
  .hero__glow--a { animation: drift-a 21s ease-in-out infinite alternate; }
  .hero__glow--b { animation: drift-b 27s ease-in-out infinite alternate; }
  .hero__glow--c { animation: drift-c 18s ease-in-out infinite alternate; }
  @keyframes drift-a { to { transform: translate3d(6vw, 4vh, 0) scale(1.12); } }
  @keyframes drift-b { to { transform: translate3d(-5vw, 6vh, 0) scale(.92); } }
  @keyframes drift-c { to { transform: translate3d(5vw, -5vh, 0) scale(1.16); } }

  /* occasional sheen sweep across the VEXOR title (~1.4s active per 9s) */
  .hero__title {
    background-image:
      linear-gradient(115deg, transparent 42%, rgba(255,255,255,.92) 50%,
                      rgba(143,227,255,.8) 53%, transparent 61%),
      linear-gradient(150deg, #ffffff 2%, var(--mag-gl) 40%, #FF9AD5 56%, var(--blue) 96%);
    background-size: 250% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: title-sheen 9s linear infinite;
  }
  @keyframes title-sheen {
    0%, 62%   { background-position: 100% 0, 0 0; }
    78%, 100% { background-position: 0% 0, 0 0; }
  }

  /* timeline comet running down the connector (2px-wide repaint strip) */
  .track::after {
    content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, transparent, var(--blue-gl) 45%, #ffffff 50%,
                var(--blue-gl) 55%, transparent) no-repeat;
    background-size: 100% 110px;
    background-position: 50% -30%;
    filter: drop-shadow(0 0 6px var(--blue));
    animation: track-comet 7s ease-in-out infinite;
  }
  @keyframes track-comet {
    0%        { background-position: 50% -30%; }
    55%, 100% { background-position: 50% 130%; }
  }

  /* CTA glow breathing */
  .cta__glow { animation: cta-breathe 8s ease-in-out infinite alternate; }
  @keyframes cta-breathe {
    from { transform: translate(-50%, -50%) scale(.94); opacity: .85; }
    to   { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .draw { stroke-dashoffset: 0; transition: none; }
  .pop { opacity: 1; transform: none; transition: none; }
  .ring__arc { transition: none; }
  .track::before { transform: scaleY(1); transition: none; }
  .hero__cue-line, .hero__eyebrow .dot, .track__item--wip .track__node,
  .flow.is-live .flow__pulse { animation: none; }
  .parallax { transform: none !important; }
}