/* ============================================================================
   RadioARP — landing styles
   Aesthetic: a CAD / dispatch terminal. Near-black, hairline grid, monospaced
   data labels, one signal accent (amber) + an "on-air" green. No gradient soup.
   ============================================================================ */

:root {
  --bg:        #090a0c;
  --bg-elev:   #0e1014;
  --panel:     rgba(255,255,255,.025);
  --panel-2:   rgba(255,255,255,.04);
  --ink:       #eef0f3;
  --muted:     #9b9da7;
  --faint:     #5f626d;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);

  --amber:     #2fc46a;
  --amber-ink: #04160b;
  --amber-soft:rgba(47,196,106,.12);
  --live:      #4ade80;
  --police:    #5b93d6;
  --fire:      #ff6a4d;
  --dot:       #2dd4bf;

  /* radius scale — tight + deliberate to match the CAD / dispatch terminal look.
     Big frames stay crisp; nested controls step down so corners never look soft. */
  --r-1:       3px;   /* chips, code, tooltips, micro-tags */
  --r-2:       5px;   /* buttons, nav links, keys, in-app controls */
  --r-3:       7px;   /* cards, tiles, stats, info panels */
  --r-4:       10px;  /* large frames: app window, map, modal, lightbox */
  --radius:    var(--r-3);
  --maxw:      1200px;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display:'Space Grotesk', var(--sans);
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  scroll-padding-top: 90px;
  /* faint dispatch grid + vignette */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
body::before {
  /* fade the grid out toward the center/bottom so it reads as texture, not noise */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 30%, var(--bg) 78%),
    radial-gradient(80% 50% at 100% 0%, rgba(47,196,106,.05), transparent 60%);
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
h1,h2,h3,h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
p { margin: 0; }
::selection { background: rgba(47,196,106,.28); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

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

/* ---- mono micro-labels ("kickers") -------------------------------------- */
.kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber); display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.kicker.no-rule::before { display: none; }
.idx { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .1em; }

.mono { font-family: var(--mono); }
.accent { color: var(--amber); }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-2); border: 1px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: transform .25s var(--ease), background .25s, border-color .25s, color .2s;
  white-space: nowrap; background: transparent; color: var(--ink); will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--amber); color: var(--amber-ink); }
.btn-primary:hover { background: #3ed47e; }
.btn-ghost { border-color: var(--line); background: var(--panel-2); color: var(--ink); }
.btn-ghost:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.btn-lg { padding: 16px 28px; font-size: 15.5px; }

/* magnetic wrapper keeps layout stable while JS nudges the inner button */
.mag { display: inline-block; }

/* ============================================================================
   NAV
   ============================================================================ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
header.scrolled {
  background: rgba(9,10,12,.78); border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.brand .mark { width: 32px; height: 32px; flex: none; }
.brand .arp { color: var(--amber); }
.nav-mid { display: flex; align-items: center; gap: 4px; }
.nav-mid a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 8px 14px; border-radius: var(--r-2); transition: color .2s, background .2s; position: relative;
}
.nav-mid a:hover, .nav-mid a.active { color: var(--ink); }
.nav-mid a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--amber);
}
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px; }
.sound-toggle { width: 38px; height: 38px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s, background .2s; flex: none; }
.sound-toggle:hover { color: var(--ink); border-color: rgba(255,255,255,.2); }
.sound-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sound-toggle svg { width: 17px; height: 17px; }
.sound-toggle .ic-off { display: none; }
.sound-toggle.muted { color: var(--faint); }
.sound-toggle.muted .ic-on { display: none; }
.sound-toggle.muted .ic-off { display: inline; }

/* logo signal-pulse on hover */
.brand .mark circle { transform-box: fill-box; transform-origin: center; }
.brand:hover .mark g path { animation: sigPulse 1.3s ease-in-out infinite; }
.brand:hover .mark g path:nth-of-type(2) { animation-delay: .22s; }
.brand:hover .mark circle { animation: sigDot 1.3s ease-in-out infinite; }
@keyframes sigPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes sigDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }

/* scroll progress bar under the nav */
.scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; z-index: 2;
  background: linear-gradient(90deg, var(--live), var(--amber)); box-shadow: 0 0 8px rgba(74,222,128,.5); }

/* ============================================================================
   HERO
   ============================================================================ */
.hero { position: relative; padding: 168px 0 96px; overflow: hidden; }
#wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: 0; pointer-events: none; opacity: .9; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }

.status-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.onair {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--live);
  padding: 6px 12px; border: 1px solid rgba(51,210,126,.3); border-radius: var(--r-2); background: rgba(51,210,126,.06);
}
.onair .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(51,210,126,.6); }
.unit-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

