/* ============================================================================
   Kashot — kashot.org
   Theme: Tron-inspired green laser on void black, futuristic, Apple-style
          scroll choreography. Single dark theme, no light mode.
   ============================================================================ */

:root {
  /* ── Palette ────────────────────────────────────────────────────────── */
  --void:        #000000;
  --deep:        #030605;
  --panel:       #060d0a;
  --panel-2:     #0a1612;
  --panel-3:     #0d1d17;

  --laser:       #00ff95;          /* primary green */
  --laser-soft:  #4dffb0;
  --laser-mid:   #00cc77;
  --laser-dim:   #1d6e4a;
  --laser-fog:   rgba(0,255,149,0.10);
  --laser-glow:  rgba(0,255,149,0.45);
  --laser-haze:  rgba(0,255,149,0.04);

  --cyan:        #00e6c0;          /* kashot teal */
  --yellow:      #ffe600;          /* kashot yellow */
  --magenta:     #ff3da9;          /* glitch accent */

  --text:        #d8ffe8;
  --text-mid:    #88c2a4;
  --text-dim:    #4f8268;
  --text-fade:   #2d5240;

  --border:      rgba(0,255,149,0.18);
  --border-mid:  rgba(0,255,149,0.32);
  --border-hot:  rgba(0,255,149,0.65);

  --maxw:        1200px;
  --pad:         clamp(20px, 4vw, 40px);
  --radius:      2px;

  --shadow-laser: 0 0 24px rgba(0,255,149,0.30);
  --shadow-deep:  0 30px 80px rgba(0,0,0,0.65);

  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: default;
}

a { color: var(--laser-soft); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--laser); }

::selection { background: var(--laser); color: #000; }

kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  display: inline-block;
  padding: 2px 7px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--laser-soft);
  text-shadow: 0 0 6px var(--laser-glow);
  font-weight: 500;
  min-width: 22px;
  text-align: center;
}

img, svg { display: block; max-width: 100%; }

/* ============================================================================
   Boot screen — 600 ms, then fades.  JS toggles `body.booted`.
   ============================================================================ */

.boot {
  position: fixed; inset: 0;
  background: var(--void);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  z-index: 999;
  transition: opacity .35s ease, visibility .35s ease;
}
body.booted .boot { opacity: 0; visibility: hidden; }

.boot-line {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--laser);
  text-shadow: 0 0 12px var(--laser-glow);
  animation: bootBlink 0.35s steps(2) infinite;
}
@keyframes bootBlink { 50% { opacity: 0.35; } }

.boot-bar {
  width: 220px; height: 2px;
  background: rgba(0,255,149,0.10);
  overflow: hidden;
}
.boot-bar span {
  display: block; height: 100%;
  width: 0; background: var(--laser);
  box-shadow: 0 0 12px var(--laser);
  animation: bootFill 0.55s ease-out forwards;
}
@keyframes bootFill { to { width: 100%; } }

/* ============================================================================
   Background layers — fixed, non-interactive
   ============================================================================ */

.grid-floor,
.grid-haze,
.scanline,
.vignette,
.cursor-glow {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* perspective grid receding to a vanishing horizon */
.grid-floor {
  --gridY: 0px;
  top: 50vh; bottom: -50vh;
  background-image:
    linear-gradient(transparent, rgba(0,255,149,0.06) 60%, rgba(0,255,149,0.18) 100%),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(0,255,149,0.30) 70px 71px),
    repeating-linear-gradient(0deg,  transparent 0 70px, rgba(0,255,149,0.30) 70px 71px);
  background-position: 0 var(--gridY), 0 var(--gridY), 0 var(--gridY);
  transform: perspective(360px) rotateX(62deg);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, black, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 95%);
  animation: gridFlow 8s linear infinite;
}

@keyframes gridFlow {
  from { background-position: 0 0,    0 0,    0 0; }
  to   { background-position: 0 70px, 0 70px, 0 70px; }
}

.grid-haze {
  background:
    radial-gradient(60% 50% at 50% 110%, rgba(0,255,149,0.18), transparent 70%),
    radial-gradient(40% 30% at 80% 0%,   rgba(0,230,192,0.08), transparent 70%),
    radial-gradient(40% 30% at 20% 0%,   rgba(255,230,0,0.05), transparent 70%);
}

.scanline {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,255,149,0.025) 3px,
    transparent 4px
  );
  mix-blend-mode: screen;
}

.vignette {
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.85) 100%);
}

.cursor-glow {
  --x: -200px; --y: -200px;
  background: radial-gradient(
    220px circle at var(--x) var(--y),
    rgba(0,255,149,0.10),
    rgba(0,255,149,0.04) 30%,
    transparent 60%
  );
  transition: opacity .25s;
  z-index: 0;
}
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* ============================================================================
   Top status bar
   ============================================================================ */

