:root { --fg:#111; --bg:#fff; --muted:#666; --link:#0a58ca; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--link); text-decoration: none; }
header, footer { padding: 1rem; border-bottom: 1px solid #eee; }
footer { border-top:1px solid #eee; border-bottom:0; }
.nav { max-width: 1000px; margin: 0 auto; display:flex; gap:1rem; align-items:center; }
.nav .brand { font-weight:600; margin-right:auto; }
.main { max-width: 1000px; margin: 2rem auto; padding: 0 1rem; }
.hero { display:grid; grid-template-columns: 2fr 1fr; gap:2rem; align-items:start; }
.hero img { width:100%; border-radius:8px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1rem; }
.card { border:1px solid #eee; border-radius:8px; padding:1rem; }
.muted { color: var(--muted); }
@media (max-width:800px){ .hero { grid-template-columns:1fr; } }