@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@800;900&family=Rajdhani:wght@400;500;700&display=swap");
:root{--bg:#05070f;--panel:#0f1628;--text:#e8ecf6;--muted:#9aa4bd;--accent:#19e3ff;--accent2:#ff2a6d;--line:#1f2a44}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}header{border-bottom:1px solid var(--line);background:rgba(7,11,22,.9);position:sticky;top:0}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
nav{display:flex;gap:18px;align-items:center;height:60px;flex-wrap:wrap}nav .brand{font-weight:800;letter-spacing:.18em;color:var(--text);text-decoration:none;margin-right:auto}
nav a{text-decoration:none;color:var(--muted);font-size:14px}nav a:hover{color:var(--text)}
.hero{padding:72px 0 48px}.hero h1{font-size:clamp(40px,8vw,72px);margin:0;letter-spacing:.12em;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:19px;max-width:620px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:28px 0 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.card h3{margin:0 0 6px;font-size:16px}.card p{margin:0;color:var(--muted);font-size:14px}
main.doc{padding:40px 0 60px}main.doc h1{font-size:32px;margin-bottom:4px}main.doc h2{font-size:20px;margin-top:32px}.meta{color:var(--muted);font-size:14px}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:24px 0 40px}footer a{color:var(--muted)}
.btn{display:inline-block;background:var(--accent);color:#03101a;font-weight:700;padding:12px 20px;border-radius:10px;text-decoration:none}

body{font-family:Rajdhani,system-ui,sans-serif;font-size:18px;background:radial-gradient(ellipse at 20% -10%,rgba(25,227,255,.12),transparent 50%),radial-gradient(ellipse at 90% 0,rgba(255,42,109,.10),transparent 45%),var(--bg);background-attachment:fixed}
nav .brand{font-family:Orbitron;letter-spacing:.3em}
header{backdrop-filter:blur(12px);background:rgba(5,7,15,.75)}
header::after{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);background-size:200% 100%;animation:line 4s linear infinite}
@keyframes line{to{background-position:-200% 0}}
main.doc h1{font-family:Orbitron;letter-spacing:.04em;background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
main.doc h2{font-family:Orbitron;font-size:17px;letter-spacing:.06em;color:var(--accent)}
main.doc{animation:in .7s ease-out}
@keyframes in{from{opacity:0;transform:translateY(16px)}}
main.doc p,main.doc li{color:#c4cbe3}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}