/* ============================================================
   FINAL REVISION
   1 · hero: video first, no typography competing with it
   2 · gate: the cat leaves the frame before the AI arrives
   3 · phases: a compact mission-control timeline
   4 · hub: four nodes on one orbital system
   Loaded last.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── 1 · HERO ──────────────────────────────────────────────
   The video carries the identity. Everything else is HUD.
   ---------------------------------------------------------- */

.hero { height: 150svh; }
.hero__stage { justify-content: flex-end; padding-bottom: clamp(26px, 5vh, 54px); }

/* the veil no longer has to fight a headline — lighter, cleaner */
.hero__veil {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.04) 22%, rgba(0,0,0,0.04) 52%, rgba(0,0,0,0.72) 94%),
    radial-gradient(130% 96% at 50% 42%, transparent 46%, rgba(0,0,0,0.5) 100%);
}

.hero__copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.hero__kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: clamp(9px, 1vw, 10px);
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--smoke);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.9s var(--e-out) 0.5s, transform 0.9s var(--e-out) 0.5s;
}
.is-ready .hero__kicker { opacity: 1; transform: none; }
.hero__kicker i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--neon);
  box-shadow: 0 0 12px var(--neon);
  animation: rec-blink 2.6s var(--e-io) infinite;
}
.hero__kicker em { font-style: normal; color: var(--faint); }

.hero__cta { margin-top: 0; }
.hero .btn { --btn-pad: 14px 26px; font-size: 10px; }

.hero__foot { margin-top: clamp(20px, 3vh, 34px); }
.hero__mark { width: 26px; opacity: 0.85; filter: drop-shadow(0 0 14px var(--neon-glow)); }

@media (max-width: 720px) {
  .hero { height: 138svh; }
  .hero__copy { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__cta { width: 100%; }
  .hero .btn { flex: 1 1 auto; justify-content: center; }
  .hero__kicker { font-size: 9px; }
}

/* ── 2 · PUMPSWAP AI — its own identity ───────────────────
   No CAT asset lives in this section. The mark materialises
   once on entry, then holds. It never rotates.
   ---------------------------------------------------------- */

.gate { height: 220svh; }
.gate__stage { display: grid; place-items: center; }
.gate__copy {
  position: relative;
  width: 100%;
  max-width: 1180px;
  padding: 0 var(--gut);
  text-align: center;
}

.ai-mark {
  position: relative;
  width: clamp(64px, 8vw, 104px);
  margin: 0 auto clamp(22px, 3.4vh, 40px);
  opacity: 0;
}
.ai-mark img {
  width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(34,240,90,0.20));
}
.ai-mark__sweep {
  position: absolute; inset: -14%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%);
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: url("assets/img/psc-mark.webp");
  mask-image: url("assets/img/psc-mark.webp");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* runs once, on entry, then the element is simply there */


@keyframes ai-materialise {
  0%   { opacity: 0; filter: blur(16px); transform: scale(1.18); }
  55%  { opacity: 1; filter: blur(2px);  transform: scale(0.99); }
  100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}
@keyframes ai-sweep {
  0%   { opacity: 0; transform: translateX(-60%); }
  35%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(60%); }
}

.gate__no {
  font-family: var(--f-mono); font-size: clamp(9px, 1vw, 10px);
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.8s var(--e-out) 0.30s, transform 0.8s var(--e-out) 0.30s;
}
.gate__title {
  margin-top: 18px;
  font-size: clamp(2.5rem, 10.5vw, 9.4rem);
  font-weight: 900; font-stretch: 116%;
  line-height: 0.88; letter-spacing: -0.05em; text-transform: uppercase;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s var(--e-out) 0.42s, transform 1s var(--e-out) 0.42s;
}
.gate__ticker {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--f-mono); font-size: clamp(0.78rem, 1.3vw, 0.95rem);
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--smoke);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.8s var(--e-out) 0.58s, transform 0.8s var(--e-out) 0.58s;
}
.gate__ticker .tk { justify-content: center; }
.gate__line {
  margin: clamp(20px, 3vh, 32px) auto 0;
  max-width: 56ch;
  font-family: var(--f-mono); font-size: clamp(10px, 1.05vw, 12px); line-height: 2;
  letter-spacing: 0.05em; color: var(--ash);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--e-out) 0.72s, transform 0.8s var(--e-out) 0.72s;
}
.gate__utility {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: clamp(24px, 3.6vh, 40px);
  opacity: 0;
  transition: opacity 0.9s var(--e-out) 0.88s;
}
.gate__utility li {
  padding: 8px 14px; border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ash);
  transition: border-color 0.4s var(--e-out), color 0.4s var(--e-out);
}
.gate__utility li:hover { border-color: var(--line-neon); color: var(--white); }



/* the environment still moves with the scroll — the identity does not */
.gate__grid { opacity: calc(var(--p, 0) * 0.4); }
.gate__beam {
  background: radial-gradient(closest-side, rgba(34,240,90,0.13), transparent 64%);
  opacity: calc(0.12 + var(--p, 0) * 0.5);
}

@media (max-width: 720px) {
  .gate { height: 200svh; }
  .gate__utility li { font-size: 8.5px; padding: 7px 11px; }
}

/* ── 3 · PHASES — mission control ──────────────────────────*/

.phases { padding: var(--band) 0; overflow: hidden; }
.phases__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 0 var(--gut); margin-bottom: clamp(34px, 6vh, 70px);
}
.phases__sys {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--faint);
}
.phases__sys b { color: var(--neon); font-weight: 400; }

.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent 82%);
  mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent 82%);
}

.phases__track {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 30px);
  padding: 0 var(--gut);
}
.phases__rail {
  position: absolute; left: var(--gut); right: var(--gut);
  top: calc(clamp(58px, 6.6vw, 100px) + clamp(16px, 2vw, 24px) + 4px); height: 1px;
  background: var(--line);
}
.phases__rail i {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(34,240,90,0.15), var(--neon));
  box-shadow: 0 0 18px var(--neon-glow);
  transition: width 0.2s linear;
}