.topbar {
  position: relative;
  z-index: 5;
  display: flex; gap: 24px;
  align-items: center;
  padding: 8px var(--pad);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-wrap: wrap;
}
.topbar-cell { display: inline-flex; align-items: center; gap: 8px; }
.topbar-spacer { flex: 1; }

/* Audio toggle in the topbar. Looks like a topbar-cell at rest, lights up
   in laser-green when active. Drives a fully procedural pad in the Web
   Audio API — no audio files, no samples, original composition. */
.topbar-btn {
  background: transparent;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease, text-shadow .2s ease;
}
.topbar-btn:hover,
.topbar-btn:focus-visible {
  color: var(--laser);
  outline: none;
}
.topbar-btn[aria-pressed="true"] {
  color: var(--laser);
  text-shadow: 0 0 6px var(--laser-glow);
}
.dot-audio { background: var(--laser-mid); }
.topbar-btn[aria-pressed="true"] .dot-audio {
  background: var(--laser);
  box-shadow: 0 0 8px var(--laser-glow);
  animation: audio-pulse 1.6s ease-in-out infinite;
}
@keyframes audio-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.55; }
}

.dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--laser);
  box-shadow: 0 0 8px var(--laser);
  border-radius: 50%;
}
.dot-pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.sep { color: var(--text-fade); margin: 0 4px; }

/* ============================================================================
   Nav
   ============================================================================ */

.nav {
  position: sticky; top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px var(--pad);
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(0,255,149,0.55));
}
.brand-mark img {
  display: block;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
.brand-text { line-height: 1; }
.brand-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.25em;
  font-weight: 500;
}
.brand-sm { font-size: 14px; }

.nav-links {
  display: flex; gap: 22px;
  margin-left: 24px;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.nav-links a {
  color: var(--text-mid);
  font-weight: 500;
  position: relative;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--laser); text-shadow: 0 0 8px var(--laser-glow); }

.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--laser);
  border: 1px solid var(--border-hot);
  background: rgba(0,255,149,0.05);
  overflow: hidden;
  transition: all .2s ease;
}
.nav-cta:hover {
  color: #000;
  background: var(--laser);
  box-shadow: 0 0 24px var(--laser-glow);
}
.nav-cta-bracket { color: var(--text-dim); transition: color .2s ease; }
.nav-cta:hover .nav-cta-bracket { color: #000; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .topbar { font-size: 9.5px; gap: 12px; }
}

/* ============================================================================
   Buttons
   ============================================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  border-radius: var(--radius);
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, color .15s ease, background .15s ease,
              box-shadow .25s ease, border-color .15s ease;
  text-transform: uppercase;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  color: #001a10;
  background: var(--laser);
  border-color: var(--laser);
  box-shadow:
    0 0 0 1px var(--laser),
    0 0 24px var(--laser-glow),
    inset 0 0 12px rgba(255,255,255,0.15);
}
.btn-primary:hover {
  background: var(--laser-soft);
  box-shadow:
    0 0 0 1px var(--laser-soft),
    0 0 36px var(--laser),
    inset 0 0 16px rgba(255,255,255,0.25);
  transform: translateY(-1px);
}

.btn-ghost {
  color: var(--laser);
  border-color: var(--border-mid);
  background: rgba(0,255,149,0.03);
}
.btn-ghost:hover {
  border-color: var(--laser);
  color: var(--laser-soft);
  background: rgba(0,255,149,0.10);
  box-shadow: 0 0 18px var(--laser-fog);
}

.btn-lg { padding: 16px 28px; font-size: 14px; }

.btn-bracket {
  font-family: var(--font-mono);
  color: rgba(0,0,0,0.55);
  font-weight: 700;
}
.btn-ghost .btn-bracket { color: var(--text-dim); }

.btn-text { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.btn-line { font-weight: 700; }
.btn-sub  { font-size: 10.5px; opacity: 0.75; font-weight: 500; letter-spacing: 0.22em; margin-top: 2px; }

.btn-arrow { transition: transform .2s ease; }
.btn-ghost:hover .btn-arrow { transform: translateX(4px); }

/* sweeping shine across primary buttons */
.btn-sweep {
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  pointer-events: none;
}
.btn:hover .btn-sweep { animation: sweep 0.9s ease-out; }
@keyframes sweep { to { left: 130%; } }

/* ============================================================================
   Reveal-on-scroll
   ============================================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.22,.65,.35,1),
    transform .8s cubic-bezier(.22,.65,.35,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .grid-floor { animation: none; }
  .marquee-track { animation: none; }
  .dot-pulse { animation: none; }
}

/* ============================================================================
   Hero
   ============================================================================ */

.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(10px, 1.6vw, 22px) var(--pad) clamp(48px, 5vw, 72px);
  text-align: center;
  z-index: 2;
}

