/* Layout: one fixed WebGL scene behind a tall scroll: the market seen from above, then one decision
   followed down the pipeline. Each screen is a station; its caption sits in the lower third on one
   side while the camera frames the station on the other. An annunciator rail at the bottom lights
   the station in view. Tokens are the terminal's own (Otopilot). */
:root {
  color-scheme: dark;
  --canvas: #03060b;
  --surface: #060b13;
  --line: #132033;
  --edge: #1d2d44;
  --fg: #e9eff7;
  --soft: #c7d2e0;
  --muted: #8697ae;
  --faint: #6f7e95;
  --amber: #ffb31f;
  --up: #41dc88;
  --down: #ff5a57;
  --ai: #2ad4f1;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(1rem, 4.5vw, 4.5rem);
  --rail-h: 3.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--canvas); scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--amber) 30%, transparent); }

#flow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 45%, color-mix(in srgb, var(--canvas) 70%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--canvas) 85%, transparent), transparent 22%);
}
.no-gl #flow { display: none; }
.no-gl .veil {
  background:
    radial-gradient(60rem 40rem at 70% 30%, color-mix(in srgb, var(--ai) 12%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 25% 80%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 70%);
}

/* Condensed uppercase labels, as on the terminal's panels and annunciators. */
.label {
  font-family: var(--display);
  font-stretch: 62.5%;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) var(--gutter) 1rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 80%, transparent), transparent);
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--fg); }
.brand svg { width: 1.75rem; height: 1.75rem; display: block; }
.tools { display: flex; align-items: center; gap: 1.1rem; font-size: 0.8rem; }
.lang { display: flex; border: 1px solid var(--edge); }
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--edge); color: var(--fg); }
.term { color: var(--soft); border-bottom: 1px solid var(--edge); padding-bottom: 0.1rem; }
.term:hover { color: var(--amber); border-color: var(--amber); }

main { position: relative; z-index: 1; }
.screen {
  min-height: 100vh;
  min-height: 100svh;
  padding-inline: var(--gutter);
  padding-block: 6rem calc(var(--rail-h) + 4rem);
  display: grid;
  align-items: end;
}
.cap {
  position: relative;
  max-width: 33rem;
  min-width: 0;
  display: grid;
  gap: 1.1rem;
}
.cap::before {
  content: "";
  position: absolute;
  inset: -4.5rem -7rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--canvas) 95%, transparent) 0%, color-mix(in srgb, var(--canvas) 92%, transparent) 62%, transparent 100%);
}
.screen.right .cap { justify-self: end; }

.eyebrow { margin: 0; display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; color: var(--c, var(--amber)); }
.eyebrow .num { color: var(--faint); }
.lamp {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--c, var(--amber));
  box-shadow: 0 0 0.9rem 0.1rem var(--c, var(--amber));
}
h1, h2 {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  text-wrap: balance;
}
h1 {
  font-stretch: 62.5%;
  font-weight: 800;
  font-size: clamp(4rem, 17vw, 12rem);
  line-height: 0.84;
  letter-spacing: -0.005em;
}
h2 {
  font-stretch: 68%;
  font-weight: 750;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 0.96;
}
.cap p { margin: 0; color: var(--soft); max-width: 46ch; }
.facts {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts b { font-weight: 600; color: var(--fg); }

.hero .cap { max-width: none; gap: 1.4rem; }
.hero .kicker { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hero .thesis { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--fg); max-width: 34ch; }
.cue { display: flex; align-items: center; gap: 0.8rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.cue i { width: 3rem; height: 1px; background: linear-gradient(to right, var(--amber), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: left; }
@keyframes cue { 0%, 100% { transform: scaleX(0.35); } 50% { transform: scaleX(1); } }

.cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 1rem;
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  transition: background-color 160ms ease, color 160ms ease;
}
.cta:hover { background: var(--amber); color: var(--canvas); }
.invite { font-size: 0.78rem; color: var(--muted); }
.gloss { font-size: 0.75rem; color: var(--faint); max-width: 44ch; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }

/* The annunciator rail: one light per station, in pipeline order. */
.rail {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.55rem var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 0.55rem);
  background: linear-gradient(to top, color-mix(in srgb, var(--canvas) 92%, transparent) 55%, transparent);
}
.rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  height: 2.1rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--faint);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.rail a .n { color: inherit; opacity: 0.6; }
.rail a:hover { color: var(--soft); border-color: var(--edge); }
.rail a.passed { color: var(--muted); border-color: var(--edge); }
.rail a.on {
  color: var(--c);
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--surface));
  box-shadow: 0 0 1.4rem -0.3rem var(--c);
}
.c-up { --c: var(--up); }
.c-ai { --c: var(--ai); }
.c-amber { --c: var(--amber); }

@media (max-width: 760px) {
  .screen { padding-block: 5rem calc(var(--rail-h) + 2rem); }
  .screen.right .cap { justify-self: start; }
  .cap::before { inset: -3rem -2rem; background: linear-gradient(to top, color-mix(in srgb, var(--canvas) 94%, transparent) 70%, transparent); }
  .brand span { display: none; }
  .rail { gap: 0.2rem; }
  .rail a { font-size: 0.62rem; letter-spacing: 0.08em; }
  .rail a .n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue i { animation: none; }
  * { transition-duration: 1ms !important; }
}