/* ============================================================
   OPEN//77 — design tokens (see references/design-system.md)
   ============================================================ */

:root {
  /* OPEN SIGNAL — the default system.
     One chromatic family with depth (Ice / Electric / Deep) instead of a
     flat cyan; navy ladder for surfaces; blue-gray borders (not cyan);
     coral reserved for rare semantic "signal" moments (~2-3% budget).
     "Cyberpunk supplies the chaos. OPEN//77 supplies the signal."
     Theme system: html[data-theme] blocks below override these tokens;
     the *-rgb triplets feed every translucent overlay/gradient. */
  --void: #060a12;
  --bg: #080e19;
  --bg-rgb: 8, 14, 25;
  --text-rgb: 242, 246, 248;
  --accent-rgb: 34, 216, 226;
  --bg-elev: #0d1624;
  --surface: #101b2b;
  --surface-2: #132032;
  --line: rgba(174, 211, 224, 0.1);         /* blue-gray hairlines, not cyan */
  --line-strong: rgba(174, 211, 224, 0.19);
  --text: #f2f6f8;              /* cold white */
  --text-dim: #8d99a8;          /* steel */
  --text-faint: rgba(141, 153, 168, 0.72);
  --accent: #22d8e2;            /* OPEN Electric — CTAs, links, active states */
  --accent-ice: #70f3f5;        /* OPEN Ice — brand-mark highlights only */
  --accent-deep: #18c8d4;       /* OPEN Deep — the second signal channel */
  --accent-ink: #071013;        /* on-accent text */
  --accent-soft: rgba(var(--accent-rgb), 0.1);
  --accent-2: #22d8e2;          /* legacy alias */
  --accent-2-soft: rgba(var(--accent-rgb), 0.12);
  --signal: #ff5964;            /* Signal Coral — full/new/live semantics ONLY, never CTAs */
  --slash-1: var(--accent-ice); /* the // is two channels: / Signal Ice #70F3F5… */
  --slash-2: var(--accent);     /* …/ OPEN Signal Cyan #22D8E2 (controlled brand values) */
  --danger: #ff5c5c;

  --glow-accent: 0 0 24px rgba(var(--accent-rgb), 0.25);
  --diagram-line: rgba(var(--text-rgb), 0.32);

  /* type — Rajdhani: the condensed HUD voice of the game's own interface;
     Saira: same foundry DNA for body copy */
  --font-display: "Rajdhani", "Chakra Petch", sans-serif;
  --font-body: "Saira", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* shape */
  --radius-sm: 2px;
  --radius-md: 6px;
  --notch: 12px;
  --notch-clip: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);

  /* layout */
  --max-w: 1200px;
  --max-w-wide: 1280px;
  --max-w-narrow: 860px;
  --pad-x: clamp(20px, 4vw, 48px);
  --section-gap: clamp(88px, 11vw, 128px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   Reset & base
   ============================================================ */

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

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 84px; }

/* The hidden attribute always wins over class-level display values. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: inline-block; vertical-align: middle; }

a { color: inherit; }

h1, h2, h3, p, ul, ol { margin: 0; }

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

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

::selection { background: var(--accent); color: var(--accent-ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
              color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  min-height: 46px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  clip-path: var(--notch-clip);
}
.btn-primary:hover { background: #4de1ee; }
.btn-primary:focus-visible { clip-path: none; }
.btn-primary:disabled {
  background: var(--surface-2);
  color: var(--text-faint);
  cursor: not-allowed;
  clip-path: none;
}

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: transparent;
  font-family: var(--font-mono);
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-small { padding: 9px 16px; font-size: 12.5px; min-height: 38px; }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  /* the white application bar from the brand board — local token flip */
  --text: #0c1524;
  --text-rgb: 12, 21, 36;
  --text-dim: #4a586e;
  --text-faint: rgba(74, 88, 110, 0.7);
  --line: rgba(13, 22, 36, 0.12);
  --line-strong: rgba(13, 22, 36, 0.24);
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #e4ebf3;
  position: sticky;
  top: 0;
  z-index: 50;
  /* PERF: near-opaque solid instead of backdrop-filter — a blurred backdrop
     above animated layers forces a re-blur every frame on weaker GPUs */
  background: rgba(248, 251, 253, 0.97);
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: rgba(13, 22, 36, 0.14); }

.header-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 28px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.wordmark-glyph { color: var(--accent); flex: none; }
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.05em;
}
.wordmark-slash { color: var(--accent); }

.main-nav {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.main-nav a {
  padding: 8px 13px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s var(--ease);
}
.main-nav a:hover { color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stage-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px var(--pad-x) 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.mobile-nav a {
  padding: 13px 8px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.mobile-nav a.btn { margin-top: 10px; }

/* ============================================================
   Shared section scaffolding
   ============================================================ */

.section { padding-top: var(--section-gap); }
.section:last-of-type { padding-bottom: var(--section-gap); }

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section-inner-wide { max-width: var(--max-w-wide); }
.section-inner-narrow { max-width: var(--max-w-narrow); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.eyebrow-slash { color: var(--accent); margin-right: 6px; }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-wrap: balance;
}

.section-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text-dim);
  max-width: 640px;
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h, 60px));
  min-height: calc(100svh - var(--header-h, 60px));
  padding: clamp(48px, 5vw, 72px) 0;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/hero-cinematic.jpg") center 38% / cover no-repeat;
  opacity: 0.42;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0.78) 45%, rgba(0,0,0,0.38) 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0.78) 45%, rgba(0,0,0,0.38) 74%, transparent 100%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.5), rgba(var(--bg-rgb), 0.7) 50%, rgba(var(--bg-rgb), 0.88) 80%, var(--bg));
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.hero .eyebrow { color: var(--text-dim); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 7.6vw, 94px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 14px 0 26px;
}
.hero-title-accent { color: var(--accent); }

.hero-caret {
  display: inline-block;
  width: 0.55em;
  height: 0.82em;
  margin-left: 0.12em;
  background: var(--accent);
  vertical-align: baseline;
  transform: translateY(0.08em);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-sub {
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--text-dim);
  max-width: 640px;
  margin-bottom: 34px;
}
.hero-sub strong { color: var(--text); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 52px;
}

.hero-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.hero-facts li {
  padding: 16px 18px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-facts li + li { border-left: 1px solid var(--line); padding-left: 18px; }
.fact-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.fact-v { font-size: 14.5px; color: var(--text); font-weight: 500; }

/* ============================================================
   Distinction
   ============================================================ */

.distinction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0 42px;
}

.distinction-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  background: var(--bg-elev);
}
.distinction-card.is-yes {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(180deg, var(--accent-soft), transparent 60%), var(--bg-elev);
  clip-path: var(--notch-clip);
}

.distinction-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 18px;
}
.is-yes .distinction-label { color: var(--accent); }

.distinction-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.distinction-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15.5px;
  color: var(--text-dim);
}
.is-yes .distinction-list li { color: var(--text); }
.li-icon { flex: none; transform: translateY(2px); }
.is-not .li-icon { color: var(--text-faint); }
.is-yes .li-icon { color: var(--accent); }

.distinction-thesis {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 880px;
}
.distinction-thesis strong { color: var(--text); font-weight: 600; }

/* ============================================================
   Server browser (signature)
   ============================================================ */

.browser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 34px;
}

.concept-note {
  flex: none;
  max-width: 310px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  background: var(--surface);
}
.concept-note svg { flex: none; transform: translateY(2px); color: var(--accent-2); }

.client-window {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  overflow: hidden;
}

.client-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.client-dots { display: inline-flex; gap: 6px; }
.client-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
.client-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.client-title-dim { color: var(--text-faint); text-transform: lowercase; letter-spacing: 0.02em; }
.client-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  white-space: nowrap;
}

.client-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.client-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--text-faint);
  transition: border-color 0.15s var(--ease);
}
.client-search:focus-within { border-color: var(--accent); }
.client-search input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--text);
  font: 14px/1 var(--font-body);
  padding: 12px 0;
  min-width: 0;
}
.client-search input:focus { outline: none; }
.client-search input::placeholder { color: var(--text-faint); }

.client-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-dim);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
  min-height: 34px;
}
.filter-chip:hover { border-color: var(--line-strong); color: var(--text); }
.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}

