/* ── палитра semalt.com ─────────────────────────────────────────────── */
:root{
  --ink:#101d2d; --copy:#526276; --muted:#8b99a8;
  --blue:#0288d1; --blue-dark:#0874b2; --blue-soft:#e9f6fd;
  --line:#dce7f0; --line-soft:#eef4f9;
  --surface:#fff; --bg:#f7fafc;
  --green:#10b981; --green-soft:#10b9811a;
  --red:#ef4444; --red-soft:#ef444414;
  --amber:#f59e0b; --amber-soft:#f59e0b1a;
  --slate:#64748b;
  --code-bg:#0f172a; --code-ink:#e2e8f0;
  --radius:10px; --shadow:0 1px 3px rgba(16,29,45,.06);
  --wrap:1180px; --font:"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8eef5; --copy:#a9b7c6; --muted:#7c8b9c;
    --blue:#38b6f0; --blue-dark:#5cc4f5; --blue-soft:#0b2b3d;
    --line:#1e2f42; --line-soft:#16243280;
    --surface:#111c28; --bg:#0b131c;
    --code-bg:#0a1119; --code-ink:#d6e2ee;
    --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ink:#e8eef5; --copy:#a9b7c6; --muted:#7c8b9c;
  --blue:#38b6f0; --blue-dark:#5cc4f5; --blue-soft:#0b2b3d;
  --line:#1e2f42; --line-soft:#16243280;
  --surface:#111c28; --bg:#0b131c;
  --code-bg:#0a1119; --code-ink:#d6e2ee;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--copy);font-family:var(--font);
     font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark);text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:2.4rem;letter-spacing:-.025em}
h2{font-size:1.6rem;margin-top:2.2em}
h3{font-size:1.15rem;margin-top:1.8em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin:.3em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
strong{color:var(--ink);font-weight:600}
small{font-size:.85rem}

/* ── шапка ──────────────────────────────────────────────────────────── */
header.top{background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(8px)}
.topin{display:flex;align-items:center;gap:28px;height:62px}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);
  font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.logo:hover{text-decoration:none;color:var(--ink)}
.logo .mark{width:24px;height:24px;flex:none}
.logo b{color:var(--blue);font-weight:600}
.tagline{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:.86rem;
  white-space:nowrap;letter-spacing:.005em}
.tagline::before{content:"";width:1px;height:18px;background:var(--line)}
.tagline b{color:var(--copy);font-weight:500}
nav.main{display:flex;align-items:center;justify-content:center;gap:22px;flex:1;
  font-size:.94rem}
nav.main a{color:var(--copy);white-space:nowrap}
nav.main a:hover,nav.main a.on{color:var(--blue);text-decoration:none}
nav.main a.on{font-weight:500}
.nokey{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);
  color:var(--green);border-radius:999px;padding:5px 14px;font-size:.82rem;font-weight:500;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.nokey::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px var(--green-soft);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
body.menu-open header.top{backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.nokey::before{animation:none}}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:1.4rem;cursor:pointer}

/* ── герой ──────────────────────────────────────────────────────────── */
.hero{padding:64px 0 52px;border-bottom:1px solid var(--line);background:var(--surface)}
.hero h1{font-size:3.4rem;max-width:22ch;margin:0 auto .34em;text-wrap:balance}
.hero .lead{font-size:1.22rem;max-width:60ch;margin:0 auto 1.7em;text-wrap:pretty}
.hero.center{text-align:center}
.hero.center .btns{justify-content:center}
.herogrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.eyebrow{display:inline-block;color:var(--blue);font-weight:600;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;
  background:var(--blue-soft);border-radius:999px;padding:6px 16px}

