
:root{
  --bg:#03070d;--panel:#081421;--panel2:#0d1d2c;--line:rgba(78,242,255,.35);
  --text:#e9fdff;--muted:#9fc9d1;--cyan:#4ef2ff;--green:#00f5a0;--gold:#ffd36a;--danger:#ff5b7f;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
radial-gradient(circle at 20% 5%,rgba(78,242,255,.15),transparent 28%),
radial-gradient(circle at 85% 20%,rgba(0,245,160,.10),transparent 27%),
linear-gradient(135deg,#03070d,#06111c 45%,#020409);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}a:hover{text-shadow:0 0 14px var(--cyan)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:20;background:#000;padding:12px;border:1px solid var(--cyan)}
.nav{position:sticky;top:0;z-index:10;background:rgba(3,7,13,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:center;justify-content:space-between;padding:14px 22px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.14em}.mark{width:40px;height:40px;border:1px solid var(--cyan);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 22px rgba(78,242,255,.55)}
.navlinks{display:flex;gap:12px;flex-wrap:wrap}.navlinks a,.btn{border:1px solid var(--line);padding:9px 12px;border-radius:999px;background:rgba(8,20,33,.75);color:var(--text);cursor:pointer}
.hero{min-height:78vh;display:grid;place-items:center;text-align:center;padding:70px 18px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-80px;background:linear-gradient(90deg,transparent,rgba(78,242,255,.08),transparent);animation:sweep 6s linear infinite}
@keyframes sweep{from{transform:translateX(-50%)}to{transform:translateX(50%)}}
h1{font-size:clamp(42px,8vw,98px);line-height:.95;margin:0;color:#fff;text-shadow:0 0 30px rgba(78,242,255,.8)}
h2{font-size:clamp(26px,4vw,46px);color:var(--cyan);margin:10px 0 16px}h3{color:#fff}
.kicker{color:var(--green);letter-spacing:.18em;text-transform:uppercase;font-weight:800}.lead{font-size:clamp(18px,2.2vw,25px);max-width:1000px;margin:20px auto;color:#d9fbff}
.container{max-width:1250px;margin:auto;padding:50px 20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:linear-gradient(180deg,rgba(13,29,44,.92),rgba(5,12,22,.94));border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.25);position:relative;overflow:hidden}
.card:after{content:"";position:absolute;inset:auto -20% -60% -20%;height:80%;background:radial-gradient(circle,rgba(78,242,255,.15),transparent 70%);pointer-events:none}
.badge{display:inline-block;border:1px solid rgba(0,245,160,.5);color:var(--green);padding:4px 10px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.input{width:min(100%,520px);padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#06111c;color:var(--text)}
.matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.metric{border:1px solid var(--line);padding:18px;border-radius:16px;background:#071421}.metric strong{display:block;font-size:30px;color:var(--gold)}
.flow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.step{padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:#081421}.arrow{color:var(--green);font-size:26px}
details{border:1px solid var(--line);border-radius:14px;padding:14px;background:#071421;margin:10px 0}summary{cursor:pointer;color:var(--cyan);font-weight:700}
.footer{border-top:1px solid var(--line);margin-top:60px;padding:30px 20px;color:var(--muted);text-align:center}
.toast{position:fixed;right:18px;bottom:18px;max-width:390px;background:#06111c;border:1px solid var(--line);padding:14px;border-radius:14px;box-shadow:0 0 30px rgba(78,242,255,.18);display:none;z-index:30}
.reveal{opacity:0;transform:translateY(22px);transition:.8s ease}.reveal.on{opacity:1;transform:none}
.status-ok{color:var(--green)}.status-warn{color:var(--gold)}.status-bad{color:var(--danger)}
@media print{.nav,.toolbar,.toast{display:none}.card{break-inside:avoid}body{background:#fff;color:#000}h1,h2{color:#000;text-shadow:none}}