.client-cols {
  display: grid;
  grid-template-columns: 44px minmax(220px, 2.2fr) minmax(150px, 1.2fr) 130px 76px 90px;
  gap: 14px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.server-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.server-row + .server-row { border-top: 1px solid var(--line); }

.row-main {
  display: grid;
  grid-template-columns: 44px minmax(220px, 2.2fr) minmax(150px, 1.2fr) 130px 76px 90px;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  transition: background 0.12s var(--ease);
}
.row-main:hover { background: var(--surface); }

.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.fav-btn:hover { color: var(--accent-2); background: var(--surface-2); }
.fav-btn.is-fav { color: var(--accent-2); }

.cell-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srv-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.01em;
}
.srv-desc {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-dim);
  white-space: nowrap;
}

.cell-players { display: flex; flex-direction: column; gap: 5px; }
.players-num {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.players-max { color: var(--text-faint); font-weight: 400; }
.players-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
  max-width: 92px;
}
.players-bar span {
  display: block;
  height: 100%;
  background: rgba(var(--text-rgb), 0.4);
  border-radius: 2px;
}

.cell-ping {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ping-unit { font-size: 10.5px; color: var(--text-faint); margin-left: 1px; font-weight: 400; }
.ping-good { color: var(--accent); }
.ping-mid { color: var(--text-dim); }
.ping-far { color: var(--text-faint); }

.cell-region {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}
.cell-lang {
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-size: 10.5px;
  margin-left: 4px;
}

.server-empty {
  padding: 42px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14.5px;
}

.client-statusbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.statusbar-dim { color: var(--text-faint); }

/* server detail */
.server-detail { margin-top: 18px; }
.detail-card {
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--bg-elev);
  padding: 26px 28px;
  clip-path: var(--notch-clip);
}
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 14px;
}
.detail-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.detail-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 4px;
}
.detail-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }
.detail-close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.detail-close:hover { color: var(--text); border-color: var(--line-strong); }
.detail-desc { color: var(--text-dim); max-width: 660px; margin-bottom: 20px; }
.detail-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 22px; }
.dstat { display: flex; flex-direction: column; gap: 6px; }
.dstat-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dstat-v {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dstat-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.detail-note { font-size: 12.5px; color: var(--text-faint); max-width: 340px; }

/* browser feature list */
.browser-features {
  list-style: none;
  padding: 0;
  margin: 46px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 28px;
}
.browser-features .feat-icon { color: var(--accent); margin-bottom: 14px; }
.browser-features h3 {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.browser-features p { font-size: 14px; color: var(--text-dim); }

/* ============================================================
   Steps
   ============================================================ */

.steps {
  list-style: none;
  padding: 0;
  margin: 46px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.step {
  padding: 28px 26px 6px 0;
  position: relative;
}
.step + .step { border-left: 1px solid var(--line); padding-left: 26px; }
.step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.step p { font-size: 14.5px; color: var(--text-dim); }

/* ============================================================
   Dedicated servers
   ============================================================ */

.dedicated-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.dedicated-points {
  list-style: none;
  padding: 0;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.dedicated-points li {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}
.dedicated-points h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
.dedicated-points p { font-size: 14.5px; color: var(--text-dim); }

.diagram svg { width: 100%; height: auto; }
.dg-server-box {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.dg-client-box {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.dg-player-box { fill: var(--bg-elev); stroke: var(--line); stroke-width: 1.2; }
.dg-avatar { fill: none; stroke: var(--text-faint); stroke-width: 1.5; }
.dg-pill { fill: var(--surface-2); }
.dg-pill-text { fill: var(--text-dim); font: 11px var(--font-mono); }
.dg-label-strong { fill: var(--text); font: 600 13px var(--font-display); letter-spacing: 0.08em; }
.dg-accent { fill: var(--accent); }
.dg-label-dim { fill: var(--text-faint); font: 11px var(--font-mono); }
.dg-line { stroke: var(--diagram-line); stroke-width: 1.5; fill: none; }
.dg-line-dim { stroke-dasharray: 3 5; opacity: 0.7; }
.dg-flow { fill: var(--text-dim); font: 11px var(--font-mono); }
.dg-caption { fill: var(--text-dim); font: 12px var(--font-mono); }
.dg-caption-dim { fill: var(--text-faint); }

/* ============================================================
   Audiences
   ============================================================ */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.audience-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s var(--ease);
}
.audience-card:hover { border-color: var(--line-strong); }
.audience-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-2);
}
.audience-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.audience-card .audience-desc { font-size: 14.5px; color: var(--text-dim); flex-grow: 1; }
.audience-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.audience-card ul li {
  font-size: 13.5px;
  color: var(--text-dim);
  padding-left: 20px;
  position: relative;
}
.audience-card ul li::before {
  content: "//";
  position: absolute;
  left: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  top: 2px;
}

/* ============================================================
   Creators
   ============================================================ */

.creators-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.creators-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.creators-list li {
  font-size: 15px;
  color: var(--text-dim);
  padding-left: 24px;
  position: relative;
}
.creators-list li::before {
  content: "//";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
}
.creators-list strong { color: var(--text); font-weight: 600; }
.creators-note { font-size: 13px; color: var(--text-faint); max-width: 420px; }

.code-window {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  overflow: hidden;
}
.code-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.code-filename {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}
.code-body {
  margin: 0;
  padding: 22px 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
}
.code-body .c { color: var(--text-faint); }
.code-body .k { color: var(--accent); }
.code-body .s { color: #ffd9a0; }
.code-body .n { color: #ffc27d; }
.code-body .f { color: #9db8ff; }
.code-body .v { color: #c9a7ff; }

/* ============================================================
   Roadmap
   ============================================================ */

.roadmap {
  list-style: none;
  padding: 0;
  margin: 46px 0 0;
  position: relative;
}
.roadmap::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
}
.roadmap-item {
  position: relative;
  padding: 0 0 38px 44px;
}
.roadmap-item:last-child { padding-bottom: 0; }
.roadmap-marker {
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
}
.roadmap-item.is-now .roadmap-marker {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: var(--glow-accent);
  animation: marker-pulse 2s ease-in-out infinite;
}
@keyframes marker-pulse {
  50% { box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15); }
}
.roadmap-stage {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.roadmap-item.is-now .roadmap-stage { color: var(--accent); }
.roadmap-chip {
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  letter-spacing: 0.12em;
}
.roadmap-body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 7px;
}
.roadmap-body p:not(.roadmap-stage) { font-size: 14.5px; color: var(--text-dim); max-width: 640px; }

/* ============================================================
   FAQ
   ============================================================ */

.faq-list { margin-top: 40px; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  min-height: 44px;
  transition: color 0.15s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
  margin-right: 4px;
}
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(-135deg); border-color: var(--accent); }
.faq-item p {
  padding: 0 44px 22px 4px;
  color: var(--text-dim);
  font-size: 15px;
  max-width: 700px;
}

/* ============================================================
   Follow
   ============================================================ */

.follow-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 42px;
}
.follow-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  background: var(--bg-elev);
}
.follow-card h3 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.follow-card h3::before {
  content: "// ";
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 12px;
}
.follow-card p { font-size: 13.5px; color: var(--text-dim); }

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

.site-footer {
  /* the white application block — mirrors the header's light bar */
  --text: #0c1524;
  --text-rgb: 12, 21, 36;
  --text-dim: #4a586e;
  --text-faint: rgba(74, 88, 110, 0.72);
  --line: rgba(13, 22, 36, 0.12);
  --line-strong: rgba(13, 22, 36, 0.24);
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #e4ebf3;
  background: linear-gradient(180deg, #f5f8fb, #e9eff5);
  color: var(--text);
  margin-top: var(--section-gap);
}

.footer-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 60px var(--pad-x) 40px;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-brand { max-width: 300px; }
.footer-tag { margin-top: 14px; font-size: 14px; color: var(--text-dim); }

.footer-nav { display: flex; gap: clamp(36px, 6vw, 80px); flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 2px 0;
}
.footer-col a:hover { color: var(--text); }

.footer-legal {
  /* navy signal band — splits the white footer from the page's end */
  position: relative;
  max-width: none;
  margin: 0;
  padding: 30px max(var(--pad-x), calc((100% - 1280px) / 2 + var(--pad-x))) 46px;
  background: #080e19;
  font-size: 12.5px;
  color: rgba(148, 160, 177, 0.95);
  line-height: 1.7;
}
.footer-legal p { max-width: 840px; }
.footer-fine { margin-top: 10px; color: rgba(148, 160, 177, 0.7); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .browser-features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); border-top: 0; }
  .step { border-top: 1px solid var(--line); }
  .step + .step { border-left: 0; padding-left: 0; }
  .step:nth-child(even) { border-left: 1px solid var(--line); padding-left: 26px; }
  .audience-grid { grid-template-columns: 1fr; }
  .dedicated-grid, .creators-grid { grid-template-columns: 1fr; }
  .dedicated-diagram { max-width: 480px; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav:not([hidden]) { display: flex; }

  .browser-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .concept-note { max-width: none; }

  .hero-facts { grid-template-columns: 1fr 1fr; }
  .hero-facts li { border-top: 1px solid var(--line); padding-left: 0; }
  .hero-facts li:nth-child(-n+2) { border-top: 0; }
  .hero-facts li + li { border-left: 0; }
  .hero-facts li:nth-child(even) { border-left: 1px solid var(--line); padding-left: 18px; }

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

  /* server rows become cards */
  .client-cols { display: none; }
  .row-main {
    grid-template-columns: 40px 1fr auto auto;
    grid-template-areas:
      "fav name    name  name"
      "fav tags    tags  tags"
      "fav players ping  region";
    row-gap: 10px;
  }
  .cell-fav { grid-area: fav; align-self: start; }
  .cell-name { grid-area: name; }
  .srv-desc { white-space: normal; }
  .cell-tags { grid-area: tags; }
  .cell-players { grid-area: players; justify-self: start; }
  .cell-ping { grid-area: ping; align-self: center; }
  .cell-region { grid-area: region; align-self: center; justify-self: end; }
}

@media (max-width: 640px) {
  .hero-caret { display: none; }
  .code-titlebar, .client-titlebar { flex-wrap: wrap; row-gap: 8px; }
  .code-window { position: relative; }
  .code-window::after {
    content: "";
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(90deg, transparent, var(--bg-elev));
    pointer-events: none;
  }
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(even) { border-left: 0; padding-left: 0; }
  .browser-features { grid-template-columns: 1fr; gap: 28px; }
  .follow-cards { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: 40px; }
  .detail-stats { gap: 24px; }
  .hero-ctas .btn { width: 100%; }
}

/* ============================================================
   V2 — visual homepage, pages, server browser page
   ============================================================ */

/* ---------- Nav active state ---------- */

.main-nav a[aria-current="page"] {
  color: var(--text);
  position: relative;
}
.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  transform: skewX(-28deg);
}
.mobile-nav a[aria-current="page"] { color: var(--accent); }

/* ---------- Hero (home) ---------- */

.btn-lg { padding: 16px 30px; font-size: 15px; min-height: 52px; }

.hero-home .hero-sub {
  color: rgba(var(--text-rgb), 0.9);
  text-shadow: 0 1px 14px rgba(var(--bg-rgb), 0.8);
  font-size: clamp(18px, 2vw, 22px);
  max-width: 560px;
}
.hero-home .hero-title { text-shadow: 0 2px 24px rgba(var(--bg-rgb), 0.7); }
.hero-home .eyebrow { text-shadow: 0 1px 8px rgba(var(--bg-rgb), 0.9); }
.hero-home .btn-ghost {
  background: rgba(var(--bg-rgb), 0.6);
}

.hero-note {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(var(--text-rgb), 0.72);
  text-shadow: 0 1px 8px rgba(var(--bg-rgb), 0.9);
}

/* ---------- Split section head ---------- */

.split-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 56px);
}
.split-head .section-title { margin-bottom: 0; }
.split-head-lead {
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--text-dim);
  max-width: 520px;
  padding-bottom: 6px;
}