.ph { position: relative; padding-top: 0; }
.ph__no {
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  font-weight: 900; font-stretch: 118%;
  line-height: 0.82; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.20);
  transition: -webkit-text-stroke-color 0.5s var(--e-out), color 0.5s var(--e-out), transform 0.6s var(--e-out);
  height: clamp(58px, 6.6vw, 100px);
}
.ph__dot {
  position: relative; z-index: 1;
  display: block; width: 9px; height: 9px; margin: clamp(16px, 2vw, 24px) 0 0;
  border-radius: 50%; background: var(--void);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 0.5s var(--e-out), background 0.5s var(--e-out), transform 0.5s var(--e-out);
}
.ph__body { padding-top: clamp(18px, 2.4vw, 32px); }
.ph__name {
  font-size: clamp(0.98rem, 1.7vw, 1.6rem);
  font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.025em; line-height: 1.02; text-transform: uppercase;
  color: var(--smoke); transition: color 0.5s var(--e-out);
}
.ph__line {
  margin-top: 12px; max-width: 26ch;
  font-family: var(--f-mono); font-size: 10px; line-height: 1.75;
  letter-spacing: 0.04em; color: var(--faint);
  transition: color 0.5s var(--e-out);
}
.ph__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.ph__tags span {
  padding: 5px 9px; border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
  transition: border-color 0.45s var(--e-out), color 0.45s var(--e-out);
}
.ph__status { margin-top: 16px; }

.ph.is-on .ph__no { -webkit-text-stroke-color: rgba(255,255,255,0.55); }
.ph.is-on .ph__dot { background: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 0 18px var(--neon-glow); }
.ph.is-on .ph__name { color: var(--white); }
.ph.is-on .ph__line { color: var(--ash); }

.ph:hover .ph__no { color: rgba(34,240,90,0.10); -webkit-text-stroke-color: var(--neon); transform: translateY(-4px); }
.ph:hover .ph__dot { transform: scale(1.5); }
.ph:hover .ph__tags span { border-color: var(--line-neon); color: var(--smoke); }

@media (max-width: 860px) {
  .phases__track { grid-template-columns: 1fr; gap: 0; padding-left: calc(var(--gut) + 26px); }
  .phases__rail {
    left: var(--gut); right: auto; top: 8px; bottom: 30px; width: 1px; height: auto;
  }
  .phases__rail i { inset: 0 0 auto 0; width: 1px; height: calc(var(--p, 0) * 100%); }
  .ph { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; padding: 18px 0; align-items: start; }
  .ph__no { grid-row: 1; font-size: 2.1rem; height: auto; }
  .ph__dot { position: absolute; left: -30px; top: 26px; margin: 0; }
  .ph__body { grid-column: 1 / -1; padding-top: 10px; }
  .ph__line { max-width: none; }
}

/* ── 4 · ECOSYSTEM — command centre ───────────────────────
   A restrained centre, then real product cards. No floating
   boxes, no spinning emblem.
   ---------------------------------------------------------- */

.cmd { position: relative; }
.cmd__core { text-align: center; margin-bottom: clamp(36px, 6vh, 72px); }

.cmd__status {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--faint);
}
.cmd__status i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.cmd__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}

.card {
  position: relative;
  grid-column: span 2;
  display: flex; flex-direction: column;
  min-height: clamp(210px, 24vw, 260px);
  padding: clamp(20px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.45s var(--e-out), background 0.45s var(--e-out),
              transform 0.5s var(--e-out), box-shadow 0.55s var(--e-out);
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0; transition: opacity 0.5s var(--e-out);
}
a.card:hover {
  border-color: rgba(255,255,255,0.24);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012));
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.9);
}
a.card:hover::before { opacity: 1; }

.card__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--smoke);
  transition: color 0.45s var(--e-out), border-color 0.45s var(--e-out);
}
.card__icon svg { width: 16px; height: 16px; }
.card__icon img { width: 20px; height: auto; object-fit: contain; }
a.card:hover .card__icon { color: var(--neon); border-color: var(--line-neon); }
.card__idx { font-family: var(--f-mono); font-size: 9px; letter-spacing: var(--track-micro); color: var(--faint); }

.card__label {
  margin-top: clamp(22px, 3vw, 34px);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.025em; text-transform: uppercase; line-height: 1;
}
.card__title { margin-top: 12px; font-size: clamp(0.86rem, 1.1vw, 0.98rem); font-weight: 500; color: var(--smoke); letter-spacing: -0.01em; }
.card__sub {
  margin-top: 8px;
  font-family: var(--f-mono); font-size: 10px; line-height: 1.75;
  letter-spacing: 0.05em; color: var(--faint);
}
.card__cta {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 22px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ash);
  transition: color 0.4s var(--e-out);
}
.card__cta em { font-style: normal; transition: transform 0.45s var(--e-out); }
a.card:hover .card__cta { color: var(--white); }
a.card:hover .card__cta em { transform: translateX(5px); }

.card--primary {
  grid-column: span 3;
  border-color: rgba(255,255,255,0.16);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(34,240,90,0.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
}
.card--primary .card__idx { color: var(--gold); }
.card--primary .card__label { font-size: clamp(1.3rem, 2.4vw, 2.1rem); }
.card--cat { grid-column: span 3; }

.card--pending { opacity: 0.62; }
.card--pending .card__cta { color: var(--faint); }

@media (max-width: 1000px) {
  .cmd__grid { grid-template-columns: repeat(4, 1fr); }
  .card, .card--primary, .card--cat { grid-column: span 2; }
}
@media (max-width: 640px) {
  .cmd__grid { grid-template-columns: 1fr; gap: 10px; }
  .card, .card--primary, .card--cat { grid-column: auto; min-height: 0; }
  .card__label { margin-top: 20px; }
  .card__cta { padding-top: 18px; }
}

/* ── typography restraint pass ─────────────────────────────*/
:root { --t-mega: clamp(2.4rem, 8.4vw, 8.4rem); }
.hub .finale__title { font-size: clamp(2.2rem, 7vw, 6.4rem); }

/* ── 5 · NAVIGATION — obvious but quiet ────────────────────*/
.nav__links a { padding-left: 12px; }
.nav__links a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--neon); opacity: 0; transform: scale(0.4);
  transition: opacity 0.4s var(--e-out), transform 0.4s var(--e-out);
}
.nav__links a.is-active::before { opacity: 1; transform: none; }
.nav__links a.is-active::after { transform: scaleX(0); }

