:root { --ink:#16203a; --muted:#5a6678; --accent:#2563eb; --accent2:#7c3aed; --bg:#ffffff; --soft:#f4f6fb; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; }
.wrap { max-width:880px; margin:0 auto; padding:0 24px; }
header { padding:22px 0; border-bottom:1px solid #e7ebf1; background:#fff; }
header .wrap { display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.22rem; letter-spacing:-0.02em; color:inherit; text-decoration:none; }
.logo svg { display:block; }
.logo span { color:var(--accent); }
nav a { color:var(--muted); text-decoration:none; margin-left:20px; font-size:0.95rem; }
nav a:hover { color:var(--ink); }
.hero { padding:64px 0 56px; background:linear-gradient(180deg,#f7f9ff 0%,#ffffff 100%); }
.hero .wrap { display:flex; align-items:center; gap:48px; flex-wrap:wrap; }
.hero-copy { flex:1 1 320px; }
.hero h1 { font-size:2.2rem; letter-spacing:-0.03em; line-height:1.22; margin-bottom:16px; }
.hero p.lead { font-size:1.12rem; color:var(--muted); max-width:520px; }
.hero-art { flex:0 1 300px; display:flex; justify-content:center; }
section { padding:46px 0; }
section.alt { background:var(--soft); }
h2 { font-size:1.35rem; margin-bottom:22px; letter-spacing:-0.02em; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; margin-top:8px; }
.feature { background:#fff; border:1px solid #e7ebf1; border-radius:12px; padding:20px; }
.feature .icon { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:linear-gradient(135deg,#eaf0ff,#f1ebff); }
.feature h3 { font-size:1.02rem; margin-bottom:6px; }
.feature p { color:var(--muted); font-size:0.95rem; }
.contact p { color:var(--muted); }
.contact a { color:var(--accent); }
footer { padding:36px 0 48px; border-top:1px solid #e7ebf1; color:var(--muted); font-size:0.88rem; }
footer a { color:var(--muted); }
article h1 { font-size:1.6rem; margin:48px 0 8px; letter-spacing:-0.02em; }
article .updated { color:var(--muted); font-size:0.9rem; margin-bottom:28px; }
article h2 { font-size:1.15rem; margin:28px 0 10px; }
article p, article li { color:#36404f; margin-bottom:12px; }
article ul { padding-left:22px; }
@media (max-width:720px){ .hero-art{display:none;} }