/* доказательство: 401 у всех, 200 у нас */
.proof{max-width:980px;margin:0 auto;text-align:left}
.proof .term pre{padding:20px 22px;font-size:.9rem;line-height:1.75}
.proof .bar{justify-content:flex-start}
.pr-cmd{color:#cbd5e1}
.pr-dollar{color:#64748b;user-select:none}
.pr-url{color:#7dd3fc}
.pr-bad{color:#fca5a5}
.pr-ok{color:#86efac}
.pr-dim{color:#64748b}
.pr-sep{display:block;height:14px}
.hero .verdict{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  background:var(--green-soft);color:var(--green);border-radius:999px;
  padding:8px 20px;font-size:.95rem;font-weight:500}

/* ── код ────────────────────────────────────────────────────────────── */
pre{background:var(--code-bg);color:var(--code-ink);border-radius:var(--radius);
  padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:.86rem;
  line-height:1.6;margin:0 0 1.2em;tab-size:2}
pre code{background:none;padding:0;color:inherit;font-size:inherit}
code{background:var(--blue-soft);color:var(--blue-dark);padding:.12em .42em;
  border-radius:5px;font-family:var(--mono);font-size:.88em}
.term{position:relative}
.term .bar{display:flex;align-items:center;gap:8px;background:#1b2838;color:#8fa3b8;
  border-radius:var(--radius) var(--radius) 0 0;padding:9px 16px;font-size:.78rem;
  font-family:var(--mono);border-bottom:1px solid #24364b}
.term .bar .dot{width:9px;height:9px;border-radius:50%;background:#3c4b5d}
.term .bar span{margin-left:6px}
.term pre{border-radius:0 0 var(--radius) var(--radius);margin:0}
.copy{margin-left:auto;background:none;border:1px solid #33465c;color:#8fa3b8;
  border-radius:6px;padding:2px 9px;font-size:.72rem;cursor:pointer;font-family:var(--font)}
.copy:hover{color:#e2e8f0;border-color:#4b6180}
.tok-k{color:#7dd3fc}.tok-s{color:#a5e8a5}.tok-n{color:#fbbf24}.tok-c{color:#64748b}

/* ── кнопки ─────────────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--blue);color:#fff;border-radius:8px;
  padding:11px 22px;font-weight:500;font-size:.95rem;border:1px solid var(--blue)}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:var(--blue);border-color:var(--line)}
.btn.ghost:hover{background:var(--blue-soft);color:var(--blue-dark)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:1.4em}

/* ── карточки и сетки ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
a.card{display:block;color:inherit}
a.card:hover{border-color:var(--blue);text-decoration:none;color:inherit}
a.card:hover h3{color:var(--blue)}

/* ── счётчики ───────────────────────────────────────────────────────── */
.stat{text-align:left}
.stat .n{font-size:2.1rem;font-weight:600;color:var(--ink);line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .l{font-size:.85rem;color:var(--muted);margin-top:2px}

/* ── таблицы ────────────────────────────────────────────────────────── */
.tw{overflow-x:auto;margin:0 0 1.4em;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
th{color:var(--ink);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;background:var(--bg);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--line-soft)}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.86rem}
.yes{color:var(--green);font-weight:600}
.no{color:var(--red);font-weight:600}
.tag{display:inline-block;background:var(--blue-soft);color:var(--blue-dark);
  border-radius:5px;padding:1px 8px;font-size:.78rem;font-family:var(--mono)}
.tag.g{background:var(--green-soft);color:var(--green)}
.tag.r{background:var(--red-soft);color:var(--red)}
.tag.a{background:var(--amber-soft);color:var(--amber)}

/* ── выноски ────────────────────────────────────────────────────────── */
.note{border-left:3px solid var(--blue);background:var(--blue-soft);
  border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:0 0 1.4em}
.note p:last-child{margin-bottom:0}
.note.warn{border-color:var(--amber);background:var(--amber-soft)}
.note.good{border-color:var(--green);background:var(--green-soft)}

/* ── контент со сайдбаром ───────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:236px 1fr;gap:52px;
  padding:44px 0 80px;align-items:start}
.side{position:sticky;top:86px;font-size:.92rem}
.side h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin:1.6em 0 .6em;font-weight:600}
.side h4:first-child{margin-top:0}
.side a{display:block;color:var(--copy);padding:5px 11px;border-radius:6px;margin-left:-11px}
.side a:hover{background:var(--blue-soft);color:var(--blue);text-decoration:none}
.side a.on{background:var(--blue-soft);color:var(--blue);font-weight:500}
.body{min-width:0;max-width:78ch}
.body.solo{margin:0 auto}
.body>h1:first-child{margin-top:0}
.page{padding:44px 0 80px}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--copy)}
.related{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.4em}
.related a{display:inline-block;background:var(--blue-soft);color:var(--blue-dark);
  border-radius:999px;padding:5px 13px;font-size:.86rem}
.related a:hover{background:var(--blue);color:#fff;text-decoration:none}
.lead{font-size:1.1rem;color:var(--copy)}

/* ── параметры API ──────────────────────────────────────────────────── */
.param{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:18px 20px;margin:0 0 14px}
.param .h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.param .nm{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:.95rem}
.param .ty{font-size:.78rem;color:var(--muted);font-family:var(--mono)}
.param .df{font-size:.78rem;color:var(--muted)}
.param p{margin:0 0 .6em;font-size:.94rem}
.param p:last-child{margin-bottom:0}

/* ── подвал ─────────────────────────────────────────────────────────── */
footer{background:var(--surface);border-top:1px solid var(--line);
  padding:48px 0 36px;margin-top:0;font-size:.9rem}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
footer h5{color:var(--ink);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.09em;margin:0 0 12px;font-weight:600}
footer a{display:block;color:var(--copy);padding:3px 0}
.fbot{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;
  color:var(--muted);font-size:.85rem;display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:1200px){ .tagline{display:none} nav.main{gap:18px} }
@media (max-width:1040px){ nav.main{gap:13px;font-size:.9rem} }
@media (max-width:760px){
  .wrap{padding:0 18px}
  .topin{gap:14px;height:56px}
  .logo{font-size:.98rem}
  .nokey{display:none}
  .hero{padding:34px 0 30px}
  .hero h1{font-size:1.85rem;max-width:100%}
  .hero .lead{font-size:1.05rem}
  .hero .verdict{font-size:.85rem;padding:7px 15px;text-align:left}
  .proof .term pre{font-size:.76rem;padding:14px 15px;line-height:1.65}
  .term .bar{font-size:.72rem;padding:8px 12px}
  pre{font-size:.78rem;padding:14px 15px}
  .stat .n{font-size:1.75rem}
  h1{font-size:1.7rem}
  h2{font-size:1.35rem;margin-top:1.8em}
  .card{padding:18px}
  th,td{padding:9px 12px}
  .layout{padding:24px 0 52px}
  .page{padding:24px 0 52px}
  footer{padding:34px 0 26px}
  .fgrid{gap:22px}
}
@media (max-width:900px){
  .herogrid,.g2,.g3,.g4{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr;gap:28px}
  .side{position:static;border-bottom:1px solid var(--line);padding-bottom:18px}
  .fgrid{grid-template-columns:1fr 1fr}
  .tagline{display:none}
  .burger{display:block;margin-left:auto}
  nav.main{display:none}
  nav.main.open{display:flex;flex-direction:column;position:absolute;
    top:var(--hdr,56px);left:0;right:0;z-index:60;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:6px 18px 14px}
  nav.main.open a{padding:11px 2px;font-size:1rem;color:var(--copy);
    border-bottom:1px solid var(--line-soft)}
  nav.main.open a:last-child{border-bottom:0}
  nav.main.open a:hover,nav.main.open a.on{color:var(--blue);text-decoration:none}
  .hero{padding:44px 0 36px}
  .hero h1{font-size:2.1rem}
  h1{font-size:1.9rem}
}