/* ---------- Large feature visual ---------- */

.feature-visual {
  margin: 0 0 22px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feature-visual img {
  display: block;
  width: 100%;
  height: clamp(300px, 46vw, 560px);
  object-fit: cover;
}
.feature-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.08) 45%, rgba(var(--bg-rgb), 0.88));
  pointer-events: none;
}
.feature-visual-caption {
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(16px, 2.6vw, 28px);
  z-index: 1;
}
.feature-visual-caption .eyebrow { margin-bottom: 6px; color: var(--accent); }
.feature-visual-caption p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 2.4vw, 24px);
  text-shadow: 0 1px 12px rgba(var(--bg-rgb), 0.8);
}

/* ---------- Experience cards ---------- */

.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.exp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(240px, 26vw, 330px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  isolation: isolate;
  background: var(--surface);
}
.exp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--exp-img);
  background-size: cover;
  background-position: center;
  transition: transform 0.45s var(--ease);
}
.exp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.28), rgba(var(--bg-rgb), 0.28) 40%, rgba(var(--bg-rgb), 0.92));
  transition: background 0.3s var(--ease);
}
.exp-card:hover::before { transform: scale(1.035); }
.exp-card:hover { border-color: var(--line-strong); }
.exp-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: rgba(var(--bg-rgb), 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.exp-body { display: flex; flex-direction: column; gap: 7px; max-width: 400px; }
.exp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 27px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(var(--bg-rgb), 0.8);
}
.exp-desc {
  font-size: 14.5px;
  color: rgba(var(--text-rgb), 0.82);
  text-shadow: 0 1px 8px rgba(var(--bg-rgb), 0.9);
}

.section-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 40px);
}
.section-cta-note { font-size: 14px; color: var(--text-dim); max-width: 420px; }

/* ---------- Create split (home) ---------- */

.create-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.create-points {
  list-style: none;
  padding: 0;
  margin: 34px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.create-points li { border-left: 2px solid var(--accent); padding-left: 20px; }
.create-points h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 5px;
}
.create-points p { font-size: 14.5px; color: var(--text-dim); }

.create-visual {
  margin: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  clip-path: var(--notch-clip);
}
.create-visual img {
  display: block;
  width: 100%;
  height: clamp(320px, 34vw, 520px);
  object-fit: cover;
}
.create-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.1) 55%, rgba(var(--bg-rgb), 0.8));
  pointer-events: none;
}
.create-visual-chip {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--text);
  background: rgba(var(--bg-rgb), 0.75);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-accent);
  flex: none;
  animation: marker-pulse 2s ease-in-out infinite;
}

/* ---------- Finale ---------- */

.finale {
  position: relative;
  margin-top: var(--section-gap);
  padding: clamp(110px, 15vw, 200px) 0;
  overflow: hidden;
  text-align: center;
}
.finale-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.finale-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/city-finale.jpg") center 42% / cover no-repeat;
}
.finale-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 55%, rgba(var(--bg-rgb), 0.2), rgba(var(--bg-rgb), 0.72)),
    linear-gradient(180deg, var(--bg), rgba(var(--bg-rgb), 0.25) 22%, rgba(var(--bg-rgb), 0.3) 72%, rgba(var(--bg-rgb), 0.9));
}
.finale-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.finale-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.06;
  text-transform: uppercase;
  margin: 14px 0 34px;
  text-shadow: 0 2px 28px rgba(var(--bg-rgb), 0.85);
  text-wrap: balance;
}
.finale-ctas { justify-content: center; margin-bottom: 0; }
.finale-note {
  margin-top: 30px;
  font-size: 13.5px;
  color: rgba(var(--text-rgb), 0.78);
  text-shadow: 0 1px 10px rgba(var(--bg-rgb), 0.9);
}
.finale-note a { color: var(--accent); }
.finale .eyebrow { color: rgba(var(--text-rgb), 0.8); text-shadow: 0 1px 8px rgba(var(--bg-rgb), 0.9); }

/* ---------- Page heroes (inner pages) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 110px) 0 clamp(44px, 6vw, 72px);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
}
.page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb), 0.88), rgba(var(--bg-rgb), 0.5) 60%, rgba(var(--bg-rgb), 0.3)),
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.55), rgba(var(--bg-rgb), 0.5) 55%, var(--bg));
}
.page-hero-servers .page-hero-bg::before { background-image: url("assets/play-together.jpg"); }
.page-hero-create { padding-bottom: clamp(64px, 9vw, 120px); }
.page-hero-create .page-hero-bg::before { background-image: url("assets/create-server.jpg"); }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero .section-lead { color: rgba(var(--text-rgb), 0.85); text-shadow: 0 1px 10px rgba(var(--bg-rgb), 0.8); }
.page-hero .eyebrow { text-shadow: 0 1px 8px rgba(var(--bg-rgb), 0.9); }
.page-hero .hero-ctas { margin: 30px 0 0; }
.page-hero-plain { border-bottom: 1px solid var(--line); background: var(--bg-elev); }

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 62px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 10px 0 16px;
  text-shadow: 0 2px 20px rgba(var(--bg-rgb), 0.7);
  text-wrap: balance;
}

.demo-banner {
  display: inline-flex;
  gap: 11px;
  align-items: baseline;
  margin-top: 22px;
  max-width: 640px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  background: rgba(var(--bg-rgb), 0.7);
}
.demo-banner svg { flex: none; transform: translateY(2px); color: var(--accent-2); }
.demo-banner strong { color: var(--text); }

/* ---------- Servers page ---------- */

