/* ============================================================
   Gray Space Parallel — site styles
   Dark tactical theme. Accent language matches the GSP UI:
   cyan = peering/primary, amber = impaired/edge, indigo = satcom.
   ============================================================ */

:root {
  --bg: #05080f;
  --bg-2: #070c16;
  --panel: #0a1220;
  --panel-2: #0d1626;
  --line: rgba(148, 163, 184, 0.14);
  --line-strong: rgba(148, 163, 184, 0.28);
  --text: #e7edf6;
  --muted: #94a3b8;
  --dim: #64748b;
  --cyan: #22d3ee;
  --cyan-dim: rgba(34, 211, 238, 0.14);
  --amber: #fbbf24;
  --amber-dim: rgba(251, 191, 36, 0.12);
  --indigo: #818cf8;
  --indigo-dim: rgba(129, 140, 248, 0.14);
  --green: #34d399;
  --red: #f87171;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --maxw: 1180px;
  --radius: 12px;
}

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

html { scroll-behavior: smooth; }

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

::selection { background: rgba(34, 211, 238, 0.25); }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Grid and flex items default to min-width:auto, which resolves to their
   min-content width. A <pre> inside one contributes its longest line, so the
   track refuses to shrink and drags the whole page wider than the phone --
   which is what made the layout viewport 611px on a 390px screen, and why
   sections appeared to alternate between correct and zoomed-out. Putting
   overflow on the <pre> is not enough: the rule applies to the grid item
   itself, and here that is the wrapper several levels above. */
.split > *,
.contact-grid > *,
.grid > *,
.layer > *,
.stat-grid > *,
.demo-body > *,
.demo-readout > * { min-width: 0; }

/* ---------- top navigation ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 8, 15, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 28px;
  display: flex; align-items: center; gap: 34px;
  /* lifts the whole bar above .nav-scrim, which is its sibling inside .nav */
  position: relative; z-index: 2;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; letter-spacing: 0.02em; color: var(--text);
  font-size: 16px; white-space: nowrap;
  min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.brand img.logo-h {
  height: clamp(54px, 8.5vw, 104px); display: block; max-width: 100%;
  filter: brightness(1.18) drop-shadow(0 0 10px rgba(148, 163, 184, 0.22));
}
.brand img.logo-f {
  height: 46px; display: block; opacity: 0.95;
  filter: brightness(1.18);
}
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; row-gap: 2px; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--muted); font-size: 14.5px; font-weight: 500;
  padding: 8px 13px; border-radius: 8px; transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: rgba(148,163,184,0.08); text-decoration: none; }
.nav-links a.active { color: var(--cyan); }
.nav-links a.nav-cta {
  color: #04141a; background: var(--cyan); font-weight: 600; margin-left: 10px;
}
.nav-links a.nav-cta:hover { background: #67e8f9; color: #04141a; }

/* ---------- mobile drawer ----------
   The same .nav-links list is the desktop row and the mobile drawer, so link
   markup is never duplicated. Below --nav-bp the row becomes a right-hand
   sheet toggled by .nav-burger; above it, burger and scrim are display:none
   and every drawer property is inert. */

.nav-burger {
  display: none;
  width: 46px; height: 46px; flex: none;
  margin-left: auto;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  cursor: pointer; color: var(--text);
  transition: border-color .15s, background .15s;
}
/* The drawer is a sibling inside .nav-inner and is wide enough to reach under
   the burger, so the burger has to out-rank it or its X close affordance is
   covered and untappable. */
.nav-burger { position: relative; z-index: 3; }
.nav-burger:hover { border-color: var(--cyan); background: rgba(34,211,238,0.06); }
.nav-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .16s ease;
}
.nav-scrim { display: none; }