h1.hero-h {
  font-size: clamp(38px, 5.6vw, 66px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600;
}
h1.hero-h .line { display: block; overflow: hidden; }
h1.hero-h .line > span { display: block; }
.hero-sub { margin-top: 26px; font-size: clamp(15.5px, 1.35vw, 18px); color: var(--muted); max-width: 520px; }
.hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-cta .hint { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .04em; }

/* ---- CAD terminal mock --------------------------------------------------- */
.cad-stage { position: relative; }
.cad-stage::before {
  content: ""; position: absolute; inset: -8% -4% -12% -4%; z-index: 0; filter: blur(60px); opacity: .5;
  background: radial-gradient(45% 50% at 70% 20%, rgba(47,196,106,.30), transparent 70%),
              radial-gradient(45% 50% at 25% 80%, rgba(91,147,214,.28), transparent 72%);
}
/* HUD registration brackets — four corner L's that frame the window. Reads as a
   dispatch/CAD instrument bezel and makes the sharp corners look deliberate. */
.cad-stage::after {
  content: ""; position: absolute; inset: -9px; z-index: 2; pointer-events: none;
  --bw: 1.5px; --bl: 20px; --bc: rgba(47,196,106,.55);
  background:
    linear-gradient(var(--bc),var(--bc)) 0 0      / var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bc),var(--bc)) 0 0      / var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--bc),var(--bc)) 100% 0   / var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bc),var(--bc)) 100% 0   / var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--bc),var(--bc)) 0 100%   / var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bc),var(--bc)) 0 100%   / var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--bc),var(--bc)) 100% 100%/ var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bc),var(--bc)) 100% 100%/ var(--bw) var(--bl) no-repeat;
}
.appwin {
  position: relative; z-index: 1; border-radius: var(--r-4); overflow: hidden;
  background: #0c0e12; border: 1px solid var(--line);
  box-shadow: 0 40px 90px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}