.section-browser-page { padding-top: clamp(44px, 6vw, 64px); }

.mini-chip {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}

.featured-block { margin-bottom: 30px; }
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 14px;
}
.featured-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 190px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  isolation: isolate;
  background: var(--surface);
  transition: border-color 0.15s var(--ease);
}
.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transition: transform 0.45s var(--ease);
}
.featured-card:hover::before { transform: scale(1.04); }
.featured-card:hover { border-color: var(--accent); }
.featured-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.15), rgba(var(--bg-rgb), 0.55) 55%, rgba(var(--bg-rgb), 0.94));
}
.featured-content { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.featured-mode {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.featured-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-shadow: 0 1px 10px rgba(var(--bg-rgb), 0.8);
}
.featured-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}
.featured-players { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }

.browser-page-window { background: var(--bg-elev); }
.browser-toolbar { row-gap: 12px; }
.mode-toolbar { padding-top: 0; border-bottom: 1px solid var(--line); }
.browser-page-window .server-list { max-height: none; }

.toolbar-selects {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 4px 0 12px;
  min-height: 44px;
}
.select-wrap:focus-within { border-color: var(--accent); }
.select-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888fa3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 8px center no-repeat;
  border: 0;
  color: var(--text);
  font: 500 13.5px var(--font-mono);
  padding: 10px 26px 10px 2px;
  cursor: pointer;
}
.select-wrap select:focus { outline: none; }
.select-wrap select option { background: var(--surface); color: var(--text); }

.fav-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 14px;
}
.fav-filter.is-active svg path { fill: currentColor; }

.direct-connect-note {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.direct-connect-note svg { flex: none; transform: translateY(3px); color: var(--accent); }

.browser-cta-band {
  margin-top: clamp(40px, 6vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--accent-soft), transparent 55%), var(--bg-elev);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.browser-cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 27px);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.browser-cta-band p { color: var(--text-dim); font-size: 15px; max-width: 520px; }

/* ---------- Server detail overlay ---------- */

body.detail-open { overflow: hidden; }

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.detail-overlay[hidden] { display: none; }
.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, 0.7);
}
.detail-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.detail-banner {
  position: relative;
  min-height: 190px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 26px;
}
.detail-banner .detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(var(--bg-rgb), 0.7);
  min-width: 44px;
  min-height: 44px;
}
.detail-banner-text .detail-name { text-shadow: 0 1px 12px rgba(var(--bg-rgb), 0.8); }
.detail-body { padding: 24px 26px 26px; }
.detail-body .detail-stats { margin-bottom: 24px; }
.detail-body .detail-desc { margin-bottom: 22px; }
.detail-body .detail-note { margin-top: 14px; font-size: 12.5px; color: var(--text-faint); }
.detail-body .btn[disabled] { opacity: 0.85; cursor: not-allowed; }

/* ---------- Create page ---------- */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.benefit-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  padding: 30px 28px;
  transition: border-color 0.15s var(--ease);
}
.benefit-card:hover { border-color: var(--line-strong); }
.benefit-card .feat-icon { color: var(--accent); margin-bottom: 16px; }
.benefit-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 9px;
}
.benefit-card p { font-size: 14.5px; color: var(--text-dim); }

.mode-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mode-shot {
  margin: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mode-shot img {
  display: block;
  width: 100%;
  height: clamp(200px, 24vw, 300px);
  object-fit: cover;
}
.mode-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.05) 50%, rgba(var(--bg-rgb), 0.88));
  pointer-events: none;
}
.mode-shot figcaption {
  position: absolute;
  left: 18px;
  bottom: 15px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text);
  text-shadow: 0 1px 8px rgba(var(--bg-rgb), 0.9);
}
.mode-shot figcaption .eyebrow-slash { color: var(--accent); margin-right: 6px; }

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

.status-note {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 40px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  background: var(--surface);
}
.status-note svg { flex: none; transform: translateY(2px); color: var(--accent-2); }
.status-note strong { color: var(--text); }
.status-note a { color: var(--accent); }

.deeper-band {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--accent-soft), transparent 55%), var(--bg-elev);
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.deeper-band p { color: var(--text-dim); font-size: 15px; max-width: 480px; }
.deeper-links { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Docs ---------- */

.docs-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: var(--section-gap);
}
.docs-sidebar {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docs-sidebar a {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 7px 10px;
  border-left: 2px solid var(--line);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.docs-sidebar a:hover { color: var(--text); border-left-color: var(--accent); }

.docs-content { min-width: 0; }
.docs-section { padding: 8px 0 clamp(48px, 6vw, 72px); }
.docs-section:last-child { padding-bottom: 0; }
.docs-section + .docs-section { border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 56px); }
.docs-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 2.8vw, 30px);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.docs-title .eyebrow-slash { color: var(--accent); margin-right: 10px; }
.docs-p {
  color: var(--text-dim);
  font-size: 16px;
  max-width: 68ch;
  margin-bottom: 26px;
}
.docs-p:last-child { margin-bottom: 0; }
.docs-section .distinction-grid { margin: 8px 0 0; }
.docs-section .dedicated-points { margin-top: 6px; }
.docs-diagram { max-width: 460px; margin-top: 34px; }
.docs-section .creators-list { margin: 0 0 26px; }
.docs-steps { margin-top: 8px; }
.steps-2 { grid-template-columns: repeat(2, 1fr); }
.docs-section .roadmap { margin-top: 12px; }
.docs-section .faq-list { margin-top: 12px; }
.faq-item p a { color: var(--accent); }

/* ---------- Community ---------- */

.section-community { padding-top: clamp(40px, 5vw, 64px); }
.section-community .follow-cards { margin-top: 0; }
.follow-card a { color: var(--accent); text-decoration: none; }
.follow-card a:hover { text-decoration: underline; }

/* ---------- Responsive (v2) ---------- */

@media (max-width: 1080px) {
  .split-head { grid-template-columns: 1fr; align-items: start; }
  .split-head-lead { padding-bottom: 0; }
  .create-split { grid-template-columns: 1fr; }
  .create-visual { order: -1; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
  }
  .docs-sidebar .footer-col-title { width: 100%; }
  .docs-sidebar a { border-left: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
  .steps-3 { grid-template-columns: 1fr; border-top: 0; }
  .steps-3 .step { border-top: 1px solid var(--line); }
  .steps-3 .step + .step { border-left: 0; padding-left: 0; }
}

@media (max-width: 900px) {
  .exp-grid { grid-template-columns: 1fr; }
  .exp-card { min-height: 230px; }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-card { min-height: 150px; }
  .mode-strip { grid-template-columns: 1fr; }
  .mode-shot img { height: clamp(180px, 40vw, 260px); }
  .benefit-grid { grid-template-columns: 1fr; }
  .browser-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-selects { justify-content: flex-start; }
  .steps-2 { grid-template-columns: 1fr; border-top: 0; }
  .steps-2 .step { border-top: 1px solid var(--line); }
  .steps-2 .step + .step { border-left: 0; padding-left: 0; }
}

@media (max-width: 640px) {
  .hero-home .hero-ctas .btn { width: 100%; }
  .finale-ctas .btn { width: 100%; }
  .page-hero .hero-ctas .btn { width: 100%; }
  .select-wrap { flex: 1 1 auto; justify-content: space-between; }
  .fav-filter { flex: 1 1 100%; justify-content: center; }
  .browser-cta-band, .deeper-band { flex-direction: column; align-items: flex-start; }
  .detail-overlay { padding: 0; align-items: flex-end; }
  .detail-panel { width: 100%; max-height: 92vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
}

/* ============================================================
   V3 refinements — minimal tiles, cinematic finale, alpha band
   ============================================================ */

.exp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.exp-card-tall {
  min-height: clamp(320px, 34vw, 470px);
  justify-content: flex-end;
  gap: 12px;
}
.exp-card-tall .exp-tag {
  position: absolute;
  top: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
}
.exp-card-tall .exp-title { font-size: clamp(22px, 2.2vw, 30px); }

.finale {
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.finale-note a { color: rgba(var(--text-rgb), 0.85); }
.finale-note a:hover { color: var(--accent); }

.alpha-band {
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--accent-soft), transparent 55%), var(--bg-elev);
  clip-path: var(--notch-clip);
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.alpha-band p { color: var(--text-dim); font-size: 15px; max-width: 560px; }
.alpha-band .browser-cta-title { margin-top: 4px; }
.alpha-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text) !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  background: var(--surface);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .exp-grid-3 { grid-template-columns: 1fr; }
  .exp-card-tall { min-height: 240px; }
  .alpha-band { flex-direction: column; align-items: flex-start; }
  .alpha-status { white-space: normal; }
}

