:root{--bg:#f6f7fb;--fg:#1d2433;--muted:#5a6478;--card:#fff;--accent:#2f6fed;--line:#e3e7ef}
@media (prefers-color-scheme:dark){:root{--bg:#11151d;--fg:#e8ecf3;--muted:#9aa4b5;--card:#1a202b;--accent:#6c9cff;--line:#2a3140}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg)}
.hero{text-align:center;padding:4rem 1.25rem 2rem;max-width:44rem;margin:0 auto}
.hero h1{font-size:clamp(2rem,5vw,2.8rem);margin:0 0 .5rem;letter-spacing:-.02em}
.hero p{color:var(--muted);margin:0;font-size:1.1rem}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));max-width:64rem;margin:0 auto;padding:1rem 1.25rem 3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card img{border-radius:14px}
.card h2{margin:.9rem 0 .3rem;font-size:1.25rem}
.card p{margin:0 0 1rem;color:var(--muted)}
.links{margin-top:auto!important;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;font-size:.92rem}
a{color:var(--accent)}
.btn{background:var(--accent);color:#fff;text-decoration:none;padding:.5rem .95rem;border-radius:10px;font-weight:600}
.btn:hover,.btn:focus-visible{filter:brightness(1.1)}
a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
footer{text-align:center;color:var(--muted);font-size:.9rem;padding:0 1rem 3rem}
footer p{margin:.25rem 0}