:root{--bg:#eef5fb;--fg:#1b2a3a;--muted:#55697e;--accent:#2f7fc1;--card:#ffffff;--line:#d3e2f0;--hero:#dcecf9}
@media (prefers-color-scheme:dark){:root{--bg:#0f1824;--fg:#e4edf6;--muted:#9fb2c6;--accent:#6fb4ee;--card:#162334;--line:#243750;--hero:#17283c}}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Segoe UI",system-ui,Arial,sans-serif;line-height:1.7}
header,main,footer{max-width:46rem;margin:0 auto;padding:0 1.25rem}
header{padding-top:1.4rem;padding-bottom:.6rem}
.brand{font-size:1.35rem;font-weight:600;color:var(--accent);text-decoration:none;letter-spacing:.03em}
nav{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.85rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
nav a{color:var(--muted);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--fg);border-bottom-color:var(--accent)}
.hero{background:var(--hero);border-radius:14px;padding:1.4rem 1.4rem 1.2rem;margin:1.5rem 0 1rem}
h1{font-size:2rem;line-height:1.2;margin:1.6rem 0 .4rem;font-weight:600}
.hero h1{margin-top:.2rem}
h2{font-size:1.25rem;margin:1.8rem 0 .2rem;color:var(--accent);font-weight:600}
p{margin:.7rem 0}
.lead{font-size:1.12rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem;margin:1rem 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem 1.05rem}
.card h3{margin:.1rem 0 .15rem;font-size:1.05rem}
.card p{margin:.3rem 0;font-size:.95rem;color:var(--muted)}
blockquote{margin:1.5rem 0;padding:.2rem 1.1rem;border-left:4px solid var(--accent);color:var(--muted);font-style:italic}
footer{margin-top:3rem;padding-top:1rem;padding-bottom:2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
a{color:var(--accent)}
@media (max-width:480px){html{font-size:16.5px}h1{font-size:1.65rem}}