/* ==========================================================================
   THE CT PICKER — V3 "SIGNAL LAB"
   Design system: a dark display lab. Every surface is a powered-on screen.
   Phosphor cyan × signal magenta on near-black blue glass.
   ========================================================================== */

/* ---------- tokens ---------- */

:root {
  /* surfaces */
  --bg-0: #04060b;
  --bg-1: #070b14;
  --panel: #0b1220;
  --panel-2: #0e1626;
  --bezel: #11151d;
  --line: rgba(126, 164, 204, 0.14);
  --line-bright: rgba(126, 164, 204, 0.28);

  /* phosphor + signal */
  --cyan: oklch(0.79 0.13 224);
  /* dim cyan label color, lightened from 0.52 so small mono labels clear WCAG AA
     4.5:1 on the panel surfaces (was failing at ~3.4:1) */
  --cyan-dim: oklch(0.62 0.10 224);
  --cyan-glow: oklch(0.79 0.13 224 / 0.28);
  --magenta: oklch(0.68 0.21 358);
  --magenta-glow: oklch(0.68 0.21 358 / 0.3);
  --amber: #ffb454;
  --amber-line: oklch(0.80 0.14 75 / 0.3);
  --amber-glow: oklch(0.80 0.14 75 / 0.18);
  --live: #ff4f64;

  /* effect primitives */
  --field-magenta-hot: oklch(0.6 0.2 350 / 0.5);
  --field-magenta-dim: oklch(0.47 0.16 318 / 0.32);
  --field-bg-start: #150a20;
  --field-bg-mid: #0b0712;
  --field-bg-end: #170b1c;
  --outline-shadow-ink: rgba(15, 15, 15, 0.692);
  --scanline-ink: rgba(0, 0, 0, 0.22);

  /* text */
  --text-hi: #eaf5f4;
  --text-mid: #a9b8c6;
  /* lightened from 0.58 so quiet captions/fine print clear WCAG AA 4.5:1 on panels */
  --text-lo: oklch(0.61 0.04 232);

  /* type */
  --font-display: 'Chakra Petch', 'Arial Black', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Ioskeley Mono', 'Consolas', monospace;

  /* rhythm */
  --space-section: clamp(4.5rem, 8vw, 7rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 14px;
  --radius-screen: 18px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset / base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

/* Lenis owns scrolling when active */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  background:
    radial-gradient(120% 80% at 70% -10%, rgba(30, 60, 90, 0.18), transparent 60%),
    var(--bg-0);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--magenta);
  color: var(--bg-0);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-0);
}
::-webkit-scrollbar-thumb {
  background: #1b2840;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-dim);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--text-hi);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

canvas {
  display: block;
}

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

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--cyan);
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border-radius: 4px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 1rem;
}

/* corner vignette — the room is dark beyond the screens */
.grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.42));
}

/* ambient lab atmosphere — sits behind all content so the space between the
   screens reads as a dark, lit room rather than dead black void */
.lab-atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 38% at 14% 22%, oklch(0.79 0.13 224 / 0.06), transparent 62%),
    radial-gradient(48% 40% at 86% 58%, oklch(0.68 0.21 358 / 0.05), transparent 62%),
    radial-gradient(60% 50% at 50% 92%, oklch(0.79 0.13 224 / 0.045), transparent 65%);
}

.lab-atmos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(126, 164, 204, 0.02) 0 1px, transparent 1px 3px);
}

/* signal-break seam between folds — a glowing rail with a lit node, so each
   section transition reads as a deliberate break, not an empty gap */
.seam {
  position: relative;
  width: min(100% - 2 * var(--gutter), 1340px);
  height: 1px;
  margin: 0 auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-bright) 18%, var(--line-bright) 82%, transparent);
}

.seam::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan), 0 0 4px var(--cyan);
}

/* ---------- shared section scaffolding ---------- */

.section {
  position: relative;
  padding: var(--space-section) var(--gutter);
  max-width: 1340px;
  margin-inline: auto;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-label {
  color: var(--cyan);
  margin-bottom: 1.1rem;
}

.label-accent {
  color: var(--magenta);
}

.section-title {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.section-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-mid);
  max-width: 56ch;
}

/* reveal-on-scroll: the reveal ENHANCES an already-visible default. The resting
   state (no class) IS the final visible state; .is-in plays a one-shot entrance.
   If the reveal never fires (slow JS, hidden tab, headless render, no IO support)
   the content simply shows, instead of staying gated at opacity:0 and shipping
   the section blank. */