@media (max-width: 900px) {
  /* .nav sets backdrop-filter, which would make it the containing block for its
     position:fixed descendants — the drawer would then size against the nav bar
     instead of the viewport. Drop it here and use an opaque bar instead. The
     scrim and drawer both live inside .nav because its own z-index opens a
     stacking context that a sibling scrim could never sit under. */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(5, 8, 15, 0.96);
  }
  .nav-burger { display: flex; }

  .nav-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 1;
    background: rgba(2, 5, 11, 0.66);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
    width: min(86vw, 340px);
    margin-left: 0;
    display: flex; flex-direction: column; flex-wrap: nowrap;
    justify-content: flex-start; align-items: stretch;
    gap: 2px;
    padding: 84px 18px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel);
    border-left: 1px solid var(--line-strong);
    box-shadow: -22px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.32,.72,.3,1), visibility 0s linear .26s;
  }
  .nav-links a {
    font-size: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    white-space: normal;
  }
  .nav-links a.nav-cta {
    margin: 10px 0 0; padding: 15px 16px; text-align: center;
  }

  /* open state */
  .nav-open .nav-links {
    transform: none; visibility: visible;
    transition: transform .26s cubic-bezier(.32,.72,.3,1), visibility 0s;
  }
  .nav-open .nav-scrim { opacity: 1; visibility: visible; }
  .nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-scrim, .nav-burger span { transition: none; }
}

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

.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#globe-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
  /* part of the deck's globe treatment, carried over with the renderer */
  filter: brightness(1.18) contrast(1.24) saturate(1.12);
}
.hero-fade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(5,8,15,0.10) 30%, rgba(5,8,15,0.12) 62%, var(--bg) 96%),
    radial-gradient(ellipse 90% 70% at 28% 46%, rgba(5,8,15,0) 40%, rgba(5,8,15,0.35) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: auto; padding: 180px 28px 60px;
  width: 100%;
}
.hero-box { max-width: 640px; }

.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--cyan); display: inline-block;
}

h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.06; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 24px;
}
h1 .h-accent { color: var(--cyan); }

.hero-sub {
  font-size: 19px; color: var(--muted); line-height: 1.6;
  margin-bottom: 36px; max-width: 560px;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 9px;
  font-size: 15.5px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--cyan); color: #04141a; }
.btn-primary:hover { background: #67e8f9; }
.btn-ghost {
  background: rgba(148,163,184,0.06); color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: rgba(148,163,184,0.5); background: rgba(148,163,184,0.10); }

.hero-legend {
  position: absolute; z-index: 2; right: 32px; top: 150px;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  display: grid; gap: 7px; letter-spacing: 0.06em;
}
.hero-legend span { display: flex; align-items: center; gap: 9px; }
.hero-legend i {
  width: 18px; height: 2px; border-radius: 2px; display: inline-block;
}

.scroll-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; animation: hint-bob 2.6s ease-in-out infinite;
}
@keyframes hint-bob { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,6px);} }

/* ---------- stat strip ---------- */

.stat-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
/* stat strip floating over the hero globe */
.hero .stat-strip {
  position: relative; z-index: 2;
  background: rgba(7, 12, 22, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: none;
}
.stat-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 30px 26px; border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; }
.stat b {
  display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.stat b em { font-style: normal; color: var(--cyan); }
.stat span { font-size: 13.5px; color: var(--muted); line-height: 1.45; display: block; margin-top: 5px; }

/* ---------- sections ---------- */

section.block { padding: 96px 0; }
section.block.tight { padding: 72px 0; }
section.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-head.center .kicker::before { display: none; }

h2 {
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px;
}
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.lede { font-size: 17.5px; color: var(--muted); }
.lede strong { color: var(--text); }

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

.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
  transition: border-color .2s, transform .2s;
  position: relative; overflow: hidden;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card .icon {
  width: 40px; height: 40px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; background: var(--cyan-dim); color: var(--cyan);
}
.card .icon.amber { background: var(--amber-dim); color: var(--amber); }
.card .icon.indigo { background: var(--indigo-dim); color: var(--indigo); }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 14.8px; color: var(--muted); }
.card p code { color: var(--text); }
.card .tag {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim);
}

/* mission cards */
.card.mission { padding: 30px 28px; }
.card.mission .m-num {
  font-family: var(--mono); font-size: 12px; color: var(--cyan);
  letter-spacing: 0.14em; margin-bottom: 14px; display: block;
}
.card.mission ul { margin: 14px 0 0; padding-left: 18px; }
.card.mission li { font-size: 14.5px; color: var(--muted); margin-bottom: 6px; }

/* ---------- split rows ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .kicker { margin-bottom: 14px; }
.split h2 { font-size: clamp(24px, 2.8vw, 32px); }
.split p { color: var(--muted); margin-bottom: 14px; font-size: 15.5px; }
.split p strong { color: var(--text); }

/* ---------- code / terminal ---------- */