.aw-title { display: flex; align-items: center; height: 36px; padding: 0 13px; border-bottom: 1px solid var(--line-soft); background: #0a0b0e; }
.aw-brand { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: #d3d4da; }
.aw-gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px rgba(51,210,126,.8); }
.aw-ctrls { margin-left: auto; display: flex; gap: 14px; color: #44464e; }
.aw-ctrls svg { width: 12px; height: 12px; }

.aw-body { display: grid; grid-template-columns: 150px 1fr; min-height: 338px; }
.aw-side { border-right: 1px solid var(--line-soft); padding: 13px 9px; background: #0a0b0e; }
.aw-cat { font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--faint); font-weight: 600; margin: 14px 6px 8px; }
.aw-cat:first-child { margin-top: 0; }
.aw-ch { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-2); color: #9a9ca6; font-size: 12.5px; }
.aw-ch .aw-ico { width: 14px; height: 14px; opacity: .5; flex: none; }
.aw-ch .aw-n { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.aw-ch[data-roster] { cursor: pointer; transition: background .15s, color .15s; }
.aw-ch[data-roster]:hover { background: rgba(255,255,255,.05); color: #d3d4da; }
.aw-ch.active { background: rgba(255,255,255,.07); color: #fff; }
.aw-ch.active .aw-ico { opacity: 1; color: var(--live); }
.aw-users { display: block; }
.aw-user { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 16px; color: #8a8c96; font-size: 12px; }
.aw-av { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c1,#6366f1), var(--c2,#a855f7)); }
.aw-user.spk { color: #86efac; }
.aw-user.spk .aw-av { box-shadow: 0 0 0 2px rgba(51,210,126,.95), 0 0 11px rgba(51,210,126,.5); }
.aw-user .aw-mic { margin-left: auto; width: 13px; height: 13px; color: #6b6d76; flex: none; }

.aw-main { position: relative; display: flex; flex-direction: column; background: #07080a; }
.aw-map { position: relative; flex: 1; overflow: hidden; }
.aw-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .52; filter: saturate(.72) contrast(1.05); }
.aw-mapfade { position: absolute; inset: 0; background: radial-gradient(78% 78% at 50% 45%, transparent 32%, rgba(6,7,10,.72)); }
.aw-scan { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: linear-gradient(180deg, rgba(51,210,126,.09), transparent); }
.aw-maphud { position: absolute; top: 11px; left: 13px; right: 13px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.aw-live { display: inline-flex; align-items: center; gap: 6px; color: var(--live); }
.aw-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 6px var(--live); }

.blip { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); }
.blip.police { background: var(--police); box-shadow: 0 0 0 4px rgba(91,147,214,.16); }
.blip.fire   { background: var(--fire);   box-shadow: 0 0 0 4px rgba(255,106,77,.16); }
.blip.dot    { background: var(--dot);    box-shadow: 0 0 0 4px rgba(236,201,75,.16); }
.blip.me     { background: var(--live);   box-shadow: 0 0 0 4px rgba(51,210,126,.18); }
.blip.call   { background: var(--fire); }
.blip.call::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--fire);
  animation: ping 1.8s var(--ease) infinite;
}
@keyframes ping { 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(2.6);opacity:0} }

.aw-voicebar { display: flex; align-items: center; gap: 10px; height: 47px; padding: 0 13px; border-top: 1px solid var(--line-soft); background: #0b0d11; }
.aw-vdot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); flex: none; }
.aw-vname { font-size: 12.5px; font-weight: 600; color: #fff; }
.aw-vping { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.aw-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 15px; margin-left: 4px; transform-origin: bottom; transition: transform .22s var(--ease); }
.aw-eq.talking { transform: scaleY(1.4); }
.aw-eq.talking i { box-shadow: 0 0 6px rgba(74,222,128,.7); }
.aw-eq i { width: 2.5px; background: var(--live); border-radius: 1px; height: 30%; transition: background-color .2s; }
.aw-vbtns { margin-left: auto; display: flex; gap: 7px; }
.aw-vbtns i { width: 27px; height: 27px; border-radius: var(--r-2); display: grid; place-items: center; background: rgba(255,255,255,.05); color: #9a9ca6; }
.aw-vbtns i.leave { background: rgba(255,79,79,.12); color: #ff6b6b; }
.aw-vbtns i svg { width: 14px; height: 14px; }
/* interactive mic / deafen buttons (driven by main.js) */
.aw-vbtns i[role="button"] { cursor: pointer; transition: background .18s, color .18s; -webkit-tap-highlight-color: transparent; }
.aw-vbtns i[role="button"]:hover { background: rgba(255,255,255,.11); color: #fff; }
.aw-vbtns i[role="button"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.aw-vbtns i.is-off { position: relative; background: rgba(255,91,91,.16); color: #ff6b6b; }
.aw-vbtns i.is-off::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; border-radius: 1px;
  background: #ff6b6b; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 0 1.5px #0b0d11; }
/* muted / deafened → the audio graph goes red and drops (height set by main.js) */
.aw-voicebar.is-flat .aw-eq i { background: #ff5b5b; }
.aw-voicebar.is-flat .aw-eq.talking { transform: none; }
.aw-voicebar.is-flat .aw-vdot { background: #ff5b5b; box-shadow: 0 0 8px #ff5b5b; }
.aw-voicebar.is-flat .aw-vname { color: #cfd0d6; }
/* disconnected → collapse to an idle prompt */
.aw-vidle { display: none; font-size: 11.5px; color: var(--faint); }
.aw-voicebar.is-off .aw-vname, .aw-voicebar.is-off .aw-vping, .aw-voicebar.is-off .aw-eq, .aw-voicebar.is-off .aw-vbtns { display: none; }
.aw-voicebar.is-off .aw-vidle { display: inline; }
.aw-voicebar.is-off .aw-vdot { background: var(--faint); box-shadow: none; }

/* ============================================================================
   MARQUEE / STATS STRIP
   ============================================================================ */
.strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 30px 0; overflow: hidden; }
.marquee { display: flex; gap: 56px; width: max-content; will-change: transform; }
.marquee .item { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }
.marquee .item svg { width: 17px; height: 17px; opacity: .8; }
.marquee .item .sep { color: var(--faint); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; margin-top: 30px; }
.stat { background: var(--bg); padding: 26px 22px; }
.stat .n { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.02em; }
.stat .n .u { color: var(--amber); font-size: .6em; margin-left: 2px; }
.stat .l { margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* ============================================================================
   SECTION SCAFFOLD
   ============================================================================ */
.section { padding: 110px 0; position: relative; }
.section.bd { border-top: 1px solid var(--line-soft); }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; }
.shead .l { max-width: 640px; }
.shead h2 { font-size: clamp(28px, 4vw, 44px); margin-top: 16px; letter-spacing: -.025em; }
.shead p { margin-top: 16px; color: var(--muted); font-size: 16.5px; max-width: 560px; }
.shead .idx { white-space: nowrap; padding-bottom: 8px; }

/* ============================================================================
   MAP SHOWPIECE (real ER:LC image + expand)
   ============================================================================ */
.mapshow { position: relative; }
.mapcard {
  position: relative; border-radius: var(--r-4); overflow: hidden; border: 1px solid var(--line);
  background: #06070a; cursor: zoom-in; aspect-ratio: 16 / 8.4; will-change: transform;
}
.mapcard .mimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.78) contrast(1.06); }
.mapcard .mfade { position: absolute; inset: 0; background:
  radial-gradient(80% 80% at 50% 45%, transparent 45%, rgba(5,6,9,.7)),
  linear-gradient(0deg, rgba(5,6,9,.55), transparent 40%); }
.mapcard .mgrid { position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px; }
.mapcard .mlabel { position: absolute; top: 16px; left: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 10px; }
.mapcard .mlabel .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.mapcard .expand-hint { position: absolute; top: 16px; right: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 6px 11px; border-radius: var(--r-2); background: rgba(0,0,0,.3); transition: color .2s, border-color .2s; }
.mapcard:hover .expand-hint { color: var(--ink); border-color: rgba(255,255,255,.25); }

/* big blips on the showpiece */
.mapcard .blip { width: 12px; height: 12px; }
.mapcard .blip .tip {
  position: absolute; left: 50%; top: -8px; transform: translate(-50%,-100%); white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink);
  background: rgba(10,11,14,.92); border: 1px solid var(--line); padding: 3px 7px; border-radius: var(--r-1);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.mapcard .blip:hover .tip { opacity: 1; }

/* an info card that slides in on the showpiece */
.mapinfo {
  position: absolute; right: 18px; bottom: 18px; width: 230px; border-radius: var(--r-3);
  border: 1px solid rgba(255,106,77,.32); background: rgba(16,9,7,.86); backdrop-filter: blur(8px);
  padding: 14px 15px; font-size: 12.5px;
}
.mapinfo .h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fire); }
.mapinfo .b { margin-top: 8px; color: var(--ink); font-weight: 600; font-size: 14px; font-family: var(--display); }
.mapinfo .rows { margin-top: 10px; display: grid; gap: 5px; }
.mapinfo .rows div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.mapinfo .rows span { color: var(--ink); }

/* Lightbox: clicking the thumbnail opens this fixed overlay. The thumbnail
   itself never leaves the flow, so the page can't jump (scrollbar-gutter:stable
   keeps width steady when body overflow is locked). */
.map-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
  background: rgba(4,5,7,.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.map-lightbox.open { opacity: 1; visibility: visible; }
.ml-inner { position: relative; width: 100%; height: 100%; max-width: 1500px; border-radius: var(--r-4); overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); background: #06070a; box-shadow: 0 60px 120px -40px rgba(0,0,0,.9);
  transform: scale(.965); opacity: .5; transition: transform .4s var(--ease), opacity .4s; }
.map-lightbox.open .ml-inner { transform: none; opacity: 1; }
.ml-inner { display: flex; flex-direction: column; }

/* header bar — mirrors the in-app live map */
.ml-head { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); background: rgba(13,15,19,.7); flex: none; z-index: 3; }
.ml-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 14px; color: #fff; }
.ml-title svg { width: 17px; height: 17px; color: var(--live); }
.ml-count { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ml-count .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 7px var(--live); }
.ml-hint { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--faint); }
.ml-head .ml-close { width: 32px; height: 32px; border-radius: var(--r-2); }
.ml-close { display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--line); cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.ml-close svg { width: 16px; height: 16px; }
.ml-close:hover { color: var(--ink); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); }

/* map surface */
.ml-map { position: relative; flex: 1; overflow: hidden; }
.ml-map .mimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: saturate(.8) contrast(1.05); }
.ml-map .mfade { position: absolute; inset: 0; background: radial-gradient(85% 85% at 50% 45%, transparent 58%, rgba(5,6,9,.55)); }
.ml-map .mgrid { position: absolute; inset: 0; opacity: .26;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 58px 58px; }

/* rotating radar sweep for a "live" feel */
.ml-radar { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, rgba(74,222,128,.14) 350deg, rgba(74,222,128,.30) 360deg);
  border-radius: 50%; animation: radar 6s linear infinite; mix-blend-mode: screen; }
@keyframes radar { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* interactive markers (dot + callsign label) */
.ml-marker { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; }
.mk-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; transition: transform .18s var(--ease), box-shadow .18s; }
.mk-dot.police { background: var(--police); box-shadow: 0 0 10px rgba(91,147,214,.8); }
.mk-dot.fire   { background: var(--fire);   box-shadow: 0 0 10px rgba(255,106,77,.8); }
.mk-dot.dot    { background: var(--dot);     box-shadow: 0 0 10px rgba(45,212,191,.8); }
.mk-dot.me     { background: var(--live);    box-shadow: 0 0 10px rgba(74,222,128,.85); }
.mk-dot.call   { width: 26px; height: 26px; border-color: #fff; background: var(--fire); position: relative; display: grid; place-items: center; box-shadow: 0 0 14px rgba(255,106,77,.85); }
.mk-dot.call::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h16.9a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.mk-dot.call::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--fire); animation: ping 1.8s var(--ease) infinite; }
.mk-tag { font-family: var(--mono); font-size: 10px; font-weight: 500; color: #fff; background: rgba(0,0,0,.7); padding: 2px 6px; border-radius: var(--r-1); white-space: nowrap; line-height: 1; transition: background .18s; }
.ml-marker:hover { z-index: 5; }
.ml-marker:hover .mk-dot { transform: scale(1.35); }
.ml-marker:hover .mk-dot.call { transform: scale(1.18); }
.ml-marker:hover .mk-tag, .ml-marker:focus-visible .mk-tag { background: rgba(0,0,0,.92); }

/* hover detail card (screen-space inside the map) */
.ml-card { position: absolute; z-index: 8; width: 230px; border-radius: var(--r-3); border: 1px solid rgba(255,255,255,.14);
  background: rgba(13,15,19,.96); box-shadow: 0 24px 60px -24px rgba(0,0,0,.9); padding: 13px 14px; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.ml-card.show { opacity: 1; visibility: visible; transform: none; }
.mlc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.mlc-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid #fff; }
.mlc-dot.police { background: var(--police); } .mlc-dot.fire { background: var(--fire); }
.mlc-dot.dot { background: var(--dot); } .mlc-dot.me { background: var(--live); } .mlc-dot.call { background: var(--fire); }
.mlc-title { font-family: var(--display); font-weight: 600; font-size: 14px; color: #fff; }
.mlc-rows { margin: 0; display: grid; gap: 6px; }
.mlc-rows > div { display: flex; justify-content: space-between; gap: 14px; }
.mlc-rows dt { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.mlc-rows dd { margin: 0; font-size: 12.5px; color: var(--ink); text-align: right; }

/* ============================================================================
   FEATURES — bento grid
   ============================================================================ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; grid-auto-rows: minmax(190px, auto); }
.tile {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 24px; overflow: hidden; transition: border-color .3s, background .3s;
  display: flex; flex-direction: column; will-change: transform;
}
.tile:hover { border-color: rgba(255,255,255,.18); background: var(--panel-2); }

/* cursor spotlight on cards (--mx/--my set by main.js); tilt on tiles via GSAP */
.tile, .dl { --mx: 50%; --my: 50%; }
.tile::after, .dl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(74,222,128,.10), transparent 62%); opacity: 0; transition: opacity .3s; }
.tile:hover::after, .dl:hover::after { opacity: 1; }
.tile > *, .dl > * { position: relative; z-index: 1; }
.tile .num { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .12em; }
.tile .ic { width: 40px; height: 40px; border-radius: var(--r-2); display: grid; place-items: center; margin: 14px 0 16px; border: 1px solid var(--line); color: var(--amber); background: rgba(47,196,106,.07); }
.tile .ic svg { width: 21px; height: 21px; }
.tile h3 { font-size: 18px; letter-spacing: -.01em; }
.tile p { margin-top: 9px; color: var(--muted); font-size: 14px; }
.tile .grow { flex: 1; }

/* spans */
.c6 { grid-column: span 6; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; }

/* feature: voice tile with live waveform — hover surges the bars */
.tile.voice .wavewrap { margin-top: auto; display: flex; align-items: flex-end; gap: 3px; height: 54px; padding-top: 14px; transform-origin: bottom; transition: transform .25s var(--ease); }
.tile.voice .wavewrap i { flex: 1; background: linear-gradient(180deg, var(--live), rgba(51,210,126,.25)); border-radius: 2px; height: 20%; transition: box-shadow .25s; }
.tile.voice:hover .wavewrap { transform: scaleY(1.25); }
.tile.voice:hover .wavewrap i { box-shadow: 0 0 8px rgba(74,222,128,.55); }

/* shared mini-demo controls (EQ + Krisp tiles) */
.eq-demo, .krisp-demo { position: relative; margin-top: auto; padding-top: 14px; }
.mini-canvas { width: 100%; height: 56px; display: block; }
.mini-toggle { position: absolute; top: 14px; right: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: var(--r-2); padding: 5px 9px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.mini-toggle b { color: var(--live); font-weight: 700; }
.mini-toggle:hover { color: var(--ink); border-color: rgba(255,255,255,.2); }
.mini-toggle.off { color: var(--faint); }
.mini-toggle.off b { color: var(--faint); }
.mini-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* feature: Whispers stream-deck */
.deck { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.deck-key { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--muted); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: var(--r-2); padding: 11px 4px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease), background .15s, color .15s, border-color .15s, box-shadow .15s; }
.deck-key:hover { color: var(--ink); border-color: rgba(255,255,255,.2); }
.deck-key.live { background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.5); color: #c9f7d8; transform: translateY(1px) scale(.97); box-shadow: 0 0 0 3px rgba(74,222,128,.12), 0 0 16px rgba(74,222,128,.25) inset; }
.deck-status { margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--faint); transition: color .2s; }
.deck-status.live { color: var(--live); }

/* feature: dispatch incoming-call demo */
.disp-demo { position: relative; margin-top: 18px; display: flex; align-items: center; gap: 14px; min-height: 30px; }
.disp-ant { position: relative; width: 22px; height: 22px; flex: none; }
.disp-ant::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 10px; border-radius: 2px; background: var(--live); transform: translateX(-50%); }
.disp-ant i { position: absolute; left: 50%; top: 2px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--live); transform: translate(-50%,-50%); opacity: 0; animation: dispRing 2.4s ease-out infinite; }
.disp-ant i:nth-child(2) { animation-delay: .8s; } .disp-ant i:nth-child(3) { animation-delay: 1.6s; }
@keyframes dispRing { 0% { width: 6px; height: 6px; opacity: .8; } 100% { width: 30px; height: 30px; opacity: 0; } }
.disp-chip { font-family: var(--mono); font-size: 11px; color: var(--ink); background: rgba(255,106,77,.1); border: 1px solid rgba(255,106,77,.3);
  border-radius: var(--r-2); padding: 7px 11px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.disp-chip.show { opacity: 1; transform: none; }

/* feature: wide closing tile (horizontal) */
.tile.wide { grid-column: span 6; flex-direction: row; align-items: center; gap: 26px; }
.tile.wide .num { position: absolute; top: 22px; right: 24px; }
.tile.wide .ic { margin: 0; flex: none; }
.wide-txt { max-width: 720px; }

/* ============================================================================
   OVERLAY SHOWCASE
   ============================================================================ */
.showcase { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.showcase ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 2px; }
.showcase li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 15px; }
.showcase li:last-child { border-bottom: 1px solid var(--line-soft); }
.showcase li .n { font-family: var(--mono); font-size: 11px; color: var(--amber); padding-top: 3px; }
.showcase li b { color: var(--ink); font-weight: 600; }

/* The frame mimics an in-game capture: a blurred map "world" + vignette, with
   the real (background-less) overlays floating on top — exactly how they render
   over Roblox (see GameOverlay.tsx / AlertOverlay.tsx / MapMiniOverlay.tsx). */
.gameframe { position: relative; border-radius: var(--r-4); border: 1px solid var(--line); min-height: 420px; overflow: hidden; background: #060708; }
.gf-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(11px) saturate(.6) brightness(.5); opacity: .55; transform: scale(1.05); }
.gf-vig { position: absolute; inset: 0; background:
  radial-gradient(75% 75% at 50% 42%, transparent 40%, rgba(4,5,6,.78)),
  linear-gradient(180deg, rgba(4,5,6,.45), transparent 30%, rgba(4,5,6,.5)); }
.gf-tag { position: absolute; bottom: 14px; right: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); }

