
:root{--bg:#13111a;--bg2:#1b1825;--card:#221f2e;--gold:#d4a843;--gold2:#e8c96a;--amber:#f59e0b;--txt:#d5d0e0;--dim:#8a8498;--brd:#2e2a3a;--r:14px;--mw:840px;--sh:0 2px 16px rgba(0,0,0,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.72;font-size:16px}
a{color:var(--gold);text-decoration:none;font-weight:500}a:hover{color:var(--gold2);text-decoration:underline}
img{max-width:100%;display:block;border-radius:var(--r)}
.w{max-width:var(--mw);margin:0 auto;padding:0 20px}

header{background:var(--bg2);border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:90}
.hd{max-width:var(--mw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:12px;flex-wrap:wrap}
.logo img{height:26px;width:auto}
nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
nav a{color:var(--dim);font-size:.78rem;font-weight:600;text-decoration:none;padding:6px 12px;border-radius:8px;transition:.12s;background:rgba(255,255,255,.03)}
nav a.on{background:var(--gold);color:var(--bg)}
nav a:hover{background:rgba(212,168,67,.15);color:var(--gold);text-decoration:none}

.hero{margin:20px 0;padding:40px 32px;border-radius:var(--r);background:linear-gradient(135deg,rgba(212,168,67,.08),rgba(245,158,11,.04)),var(--bg2);border:1px solid var(--brd)}
.hero h1{font-size:1.65rem;color:#fff;margin:0 0 12px;line-height:1.3;max-width:620px}
.hero p{color:var(--dim);margin:0;max-width:560px;font-size:.92rem}
@media(max-width:600px){.hero h1{font-size:1.3rem}.hero{padding:28px 20px}}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:20px 0}
.kpi-item{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:16px;text-align:center}
.kpi-item strong{display:block;font-size:1.2rem;color:var(--gold);margin-bottom:2px}
.kpi-item small{color:var(--dim);font-size:.72rem}

main{padding-bottom:48px}
.intro{font-size:.95rem;background:var(--card);border:1px solid var(--brd);border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:18px 20px;margin:0 0 28px}

article h2{font-size:1.2rem;color:#fff;margin:40px 0 14px;padding-left:14px;border-left:3px solid var(--gold)}
article h2[id]{scroll-margin-top:55px}
article h3{color:var(--gold);font-size:.88rem;font-weight:700;margin:22px 0 6px}
article p{color:var(--dim);margin:0 0 14px}article p strong{color:var(--txt)}
.sep{border:none;height:1px;background:var(--brd);margin:32px 0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:24px 0}
.card{display:block;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:18px;text-decoration:none;transition:.12s}
.card:hover{border-color:var(--gold);text-decoration:none}
.card strong{display:block;color:#fff;font-size:.88rem;margin-bottom:4px}
.card small{color:var(--dim);font-size:.76rem}

.wg{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:22px;margin:26px 0;box-shadow:var(--sh)}
.wg h3{margin:0 0 12px;color:var(--gold);font-size:1rem}
.wg-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.fld{flex:1;min-width:130px}
.fld label{display:block;font-size:.72rem;color:var(--dim);margin-bottom:4px}
.fld input,.fld select{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--brd);background:rgba(0,0,0,.3);color:var(--txt);font-size:.88rem}
.wg button{background:var(--gold);color:var(--bg);border:none;padding:10px 20px;border-radius:8px;font-weight:700;cursor:pointer;font-size:.85rem}
.wg button:hover{background:var(--gold2)}
.wg-out{margin-top:12px;padding:14px;background:rgba(0,0,0,.2);border-radius:10px;font-size:.88rem;color:var(--dim)}
.wg-out b{color:var(--gold)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tb{background:rgba(0,0,0,.2);border:1px solid var(--brd);color:var(--dim);padding:6px 12px;border-radius:16px;font-size:.76rem;font-weight:600;cursor:pointer;transition:.12s}
.tb.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.tp{display:none}.tp.on{display:block}

.acc{margin:24px 0}
.acc details{background:var(--card);border:1px solid var(--brd);border-radius:10px;margin-bottom:6px}
.acc summary{padding:13px 16px;cursor:pointer;font-weight:600;font-size:.86rem;color:var(--txt);list-style:none;display:flex;justify-content:space-between;align-items:center}
.acc summary::after{content:'+';color:var(--gold);font-size:1rem}
.acc details[open] summary::after{content:'-'}
.acc .ans{padding:0 16px 14px;color:var(--dim);font-size:.86rem}

table.t{width:100%;border-collapse:collapse;margin:14px 0;font-size:.82rem}
table.t th{padding:8px 10px;text-align:left;color:var(--gold);font-weight:700;border-bottom:1px solid var(--gold);background:rgba(212,168,67,.06)}
table.t td{padding:8px 10px;border-bottom:1px solid var(--brd);color:var(--dim)}

.fig{margin:24px 0}.fig figcaption{color:var(--dim);font-size:.72rem;margin-top:6px;text-align:center}

.author{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:16px;margin:32px 0 8px}
.av{width:44px;height:44px;border-radius:50%;flex:none;background:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--bg);font-size:1rem}
.author h4{margin:0 0 2px;color:#fff;font-size:.86rem}.author p{margin:0;font-size:.76rem;color:var(--dim)}
.disc{margin-top:14px;font-size:.72rem;color:var(--dim);border-top:1px solid var(--brd);padding-top:12px}
footer{background:var(--bg2);border-top:1px solid var(--brd);padding:22px 0;color:var(--dim);font-size:.76rem}
footer .w{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer nav ul{list-style:none;display:flex;gap:14px;padding:0;margin:0;flex-wrap:wrap}
footer nav a{color:var(--dim);background:none;padding:0}footer nav a:hover{color:var(--gold)}
.bc{color:var(--dim);font-size:.72rem;margin:14px 0 0}.bc a{color:var(--dim)}.bc a:hover{color:var(--gold)}
