/* ============================================================
   AI РАДАР — единая дизайн-система (v3, с нуля, октябрь 2026)
   Один файл, один источник правды. Правила:
   1. Никаких <style> блоков внутри страниц — вся визуальная логика здесь.
   2. Никаких общих коротких имён классов, что можно перепутать между
      разными компонентами (главный урок предыдущей версии сайта:
      .kpi/.hero-stats/.hstat конфликтовали между страницами).
      Всё именуется с префиксом компонента: .stat-*, .card-*, .hero-*.
   3. Каждое правило самодостаточно — если что-то задаёт border-color,
      оно же задаёт border-style/width, а не полагается на другое
      правило "где-то ещё" их предоставить.
   4. Референс дизайна — ramp.com: монохромная палитра, один акцентный
      цвет только для первичных действий, тонкие hairline-рамки вместо
      теней, Inter с чёткой весовой иерархией, много воздуха.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* Палитра — монохром + один акцент */
  --ink:#0c0a08;
  --ash:#57534e;
  --ash-2:#8a8580;
  --bone:#e5e3df;
  --paper:#faf9f7;
  --white:#ffffff;
  --surface:#f4f2f0;
  --border:#e5e3df;
  --border-strong:#0c0a08;
  --accent:#e4f222;
  --accent-ink:#0c0a08;

  /* Семантика (для статусов/графиков, не для акцента) */
  --good:#3f6b4f;
  --warn:#8a6d1f;
  --bad:#a3402f;

  /* Типографика */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Форма */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* Сетка */
  --container:1200px;
  --container-wide:1440px;
  --container-text:720px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ============ Типографическая шкала ============ */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(32px,4.4vw,48px);line-height:1.1;font-weight:800}
h2{font-size:clamp(24px,3vw,32px);line-height:1.2}
h3{font-size:19px;line-height:1.3;font-weight:700}
p{margin:0}
.lede{font-size:19px;line-height:1.6;color:var(--ash);max-width:var(--container-text)}
.eyebrow{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ash-2);display:flex;align-items:center;gap:6px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex-shrink:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ============ Раскладка ============ */
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 24px}
.wrap-text{max-width:var(--container-text);margin:0 auto;padding:0 24px}
.section{padding:64px 0}
.section-tight{padding:40px 0}
@media(max-width:720px){
  .section{padding:40px 0}
  .wrap,.wrap-wide,.wrap-text{padding:0 20px}
}

/* ============ Навигация ============ */
.site-nav{
  position:sticky;top:0;z-index:200;background:rgba(250,249,247,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.site-nav-row{
  max-width:var(--container-wide);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:8px;
}
.site-logo{
  font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:center;gap:8px;margin-right:16px;flex-shrink:0;
}
.site-logo-mark{width:20px;height:20px;flex-shrink:0}
.site-logo-mark rect{fill:var(--ink)}
.site-logo-mark circle{fill:var(--accent)}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-link{
  padding:8px 12px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;
  color:var(--ash);transition:color .15s,background .15s;
}
.nav-link:hover{color:var(--ink);background:var(--surface)}
.nav-link.is-active{color:var(--ink);background:var(--surface);font-weight:600}
.nav-spacer{flex:1}
.nav-search-btn{
  display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--white);color:var(--ash-2);font-size:12.5px;
}
.nav-search-btn kbd{
  font-family:var(--font-mono);font-size:11px;background:var(--surface);
  border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--ash);
}
@media(max-width:900px){.nav-links{display:none}}

/* ============ Хлебные крошки / тег / метаданные страницы ============ */
.page-crumb{font-size:13px;color:var(--ash-2);margin-bottom:20px}
.page-crumb a{color:var(--ash-2)}
.page-crumb a:hover{color:var(--ink)}
.page-tag{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:600;background:var(--surface);color:var(--ash);
  border:1px solid var(--border);margin-bottom:18px;
}
.page-meta{
  display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--ash);
  padding-bottom:20px;margin:20px 0 32px;border-bottom:1px solid var(--border);
}
.page-meta a{color:var(--ash);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
.page-meta a:hover{color:var(--ink)}

/* ============ Hero ============ */
.hero{padding:56px 0 48px;border-bottom:1px solid var(--border)}
.hero h1{margin-bottom:16px;max-width:20ch}
.hero .lede{margin-bottom:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* ============ Кнопки ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;
  border:1px solid transparent;transition:opacity .15s,background .15s;
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{opacity:.88}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface)}
.btn-ghost{color:var(--ink);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;padding:11px 4px}