html.js [data-reveal].is-in {
  animation: reveal-in 0.9s var(--ease-out) both;
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 6px;
  overflow: hidden;
  white-space: nowrap;
  transition:
    box-shadow 0.3s,
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.btn--primary {
  background: var(--cyan);
  color: #03110f;
  box-shadow:
    0 0 0 1px oklch(0.79 0.13 224 / 0.6),
    0 0 22px var(--cyan-glow);
}
.btn--primary:hover {
  box-shadow:
    0 0 0 1px var(--cyan),
    0 0 44px var(--cyan-glow),
    0 0 80px oklch(0.79 0.13 224 / 0.14);
}
.btn--primary.is-active {
  box-shadow:
    0 0 0 1px var(--magenta),
    0 0 28px var(--magenta-glow),
    0 0 44px var(--cyan-glow);
}

/* signal sweep across the face of the button */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.65s var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after {
  transform: translateX(130%);
}

.btn--ghost {
  color: var(--text-hi);
  border: 1px solid var(--line-bright);
  background: rgba(11, 18, 32, 0.5);
}
.btn--ghost:hover {
  border-color: var(--magenta);
  box-shadow: 0 0 24px var(--magenta-glow);
  color: #fff;
}

.btn-scroll-cue {
  flex-shrink: 0;
  animation: btn-scroll-cue-bob 1.6s ease-in-out infinite;
}
@keyframes btn-scroll-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-scroll-cue {
    animation: none;
  }
}

.btn--lg {
  padding: 1.05rem 2.2rem;
  font-size: 0.95rem;
}
.btn--xl {
  padding: 1.25rem 3rem;
  font-size: 1.05rem;
}
.btn--nav {
  display: none;
  padding: 0.6rem 1.2rem;
  font-size: 0.75rem;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem var(--gutter);
  transition:
    background-color 0.4s,
    border-color 0.4s,
    backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(4, 6, 11, 0.78);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}

.nav-logo {
  display: block;
  height: 20px;
  width: auto;
}

.nav-brand-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: led-pulse 2.4s ease-in-out infinite;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--text-hi);
  line-height: 1.1;
}

.nav-brand-sub {
  font-size: 0.58rem;
  color: var(--text-lo);
  font-weight: 400;
}

.nav-links {
  display: none;
  gap: 1.9rem;
}

.nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-hi);
  text-shadow: 0 1px 6px oklch(0 0 0 / 0.7);
  transition: color 0.25s, text-shadow 0.25s;
}
.nav-link:hover {
  color: var(--cyan);
  text-shadow: 0 0 16px var(--cyan-glow);
}

.nav-link.is-active {
  position: relative;
  color: var(--magenta);
  text-shadow: 0 0 16px var(--magenta-glow);
}
/* non-color cue for the active link (WCAG 1.4.1): a lit underline bar so the
   active state is not conveyed by color alone */
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta-glow);
}
.nav-link.is-active:hover {
  color: var(--magenta);
}

.nav-link-index {
  font-size: 0.6rem;
  color: var(--cyan-dim);
}

.nav-burger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 10px;
}
.nav-burger span {
  width: 26px;
  height: 2px;
  background: var(--text-hi);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav-burger[aria-expanded='true'] span:first-child {
  transform: translateY(4px) rotate(45deg);
}
.nav-burger[aria-expanded='true'] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* ---------- pause menu (mobile) ---------- */

.pause-menu {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  background:
    radial-gradient(100% 70% at 80% 0%, oklch(0.68 0.21 358 / 0.08), transparent 55%),
    radial-gradient(100% 70% at 10% 100%, oklch(0.79 0.13 224 / 0.08), transparent 55%),
    rgba(4, 6, 11, 0.96);
  backdrop-filter: blur(10px);
}
.pause-menu[hidden] {
  display: none;
}

.pause-menu-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scanline-ink) 0 1px, transparent 1px 4px);
  opacity: 0.5;
}

.pause-menu-label {
  color: var(--magenta);
  margin-bottom: 2.2rem;
  text-align: right;
}

.pause-menu-links {
  display: grid;
  gap: 0.4rem;
}

.pause-menu-link {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1.1rem;
  padding: 0.55rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-hi);
  opacity: 0;
  transform: translateX(18px);
}

/* underline sits on the text itself, not the full-width clickable row, so
   it only extends under the label's own rendered width. */