.hero-corner {
  position: absolute;
  width: 32px; height: 32px;
  border: 1px solid var(--laser);
  box-shadow: 0 0 12px var(--laser-fog);
}
.hc-tl { top: 12px;  left: var(--pad); border-right: 0; border-bottom: 0; }
.hc-tr { top: 12px;  right: var(--pad); border-left: 0; border-bottom: 0; }
.hc-bl { bottom: 16px; left: var(--pad); border-right: 0; border-top: 0; }
.hc-br { bottom: 16px; right: var(--pad); border-left: 0; border-top: 0; }

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--laser-soft);
  border: 1px solid var(--border-mid);
  background: rgba(0,255,149,0.04);
  text-shadow: 0 0 6px var(--laser-fog);
}

.hero-reticle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 6vw, 88px);
  height: clamp(72px, 6vw, 88px);
  margin: 0 auto 8px;
  filter:
    drop-shadow(0 0 18px rgba(0,255,149,0.35))
    drop-shadow(0 0 48px rgba(0,255,149,0.15));
}
.reticle-svg {
  width: 100%; height: 100%;
  position: relative; z-index: 2;
  overflow: visible;
}
.reticle-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: reticlePulse 1.8s ease-in-out infinite;
}
@keyframes reticlePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(1.6); }
}
.reticle-scan {
  animation: reticleScan 2.4s cubic-bezier(.6,.05,.4,.95) infinite;
}
@keyframes reticleScan {
  0%   { transform: translateY(40px);  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(160px); opacity: 0; }
}

/* dashed orbit ring around the reticle */
.reticle-ring {
  position: absolute;
  inset: -10px;
  border: 1px dashed var(--border-mid);
  border-radius: 50%;
  animation: reticleSpin 28s linear infinite;
  pointer-events: none;
}
.reticle-ring::before,
.reticle-ring::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  background: var(--laser);
  box-shadow: 0 0 8px var(--laser);
  border-radius: 50%;
  top: 50%; left: -3px;
  transform: translateY(-50%);
}
.reticle-ring::after {
  left: auto; right: -3px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
@keyframes reticleSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .reticle-pulse, .reticle-scan, .reticle-ring { animation: none; }
}

.hero-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text);
  text-shadow: 0 0 36px rgba(0,255,149,0.35);
}

.glitch {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #c8ffe0 60%, #4dffb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
}
.glitch::before {
  color: var(--cyan);
  transform: translate(-2px, 1px);
  animation: glitchA 4.5s steps(1) infinite;
}
.glitch::after {
  color: var(--yellow);
  transform: translate(2px, -1px);
  animation: glitchB 5.2s steps(1) infinite;
}
@keyframes glitchA {
  0%, 92%, 100% { transform: translate(-2px, 1px); }
  93%           { transform: translate(-6px, -2px) skewX(2deg); }
  95%           { transform: translate(2px, 1px); }
  97%           { transform: translate(-3px, 2px) skewX(-1deg); }
}
@keyframes glitchB {
  0%, 90%, 100% { transform: translate(2px, -1px); }
  91%           { transform: translate(5px, 2px); }
  94%           { transform: translate(-1px, -2px); }
  96%           { transform: translate(4px, 1px) skewY(1deg); }
}

.hero-tagline {
  margin: 0 auto 16px;
  max-width: 680px;
  font-size: clamp(15px, 1.55vw, 18px);
  color: var(--text-mid);
  line-height: 1.5;
}
.hero-tagline-sub {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.2vw, 13px);
  letter-spacing: 0.15em;
  color: var(--text-dim);
}

.hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.platforms {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--border);
  background: rgba(0,255,149,0.02);
}
.platform {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-mid);
  border-right: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition:
    background  .25s ease,
    color       .25s ease,
    border-color .25s ease,
    box-shadow  .25s ease,
    transform   .25s ease;
}
.platform:hover:not(.is-detected) {
  color: var(--text);
  background: rgba(0,255,149,0.05);
  box-shadow: inset 0 0 0 1px var(--laser-mid);
}
.platform:hover:not(.is-detected) .platform-glyph {
  color: var(--laser-mid);
  filter: drop-shadow(0 0 5px var(--laser-fog));
}
.platform:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--laser),
    0 0 14px var(--laser-fog);
}
.platform:last-child { border-right: 0; }
.platform strong { color: var(--text); font-weight: 600; }
.platform-tag    { color: var(--laser); }
.platform-status { color: var(--laser-mid); }

/* OS glyph — laser-green line art. `currentColor` lets us flip it to bright
   laser when the platform card is the detected one. */
.platform-glyph {
  width: 18px;
  height: 18px;
  color: var(--laser-soft);
  flex: 0 0 auto;
  filter: drop-shadow(0 0 4px rgba(0,255,149,0.25));
  transition: color .25s ease, filter .25s ease, transform .25s ease;
}

