:root { --bg:#f7f7f4; --fg:#1d2330; --muted:#5a6272; --accent:#2f6fdb; --card:#ffffff; --line:#dcdfe6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#161a22; --fg:#f2f4f8; --muted:#a7b0c0; --accent:#7aa7ff; --card:#1d2330; --line:#2d3546; }
}
:root[data-theme="dark"] { --bg:#161a22; --fg:#f2f4f8; --muted:#a7b0c0; --accent:#7aa7ff; --card:#1d2330; --line:#2d3546; }
* { box-sizing: border-box; }
body { margin:0; font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
header, main, footer { max-width: 960px; margin: 0 auto; padding: 0 16px; }
header { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:12px; }
header a.brand { font-weight:700; font-size:1.15rem; color:var(--fg); text-decoration:none; }
nav a { color:var(--muted); text-decoration:none; margin-left:14px; }
nav a:hover, nav a[aria-current="page"] { color:var(--fg); }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height:1.1; margin: 28px 0 8px; }
h2 { font-size: 1.35rem; margin: 32px 0 8px; }
p.lead { font-size: 1.2rem; color: var(--muted); margin: 0 0 20px; }
a { color: var(--accent); }
.cta { display:inline-block; background:var(--accent); color:#fff; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:600; margin: 6px 10px 6px 0; }
.cta.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; }
.card h3 { margin:0 0 6px; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:0.95rem; }
ul.plain { padding-left: 18px; }
footer { margin-top:48px; padding-top:18px; padding-bottom:32px; border-top:1px solid var(--line); color:var(--muted); font-size:0.9rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
