/* ==========================================================================
   Spektra — marketing landing for the RTL-SDR RF spectrum scanner.
   Ported verbatim from the Claude Design handoff (Spektra Landing.html inline
   <style>). Standalone product page with its own gold palette + nav; the hero
   spectrum + theme canvases are driven by spektra-core.js + spektra.js (plain
   vanilla JS, shipped as-is). Spektra is the launched `sdr-plugin` tool — this
   public page lives at /spektra; the licensed tool stays at /sdr-plugin.
   No build step.
   ========================================================================== */
:root{
  --bg:#0a0a0c; --bg2:#101015; --bg3:#16161c; --inset:#0c0c10;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.055);
  --txt:#eeebe4; --txt2:rgba(238,235,228,.64); --txt3:rgba(238,235,228,.42);
  --gold:#d8b46a; --gold-deep:#b8923f;
  --gold2:color-mix(in srgb,var(--gold) 14%,transparent);
  --gold3:color-mix(in srgb,var(--gold) 30%,transparent);
  --green:#34d399; --greenb:rgba(52,211,153,.14);
  --amber:#fbbf24; --amberb:rgba(251,191,36,.14);
  --red:#f43f5e; --redb:rgba(244,63,94,.14);
  --maxw:1180px; --r:16px; --r2:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em;line-height:1.05}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-family:'IBM Plex Mono',monospace}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold3)}
.muted{color:var(--txt2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'IBM Plex Sans';font-weight:600;font-size:15px;padding:13px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap}
.btn-gold{background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#1a140a;box-shadow:0 10px 30px -12px var(--gold)}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);background:var(--bg3);color:var(--txt)}
.btn-ghost:hover{border-color:var(--gold3);color:var(--txt)}
.btn svg{width:17px;height:17px}
.btn-sm{padding:9px 15px;font-size:13.5px;border-radius:10px}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.nav.scrolled{border-color:var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:.02em}
.brand .mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--gold),var(--gold-deep));display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.brand .mk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 2px,rgba(0,0,0,.2) 2px 3px)}
.brand .mk b{position:relative;z-index:1;color:#1a140a;font-size:17px}
.brand em{color:var(--gold);font-style:normal}
.nav-links{display:flex;gap:6px;margin-left:18px}
.nav-links a{padding:8px 13px;border-radius:9px;font-size:14px;color:var(--txt2);font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--txt);background:var(--bg3)}
.nav-links a.backlink{color:var(--txt3);display:inline-flex;align-items:center;gap:5px}
.nav-links a.backlink:hover{color:var(--gold)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-burger{display:none}

/* ============ HERO ============ */
.hero{padding:64px 0 48px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:1000px;height:560px;
  background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(38px,6.2vw,72px);font-weight:700;margin:20px auto 0;max-width:15ch}
.hero h1 .hl{position:relative;color:var(--gold);white-space:nowrap}
.hero .sub{font-size:clamp(16px,2vw,20px);color:var(--txt2);max-width:60ch;margin:20px auto 0}
.hero-cta{display:flex;gap:13px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:15px;font-size:13px;color:var(--txt3);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note .ok{color:var(--green)}

/* product panel */
.product{margin:46px auto 0;max-width:1040px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--bg2),var(--bg));box-shadow:0 50px 120px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;position:relative}
.product-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2);background:var(--bg2)}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:var(--bg3);border:1px solid var(--line)}
.product-bar .ttl{font-size:12.5px;color:var(--txt3);font-family:'IBM Plex Mono';margin:0 auto}
.product-bar .live{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--green);font-weight:600}
.product-bar .live .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2)}
.ribbon .cell{background:var(--bg2);padding:13px 18px}
.ribbon .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.ribbon .v{font-family:'IBM Plex Mono';font-size:21px;font-weight:600;margin-top:3px}
.ribbon .v.green{color:var(--green)}.ribbon .v.red{color:var(--red)}.ribbon .v.gold{color:var(--gold)}
.ribbon .v small{font-size:12px;color:var(--txt3);font-weight:400}
.spec-stage{position:relative;height:340px;padding:8px 10px}
.spec-stage canvas{width:100%;height:100%;display:block}
.spec-sweep{position:absolute;top:8px;bottom:8px;width:90px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 13%,transparent));mix-blend-mode:screen;opacity:.8}
.spec-legend{display:flex;gap:16px;padding:11px 18px;border-top:1px solid var(--line2);flex-wrap:wrap;font-size:11.5px;color:var(--txt2)}
.spec-legend .lg{display:flex;align-items:center;gap:7px}.spec-legend i{width:16px;height:3px;border-radius:2px}