/* ── 6 · TYPOGRAPHY — nothing touches the edges ────────────*/
.mega, .h2, .finale__title, .gate__title { overflow-wrap: break-word; hyphens: none; }
.story, .watch, .signal, .chapter, .token { max-width: var(--maxw); }
.psc__stage, .psai__stage, .rack__stage, .tiers__stage { padding-left: var(--gut); padding-right: var(--gut); }
@media (max-width: 600px) {
  .mega { font-size: clamp(2rem, 11vw, 3.4rem); }
  .cat__title { font-size: clamp(3rem, 24vw, 7rem); }
  .token__symbol, .psc__label h2 { font-size: clamp(2.4rem, 15vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-mark { opacity: 1 !important; animation: none !important; }
  .ai-mark__sweep { animation: none !important; opacity: 0.6; }
  .gate__no, .gate__title, .gate__ticker, .gate__line, .gate__utility { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   SCRUB PASS
   ══════════════════════════════════════════════════════════ */

/* ── the hero owns enough scroll to read as a sequence ─────*/
.hero { height: 260svh; }
.hero__copy { opacity: calc(1 - max(0, var(--p, 0) - 0.74) * 3.9); transform: none; }
.hero__foot { opacity: calc(1 - max(0, var(--p, 0) - 0.68) * 4); }
.hero__media { transform: scale(calc(1 + var(--p, 0) * 0.14)); }
.hero__iris {
  background: radial-gradient(circle at 50% 44%,
    transparent calc(92% - max(0, var(--p, 0) - 0.66) * 270%),
    #000 calc(104% - max(0, var(--p, 0) - 0.66) * 270%));
}
/* a hairline that reads as the video's own timeline */

.is-ready 

@media (max-width: 720px) { .hero { height: 240svh; } }

/* ── deeper stagger: these lists run to eight items ────────*/
[data-stagger].is-in > *:nth-child(6) { transition-delay: 0.44s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 0.52s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: 0.60s; }
[data-stagger].is-in > *:nth-child(9) { transition-delay: 0.68s; }
[data-stagger].is-in > *:nth-child(10) { transition-delay: 0.76s; }

/* ── BUILT WITH THE PACK ───────────────────────────────────*/
.back__caps > div, .back__live > div { position: relative; transition: background 0.45s var(--e-out); }
.back__caps > div::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--neon); transition: width 0.9s var(--e-out);
}
.back__caps.is-in > div::after { width: 100%; }
.back__caps.is-in > div:nth-child(2)::after { transition-delay: 0.14s; }
.back__caps.is-in > div:nth-child(3)::after { transition-delay: 0.28s; }
.back__caps > div:hover, .back__live > div:hover { background: rgba(255,255,255,0.02); }

.back__flow li { position: relative; transition: color 0.4s var(--e-out), padding-left 0.5s var(--e-out); }
.back__flow li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--line-strong); transition: width 0.5s var(--e-out);
}
.back__flow li:hover { color: var(--white); padding-left: 8px; }
.back__flow li:hover::after { width: 100%; }
.back__flow li:hover em { color: var(--neon); }

.back__rules div { transition: background 0.4s var(--e-out); }
.back__rules div:hover { background: rgba(255,255,255,0.025); }
.back__rules div:hover dd { color: var(--neon); }

.btn--wallet { position: relative; }
.btn--wallet::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 5px; height: 5px;
  margin-top: -2.5px; border-radius: 50%; background: var(--line-strong);
}
.btn--wallet[aria-disabled="true"] { padding-right: 34px; }

/* ── PSAI POINTS ───────────────────────────────────────────*/
.pts__sources li { cursor: default; transform: translateY(0); transition: border-color 0.4s var(--e-out), color 0.4s var(--e-out), transform 0.4s var(--e-out); }
.pts__sources li:hover { transform: translateY(-3px); }
.pts__seasons > div { position: relative; overflow: hidden; }
.pts__seasons > div::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 1px;
  background: linear-gradient(90deg, var(--neon), transparent);
  transition: width 1.1s var(--e-out);
}
.pts__seasons.is-in > div::before { width: 100%; }
.pts__seasons.is-in > div:nth-child(2)::before { transition-delay: 0.16s; }
.pts__seasons.is-in > div:nth-child(3)::before { transition-delay: 0.32s; }
.pts__seasons > div:hover { background: rgba(255,255,255,0.02); }
.pts__seasons > div:hover b { color: var(--neon); }

/* ── the closing shot no longer stacks two marks ───────────*/
.cmd__core { padding-top: clamp(20px, 4vh, 44px); }

@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .hero__iris { display: none; }
}

/* ══════════════════════════════════════════════════════════
   FIX PASS — loop restored, bar fills, gate plays on scroll
   ══════════════════════════════════════════════════════════ */

/* ── the hero is a loop again, the scroll is just the camera ─*/
.hero { height: 175svh; }
.hero__copy { opacity: calc(1 - max(0, var(--p, 0) - 0.42) * 2.6); }
.hero__foot { opacity: calc(1 - max(0, var(--p, 0) - 0.34) * 3); }
.hero__media { transform: scale(calc(1 + var(--p, 0) * 0.34)); }
.hero__iris {
  background: radial-gradient(circle at 50% 44%,
    transparent calc(88% - max(0, var(--p, 0) - 0.34) * 150%),
    #000 calc(100% - max(0, var(--p, 0) - 0.34) * 150%));
}

/* ── the supply bar fills as it is scrolled ────────────────*/
.supplybar i {
  background: rgba(255, 255, 255, 0.05);
  transform: scaleY(0.55);
  transform-origin: 50% 100%;
  transition: background 0.35s var(--e-out), transform 0.45s var(--e-out), box-shadow 0.35s;
}
.supplybar i.is-lit { background: rgba(255, 255, 255, 0.26); transform: scaleY(1); }
.supplybar i.is-alloc { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.supplybar i.is-alloc.is-lit {
  background: var(--neon);
  box-shadow: 0 0 16px rgba(34, 240, 90, 0.45);
  transform: scaleY(1) translateY(-6px);
}
.supplybar__read {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--faint);
}
.supplybar__read b { color: var(--smoke); font-weight: 400; }
.supplybar__read span { color: var(--neon); font-variant-numeric: tabular-nums; }

/* ── the AI entrance plays with the scroll, in both directions ─
   --a = the mark's own progress, --b = the copy's.            */
.gate__stage { --a: min(1, max(0, var(--p, 0) / 0.40)); }

.ai-mark {
  opacity: min(1, max(0, calc((var(--p, 0) - 0.02) * 6)));
  filter: blur(calc((1 - var(--a)) * 18px));
  transform: rotate(calc(-150deg + var(--a) * 150deg)) scale(calc(1.28 - var(--a) * 0.28));
  will-change: transform, filter, opacity;
  animation: none;
}
.ai-mark__sweep {
  opacity: min(max(0, calc((var(--p, 0) - 0.30) * 9)), max(0, calc((0.62 - var(--p, 0)) * 9)));
  transform: translateX(calc((var(--p, 0) - 0.46) * 320%));
  animation: none;
}

.gate__no      { opacity: min(1, max(0, calc((var(--p, 0) - 0.34) * 7))); transform: none; transition: none; }
.gate__title   { opacity: min(1, max(0, calc((var(--p, 0) - 0.40) * 6)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.40) * 6))) * 30px), 0);
                 transition: none; }