/* ============================================================
   V4 — /servers rework: dense product browser + detail page
   ============================================================ */

.sb-page { padding: clamp(22px, 3vw, 36px) 0 var(--section-gap); }

/* ---------- Compact head ---------- */

.sb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.sb-head .eyebrow { margin-bottom: 6px; }
.sb-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.sb-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  background: var(--surface);
  white-space: nowrap;
  flex-wrap: wrap;
}
.sb-status svg { color: var(--accent-2); flex: none; }
.sb-status-dim { color: var(--text-dim); letter-spacing: 0.04em; }
.sb-status-more {
  font: 500 11px var(--font-mono);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.04em;
  min-height: 24px;
}
.sb-status-note {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
  border-left: 2px solid var(--accent-2);
  background: var(--bg-elev);
  padding: 12px 16px;
  margin-bottom: 16px;
  max-width: 780px;
}
.sb-status-note a { color: var(--accent); }

/* ---------- Toolbar: search + tools ---------- */

.sb-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.sb-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  color: var(--text-faint);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.sb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow-accent); }
.sb-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: 15px/1 var(--font-body);
  padding: 15px 0;
}
.sb-search input:focus { outline: none; }
.sb-search input::placeholder { color: var(--text-faint); }

.sb-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font: 500 12.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.sb-tool:hover { color: var(--text); border-color: var(--accent); }
.sb-tool.is-open { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.sb-tool-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 11px var(--font-mono);
}

/* ---------- Collapsible panels ---------- */

.sb-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.sb-clear {
  font: 500 12px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 10px;
  min-height: 40px;
}
.sb-clear:hover { color: var(--text); }

.sb-panel-direct { align-items: center; }
.sb-direct-field {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 4px 0 12px;
  min-height: 44px;
}
.sb-direct-field:focus-within { border-color: var(--accent); }
.sb-direct-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: 13px var(--font-mono);
  padding: 12px 8px 12px 0;
}
.sb-direct-field input:focus { outline: none; }
.sb-direct-field input::placeholder { color: var(--text-faint); }
.sb-panel-note { font-size: 12.5px; color: var(--text-faint); flex: 1 1 100%; }

/* ---------- Modes + sort ---------- */

.sb-modes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sb-sort { flex: none; }

/* ---------- Layout: list + featured rail ---------- */

.sb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 26px;
  align-items: start;
}

.sb-col-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
}
.sb-col-head h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sb-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin-left: auto;
}

/* ---------- Server rows ---------- */

.sb-list { list-style: none; margin: 0; padding: 0; }

.sb-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s var(--ease);
}
.sb-row:hover { background: var(--surface); }

.sb-row-link {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 118px 84px;
  gap: 16px;
  align-items: center;
  padding: 11px 10px 11px 12px;
  text-decoration: none;
  color: var(--text);
}

.sb-thumb {
  width: 86px;
  height: 58px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.sb-row:hover .sb-thumb { transform: scale(1.04); border-color: var(--line-strong); }

.sb-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sb-feat-chip {
  flex: none;
  font: 500 9px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--accent-2);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.sb-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.sb-tags .tag { font-size: 9.5px; padding: 2px 6px; }

.sb-players { display: flex; flex-direction: column; gap: 3px; }
.sb-players-num {
  font-family: var(--font-mono);
  font-size: 16.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sb-players-max { color: var(--text-faint); font-size: 12.5px; font-weight: 400; }
.sb-players-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sb-players .players-bar { max-width: 96px; }
.pop-high .sb-players-num { color: var(--accent); }
.pop-high .players-bar span { background: var(--accent); }
.pop-mid .players-bar span { background: rgba(var(--text-rgb), 0.55); }
.pop-low .sb-players-num { color: var(--text-dim); }

.sb-net {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sb-loc { color: var(--text-faint); font-size: 11px; }

.sb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
}
.sb-actions .fav-btn { width: 38px; height: 38px; }
.sb-connect {
  font: 600 11.5px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-height: 40px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
  white-space: nowrap;
}
.sb-connect:hover,
.sb-row:hover .sb-connect {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Featured rail ---------- */

.sb-featured-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
}
.sb-feat-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: background 0.12s var(--ease);
}
.sb-feat-card:hover { background: var(--surface); }
.sb-feat-thumb {
  flex: none;
  width: 68px;
  height: 46px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}
.sb-feat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-feat-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-feat-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.sb-feat-meta strong { color: var(--text); font-weight: 500; }
.sb-feat-mode { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--accent); }

.sb-owner-cta {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--bg-elev);
}
.sb-owner-cta p { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(8px);
  z-index: 120;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 500 12.5px var(--font-mono);
  letter-spacing: 0.04em;
  padding: 12px 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), var(--glow-accent);
  opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  max-width: min(90vw, 480px);
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Server detail page ---------- */

.sv-page { padding: clamp(20px, 3vw, 32px) 0 var(--section-gap); }
.sv-back { margin-bottom: 14px; }
.sv-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  min-height: 32px;
}
.sv-back a:hover { color: var(--accent); }

.sv-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  overflow: hidden;
}
.sv-cover {
  position: relative;
  min-height: clamp(240px, 32vw, 380px);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 3vw, 30px);
}
.sv-cover-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.sv-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(var(--bg-rgb), 0.8);
}
.sv-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(var(--text-rgb), 0.8);
}
.sv-sub strong { color: var(--text); font-weight: 500; }
.sv-cover-actions { display: flex; align-items: center; gap: 12px; }
.sv-fav {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(var(--bg-rgb), 0.7);
}

