/* ============================================================
   STRATAWX · public site - "RANGE/RINGS" : the scope you scroll.
   The site is one weather-radar scope at 250 NM; the app is the
   same scope at 40 NM. Tokens + fonts unified with the app's EFIS
   system (zero new deps). Hard instrument edges, no SaaS cards.
   Type: Bricolage Grotesque (display) · Geist (body) · JetBrains Mono.
   ============================================================ */

:root {
  /* canvas (= app --efis-bg family) */
  --bg:#03070c; --bg-2:#060b14; --panel:#0a121e; --panel-2:#0d1726;
  /* graticule / bezel */
  --line:#16202f; --line-2:#233448; --bezel:rgba(120,150,170,0.18); --bezel-2:rgba(150,190,210,0.40);
  /* ink */
  --ink:#e8f1ff; --text:#aebccd; --muted:#5f7187;
  /* live phosphor accent (= app --efis-cyan) */
  --cyan:#34e7ff; --cyan-deep:#1f9bd6;
  /* flight rules - verbatim from the app, never shift */
  --vfr:#38e08a; --mvfr:#ffb020; --ifr:#ff4d5e; --lifr:#e879f9;

  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Geist', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --maxw:1240px;
  --pad:clamp(20px, 5vw, 64px);
  --rail-w:74px;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-0.02em; margin:0; color:var(--ink); }
p { margin:0; }
a { color:inherit; text-decoration:none; }
ul,ol { margin:0; padding:0; list-style:none; }
i { font-style:normal; }
img { max-width:100%; display:block; }
b { font-weight:inherit; }
::selection { background:rgba(52,231,255,0.26); color:#fff; }

/* every interactive element locks like a target on focus */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:1px;
}

.lit { color:var(--cyan); text-shadow:0 0 12px rgba(52,231,255,0.5); }
.kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--cyan); display:inline-block; }
.readout { font-family:var(--font-mono); font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); }

