:root{--bg:#0b1020;--bg2:#16224f;--sec:#f4f6fa;--sec-t:#1a2238;--sec-m:#475069;--card:#121a35;--ln:#243056;--am:#f5a524;--am2:#ffb94d;--t:#fff;--m:#b8c0d9;--lk:#8a5a00;--wa:#25d366;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sec:#101830;--sec-t:#fff;--sec-m:#b8c0d9;--lk:#f5a524}}
:root[data-theme="dark"]{--sec:#101830;--sec-t:#fff;--sec-m:#b8c0d9;--lk:#f5a524}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));height:100%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--t);line-height:1.7;min-height:100%}
a{color:inherit}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--am);color:var(--bg);padding:8px 12px;z-index:100;border-radius:8px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--ln)}
.hd{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 24px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;text-decoration:none;white-space:nowrap}
.logo svg{width:26px;height:26px}.logo small{font-size:.65rem;color:var(--am)}
nav{display:flex;gap:4px;align-items:center}
nav a{text-decoration:none;font-weight:600;font-size:.92rem;padding:8px 14px;border-radius:999px;border:1.5px solid transparent}
nav a:hover{color:var(--am)}nav a.on{border-color:var(--am);background:#ffffff0d}
.btn{display:inline-block;background:var(--am);color:var(--bg);font-weight:700;padding:13px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font:700 .95rem Inter,system-ui,sans-serif;transition:transform .2s,background .2s;text-align:center}
.btn:hover{transform:translateY(-2px);background:var(--am2)}
.btn.dk{background:var(--bg);color:#fff}.btn.sm{padding:11px 22px}.btn.line{background:transparent;color:#fff;border:1.5px solid #ffffff55}.btn.g{background:var(--wa);color:#fff}
.burger{display:none;background:none;border:1.5px solid var(--ln);color:#fff;border-radius:10px;width:42px;height:42px;font-size:1.2rem;cursor:pointer}
.wrap{max-width:820px;margin:auto;padding:0 24px}.wide{max-width:1200px;margin:auto;padding:0 24px}
section{padding:68px 0}
h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;font-weight:800;margin-bottom:20px}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.2;font-weight:800;margin-bottom:14px}
h3{font-size:1.1rem;margin-bottom:6px}
p{margin-bottom:14px;color:var(--m)}
.crumb{font-size:.85rem;color:var(--m);margin-bottom:12px}.crumb a{color:var(--am)}
.hero{background:radial-gradient(900px 400px at 85% -10%,#1d2b66 0,transparent 70%),var(--bg);padding:60px 0 64px}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}.hero .meta{margin-top:20px;font-size:.92rem}
.light{background:var(--sec);color:var(--sec-t)}.light p,.light li{color:var(--sec-m)}.light strong,.light h2,.light h3{color:var(--sec-t)}
.light a:not(.btn){color:var(--lk)}.light ul,.light ol{padding-left:22px;margin:14px 0}.light li{margin-bottom:9px}
.band{background:var(--am);color:var(--bg);padding:16px 0}.band .wide{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.band p{color:var(--bg);margin:0;font-size:.95rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat{background:#ffffff08;border:1px solid var(--ln);border-radius:14px;padding:16px;text-align:center}.stat b{display:block;font-size:1.4rem;color:var(--am)}.stat span{font-size:.8rem;color:var(--m)}
.tw{overflow-x:auto;border:1px solid var(--ln);border-radius:14px;margin:20px 0;background:var(--card)}
table{width:100%;border-collapse:collapse;min-width:520px;font-size:.93rem}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--ln)}th{font-size:.85rem;background:#ffffff08}tr:last-child td{border-bottom:0}td a{color:var(--am)}td.n{font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:26px}
.card{background:var(--card);border:1px solid var(--ln);border-radius:18px;padding:24px 20px;display:flex;flex-direction:column;position:relative;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--am)}.card.rec{border:2px solid var(--am);background:linear-gradient(180deg,#1b2447,var(--card))}
.tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--am);color:var(--bg);font-size:.72rem;font-weight:800;padding:3px 14px;border-radius:999px}
.card h3{font-size:1rem;color:var(--m);font-weight:600}.pr{font-size:2.4rem;font-weight:800;line-height:1.1;margin:6px 0}.pm{font-size:.88rem;color:var(--am);margin-bottom:14px}
.card ul{list-style:none;margin-bottom:20px;flex:1}.card li{font-size:.87rem;color:var(--m);padding:5px 0 5px 22px;position:relative}.card li::before{content:"✓";position:absolute;left:0;color:var(--am);font-weight:800}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px}
.step{background:#ffffff08;border:1px solid var(--ln);border-radius:16px;padding:22px}
.step::before{counter-increment:s;content:counter(s);display:flex;width:36px;height:36px;border-radius:50%;background:var(--am);color:var(--bg);font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.step b{display:block;margin-bottom:4px}.step p{font-size:.88rem;margin:0}
.dev{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.dev span{border:1px solid var(--ln);border-radius:999px;padding:7px 16px;font-size:.85rem;background:var(--card);color:var(--t)}
.form{background:var(--card);border:1px solid var(--ln);border-radius:18px;padding:26px;margin-top:20px;display:grid;gap:14px}
.form label{font-weight:600;font-size:.9rem;display:grid;gap:6px}
.form select{background:var(--bg);color:#fff;border:1px solid var(--ln);border-radius:10px;padding:12px;font:inherit}
.cta{background:linear-gradient(180deg,#1b2a66,var(--bg2));text-align:center;padding:76px 0}
footer{background:var(--bg);padding:56px 0 24px;font-size:.92rem}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.fg h4{margin-bottom:10px}.fg a{display:block;color:var(--m);padding:3px 0;text-decoration:none}.fg a:hover{color:var(--am)}.fg p{font-size:.9rem}
.cp{border-top:1px solid var(--ln);margin-top:36px;padding-top:20px;color:var(--m);font-size:.85rem}
.wa{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #0006;z-index:55;text-decoration:none;font-size:28px}
.ck{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--bg);border-top:1px solid var(--ln);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px));font-size:.85rem}
.ck p{margin:0}.ck div{display:flex;gap:8px}.ck .btn{padding:7px 18px;font-size:.82rem}.ck[hidden]{display:none}
.fm{margin-top:28px;padding-top:20px;border-top:1px solid var(--ln)}.fl{display:flex;flex-wrap:wrap;gap:6px 20px}.fl a{display:inline}
.todo{background:#f5a52422;border:1px dashed var(--am);padding:2px 6px;border-radius:6px}
@media(max-width:900px){.burger{display:block}nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px 24px 20px;border-bottom:1px solid var(--ln)}nav.open{display:flex}.hd>.btn{display:none}.fg{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}section{padding:52px 0}}