:root { --ink:#1c2430; --muted:#5b6b7f; --accent:#2f6fed; --bg:#ffffff; --soft:#f4f6f9; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; }
header { border-bottom:1px solid #e6ebf1; }
.wrap { max-width:880px; margin:0 auto; padding:0 20px; }
nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo { font-weight:700; font-size:20px; letter-spacing:.3px; color:var(--ink); text-decoration:none; }
.logo span { color:var(--accent); }
nav ul { list-style:none; display:flex; gap:22px; margin:0; padding:0; }
nav a { color:var(--muted); text-decoration:none; font-size:15px; }
nav a:hover { color:var(--accent); }
.hero { padding:64px 0 40px; }
.hero h1 { font-size:38px; line-height:1.25; margin:0 0 16px; }
.hero p { color:var(--muted); font-size:18px; max-width:620px; margin:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; padding:26px 0 10px; }
.card { background:var(--soft); border:1px solid #e6ebf1; border-radius:10px; padding:22px; }
.card h3 { margin:0 0 8px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
section.text { padding:26px 0; }
section.text h2 { font-size:24px; margin:0 0 10px; }
section.text p { color:var(--muted); margin:0 0 12px; }
footer { border-top:1px solid #e6ebf1; margin-top:48px; padding:22px 0 30px; color:var(--muted); font-size:14px; }
footer a { color:var(--muted); }