:root{--bg:#0b0f14;--surface:#121821;--muted:#9aa3ad;--text:#e8edf2;--accent:#4da3ff;--radius:16px;--gap:1rem;}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text)}
.container{width:min(1100px,92%);margin:0 auto}.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{text-decoration:none;color:var(--text);font-weight:800}.brand span{color:var(--accent)}.menu{display:none;background:none;border:1px solid #2a3441;color:var(--text);padding:.4rem .6rem;border-radius:10px}
.navlist{list-style:none;display:flex;gap:1rem;margin:0;padding:0}.navlist a{color:var(--text);text-decoration:none;opacity:.9}
.btn{background:var(--accent);color:#041423;padding:.6rem 1rem;border-radius:999px;text-decoration:none;font-weight:700}
.hero{padding:3rem 0 2rem;text-align:center}.hero h1{font-size:clamp(2rem,3vw + 1rem,3rem);line-height:1.1}.hero h1 span{color:var(--accent)}
.hero p{color:var(--muted);max-width:60ch;margin:.75rem auto 1.25rem}h2{margin-top:2rem}.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);padding:1rem;border-radius:var(--radius);border:1px solid #1e2632;box-shadow:0 8px 24px rgba(0,0,0,.25)}.card img{width:100%;border-radius:12px;margin-bottom:.75rem;display:block}
.card p{color:var(--muted)}footer{padding:2rem 0 3rem;color:var(--muted)}
@media(max-width:880px){.menu{display:block}.navlist{display:none;position:absolute;right:4%;top:64px;background:var(--surface);padding:.75rem;border-radius:12px;border:1px solid #1e2632;flex-direction:column}.navlist.show{display:flex}.grid{grid-template-columns:1fr}}