:root{--p:#4F46E5;--p2:#6366F1;--bg:#F8FAFC;--card:#fff;--tx:#0F172A;--mut:#64748B;--bd:#E2E8F0;--ok:#10B981}
@media (prefers-color-scheme:dark){:root{--bg:#0F172A;--card:#1E293B;--tx:#F1F5F9;--mut:#94A3B8;--bd:#334155}}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6}
a{color:var(--p2)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--tx);text-decoration:none}
.brand img{width:36px;height:36px}
nav .links a{margin-left:18px;color:var(--mut);text-decoration:none;font-weight:600}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:48px 0 64px}
.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.15;margin:0 0 16px}
.hero h1 span{background:linear-gradient(90deg,var(--p),var(--ok));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);font-size:1.1rem;margin:0 0 28px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--tx);color:var(--bg);padding:12px 22px;border-radius:12px;text-decoration:none;font-weight:700}
.btn.alt{background:transparent;color:var(--tx);border:1px solid var(--bd);margin-left:10px}
.hero .art{display:flex;justify-content:center}
.hero .art img{width:min(340px,80%);filter:drop-shadow(0 30px 50px rgba(79,70,229,.35))}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding-bottom:64px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:22px}
.card .ic{font-size:1.6rem}
.card h3{margin:8px 0 6px;font-size:1.05rem}
.card p{margin:0;color:var(--mut);font-size:.95rem}
h2.sec{text-align:center;font-size:1.8rem;margin:0 0 28px}
footer{border-top:1px solid var(--bd);padding:28px 0;color:var(--mut);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--mut);margin-left:16px}
.doc{max-width:780px;margin:0 auto;padding:24px 20px 64px}
.doc h1{font-size:2rem;margin-bottom:4px}
.doc h2{margin-top:32px;font-size:1.25rem}
.doc .meta{color:var(--mut)}
.doc table{width:100%;border-collapse:collapse;font-size:.92rem}
.doc th,.doc td{border:1px solid var(--bd);padding:8px 10px;text-align:left;vertical-align:top}
.lang{display:inline-flex;border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin:12px 0}
.lang button{border:0;background:transparent;color:var(--tx);padding:6px 14px;font-weight:700;cursor:pointer}
.lang button.on{background:var(--p);color:#fff}
[data-l]{display:none}[data-l].on{display:block}
@media (max-width:760px){.hero{grid-template-columns:1fr;text-align:center}.hero .art{order:-1}.btn.alt{margin:10px 0 0}nav .links a{margin-left:12px}}