.term {
  background: #060a12; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  font-family: var(--mono); font-size: 13.5px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.8);
}
.term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: rgba(148,163,184,0.04);
}
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(148,163,184,0.22); }
.term-bar span { margin-left: 8px; font-size: 11.5px; color: var(--dim); letter-spacing: 0.08em; }
.term pre {
  padding: 18px 20px; overflow-x: auto; line-height: 1.75; color: #c3cede;
}
.term .p { color: var(--cyan); }
.term .c { color: var(--dim); }
.term .g { color: var(--green); }
.term .y { color: var(--amber); }
.term .k { color: var(--indigo); }

code {
  font-family: var(--mono); font-size: 0.88em;
  background: rgba(148,163,184,0.10); border-radius: 5px; padding: 2px 6px;
}

/* ---------- layer stack diagram ---------- */

.layers { display: grid; gap: 10px; counter-reset: layer; }
.layer {
  display: grid; grid-template-columns: 190px 1fr; gap: 24px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 26px;
  align-items: center; position: relative;
  transition: border-color .2s;
}
.layer:hover { border-color: var(--line-strong); }
.layer .l-cmd {
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--cyan);
  white-space: nowrap;
}
.layer .l-cmd small { display: block; font-weight: 400; color: var(--dim); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.layer p { font-size: 14.5px; color: var(--muted); }
.layer p strong { color: var(--text); }
.layer::before {
  counter-increment: layer; content: counter(layer, decimal-leading-zero);
  position: absolute; top: 14px; right: 18px;
  font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.1em;
}

/* ---------- inline diagrams ---------- */

.diagram {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 28px; text-align: center;
  overflow-x: auto;
}
.diagram svg { max-width: 100%; height: auto; }
.diagram-caption { font-size: 13px; color: var(--dim); margin-top: 14px; font-family: var(--mono); letter-spacing: 0.04em; }

/* ---------- tables ---------- */

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--panel); }
.tbl th {
  text-align: left; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim);
  padding: 14px 18px; border-bottom: 1px solid var(--line-strong);
  background: rgba(148,163,184,0.04); white-space: nowrap;
}
.tbl td { padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.tbl td code { white-space: nowrap; }
.pill {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  padding: 3px 9px; border-radius: 99px; letter-spacing: 0.05em;
}
.pill.cyan { background: var(--cyan-dim); color: var(--cyan); }
.pill.amber { background: var(--amber-dim); color: var(--amber); }
.pill.indigo { background: var(--indigo-dim); color: var(--indigo); }
.pill.green { background: rgba(52,211,153,0.12); color: var(--green); }

/* ---------- page hero (interior pages) ---------- */

.page-hero {
  padding: 210px 0 64px;
  background:
    radial-gradient(ellipse 60% 55% at 68% -10%, rgba(34,211,238,0.09), transparent 65%),
    radial-gradient(ellipse 45% 45% at 18% 0%, rgba(129,140,248,0.07), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 18px; }
.page-hero .lede { max-width: 700px; font-size: 18px; }

/* stacked logo accent on interior page heroes */
.page-hero .hero-logo {
  position: absolute; right: 28px; top: -18px;
  height: 180px; opacity: 0.9; pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, 0.12));
}
@media (max-width: 980px) { .page-hero .hero-logo { display: none; } }

/* ---------- demo playground ---------- */

.demo-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.demo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  background: rgba(148,163,184,0.04); flex-wrap: wrap;
}
.demo-head h3 { font-size: 16px; }
.demo-head .status {
  font-family: var(--mono); font-size: 12px; color: var(--green);
  display: flex; align-items: center; gap: 8px;
}
.demo-head .status i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 0%,100% {opacity:1;} 50% {opacity:0.35;} }

.demo-body { display: grid; grid-template-columns: 300px 1fr; }
.demo-controls { padding: 22px; border-right: 1px solid var(--line); }
.demo-stage { position: relative; min-height: 420px; }
#link-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }

.profile-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em;
  padding: 6px 11px; border-radius: 7px; cursor: pointer;
  background: rgba(148,163,184,0.07); color: var(--muted);
  border: 1px solid var(--line); transition: all .15s;
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.active { background: var(--cyan-dim); color: var(--cyan); border-color: rgba(34,211,238,0.45); }
.chip.dynamic.active { background: var(--indigo-dim); color: var(--indigo); border-color: rgba(129,140,248,0.5); }