.gate__ticker  { opacity: min(1, max(0, calc((var(--p, 0) - 0.50) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.50) * 7))) * 18px), 0);
                 transition: none; }
.gate__line    { opacity: min(1, max(0, calc((var(--p, 0) - 0.58) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.58) * 7))) * 16px), 0);
                 transition: none; }
.gate__utility { opacity: min(1, max(0, calc((var(--p, 0) - 0.66) * 7))); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ai-mark { opacity: 1; filter: none; transform: none; }
  .ai-mark__sweep { opacity: 0; }
  .gate__no, .gate__title, .gate__ticker, .gate__line, .gate__utility {
    opacity: 1 !important; transform: none !important;
  }
  .supplybar i { transform: none; }
  .hero { height: 100svh; }
}

/* the shot closes itself: the hint steps aside as the page takes over */
.hero.is-closing .hero__hint { opacity: 0; transition: opacity 0.4s var(--e-out); }
.hero.is-held .hero__hint i::after { animation-duration: 1.2s; }

}

/* ── the opening shot switches off like a television ──────
   The picture collapses to a bright horizontal line, the line
   pinches to a point, the point goes out. Automatic, at the end
   of playback, and nothing else moves while it happens.
   (Skipped entirely when the video carries its own shut-off —
   see HERO.builtInSwitchOff in the config.)
   ---------------------------------------------------------- */
.hero { height: 145svh; }
.hero__stage { --iris: min(1, max(0, (var(--p, 0) - 0.26)) * 1.5); transform-origin: 50% 44%; }

.hero__media { transform: scale(calc(1 + var(--p, 0) * 0.30)); }
.hero__iris {
  background: radial-gradient(circle at 50% 44%,
    transparent calc((1 - var(--iris)) * 86%),
    #000 calc((1 - var(--iris)) * 112%));
}
.hero__copy { opacity: calc(1 - max(0, var(--p, 0) - 0.30) * 3.2); }
.hero__foot { opacity: calc(1 - max(0, var(--p, 0) - 0.22) * 3.6); }

@keyframes tv-off {
  0%   { transform: scale(1, 1);         filter: brightness(1) contrast(1); }
  38%  { transform: scale(1.012, 0.05);  filter: brightness(2.6) contrast(1.4); }
  56%  { transform: scale(1.02, 0.006);  filter: brightness(4.2) contrast(1.7); }
  70%  { transform: scale(0.9, 0.005);   filter: brightness(4.6); opacity: 1; }
  100% { transform: scale(0.012, 0.004); filter: brightness(6); opacity: 0; }
}
.hero.is-exiting .hero__stage {
  animation: tv-off 0.46s cubic-bezier(0.55, 0, 0.30, 1) forwards;
  will-change: transform, filter, opacity;
}

/* the chrome steps aside before the collapse starts */
.hero.is-fading .hero__copy,
.hero.is-fading .hero__foot,
.hero.is-fading .hero__brackets {
  opacity: 0;
  transition: opacity 0.4s var(--e-out);
}
.hero.is-done .hero__stage { opacity: 0; pointer-events: none; animation: none; }

/* ── the supply bar fills as it is scrolled ────────────────*/
.supplybar i {
  background: rgba(255, 255, 255, 0.05);
  transform: scaleY(0.55);
  transform-origin: 50% 100%;
  transition: background 0.35s var(--e-out), transform 0.45s var(--e-out), box-shadow 0.35s;
}
.supplybar i.is-lit { background: rgba(255, 255, 255, 0.26); transform: scaleY(1); }
.supplybar i.is-alloc { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.supplybar i.is-alloc.is-lit {
  background: var(--neon);
  box-shadow: 0 0 16px rgba(34, 240, 90, 0.45);
  transform: scaleY(1) translateY(-6px);
}
.supplybar__read {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--faint);
}
.supplybar__read b { color: var(--smoke); font-weight: 400; }
.supplybar__read span { color: var(--neon); font-variant-numeric: tabular-nums; }

/* ── the AI entrance plays with the scroll, in both directions ─
   --a = the mark's own progress, --b = the copy's.            */
.gate__stage { --a: min(1, max(0, var(--p, 0) / 0.40)); }

.ai-mark {
  opacity: min(1, max(0, calc((var(--p, 0) - 0.02) * 6)));
  filter: blur(calc((1 - var(--a)) * 18px));
  transform: rotate(calc(-150deg + var(--a) * 150deg)) scale(calc(1.28 - var(--a) * 0.28));
  will-change: transform, filter, opacity;
  animation: none;
}
.ai-mark__sweep {
  opacity: min(max(0, calc((var(--p, 0) - 0.30) * 9)), max(0, calc((0.62 - var(--p, 0)) * 9)));
  transform: translateX(calc((var(--p, 0) - 0.46) * 320%));
  animation: none;
}

.gate__no      { opacity: min(1, max(0, calc((var(--p, 0) - 0.34) * 7))); transform: none; transition: none; }
.gate__title   { opacity: min(1, max(0, calc((var(--p, 0) - 0.40) * 6)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.40) * 6))) * 30px), 0);
                 transition: none; }
.gate__ticker  { opacity: min(1, max(0, calc((var(--p, 0) - 0.50) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.50) * 7))) * 18px), 0);
                 transition: none; }
.gate__line    { opacity: min(1, max(0, calc((var(--p, 0) - 0.58) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.58) * 7))) * 16px), 0);
                 transition: none; }
