:root{--bg:#0d0e1f;--card:#16183a;--text:#e8eaf8;--muted:#9ba1c9;--accent:#7c6cff;--line:#2a2d5c}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top,#1d1f4d 0%,var(--bg) 55%);color:var(--text);line-height:1.7;min-height:100vh}
nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.3rem;color:#fff;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:10px}
nav .links a{color:var(--muted);text-decoration:none;margin-left:18px}
nav .links a:hover{color:#fff}
.hero{text-align:center;padding:48px 20px 20px}
.hero h1{margin:0 0 8px;font-size:2.2rem}
.hero p{margin:0;color:var(--muted)}
.card{max-width:760px;margin:24px auto 48px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 32px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.card h2{color:var(--accent);margin-top:28px}
.card li{margin-bottom:8px}
.card a{color:var(--accent)}
footer{text-align:center;color:var(--muted);padding:24px;border-top:1px solid var(--line);font-size:.9rem}
footer a{color:var(--muted);margin:0 8px}
@media(max-width:600px){.card{margin:16px 12px 32px;padding:20px}.hero h1{font-size:1.7rem}}