/* ============ Stat-строка (единственный компонент для всех "чисел в hero") ============ */
.stat-row{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin:32px 0}
.stat-cell{background:var(--white);padding:20px}
.stat-cell-num{font-size:26px;font-weight:800;letter-spacing:-.02em;font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-cell-lbl{font-size:12px;color:var(--ash);margin-top:6px;line-height:1.4}
@media(max-width:720px){.stat-row{grid-template-columns:repeat(2,1fr)}}

/* ============ Карточки контента (статьи/термины/секции) ============ */
.card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;transition:border-color .15s;
}
.card:hover{border-color:var(--border-strong)}
.card-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ash-2);margin-bottom:10px}
.card h3{margin-bottom:8px}
.card p{color:var(--ash);font-size:14.5px;line-height:1.6}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* ============ Список фактов в карточке (замена длинных абзацев) ============ */
.fact-list{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.fact-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.fact-row:last-child{border-bottom:none}
.fact-row .flbl{font-size:12.5px;color:var(--ash);line-height:1.4;flex:1 1 auto;min-width:0}
.fact-row .fval{font-size:12.5px;font-weight:700;color:var(--ink);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:normal;overflow-wrap:break-word;flex:0 1 auto;max-width:56%}
.card-note{margin-top:12px;font-size:12px;color:var(--ash-2);line-height:1.55}

/* ============ Секции ============ */
.section-head{margin-bottom:32px;max-width:var(--container-text)}
.section-head h2{margin-bottom:10px}
.section-head p{color:var(--ash);font-size:15px;line-height:1.6}

/* ============ Таблицы ============ */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
table.data-table{font-size:13.5px}
.data-table th{
  text-align:left;padding:12px 16px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ash);background:var(--surface);border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--ink)}
.data-table tr:last-child td{border-bottom:none}
.data-table td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ============ Цитата-блок (как сослаться) ============ */
.cite-box{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:18px 22px;margin:40px 0}
.cite-box-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ash-2);margin-bottom:8px}
.cite-box-text{font-size:13px;color:var(--ash);font-family:var(--font-mono);line-height:1.6}

/* ============ Значок-плашка (статус/категория) ============ */
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;background:var(--surface);color:var(--ash);border:1px solid var(--border)}
.chip-link{transition:border-color .15s,color .15s}
a.chip-link:hover{border-color:var(--border-strong);color:var(--ink)}

/* ============ Футер ============ */
.site-footer{border-top:1px solid var(--border);padding:56px 0 32px;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px}
.footer-brand{max-width:280px}
.footer-brand .site-logo{margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--ash);line-height:1.6}
.footer-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ash-2);margin-bottom:12px}
.footer-col a{display:block;font-size:13.5px;color:var(--ash);padding:4px 0}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{max-width:var(--container-wide);margin:40px auto 0;padding:20px 24px 0;border-top:1px solid var(--border);font-size:12px;color:var(--ash-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}

/* ============ Hero-визуал: браузер-мокап + floating карточки ============ */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-visual{position:relative}
.browser-frame{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.browser-chrome{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border)}
.browser-dot{width:9px;height:9px;border-radius:50%;background:var(--bone)}
.browser-body{padding:20px}
.browser-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.browser-kpi{background:var(--surface);padding:16px;border-top:2px solid var(--border)}
.browser-kpi-cap{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ash-2);margin-bottom:6px}
.browser-kpi-val{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.browser-kpi.k-accent{border-top-color:var(--accent)}
.floating-card{position:absolute;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;box-shadow:0 12px 28px -14px rgba(12,10,8,.16);min-width:190px}
.floating-top{top:-16px;right:-20px}
.floating-bottom{bottom:-16px;left:-20px}
.floating-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ash-2);margin-bottom:8px}
.floating-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;padding:2px 0}
.floating-row .flbl{color:var(--ink)}
.floating-row .fval{color:var(--ash)}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
}