.sv-statbar {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  padding: 18px clamp(18px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sv-stat { display: flex; flex-direction: column; gap: 5px; }
.sv-stat-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sv-stat-v {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sv-stat-dim { color: var(--text-faint); font-size: 13px; }
.sv-stat-players .players-bar { max-width: 120px; }
.sv-stat-tags { max-width: 340px; }

.sv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(20px, 3vw, 30px);
}
.sv-section + .sv-section { margin-top: 28px; }
.sv-h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-h2 .eyebrow-slash { color: var(--accent); }
.sv-desc { color: var(--text-dim); font-size: 15px; max-width: 62ch; margin-bottom: 16px; }

.sv-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
}
.sv-link-chip svg { color: var(--accent); }
.sv-links-note, .sv-links-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.sv-rules {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-rules li {
  font-size: 14px;
  color: var(--text-dim);
  padding-left: 22px;
  position: relative;
}
.sv-rules li::before {
  content: "//";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}

.sv-playerlist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-playerlist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}
.sv-playerlist-more {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.sv-footnote {
  padding: 14px clamp(18px, 3vw, 30px);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
}
.sv-missing { padding: 60px 0; }
.sv-missing p { margin-top: 14px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .sb-layout { display: flex; flex-direction: column; }
  .sb-col-featured { order: -1; width: 100%; }
  .sb-featured-list {
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-2) transparent;
  }
  .sb-featured-list li { flex: none; }
  .sb-feat-card {
    width: 240px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elev);
  }
  .sb-owner-cta { display: none; }
  .sv-body { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sb-head { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .sb-status { white-space: normal; }
  .sb-status-dim { display: none; }

  .sb-toolbar {
    position: sticky;
    top: 56px;
    z-index: 30;
    background: var(--bg);
    padding: 10px 0;
    margin: 0 0 10px;
    flex-wrap: wrap;
  }
  .sb-search { flex: 1 1 100%; }
  .sb-tool { flex: 1; justify-content: center; }

  .sb-row { flex-direction: column; position: relative; }
  .sb-row-link {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "thumb id"
      "players net";
    gap: 10px 14px;
    padding: 14px 14px 8px;
  }
  .sb-thumb { grid-area: thumb; width: 72px; height: 48px; }
  .sb-id { grid-area: id; padding-right: 40px; }
  .sb-name { flex-wrap: wrap; }
  .sb-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sb-players { grid-area: players; flex-direction: row; align-items: baseline; gap: 8px; }
  .sb-players-num { white-space: nowrap; }
  .sb-players .players-bar { display: none; }
  .sb-players-label { font-size: 10px; }
  .sb-net { grid-area: net; flex-direction: row; align-items: baseline; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
  .sb-actions { padding: 0 14px 14px; }
  .sb-actions .fav-btn {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 44px;
    height: 44px;
  }
  .sb-connect { flex: 1; }

  .sv-cover-bottom { align-items: stretch; flex-direction: column; }
  .sv-cover-actions { width: 100%; }
  .sv-cover-actions .btn { flex: 1; }
}

/* ============================================================
   V5 — color system trials (pick one, then we lock it in)
   Switch via the floating widget (bottom-right) or
   html[data-theme="..."] — every token cascades from here.
   ============================================================ */

/* 01 — OPEN SIGNAL (default, defined in :root)
   layered cyan range + navy depth + rare coral semantics */

/* 02 — NIGHT CYAN — the previous flat-cyan system, kept for comparison */
html[data-theme="night-cyan"] {
  --bg: #080d18;
  --bg-rgb: 8, 13, 24;
  --bg-elev: #0d1422;
  --surface: #111928;
  --surface-2: #17213a;
  --text: #eef2f5;
  --text-rgb: 238, 242, 245;
  --text-dim: #8f9aab;
  --text-faint: rgba(143, 154, 171, 0.72);
  --line: rgba(var(--text-rgb), 0.08);
  --line-strong: rgba(var(--text-rgb), 0.16);
  --accent: #20d5e5;
  --accent-rgb: 32, 213, 229;
  --accent-ink: #080d18;
  --accent-2: #20d5e5;
  --slash-1: var(--accent);
  --slash-2: var(--accent);
}

/* 03 — SAMURAI RED — arasaka warfare, aggressive, rockerboy */
html[data-theme="samurai-red"] {
  --line: rgba(var(--text-rgb), 0.08);
  --line-strong: rgba(var(--text-rgb), 0.16);
  --slash-1: var(--accent);
  --slash-2: var(--accent);
  --bg: #0d090b;
  --bg-rgb: 13, 9, 11;
  --bg-elev: #140e11;
  --surface: #1a1216;
  --surface-2: #251921;
  --text: #f6eff1;
  --text-rgb: 246, 239, 241;
  --text-dim: #a5939b;
  --text-faint: rgba(165, 147, 155, 0.72);
  --accent: #ff3d52;
  --accent-rgb: 255, 61, 82;
  --accent-ink: #16070b;
  --accent-2: #ff3d52;
}

/* 03 — STREET YELLOW — the 2077 street brand: warning tape, taxi, signage */
html[data-theme="street-yellow"] {
  --line: rgba(var(--text-rgb), 0.08);
  --line-strong: rgba(var(--text-rgb), 0.16);
  --slash-1: var(--accent);
  --slash-2: var(--accent);
  --bg: #0b0b07;
  --bg-rgb: 11, 11, 7;
  --bg-elev: #12120b;
  --surface: #181810;
  --surface-2: #232316;
  --text: #f4f3e8;
  --text-rgb: 244, 243, 232;
  --text-dim: #a0a08c;
  --text-faint: rgba(160, 160, 140, 0.72);
  --accent: #fcee0a;
  --accent-rgb: 252, 238, 10;
  --accent-ink: #12120a;
  --accent-2: #fcee0a;
}

/* 04 — BRAINDANCE VIOLET — synth, memory, netspace dreamstate */
html[data-theme="braindance-violet"] {
  --line: rgba(var(--text-rgb), 0.08);
  --line-strong: rgba(var(--text-rgb), 0.16);
  --slash-1: var(--accent);
  --slash-2: var(--accent);
  --bg: #0a0714;
  --bg-rgb: 10, 7, 20;
  --bg-elev: #110c1e;
  --surface: #171129;
  --surface-2: #211939;
  --text: #f1eff8;
  --text-rgb: 241, 239, 248;
  --text-dim: #9a93b0;
  --text-faint: rgba(154, 147, 176, 0.72);
  --accent: #a86bff;
  --accent-rgb: 168, 107, 255;
  --accent-ink: #0e081a;
  --accent-2: #a86bff;
}

/* 05 — KITSCH MAGENTA — neon signage, clubs, chrome + entropy */
html[data-theme="kitsch-magenta"] {
  --line: rgba(var(--text-rgb), 0.08);
  --line-strong: rgba(var(--text-rgb), 0.16);
  --slash-1: var(--accent);
  --slash-2: var(--accent);
  --bg: #120714;
  --bg-rgb: 18, 7, 20;
  --bg-elev: #190b1c;
  --surface: #211026;
  --surface-2: #2e1734;
  --text: #f7eef6;
  --text-rgb: 247, 238, 246;
  --text-dim: #a893a5;
  --text-faint: rgba(168, 147, 165, 0.72);
  --accent: #ff2e88;
  --accent-rgb: 255, 46, 136;
  --accent-ink: #170611;
  --accent-2: #ff2e88;
}

/* ---------- Floating theme switcher (trial tool) ---------- */

.theme-tool {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.theme-tool-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.theme-tool-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-tool-panel {
  width: 240px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
  padding: 14px;
}
.theme-tool-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.theme-tool-title .eyebrow-slash { color: var(--accent); }
.theme-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--text-dim);
  font: 500 13px var(--font-body);
  transition: background 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease);
  min-height: 42px;
}
.theme-opt:hover { background: var(--surface); color: var(--text); }
.theme-opt.is-active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.theme-swatch {
  flex: none;
  width: 34px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
.theme-swatch i {
  position: absolute;
  right: -4px;
  top: -6px;
  width: 16px;
  height: 34px;
  transform: rotate(18deg);
}
.theme-opt-name { flex: 1; }
.theme-opt-check { flex: none; color: var(--accent); opacity: 0; }
.theme-opt.is-active .theme-opt-check { opacity: 1; }
.theme-tool-note {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .theme-tool { right: 12px; bottom: 12px; }
  .theme-tool-panel { width: min(240px, calc(100vw - 24px)); }
}

/* ============================================================
   V6 — OPEN SIGNAL details: dual-signal // + coral semantics
   ============================================================ */

/* The brand mark's two slashes are two signal channels (in / out).
   This treatment lives ONLY on the wordmark — never on buttons or titles. */
.wordmark-slash .ws-1 { color: var(--slash-1); }
.wordmark-slash .ws-2 { color: var(--slash-2); }
.wordmark-glyph .gs-1 { stroke: var(--slash-1); }
.wordmark-glyph .gs-2 { stroke: var(--slash-2); }

/* Signal Coral — rare, semantic only: featured/new, near-full, notices,
   favorites. Never primary CTAs. Cyan = platform/active; coral = live/alert. */
.sb-status svg,
.demo-banner svg,
.status-note svg,
.concept-note svg { color: var(--signal); }
.sb-status-note { border-left-color: var(--signal); }
.sb-feat-chip { color: var(--signal); border-color: rgba(255, 89, 100, 0.42); }
.fav-btn:hover { color: var(--signal); background: var(--surface-2); }
.fav-btn.is-fav { color: var(--signal); }
.pop-full .sb-players-num { color: var(--signal); }
.pop-full .players-bar span { background: var(--signal); }
.alpha-band .live-dot { background: var(--signal); box-shadow: 0 0 24px rgba(255, 89, 100, 0.25); }

/* ============================================================
   V7 — OPEN SIGNAL shape language: the / angle everywhere
   (identity = geometry + //, not just a hue)
   ============================================================ */

/* 1. Dual-cut buttons — the Cyberpunk HUD cut on BOTH opposing corners */
.btn-primary {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-primary:focus-visible { clip-path: none; }

/* 2. Slash-cut chips & tags — every small label leans at the // angle */
.tag,
.stage-chip,
.client-badge,
.mini-chip,
.roadmap-chip,
.sb-feat-chip {
  transform: skewX(-10deg);
}
.filter-chip { transform: skewX(-8deg); }
.filter-chip > * { transform: skewX(8deg); }

/* 3. Slanted thumbnails in the server browser — parallelogram frames */
.sb-thumb,
.sb-feat-thumb {
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  border: 0;
}

/* 4. Dual-signal mark under section titles — two channels, ice + deep */
.section-title::after,
.page-title::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin-top: 16px;
  border-left: 3px solid var(--slash-1);
  border-right: 3px solid var(--slash-2);
  transform: skewX(-32deg);
}
.finale-title::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin: 18px auto 0;
  border-left: 3px solid var(--slash-1);
  border-right: 3px solid var(--slash-2);
  transform: skewX(-32deg);
}

/* 5. HUD corner brackets on major imagery */
.hud-corners {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 2;
}
.hud-corners::before,
.hud-corners::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0.9;
}
.hud-corners::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
.hud-corners::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