.pause-menu-text {
  border-bottom: 1px solid var(--line);
}
.pause-menu.is-open .pause-menu-link {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.pause-menu.is-open .pause-menu-link:nth-child(1) { transition-delay: 0.05s; }
.pause-menu.is-open .pause-menu-link:nth-child(2) { transition-delay: 0.11s; }
.pause-menu.is-open .pause-menu-link:nth-child(3) { transition-delay: 0.17s; }
.pause-menu.is-open .pause-menu-link:nth-child(4) { transition-delay: 0.23s; }
.pause-menu.is-open .pause-menu-link:nth-child(5) { transition-delay: 0.29s; }

.pause-menu-link:active,
.pause-menu-link:hover {
  color: var(--cyan);
  text-shadow: 0 0 24px var(--cyan-glow);
}

.pause-menu-link.is-active {
  color: var(--magenta);
}
/* non-color cue: thicker magenta underline on the active item (WCAG 1.4.1) */
.pause-menu-link.is-active .pause-menu-text {
  border-bottom-width: 2px;
  border-bottom-color: var(--magenta);
}
.pause-menu-link.is-active:active,
.pause-menu-link.is-active:hover {
  color: var(--magenta);
  text-shadow: 0 0 24px var(--magenta-glow);
}

/* "Start Selling" reads as a real button here, matching the desktop nav's
   .btn--primary treatment, instead of just colored text in the list. */
.pause-menu-link--cta {
  margin-top: 0.6rem;
}

.pause-menu-link--cta .pause-menu-text {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.8rem;
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: #03110f;
  background: var(--cyan);
  border-radius: 6px;
  border-bottom: 0;
  box-shadow:
    0 0 0 1px oklch(0.79 0.13 224 / 0.6),
    0 0 22px var(--cyan-glow);
  transition: box-shadow 0.3s;
}

.pause-menu-link--cta:hover,
.pause-menu-link--cta:active {
  color: #03110f;
  text-shadow: none;
}

.pause-menu-link--cta:hover .pause-menu-text,
.pause-menu-link--cta:active .pause-menu-text {
  box-shadow:
    0 0 0 1px var(--cyan),
    0 0 44px var(--cyan-glow);
}
.pause-menu-link--cta.is-active .pause-menu-text,
.pause-menu-link--cta.is-active:hover .pause-menu-text,
.pause-menu-link--cta.is-active:active .pause-menu-text {
  box-shadow:
    0 0 0 1px var(--magenta),
    0 0 36px var(--magenta-glow),
    0 0 28px var(--cyan-glow);
}

.pause-menu-index {
  font-size: 0.7rem;
  color: var(--cyan-dim);
}

.pause-menu-foot {
  margin-top: 2.4rem;
  text-align: right;
  color: var(--text-lo);
}

body.menu-open {
  overflow: hidden;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 7rem var(--gutter) 0;
}

/* real hero photo — anchored bottom-right so the Game Boy/logo is never cropped */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

.hero-noise,
.final-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0.55;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.hero-glow--cyan {
  top: -22%;
  right: -12%;
  background: radial-gradient(circle, oklch(0.79 0.13 224 / 0.14), transparent 65%);
}

.hero-glow--magenta {
  bottom: -28%;
  left: -14%;
  background: radial-gradient(circle, oklch(0.68 0.21 358 / 0.12), transparent 65%);
}

/* perspective floor — the lab bench under the glass */
.hero-floor {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 42%;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(0deg, var(--line) 1px, transparent 1px) 0 0 / 100% 56px;
  transform: perspective(620px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 85%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 85%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1340px;
  width: 100%;
  margin-inline: auto;
  padding-bottom: 6rem;
}

/* ---------- hero position: desktop ---------- */
/* matches apps/website's --breakpoint-desktop (1100px). Orientation-
   Guarded Enhancement Rule (DESIGN.md §6): a vertical/portrait monitor
   wider than 1100px must not inherit this desktop-only nudge. */
@media (min-width: 1100px) and (orientation: landscape) {
  .hero-inner {
    margin-inline: auto;
    margin-left: 2rem; /* nudges the block right of the logo's left edge (var(--gutter)) — raise to push right, lower toward 0 to hug the logo */
    margin-right: auto;
    transform: none;
    margin-left: 3.45rem;
  }
}

/* ---------- hero position: tablet/vertical-desktop ---------- */
/* The art-directed tablet crop (hero_background_tablet.avif) has its
   calmest, most legible negative space near the top, not the middle —
   anchor the text block there instead of true-centering it like
   desktop/mobile do. */
@media (orientation: portrait) and (min-width: 781px) {
  .hero {
    justify-content: flex-start;
  }

  .hero-inner {
    padding-top: 4.7rem; /* drops the block so the eyebrow lands roughly where the H1 used to start — tune this one value to nudge up/down */
  }

  /* .hero-glow/.hero-floor size/position in vw and % of the .hero box —
     fine on desktop where width is the dominant axis, but on this tier
     the box flips to tall-and-narrow, so the same numbers push the glows
     much further off-screen vertically and waste them. Scale glows off
     the now-dominant vh instead of vw, and pull the top/bottom offsets
     in so they land closer to the visible frame; shrink the floor's
     height so it doesn't claim a disproportionate chunk of a much
     taller box. */
  .hero-glow {
    width: 70vh;
    height: 70vh;
  }

  /* this tablet crop's top-left is dominated by green/gray wood from the
     photo itself — cyan reinforces that, so this corner is repainted
     magenta instead of cyan. A circular glow spreads evenly in every
     direction and was reaching the PlayStation box on the right; a
     directional 45° linear wash anchored to the corner (no circular
     clip, minimal blur — the gradient's own fade is already soft) stays
     confined to the wood area instead. */
  /* radial, anchored exactly at the box's own top-left corner — flush
     against the hero's actual corner (top:0; left:0;, no bleed-off-screen
     offset) so the brightest point of the gradient sits precisely on the
     photo's corner and fades outward in a circle from there, instead of
     a flat directional wash. */
  .hero-glow--cyan {
    top: -8%;
    left: -10%;
    right: auto;
    width: 82vh;
    height: 55vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    filter: blur(24px);
    background: radial-gradient(circle at 0% 0%, oklch(0.68 0.21 358 / 0.39) 0%, transparent 85%);
  }

  .hero-glow--magenta {
    bottom: -12%;
    left: -14%;
  }

  .hero-floor {
    height: 26%;
  }
}

/* ---------- hero glow: mobile ---------- */
/* Same top-left magenta corner-sun technique as the tablet/vertical-desktop
   tier above (radial gradient anchored at the box's own 0%,0% corner, hard
   blur instead of a soft circular glow) — but mobile's viewport is much
   narrower than tablet's, so the tablet's vh-based size would overrun the
   entire screen width here. Rescaled down for that narrower frame. */
@media (max-width: 780px) {
  .hero-glow--cyan {
    top: -6%;
    left: -8%;
    right: auto;
    width: 65vh;
    height: 45vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    filter: blur(18px);
    background: radial-gradient(circle at 0% 0%, oklch(0.68 0.21 358 / 0.39) 0%, transparent 85%);
  }

  .hero-glow--magenta {
    bottom: -10%;
    left: -12%;
  }
}

.hero-eyebrow {
  margin-bottom: 1.6rem;
  font-size: 0.875rem;
  display: grid;
}

.hero-eyebrow-outline,
.hero-eyebrow-fill {
  grid-area: 1 / 1;
}

/* short copy is mobile-only (≤780px) — "[ COLLECTOR-RUN · RETRO TO MODERN ]" is too much
   text for that width; the --full pair stays the default everywhere
   else. Toggled below in the mobile media query. */
.hero-eyebrow-outline--short,
.hero-eyebrow-fill--short {
  display: none;
}

/* back layer — solid stroke outline, sits under the fill layer. A real
   stroke reads as one outlined shape; a text-shadow offset copy reads as
   distinct duplicate letters at this font-size (GAP-062) — that's why
   this uses -webkit-text-stroke instead of the H1's shadow recipe. */
.hero-eyebrow-outline {
  color: #01354b9f;
  -webkit-text-fill-color: #01354b9f;
  -webkit-text-stroke: 0.16em #01354b9f;
  transform: translate(0.085em, 0.055em);
  z-index: 0;
}

.hero-eyebrow-fill {
  position: relative;
  z-index: 1;
  color: #43cbf8;
  -webkit-text-fill-color: #43cbf8;
}

.hero-title {
  font-size: clamp(2.9rem, 9.2vw, 7.6rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 1.8rem;
  max-width: 13ch;
}

.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.hero-line-inner {
  display: inline-block;
}

html.js .hero-line-inner {
  transform: translateY(112%);
}

.hero-line-inner--rgb {
  color: #fff;
  text-shadow:
    -0.035em 0 oklch(0.68 0.21 358 / 0.8),
    0.035em 0 oklch(0.79 0.13 224 / 0.8);
}

/* same left/right offset technique as --rgb, but desaturated — a quiet
   3D/depth lift for the non-glitching lines, not a color moment. Keeps
   "grew up on." as the one line that gets the magenta/cyan treatment. */
.hero-line-inner--depth {
  color: #fff;
  /* dark side is solid/opaque on purpose: two translucent copies of the
     same color compound into a darker blotch wherever they overlap, so
     right+down need to be fully opaque to read as one flat shadow. */
  text-shadow:
    -0.035em 0 oklch(0.65 0 0 / 0.3),
    0.035em 0 oklch(0.4 0.025 224),
    0.035em 0.035em oklch(0.4 0.025 224),
    0 0.035em oklch(0.4 0.025 224);
}

/* periodic signal interference on the key line */
[data-glitch].is-live {
  animation: rgb-jitter 5.2s steps(2, jump-none) infinite;
}

@keyframes rgb-jitter {
  0%, 92.5%, 100% {
    transform: none;
    text-shadow:
      -0.035em 0 oklch(0.68 0.21 358 / 0.8),
      0.035em 0 oklch(0.79 0.13 224 / 0.8);
  }
  93.5% {
    transform: translateX(-0.04em) skewX(-2deg);
    text-shadow:
      -0.09em 0 oklch(0.68 0.21 358 / 0.9),
      0.09em 0 oklch(0.79 0.13 224 / 0.9);
  }
  95% {
    transform: translateX(0.05em);
    text-shadow:
      0.07em 0 oklch(0.68 0.21 358 / 0.9),
      -0.07em 0 oklch(0.79 0.13 224 / 0.9);
  }
  96.5% {
    transform: none;
  }
}

.hero-sub {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin-bottom: 2.6rem;
  display: grid;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-transform: none;
}

/* ~25% bigger than the vw-driven desktop/mobile size — more vertical
   room to spend on the headline in this orientation. The subline gets
   the same proportional bump so it doesn't look disconnected from a
   much bigger H1 above it, and the CTAs move up to the existing
   .btn--xl size so they hold their own next to it too. Placed after the
   base .hero-title/.hero-sub/.btn--lg rules on purpose — same selector
   specificity either side of a media query means source order decides
   the winner. */
@media (orientation: portrait) and (min-width: 781px) {
  .hero-eyebrow {
    font-size: 1.1rem;
  }

  .hero-title {
    font-size: clamp(2.9rem, 11.5vw, 7.6rem);
  }

  .hero-sub {
    font-size: clamp(1.3rem, 2vw, 1.5rem);
  }

  .hero-ctas .btn--lg {
    padding: 1.25rem 3rem;
    font-size: 1.05rem;
  }
}

/* ---------- hero position + typography: mobile ---------- */
/* Mobile (≤780px, width-only) has its own sizing — distinct from the
   tablet/vertical-desktop block above, which only matches ≥781px. The two
   are mutually exclusive by width, so there's no bleed between them; this
   tier just never had its own tuning pass before now. Padding-top/bottom
   here also replaces the old pre-GAP-060 max-width:640px hero rules
   (consolidated to one place so there's a single source of truth for
   mobile hero spacing instead of two competing breakpoints). Placed after
   the base .hero-eyebrow/.hero-title/.hero-sub rules on purpose — same
   specificity either side of a media query means source order decides. */
@media (max-width: 780px) {
  .hero {
    /* base .hero is justify-content:center, which re-centers the block in
       the full 100svh box regardless of padding-top — that's why it stayed
       glued to mid-screen even after the padding-top reduction above. Same
       fix as the tablet tier: pin to the top and let padding-top alone set
       the distance from the (fixed, overlaid) nav bar. */
    justify-content: flex-start;
    padding-top: 5.3rem; /* matches the PageIntro mobile top floor so the eyebrow clears the logo/menu by the same visual amount */
  }

  .hero-inner {
    padding-bottom: 3rem; /* was 7rem pre-consolidation — that excess was pushing the CTAs below true center */
  }

  .hero-eyebrow {
    font-size: 0.84rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.85rem; /* was 1.6rem — pulls it closer to the H1 below */
  }

  .hero-eyebrow-outline--full,
  .hero-eyebrow-fill--full {
    display: none; /* "[ COLLECTOR-RUN · RETRO TO MODERN ]" is too much text for mobile width */
  }

  .hero-eyebrow-outline--short,
  .hero-eyebrow-fill--short {
    display: inline;
  }

  .hero-title {
    font-size: clamp(3rem, 14vw, 5.1rem);
    margin-bottom: 0.9rem; /* was 1.8rem — pulls the subline closer to the H1 */
  }

  .hero-sub {
    font-size: clamp(1.05rem, 4.6vw, 1.14rem);
  }
}

/* same left/right/down shadow recipe as .hero-line-inner--depth, scaled to
   a fixed px offset instead of em — at this font-size, 0.035em is under a
   pixel and disappears entirely. */
.hero-sub-outline,
.hero-sub-fill {
  grid-area: 1 / 1;
}

/* back layer — solid stroke outline, sits under the fill layer. A real
   stroke reads as one outlined shape; a text-shadow offset copy reads as
   distinct duplicate letters at this font-size (GAP-062) — that's why
   this uses -webkit-text-stroke instead of the H1's shadow recipe. */
.hero-sub-outline {
  color: #353434d5;
  -webkit-text-fill-color: #353434d5;
  -webkit-text-stroke: 3.5px #353434d5;
  transform: translate(0.05em, 0.105em);
  z-index: 0;
}

.hero-sub-fill {
  position: relative;
  z-index: 1;
  color: var(--text-hi);
  -webkit-text-fill-color: var(--text-hi);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 4px 24px rgba(0, 0, 0, 0.8);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* data-boot-reveal initial state is set by heroReveal() in main.ts via
   gsap.set() so content is always visible if JS/GSAP fails to load. */

/* ---------- chyron ticker ---------- */

.chyron {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  z-index: 3;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(4, 6, 11, 0.6);
  overflow: hidden;
  padding: 0.7rem 0;
}

.chyron-track {
  display: flex;
  width: max-content;
  animation: chyron-roll 36s linear infinite;
}

.chyron-group {
  display: flex;
  flex-shrink: 0;
}

.chyron-item {
  color: var(--text-hi);
  white-space: nowrap;
}

.chyron-sep {
  color: var(--magenta);
  margin: 0 1.4rem;
}

@keyframes chyron-roll {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- scanlines ---------- */

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  opacity: 0.45;
}

/* ---------- proof ---------- */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.proof-panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem 1.6rem;
  overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s var(--ease-out);
}

.proof-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.5;
}

.proof-panel:hover {
  border-color: oklch(0.79 0.13 224 / 0.4);
  box-shadow: 0 0 36px oklch(0.79 0.13 224 / 0.08), 0 18px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
}

.proof-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.proof-feed {
  color: var(--text-lo);
}

.proof-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: led-pulse 2s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.proof-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 5vw, 4.2rem);
  color: var(--text-hi);
  line-height: 1;
  text-shadow: 0 0 32px oklch(0.79 0.13 224 / 0.22);
}