/* ============ SCOPE FACE (confined to the hero - the PPI, not a page wash) ============ */
.scope { position:absolute; inset:0; z-index:-2; pointer-events:none; color:var(--cyan); overflow:hidden;
  -webkit-mask-image:radial-gradient(circle at 62% 46%, #000 8%, rgba(0,0,0,0.55) 46%, transparent 82%);
  mask-image:radial-gradient(circle at 62% 46%, #000 8%, rgba(0,0,0,0.55) 46%, transparent 82%); }
.scope__rings { position:absolute; top:46%; left:62%; width:140vmax; height:140vmax; transform:translate(-50%,-50%); opacity:0.5; }
.scope__sweep { position:absolute; top:46%; left:62%; width:140vmax; height:140vmax; transform:translate(-50%,-50%);
  border-radius:50%; opacity:0.6;
  background:conic-gradient(from -90deg,
    rgba(52,231,255,0) 0deg, rgba(52,231,255,0) 270deg,
    rgba(52,231,255,0.05) 322deg, rgba(52,231,255,0.16) 352deg, rgba(52,231,255,0.34) 360deg);
  animation:sweep 72s linear infinite; }
@keyframes sweep { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ============ RANGE RAIL (left scroll spine) ============ */
.rail { position:fixed; top:0; left:0; width:var(--rail-w); height:100vh; z-index:30; pointer-events:none;
  font-family:var(--font-mono); }
.rail__line { position:absolute; left:30px; top:9%; bottom:6%; width:1px; background:linear-gradient(var(--line-2), var(--line) 40%, var(--line-2)); }
.rail__ticks li { position:absolute; left:30px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10px; letter-spacing:0.12em; color:var(--muted); }
.rail__ticks li::before { content:''; width:7px; height:1px; background:var(--muted); }
.rail__ticks li i { font-size:7.5px; letter-spacing:0.18em; opacity:0.7; }
.rail__dest { color:var(--cyan); }
.rail__dest::before { background:var(--cyan); }
.rail__ship { position:absolute; left:30px; top:9%; width:12px; height:14px; transform:translate(-50%,-50%); color:var(--cyan);
  filter:drop-shadow(0 0 5px rgba(52,231,255,0.8)); transition:top 0.1s linear; }
.rail__ship svg { width:100%; height:100%; display:block; }
@media (max-width:1180px) { .rail { display:none; } }

/* ============ NAV (instrument header strip) ============ */
.nav { position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; gap:24px;
  padding:13px var(--pad); border-bottom:1px solid transparent; transition:background 0.3s, border-color 0.3s, padding 0.3s; }
.nav.scrolled { background:rgba(3,7,12,0.86); backdrop-filter:blur(14px); border-bottom-color:var(--line); padding-top:10px; padding-bottom:10px; }
.nav__brand { display:flex; align-items:center; gap:11px; }
.mark { width:30px; height:30px; display:block; }
.nav__word { font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-0.02em; color:var(--ink); }
.nav__word i { color:var(--cyan); }
.nav__sub { font-family:var(--font-mono); font-size:9px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); align-self:center; padding-left:11px; margin-left:3px; border-left:1px solid var(--line-2); }
.nav__links { display:flex; gap:30px; margin-left:auto; }
.nav__links a { font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text); position:relative; display:inline-flex; align-items:baseline; gap:7px; transition:color 0.2s; }
.nav__links a i { font-size:9px; color:var(--muted); letter-spacing:0.1em; }
.nav__links a::after { content:''; position:absolute; left:0; right:0; bottom:-7px; height:1.5px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform 0.25s var(--ease); }
.nav__links a:hover { color:var(--ink); }
.nav__links a:hover::after { transform:scaleX(1); }
.nav__actions { display:flex; align-items:center; gap:12px; }
.nav__burger { display:none; flex-direction:column; gap:5px; width:42px; height:36px; align-items:center; justify-content:center; background:rgba(52,231,255,0.04); border:1px solid var(--line-2); border-radius:2px; cursor:pointer; }
.nav__burger span { width:18px; height:2px; background:var(--ink); transition:0.25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu { position:fixed; top:60px; inset-inline:0; z-index:59; display:flex; flex-direction:column; gap:2px; padding:14px var(--pad) 22px; background:rgba(3,7,12,0.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.mobile-menu[hidden] { display:none; }
.mobile-menu a { padding:14px 4px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text); border-bottom:1px solid var(--line); }
.mobile-menu .waypoint { margin-top:14px; border-bottom:none; justify-content:center; }

/* ============ WAYPOINT (the CTA - a destination fix, not a pill) ============ */
.waypoint { position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-weight:600;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan);
  padding:11px 18px; border:1px solid var(--cyan-deep); background:rgba(52,231,255,0.06); cursor:pointer; white-space:nowrap;
  transition:color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.25s; }
.waypoint b { font-size:13px; line-height:1; transform:translateY(0.5px); }
.waypoint::before, .waypoint::after { content:''; position:absolute; width:9px; height:9px; border:1.5px solid var(--cyan); opacity:0; transition:opacity 0.16s, transform 0.16s; }
.waypoint::before { top:-1px; left:-1px; border-right:0; border-bottom:0; transform:translate(-4px,-4px); }
.waypoint::after { bottom:-1px; right:-1px; border-left:0; border-top:0; transform:translate(4px,4px); }
.waypoint:hover, .waypoint:focus-visible { color:#eafdff; border-color:var(--cyan); background:rgba(52,231,255,0.12); box-shadow:0 0 26px -8px rgba(52,231,255,0.7); }
.waypoint:hover::before, .waypoint:focus-visible::before, .waypoint:hover::after, .waypoint:focus-visible::after { opacity:1; transform:translate(0,0); }
.waypoint--lg { font-size:13.5px; padding:15px 26px; letter-spacing:0.18em; }
.waypoint--sm { font-size:11px; padding:9px 14px; }
/* solid primary fill - the one confident buy CTA (the others stay outlined fixes) */
.waypoint--solid { color:var(--bg); background:var(--cyan); border-color:var(--cyan); }
.waypoint--solid:hover, .waypoint--solid:focus-visible { color:var(--bg); background:#6cefff; border-color:#6cefff; box-shadow:0 0 30px -6px rgba(52,231,255,0.55); }

.ghostlink { font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text); padding:11px 4px; border-bottom:1px solid transparent; transition:color 0.2s, border-color 0.2s; }
.ghostlink:hover { color:var(--cyan); border-bottom-color:var(--cyan); }

/* ============ SHELLS ============ */
.section { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(50px,7vw,84px) var(--pad); }
.lead__sub { color:var(--text); font-size:clamp(16px,2vw,19px); max-width:620px; margin:0 auto clamp(28px,4vw,44px); text-align:center; }

/* bearing-line section divider (replaces every centered header) */
.bearing { position:relative; z-index:1; display:flex; align-items:center; gap:clamp(14px,3vw,40px); max-width:var(--maxw);
  margin:clamp(40px,7vw,90px) auto 0; padding:0 var(--pad); }
.bearing::before, .bearing::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line-2)); }
.bearing::after { background:linear-gradient(90deg, var(--line-2), transparent); }
.bearing span { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.bearing b { font-family:var(--font-display); font-weight:600; font-size:clamp(17px,2.4vw,24px); color:var(--ink); letter-spacing:-0.01em; white-space:nowrap; }

/* ============ HERO (the PPI) ============ */
.hero { position:relative; isolation:isolate; z-index:1; width:100%; overflow:hidden; padding-top:clamp(112px,15vh,160px); }
.hero__video { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; opacity:0.5; }
.hero__scrim { position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(3,7,12,0.72) 38%, rgba(3,7,12,0.2) 72%, transparent 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(3,7,12,0.35) 22%, transparent 50%),
    linear-gradient(180deg, rgba(3,7,12,0.7) 0%, transparent 24%); }
.hero__inner { position:relative; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(40px,6vh,72px);
  padding-left:max(var(--pad), calc(var(--rail-w) + 8px));
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(24px,4vw,56px); align-items:center; }
.hero__copy { min-width:0; max-width:560px; }
.hero__copy .readout { display:block; margin-bottom:18px; padding-left:14px; border-left:2px solid var(--cyan); }
.hero__title { font-size:clamp(40px,5.6vw,72px); font-weight:600; letter-spacing:-0.03em; line-height:0.98; margin:0; }
/* keep the brand cyan on the headline, drop the neon bloom (large glowing text reads as AI) */
.hero__title .lit { text-shadow:none; }
.hero__lede { color:var(--text); font-size:clamp(16px,1.6vw,18.5px); max-width:500px; margin:24px 0 0; }
.hero__lede b { color:var(--ink); }
.hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:30px; }
.hero__platforms { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.plat { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.plat i { width:7px; height:7px; background:var(--muted); }
.plat--live { color:var(--cyan); }
.plat--live i { background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:blip 2.4s ease-in-out infinite; }
@keyframes blip { 50% { opacity:0.35; } }

/* app window as a hard scope inset (no SaaS 3D float) */
.hero__stage { position:relative; margin:0; }
.stage__cap { font-family:var(--font-mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.window { position:relative; border:1px solid var(--bezel-2); background:var(--bg-2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 1px rgba(52,231,255,0.06), 0 30px 80px -40px rgba(0,0,0,0.95), 0 0 60px -24px rgba(52,231,255,0.35); }
.window::before, .window::after { content:''; position:absolute; width:12px; height:12px; border:1px solid var(--cyan); opacity:0.6; }
.window::before { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.window::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }
.window img { width:100%; height:auto; display:block; }

/* radar contacts */
.contacts { position:absolute; inset:0; z-index:0; pointer-events:none; }
.contact { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); pointer-events:auto;
  background:none; border:0; cursor:default; --c:var(--cyan); }
.contact i { display:block; width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c);
  animation:contact 4s ease-in-out infinite; }
.contact span { position:absolute; left:16px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:0.06em; color:var(--ink); background:rgba(3,7,12,0.9); border:1px solid var(--c); padding:4px 8px;
  opacity:0; transition:opacity 0.18s; pointer-events:none; }
.contact:hover span, .contact:focus-visible span { opacity:1; }
.contact--vfr { --c:var(--vfr); } .contact--mvfr { --c:var(--mvfr); } .contact--ifr { --c:var(--ifr); } .contact--lifr { --c:var(--lifr); }
@keyframes contact { 0%,100% { opacity:0.35; transform:scale(0.7); } 50% { opacity:1; transform:scale(1); } }
@media (max-width:900px) { .contacts { display:none; } }

/* contacts feed (METAR) along hero foot */
.metar-ticker { position:relative; z-index:1; display:flex; align-items:center; width:100%; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(3,7,12,0.6); backdrop-filter:blur(5px); overflow:hidden; }
.metar-ticker__tag { flex:none; font-family:var(--font-mono); font-size:10px; letter-spacing:0.24em; color:var(--cyan); padding:0 16px; border-right:1px solid var(--line); align-self:stretch; display:flex; align-items:center; }
.metar-ticker__track { display:inline-flex; gap:46px; padding:11px 0 11px 24px; white-space:nowrap; animation:marquee 58s linear infinite; }
.metar-ticker__track span { font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.metar-ticker__track span::before { content:'◂ '; color:var(--cyan); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* general product screenshots */
.shot { position:relative; margin:0; border:1px solid var(--bezel-2); background:var(--bg-2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), 0 30px 70px -42px rgba(0,0,0,0.9); }
.shot::before, .shot::after { content:''; position:absolute; width:11px; height:11px; border:1px solid var(--cyan); opacity:0.5; }
.shot::before { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.shot::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }
.shot img { width:100%; height:auto; }

/* ============ DATA SOURCES STRIP ============ */
.sources { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:14px var(--pad) 0;
  padding-left:max(var(--pad), calc(var(--rail-w) + 8px)); display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; }
.sources__lbl, .sources li { font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
.sources__lbl { color:var(--cyan); }
.sources ul { display:flex; flex-wrap:wrap; gap:10px 26px; }
.sources li { color:var(--muted); }

/* ============ FEATURE (text + screenshot) ============ */
.feature { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,72px) var(--pad);
  display:grid; grid-template-columns:0.85fr 1.15fr; align-items:center; gap:clamp(28px,5vw,72px); }
.feature--reverse .feature__text { order:2; }
.feature__text h2 { font-size:clamp(27px,3.6vw,42px); margin:14px 0; }
.feature__text p { color:var(--text); font-size:clamp(15.5px,1.5vw,17px); }
.ticks { margin-top:22px; display:grid; gap:9px; }
.ticks--two { grid-template-columns:1fr 1fr; }
.ticks li { position:relative; padding-left:24px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em; color:var(--ink); }
.ticks li::before { content:''; position:absolute; left:0; top:5px; width:8px; height:8px; background:var(--cyan); box-shadow:0 0 9px var(--cyan); }

/* ============ ANTI-POP ============ */
.antipop { position:relative; z-index:1; border-block:1px solid var(--line); background:rgba(6,11,20,0.7); }
.antipop__inner { max-width:860px; margin:0 auto; padding:clamp(54px,8vw,96px) var(--pad); text-align:center; }
.antipop h2 { font-size:clamp(26px,3.8vw,42px); margin:14px 0 16px; }
.antipop p { color:var(--text); font-size:clamp(16px,1.7vw,18px); max-width:660px; margin:0 auto; }
.ramp { width:100%; max-width:620px; margin:32px auto 0; height:auto; display:block; }
.ramp__lbl { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; fill:var(--muted); }

/* ============ MODES (source bays) ============ */
.modes__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mode { position:relative; padding:28px 24px; border:1px solid var(--line); background:var(--panel); transition:border-color 0.25s, background 0.25s; }
.mode:hover { border-color:var(--bezel-2); background:var(--panel-2); }
.mode__id { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; color:var(--cyan); }
.mode h3 { font-size:21px; margin:10px 0 9px; }
.mode p { color:var(--text); font-size:14.5px; }

/* ============ HOW (range steps) ============ */
.flow { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.flow__step { padding:clamp(22px,3vw,32px); border-right:1px solid var(--line); background:var(--panel); transition:background 0.25s; }
.flow__step:last-child { border-right:none; }
.flow__step:hover { background:var(--panel-2); }
.flow__step b { font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; color:var(--cyan); }
.flow__step h3 { font-size:20px; margin:10px 0 8px; }
.flow__step p { color:var(--text); font-size:14px; }

/* ============ COMPARISON ============ */
.vs { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:980px; margin:0 auto; }
.vs__col { padding:30px clamp(22px,3vw,38px); border:1px solid var(--line); background:var(--panel); }
.vs__col--us { border-color:rgba(52,231,255,0.34); background:linear-gradient(180deg, rgba(52,231,255,0.07), rgba(31,155,214,0.02)); box-shadow:0 0 0 1px rgba(52,231,255,0.06), 0 30px 70px -44px rgba(52,231,255,0.4); }
.vs__col h3 { font-size:25px; margin-bottom:18px; }
.vs__col--us h3 i { color:var(--cyan); }
.vs__col--them h3 { color:var(--muted); }
.vs__col ul { display:grid; gap:13px; }
.vs__col li { position:relative; padding-left:28px; font-size:15px; color:var(--ink); }
.vs__col li b { color:var(--cyan); font-weight:600; }
.vs__col--us li::before { content:'✓'; position:absolute; left:0; color:var(--cyan); font-family:var(--font-mono); }
.vs__col--them li.dim { color:var(--muted); }
.vs__col--them li b { color:var(--text); }
.vs__col--them li::before { content:'–'; position:absolute; left:0; color:var(--muted); font-family:var(--font-mono); }
.vs__note { color:var(--muted); font-size:12px; max-width:760px; margin:22px auto 0; line-height:1.5; text-align:center; }

/* ============ PRICING ============ */
.price { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(28px,5vw,60px); align-items:center; max-width:940px; margin:0 auto;
  padding:clamp(34px,4vw,52px); border:1px solid var(--bezel-2);
  background:radial-gradient(120% 100% at 0% 0%, rgba(52,231,255,0.08), transparent 60%), var(--panel);
  box-shadow:0 0 0 1px rgba(52,231,255,0.05), 0 40px 90px -50px rgba(52,231,255,0.4); }
.price__amount { font-family:var(--font-display); font-weight:600; font-size:clamp(56px,9vw,86px); color:var(--ink); letter-spacing:-0.04em; line-height:1; margin:16px 0 6px; }
.price__amount .cur { font-size:0.45em; vertical-align:top; color:var(--cyan); }
.price__amount .cents { font-size:0.45em; color:var(--text); }
.price__amount .once { font-family:var(--font-mono); font-size:0.15em; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; vertical-align:middle; }
.price__terms { color:var(--text); font-size:14.5px; margin-bottom:24px; max-width:360px; }
.price__fine { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--muted); margin-top:14px; }
.price__list { display:grid; gap:12px; }
.price__list li { position:relative; padding-left:28px; font-size:15px; color:var(--ink); }
.price__list li::before { content:'✓'; position:absolute; left:0; color:var(--cyan); font-family:var(--font-mono); }

/* ============ FAQ (channel list - each row arms like a freq on hover/open) ============ */
.faq { max-width:820px; margin:0 auto; border-top:1px solid var(--line); }
.faq__item { position:relative; border-bottom:1px solid var(--line); transition:background 0.3s var(--ease); }
/* left bar: dim graticule at rest, half-lit when armed (hover), full phosphor when open */
.faq__item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--cyan);
  transform:scaleY(0); transform-origin:top; opacity:0; box-shadow:0 0 12px var(--cyan);
  transition:transform 0.4s var(--ease), opacity 0.3s; }
.faq__item:hover { background:rgba(52,231,255,0.025); }
.faq__item:hover::before { transform:scaleY(0.34); opacity:0.55; }
.faq--open { background:rgba(52,231,255,0.045); }
.faq--open::before { transform:scaleY(1); opacity:1; }

.faq__item summary { cursor:pointer; list-style:none; padding:21px clamp(14px,2.4vw,22px); display:flex; align-items:center; gap:clamp(14px,2vw,20px); }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__no { flex-shrink:0; min-width:24px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; color:var(--muted); transition:color 0.3s, text-shadow 0.3s; }
.faq__item:hover .faq__no { color:var(--text); }
.faq--open .faq__no { color:var(--cyan); text-shadow:0 0 12px rgba(52,231,255,0.55); }
.faq__q { flex:1; font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.9vw,19px); line-height:1.28; color:var(--ink); transition:color 0.3s; }
.faq--open .faq__q { color:var(--cyan); }

/* + housed in an instrument bezel that energizes on open */
.faq__plus { position:relative; flex-shrink:0; width:26px; height:26px; border:1px solid var(--line-2);
  display:grid; place-items:center; transition:border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.faq__plus::before, .faq__plus::after { content:''; position:absolute; background:var(--cyan);
  transition:transform 0.35s var(--ease), opacity 0.3s; }
.faq__plus::before { width:11px; height:2px; }
.faq__plus::after { width:2px; height:11px; }
.faq__item:hover .faq__plus { border-color:var(--bezel-2); }
.faq--open .faq__plus { border-color:var(--cyan); background:rgba(52,231,255,0.07);
  box-shadow:0 0 16px -3px rgba(52,231,255,0.65), inset 0 0 10px -4px rgba(52,231,255,0.6); }
.faq--open .faq__plus::before { transform:rotate(180deg); }
.faq--open .faq__plus::after { transform:rotate(90deg); opacity:0; }

/* answer: real height-collapse (grid-rows 0fr→1fr), text slides + fades in */
.faq__body { display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.42s var(--ease); }
.faq__body > p { overflow:hidden; min-height:0; max-width:680px;
  padding:0 clamp(14px,2.4vw,22px) 0 clamp(48px,7vw,62px);
  color:var(--text); font-size:15px; opacity:0; transform:translateY(-5px);
  transition:opacity 0.3s, transform 0.42s var(--ease); }
.faq--open .faq__body { grid-template-rows:1fr; }
.faq--open .faq__body > p { opacity:1; transform:none; padding-bottom:24px; transition-delay:0.07s; }
.faq__body > p b { color:var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__item::before, .faq__no, .faq__q, .faq__plus,
  .faq__plus::before, .faq__plus::after, .faq__body, .faq__body > p { transition:none; }
}

/* ============ CLOSING ============ */
.closing { position:relative; z-index:1; text-align:center; padding:clamp(64px,10vw,120px) var(--pad); border-top:1px solid var(--line);
  background:radial-gradient(80% 120% at 50% 0%, rgba(52,231,255,0.10), transparent 60%); }
.closing__inner { max-width:640px; margin:0 auto; }
.closing h2 { font-size:clamp(30px,4.6vw,50px); }
.closing p { color:var(--text); font-size:18px; margin:14px 0 30px; }

/* ============ FOOTER ============ */
.footer { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:24px 40px; align-items:center; padding:40px var(--pad); border-top:1px solid var(--line); }
.footer__brand { display:flex; align-items:baseline; gap:12px; }
.footer__tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.footer__links { display:flex; flex-wrap:wrap; gap:22px; justify-self:end; }
.footer__links a { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text); transition:color 0.2s; }
.footer__links a:hover { color:var(--cyan); }
.footer__legal { grid-column:1 / -1; padding-top:22px; border-top:1px solid var(--line); }
.footer__legal p { color:var(--muted); font-size:12px; margin-bottom:4px; }

/* ============ REVEAL ============ */
.reveal { opacity:0; transform:translateY(12px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"] { transition-delay:0.08s; } .reveal[data-d="2"] { transition-delay:0.16s; }
.reveal[data-d="3"] { transition-delay:0.24s; } .reveal[data-d="4"] { transition-delay:0.32s; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px) {
  .hero__inner { grid-template-columns:1fr; gap:32px; padding-left:var(--pad); }
  .hero__copy { max-width:100%; }
  .feature { grid-template-columns:1fr; gap:28px; }
  .feature--reverse .feature__text { order:0; }
  .modes__grid { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr 1fr; }
  .flow__step:nth-child(2) { border-right:none; }
  .flow__step:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .price { grid-template-columns:1fr; }
  .sources { padding-left:var(--pad); }
}
@media (max-width:680px) {
  .nav__links { display:none; }
  .nav__actions .waypoint { display:none; }
  .nav__sub { display:none; }
  .nav__burger { display:flex; }
  .hero__cta { flex-direction:column; align-items:stretch; }
  .hero__cta .waypoint { justify-content:center; }
  .ticks--two { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr; }
  .flow__step { border-right:none; border-bottom:1px solid var(--line); }
  .flow__step:last-child { border-bottom:none; }
  .vs { grid-template-columns:1fr; }
  .footer { grid-template-columns:1fr; }
  .footer__links { justify-self:start; }
  .bearing b { white-space:normal; }
}
@media (min-width:681px) { .mobile-menu { display:none !important; } }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .scope__sweep, .metar-ticker__track, .plat--live i, .contact i { animation:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  .hero__video { display:none; }
  .contact i { opacity:1; transform:none; }
}

/* ============ LIGHT THEME (flat printed scope) ============ */
:root[data-theme='light'] {
  --bg:#eef2f7; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3f7fc;
  --line:#d4deea; --line-2:#bcccdd; --bezel:rgba(15,40,70,0.12); --bezel-2:rgba(8,145,178,0.45);
  --ink:#0f1b2d; --text:#33485f; --muted:#5b6b7b;
  --cyan:#0891b2; --cyan-deep:#0e7490;
  --vfr:#0d9f6e; --mvfr:#b45309; --ifr:#e11d48; --lifr:#a21caf;
}
:root[data-theme='light'] .scope__sweep { display:none; }
:root[data-theme='light'] .scope { opacity:0.7; }
:root[data-theme='light'] .lit { text-shadow:none; }
:root[data-theme='light'] .hero__video { opacity:0.18; }

/* ============ SUPPORT DRAWER (slide-out from the right edge) ============ */
.support-tab {
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:70; display:flex; align-items:center; gap:6px;
  writing-mode:vertical-rl; text-orientation:mixed;
  padding:16px 7px; border:1px solid var(--line); border-right:0;
  border-radius:10px 0 0 10px; background:var(--panel); color:var(--ink);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer; box-shadow:-4px 0 18px rgba(0,0,0,0.3);
  transition:color .15s, border-color .15s, background .15s;
}
.support-tab::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.support-tab:hover { color:var(--cyan); border-color:var(--bezel-2, var(--cyan-deep)); }

.support-backdrop {
  position:fixed; inset:0; z-index:90; background:rgba(2,7,12,0.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease, ease);
}
.support-drawer {
  position:fixed; top:0; right:0; z-index:100; height:100vh; height:100dvh;
  width:min(440px, 100vw); display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:-16px 0 50px rgba(0,0,0,0.45);
  transform:translateX(100%); transition:transform .35s var(--ease, cubic-bezier(0.16,1,0.3,1));
}
.support-drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.support-drawer__title { font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:16px; }
.support-drawer__tools { display:flex; align-items:center; gap:6px; }
.support-drawer__ext, .support-drawer__close {
  display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  font-size:15px; text-decoration:none; cursor:pointer; transition:color .15s, border-color .15s;
}
.support-drawer__ext:hover, .support-drawer__close:hover { color:var(--cyan); border-color:var(--cyan-deep); }
.support-drawer__frame { flex:1 1 auto; width:100%; border:0; background:var(--bg); }

body.support-open .support-backdrop { opacity:1; pointer-events:auto; }
body.support-open .support-drawer { transform:translateX(0); }
body.support-open .support-tab { opacity:0; pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  .support-drawer, .support-backdrop { transition:none; }
}

/* ============ LAUNCH PROMO (top ATIS broadcast strip) ============ */
/* A persistent weekend-sale bar pinned above the nav. Scoped with :has so pages
   without a .promo (support, admin) keep the nav flush at top:0. */
:root { --promo-h:40px; }
body:has(.promo) .nav { top:var(--promo-h); }
body:has(.promo) .mobile-menu { top:calc(60px + var(--promo-h)); }
.promo {
  position:fixed; top:0; left:0; right:0; z-index:65; height:var(--promo-h);
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.2vw,22px);
  padding:0 calc(var(--pad) + 8px); overflow:hidden; white-space:nowrap; text-align:center;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink);
  background:radial-gradient(130% 240% at 50% -70%, rgba(52,231,255,0.20), transparent 62%), var(--panel-2);
  border-bottom:1px solid var(--cyan-deep); transition:background 0.25s;
}
.promo:hover, .promo:focus-visible { background:radial-gradient(130% 240% at 50% -70%, rgba(52,231,255,0.34), transparent 62%), var(--panel-2); }
.promo__beacon { flex:none; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:blip 2.4s ease-in-out infinite; }
.promo__tag { color:var(--cyan); font-weight:600; letter-spacing:0.2em; }
.promo__msg { color:var(--text); }
.promo__price { color:var(--ink); }
.promo__price s { color:var(--muted); text-decoration-thickness:1px; margin-right:7px; }
.promo__code { color:var(--text); }
.promo__code b { color:var(--cyan); font-weight:600; }
.promo__cta { color:var(--cyan); font-weight:600; }
@media (max-width:900px) { .promo__tag, .promo__cta { display:none; } }
@media (max-width:680px) {
  :root { --promo-h:38px; }
  .promo { font-size:10px; letter-spacing:0.06em; gap:12px; padding:0 12px; }
  .promo__price { display:none; }
}
@media (prefers-reduced-motion: reduce) { .promo__beacon { animation:none; } }

/* launch-weekend strikethrough on the big price */
.price__was { display:inline-block; font-family:var(--font-mono); font-weight:400; font-size:0.2em; letter-spacing:0.03em;
  color:var(--muted); text-decoration:line-through; text-decoration-color:var(--cyan-deep); vertical-align:middle; margin-right:0.2em; }