/* ============ Графики (Chart.js) ============ */
.chart-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.chart-card h3{margin-bottom:4px}
.chart-card-sub{color:var(--ash);font-size:13px;margin-bottom:20px}
.chart-box{position:relative;height:280px}
.chart-box-sm{position:relative;height:220px}
.chart-src{color:var(--ash-2);font-size:11.5px;margin-top:14px}
.chart-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.chart-grid-2{grid-template-columns:1fr}}

/* ============ Отраслевые карточки (ИИ по отраслям) ============ */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:16px}
.ind-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;border-top:3px solid var(--border-strong)}
.ind-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.ind-head h4{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ind-share{font-size:11.5px;color:var(--ash-2);margin-top:2px}
.ind-bar-row{display:flex;justify-content:space-between;font-size:12px;color:var(--ash);margin-bottom:5px}
.ind-bar-row .v{font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.ind-bar-track{height:6px;border-radius:3px;background:var(--surface);overflow:hidden;margin-bottom:16px}
.ind-bar-fill{height:100%;border-radius:3px}
.ind-stats{display:flex;gap:20px;margin-bottom:16px}
.ind-stat-lbl{font-size:10.5px;color:var(--ash-2);text-transform:uppercase;letter-spacing:.04em}
.ind-stat-val{font-size:17px;font-weight:800;margin-top:2px}
.ind-uses-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ash-2);margin-bottom:8px}
.ind-uses{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.use-tag{font-size:11.5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 10px;color:var(--ash)}
.ind-insight{font-size:13px;color:var(--ash);line-height:1.65;padding-top:14px;border-top:1px solid var(--border)}
.ind-insight strong{color:var(--ink)}

/* ============ Профили и статьи: текстовое тело ============ */
.prose{max-width:var(--container-text)}
.prose h2{margin:40px 0 14px;font-size:clamp(20px,2.4vw,26px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 10px;font-size:17px}
.prose p{color:var(--ash);font-size:15.5px;line-height:1.75;margin-bottom:16px}
.prose p strong{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 16px 22px;color:var(--ash);font-size:15.5px;line-height:1.8}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:6px}
.prose li strong{color:var(--ink)}
.prose table{margin:20px 0;font-size:13.5px}
.prose img{border-radius:var(--radius-md);margin:20px 0;border:1px solid var(--border)}
.prose a{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
.prose a:hover{color:var(--ash)}

/* ============ Значок статуса реестра ============ */
.reg-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;margin:16px 0;border:1px solid var(--border)}
.reg-badge.reg-in{background:#eef2ee;color:var(--good);border-color:var(--good)}
.reg-badge.reg-out{background:var(--surface);color:var(--ash)}

/* ============ Похожие материалы ============ */
.related-block{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.related-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;transition:border-color .15s}
.related-card:hover{border-color:var(--border-strong)}
.related-card .rc-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ash-2);margin-bottom:6px}
.related-card .rc-title{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}

/* ============ Каталог (глоссарий/статьи хабы) ============ */
.catalog-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.catalog-filter{padding:7px 13px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;color:var(--ash);background:var(--white);border:1px solid var(--border);cursor:pointer}
.catalog-filter:hover{border-color:var(--border-strong);color:var(--ink)}
.catalog-filter.is-active{background:var(--ink);color:var(--white);border-color:var(--ink)}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.catalog-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;transition:border-color .15s}
.catalog-card:hover{border-color:var(--border-strong)}
.catalog-card .cc-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ash-2);margin-bottom:6px}
.catalog-card .cc-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:4px}
.catalog-card .cc-desc{font-size:12.5px;color:var(--ash);line-height:1.5}
.catalog-count{font-size:13px;color:var(--ash-2);margin-bottom:16px}
.catalog-search{display:block;width:100%;max-width:380px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-md);font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--white);margin-bottom:16px}
.catalog-search::placeholder{color:var(--ash-2)}
.catalog-search:focus{outline:none;border-color:var(--border-strong)}
.catalog-empty{padding:32px;text-align:center;color:var(--ash-2);font-size:13.5px}

/* ============ Утилиты ============ */
.text-ash{color:var(--ash)}
.mt-0{margin-top:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}