/* The OS we detected at runtime. Set by app.js. Reads as a clear
   "you-are-here" indicator: scaled up, laser-bright border + background
   wash, a brighter glyph, and a small "● THIS MACHINE" tag tucked in via
   the ::after pseudo-element so the hero strip stays compact when none of
   the platforms are detected (e.g. on mobile). */
.platform.is-detected {
  color: var(--text);
  background: rgba(0,255,149,0.12);
  box-shadow:
    inset 0 0 0 1px var(--laser),
    0 0 20px var(--laser-fog),
    0 0 48px rgba(0,255,149,0.18);
  transform: scale(1.04);
  z-index: 1;
}
.platform.is-detected .platform-glyph {
  color: var(--laser);
  filter: drop-shadow(0 0 6px var(--laser-glow));
  transform: scale(1.08);
}
.platform.is-detected strong         { color: var(--laser); text-shadow: 0 0 12px var(--laser-glow); }
.platform.is-detected .platform-tag  { color: var(--laser); }
.platform.is-detected .platform-status { color: var(--text); }
.platform.is-detected::after {
  content: "● THIS MACHINE";
  position: absolute;
  top: -10px; right: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--deep);
  background: var(--laser);
  padding: 2px 8px;
  box-shadow: 0 0 12px var(--laser-glow);
  pointer-events: none;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--text-fade);
}
.scroll-bar { width: 1px; height: 36px; background: rgba(0,255,149,0.12); position: relative; overflow: hidden; }
.scroll-bar span {
  position: absolute; top: -20px; left: 0;
  width: 1px; height: 20px;
  background: var(--laser);
  box-shadow: 0 0 6px var(--laser);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0%   { top: -20px; }
  100% { top: 36px; }
}

/* ============================================================================
   Marquee
   ============================================================================ */

.marquee {
  border-block: 1px solid var(--border);
  background: rgba(0,255,149,0.03);
  overflow: hidden;
  padding: 16px 0;
  margin: 32px 0;
  position: relative;
  z-index: 1;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--void), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--void), transparent); }

.marquee-track {
  display: inline-flex;
  gap: 36px;
  align-items: center;
  padding-left: 100%;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 48px);
  letter-spacing: 0.04em;
  color: var(--text);
  text-shadow: 0 0 18px var(--laser-fog);
  animation: marquee 38s linear infinite;
}
.marquee-track span { white-space: nowrap; }
.marquee-track .m-dot { color: var(--laser); font-size: 0.7em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================================
   Stats
   ============================================================================ */

.stats {
  max-width: var(--maxw);
  margin: 60px auto 0;
  padding: 0 var(--pad) 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(0,255,149,0.03), transparent),
    var(--deep);
  position: relative;
  z-index: 1;
}
.stats > .stat { padding: 36px 24px; border-right: 1px solid var(--border); text-align: center; }
.stats > .stat:last-child { border-right: 0; }

.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 84px);
  line-height: 1;
  color: var(--laser);
  text-shadow: 0 0 24px var(--laser-glow);
  letter-spacing: -0.02em;
}
.stat-num-sub { font-size: 0.45em; color: var(--text-dim); letter-spacing: 0.1em; }

.stat-label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

@media (max-width: 880px) {
  .stats { grid-template-columns: repeat(2, 1fr); padding-bottom: 0; }
  .stats > .stat:nth-child(2) { border-right: 0; }
  .stats > .stat:nth-child(1),
  .stats > .stat:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* ============================================================================
   Screenshot
   ============================================================================ */

.screenshot {
  max-width: 1100px;
  margin: 96px auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 1;
  transform-origin: 50% 100%;
}

.frame {
  position: relative;
  border: 1px solid var(--border-hot);
  background: var(--panel);
  box-shadow:
    0 0 0 1px rgba(0,255,149,0.08),
    var(--shadow-laser),
    var(--shadow-deep);
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
}
.frame:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--laser),
    0 0 50px var(--laser-fog),
    var(--shadow-deep);
}

.frame-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border-bottom: 1px solid var(--border);
}
.frame-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--laser-soft);
  text-shadow: 0 0 6px var(--laser-fog);
}
.frame-bar-dots { display: inline-flex; gap: 6px; }
.frame-bar-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--laser);
  box-shadow: 0 0 6px var(--laser-glow);
  display: inline-block;
}
.frame-bar-dots i:nth-child(2) { background: var(--cyan);   box-shadow: 0 0 6px rgba(0,230,192,0.55); }
.frame-bar-dots i:nth-child(3) { background: var(--yellow); box-shadow: 0 0 6px rgba(255,230,0,0.55); }

.frame-canvas {
  aspect-ratio: 12 / 7;
  background: var(--deep);
  overflow: hidden;
}
.frame-canvas svg { width: 100%; height: 100%; }

/* ============================================================================
   Generic section / heads
   ============================================================================ */

.section {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) var(--pad);
  z-index: 1;
}