.proof-stat-suffix {
  color: var(--cyan);
}

.proof-stat-label {
  color: var(--cyan-dim);
  margin: 0.7rem 0 1.6rem;
}

.proof-rows {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}

.proof-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.55rem;
  font-size: 0.92rem;
}

.proof-row dt {
  color: var(--text-lo);
}

.proof-row dd {
  color: var(--text-hi);
  font-weight: 500;
  text-align: right;
}

.proof-verify {
  color: var(--magenta);
  transition: text-shadow 0.3s;
}
.proof-verify:hover {
  text-shadow: 0 0 16px var(--magenta-glow);
}

/* ---------- signal chain ---------- */

.chain-wrap {
  position: relative;
}

.chain-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  overflow: visible;
}

.chain-path-base,
.chain-path-draw {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chain-path-base {
  stroke: var(--line);
}

.chain-path-draw {
  stroke: var(--cyan);
  filter: drop-shadow(0 0 6px var(--cyan));
}

.chain-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem;
}

.chain-step {
  position: relative;
  padding-top: 2.6rem;
}

.chain-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-bright);
  background: var(--bg-0);
  transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}

.chain-step.is-active .chain-node {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan-glow), 0 0 4px var(--cyan);
}

.chain-num {
  display: block;
  color: var(--magenta);
  margin-bottom: 0.7rem;
}

