:root{--navy:#14264a;--blue:#1f66b5;--cyan:#2bb3e6;--bg:#f3f6fa;--ink:#0f1b33;--muted:#53607a;--line:#d9e1ec;--card:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#0b1426;--ink:#e8eef8;--muted:#9fb0cc;--line:#1f3157;--card:#101d36}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
a{color:var(--blue)}a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media (prefers-color-scheme:dark){a{color:var(--cyan)}}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
header.top img{height:44px;width:auto;border-radius:6px}
nav a{margin-left:22px;text-decoration:none;font-weight:600;color:var(--ink)}
nav a:hover{color:var(--blue)}
.hero{padding:72px 0 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:0 0 18px;color:var(--navy);letter-spacing:-.02em}
@media (prefers-color-scheme:dark){.hero h1{color:#fff}}
.hero p{font-size:1.15rem;color:var(--muted);max-width:46ch;margin:0 0 28px}
.hero img{width:100%;max-width:380px;justify-self:center;border-radius:18px;box-shadow:0 20px 50px -20px rgba(20,38,74,.35)}
.btn{display:inline-block;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff!important;font-weight:700;padding:13px 24px;border-radius:10px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
section{padding:48px 0;border-top:1px solid var(--line)}
section h2{font-size:1.6rem;margin:0 0 14px;color:var(--navy)}
@media (prefers-color-scheme:dark){section h2{color:#fff}}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:20px}
.cols div{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:8px;padding:18px 20px}
.cols h3{margin:0 0 6px;font-size:1.05rem}.cols p{margin:0;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.doc{max-width:760px;padding:48px 24px 72px}
.doc h1{color:var(--navy);margin:0 0 6px}
@media (prefers-color-scheme:dark){.doc h1{color:#fff}}
.doc h2{margin:36px 0 8px;font-size:1.3rem}
.doc .meta{color:var(--muted);margin-bottom:28px}
.doc li{margin:4px 0}
mark{background:#fff3b0;color:#222;padding:0 4px;border-radius:3px}
@media (max-width:720px){.hero{grid-template-columns:1fr;padding-top:40px}.hero img{order:-1;max-width:260px}nav a{margin-left:14px}}