/* shared drop-shadow so bare overlays stay legible over any game */
.ov-voice, .ov-alert2 { position: absolute; will-change: transform; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.95); }

/* voice — avatars + names, no panel */
.ov-voice { top: 26px; left: 28px; display: grid; gap: 5px; }
.ov-row { display: flex; align-items: center; gap: 9px; }
.ov-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c1,#6366f1), var(--c2,#a855f7)); box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.ov-nm { font-size: 14px; font-weight: 700; color: #fff; }
.ov-row.spk .ov-av { box-shadow: 0 0 0 2px #4ade80, 0 0 11px rgba(74,222,128,.9); }
.ov-row.spk .ov-nm { color: #86efac; }
.ov-row.muted .ov-av { box-shadow: 0 0 0 2px #ef4444; }
.ov-row.muted .ov-nm { color: #e5e7eb; }
.ov-mi { width: 15px; height: 15px; color: #ef4444; filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }

/* alert — centered, expanding underline */
.ov-alert2 { top: 24px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 18px; }
.oa-team { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--police); }
.oa-desc { margin-top: 5px; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 2vw, 23px); color: #fff; line-height: 1.1; }
.oa-loc { margin-top: 4px; font-size: 13px; color: #e7e8ec; }
.oa-underline { margin: 11px auto 0; height: 3px; width: 190px; max-width: 70%; border-radius: 2px; background: var(--police); box-shadow: 0 0 11px var(--police); }

/* mini-map — the one overlay with a panel */
.ov-mmap { position: absolute; bottom: 26px; left: 28px; width: 178px; height: 130px; border-radius: var(--r-3); overflow: hidden;
  border: 1px solid rgba(255,255,255,.2); background: #16181d; box-shadow: 0 20px 50px -22px rgba(0,0,0,.9); will-change: transform; }
.ov-mmap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.ov-mmap .mg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size: 26px 26px; }
.ov-mmap .blip { width: 8px; height: 8px; border: 1px solid rgba(255,255,255,.8); }

/* ============================================================================
   PLATFORMS / DOWNLOAD
   ============================================================================ */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dl {
  position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); cursor: pointer; text-align: left; width: 100%;
  font: inherit; color: inherit; transition: transform .28s var(--ease), border-color .28s, background .28s; will-change: transform;
}
.dl:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); background: var(--panel-2); }
.dl[disabled] { cursor: not-allowed; opacity: .5; }
.dl[disabled]:hover { transform: none; border-color: var(--line); background: var(--panel); }
.dl .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dl .pico { width: 34px; height: 34px; color: var(--ink); }
.dl h3 { font-size: 17px; }
.dl .sub { color: var(--muted); font-size: 13px; margin-top: 4px; font-family: var(--mono); letter-spacing: .02em; }
.dl .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.dl .go svg { width: 14px; height: 14px; transition: transform .25s; }
.dl:hover .go svg { transform: translateX(3px); }
.chip { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-1); }
.chip.soon { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--line); }
.chip.alt  { background: rgba(47,196,106,.12); color: var(--amber); border: 1px solid rgba(47,196,106,.3); }
.chip.sig  { background: rgba(51,210,126,.1); color: var(--live); border: 1px solid rgba(51,210,126,.28); }

