:root{--bg:#0b0b0b;--fg:#eaeaea;--muted:#9aa0a6;--accent:#ff4d4f;--card:#121212;--line:#222;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline}
header{position:sticky;top:0;z-index:10;background:rgba(11,11,11,.8);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid var(--line)}
nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:14px 18px}
nav .brand{font-weight:700;letter-spacing:.3px}
.menu{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto}
.menu a{padding:8px 12px;border:1px solid var(--line);border-radius:12px}
main{max-width:900px;margin:32px auto;padding:0 18px}
.hero{background:linear-gradient(180deg,rgba(255,77,79,.12),transparent);border:1px solid var(--line);padding:24px;border-radius:16px}
.hero h1{margin:0 0 10px 0;font-size:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
footer{max-width:1100px;margin:40px auto 60px;padding:0 18px;color:var(--muted);font-size:14px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--line);}
:focus-visible{outline:2px dashed var(--accent);outline-offset:3px}
@media (prefers-reduced-transparency: reduce){
  header{backdrop-filter:none;background:var(--bg)}
}