:root { --max: 980px; --fg:#1a1a1a; --muted:#666; --brand:#0b5; }
*{box-sizing:border-box} body{margin:0;font:16px/1.6 system-ui,Arial}
header,footer{border-top:4px solid var(--brand);background:#f7f7f7}
nav{max-width:var(--max);margin:auto;display:flex;gap:16px;flex-wrap:wrap;padding:14px}
nav a{color:#222;text-decoration:none;padding:6px 10px;border-radius:8px}
nav a:hover{background:#eaeaea}
main{max-width:var(--max);margin:32px auto;padding:0 16px}
h1,h2,h3{line-height:1.25}
.lead{font-size:20px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{border:1px solid #eee;border-radius:14px;padding:16px;background:#fff}
footer{margin-top:48px}
footer .wrap{max-width:var(--max);margin:auto;padding:18px 16px;color:#333}
small, .muted{color:var(--muted)}
.cta{display:inline-block;margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--brand);color:#fff;text-decoration:none}
.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.img-grid img{width:100%;height:auto;border-radius:8px;border:1px solid #eee}
code{background:#f3f3f3;padding:2px 6px;border-radius:6px}