.webcard {
  margin-top: 16px; border-radius: var(--r-4); padding: 30px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; border: 1px solid var(--line);
  background: linear-gradient(100deg, rgba(47,196,106,.08), rgba(91,147,214,.05)); position: relative; overflow: hidden;
}
.webcard h3 { font-size: 22px; }
.webcard p { color: var(--muted); margin-top: 8px; max-width: 520px; font-size: 14.5px; }

/* ============================================================================
   FAQ
   ============================================================================ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
details.q { border-bottom: 1px solid var(--line-soft); }
details.q summary { list-style: none; cursor: pointer; padding: 22px 4px; font-family: var(--display); font-weight: 600; font-size: 17px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: color .2s; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary:hover { color: var(--amber); }
details.q .chev { width: 18px; height: 18px; color: var(--faint); transition: transform .3s var(--ease), color .2s; flex: none; }
details.q[open] .chev { transform: rotate(45deg); color: var(--amber); }
details.q .a { padding: 0 4px 24px; color: var(--muted); font-size: 14.5px; max-width: 760px; overflow: hidden; }
details.q .a a { color: var(--amber); }
details.q .a code { font-family: var(--mono); background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: var(--r-1); font-size: 12.5px; }

/* ============================================================================
   FINAL CTA + FOOTER
   ============================================================================ */
