:root{
  --ink:#0f1218;--sub:#5b6572;--acc:#2f6df6;--acc2:#1b4bc4;--card:#fff;--bg:#f6f7fb;--line:#e6e9f0;--ok:#0f8a4d;--warn:#b8860b
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.62;font-size:16px}
a{color:var(--acc)}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
header.top{background:linear-gradient(135deg,#0d1226,#1c2f6b);color:#fff;padding:22px 0 30px}
nav.bar{position:sticky;top:0;z-index:20;background:#0d1226f2;backdrop-filter:blur(8px);border-bottom:1px solid #ffffff1f}
nav.bar .wrap{display:flex;gap:6px;flex-wrap:wrap;padding:9px 16px}
nav.bar a{color:#dfe6ff;text-decoration:none;font-size:14px;padding:6px 10px;border-radius:8px}
nav.bar a:hover,nav.bar a[aria-current]{background:#ffffff22;color:#fff}
h1{font-size:31px;line-height:1.22;margin:14px 0 10px}
h2{font-size:22px;margin:28px 0 10px}
h3{font-size:17px;margin:18px 0 6px}
.lead{color:#c8d2ee;font-size:17px;max-width:72ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:16px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h2,.card h3{margin-top:0}
.price{color:var(--acc);font-weight:700;font-size:15px;margin-bottom:8px}
.card p{margin:0 0 10px;color:var(--sub);font-size:15px}
.btn{display:inline-block;background:var(--acc);color:#fff;padding:11px 18px;border-radius:10px;text-decoration:none;font-weight:600;border:0;cursor:pointer;font-size:15px}
.btn:hover{background:var(--acc2)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#eef1f8;font-size:14px}
.note{background:#fff8e6;border:1px solid #f0dca0;border-radius:12px;padding:14px 16px;font-size:15px;margin:20px 0}
.good{background:#eefaf1;border:1px solid #bfe4cc;border-radius:12px;padding:14px 16px;font-size:15px;margin:20px 0}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
ul,ol{padding-left:20px;margin:8px 0}
li{margin-bottom:7px}
.crumbs{font-size:13px;color:var(--sub);margin:14px 0 0}
footer{padding:28px 0 40px;color:var(--sub);font-size:14px;border-top:1px solid var(--line);margin-top:34px;background:#fff}
.kbd{font-family:ui-monospace,Consolas,monospace;background:#eef1f8;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:14px}
.calc label{display:block;font-size:14px;color:var(--sub);margin:12px 0 4px}
.calc select,.calc input{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fff}
#calcOut{font-size:22px;font-weight:700;color:var(--acc);margin-top:14px}
.tag{display:inline-block;background:#eef1f8;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px;color:var(--sub);margin:0 6px 6px 0}
.shot{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;display:block;background:#0d1226}
.small{font-size:14px;color:var(--sub)}
@media print{nav.bar,footer{display:none}}

.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:14px 0}
.box h2{font-size:19px;margin:0 0 8px}
.back{font-size:14px}

/* --- добавлено 30.10: код, метрики, кейсы, навигация по странице --- */
pre.code{background:#0e1322;color:#dfe7ff;border-radius:12px;padding:14px 16px;overflow-x:auto;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.55;margin:14px 0}
pre.code b{color:#8fd3a8;font-weight:600}
pre.code i{color:#7f9bd6;font-style:normal}
:not(pre)>code{font-family:ui-monospace,Consolas,monospace;background:#eef1f8;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:14px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.kpi div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kpi b{display:block;font-size:24px;color:var(--acc);line-height:1.2}
.kpi span{font-size:13.5px;color:var(--sub)}
.toc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:16px 0;font-size:15px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.toc li{margin-bottom:3px}
@media (max-width:640px){.toc ol{columns:1}}
.related{background:#f2f6ff;border:1px solid #d5e2ff;border-radius:12px;padding:14px 16px;margin:22px 0;font-size:15px}
.related strong{display:block;margin-bottom:6px}
.related a{margin-right:14px;white-space:nowrap}
.cta{background:linear-gradient(135deg,#0d1226,#1c2f6b);color:#e8eeff;border-radius:14px;padding:18px 20px;margin:26px 0}
.cta h2{margin-top:0;color:#fff}
.cta p{color:#c8d2ee}
.case{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0}
.case .num{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#eef1f8;color:var(--acc);font-weight:700;display:flex;align-items:center;justify-content:center}
.case h3{margin:0 0 4px}
.case p{margin:0 0 6px;color:var(--sub);font-size:15px}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:#eef1f8;color:var(--sub)}
.badge.ok{background:#e8f7ee;color:var(--ok)}
.badge.demo{background:#fff3e0;color:#9a6700}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
figure{margin:16px 0}
figcaption{font-size:13.5px;color:var(--sub);margin-top:6px}
mark{background:#fff3c4;padding:0 3px;border-radius:3px}

.maplist{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.maplist li{padding:12px 14px;border:1px solid rgba(244,234,216,.16);border-radius:10px}
.maplist a{font-weight:600}
.maplist span{display:block;color:#b9ad93;font-size:13px;margin-top:4px}