:root { --bg: #0b0c10; --fg:#e5e7eb; --muted:#9ca3af; --card:#111317; --acc:#60a5fa; --max: 960px; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 Inter,system-ui,sans-serif}
a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1rem}
.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{font-weight:800;letter-spacing:.3px}
.hero{padding:6rem 0 2rem}
h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.1;margin:.2rem 0}
.lead{color:var(--muted);max-width:60ch}
.cta{display:inline-block;margin-top:1rem;padding:.7rem 1rem;background:var(--acc);color:#0b0c10;border-radius:.6rem;font-weight:600}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:2rem 0 4rem}
.card{background:var(--card);border:1px solid #1f2430;padding:1rem;border-radius:14px;transition:transform .15s}
.card:hover{transform:translateY(-2px)}
.card h3{margin:.3rem 0}
.meta{font-size:.9rem;color:var(--muted)}
.footer{padding:3rem 0;color:var(--muted)}