.cta { position: relative; text-align: center; padding: 120px 0; overflow: hidden; }
#wave2 { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; width: 100%; z-index: 0; opacity: .5; pointer-events: none; }
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(32px, 5.4vw, 58px); letter-spacing: -.03em; }
.cta p { margin: 18px auto 0; color: var(--muted); max-width: 480px; font-size: 16.5px; }
.cta .hero-cta { justify-content: center; margin-top: 34px; }

footer { border-top: 1px solid var(--line-soft); padding: 56px 0 44px; }
.foot { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand { max-width: 300px; }
.foot-brand p { margin-top: 14px; color: var(--faint); font-size: 13.5px; }
.foot-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.foot-col h4 { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); margin: 0 0 16px; font-weight: 500; }
.foot-col a { display: block; font-size: 14px; color: var(--muted); margin-bottom: 10px; transition: color .2s; }
.foot-col a:hover { color: var(--ink); }
.foot-base { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .03em; }

/* ============================================================================
   iOS / AltStore modal
   ============================================================================ */
.modal-bd { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(4,5,7,.74); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.modal-bd.open { opacity: 1; visibility: visible; }
.modal { width: 100%; max-width: 540px; max-height: 88vh; overflow: auto; border-radius: var(--r-4); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 50px 120px -36px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .35s var(--ease), transform .4s var(--ease); }
.modal-bd.open .modal { opacity: 1; transform: none; }
.modal-h { display: flex; align-items: center; gap: 13px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line-soft); }
.modal-h .ic { width: 38px; height: 38px; flex: none; }
.modal-h h3 { font-size: 18px; }
.modal-h p { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; margin-top: 3px; }
.modal-x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: var(--r-2); }
.modal-x:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.modal-b { padding: 22px 24px 26px; }
ol.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
ol.steps li { position: relative; padding-left: 46px; color: var(--muted); font-size: 14px; }
ol.steps li b { color: var(--ink); font-weight: 600; }
ol.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: -1px;
  width: 30px; height: 26px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--amber);
  border: 1px solid rgba(47,196,106,.3); border-radius: var(--r-2); background: rgba(47,196,106,.07); }
