:root{--bg:#fff;--fg:#1c2230;--muted:#5a6475;--card:#f3f5f9;--accent:#2a5bd7;--line:#e2e6ee}
@media (prefers-color-scheme:dark){:root{--bg:#10141c;--fg:#e6e9f0;--muted:#98a1b3;--card:#181e29;--accent:#6c93ff;--line:#262d3b}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:60px}
.logo{font-weight:700;color:var(--fg);text-decoration:none}
nav a{margin-left:20px;color:var(--muted);text-decoration:none}
nav a:hover,a{color:var(--accent)}
main{padding:40px 20px;min-height:60vh}
.hero{padding:30px 0 20px}
.hero h1{font-size:2.4rem;margin:0 0 12px}
.hero p{color:var(--muted);max-width:620px}
.btn{display:inline-block;margin-top:12px;padding:10px 18px;background:var(--accent);color:#fff;border-radius:6px;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0}
.grid article{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px}
.grid h3{margin:0 0 6px}
.grid p{margin:0;color:var(--muted)}
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;padding:20px 0}