:root { --bg:#ffffff; --text:#0b1220; --muted:#5b6372; --brand:#3b82f6; --card:#f4f7fb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color:var(--text); background: var(--bg); }
.wrap { max-width: 980px; margin: 0 auto; padding: 1.25rem; }
.header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.header nav a { margin-left:1rem; color:var(--text); text-decoration:none; font-weight:600; }
.header nav a:hover { color:var(--brand); }
.logo { width:34px; height:34px; }
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .25rem; }
.tag { color:var(--muted); font-size:1.05rem; }
.cta { margin-top:1rem; }
.btn { display:inline-block; background:var(--brand); color:white; padding:.7rem 1rem; border-radius:.6rem; text-decoration:none; font-weight:700; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; margin:2rem 0; }
.cards article { background:var(--card); padding:1rem; border-radius:1rem; }
.about, .contact { margin:2.5rem 0; }
.footer { border-top:1px solid #e6ebf2; padding-top:1rem; color:var(--muted); }
code { background:#eef3ff; padding:.15rem .35rem; border-radius:.35rem; }