.section-head { text-align: center; margin-bottom: 56px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--laser);
  text-shadow: 0 0 8px var(--laser-fog);
  padding: 6px 12px;
  border: 1px solid var(--border-mid);
  background: rgba(0,255,149,0.04);
  margin-bottom: 18px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 16px;
}
.h2-accent {
  background: linear-gradient(120deg, var(--laser), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.section-sub {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-mid);
  max-width: 620px;
  margin: 0 auto;
}

/* ============================================================================
   Origin
   ============================================================================ */

.origin-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--text-mid);
}
.origin-body p { margin: 0 0 18px; }
.origin-body .hl {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 600;
  color: var(--laser);
  letter-spacing: 0.05em;
  text-shadow: 0 0 6px var(--laser-fog);
}

.pull {
  position: relative;
  padding: 22px 0 22px 28px;
  margin: 32px 0 !important;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}
.pull-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--laser), var(--cyan));
  box-shadow: 0 0 12px var(--laser-glow);
}
.pull em {
  font-style: normal;
  background: linear-gradient(120deg, var(--yellow), var(--laser), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.sign {
  margin-top: 36px !important;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.sign a {
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--border-mid);
}
.sign a:hover { color: var(--laser); border-bottom-color: var(--laser); }
.sign-tag { color: var(--laser); margin-left: 8px; }

/* ============================================================================
   Sticky scrollytelling showcase
   ============================================================================ */

.showcase {
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(0,255,149,0.02) 50%, transparent);
  border-block: 1px solid var(--border);
  padding: 80px 0 96px;
}

/* Two-column shell. The LEFT column (.showcase-screen-col) is `position:
   sticky` on its own; the RIGHT column flows naturally, so each step's
   vertical breathing room is what the user scrolls past while the frame
   stays pinned. `data-step` lives here and drives the SVG annotation
   reveal in the frame on the left. */
.showcase-shell {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 56px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.showcase-screen-col {
  position: sticky;
  /* Topbar (~46) + nav (~46) + a little breathing room. */
  top: 110px;
  align-self: start;
  display: flex;
  align-items: center;
}

.showcase-frame {
  width: 100%;
  border: 1px solid var(--border-hot);
  background: var(--panel);
  box-shadow:
    0 0 0 1px rgba(0,255,149,0.08),
    var(--shadow-laser),
    var(--shadow-deep);
  overflow: hidden;
}
.showcase-frame-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px;
  padding: 0 12px;
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.showcase-frame-bar .frame-tag { color: var(--laser-soft); }
.showcase-canvas {
  aspect-ratio: 8 / 5;
  background: var(--deep);
  overflow: hidden;
}
.showcase-canvas svg { width: 100%; height: 100%; }

.showcase-sel {
  transform-origin: center;
  transition: opacity .5s ease, transform .5s ease;
  /* Always-on slow border glow pulse so the frame has visible life on
     step 1 before the user scrolls. The step-2/3/4 selectors below still
     scale it up; this only animates the drop-shadow, not the geometry. */
  animation: showcase-sel-pulse 2.8s ease-in-out infinite;
}
@keyframes showcase-sel-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px  rgba(0,255,149,0.55)); }
  50%      { filter: drop-shadow(0 0 14px rgba(0,255,149,0.95)); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-sel { animation: none; }
}
.showcase-anno { opacity: 0; transition: opacity .45s ease, transform .45s ease; transform: translateY(8px); }
.showcase-shell[data-step="2"] .showcase-sel,
.showcase-shell[data-step="3"] .showcase-sel,
.showcase-shell[data-step="4"] .showcase-sel { transform: scale(1); }
.showcase-shell[data-step="1"] .showcase-sel { transform: scale(0.95); opacity: 0.5; }

.showcase-shell[data-step="3"] .an-1,
.showcase-shell[data-step="3"] .an-2,
.showcase-shell[data-step="4"] .an-1,
.showcase-shell[data-step="4"] .an-2,
.showcase-shell[data-step="4"] .an-3,
.showcase-shell[data-step="4"] .an-4 { opacity: 1; transform: translateY(0); }

/* Animated cursor that walks through the drag-and-annotate flow as the
   user scrolls each step. The transform target changes per data-step so
   the cursor "drags" the selection corner, then darts to a tool, then to
   the save panel. Smooth-but-snappy easing reads as a guided demo
   rather than fancy motion design. */
.showcase-cursor {
  transform: translate(180px, 120px);
  transform-origin: 0 0;
  transition: transform .9s cubic-bezier(.4, .0, .2, 1), opacity .3s ease;
  opacity: 0;
}
.showcase-shell[data-step="1"] .showcase-cursor { transform: translate(180px, 120px); opacity: 1; }  /* pre-drag */
.showcase-shell[data-step="2"] .showcase-cursor { transform: translate(620px, 380px); opacity: 1; }  /* finished drag → bottom-right */
.showcase-shell[data-step="3"] .showcase-cursor { transform: translate(300px, 170px); opacity: 1; }  /* clicked rectangle annotation tool */
.showcase-shell[data-step="4"] .showcase-cursor { transform: translate(715px, 470px); opacity: 1; }  /* heading to Save in action panel */