/* 6. Signal scanlines over the cinematic zones — CRT/net texture, very faint */
.hero-bg::after {
  background:
    repeating-linear-gradient(180deg, rgba(var(--text-rgb), 0.022) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.5), rgba(var(--bg-rgb), 0.7) 50%, rgba(var(--bg-rgb), 0.88) 80%, var(--bg));
}
.finale-bg::after {
  background:
    repeating-linear-gradient(180deg, rgba(var(--text-rgb), 0.022) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 75% 70% at 50% 55%, rgba(var(--bg-rgb), 0.2), rgba(var(--bg-rgb), 0.72)),
    linear-gradient(180deg, var(--bg), rgba(var(--bg-rgb), 0.25) 22%, rgba(var(--bg-rgb), 0.3) 72%, rgba(var(--bg-rgb), 0.9));
}
.page-hero-bg::after {
  background:
    repeating-linear-gradient(180deg, rgba(var(--text-rgb), 0.022) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(var(--bg-rgb), 0.88), rgba(var(--bg-rgb), 0.5) 60%, rgba(var(--bg-rgb), 0.3)),
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.55), rgba(var(--bg-rgb), 0.5) 55%, var(--bg));
}

/* ============================================================
   V8 — motion signatures (all gated by prefers-reduced-motion,
   scroll reveals are transform-only: content never invisible)
   ============================================================ */

/* Rajdhani is condensed — give the big voices a bit more size/tracking */
.section-title { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: 0.01em; }
.page-title { font-size: clamp(38px, 5.8vw, 68px); letter-spacing: 0; }
.finale-title { font-size: clamp(32px, 5.6vw, 64px); }
.sb-title { font-size: clamp(26px, 3vw, 38px); }
.wordmark-text { font-size: 21px; letter-spacing: 0.06em; }

/* --- Boot-in: hero content rises in sequence on load --- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.hero-inner > * { animation: rise-in 0.65s var(--ease) backwards; }
.hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.14s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.24s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.34s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.46s; }
.page-hero-inner > *,
.page-hero .section-inner > * { animation: rise-in 0.55s var(--ease) backwards; }
.page-hero-inner > *:nth-child(2),
.page-hero .section-inner > *:nth-child(2) { animation-delay: 0.1s; }
.page-hero-inner > *:nth-child(3),
.page-hero .section-inner > *:nth-child(3) { animation-delay: 0.2s; }
.page-hero-inner > *:nth-child(4),
.page-hero .section-inner > *:nth-child(4) { animation-delay: 0.3s; }

/* --- Periodic glitch on the hero accent (the 2077) --- */
@keyframes sig-glitch {
  0%, 89%, 100% { text-shadow: none; transform: none; }
  90% { text-shadow: -3px 0 var(--signal), 3px 0 var(--accent-ice); transform: translateX(2px) skewX(-4deg); }
  92% { text-shadow: 3px -1px var(--signal), -3px 1px var(--accent-ice); transform: translateX(-2px); }
  94% { text-shadow: -2px 0 var(--accent-ice), 2px 0 var(--signal); transform: translateX(1px) skewX(3deg); }
  95.5% { text-shadow: none; transform: none; }
}
.hero-title-accent { display: inline-block; animation: sig-glitch 7s steps(1) 2.2s infinite; }

/* one-shot glitch burst for nav links on hover — same language as the 2077 */
@keyframes nav-glitch {
  0%, 100% { text-shadow: none; transform: none; }
  18% { text-shadow: -2px 0 var(--signal), 2px 0 var(--accent-ice); transform: translateX(1px) skewX(-4deg); }
  38% { text-shadow: 2px -1px var(--signal), -2px 1px var(--accent-ice); transform: translateX(-1px); }
  58% { text-shadow: -1.5px 0 var(--accent-ice), 1.5px 0 var(--signal); transform: translateX(1px) skewX(3deg); }
  72% { text-shadow: none; transform: none; }
}
.main-nav a:hover { animation: nav-glitch 0.4s steps(1) 1; }

/* --- Signal sweep across primary buttons on hover --- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -45%;
  width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-22deg) translateX(0);
  transition: transform 0.05s;
  pointer-events: none;
}
.btn-primary:hover::after { transform: skewX(-22deg) translateX(520%); transition: transform 0.55s var(--ease); }

/* --- Server rows: slash bar slides in on hover --- */
.sb-row { position: relative; }
.sb-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  background: linear-gradient(180deg, var(--slash-1), var(--slash-2));
  transform: scaleY(0) skewX(-14deg);
  transform-origin: top;
  transition: transform 0.18s var(--ease);
}
.sb-row:hover::before { transform: scaleY(1) skewX(-14deg); }

/* --- Scroll reveal: transform-only (content is ALWAYS visible) --- */
.rv { transform: translateY(26px); transition: transform 0.7s var(--ease); }
.rv.rv-in { transform: none; }