.chain-title {
  font-size: 1.45rem;
  margin-bottom: 0.7rem;
  transition: color 0.4s, text-shadow 0.4s;
}

.chain-step.is-active .chain-title {
  text-shadow: 0 0 22px oklch(0.79 0.13 224 / 0.25);
}

.chain-body {
  font-size: 0.96rem;
  color: var(--text-mid);
}

.chain-foot {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--amber-line);
  border-radius: 8px;
  background: var(--panel);
  max-width: 760px;
  font-size: 0.96rem;
}

.chain-foot-label {
  color: var(--amber);
  margin-right: 0.6rem;
}

/* ---------- channels ---------- */

.channels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.channel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s;
}

.channel:hover {
  border-color: oklch(0.79 0.13 224 / 0.45);
  box-shadow: 0 0 40px oklch(0.79 0.13 224 / 0.07);
}

.channel-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(80% 80% at 50% 45%, #0a1626, #050a13 85%);
  overflow: hidden;
}

/* curved-glass highlight */
.channel-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 35% at 28% 12%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.channel:hover .channel-screen {
  animation: channel-flicker 0.34s steps(3, jump-none) 1;
}

@keyframes channel-flicker {
  0% { filter: brightness(1.9) contrast(1.4); }
  40% { filter: brightness(0.6); }
  70% { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}

.channel-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0.75;
}