/* Caption strip — all four `<text>` captions sit stacked at the same SVG
   (x, y). Visibility hides three and shows the one matching the active
   step. Visibility (rather than display) is correct for SVG. */
.cap { visibility: hidden; transition: opacity .25s ease; }
.showcase-shell[data-step="1"] .cap-1,
.showcase-shell[data-step="2"] .cap-2,
.showcase-shell[data-step="3"] .cap-3,
.showcase-shell[data-step="4"] .cap-4 { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .showcase-cursor { transition: none; }
}

.showcase-side h2.showcase-h2 {
  margin: 12px 0 8px;
  font-size: clamp(32px, 4.8vw, 56px);
}
.showcase-sub {
  margin: 0 0 56px;
  color: var(--text-mid);
  font-size: 15px;
}
/* Big vertical gap between steps so the sticky frame stays parked for a
   beat at each one. Each step's outer slot is about a viewport tall so the
   user scrolls one screenful per step, Apple-style. */
.showcase-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56vh;
  padding-bottom: 12vh;
}
.showcase-step {
  position: relative;
  padding: 22px 24px 22px 28px;
  border: 1px solid var(--border);
  background: rgba(0,255,149,0.02);
  transition:
    opacity     .45s ease,
    transform   .45s ease,
    border-color .3s ease,
    background  .3s ease,
    box-shadow  .3s ease;
  opacity: 0.28;
  transform: translateX(-10px);
}
.showcase-step.active {
  opacity: 1;
  transform: translateX(0) scale(1.015);
  border-color: var(--laser);
  background: rgba(0,255,149,0.085);
  box-shadow:
    0  0 24px var(--laser-fog),
    0  0 56px rgba(0,255,149,0.18),
    inset 0 0 0 1px rgba(0,255,149,0.18);
}
.showcase-step::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--laser);
  box-shadow: 0 0 10px var(--laser-glow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s ease;
}
.showcase-step.active::before { transform: scaleY(1); }
.showcase-step-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--laser-soft);
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(0,255,149,0.22);
  background: rgba(0,255,149,0.04);
  transition: color .25s ease, background .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .25s ease;
}
.showcase-step.active .showcase-step-tag {
  color: var(--deep);
  background: var(--laser);
  border-color: var(--laser);
  box-shadow: 0 0 14px var(--laser-glow);
  transform: translateY(-1px);
}
.showcase-step h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  transition: color .25s ease, text-shadow .25s ease;
}
.showcase-step.active h3 {
  color: var(--laser-bright, #c6ffe2);
  text-shadow: 0 0 16px rgba(0,255,149,0.45);
}
.showcase-step p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.55;
  transition: color .25s ease;
}
.showcase-step.active p { color: var(--text); }

@media (max-width: 880px) {
  .showcase { padding: 60px 0 64px; }
  .showcase-shell {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .showcase-screen-col {
    position: static;
    top: auto;
  }
  .showcase-steps { gap: 18px; padding-bottom: 0; }
  .showcase-step { opacity: 1; transform: none; }
  .showcase-sub { margin-bottom: 24px; }
}

/* ── Tool-palette sequential glow ─────────────────────────────────────
   The 12 tool icons in the static screenshot showcase light up one at a
   time with a slow orange-neon glow, top to bottom, then loop. Each
   tool's <g class="tool-glow"> has its own animation-delay (0s, 1s, …
   11s) so they fire in sequence within one 12s cycle. The action panel
   icons below intentionally do NOT carry this class — they stay quiet.
   We only animate `filter`; geometry stays put so nothing nudges around
   neighboring icons. */
.tool-glow {
  animation: tool-glow-pulse 12s linear infinite;
  transform-origin: 19px 19px;
  transform-box: fill-box;
  will-change: filter;
}
@keyframes tool-glow-pulse {
  0%   { filter: none; }
  1%   { filter:
           drop-shadow(0 0 4px  rgba(255, 140, 40, 0.95))
           drop-shadow(0 0 9px  rgba(255, 110, 20, 0.85))
           drop-shadow(0 0 16px rgba(255,  80,  0, 0.55)); }
  5%   { filter:
           drop-shadow(0 0 4px  rgba(255, 140, 40, 0.95))
           drop-shadow(0 0 9px  rgba(255, 110, 20, 0.85))
           drop-shadow(0 0 16px rgba(255,  80,  0, 0.55)); }
  8%   { filter: none; }
  100% { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-glow { animation: none; }
}

/* ============================================================================
   Modules
   ============================================================================ */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.module {
  position: relative;
  background: var(--deep);
  padding: 32px 28px 36px;
  transition: background .3s ease, transform .3s ease;
}
.module:hover {
  background: var(--panel);
  transform: translateY(-2px);
}
.module:hover .module-corner { border-color: var(--laser); box-shadow: 0 0 8px var(--laser-fog); }

.module-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
.module-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--laser);
  text-shadow: 0 0 6px var(--laser-fog);
}
.module h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  margin: 0;
}
.module p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.65;
}
.module kbd { font-size: 11px; }

