*{box-sizing:border-box}
:root{
  --bg:#07100f;
  --bg2:#0b1715;
  --panel:#0d1d1a;
  --line:#17342e;
  --text:#e7fff8;
  --muted:#85a79e;
  --green:#54ffb1;
  --cyan:#4ed8ff;
  --amber:#f7d36a;
}
html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 75% 10%,rgba(78,216,255,.08),transparent 25%),
radial-gradient(circle at 10% 60%,rgba(84,255,177,.06),transparent 30%),
var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(84,255,177,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(84,255,177,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.container{width:min(1120px,calc(100% - 40px));margin:auto;position:relative}
.narrow{width:min(780px,calc(100% - 40px))}
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(7,16,15,.88);backdrop-filter:blur(14px)}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:220px;display:block}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;padding:9px 12px;border:1px solid transparent;border-radius:999px;font-size:.92rem;font-weight:700}
nav a:hover,nav a.active{color:var(--green);border-color:var(--line);background:rgba(84,255,177,.04)}
.hero{padding:92px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}
.status-line{display:flex;align-items:center;gap:10px;color:var(--green);font:700 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;margin-bottom:32px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(84,255,177,.55);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(84,255,177,.55)}70%{box-shadow:0 0 0 10px rgba(84,255,177,0)}100%{box-shadow:0 0 0 0 rgba(84,255,177,0)}}
.eyebrow{color:var(--cyan);font:800 .76rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.16em}
h1,h2,h3{line-height:1.05;letter-spacing:-.04em;margin-top:0}
h1{font-size:clamp(3.2rem,7vw,6rem);margin-bottom:24px}
h1 span{color:var(--green)}
h2{font-size:clamp(2.2rem,4.8vw,3.8rem)}
h3{font-size:1.35rem}
.lead,.copy{color:var(--muted);font-size:1.15rem;max-width:760px}
.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.button{display:inline-block;text-decoration:none;border-radius:10px;padding:13px 18px;font-weight:800}
.button.primary{background:var(--green);color:#062219;box-shadow:0 0 30px rgba(84,255,177,.14)}
.button.ghost{color:var(--text);border:1px solid var(--line)}
.radar-card,.feature-card,.panel,.terminal{background:linear-gradient(180deg,rgba(13,29,26,.95),rgba(8,19,17,.95));border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.radar-card{border-radius:22px;padding:22px}
.radar{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle,rgba(84,255,177,.12),transparent 60%),#081512;border:1px solid #205044}
.ring{position:absolute;border:1px solid rgba(84,255,177,.24);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.r1{width:76%;height:76%}.r2{width:50%;height:50%}.r3{width:24%;height:24%}
.cross{position:absolute;background:rgba(84,255,177,.18)}
.cross.x{height:1px;width:100%;top:50%}.cross.y{width:1px;height:100%;left:50%}
.sweep{position:absolute;left:50%;top:50%;width:48%;height:48%;transform-origin:0 0;background:conic-gradient(from 270deg,rgba(84,255,177,.28),rgba(84,255,177,0) 30deg,transparent 30deg);animation:sweep 4s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.target{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.t1{left:66%;top:30%}.t2{left:30%;top:62%}.t3{left:72%;top:71%}
.radar-footer{display:flex;justify-content:space-between;gap:16px;margin-top:16px;color:var(--muted);font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.ok{color:var(--green)}
.metrics{border-block:1px solid var(--line);background:rgba(13,29,26,.55)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.metric-grid>div{padding:26px;border-right:1px solid var(--line)}
.metric-grid>div:last-child{border-right:0}
.metric-value{display:block;color:var(--green);font:800 1.55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.metric-label{display:block;color:var(--muted);font-size:.82rem;margin-top:7px}
.section{padding:82px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.feature-card{padding:26px;border-radius:18px}
.feature-card p{color:var(--muted)}
.card-number{display:block;color:var(--cyan);font:800 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:28px}
.band{border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(84,255,177,.03),rgba(78,216,255,.03))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.terminal{border-radius:14px;overflow:hidden}
.terminal-top{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 13px}
.terminal-top span{width:9px;height:9px;border-radius:50%;background:#21453d}
.terminal pre{margin:0;padding:24px;overflow:auto;color:var(--green);font-size:.9rem}
.page-hero{padding:86px 0 45px;border-bottom:1px solid var(--line)}
.panel{padding:28px;border-radius:18px;margin-bottom:40px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:13px 0;border-top:1px solid var(--line)}
.kv span{color:var(--muted)}
.kv strong{overflow-wrap:anywhere}
.text-link{color:var(--green);font-weight:800}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font:700 .74rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.error-page{min-height:100vh;display:grid;place-items:center;padding:60px 0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:780px){
  .header-inner{align-items:flex-start;flex-direction:column;padding:16px 0}
  .hero-grid,.cards,.split,.metric-grid{grid-template-columns:1fr}
  .metric-grid>div{border-right:0;border-bottom:1px solid var(--line)}
  .hero{padding:62px 0}
  h1{font-size:clamp(2.9rem,13vw,4.5rem)}
  .brand img{width:195px}
  .kv{grid-template-columns:1fr;gap:2px}
}