.gate__utility { opacity: min(1, max(0, calc((var(--p, 0) - 0.66) * 7))); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ai-mark { opacity: 1; filter: none; transform: none; }
  .ai-mark__sweep { opacity: 0; }
  .gate__no, .gate__title, .gate__ticker, .gate__line, .gate__utility {
    opacity: 1 !important; transform: none !important;
  }
  .supplybar i { transform: none; }
  .hero { height: 100svh; }
}

/* the shot closes itself: the hint steps aside as the page takes over */
.hero.is-closing .hero__hint { opacity: 0; transition: opacity 0.4s var(--e-out); }
.hero.is-held .hero__hint i::after { animation-duration: 1.2s; }

}

/* ── the opening shot ──────────────────────────────────────
   The video performs the television shut-off itself, so nothing
   here animates the picture. The only job left is to step the
   chrome aside just before the collapse, and to hide the stage
   once the page has moved on.
   ---------------------------------------------------------- */
.hero { height: 145svh; }
.hero__stage { --iris: min(1, max(0, (var(--p, 0) - 0.26)) * 1.5); }

.hero__media { transform: scale(calc(1 + var(--p, 0) * 0.30)); }
.hero__iris {
  background: radial-gradient(circle at 50% 44%,
    transparent calc((1 - var(--iris)) * 86%),
    #000 calc((1 - var(--iris)) * 112%));
}
.hero__copy { opacity: calc(1 - max(0, var(--p, 0) - 0.30) * 3.2); }
.hero__foot { opacity: calc(1 - max(0, var(--p, 0) - 0.22) * 3.6); }

.hero.is-exiting .hero__copy,
.hero.is-exiting .hero__foot,
.hero.is-exiting .hero__brackets {
  opacity: 0;
  transition: opacity 0.45s var(--e-out);
}
.hero.is-done .hero__stage { opacity: 0; pointer-events: none; }

/* ── the supply bar fills as it is scrolled ────────────────*/
.supplybar i {
  background: rgba(255, 255, 255, 0.05);
  transform: scaleY(0.55);
  transform-origin: 50% 100%;
  transition: background 0.35s var(--e-out), transform 0.45s var(--e-out), box-shadow 0.35s;
}
.supplybar i.is-lit { background: rgba(255, 255, 255, 0.26); transform: scaleY(1); }
.supplybar i.is-alloc { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.supplybar i.is-alloc.is-lit {
  background: var(--neon);
  box-shadow: 0 0 16px rgba(34, 240, 90, 0.45);
  transform: scaleY(1) translateY(-6px);
}
.supplybar__read {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--faint);
}
.supplybar__read b { color: var(--smoke); font-weight: 400; }
.supplybar__read span { color: var(--neon); font-variant-numeric: tabular-nums; }

/* ── the AI entrance plays with the scroll, in both directions ─
   --a = the mark's own progress, --b = the copy's.            */
.gate__stage { --a: min(1, max(0, var(--p, 0) / 0.40)); }

.ai-mark {
  opacity: min(1, max(0, calc((var(--p, 0) - 0.02) * 6)));
  filter: blur(calc((1 - var(--a)) * 18px));
  transform: rotate(calc(-150deg + var(--a) * 150deg)) scale(calc(1.28 - var(--a) * 0.28));
  will-change: transform, filter, opacity;
  animation: none;
}
.ai-mark__sweep {
  opacity: min(max(0, calc((var(--p, 0) - 0.30) * 9)), max(0, calc((0.62 - var(--p, 0)) * 9)));
  transform: translateX(calc((var(--p, 0) - 0.46) * 320%));
  animation: none;
}

.gate__no      { opacity: min(1, max(0, calc((var(--p, 0) - 0.34) * 7))); transform: none; transition: none; }
.gate__title   { opacity: min(1, max(0, calc((var(--p, 0) - 0.40) * 6)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.40) * 6))) * 30px), 0);
                 transition: none; }
.gate__ticker  { opacity: min(1, max(0, calc((var(--p, 0) - 0.50) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.50) * 7))) * 18px), 0);
                 transition: none; }
.gate__line    { opacity: min(1, max(0, calc((var(--p, 0) - 0.58) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.58) * 7))) * 16px), 0);
                 transition: none; }
.gate__utility { opacity: min(1, max(0, calc((var(--p, 0) - 0.66) * 7))); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ai-mark { opacity: 1; filter: none; transform: none; }
  .ai-mark__sweep { opacity: 0; }
  .gate__no, .gate__title, .gate__ticker, .gate__line, .gate__utility {
    opacity: 1 !important; transform: none !important;
  }
  .supplybar i { transform: none; }
  .hero { height: 100svh; }
}

/* the shot closes itself: the hint steps aside as the page takes over */
.hero.is-closing .hero__hint { opacity: 0; transition: opacity 0.4s var(--e-out); }
.hero.is-held .hero__hint i::after { animation-duration: 1.2s; }

}

/* ── the opening shot switches off like a television ──────
   Automatic, at the end of playback. The picture collapses to a
   bright horizontal line, the line shrinks to a point, the point
   goes out. Nothing else moves while it happens.
   ---------------------------------------------------------- */
.hero { height: 145svh; }
.hero__stage { --iris: min(1, max(0, (var(--p, 0) - 0.26)) * 1.5); transform-origin: 50% 44%; }

.hero__media { transform: scale(calc(1 + var(--p, 0) * 0.30)); }
.hero__iris {
  background: radial-gradient(circle at 50% 44%,
    transparent calc((1 - var(--iris)) * 86%),
    #000 calc((1 - var(--iris)) * 112%));
}
.hero__copy { opacity: calc(1 - max(0, var(--p, 0) - 0.30) * 3.2); }
.hero__foot { opacity: calc(1 - max(0, var(--p, 0) - 0.22) * 3.6); }

}
.hero.is-exiting .hero__stage {
}
/* the chrome is gone before the collapse starts */
.hero.is-exiting .hero__copy,
.hero.is-exiting .hero__foot,
.hero.is-exiting .hero__brackets { opacity: 0; transition: opacity 0.14s var(--e-out); }
.hero.is-done .hero__stage { opacity: 0; pointer-events: none; animation: none; }