.module-corner {
  position: absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  border-top: 1px solid var(--border-mid);
  border-right: 1px solid var(--border-mid);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* ============================================================================
   Acquire / download
   ============================================================================ */

.acquire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* On wide viewports, switch the grid to fixed 3 columns + 7 row tracks
   and have each card inherit those tracks via `grid-template-rows: subgrid`.
   Result: every row (header / desc / options / oneliner-label / pipe /
   details / link) is forced to the tallest member's height across all
   three cards, so the primary download buttons always align row-for-row.
   "Get on the grid" — literally.
   Falls back to natural flow + per-section min-heights on narrower screens
   where the cards stack. */
@media (min-width: 1024px) {
  .acquire-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(7, auto);
  }
  .dl-card {
    display: grid !important;
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 16px;
  }
  /* Drop the explicit margin-bottoms so subgrid's row-gap controls spacing */
  .dl-card header,
  .dl-card .dl-desc,
  .dl-card .dl-options,
  .dl-card .dl-oneliner,
  .dl-card .dl-pipe-wrap,
  .dl-card .dl-more {
    margin-bottom: 0;
  }
}

.dl-card {
  position: relative;
  background: var(--deep);
  border: 1px solid var(--border);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  /* min-width: 0 is critical — without it, this grid item defaults to
     min-width: auto (= its min-content), which equals the install
     command's full nowrap width. That made the rightmost card overflow
     the page width. Letting the card shrink lets the inner dl-pipe's
     own min-width: 0 + overflow-x: auto do their job. */
  min-width: 0;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dl-card:hover {
  border-color: var(--border-hot);
  transform: translateY(-3px);
  box-shadow: 0 0 30px var(--laser-fog);
}
.dl-card-active {
  border-color: var(--border-hot);
  box-shadow: 0 0 24px var(--laser-fog);
}
.dl-card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 26px; height: 26px;
  border-top: 1px solid var(--laser);
  border-left: 1px solid var(--laser);
}
.dl-card::after {
  content: "";
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px;
  border-bottom: 1px solid var(--laser);
  border-right: 1px solid var(--laser);
}

.dl-card header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dl-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--laser);
  letter-spacing: 0.22em;
}
.dl-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--text);
  font-weight: 700;
  flex: 1;
}
.dl-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--laser-mid);
  padding: 3px 8px;
  border: 1px solid var(--border-mid);
}

/* On wide viewports, subgrid handles row alignment automatically (every
   row stretches to the tallest member across the 3 cards). On narrow
   viewports the cards stack, so subgrid no longer applies — fall back
   to min-heights so individual cards still read consistently when seen
   in isolation as the user scrolls. */
.dl-desc {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
  min-height: calc(1.6em * 3); /* ~3 lines reserved at narrow widths */
}

.dl-options {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
  min-width: 0;
  /* On wide screens subgrid stretches this row to the tallest card so
     no min-height is needed; on narrow screens we still want all 3
     cards to read with the same option-block height. macOS's primary
     button + alt-link is taller than a single button on Windows/Linux,
     so the min-height matches that. */
  min-height: 72px;
}
.dl-options .btn {
  width: 100%;
  padding: 11px 16px;
  font-size: 12px;
  min-width: 0;
}
.dl-alt {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-align: center;
}
.dl-alt a {
  color: var(--laser-soft);
  white-space: nowrap;
}
.dl-alt a:hover { color: var(--laser); text-shadow: 0 0 6px var(--laser-glow); }

/* One-liner install snippet shown under every dl-card. The pre block uses
   the same void background as .dl-more's pre so the eye reads them as the
   same family of code surfaces, but the dl-pipe sits flush in the card to
   give the install command equal visual weight to the download button. */
.dl-oneliner {
  margin: 8px 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-dim);
}
/* Wrap is a side-by-side flex container: `pre.dl-pipe` on the left
   (flex: 1, scrolls if too long), `button.dl-pipe-copy` on the right
   (flex: 0 0 auto, fixed width). Previously the COPY button was
   absolute-positioned and the install command flowed *under* it, so the
   right-most characters of long URLs got hidden behind COPY. Side-by-side
   flex eliminates that — text can scroll cleanly without ever colliding
   with the button. Outer border lives on the wrap so the inner cells
   share one continuous box. */