.channel-awaiting {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: oklch(0.79 0.13 224 / 0.55);
  text-shadow: 0 0 12px var(--cyan-glow);
  animation: awaiting-blink 2.8s ease-in-out infinite;
  text-align: center;
  padding: 0 1rem;
}

@keyframes awaiting-blink {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.3; }
}

.channel-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: oklch(0.79 0.13 224 / 0.5);
  border-style: solid;
  border-width: 0;
}
.channel-corner--tl {
  top: 10px;
  left: 10px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.channel-corner--br {
  bottom: 10px;
  right: 10px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.channel-meta {
  padding: 1.1rem 1.25rem 1.3rem;
  border-top: 1px solid var(--line);
}

.channel-ch {
  color: var(--magenta);
  display: block;
  margin-bottom: 0.45rem;
}

.channel-label {
  font-size: 1.12rem;
  margin-bottom: 0.35rem;
}

.channel-note {
  font-size: 0.9rem;
  color: var(--text-lo);
}

.channel--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border-color: oklch(0.68 0.21 358 / 0.3);
}

.channel--wide:hover {
  border-color: oklch(0.68 0.21 358 / 0.55);
  box-shadow: 0 0 48px oklch(0.68 0.21 358 / 0.08);
}

.channel--wide .channel-screen {
  aspect-ratio: auto;
  min-height: 240px;
}

.channel--wide .channel-meta {
  border-top: 0;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.channel--wide .channel-label {
  font-size: 1.5rem;
}

.channel--wide .channel-note {
  font-size: 1rem;
  color: var(--text-mid);
  margin-bottom: 1.4rem;
}

.channel-cta {
  color: var(--cyan);
  transition: text-shadow 0.3s;
}
.channel-cta:hover {
  text-shadow: 0 0 16px var(--cyan-glow);
}

/* ---------- operator ---------- */

.operator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.crt-frame {
  position: relative;
  background: linear-gradient(160deg, #181d28, #0c0f16 70%);
  border: 1px solid rgba(126, 164, 204, 0.2);
  border-radius: 26px;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.crt-glass {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px / 16px;
  background: radial-gradient(85% 85% at 50% 45%, #0b1828, #04080f 88%);
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.7),
    inset 0 0 6px oklch(0.79 0.13 224 / 0.12);
}

.crt-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.05) contrast(1.05);
}

.crt-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0.8;
}

.crt-osd {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cyan);
  text-shadow: 0 0 14px var(--cyan-glow);
  line-height: 2;
  animation: awaiting-blink 3.2s ease-in-out infinite;
}