.ctl { margin-bottom: 18px; }
.ctl label {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim); margin-bottom: 8px;
}
.ctl label output { color: var(--cyan); text-transform: none; letter-spacing: 0.02em; }
input[type="range"] {
  width: 100%; appearance: none; -webkit-appearance: none; height: 4px;
  background: rgba(148,163,184,0.18); border-radius: 4px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cyan); border: 3px solid #06121a; box-shadow: 0 0 0 1px rgba(34,211,238,0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); border: none;
}

.demo-readout {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); background: rgba(148,163,184,0.03);
}
.demo-readout .ro { padding: 14px 20px; border-left: 1px solid var(--line); }
.demo-readout .ro:first-child { border-left: none; }
.demo-readout b { font-family: var(--mono); font-size: 19px; font-weight: 600; display: block; color: var(--text); font-variant-numeric: tabular-nums; }
.demo-readout b.warn { color: var(--amber); }
.demo-readout b.bad { color: var(--red); }
.demo-readout span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

.event-log {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  padding: 8px 22px 12px; min-height: 30px; letter-spacing: 0.02em;
}
.event-log .ev-warn { color: var(--amber); }

/* packet journey */
.journey { position: relative; }
#journey-canvas { display: block; width: 100%; height: 300px; }
.journey-caption {
  min-height: 84px; padding: 18px 24px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px;
}
.journey-caption .jc-stage {
  font-family: var(--mono); font-size: 11px; color: var(--cyan);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.journey-caption p { font-size: 14px; color: var(--muted); }
.journey-nav { display: flex; gap: 10px; padding: 0 24px 20px; }
.journey-nav .btn { padding: 9px 18px; font-size: 13.5px; }

/* video placeholders */
.video-slot {
  aspect-ratio: 16/9; border-radius: var(--radius);
  border: 1px dashed var(--line-strong); background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--dim); transition: border-color .2s;
}
.video-slot:hover { border-color: rgba(148,163,184,0.5); }
.video-slot .vp-play {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.video-slot b { color: var(--muted); font-size: 15px; font-weight: 600; }
.video-slot span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  display: block; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 12px 14px; color: var(--text);
  font-family: var(--sans); font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.12);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--dim); }

.contact-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin-bottom: 16px;
}
.contact-card h3 { margin-bottom: 8px; font-size: 17px; }
.contact-card p { font-size: 14.5px; color: var(--muted); }
.contact-card .mono-line { font-family: var(--mono); font-size: 14px; color: var(--cyan); margin-top: 10px; display: block; }

/* ---------- CTA band ---------- */

.cta-band {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 55% 90% at 50% 120%, rgba(34,211,238,0.13), transparent 70%),
    var(--bg-2);
  padding: 88px 0; text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 32px; }
.cta-band .cta-row { justify-content: center; }

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

footer {
  border-top: 1px solid var(--line); background: var(--bg);
  padding: 52px 0 40px;
}
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand p { font-size: 13.5px; color: var(--dim); max-width: 320px; margin-top: 12px; }
.foot-links { display: flex; gap: 64px; }
.foot-links h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 14px; font-weight: 600;
}
.foot-links a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 9px; }
.foot-links a:hover { color: var(--text); text-decoration: none; }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.06em;
}

/* ---------- reveal animation ---------- */

.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
}

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

@media (max-width: 980px) {
  .grid.c3 { grid-template-columns: 1fr 1fr; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: none; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: none; }
  .demo-body { grid-template-columns: 1fr; }
  .demo-controls { border-right: none; border-bottom: 1px solid var(--line); }
  .hero-legend { display: none; }
}

@media (max-width: 700px) {
  .grid.c2, .grid.c3 { grid-template-columns: 1fr; }
  .nav-inner { padding: 6px 16px; gap: 12px; }
  .hero-content { padding-top: 120px; }
  .page-hero { padding-top: 140px; }
  .layer { grid-template-columns: 1fr; gap: 8px; }
  .form-row { grid-template-columns: 1fr; }
  .demo-readout { grid-template-columns: 1fr 1fr; }
  .demo-readout .ro { border-top: 1px solid var(--line); }
  .demo-readout .ro:nth-child(-n+2) { border-top: none; }
  .demo-readout .ro:nth-child(3) { border-left: none; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .nav-inner { padding: 5px 12px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat:nth-child(n) { border-left: none; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: none; }
  .demo-readout { grid-template-columns: 1fr; }
  .demo-readout .ro:nth-child(n) { border-left: none; border-top: 1px solid var(--line); }
  .demo-readout .ro:first-child { border-top: none; }
}