:root { --max: 1000px; --radius: 14px; --shade: 0 8px 28px rgba(0,0,0,.06); }
*{box-sizing:border-box}
body { margin:0; font:16px/1.6 system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif; color:#111 }
.wrap { max-width:var(--max); margin:0 auto; padding:0 20px }
.site-header { position:sticky; top:0; background:#fff; border-bottom:1px solid #eef0f4 }
.logo { font-weight:700; text-decoration:none; color:#111; margin-right:24px }
.nav { display:inline-flex; gap:14px }
.nav a{ text-decoration:none; color:#333; padding:14px 6px; border-bottom:2px solid transparent }
.nav a.active{ border-color:#111 }
.hero { padding:64px 0; background:linear-gradient(180deg,#f8fafc, #fff) }
.section { padding:48px 0 }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.card { border:1px solid #e7eaf1; border-radius:var(--radius); padding:16px; background:#fff; box-shadow:var(--shade) }
.site-footer { border-top:1px solid #eef0f4; padding:28px 0; color:#666 }