/* ── the supply bar fills as it is scrolled ────────────────*/
.supplybar i {
  background: rgba(255, 255, 255, 0.05);
  transform: scaleY(0.55);
  transform-origin: 50% 100%;
  transition: background 0.35s var(--e-out), transform 0.45s var(--e-out), box-shadow 0.35s;
}
.supplybar i.is-lit { background: rgba(255, 255, 255, 0.26); transform: scaleY(1); }
.supplybar i.is-alloc { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.supplybar i.is-alloc.is-lit {
  background: var(--neon);
  box-shadow: 0 0 16px rgba(34, 240, 90, 0.45);
  transform: scaleY(1) translateY(-6px);
}
.supplybar__read {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--faint);
}
.supplybar__read b { color: var(--smoke); font-weight: 400; }
.supplybar__read span { color: var(--neon); font-variant-numeric: tabular-nums; }

/* ── the AI entrance plays with the scroll, in both directions ─
   --a = the mark's own progress, --b = the copy's.            */
.gate__stage { --a: min(1, max(0, var(--p, 0) / 0.40)); }

.ai-mark {
  opacity: min(1, max(0, calc((var(--p, 0) - 0.02) * 6)));
  filter: blur(calc((1 - var(--a)) * 18px));
  transform: rotate(calc(-150deg + var(--a) * 150deg)) scale(calc(1.28 - var(--a) * 0.28));
  will-change: transform, filter, opacity;
  animation: none;
}
.ai-mark__sweep {
  opacity: min(max(0, calc((var(--p, 0) - 0.30) * 9)), max(0, calc((0.62 - var(--p, 0)) * 9)));
  transform: translateX(calc((var(--p, 0) - 0.46) * 320%));
  animation: none;
}

.gate__no      { opacity: min(1, max(0, calc((var(--p, 0) - 0.34) * 7))); transform: none; transition: none; }
.gate__title   { opacity: min(1, max(0, calc((var(--p, 0) - 0.40) * 6)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.40) * 6))) * 30px), 0);
                 transition: none; }
.gate__ticker  { opacity: min(1, max(0, calc((var(--p, 0) - 0.50) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.50) * 7))) * 18px), 0);
                 transition: none; }
.gate__line    { opacity: min(1, max(0, calc((var(--p, 0) - 0.58) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.58) * 7))) * 16px), 0);
                 transition: none; }
.gate__utility { opacity: min(1, max(0, calc((var(--p, 0) - 0.66) * 7))); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ai-mark { opacity: 1; filter: none; transform: none; }
  .ai-mark__sweep { opacity: 0; }
  .gate__no, .gate__title, .gate__ticker, .gate__line, .gate__utility {
    opacity: 1 !important; transform: none !important;
  }
  .supplybar i { transform: none; }
  .hero { height: 100svh; }
}

/* the shot closes itself: the hint steps aside as the page takes over */
.hero.is-closing .hero__hint { opacity: 0; transition: opacity 0.4s var(--e-out); }
.hero.is-held .hero__hint i::after { animation-duration: 1.2s; }

}

/* ── the opening shot closes the way a manual scroll closes it ─
   One motion, not two. The iris and the push-in are already tied
   to scroll progress; the automatic exit simply performs that
   scroll for you, so it is exactly as smooth as doing it by hand.
   ---------------------------------------------------------- */
.hero { height: 145svh; }

/* 0 → 1 across the last two thirds of the hero */
.hero__stage { --iris: min(1, max(0, (var(--p, 0) - 0.26)) * 1.5); }

.hero__media { transform: scale(calc(1 + var(--p, 0) * 0.30)); }
.hero__iris {
  background: radial-gradient(circle at 50% 44%,
    transparent calc((1 - var(--iris)) * 86%),
    #000 calc((1 - var(--iris)) * 112%));
}
.hero__copy { opacity: calc(1 - max(0, var(--p, 0) - 0.30) * 3.2); }
.hero__foot { opacity: calc(1 - max(0, var(--p, 0) - 0.22) * 3.6); }

/* the chrome steps aside the moment playback ends */
.hero.is-exiting .hero__copy,
.hero.is-exiting .hero__foot,
.hero.is-exiting .hero__brackets {
  opacity: 0;
  transition: opacity 0.22s var(--e-out);
}

/* ── the supply bar fills as it is scrolled ────────────────*/
.supplybar i {
  background: rgba(255, 255, 255, 0.05);
  transform: scaleY(0.55);
  transform-origin: 50% 100%;
  transition: background 0.35s var(--e-out), transform 0.45s var(--e-out), box-shadow 0.35s;
}
.supplybar i.is-lit { background: rgba(255, 255, 255, 0.26); transform: scaleY(1); }
.supplybar i.is-alloc { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.supplybar i.is-alloc.is-lit {
  background: var(--neon);
  box-shadow: 0 0 16px rgba(34, 240, 90, 0.45);
  transform: scaleY(1) translateY(-6px);
}
.supplybar__read {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--faint);
}
.supplybar__read b { color: var(--smoke); font-weight: 400; }
.supplybar__read span { color: var(--neon); font-variant-numeric: tabular-nums; }

/* ── the AI entrance plays with the scroll, in both directions ─
   --a = the mark's own progress, --b = the copy's.            */
.gate__stage { --a: min(1, max(0, var(--p, 0) / 0.40)); }

.ai-mark {
  opacity: min(1, max(0, calc((var(--p, 0) - 0.02) * 6)));
  filter: blur(calc((1 - var(--a)) * 18px));
  transform: rotate(calc(-150deg + var(--a) * 150deg)) scale(calc(1.28 - var(--a) * 0.28));
  will-change: transform, filter, opacity;
  animation: none;
}
.ai-mark__sweep {
  opacity: min(max(0, calc((var(--p, 0) - 0.30) * 9)), max(0, calc((0.62 - var(--p, 0)) * 9)));
  transform: translateX(calc((var(--p, 0) - 0.46) * 320%));
  animation: none;
}

.gate__no      { opacity: min(1, max(0, calc((var(--p, 0) - 0.34) * 7))); transform: none; transition: none; }
.gate__title   { opacity: min(1, max(0, calc((var(--p, 0) - 0.40) * 6)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.40) * 6))) * 30px), 0);
                 transition: none; }
.gate__ticker  { opacity: min(1, max(0, calc((var(--p, 0) - 0.50) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.50) * 7))) * 18px), 0);
                 transition: none; }
.gate__line    { opacity: min(1, max(0, calc((var(--p, 0) - 0.58) * 7)));
                 transform: translate3d(0, calc((1 - min(1, max(0, (var(--p, 0) - 0.58) * 7))) * 16px), 0);
                 transition: none; }
