body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#222}
header{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:10}
nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
nav a{color:#222;text-decoration:none;margin:0 10px}
nav .brand{font-weight:700}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.btn{display:inline-block;padding:10px 16px;border-radius:6px;text-decoration:none;border:1px solid #222;color:#222}
.btn.primary{background:#222;color:#fff}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{border:1px solid #eee;border-radius:12px;padding:16px;background:#fff}
footer{border-top:1px solid #eee;margin-top:40px}
footer .inner{max-width:1100px;margin:0 auto;padding:16px;color:#777}
.hero{max-width:1100px;margin:24px auto;padding:0 16px;display:grid;gap:24px;grid-template-columns:1.1fr .9fr}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.hero-img{aspect-ratio:4/3;border-radius:12px;background:#f4f4f4 url('assets/hero.jpg') center/cover no-repeat}