.crt-curve {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 30% at 30% 10%, rgba(255, 255, 255, 0.08), transparent 70%),
    radial-gradient(130% 130% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

.crt-badge {
  position: absolute;
  bottom: 0.55rem;
  left: 1.6rem;
  color: var(--text-lo);
  font-size: 0.6rem;
}

.crt-led {
  position: absolute;
  bottom: 0.85rem;
  right: 1.6rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
  animation: led-pulse 1.6s ease-in-out infinite;
}

.operator-story {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 2.2rem;
  max-width: 56ch;
}

.operator-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  max-width: 480px;
}

.operator-stats dt {
  color: var(--cyan-dim);
  margin-bottom: 0.25rem;
}

.operator-stats dd {
  color: var(--text-hi);
  font-weight: 500;
}

/* ---------- transmissions ---------- */

.tx-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.tx-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem 1.4rem;
  overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s;
}

.tx-card:hover {
  border-color: oklch(0.68 0.21 358 / 0.4);
  box-shadow: 0 0 36px oklch(0.68 0.21 358 / 0.07);
}

.tx-card--wide {
  grid-column: 1 / -1;
}

.tx-head {
  color: var(--text-lo);
  margin-bottom: 1.1rem;
}

.tx-rx {
  color: var(--magenta);
  margin-right: 0.5rem;
}

.tx-quote {
  color: var(--text-hi);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  font-weight: 400;
}

.tx-card--wide .tx-quote {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

/* signal trace along the card base */
.tx-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    var(--cyan-dim) 6px 10px,
    transparent 10px 22px,
    var(--magenta) 22px 24px,
    transparent 24px 40px
  );
  opacity: 0.35;
  background-size: 40px 100%;
  animation: wave-scroll 3.5s linear infinite;
}

@keyframes wave-scroll {
  to {
    background-position: 40px 0;
  }
}

/* ---------- live feeds (secondary, dimmer by design) ---------- */

.feeds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.feed-card {
  display: grid;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem;
  background: rgba(11, 18, 32, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.feed-card:hover {
  border-color: var(--magenta);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 24px var(--magenta-glow);
}

.feed-live {
  color: var(--text-lo);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.feed-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
  animation: led-pulse 1.4s ease-in-out infinite;
}

.feed-name {
  font-size: 1.2rem;
}

.feed-note {
  font-size: 0.9rem;
  color: var(--text-lo);
}

.feed-go {
  margin-top: 0.5rem;
  color: var(--cyan-dim);
}

.feed-card:hover .feed-go {
  color: var(--cyan);
  text-shadow: 0 0 14px var(--cyan-glow);
}

.feeds-sms {
  color: var(--text-lo);
}

.feeds-sms strong {
  color: var(--text-hi);
}

/* ---------- final cta ---------- */

.final {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: none;
  border-top: 1px solid var(--line);
}

.final-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 70vw;
  max-width: 1000px;
  max-height: 1000px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, oklch(0.79 0.13 224 / 0.1), oklch(0.68 0.21 358 / 0.05) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.final-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin-inline: auto;
}

.final-title {
  font-size: clamp(2.8rem, 8vw, 6rem);
  margin: 1.4rem 0 1.6rem;
  text-shadow: 0 0 60px oklch(0.79 0.13 224 / 0.2);
}

.final-sub {
  max-width: 46ch;
  margin: 0 auto 2.6rem;
}

.final-ctas {
  margin-bottom: 1.8rem;
}

.final-mail {
  color: var(--text-lo);
}

.final-mail a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.final-mail a:hover {
  text-shadow: 0 0 14px var(--cyan-glow);
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 4rem var(--gutter) 2rem;
  max-width: 1340px;
  margin-inline: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-hi);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.footer-tag {
  color: var(--text-lo);
}

.footer-col {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  font-size: 0.95rem;
}

.footer-head {
  color: var(--cyan-dim);
  margin-bottom: 0.4rem;
}

.footer-col a {
  color: var(--text-mid);
  width: fit-content;
  transition: color 0.25s;
}

.footer-col a:hover {
  color: var(--cyan);
}

.footer-sms {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: fit-content;
  margin-top: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--amber-line);
  border-radius: 6px;
  background: rgba(11, 18, 32, 0.5);
  transition: border-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.footer-sms:hover {
  border-color: var(--amber-line);
  box-shadow: 0 0 16px var(--amber-glow);
}

.footer-sms-label {
  color: var(--text-hi);
  font-size: 0.88rem;
}

.footer-sms-sub {
  color: var(--text-lo);
  font-size: 0.78rem;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  color: var(--text-lo);
}

.footer-privacy {
  color: var(--text-lo);
}
.footer-privacy:hover {
  color: var(--cyan);
}

/* ---------- sell page ---------- */

.sell-hero {
  position: relative;
  min-height: 64svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 9rem var(--gutter) 4rem;
}

.sell-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1340px;
  width: 100%;
  margin-inline: auto;
}

.sell-title {
  font-size: clamp(3rem, 10vw, 7rem);
  margin-bottom: 1.6rem;
}