.gate__utility { opacity: min(1, max(0, calc((var(--p, 0) - 0.66) * 7))); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ai-mark { opacity: 1; filter: none; transform: none; }
  .ai-mark__sweep { opacity: 0; }
  .gate__no, .gate__title, .gate__ticker, .gate__line, .gate__utility {
    opacity: 1 !important; transform: none !important;
  }
  .supplybar i { transform: none; }
  .hero { height: 100svh; }
}

/* the shot closes itself: the hint steps aside as the page takes over */
.hero.is-closing .hero__hint { opacity: 0; transition: opacity 0.4s var(--e-out); }
.hero.is-held .hero__hint i::after { animation-duration: 1.2s; }

/* ══════════════════════════════════════════════════════════
   THE CURRENT — one thin strand of vapour, drawn on canvas.
   Fixed, behind everything, never interactive.
   ══════════════════════════════════════════════════════════ */

.trail {
  position: fixed;
  inset: 0;
  /* Below everything, permanently. The root paints the black, this
     canvas paints above that black, and all content — text, labels,
     images, UI — paints above the canvas. No stacking to maintain. */
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: trail-in 1.6s var(--e-out) 0.6s forwards;
}
@keyframes trail-in { to { opacity: 1; } }

/* The current is scenery. The canvas sits at z-index 0; the page
   content is lifted above it, and the fixed chrome keeps the much
   higher layers it already had (nav 70, menu 80, OSD/rail 60) —
   touching those would have dropped the fullscreen menu behind
   the navigation. */
#main, .foot { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .trail { animation: none; opacity: 0.45; }
}

.hero.is-done .hero__stage { pointer-events: none; }


/* ══════════════════════════════════════════════════════════
   THE PIPELINE — no frame, no panel. It runs the full width of
   the site and sits directly on the page's black, so it reads
   as something happening in space rather than inside a card.
   ══════════════════════════════════════════════════════════ */

.signal__grid { grid-template-columns: 1fr; gap: clamp(30px, 5vh, 60px); }
.signal__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 70px); align-items: start; }
.signal__copy .signal__list { margin-top: 0; }
@media (max-width: 900px) { .signal__copy { grid-template-columns: 1fr; } }

/* break out of the section's container to the full viewport width */
.net {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
}

.net__bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gut) 18px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase;
}
.net__title { display: flex; align-items: center; gap: 9px; color: var(--white); }
.net__title i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 10px var(--neon);
  animation: rec-blink 2s var(--e-io) infinite;
}
.net__meta { color: var(--ash); }
.net__count { margin-left: auto; color: var(--neon); font-variant-numeric: tabular-nums; }

/* ── the field ───────────────────────────────────────────── */
.net__stage {
  position: relative;
  width: 100%;
  height: clamp(340px, 64vh, 780px);
  overflow: hidden;
}
.net__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.net__core {
  position: absolute; left: 50%; top: 50%;
  width: clamp(64px, 7.5vw, 128px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 52px var(--neon-glow));
  transition: transform 0.42s var(--e-out);
  pointer-events: none;
}
.net__halo {
  position: absolute; left: 50%; top: 50%;
  width: clamp(260px, 34vw, 620px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34,240,90,0.11), transparent 72%);
  pointer-events: none;
}
.net__rings { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.net__rings i {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.04);
}
.net__rings i:nth-child(1) { width: clamp(150px, 17vw, 290px); aspect-ratio: 1; }
.net__rings i:nth-child(2) { width: clamp(240px, 27vw, 450px); aspect-ratio: 1; border-color: rgba(34,240,90,0.09); }
.net__rings i:nth-child(3) {
  width: clamp(330px, 38vw, 640px); aspect-ratio: 1;
  border-style: dashed; border-color: rgba(255,255,255,0.035);
  animation: ring-turn 52s linear infinite;
}
@keyframes ring-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }

.net__side {
  position: absolute; top: 10px;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--faint);
}
.net__side--in { left: var(--gut); }
.net__side--out { right: var(--gut); }

/* ── wiring ──────────────────────────────────────────────── */
.net .n-link { stroke-width: 1.15; }
.net .n-node { stroke-width: 1.3; }
.net .n-dot { filter: drop-shadow(0 0 7px rgba(34,240,90,0.95)); }
.net .n-label { font-size: 13px; letter-spacing: 0.22em; }
.net .n-label.is-on { fill: rgba(255,255,255,0.80); }

/* ── the log, floating under the field ───────────────────── */
.net__log {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gut);
  border-top: 1px solid var(--line);
  min-height: 148px;
}
.net__log li { padding: 13px 0; font-size: 11.5px; letter-spacing: 0.07em; }
.net__log li b { font-size: 12.5px; }
.net__foot { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gut) 0; }

@media (max-width: 900px) {
  .net__stage { height: clamp(300px, 52vh, 460px); }
  .net .n-label { font-size: 22px; letter-spacing: 0.14em; }
  .net__log { min-height: 104px; }
  .net__log li:nth-child(n+4) { display: none; }
  .net__bar { font-size: 9px; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE FIXES
   Three things were being cut off on a phone: the hero video,
   the PUMPSWAP AI headline, and the pipeline diagram.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* 1 · full-bleed again, but framed on the right of the shot:
        that is where the cat is. The branding on the left of the
        frame is the part we can afford to lose in portrait. */
  .hero__video {
    object-fit: cover;
    object-position: 74% 50%;
  }
  .hero__media { transform: scale(calc(1 + var(--p, 0) * 0.22)); }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.62) 0%, transparent 22%, transparent 54%, rgba(0,0,0,0.86) 92%);
  }

  /* 2 · the headline was wider than the screen at 15vw with the
        expanded width axis — narrow the letterforms and the size */
  .gate__title {
    font-size: clamp(1.7rem, 11.2vw, 3.6rem);
    font-stretch: 100%;
    letter-spacing: -0.035em;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .gate__copy { padding-left: max(var(--gut), 18px); padding-right: max(var(--gut), 18px); }
  .gate__line { font-size: 10.5px; line-height: 1.85; }

  /* 3 · the pipeline switches to its tall layout, which fits the
        screen instead of being sliced */
  .net__stage { height: auto; aspect-ratio: 700 / 900; }
  .net .n-label { font-size: 26px; letter-spacing: 0.10em; }
  .net__side { font-size: 8.5px; }
  .net__core { width: clamp(56px, 14vw, 92px); }
  .net__halo { width: clamp(200px, 52vw, 300px); }
  .net__rings i:nth-child(1) { width: 34vw; }
  .net__rings i:nth-child(2) { width: 52vw; }
  .net__rings i:nth-child(3) { width: 70vw; }
}

