:root{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330; --line:#30363d;
  --fg:#e6edf3; --fg2:#9aa7b4; --fg3:#5b6675;
  --accent:#2f9bd6; --accent2:#39d98a; --warn:#e3b341; --danger:#f85149;
  --code:#0a0e14; --radius:12px; --maxw:1080px;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.65;font-size:16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.mono{font-family:var(--mono)}

/* top bar */
header.top{position:sticky;top:0;z-index:40;background:rgba(13,17,23,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topin{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
.topin .call{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:1px;color:var(--fg);text-decoration:none}
.topin a.call:hover{text-decoration:none;color:var(--fg)}
.topin .call b{color:var(--accent2)}
.topin nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.topin nav a{color:var(--fg2);font-size:14px;padding:7px 12px;border-radius:8px}
.topin nav a:hover{background:var(--bg3);color:var(--fg);text-decoration:none}
.topin nav a.cta{background:var(--accent);color:#fff;font-weight:600}
.topin nav a.cta:hover{background:#3aa9e6}

main{max-width:var(--maxw);margin:0 auto;padding:0 24px 100px}
section{margin:0 0 72px;scroll-margin-top:80px}
h1{font-size:40px;line-height:1.12;margin:0 0 14px}
h2{font-size:28px;margin:0 0 8px}
h2 .ic{margin-right:10px}
.sec-lead{color:var(--fg2);max-width:72ch;margin:0 0 26px;font-size:17px}
h3{font-size:18px;margin:22px 0 8px;color:#cdd9e5}
p{margin:0 0 14px}
strong{color:#fff}
.muted{color:var(--fg2)}
.center{text-align:center}
code.inline{background:var(--bg3);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-family:var(--mono);font-size:13px;color:#ffd9a8}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(900px 400px at 20% -10%,#13314e 0%,transparent 60%),
             radial-gradient(700px 360px at 90% 0%,#10302440 0%,transparent 55%),#0d1117}
.heroin{max-width:var(--maxw);margin:0 auto;padding:74px 24px 64px}
.hero .eyebrow{font-family:var(--mono);color:var(--accent2);letter-spacing:.18em;
  text-transform:uppercase;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.beta{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  background:#2a210a;border:1px solid #5a4a16;color:var(--warn);padding:3px 9px;border-radius:999px}
.hero h1{background:linear-gradient(90deg,#7fd6ff,#39d98a);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;max-width:18ch}
.hero .lead{font-size:19px;color:#c4d0dc;max-width:60ch;margin:0 0 26px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:10px;padding:12px 20px;
  font-size:15px;font-weight:600;border:1px solid var(--line);background:var(--bg3);color:var(--fg)}
.btn:hover{text-decoration:none;border-color:var(--accent);background:#16202c}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#3aa9e6}
.btn.green{background:var(--accent2);border-color:var(--accent2);color:#04150c}
.btn.green:hover{background:#52e89c}

/* QRZ card */
.idcard{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:34px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.idcard .badge{font-family:var(--mono);font-weight:700;font-size:26px;letter-spacing:1px;
  color:var(--accent2);background:#0f2018;border:1px solid #1d3b2c;border-radius:10px;padding:10px 18px}
.idcard .facts{display:flex;gap:26px;flex-wrap:wrap}
.idcard .facts div{font-size:14px}
.idcard .facts span{display:block;color:var(--fg3);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:3px}

/* cards / grid */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{margin-top:0;display:flex;align-items:center;gap:9px}
.card .ic{font-size:20px}
.card p{font-size:15px;color:var(--fg2);margin-bottom:0}

/* flow diagram */
.flow{background:var(--code);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin:8px 0 0;font-family:var(--mono);font-size:13px;color:#bcd;overflow-x:auto;line-height:1.7}
.flow b{color:var(--accent2)} .flow .a{color:var(--accent)} .flow .w{color:var(--warn)}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:16px}
.steps li{position:relative;padding:18px 20px 18px 64px;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--radius)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px}
.steps li b{color:#fff}
.steps li .small{font-size:14px;color:var(--fg2)}

/* alerts table */
.alerts{display:grid;gap:14px}
.alert{display:flex;gap:16px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;align-items:flex-start}
.alert .em{font-size:26px;line-height:1.1;flex:0 0 auto}
.alert h3{margin:0 0 4px}
.alert p{margin:0;font-size:14px;color:var(--fg2)}
.alert.offline{border-left:3px solid var(--danger)}
.alert.pipe{border-left:3px solid var(--warn)}
.alert.batt{border-left:3px solid var(--accent)}
.alert.newg{border-left:3px solid var(--accent2)}

/* screenshots */
.shot{margin:22px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg2)}
.shot img{display:block;width:100%}
.shot figcaption{font-size:13px;color:var(--fg2);padding:10px 14px;border-top:1px solid var(--line);background:var(--bg)}
.shot.narrow{max-width:460px;margin-left:auto;margin-right:auto}
.shots{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin:22px 0}
.shots .shot{margin:0}

/* callouts */
.note,.tip,.warn{border-radius:var(--radius);padding:14px 16px 14px 46px;margin:18px 0;
  position:relative;border:1px solid var(--line);font-size:15px;background:var(--bg2)}
.note::before,.tip::before,.warn::before{position:absolute;left:16px;top:13px;font-size:16px}
.note{border-left:3px solid var(--accent)} .note::before{content:"ℹ️"}
.tip{border-left:3px solid var(--accent2);background:#0f2018} .tip::before{content:"✅"}
.warn{border-left:3px solid var(--warn);background:#241f10} .warn::before{content:"⚠️"}

/* CTA band */
.band{background:linear-gradient(160deg,#13314e,#0d1117);border:1px solid var(--line);
  border-radius:16px;padding:40px 34px;text-align:center}
.band h2{border:0;justify-content:center}
.band p{color:#c4d0dc;max-width:60ch;margin:0 auto 22px}

/* footer */
footer{border-top:1px solid var(--line);padding:30px 24px;color:var(--fg2);font-size:13px}
.footin{max-width:var(--maxw);margin:0 auto;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.footin .sp{margin-left:auto}
footer a{color:var(--fg2)} footer a:hover{color:var(--fg)}

@media(max-width:820px){
  .grid.g2,.grid.g3,.shots{grid-template-columns:1fr}
  h1{font-size:30px} h2{font-size:23px}
  .heroin{padding:52px 20px 44px}
  .topin nav a:not(.cta){display:none}
}