.modal-cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.modal-note { margin-top: 18px; font-size: 12px; color: var(--faint); display: flex; gap: 9px; }
.modal-note svg { width: 15px; height: 15px; flex: none; color: var(--amber); margin-top: 1px; }
.modal-note a { color: var(--amber); }

/* ============================================================================
   REVEAL (GSAP-driven) — only hidden when motion is on (failsafe in head)
   ============================================================================ */
.motion [data-reveal] { opacity: 0; }
.motion [data-hero]   { opacity: 0; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .cad-stage { max-width: 520px; margin: 0 auto; width: 100%; }
  .showcase { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .c6,.c4,.c3,.c2 { grid-column: span 2; }
  .tile.wide { grid-column: span 2; flex-direction: column; align-items: flex-start; gap: 0; }
  .tile.wide .num { position: static; }
  .tile.wide .ic { margin: 14px 0 16px; }
  .nav-mid { display: none; }
  .nav-mid.show { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: rgba(9,10,12,.97); border-bottom: 1px solid var(--line); padding: 10px 20px 18px; gap: 2px; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .hero { padding-top: 130px; }
  .section { padding: 78px 0; }
  .dl-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .c6,.c4,.c3,.c2 { grid-column: span 1; }
  .tile.wide { grid-column: span 1; }
  .shead { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn, .modal-cta .btn { width: 100%; }
  .nav-right .btn-ghost { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  #wave, #wave2 { display: none; }
  [data-reveal], [data-hero] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   LEGAL PAGES (privacy / terms)
   ============================================================================ */
.legal-top { position: sticky; top: 0; z-index: 20; background: rgba(9,10,12,.82); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line-soft); }
.legal-top .nav { height: 64px; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legal-back:hover { color: var(--ink); }
.legal-back svg { width: 15px; height: 15px; }

.legal { max-width: 820px; margin: 0 auto; padding: 64px 28px 100px; }
.legal .doc-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.legal h1 { font-size: clamp(30px, 5vw, 44px); margin: 16px 0 10px; letter-spacing: -.025em; }
.legal .updated { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .04em; }
.legal .lead { margin-top: 22px; color: var(--muted); font-size: 16px; }
.legal .note { margin-top: 22px; padding: 14px 16px; border: 1px solid rgba(47,196,106,.28); background: rgba(47,196,106,.06); border-radius: var(--r-3); font-size: 13.5px; color: #bfe6cd; }
.legal h2 { font-size: 22px; margin: 48px 0 14px; letter-spacing: -.02em; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.legal h2 .sec { font-family: var(--mono); font-size: 14px; color: var(--amber); margin-right: 12px; font-weight: 500; }
.legal h3 { font-size: 16px; margin: 26px 0 8px; color: var(--ink); }
.legal p { margin: 12px 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.legal ul { margin: 12px 0; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.legal ul li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.legal ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.legal a { color: var(--amber); }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal .ph { color: var(--amber); font-family: var(--mono); font-size: .92em; }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 600; font-size: 13px; background: rgba(255,255,255,.02); }
.legal .doc-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; color: var(--faint); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ============================================================================
   PRICING PAGE
   Reuses the dispatch-terminal language: hairline borders, mono micro-labels,
   the amber signal accent, and the tight --r-* radius scale.
   ============================================================================ */
.pricing { max-width: 1180px; margin: 0 auto; padding: 56px 28px 100px; }
.pricing .doc-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.pricing h1 { font-size: clamp(30px, 5vw, 46px); margin: 16px 0 12px; letter-spacing: -.03em; }
.pricing .lead { color: var(--muted); font-size: clamp(15.5px, 1.4vw, 17.5px); max-width: 620px; }
.pricing .ph { color: var(--amber); font-family: var(--mono); font-size: .92em; }
.pricing .note { margin-top: 22px; padding: 13px 16px; border: 1px solid rgba(47,196,106,.28); background: rgba(47,196,106,.06); border-radius: var(--r-3); font-size: 13px; color: #bfe6cd; max-width: 760px; }
.pricing .note svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; color: var(--amber); }

/* billing cadence chip */
.bill-row { margin-top: 26px; display: flex; align-items: center; gap: 12px; }
.bill-chip { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--live);
  border: 1px solid rgba(51,210,126,.3); background: rgba(51,210,126,.06); padding: 6px 12px; border-radius: var(--r-2); }

/* ---- tier cards ---------------------------------------------------------- */
.tiers { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column; padding: 24px 22px;
  border: 1px solid var(--line); border-radius: var(--r-4); background: var(--panel);
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.tier:hover { border-color: rgba(255,255,255,.18); background: var(--panel-2); transform: translateY(-3px); }
.tier.feat { border-color: rgba(47,196,106,.45); background: linear-gradient(180deg, rgba(47,196,106,.06), transparent 60%); }
.tier.feat::before {
  content: "Recomendado"; position: absolute; top: -1px; right: 16px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-ink); background: var(--amber); padding: 4px 9px; border-radius: var(--r-1);
}
.tier .tname { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.tier .price { margin-top: 14px; display: flex; align-items: baseline; gap: 3px; font-family: var(--display); letter-spacing: -.02em; }
.tier .price .amt { font-size: clamp(32px, 4vw, 42px); font-weight: 600; color: var(--ink); }
.tier .price .cur { font-size: 20px; font-weight: 600; color: var(--ink); }
.tier .price .per { font-family: var(--sans); font-size: 13px; color: var(--faint); font-weight: 500; margin-left: 2px; }
.tier .price.contact .amt { font-size: clamp(24px, 3vw, 30px); }
.tier .tagline { margin-top: 10px; color: var(--muted); font-size: 13.5px; min-height: 38px; }
.tier .tcta { margin-top: 18px; width: 100%; }
.tier .feats { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.tier .feats li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.tier .feats li.off { color: var(--faint); }
.tier .feats li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: var(--r-1);
  background: var(--amber-soft); -webkit-mask: var(--ck) center/11px no-repeat; mask: var(--ck) center/11px no-repeat;
  background-color: var(--live);
}
.tier .feats li.off::before { background-color: var(--faint); -webkit-mask: var(--dh) center/11px no-repeat; mask: var(--dh) center/11px no-repeat; }
.tier .feats b { color: var(--ink); font-weight: 600; }
:root {
  --ck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- full comparison table ----------------------------------------------- */
.cmp-h { margin: 80px 0 8px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; }
.cmp-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.cmp-wrap { border: 1px solid var(--line-soft); border-radius: var(--r-4); overflow: hidden; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cmp th, table.cmp td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); vertical-align: middle; }
table.cmp th:last-child, table.cmp td:last-child { border-right: 0; }
table.cmp tr:last-child td { border-bottom: 0; }
table.cmp thead th { position: sticky; top: 0; background: var(--bg-elev); z-index: 2; }
table.cmp thead .pn { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
table.cmp thead .pp { display: block; margin-top: 4px; font-family: var(--sans); font-size: 12px; color: var(--faint); font-weight: 500; letter-spacing: 0; text-transform: none; }
table.cmp thead th.feat-col { background: rgba(47,196,106,.07); }
table.cmp .rowlabel { text-align: left; color: var(--ink); font-weight: 500; }
table.cmp .grp td { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); background: rgba(255,255,255,.02); font-weight: 600; }
table.cmp td.val { color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
table.cmp td.feat-col { background: rgba(47,196,106,.04); }
table.cmp .tick, table.cmp .dash { display: inline-block; width: 17px; height: 17px; vertical-align: middle; }
table.cmp .tick { background-color: var(--live); -webkit-mask: var(--ck) center/13px no-repeat; mask: var(--ck) center/13px no-repeat; }
table.cmp .dash { background-color: var(--faint); -webkit-mask: var(--dh) center/13px no-repeat; mask: var(--dh) center/13px no-repeat; }

.pricing .doc-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; color: var(--faint); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pricing .doc-foot a { color: var(--amber); }

@media (max-width: 900px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tier.feat::before { right: 12px; }
  .cmp-wrap { overflow-x: auto; }
  table.cmp { min-width: 720px; }
}
@media (max-width: 540px) {
  .tiers { grid-template-columns: 1fr; }
}