/* the hero title block never sits under the notch */
@media (max-width: 860px) and (orientation: portrait) {
  .hero__stage { padding-bottom: max(clamp(26px, 5vh, 54px), env(safe-area-inset-bottom)); }
}

/* ══════════════════════════════════════════════════════════
   THE MARKET — launch context. Same palette, same hairlines,
   same type. Content, not a new design system.
   ══════════════════════════════════════════════════════════ */

.hero__pair {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--f-mono); font-size: clamp(9px, 1vw, 10px);
  letter-spacing: var(--track-micro); text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.8s var(--e-out) 0.8s, transform 0.8s var(--e-out) 0.8s;
}
.is-ready .hero__pair { opacity: 1; transform: none; }
.hero__pair b { color: var(--neon); font-weight: 500; }
.hero__pair em { font-style: normal; color: var(--faint); }

/* the pair, stated once and clearly */
.pair {
  display: flex; align-items: baseline; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap;
  margin-top: clamp(34px, 6vh, 70px);
  padding-bottom: clamp(26px, 4vh, 44px);
  border-bottom: 1px solid var(--line);
}
.pair__a, .pair__b {
  font-size: clamp(2rem, 7vw, 5.2rem);
  font-weight: 900; font-stretch: 112%;
  letter-spacing: -0.045em; line-height: 0.9; text-transform: uppercase;
}
.pair__b { color: var(--smoke); }
.pair__slash { font-size: clamp(1.6rem, 5vw, 3.6rem); color: var(--neon); font-weight: 300; }
.pair__tag {
  margin-left: auto; align-self: center;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ash);
}

/* launch → price discovery → liquidity */
.market__flow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-top: 0;
}
.mstep { background: var(--void); padding: clamp(22px, 3vw, 34px); transition: background 0.45s var(--e-out); }
.mstep:hover { background: rgba(255,255,255,0.02); }
.mstep__no { font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--track-micro); color: var(--neon); }
.mstep__name {
  margin-top: 16px;
  font-size: clamp(1.05rem, 2vw, 1.6rem); font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.025em; text-transform: uppercase; line-height: 1.05;
}
.mstep__line { margin-top: 12px; font-family: var(--f-mono); font-size: 11px; line-height: 1.8; color: var(--ash); }

.market__why {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(20px, 4vw, 60px);
  margin-top: clamp(40px, 7vh, 80px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--line);
}
.market__why .h3 {
  font-size: clamp(1.3rem, 3vw, 2.2rem); font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.03em; text-transform: uppercase; line-height: 1;
}
.market__why p { font-size: var(--t-lede); line-height: 1.55; color: var(--smoke); max-width: 56ch; }
.market__why p + p { margin-top: 16px; font-size: var(--t-body); }
@media (max-width: 860px) { .market__why { grid-template-columns: 1fr; } }

/* how it works */
.market__how { margin-top: clamp(44px, 8vh, 90px); }
.steps { margin-top: clamp(22px, 4vh, 40px); border-top: 1px solid var(--line); }
.steps li {
  display: grid; grid-template-columns: 60px minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(12px, 2vw, 30px); align-items: baseline;
  padding: clamp(16px, 2.4vh, 26px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--e-out), background 0.45s var(--e-out);
}
.steps li:hover { padding-left: 12px; }
.steps__no { font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--track-micro); color: var(--neon); }
.steps__name {
  font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 800; font-stretch: 108%;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.steps__line { font-family: var(--f-mono); font-size: 11px; line-height: 1.8; color: var(--ash); }
@media (max-width: 720px) {
  .steps li { grid-template-columns: 44px 1fr; gap: 6px 14px; }
  .steps__line { grid-column: 2; }
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq__list { margin-top: clamp(34px, 6vh, 70px); border-top: 1px solid var(--line); }
.faq__item {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(16px, 4vw, 60px);
  padding: clamp(20px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.45s var(--e-out);
}
.faq__item:hover { background: rgba(255,255,255,0.015); }
.faq__item dt {
  display: flex; gap: 14px; align-items: baseline;
  font-size: clamp(1rem, 1.7vw, 1.3rem); font-weight: 700; font-stretch: 106%;
  letter-spacing: -0.02em; line-height: 1.2;
}
.faq__no { font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--track-micro); color: var(--neon); flex: none; }
.faq__item dd {
  margin: 0; font-family: var(--f-mono); font-size: 11.5px; line-height: 1.9;
  letter-spacing: 0.03em; color: var(--ash);
}
@media (max-width: 860px) {
  .faq__item { grid-template-columns: 1fr; gap: 12px; }
}

/* footer: the launch, stated */
.foot__launch {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ash);
}

/* the hero states what the project is, in one line */
.hero__line {
  max-width: 52ch;
  margin-top: 10px;
  font-family: var(--f-mono); font-size: clamp(9.5px, 1.05vw, 11px); line-height: 1.8;
  letter-spacing: 0.05em; color: var(--ash);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.9s var(--e-out) 0.62s, transform 0.9s var(--e-out) 0.62s;
}
.is-ready .hero__line { opacity: 1; transform: none; }
@media (max-width: 720px) { .hero__line { display: none; } }

/* $PSC the culture · PSAI the intelligence */
.halves {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(40px, 7vh, 80px);
}
.half { background: var(--void); padding: clamp(24px, 3vw, 38px); transition: background 0.45s var(--e-out); }
.half:hover { background: rgba(255,255,255,0.02); }
.half__symbol {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 900; font-stretch: 112%;
  letter-spacing: -0.04em; line-height: 1;
}
.half__role {
  margin-top: 12px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--neon);
}
.half__line { margin-top: 16px; font-family: var(--f-mono); font-size: 11px; line-height: 1.85; color: var(--ash); }

/* the journey now carries four stops */
.journey__stops div { flex: 1; text-align: center; }
.journey__stops div:first-child { text-align: left; }
.journey__stops div:last-child { text-align: right; }
.journey__stops div:nth-child(2), .journey__stops div:nth-child(3) { text-align: center; }