:root { --bg:#0f1419; --fg:#e7ecf1; --muted:#9aa7b5; --card:#1a2330; --acc:#3d8bfd; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
.wrap { max-width:920px; margin:0 auto; padding:1.25rem; }
header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #243041; }
.logo { font-weight:700; letter-spacing:.02em; }
nav a { color:var(--muted); margin-left:1rem; text-decoration:none; }
nav a:hover { color:var(--acc); }
h1 { font-size:1.8rem; margin-top:2rem; }
p { color:var(--muted); }
.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:2rem 0; }
.cards article { background:var(--card); padding:1rem 1.1rem; border-radius:12px; border:1px solid #2a3748; }
footer { border-top:1px solid #243041; color:var(--muted); margin-top:2rem; }
a { color:var(--acc); }