/* --- Card lift on hover --- */
.exp-card, .benefit-card, .follow-card, .sb-feat-card {
  transition: transform 0.25s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.exp-card:hover, .benefit-card:hover, .follow-card:hover { transform: translateY(-4px); }

/* --- Live dots breathe --- */
@keyframes dot-breathe { 50% { opacity: 0.45; } }
.live-dot { animation: marker-pulse 2s ease-in-out infinite, dot-breathe 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .page-hero-inner > *, .page-hero .section-inner > *,
  .hero-title-accent, .main-nav a:hover { animation: none !important; }
  .rv { transform: none; transition: none; }
  .btn-primary::after { display: none; }
}

/* ============================================================
   V9 — "Route 01 Precision" logotype + white as an active voice
   ============================================================ */

/* Wordmark: heavy white logotype, // as gradient signal bars (not glyphs).
   The boxed icon retires from the header — the type IS the mark. */
.site-header .wordmark-glyph { display: none; }
.wordmark-text {
  font-family: "Orbitron", var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
}
.wordmark-slash {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 7px 0 6px;
}
.wordmark-slash .ws-1,
.wordmark-slash .ws-2 {
  display: block;
  width: 5px;
  height: 16px;
  border-radius: 1px;
  font-size: 0;
  color: transparent;
  transform: skewX(-19deg);
}
.wordmark-slash .ws-1 { background: var(--slash-1); }
.wordmark-slash .ws-2 { background: var(--slash-2); }
.site-footer .wordmark-glyph { display: none; }
.site-footer .wordmark-text { font-size: 15px; }
.site-footer .wordmark-slash .ws-1,
.site-footer .wordmark-slash .ws-2 { height: 14px; width: 4.5px; }

/* White as an active UI voice — the monochrome side of the brand */
.btn-light {
  background: var(--text);
  color: var(--void);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  font-weight: 600;
}
.btn-light:hover { background: #ffffff; }
.btn-light:focus-visible { clip-path: none; }

/* ============================================================
   V10 — light zones: the white application side of the brand
   (dark = play the game, light = build the platform)
   ============================================================ */

.light-zone {
  /* local token flip — every nested component adapts automatically */
  --text: #0c1524;
  --text-rgb: 12, 21, 36;
  --text-dim: #4a586e;
  --text-faint: rgba(74, 88, 110, 0.7);
  --line: rgba(13, 22, 36, 0.12);
  --line-strong: rgba(13, 22, 36, 0.24);
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #e4ebf3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f5f8fb, #e9eff5);
  color: var(--text);
}

section.section.light-zone {
  padding: clamp(72px, 9vw, 110px) 0;
  margin-top: var(--section-gap);
}

/* the cyan // corner tile from the brand board */
.lz-corner {
  position: absolute;
  right: -16px;
  bottom: -12px;
  width: 118px;
  height: 66px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent)));
  transform: skewX(-18deg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.lz-corner i {
  display: block;
  width: 7px;
  height: 26px;
  border-radius: 1px;
  background: #ffffff;
}

/* the players band sits flush against the hero — a hard light cut at the fold */
#play.light-zone { margin-top: 0; }

/* overlays sitting on imagery keep their dark-context colors */
.light-zone .create-visual-chip { color: #f2f6f8; }
.light-zone .feature-visual-caption p { color: #f2f6f8; }
.light-zone .feature-visual-caption .eyebrow { color: rgba(242, 246, 248, 0.85); }
.light-zone .exp-card { color: #f2f6f8; }

/* inside a light zone, the white button flips to the dark ink version */
.light-zone .btn-light { background: #0c1524; color: #f2f6f8; }
.light-zone .btn-light:hover { background: #16233a; }
/* scanline-free, glow-free: light zones are clean paper */
.light-zone .section-title::after { border-left-color: var(--accent); border-right-color: var(--accent-deep, var(--accent)); }

/* medium light band (create page docs CTA) */
.deeper-band.light-zone {
  border: 0;
  background: linear-gradient(180deg, #f5f8fb, #e9eff5);
  padding-right: clamp(80px, 10vw, 150px);
}

/* ============================================================
   V11 — ambient signal: drifting neon, scanner sweeps, live lines
   (transform/opacity only — GPU-composited, reduced-motion gated)
   ============================================================ */

/* Drifting neon glows — distant city light breathing through the dark.
   PERF: softness is baked into the gradient (no filter: blur), normal alpha
   blending (no mix-blend-mode), and the layer is promoted once via
   will-change so frames are pure composited transforms. */
.amb-glow {
  position: absolute;
  width: clamp(320px, 42vw, 680px);
  height: clamp(320px, 42vw, 680px);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: amb-drift 24s ease-in-out infinite alternate;
}
.amb-cyan {
  top: -12%;
  right: 2%;
  background: radial-gradient(circle,
    rgba(34, 216, 226, 0.26) 0%,
    rgba(34, 216, 226, 0.13) 32%,
    rgba(34, 216, 226, 0.05) 52%,
    transparent 70%);
}
.amb-warm {
  bottom: -18%;
  left: -8%;
  background: radial-gradient(circle,
    rgba(255, 89, 100, 0.18) 0%,
    rgba(255, 89, 100, 0.09) 32%,
    rgba(255, 89, 100, 0.035) 52%,
    transparent 70%);
  animation-duration: 30s;
  animation-delay: -11s;
}
.amb-slow { animation-duration: 34s; top: -6%; right: 10%; }
@keyframes amb-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.12; }
  45% { opacity: 0.22; }
  100% { transform: translate3d(-7vw, 5vh, 0) scale(1.18); opacity: 0.14; }
}

/* Scanner sweep — a thin signal line crossing the cinematic zones */
.amb-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 1; /* above the dark veil, below the content */
  background: linear-gradient(90deg,
    transparent,
    rgba(112, 243, 245, 0.25) 30%,
    rgba(34, 216, 226, 0.5) 50%,
    rgba(112, 243, 245, 0.25) 70%,
    transparent);
  box-shadow: 0 0 14px rgba(34, 216, 226, 0.3);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: amb-scan 11s linear infinite 2.5s;
}
@keyframes amb-scan {
  0% { transform: translateY(-4px); opacity: 0; }
  4% { opacity: 0.4; }
  40% { opacity: 0.4; }
  46% { transform: translateY(96vh); opacity: 0; }
  100% { transform: translateY(96vh); opacity: 0; }
}

/* Live hairlines — a light pulse traveling along the hero facts rule */
.hero-facts {
  position: relative;
  overflow: hidden;
}
.hero-facts::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 243, 245, 0.8), rgba(34, 216, 226, 0.6), transparent);
  transform: translateX(-240px);
  animation: line-run 7s linear infinite 1s;
  pointer-events: none;
}
@keyframes line-run {
  0% { transform: translateX(-240px); }
  55%, 100% { transform: translateX(120vw); }
}

/* Same pulse on the server-list column rule */
.sb-col-head { position: relative; overflow: hidden; }
.sb-col-main .sb-col-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 243, 245, 0.7), rgba(34, 216, 226, 0.5), transparent);
  transform: translateX(-200px);
  animation: line-run 9s linear infinite 2s;
  pointer-events: none;
}

/* The dual-signal marks breathe faintly (opacity only — composited) */
.section-title::after,
.page-title::after,
.finale-title::after {
  animation: sig-breathe 4.5s ease-in-out infinite;
}
@keyframes sig-breathe {
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .amb-glow, .amb-scan, .hero-facts::before,
  .sb-col-main .sb-col-head::after,
  .section-title::after, .page-title::after, .finale-title::after {
    animation: none !important;
  }
  .amb-scan { opacity: 0; }
}

/* ============================================================
   V12 — drawn logotype (custom vector letterforms, not a font)
   Chamfered O, angular N, blade-legged 7s; // as true signal bars.
   ============================================================ */

.logotype {
  display: block;
  height: 19px;
  width: auto;
}
.site-footer .logotype { height: 14px; }
.logotype .lt-s1 { fill: var(--slash-1); }
.logotype .lt-s2 { fill: var(--slash-2); }

/* hover: the two channels light up in sequence — a signal passing through */
.logotype .lt-s1,
.logotype .lt-s2 { transition: fill 0.16s var(--ease); }
.wordmark:hover .lt-s1 { fill: #d9feff; transition-delay: 0s; }
.wordmark:hover .lt-s2 { fill: #9ef6fa; transition-delay: 0.13s; }

/* ============================================================
   V13 — the // mark unified: every branded slash prefix uses the
   logotype's dual-signal bars (Ice / Electric), not text glyphs
   ============================================================ */

.eyebrow-slash {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 9px;
  font-size: 0;               /* hides the "//" text; bars replace it */
  vertical-align: -1px;
}
.eyebrow-slash::before,
.eyebrow-slash::after {
  content: "";
  width: 4px;
  height: 11px;
  border-radius: 0.5px;
  transform: skewX(-19deg);
  transition: transform 0.22s var(--ease);
}
.eyebrow-slash::before { background: var(--slash-1); }
.eyebrow-slash::after { background: var(--slash-2); }

/* contextual scale */
.docs-title .eyebrow-slash { gap: 4px; margin-right: 12px; vertical-align: -2px; }
.docs-title .eyebrow-slash::before,
.docs-title .eyebrow-slash::after { width: 6px; height: 19px; }
.sv-h2 .eyebrow-slash { vertical-align: -1px; }
.sv-h2 .eyebrow-slash::before,
.sv-h2 .eyebrow-slash::after { width: 4.5px; height: 12px; }
.theme-tool-title .eyebrow-slash::before,
.theme-tool-title .eyebrow-slash::after { width: 3px; height: 8px; }
.exp-tag .eyebrow-slash { margin-right: 7px; }
.exp-tag .eyebrow-slash::before,
.exp-tag .eyebrow-slash::after { width: 3.5px; height: 10px; }
.sb-feat-mode .eyebrow-slash { margin-right: 6px; gap: 2.5px; }
.sb-feat-mode .eyebrow-slash::before,
.sb-feat-mode .eyebrow-slash::after { width: 3px; height: 8.5px; }

/* channels advance on interactive hover — same language as the logo */
.exp-card:hover .eyebrow-slash::before,
.sb-feat-card:hover .eyebrow-slash::before { transform: skewX(-19deg) translateX(2px); }
.exp-card:hover .eyebrow-slash::after,
.sb-feat-card:hover .eyebrow-slash::after { transform: skewX(-19deg) translateX(4px); }

/* ============================================================
   V14 — brand kit page
   ============================================================ */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.brand-grid-4 { grid-template-columns: repeat(3, 1fr); }
.brand-grid-banners { grid-template-columns: repeat(2, 1fr); }

.brand-tile {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.brand-tile > img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  padding: 28px;
  box-sizing: border-box;
}
.brand-tile > img.bt-mark, .brand-tile > img.bt-icon { height: 190px; padding: 34px; }
.brand-tile > img.bt-favicon { height: 190px; padding: 66px; image-rendering: pixelated; }
.bt-banner > img { padding: 0; height: auto; object-fit: cover; }
.bt-dark > img { background: #080e19; }
.bt-light > img { background: linear-gradient(180deg, #f5f8fb, #e9eff5); }

.brand-tile figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.bt-note {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.bt-links {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.bt-links a { color: var(--accent); text-decoration: none; padding: 2px 0; }
.bt-links a:hover { text-decoration: underline; }

.brand-note {
  margin-top: 34px;
  font-size: 13.5px;
  color: var(--text-dim);
  max-width: 760px;
  line-height: 1.7;
}
.brand-note code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

@media (max-width: 900px) {
  .brand-grid, .brand-grid-4, .brand-grid-banners { grid-template-columns: 1fr; }
}