/* stat strip */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.stats-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px;text-align:center;border-right:1px solid var(--line2)}
.stat:last-child{border-right:none}
.stat .n{font-family:'Space Grotesk';font-weight:700;font-size:30px;color:var(--gold)}
.stat .l{font-size:13px;color:var(--txt2);margin-top:3px}

/* section heading */
.sec{padding:84px 0}
.sec.alt{background:var(--bg2)}
.sec-head{text-align:center;max-width:64ch;margin:0 auto 52px}
.sec-head h2{font-size:clamp(28px,4vw,44px);font-weight:700;margin-top:14px}
.sec-head p{color:var(--txt2);margin-top:14px;font-size:17px}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:24px;transition:.18s}
.sec.alt .feat{background:var(--bg)}
.feat:hover{border-color:var(--gold3);transform:translateY(-3px)}
.feat .ic{width:46px;height:46px;border-radius:12px;background:var(--gold2);display:grid;place-items:center;color:var(--gold);margin-bottom:16px}
.feat .ic svg{width:23px;height:23px}
.feat h3{font-family:'Space Grotesk';font-size:19px;font-weight:600;margin-bottom:8px}
.feat p{color:var(--txt2);font-size:14.5px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.steps::before{content:"";position:absolute;top:34px;left:16%;right:16%;height:1px;background:linear-gradient(90deg,transparent,var(--gold3),var(--gold3),transparent);z-index:0}
.step{position:relative;z-index:1;text-align:center}
.step .num{width:68px;height:68px;margin:0 auto 20px;border-radius:50%;background:var(--bg2);border:1px solid var(--gold3);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:26px;color:var(--gold);box-shadow:0 0 0 8px var(--bg)}
.sec.alt .step .num{box-shadow:0 0 0 8px var(--bg2)}
.step h3{font-family:'Space Grotesk';font-size:20px;font-weight:600;margin-bottom:9px}
.step p{color:var(--txt2);font-size:14.5px;max-width:34ch;margin:0 auto}
.step code{font-family:'IBM Plex Mono';font-size:13px;color:var(--gold);background:var(--inset);border:1px solid var(--line);padding:2px 8px;border-radius:6px}

/* languages + themes */
.lt{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.lang-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lang-chips span{padding:8px 15px;border:1px solid var(--line);border-radius:30px;font-size:14px;color:var(--txt2);background:var(--bg2);font-weight:500}
.sec.alt .lang-chips span{background:var(--bg)}
.lang-chips span.on{border-color:var(--gold3);color:var(--txt);background:var(--gold2)}
.theme-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--bg2)}
.mini .cap{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--line2);font-size:12px;font-weight:600;color:var(--txt2)}
.mini .cap .sw{width:10px;height:10px;border-radius:50%}
.mini canvas{width:100%;height:118px;display:block;background:#0c0c10}
.mini.light{background:#f4f1ea;border-color:rgba(28,24,16,.16)}
.mini.light .cap{color:rgba(29,26,20,.6);border-color:rgba(28,24,16,.1)}
.mini.light canvas{background:#f4f1ea}

/* comparison */
.cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.sec.alt .cmp{background:var(--bg)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line2);font-size:14.5px}
.cmp thead th{font-family:'Space Grotesk';font-size:15px;font-weight:600;background:var(--bg3)}
.cmp thead th.us{color:var(--gold)}
.cmp td:first-child,.cmp th:first-child{color:var(--txt2);font-weight:500}
.cmp .col-us{background:color-mix(in srgb,var(--gold) 6%,transparent);border-left:1px solid var(--gold3);border-right:1px solid var(--gold3)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp .yes{color:var(--green);font-weight:600}
.cmp .no{color:var(--txt3)}
.cmp .price{font-family:'IBM Plex Mono';font-weight:600}
.cmp .tag{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1a140a;background:var(--gold);padding:2px 8px;border-radius:20px}
.cell-c{text-align:center}

/* requirements */
.reqs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.req{border:1px solid var(--line);border-radius:var(--r2);background:var(--bg2);padding:22px}
.sec.alt .req{background:var(--bg)}
.req .ic{color:var(--gold);margin-bottom:13px}.req .ic svg{width:26px;height:26px}
.req h4{font-family:'Space Grotesk';font-size:16px;font-weight:600;margin-bottom:6px}
.req p{font-size:13.5px;color:var(--txt2)}

/* FAQ */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{border:1px solid var(--line);border-radius:var(--r2);background:var(--bg2);overflow:hidden}
.sec.alt .qa{background:var(--bg)}
.qa summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:14px;font-family:'Space Grotesk';font-weight:600;font-size:17px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{margin-left:auto;width:22px;height:22px;flex:none;position:relative;transition:.2s}
.qa summary .plus::before,.qa summary .plus::after{content:"";position:absolute;inset:0;margin:auto;background:var(--gold)}
.qa summary .plus::before{width:14px;height:2px}.qa summary .plus::after{width:2px;height:14px;transition:.2s}
.qa[open] summary .plus::after{transform:rotate(90deg);opacity:0}
.qa .a{padding:0 22px 20px;color:var(--txt2);font-size:15px}

/* CTA band */
.cta-band{padding:0 0 90px}
.cta-card{max-width:var(--maxw);margin:0 auto;border:1px solid var(--gold3);border-radius:24px;padding:56px 40px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(80% 140% at 50% 0%,color-mix(in srgb,var(--gold) 13%,transparent),transparent 70%),var(--bg2)}
.cta-card h2{font-size:clamp(28px,4vw,42px);font-weight:700;max-width:20ch;margin:0 auto}
.cta-card p{color:var(--txt2);margin-top:14px;font-size:17px}
.cta-card .hero-cta{margin-top:28px}
.cta-card .fine{margin-top:16px;font-size:13px;color:var(--txt3)}

/* footer */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:54px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot-brand p{color:var(--txt2);font-size:14px;margin-top:14px;max-width:34ch}
.foot-col h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:14px}
.foot-col a{display:block;color:var(--txt2);font-size:14.5px;padding:5px 0}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{max-width:var(--maxw);margin:40px auto 0;padding:22px 26px 0;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--txt3);font-size:13px}

/* reveal */
.reveal{opacity:1}
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
  html.js .reveal.in{opacity:1;transform:none}
}

/* responsive */
@media(max-width:920px){
  .nav-links{display:none}
  .features,.reqs{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:30px}.steps::before{display:none}
  .lt{grid-template-columns:1fr;gap:30px}
  .stats-in{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:none}.stat{border-bottom:1px solid var(--line2)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cmp{overflow-x:auto}.cmp table{min-width:620px}
}
@media(max-width:560px){
  .features,.reqs{grid-template-columns:1fr}
  .hero{padding:44px 0 34px}
  .sec{padding:60px 0}
  .ribbon{grid-template-columns:1fr 1fr}.ribbon .cell:last-child{grid-column:span 2;border-top:1px solid var(--line2)}
  .theme-pair{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
  .foot-grid{grid-template-columns:1fr}
}