/* ---------- Base ---------- */
:root{
  --bg:#060a0f;
  --panel:#0c1219;
  --text:#d7e3ee;
  --muted:#8aa6b8;
  --neon:#00aaff;
  --neon-soft:#0093e6;
  --ok:#18e0a7;
  --warning:#ffb020;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background: radial-gradient(1200px 700px at 20% -10%, #0b1521 0, transparent 60%), var(--bg);
  overflow-x:hidden;
}

.mono{font-family:'JetBrains Mono',monospace}
.muted{color:var(--muted)}

/* background canvas */
#fx{position:fixed;inset:0;z-index:-1;filter:blur(0.4px);opacity:.35}

/* ---------- Nav ---------- */
.nav{
  max-width:1100px;
  margin:0 auto;
  padding:20px clamp(16px,4vw,28px);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:14px; letter-spacing:.6px; font-weight:700}
.brand span{font-size:14px; opacity:.9}
.logo{width:42px; height:42px}
.logo .stroke{fill:none; stroke:var(--neon); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;}
.nav a{color:var(--text); text-decoration:none; opacity:.9; margin-left:16px}
.nav a:hover{opacity:1}

/* ---------- Sections / hero ---------- */
.section{
  max-width:1100px;
  margin:0 auto;
  padding:56px clamp(16px,4vw,28px);
}
.hero{display:flex; align-items:center; min-height:60vh; padding-top:clamp(40px,7vw,90px)}
.tag{font:700 12px/1 'JetBrains Mono',monospace;color:var(--neon); letter-spacing:.15em; text-transform:uppercase}
.hero h1{font-size:clamp(28px,6vw,54px); line-height:1.12; margin:12px 0 14px; letter-spacing:-.02em}
.cursor-before{color:var(--neon)}
.sub{color:var(--muted); max-width:760px}
.ok{color:var(--ok)}
.pill,.btn,.ghost{padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; justify-content:center}
.pill{border:1px solid #16384d; color:var(--text); background:rgba(255,255,255,.02); cursor:pointer}
.btn{background:linear-gradient(180deg, var(--neon), var(--neon-soft)); color:#001018; box-shadow:0 0 24px rgba(0,170,255,.35); border:none; cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.ghost{border:1px solid #16384d; color:var(--text); background:rgba(255,255,255,.02)}

/* Video */
.video-wrap{margin-top:22px; background:#05080c; border:1px solid #142433; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.3)}
.video{width:100%; height:auto; display:block}
.yt{position:relative; padding-bottom:56.25%; height:0}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Download */
.download .dl-buttons{display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 8px}
.download .note{margin-top:6px; color:#9fb7c6; max-width:860px}

/* Grid cards (Protocol) */
.grid{display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:14px}
@media (min-width:760px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card{
  background:linear-gradient(180deg,#0a121b, #0a0f15);
  border:1px solid #142433; border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.3)
}
.card h3{margin:0 0 6px; font-size:18px; letter-spacing:.02em}
.card p{margin:0; color:#a6bed0}

/* Reviews */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
@media (min-width:760px){ .reviews-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1024px){ .reviews-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.review{
  background:linear-gradient(180deg,#0a121b, #081019);
  border:1px solid #142433; border-radius:16px; padding:16px;
}
.review .header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.stars{display:inline-flex; gap:2px; font-size:16px}
.star{color:#1b3445}        /* empty */
.star.full{color:var(--warning)} /* filled */
.badge{font:700 11px/1 'JetBrains Mono',monospace; color:var(--neon); background:rgba(0,170,255,.1); border:1px solid #123d54; padding:6px 8px; border-radius:999px}
.review .meta{color:#8aa6b8; font-size:13px; margin-top:6px}

/* Forms */
.formwrap{padding-bottom:80px}
.form{
  background:linear-gradient(180deg,#0a121b, #081019);
  border:1px solid #142433; border-radius:16px; padding:18px;
  display:grid; gap:12px; max-width:820px;
}
.form .row{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:680px){ .form .row{ grid-template-columns:1fr 1fr } }
.form input, .form select, .form textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #16384d; background:#071018; color:var(--text); outline:none;
}
.form textarea{resize:vertical}
.form input:focus, .form select:focus, .form textarea:focus{border-color:var(--neon); box-shadow:0 0 0 3px rgba(0,170,255,.2)}
.form .tiny{color:#86a1b4; font-size:12px}
.hidden{display:none}

/* Footer */
.footer{border-top:1px solid #142433; color:#8fa6b8; text-align:center; padding:28px; font-size:14px}