:root{--bg:#0f172a;--card:#ffffff;--text:#1e293b;--muted:#64748b;--accent:#3b82f6;--light:#f1f5f9}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--light);line-height:1.65}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header{background:var(--bg);color:#fff;position:sticky;top:0;z-index:10}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.nav{display:flex;justify-content:space-between;align-items:center;min-height:64px;flex-wrap:wrap}
.logo{font-weight:700;font-size:1.2rem;color:#fff}
.nav ul{display:flex;gap:22px;list-style:none}
.nav a{color:#cbd5e1}.nav a:hover,.nav a.active{color:#fff;text-decoration:none}
.hero{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;padding:90px 0;text-align:center}
.hero h1{font-size:2.6rem;margin-bottom:14px}.hero p{color:#cbd5e1;max-width:620px;margin:0 auto 26px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:8px;font-weight:600}
.btn:hover{text-decoration:none;opacity:.9}
main{padding:50px 0}
h2{margin-bottom:16px;font-size:1.8rem}h3{margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:24px}
.card{background:var(--card);padding:26px;border-radius:12px;box-shadow:0 2px 10px rgba(15,23,42,.06)}
.card p{color:var(--muted)}
.meta{color:var(--muted);font-size:.9rem;margin-bottom:8px}
p+p{margin-top:12px}
footer{background:var(--bg);color:#94a3b8;padding:30px 0;text-align:center;font-size:.9rem;margin-top:40px}
footer a{color:#cbd5e1}
@media(max-width:640px){.hero h1{font-size:2rem}.nav ul{gap:14px;padding-bottom:10px}}