.pricelist-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid oklch(0.79 0.13 224 / 0.25);
  border-radius: var(--radius-screen);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  box-shadow: 0 0 60px oklch(0.79 0.13 224 / 0.05);
}

.pricelist-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.8rem 0 1.2rem;
}

.pricelist-note {
  color: var(--text-lo);
}

.pricelist-screen {
  position: relative;
  border-radius: var(--radius);
  background: radial-gradient(80% 80% at 50% 45%, #0a1626, #050a13 85%);
  overflow: hidden;
  min-height: 260px;
  border: 1px solid var(--line);
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}

.rule-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.4rem;
  transition: border-color 0.35s, transform 0.35s var(--ease-out);
}

.rule-card:hover {
  border-color: oklch(0.79 0.13 224 / 0.35);
  transform: translateY(-3px);
}

.rule-k {
  color: var(--magenta);
  margin-bottom: 0.8rem;
}

.rule-title {
  font-size: 1.15rem;
  margin-bottom: 0.55rem;
}

.rule-body {
  font-size: 0.93rem;
  color: var(--text-mid);
}

.biglot-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  border: 1px solid oklch(0.68 0.21 358 / 0.3);
  border-radius: var(--radius-screen);
  padding: clamp(1.8rem, 4vw, 3rem);
  background:
    radial-gradient(80% 120% at 100% 0%, oklch(0.68 0.21 358 / 0.07), transparent 60%),
    var(--panel);
}

.biglot-panel .section-sub {
  margin-bottom: 0;
}

.biglot-panel .btn {
  flex-shrink: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .proof-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .chain-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .chain-path {
    display: none;
  }

  /* vertical signal rail on smaller screens */
  .chain-step::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 26px;
    bottom: -2.2rem;
    width: 2px;
    background: var(--line);
  }
  .chain-step.is-active::before {
    background: linear-gradient(180deg, var(--cyan), var(--line));
  }
  .chain-step:last-child::before {
    display: none;
  }

  .channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .operator-grid {
    grid-template-columns: 1fr;
  }

  .operator-crt {
    max-width: 540px;
  }

  .rules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricelist-panel {
    grid-template-columns: 1fr;
  }

  .biglot-panel {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tablet/vertical-desktop only: the ≤1080px block above drops the
   homepage's "Select Your System" grid to 2 columns regardless of
   orientation — fine for a narrow landscape window, but a tall portrait
   tablet/monitor has the vertical room to spare and reads better at 3
   narrower tiles than 2 wide ones. Scoped to the 781-1080px portrait
   range specifically; above 1080px it's already 3 columns by default,
   and below 781px is Mobile, not this tier. Placed after the block above
   on purpose — same selector/specificity, source order decides. */
@media (orientation: portrait) and (min-width: 781px) and (max-width: 1080px) {
  .channels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Hamburger-by-Default Rule (DESIGN.md §6): the collapsed nav is the
   base state above (Mobile and Tablet/vertical-desktop both use it).
   Two qualifying conditions show the inline nav instead — true
   desktop/landscape, or any viewport wide enough (≥1024px) that a
   portrait monitor has plenty of room for it regardless of orientation.
   1024px is deliberately the ceiling of "true tablet" rather than below
   it — the largest common tablet (iPad Pro 12.9") is exactly 1024px wide
   in portrait, so it lands on this line and gets the inline nav too;
   every smaller tablet (834px and down) stays on the hamburger. A
   rotated 1920x1080 monitor (~1080px wide in portrait) clears it
   comfortably. */
@media (min-width: 781px) and (orientation: landscape), (min-width: 1024px) {
  .nav-links {
    display: flex;
  }

  .btn--nav {
    display: inline-flex;
  }

  .nav-burger {
    display: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .chain-steps {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .chain-step {
    padding-top: 0;
    padding-left: 2.4rem;
  }

  .chain-node {
    top: 4px;
  }

  .chain-step::before {
    top: 30px;
    bottom: -2.6rem;
  }

  .channels-grid {
    grid-template-columns: 1fr;
  }

  .channel-screen {
    aspect-ratio: 16 / 10;
  }

  .channel--wide {
    grid-template-columns: 1fr;
  }

  .channel--wide .channel-meta {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .tx-grid {
    grid-template-columns: 1fr;
  }

  .feeds-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-base {
    flex-direction: column;
    gap: 0.5rem;
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .operator-stats {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.2rem;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js [data-reveal],
  html.js [data-boot-reveal],
  html.js .hero-line-inner {
    opacity: 1;
    transform: none;
  }

  html.js [data-reveal].is-in {
    animation: none;
  }

  .chyron-track,
  .nav-brand-dot,
  .proof-led,
  .crt-led,
  .feed-live-dot,
  .channel-awaiting,
  .crt-osd,
  .tx-wave,
  [data-glitch].is-live {
    animation: none;
  }

  .channel:hover .channel-screen {
    animation: none;
  }

  .btn--primary::after {
    display: none;
  }

  .chain-step .chain-node {
    border-color: var(--cyan);
  }
}