.dl-pipe-wrap {
  display: flex;
  align-items: stretch;
  margin: 0 0 14px;
  border: 1px solid var(--laser-mid);
  background: var(--void);
  /* Belt-and-suspenders: even though .dl-pipe sets min-width: 0, the
     wrap itself must also be allowed to shrink as a flex item of the
     dl-card. Without it the install command's nowrap min-content could
     still inflate the wrap. */
  min-width: 0;
  overflow: hidden;
}
.dl-pipe {
  flex: 1 1 auto;
  min-width: 0;  /* allow flex shrink so long URLs scroll, not push COPY off-card */
  margin: 0;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--laser);
  overflow-x: auto;
  line-height: 1.4;
  user-select: all;
  cursor: copy;
  white-space: nowrap;
}
.dl-pipe code { color: inherit; }

/* COPY button — one-click clipboard. Sits next to .dl-pipe inside the
   wrap, separated by a vertical laser-green divider. Flashes "COPIED"
   for 1.4s on success. */
.dl-pipe-copy {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--laser-mid);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--laser-mid);
  padding: 0 14px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dl-pipe-copy:hover,
.dl-pipe-copy:focus-visible {
  outline: none;
  color: var(--laser);
  background: rgba(0, 255, 149, 0.08);
  box-shadow: inset 0 0 10px var(--laser-fog);
}
.dl-pipe-copy.is-copied {
  color: var(--text);
  background: rgba(0, 255, 149, 0.16);
  box-shadow: inset 0 0 12px var(--laser-glow);
}

/* The dl-card header becomes a click target when app.js wires it up so the
   user can switch the spotlit OS card by clicking the OS name. The buttons
   inside .dl-options keep their native click behaviour because the click
   listener is scoped to <header>, not the whole card. */
.dl-card header[role="button"] {
  cursor: pointer;
  transition: color .2s ease, text-shadow .2s ease;
}
.dl-card header[role="button"]:hover h3 {
  color: var(--laser);
  text-shadow: 0 0 10px var(--laser-glow);
}

.dl-more { margin-bottom: 16px; }
.dl-more summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  padding: 8px 0;
  list-style: none;
}
.dl-more summary::-webkit-details-marker { display: none; }
.dl-more summary::before { content: "[+] "; color: var(--laser); }
.dl-more[open] summary::before { content: "[-] "; }
.dl-more summary:hover { color: var(--laser); }
.dl-more pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--void);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--laser-soft);
  overflow-x: auto;
  line-height: 1.55;
}

.dl-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--laser);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dl-link:hover { color: var(--laser-soft); text-shadow: 0 0 8px var(--laser-fog); }

/* ============================================================================
   Manual / shortcuts
   ============================================================================ */

.manual-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.kbd-table {
  border: 1px solid var(--border);
  background: var(--deep);
  padding: 24px 26px;
}
.kbd-table h3 {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--laser);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.kbd-table dl { margin: 0; display: grid; gap: 8px; }
.kbd-table dl > div {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.kbd-table dl > div:last-child { border-bottom: 0; }
.kbd-table dt {
  flex-shrink: 0;
  min-width: 110px;
  display: inline-flex; gap: 4px; align-items: center;
}
.kbd-table dd {
  margin: 0;
  font-size: 14px;
  color: var(--text-mid);
}

/* ============================================================================
   Final CTA
   ============================================================================ */

.cta {
  text-align: center;
  border: 1px solid var(--border-hot);
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(0,255,149,0.10), transparent 70%),
    var(--deep);
  margin: 80px auto !important;
  max-width: 880px;
  padding: 80px var(--pad) !important;
  position: relative;
  box-shadow: 0 0 60px var(--laser-fog), var(--shadow-deep);
}
.cta-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--laser);
}
.cc-tl { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.cc-tr { top: -1px;    right: -1px; border-left: 0;  border-bottom: 0; }
.cc-bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.cc-br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

.cta h2 { font-size: clamp(36px, 5vw, 56px); }
.cta p { color: var(--text-mid); margin: 0 0 26px; }
.cta-meta {
  margin-top: 24px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}
.cta-meta a { color: var(--text-mid); }
.cta-meta a:hover { color: var(--laser); }

/* ============================================================================
   Footer
   ============================================================================ */

.footer {
  border-top: 1px solid var(--border);
  background: var(--void);
  padding: 24px 0 32px;
}
.footer-line {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-fade);
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--border);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad) 0;
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.footer-meta a { color: var(--text-mid); }
.footer-meta a:hover { color: var(--laser); }

/* ============================================================================
   Tablet / mobile tweaks
   ============================================================================ */

@media (max-width: 720px) {
  .hero-corner { display: none; }
  .platforms { width: 100%; flex-direction: column; }
  .platform { border-right: 0; border-bottom: 1px solid var(--border); width: 100%; justify-content: flex-start; }
  .platform:last-child { border-bottom: 0; }
  .nav { gap: 12px; }
  .brand-tag { display: none; }
}