:root{
  --bg:#040913;
  --ink:#e9eef7;
  --muted:#9aa7c6;
  --line:#1a2442;
  --card:#0a1124;
  --accent:#8fd6ff;
  --ok:#60ffa7;
  --warn:#ffd36b;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:radial-gradient(1400px 900px at 70% -10%, #0b1430 0%, var(--bg) 55%);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  overflow-x:hidden;
}
canvas#bg{position:fixed; inset:0; z-index:-3; filter:contrast(1.08) saturate(1.05) brightness(.94)}
.overlay{position:fixed; inset:0; pointer-events:none; z-index:-2}
.overlay:before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:soft-light; opacity:.22;
}
.wrap{max-width:1180px; margin:0 auto; padding:28px}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line)}
.brand{display:flex; gap:12px; align-items:center}
.dot{width:9px;height:9px;border-radius:99px;background:var(--ok);box-shadow:0 0 20px var(--ok)}
.badge{font-size:12px; color:var(--muted); padding:4px 10px; border:1px solid var(--line); border-radius:999px}
.hero{display:grid; gap:14px; padding:64px 0 18px}
.kicker{letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-size:12px}
h1{
  margin:0; font-size:56px; line-height:1.06; letter-spacing:-.02em;
  position:relative;
  background:linear-gradient(90deg,#e9eef7,#a7d9ff,#e9eef7);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1 .glitch{position:absolute; inset:0; color:#a7d9ff; text-shadow:2px 0 #7bd0ff; clip-path:inset(0 0 52% 0); opacity:.8; filter:blur(.3px); animation:shift 2.2s infinite linear}
@keyframes shift{
  0%{transform:translate(0,0)}
  20%{transform:translate(1px,-0.6px)}
  40%{transform:translate(-0.8px,0.8px)}
  60%{transform:translate(0.6px,1px)}
  80%{transform:translate(-1px,-0.4px)}
  100%{transform:translate(0,0)}
}
.sub{color:var(--muted); max-width:780px; margin:0}
.marquee{overflow:hidden; border-block:1px solid var(--line); margin-top:18px}
.track{display:flex; gap:42px; padding:10px 0; white-space:nowrap; animation:roll 18s linear infinite}
@keyframes roll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.hr{height:1px; background:linear-gradient(90deg, transparent, #1c2748, transparent); margin:26px 0}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--line); border-radius:18px; padding:18px;
  transform-style:preserve-3d; transition:transform .15s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px) rotateX(2deg) rotateY(-2deg); border-color:#2b3b66}
.card h3{margin:0 0 6px 0}
.center{display:grid; place-items:center; min-height:46vh; text-align:center}
.center h2{font-size:34px; margin:0}
.note{font-size:12px; color:var(--muted); padding:10px 12px; border:1px dashed var(--line); border-radius:10px}
.footer{color:var(--muted); font-size:12px; border-top:1px dashed var(--line); padding-top:12px; margin-top:42px}
.kvals{display:flex; gap:10px; flex-wrap:wrap}
.kval{display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted)}
.kval .light{width:7px; height:7px; border-radius:999px; background:var(--warn); box-shadow:0 0 14px rgba(255,211,107,.5)}
.kval.ok .light{background:var(--ok); box-shadow:0 0 14px rgba(96,255,167,.5)}
.section-title{font-size:20px; letter-spacing:.02em; color:#cfe3ff; margin:0 0 10px 0}
.faq dt{font-weight:700; margin-top:10px}
.faq dd{margin:0 0 8px 0; color:var(--muted)}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table td,.table th{border:1px solid var(--line); padding:8px; text-align:left}
.small{font-size:12px; color:var(--muted)}
@media (max-width:640px){
  h1{font-size:38px}
  .center h2{font-size:26px}
}