:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#4b5563;
  --border:#e5e7eb;
  --card:#f9fafb;
  --accent:#2563eb;
  --accent2:#1d4ed8;
  --max:1120px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

.nav{
  position:sticky; top:0;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0;
}
.brand{ font-weight:700; color:var(--text); }
.menu a{ margin-left:14px; color:var(--text); font-weight:600; }

.hero{ padding:64px 0; }
h1{ font-size:44px; margin-bottom:12px; }
.lead{ font-size:18px; color:var(--muted); max-width:720px; }

.section{ padding:36px 0; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{
  border:1px solid var(--border);
  padding:16px;
  border-radius:12px;
  background:var(--card);
}

.footer{
  border-top:1px solid var(--border);
  padding:24px 0;
  color:var(--muted);
  font-size:14px;
}

@media(max-width:900px){
  .grid{ grid-template-columns:1fr; }
  h1{ font-size:36px; }
}