@charset "UTF-8";
/* PREMIUM-BUILD: 2026-08-03j — тулы, иллюстрации светлой темы, снята серая подложка */
/* ============================================================================
   PREMIUM LAYER — единое оформление рамок, карточек, калькуляторов и бенчмарков
   для страниц офферов ai-hero.md.

   Правила, которых держимся (brand-design-system + noventiq-site):
   - переменные страниц офферов: --sf/--sf2/--bd/--bd2/--tx/--mu/--mu2/--ac/--ab/--ag
   - светлая тема ТОЛЬКО через html[data-theme="light"], в :root светлых токенов нет
   - никаких фиолетово-розовых градиентов, иконки — SVG
   - переходы 180–240ms, подъём максимум 2px: строго, без «игрушечности»
   - prefers-reduced-motion уважается
   - медиазапросы от большего к меньшему
   Подключается ПОСЛЕ основного <style>, поэтому побеждает при равной специфичности.
   ========================================================================== */

:root{
  --pr-ease: cubic-bezier(.2,.7,.3,1);
  --pr-t: .2s;
  --pr-surface: linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.018));
  --pr-surface-h: linear-gradient(180deg, rgba(37,170,221,.075), rgba(255,255,255,.022));
  --pr-bd: rgba(255,255,255,.09);
  --pr-bd-h: rgba(37,170,221,.38);
  --pr-bevel: inset 0 1px 0 rgba(255,255,255,.055);
  --pr-bevel-h: inset 0 1px 0 rgba(255,255,255,.09);
  --pr-shadow: 0 2px 10px rgba(0,0,0,.18);
  --pr-shadow-h: 0 10px 28px rgba(0,0,0,.38);
  --pr-r: 14px;
  --pr-r-lg: 18px;
}
html[data-theme="light"]{
  --pr-surface: linear-gradient(180deg, #ffffff, #fbfcfe);
  --pr-surface-h: linear-gradient(180deg, rgba(37,170,221,.055), #ffffff);
  --pr-bd: rgba(13,21,32,.10);
  --pr-bd-h: rgba(11,64,139,.34);
  --pr-bevel: inset 0 1px 0 rgba(255,255,255,.9);
  --pr-bevel-h: inset 0 1px 0 rgba(255,255,255,1);
  --pr-shadow: 0 1px 3px rgba(13,21,32,.06);
  --pr-shadow-h: 0 10px 26px rgba(13,21,32,.13);
}

/* ---------- 1. Базовая поверхность карточек ---------- */
.trc, .ccrd, .oc, .tlc, .roicard, .ucc, .cfg, .co, .hs, .tb,
.matBtn, .docCard, .callCard, .riskCard, .roi-val, #roi-method{
  background-image: var(--pr-surface) !important;
  border-color: var(--pr-bd) !important;
  box-shadow: var(--pr-bevel), var(--pr-shadow);
  transition: border-color var(--pr-t) var(--pr-ease),
              box-shadow var(--pr-t) var(--pr-ease),
              transform var(--pr-t) var(--pr-ease),
              background-image var(--pr-t) var(--pr-ease);
}
.trc, .ccrd, .tlc, .roicard, .ucc{ border-radius: var(--pr-r) !important; }
.roiw, .cfg, .rv2{ border-radius: var(--pr-r-lg) !important; }

/* ---------- 2. Ховер: строгий, подъём 2px, рамка уходит в акцент ---------- */
.trc:hover, .ccrd:hover, .oc:hover, .tlc:hover, .roicard:hover,
.ucc:hover, .cfg:hover, .co:hover, .docCard:hover, .callCard:hover, .riskCard:hover{
  transform: translateY(-2px);
  border-color: var(--pr-bd-h) !important;
  background-image: var(--pr-surface-h) !important;
  box-shadow: var(--pr-bevel-h), var(--pr-shadow-h);
}
/* карточка боли — акцентная планка слева усиливается */
.pc{ transition: border-color var(--pr-t) var(--pr-ease),
                 transform var(--pr-t) var(--pr-ease),
                 box-shadow var(--pr-t) var(--pr-ease),
                 border-left-width var(--pr-t) var(--pr-ease); }
.pc:hover{ border-left-width: 4px; box-shadow: var(--pr-bevel-h), var(--pr-shadow-h); }

/* ---------- 3. Волосяная линия акцента по верхней кромке ---------- */
.trc, .ccrd, .roicard, .ucc{ position: relative; overflow: hidden; }
.trc::before, .ccrd::before, .roicard::before, .ucc::before{
  content:''; position:absolute; left:14%; right:14%; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
  opacity:0; transition: opacity var(--pr-t) var(--pr-ease); pointer-events:none;
}
.trc:hover::before, .ccrd:hover::before, .roicard:hover::before, .ucc:hover::before{ opacity:.75; }

/* ---------- 4. Иконки внутри карточек ---------- */
.sc, .oico, .pico, .tico{
  transition: transform var(--pr-t) var(--pr-ease), filter var(--pr-t) var(--pr-ease);
}
.trc:hover .sc, .ccrd:hover .sc, .oc:hover .oico, .pc:hover .pico{
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(37,170,221,.35));
}

/* ---------- 5. Панель калькулятора ---------- */
.roiw{
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)) !important;
  border-color: var(--pr-bd) !important;
  box-shadow: var(--pr-bevel), 0 6px 26px rgba(0,0,0,.26);
}
html[data-theme="light"] .roiw{
  background-image: linear-gradient(180deg,#ffffff,#fafbfd) !important;
}
.roih{
  border-bottom: 1px solid var(--pr-bd);
  background-image: linear-gradient(180deg, rgba(37,170,221,.06), transparent);
}
.roin{ font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.roicard{ position:relative; }

/* ползунки: аккуратная дорожка и ручка с акцентным кольцом */
.rosldr{
  -webkit-appearance:none; appearance:none; height:4px; border-radius:3px;
  background: linear-gradient(90deg, var(--ac) 0%, rgba(37,170,221,.22) 0%) , rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
  outline:none; cursor:pointer;
}
html[data-theme="light"] .rosldr{ background: rgba(13,21,32,.12); }
.rosldr::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background: var(--ac); border:2px solid var(--bg3);
  box-shadow: 0 0 0 3px rgba(37,170,221,.20), 0 1px 4px rgba(0,0,0,.4);
  cursor:pointer; transition: box-shadow var(--pr-t) var(--pr-ease), transform var(--pr-t) var(--pr-ease);
}
.rosldr:hover::-webkit-slider-thumb{ transform: scale(1.1); box-shadow:0 0 0 5px rgba(37,170,221,.24), 0 1px 5px rgba(0,0,0,.45); }
.rosldr:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 5px rgba(37,170,221,.4); }
.rosldr::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--ac);
  border:2px solid var(--bg3); box-shadow:0 0 0 3px rgba(37,170,221,.20); cursor:pointer;
}
.roval{ font-variant-numeric: tabular-nums; }

/* ---------- 6. Бенчмарки ---------- */
#bm02b > div > div, .bmbar, .bmrow{
  transition: transform var(--pr-t) var(--pr-ease), filter var(--pr-t) var(--pr-ease);
}
#bm02b > div > div:hover{ filter: brightness(1.08); }
.bmwrap, #bm02b{ font-variant-numeric: tabular-nums; }

/* ---------- 7. Сноска и блок ценности ---------- */
.roi-val{ border-color: rgba(37,170,221,.22) !important; }
#roi-method summary{ transition: color var(--pr-t) var(--pr-ease), background var(--pr-t) var(--pr-ease); border-radius: 11px; }
#roi-method summary:hover{ color: var(--ac); background: rgba(37,170,221,.05); }
#roi-method[open] summary{ border-bottom: 1px solid var(--pr-bd); border-radius: 11px 11px 0 0; }

/* ---------- 8. Секции: заголовок с тонкой линией ---------- */
.slbl{ position:relative; padding-left:0; }
.stit{ letter-spacing:-.025em; }

/* ---------- 9. Клавиатурный фокус ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
.matBtn:focus-visible, .co:focus-visible, .cfg:focus-visible{
  outline: 2px solid var(--ac) !important;
  outline-offset: 3px !important;
  border-radius: 10px;
}

/* ---------- 10. Уважение к системной настройке ---------- */
@media (prefers-reduced-motion: reduce){
  .trc, .ccrd, .oc, .tlc, .roicard, .ucc, .cfg, .co, .pc,
  .docCard, .callCard, .riskCard, .sc, .oico, .pico{
    transition-duration: .01ms !important;
  }
  .trc:hover, .ccrd:hover, .oc:hover, .tlc:hover, .roicard:hover,
  .ucc:hover, .cfg:hover, .co:hover, .pc:hover{ transform:none !important; }
}

/* ---------- 11. Адаптив: от большего к меньшему ---------- */
@media (max-width: 960px){
  :root{ --pr-r: 13px; --pr-r-lg: 16px; }
}
@media (max-width: 768px){
  .trc:hover, .ccrd:hover, .oc:hover, .tlc:hover, .roicard:hover,
  .ucc:hover, .cfg:hover, .co:hover, .pc:hover{ transform:none; }
}
@media (max-width: 480px){
  :root{ --pr-r: 12px; --pr-r-lg: 14px; }
  .rosldr::-webkit-slider-thumb{ width:18px; height:18px; }
}


/* ---------- 12. Светлая тема: ховеры со своей специфичностью ----------
   Существующие правила светлой темы стоят с !important и специфичностью
   html[data-theme="light"] .card, поэтому ховер нужно объявлять на том же
   уровне вложенности, иначе он проигрывает каскаду. */
html[data-theme="light"] .trc,
html[data-theme="light"] .ccrd,
html[data-theme="light"] .oc,
html[data-theme="light"] .tlc,
html[data-theme="light"] .roicard,
html[data-theme="light"] .ucc,
html[data-theme="light"] .cfg,
html[data-theme="light"] .co{
  box-shadow: var(--pr-bevel), var(--pr-shadow) !important;
}
html[data-theme="light"] .trc:hover,
html[data-theme="light"] .ccrd:hover,
html[data-theme="light"] .oc:hover,
html[data-theme="light"] .tlc:hover,
html[data-theme="light"] .roicard:hover,
html[data-theme="light"] .ucc:hover,
html[data-theme="light"] .cfg:hover,
html[data-theme="light"] .co:hover{
  border-color: var(--pr-bd-h) !important;
  background-image: var(--pr-surface-h) !important;
  box-shadow: var(--pr-bevel-h), var(--pr-shadow-h) !important;
}
html[data-theme="light"] .pc:hover{
  box-shadow: var(--pr-bevel-h), var(--pr-shadow-h) !important;
}
html[data-theme="light"] .roiw{
  box-shadow: var(--pr-bevel), 0 4px 22px rgba(13,21,32,.09) !important;
}


/* ---------- 13. Контраст мелкого текста на новых поверхностях ----------
   Поверхности карточек стали светлее, и приглушённый --mu перестал
   давать 4.5:1 в тёмной теме. Поднимаем только эти блоки. */
#roi-note .roi-as, .roi-val li, #roi-method li, #roi-method .rm-w{
  color: #aab9cc !important;
}
#roi-note .roi-src, #roi-method .rm-sec b{ color: #94a5ba !important; }
.roi-val .rv-src{ color: #9aabc0 !important; }
#roi-method code{ color: #cfdcea !important; }
html[data-theme="light"] #roi-note .roi-as,
html[data-theme="light"] .roi-val li,
html[data-theme="light"] #roi-method li,
html[data-theme="light"] #roi-method .rm-w{ color:#485a72 !important; }
html[data-theme="light"] #roi-note .roi-src,
html[data-theme="light"] .roi-val .rv-src,
html[data-theme="light"] #roi-method .rm-sec b{ color:#4a5c74 !important; }
html[data-theme="light"] #roi-method code{ color:#1d2a3a !important; background:rgba(13,21,32,.05) !important; }


/* ============================================================================
   СТРУКТУРНЫЙ СЛОЙ: hero, заголовки секций, панели инструментов, бенчмарки.
   Тот же принцип — строго, без декора, подъём максимум 2px.
   ========================================================================== */

/* ---------- 14. Hero страницы оффера ---------- */
.hero{ position:relative; }
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--pr-bd), transparent);
  pointer-events:none;
}
.hbadge{
  background-image: var(--pr-surface) !important;
  border:1px solid var(--pr-bd) !important;
  box-shadow: var(--pr-bevel);
  border-radius:999px !important;
  font-variant-numeric: tabular-nums;
}
.hi h1{ letter-spacing:-.03em; }
.hi h1 em{ font-style:normal; color:var(--ac); }
.hsub{ max-width:52ch; }

/* цифры hero — карточками одного уровня с остальными */
.hs{
  background-image: var(--pr-surface) !important;
  border-color: var(--pr-bd) !important;
  border-radius: var(--pr-r) !important;
  box-shadow: var(--pr-bevel), var(--pr-shadow);
  transition: border-color var(--pr-t) var(--pr-ease),
              box-shadow var(--pr-t) var(--pr-ease),
              transform var(--pr-t) var(--pr-ease);
}
.hs:hover{
  transform: translateY(-2px);
  border-color: var(--pr-bd-h) !important;
  box-shadow: var(--pr-bevel-h), var(--pr-shadow-h);
}
.hsn{ font-variant-numeric: tabular-nums; }
html[data-theme="light"] .hs{ box-shadow: var(--pr-bevel), var(--pr-shadow) !important; }
html[data-theme="light"] .hs:hover{
  border-color: var(--pr-bd-h) !important;
  box-shadow: var(--pr-bevel-h), var(--pr-shadow-h) !important;
}

/* ---------- 15. Заголовки секций: акцентная черта у надзаголовка ---------- */
.slbl{
  display:inline-flex; align-items:center; gap:10px;
}
.slbl::before{
  content:''; width:22px; height:2px; border-radius:2px; flex:0 0 22px;
  background:linear-gradient(90deg, var(--ac), transparent);
}
.stit{ letter-spacing:-.028em; }
.ssub{ max-width:64ch; }

/* ---------- 16. Панели инструментов — единая рамка ---------- */
#doc-demo .ct > div:not(.slbl):not(.stit),
#agent-demo .ct > div, #call-demo .ct > div,
#configurator .ct > div, #maturity-tool .ct > div,
#infra-configurator .ct > div, #risk-scanner .ct > div{
  border-radius: var(--pr-r-lg);
}
.cfg, .ucc, .matBtn, .docCard, .callCard, .riskCard{
  border-radius: var(--pr-r) !important;
}

/* ---------- 17. Бенчмарк-виджет ---------- */
#benchmark .rv2, #benchmark [style*="border-radius:20px"]{
  border-radius: var(--pr-r-lg) !important;
  background-image: var(--pr-surface) !important;
  border-color: var(--pr-bd) !important;
  box-shadow: var(--pr-bevel), var(--pr-shadow);
}
html[data-theme="light"] #benchmark .rv2{
  background-image: linear-gradient(180deg,#ffffff,#fafbfd) !important;
  box-shadow: var(--pr-bevel), var(--pr-shadow) !important;
}
#benchmark table, #benchmark .bmrow{ font-variant-numeric: tabular-nums; }
#benchmark tr{ transition: background var(--pr-t) var(--pr-ease); }
#benchmark tbody tr:hover{ background: rgba(37,170,221,.05); }
html[data-theme="light"] #benchmark tbody tr:hover{ background: rgba(11,64,139,.04); }

/* ---------- 18. Чередование секций — мягче граница ---------- */
.sec{ position:relative; }
.sec.alt::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--pr-bd), transparent);
  pointer-events:none;
}

/* ---------- 19. Боковая навигация ---------- */
.sn-a{ border-radius:0 8px 8px 0; }
.sn-a:hover{ background: rgba(37,170,221,.06); }
.sn-a.on{ border-left-color: var(--ac); background: rgba(37,170,221,.09); }
html[data-theme="light"] .sn-a:hover{ background: rgba(11,64,139,.05); }

/* ---------- 20. Адаптив структурного слоя ---------- */
@media (prefers-reduced-motion: reduce){
  .hs, .sn-a, #benchmark tr{ transition-duration:.01ms !important; }
  .hs:hover{ transform:none !important; }
}


/* ============================================================================
   ФИНАЛЬНЫЙ АДАПТИВ — обязан идти после всех базовых правил, иначе они
   перебивают медиазапрос. Порядок внутри: от большего к меньшему.
   ========================================================================== */
@media (max-width: 768px){
  .hs:hover{ transform:none; }
  .slbl::before{ width:16px; flex:0 0 16px; }
  .hsub, .ssub{ max-width:100%; }
}
@media (max-width: 480px){
  .slbl::before{ width:14px; flex:0 0 14px; }
}


/* ============================================================================
   HERO ПО МАКЕТУ (страница 01) — сцена справа, две кнопки,
   карточки метрик с пояснением, полоса логотипов.
   Классы generic: те же можно применить к остальным шести страницам.
   ========================================================================== */
.hero2{ position:relative; overflow:hidden; }
.hero2-scene{
  position:absolute; right:0; top:0; bottom:0; width:58%;
  z-index:0; pointer-events:none; overflow:hidden;
}
.hero2-scene img{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 16%,#000 42%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 16%,#000 42%);
}
.hero2-scene::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(6,12,22,.55) 22%, transparent 55%);
}
html[data-theme="light"] .hero2-scene::after{
  background:linear-gradient(90deg,#f2f4f9 0%, rgba(242,244,249,.7) 24%, rgba(242,244,249,.25) 60%);
}
html[data-theme="light"] .hero2-scene img{ opacity:.85; }
.hi2{ position:relative; z-index:2; display:block !important; }
.hi2-tx{ max-width:min(560px, 56%); }

/* кнопки */
.hero2-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.h2b{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--fh); font-weight:700; font-size:.9rem; letter-spacing:-.01em;
  padding:13px 24px; border-radius:11px; border:1px solid transparent;
  text-decoration:none; transition: transform var(--pr-t) var(--pr-ease),
    box-shadow var(--pr-t) var(--pr-ease), background var(--pr-t) var(--pr-ease),
    border-color var(--pr-t) var(--pr-ease);
}
.h2b::after{ content:'→'; transition: transform var(--pr-t) var(--pr-ease); }
.h2b:hover::after{ transform: translateX(4px); }
.h2b-p{ background:linear-gradient(135deg,var(--ac),var(--ag)); color:#fff;
  box-shadow:0 6px 20px rgba(37,170,221,.28); }
.h2b-p:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(37,170,221,.38); }
.h2b-s{ background-image:var(--pr-surface); border-color:var(--pr-bd); color:var(--tx);
  box-shadow:var(--pr-bevel), var(--pr-shadow); }
.h2b-s:hover{ transform:translateY(-2px); border-color:var(--pr-bd-h);
  box-shadow:var(--pr-bevel-h), var(--pr-shadow-h); }

/* карточки метрик */
.hmets{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:30px; }
.hmc{
  background-image:var(--pr-surface); border:1px solid var(--pr-bd);
  border-radius:var(--pr-r); padding:16px 18px;
  box-shadow:var(--pr-bevel), var(--pr-shadow);
  transition: transform var(--pr-t) var(--pr-ease), border-color var(--pr-t) var(--pr-ease),
              box-shadow var(--pr-t) var(--pr-ease);
}
.hmc:hover{ transform:translateY(-2px); border-color:var(--pr-bd-h);
  box-shadow:var(--pr-bevel-h), var(--pr-shadow-h); }
.hmc-h{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.hmc-ic{ width:34px; height:34px; border-radius:10px; display:inline-flex;
  align-items:center; justify-content:center; align-self:center;
  background:rgba(37,170,221,.11); border:1px solid rgba(37,170,221,.24);
  color:var(--ac); flex:0 0 34px; }
.hmc-ic svg{ width:17px; height:17px; }
.hmc-v{ font-family:var(--fh); font-size:1.5rem; font-weight:800; letter-spacing:-.035em;
  color:var(--tx); font-variant-numeric:tabular-nums; }
.hmc-u{ font-size:.66rem; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--mu2); }
.hmc-d{ font-size:.775rem; line-height:1.5; color:#aab9cc; margin-top:9px; }
html[data-theme="light"] .hmc-d{ color:#485a72; }

/* полоса логотипов */
.tstrip2{ padding:34px 0 !important; }
.tstrip2-h{ text-align:center; font-size:.68rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--mu2); margin-bottom:22px; }
.tstrip2-row{ display:flex; align-items:center; justify-content:center; gap:0;
  flex-wrap:wrap; }
.tl{ flex:1 1 0; min-width:130px; display:flex; align-items:center; justify-content:center;
  padding:10px 22px; position:relative; }
.tl + .tl::before{ content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px;
  background:linear-gradient(180deg,transparent,var(--pr-bd),transparent); }
.tl img{ max-height:24px; max-width:100%; width:auto;
  filter:brightness(0) invert(1); opacity:.7;
  transition:opacity var(--pr-t) var(--pr-ease), transform var(--pr-t) var(--pr-ease); }
.tl:hover img{ opacity:1; transform:scale(1.04); }
html[data-theme="light"] .tl img{ filter:brightness(0); opacity:.6; }
html[data-theme="light"] .tl:hover img{ opacity:.9; }


/* ---------- адаптив hero по макету: обязан идти после базовых правил ---------- */
@media (max-width: 900px){
  .hi2-tx{ max-width:100% !important; }
  .hero2-scene{ width:100%; opacity:.42; }
  .hero2-scene img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 30%,#000 70%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 30%,#000 70%);
  }
  .hero2-scene::after{
    background:linear-gradient(180deg, var(--bg) 0%, rgba(6,12,22,.72) 45%, rgba(6,12,22,.5) 100%);
  }
  html[data-theme="light"] .hero2-scene::after{
    background:linear-gradient(180deg,#f2f4f9 0%, rgba(242,244,249,.8) 45%, rgba(242,244,249,.6) 100%);
  }
  .hmets{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .hmc{ padding:13px 14px; }
  .hmc-v{ font-size:1.3rem; }
}
@media (max-width: 700px){
  .hmets{ grid-template-columns:1fr !important; }
  .hero2-btns .h2b{ flex:1 1 100%; justify-content:center; }
  .tl{ flex:1 1 40%; min-width:110px; }
  .tl + .tl::before{ display:none; }
}
@media (max-width: 480px){
  .hmc-v{ font-size:1.22rem; }
  .h2b{ padding:12px 18px; font-size:.85rem; }
}


/* ============================================================================
   САЙДБАР ПО МАКЕТУ: цветная иконка у каждой услуги + карточка эксперта.
   ========================================================================== */
.sn{ display:flex; flex-direction:column; }
.sn-a{ align-items:center !important; gap:11px !important; padding:11px 14px !important; }
.sn-n{ font-variant-numeric:tabular-nums; flex:0 0 auto; }
.sn-ic{
  flex:0 0 30px; width:30px; height:30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(var(--rgb),.12); border:1px solid rgba(var(--rgb),.26);
  color:var(--c);
  transition: transform var(--pr-t) var(--pr-ease), background var(--pr-t) var(--pr-ease),
              border-color var(--pr-t) var(--pr-ease);
}
.sn-ic svg{ width:15px; height:15px; }
.sn-a:hover .sn-ic{ transform:scale(1.07); background:rgba(var(--rgb),.2);
  border-color:rgba(var(--rgb),.5); }
.sn-a.on .sn-ic{ background:rgba(var(--rgb),.22); border-color:rgba(var(--rgb),.55); }

/* карточка эксперта внизу панели */
.sn-exp{
  margin:auto 12px 14px; padding:15px 15px 14px; border-radius:var(--pr-r);
  background-image:var(--pr-surface); border:1px solid var(--pr-bd);
  box-shadow:var(--pr-bevel), var(--pr-shadow);
}
.sn-exp-h{ display:flex; align-items:flex-start; gap:10px; }
.sn-exp-ic{ flex:0 0 30px; width:30px; height:30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(37,170,221,.12); border:1px solid rgba(37,170,221,.26); color:var(--ac); }
.sn-exp-ic svg{ width:15px; height:15px; }
.sn-exp b{ font-family:var(--fh); font-size:.79rem; font-weight:700; line-height:1.3; color:var(--tx); }
.sn-exp p{ font-size:.715rem; line-height:1.45; color:#a2b2c6; margin:9px 0 12px; }
html[data-theme="light"] .sn-exp p{ color:#52657e; }
.sn-exp-b{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px; border-radius:9px; text-decoration:none;
  font-family:var(--fh); font-size:.755rem; font-weight:700; color:var(--tx);
  background-image:linear-gradient(180deg, rgba(37,170,221,.14), rgba(37,170,221,.05));
  border:1px solid rgba(37,170,221,.3);
  transition: transform var(--pr-t) var(--pr-ease), border-color var(--pr-t) var(--pr-ease),
              box-shadow var(--pr-t) var(--pr-ease);
}
.sn-exp-b svg{ width:14px; height:14px; color:var(--ac); flex:0 0 14px; }
.sn-exp-b::after{ content:'→'; transition:transform var(--pr-t) var(--pr-ease); }
.sn-exp-b:hover{ transform:translateY(-2px); border-color:rgba(37,170,221,.55);
  box-shadow:0 6px 18px rgba(37,170,221,.18); }
.sn-exp-b:hover::after{ transform:translateX(3px); }


/* ---------- сцена hero на всю ширину, кадр прижат вправо ---------- */
.hero2-scene{ width:100% !important; left:0 !important; right:0 !important; }
.hero2-scene img{
  object-position:right center !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
.hero2-scene::after{
  background:linear-gradient(90deg,
    rgba(6,12,22,.94) 0%,
    rgba(6,12,22,.86) 26%,
    rgba(6,12,22,.55) 44%,
    rgba(6,12,22,.18) 60%,
    transparent 78%) !important;
}
html[data-theme="light"] .hero2-scene::after{
  background:linear-gradient(90deg,
    rgba(242,244,249,.985) 0%,
    rgba(242,244,249,.96) 30%,
    rgba(242,244,249,.8) 48%,
    rgba(242,244,249,.4) 66%,
    rgba(242,244,249,.08) 84%) !important;
}


/* ---------- контент hero прижат влево, сцена вправо и целиком ---------- */
/* .ct центрирует контент, из-за чего на широких экранах он уезжает вправо.
   В hero выравниваем по левому краю с фиксированным отступом. */
.hero2 .ct, .hero2 > div[style*="max-width"]{
  max-width:none !important; margin:0 !important; padding-left:0 !important;
}
.hi2{ padding-left:0 !important; }
.hero2{ padding-left:clamp(24px, 3vw, 56px) !important; padding-right:0 !important; }
.hi2-tx{ max-width:min(620px, 46%) !important; }

/* сцена: показываем кадр целиком по высоте, прижимаем к правому краю */
.hero2-scene img{
  object-fit:cover !important;
  object-position:100% 50% !important;
}
@media (min-width:1600px){
  .hero2-scene img{ object-fit:contain !important; object-position:100% 50% !important; }
  .hero2-scene{ background:var(--bg); }
  html[data-theme="light"] .hero2-scene{ background:#f2f4f9; }
}


/* ---------- снимаем ограничение обёртки только вокруг hero ---------- */
.wr > div:has(> .hero2){ max-width:none !important; margin:0 !important; }
.hero2{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.hero2-scene{ right:0 !important; }


/* ---------- длинные русские слова в карточках метрик ---------- */
.hmc-d, .hmc-u{ overflow-wrap:break-word; word-break:normal; hyphens:none; }


/* ---------- H1 на узких экранах ---------- */
@media (max-width:480px){
  .hi2 h1{ font-size:clamp(1.35rem,6.2vw,1.9rem) !important;
    overflow-wrap:break-word; word-break:normal; hyphens:none; }
}


/* ---------- новый кадр 1.78: левое поле уже в снимке ---------- */
.hero2-scene img{ object-fit:cover !important; object-position:100% 50% !important; }
@media (min-width:1600px){
  .hero2-scene img{ object-fit:cover !important; }
}
.hero2-scene::after{
  background:linear-gradient(90deg,
    rgba(6,12,22,.72) 0%,
    rgba(6,12,22,.55) 24%,
    rgba(6,12,22,.30) 42%,
    rgba(6,12,22,.10) 58%,
    transparent 74%) !important;
}
html[data-theme="light"] .hero2-scene::after{
  background:linear-gradient(90deg,
    rgba(242,244,249,.97) 0%,
    rgba(242,244,249,.93) 26%,
    rgba(242,244,249,.76) 44%,
    rgba(242,244,249,.4) 62%,
    rgba(242,244,249,.1) 80%) !important;
}


/* ============================================================================
   РАЗДЕЛ «БОЛИ» по макету 15_36_13: крупный номер, вертикальная черта,
   заголовок и описание; сетка 2x2 с разделителем между рядами.
   ========================================================================== */
.pnsub-w{ margin-bottom:34px; }
.pngrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,5vw,88px); row-gap:0;
}
.pn{ display:flex; gap:20px; align-items:flex-start; padding:30px 0; position:relative; }
.pn:nth-child(-n+2){ padding-top:4px; }
.pn:nth-child(n+3){ border-top:1px solid var(--pr-bd); }
.pn-n{
  font-family:var(--fh); font-size:clamp(1.9rem,3.1vw,2.6rem); font-weight:800;
  letter-spacing:-.04em; line-height:1; color:var(--ac);
  font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:1.9em;
  transition: color var(--pr-t) var(--pr-ease), transform var(--pr-t) var(--pr-ease);
}
.pn-tx{ border-left:2px solid rgba(37,170,221,.34); padding-left:20px; min-width:0;
  transition: border-color var(--pr-t) var(--pr-ease); }
.pn-tx h4{ font-family:var(--fh); font-size:1.02rem; font-weight:700; line-height:1.35;
  color:var(--tx); letter-spacing:-.012em; }
.pn-tx p{ font-size:.875rem; line-height:1.6; color:#aab9cc; margin-top:10px; }
html[data-theme="light"] .pn-tx p{ color:#4a5c74; }
.pn:hover .pn-n{ transform:translateY(-2px); }
.pn:hover .pn-tx{ border-left-color:var(--ac); }

@media (max-width:900px){
  .pngrid{ grid-template-columns:1fr; }
  .pn{ padding:24px 0; }
  .pn:nth-child(-n+2){ padding-top:24px; }
  .pn:first-child{ padding-top:4px; }
  .pn:not(:first-child){ border-top:1px solid var(--pr-bd); }
  .pn-tx{ padding-left:16px; }
}
@media (max-width:480px){
  .pn{ gap:14px; }
  .pn-n{ font-size:1.7rem; min-width:1.7em; }
}

/* номер боли в светлой теме — акцентный голубой не даёт контраста */
html[data-theme="light"] .pn-n{ color:#0B408B; }
html[data-theme="light"] .pn-tx{ border-left-color:rgba(11,64,139,.3); }
html[data-theme="light"] .pn:hover .pn-tx{ border-left-color:#0B408B; }


/* ============================================================================
   «9 РЕЗУЛЬТАТОВ» (макет 1785501964707): номер, иконка, заголовок, описание.
   Сетка 3x3 без рамок, с разделителями между рядами и колонками.
   ========================================================================== */
.og{ grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  column-gap:clamp(24px,3vw,56px) !important; row-gap:0 !important; }
.oc{
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:26px 0 !important; position:relative;
  display:grid !important; grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto auto !important; column-gap:18px !important; row-gap:0 !important;
  align-items:start !important;
}
.oc:nth-child(n+4){ border-top:1px solid var(--pr-bd) !important; }
.oc:nth-child(-n+3){ padding-top:6px !important; }
.oc-n{
  grid-column:1; grid-row:1;
  font-family:var(--fh); font-size:1.28rem; font-weight:800; letter-spacing:-.03em;
  color:var(--ac); font-variant-numeric:tabular-nums; line-height:1;
  transition:transform var(--pr-t) var(--pr-ease);
}
.oc .oico{
  grid-column:1; grid-row:2; margin-top:14px !important;
  width:56px !important; height:56px !important; min-width:56px !important;
  border-radius:13px !important;
  background:rgba(37,170,221,.09) !important;
  border:1px solid rgba(37,170,221,.22) !important;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--pr-t) var(--pr-ease), background var(--pr-t) var(--pr-ease),
             border-color var(--pr-t) var(--pr-ease);
}
.oc .oico svg{ width:26px !important; height:26px !important; }
.oc h4{ grid-column:2; grid-row:1; font-size:1rem !important; line-height:1.35;
  letter-spacing:-.012em; padding-left:20px; border-left:2px solid rgba(37,170,221,.28);
  transition:border-color var(--pr-t) var(--pr-ease); }
.oc p{ grid-column:2; grid-row:2; font-size:.85rem !important; line-height:1.6 !important;
  color:#aab9cc !important; margin-top:12px !important; padding-left:20px;
  border-left:2px solid rgba(37,170,221,.28);
  transition:border-color var(--pr-t) var(--pr-ease); }
html[data-theme="light"] .oc p{ color:#4a5c74 !important; }
html[data-theme="light"] .oc-n{ color:#0B408B; }
html[data-theme="light"] .oc h4, html[data-theme="light"] .oc p{ border-left-color:rgba(11,64,139,.24); }
.oc:hover{ transform:none !important; }
.oc:hover .oc-n{ transform:translateY(-2px); }
.oc:hover .oico{ transform:scale(1.05); background:rgba(37,170,221,.16) !important;
  border-color:rgba(37,170,221,.44) !important; }
.oc:hover h4, .oc:hover p{ border-left-color:var(--ac); }
html[data-theme="light"] .oc:hover h4, html[data-theme="light"] .oc:hover p{ border-left-color:#0B408B; }

/* ============================================================================
   БЛОКИ ПОД КАЛЬКУЛЯТОРОМ — три колонки (макет 1785502123636)
   ========================================================================== */
.roi-cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-top:18px; align-items:stretch;
}
.roi-cols > *{ margin-top:0 !important; height:100%; box-sizing:border-box; }
.roi-cols #roi-note{
  border:1px solid var(--pr-bd); border-radius:var(--pr-r); padding:16px 18px;
  background-image:var(--pr-surface); box-shadow:var(--pr-bevel), var(--pr-shadow);
  padding-top:16px !important;
}
.roi-cols .roi-val{ margin-top:0 !important; }
.roi-cols #roi-method{ margin-top:0 !important; }
.roi-cols #roi-method .rm-body{ padding-bottom:14px; }

@media (max-width:1150px){
  .og{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .oc:nth-child(-n+3){ padding-top:26px !important; }
  .oc:nth-child(-n+2){ padding-top:6px !important; }
  .oc:nth-child(n+3){ border-top:1px solid var(--pr-bd) !important; }
  .roi-cols{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .og{ grid-template-columns:1fr !important; }
  .oc:nth-child(-n+2){ padding-top:26px !important; }
  .oc:first-child{ padding-top:6px !important; }
  .oc:not(:first-child){ border-top:1px solid var(--pr-bd) !important; }
}

/* длинные слова в карточках результатов и колонках ROI */
.oc h4, .oc p, .roi-cols li, .roi-cols code{ overflow-wrap:anywhere; word-break:break-word; }
/* блок ROI шире родителя-колонки — растягиваем на всю секцию */
.roib .roi-cols{ grid-column:1 / -1; }


/* ============================================================================
   БЕНЧМАРК: принятие AI по отраслям (макет 1785502053789)
   ========================================================================== */
.bmw2{
  background-image:var(--pr-surface); border:1px solid var(--pr-bd);
  border-radius:var(--pr-r-lg); padding:26px 28px 22px;
  box-shadow:var(--pr-bevel), var(--pr-shadow);
}
html[data-theme="light"] .bmw2{ background-image:linear-gradient(180deg,#fff,#fafbfd); }
.bmw2-h{ display:flex; justify-content:space-between; align-items:center; gap:18px;
  flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--pr-bd); margin-bottom:20px; }
.bmw2-lg{ display:flex; align-items:center; gap:9px; font-size:.8rem; color:var(--tx); font-weight:600; }
.bmw2-dot{ width:26px; height:6px; border-radius:3px;
  background:linear-gradient(90deg,#f59e0b,#25AADD,#76b900); flex:0 0 26px; }
.bmw2-note{ display:flex; align-items:center; gap:9px; font-size:.73rem; color:#a2b2c6;
  border:1px solid var(--pr-bd); border-radius:10px; padding:8px 12px; max-width:340px; }
html[data-theme="light"] .bmw2-note{ color:#52657e; }
.bmw2-note-ic{ color:var(--ac); flex:0 0 16px; display:inline-flex; }
.bmw2-note-ic svg{ width:16px; height:16px; }

.bmw2-rows{ display:flex; flex-direction:column; gap:14px; }
.bmr{ display:grid; grid-template-columns:38px minmax(120px,180px) minmax(0,1fr) 64px;
  align-items:center; gap:14px; }
.bmr-ic{ width:38px; height:38px; border-radius:11px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--c);
  background:rgba(var(--rgb),.11); border:1px solid rgba(var(--rgb),.26);
  transition:transform var(--pr-t) var(--pr-ease); }
.bmr-ic svg{ width:19px; height:19px; }
.bmr:hover .bmr-ic{ transform:scale(1.07); }
.bmr-n{ font-size:.875rem; color:var(--tx); }
.bmr-track{ height:9px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; }
html[data-theme="light"] .bmr-track{ background:rgba(13,21,32,.08); }
.bmr-fill{ display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg, rgba(var(--rgb),.55), var(--c));
  transition:filter var(--pr-t) var(--pr-ease); }
.bmr:hover .bmr-fill{ filter:brightness(1.15); }
.bmr-v{ font-family:var(--fh); font-weight:800; font-size:1.05rem; color:var(--c);
  text-align:right; font-variant-numeric:tabular-nums; }
.bmr-v i{ font-style:normal; font-size:.72rem; margin-left:1px; opacity:.8; }

.bmw2-axis{ display:flex; justify-content:space-between; margin:14px 0 0;
  padding-left:calc(38px + 14px + 180px + 14px); padding-right:78px;
  font-size:.68rem; color:#8195ac; font-variant-numeric:tabular-nums; }
html[data-theme="light"] .bmw2-axis{ color:#5d7089; }

.bmw2-ref{ margin-top:20px; padding:14px 16px; border-radius:12px;
  background:rgba(37,170,221,.06); border:1px solid rgba(37,170,221,.2);
  display:flex; gap:14px; align-items:baseline; }
.bmw2-ref b{ font-family:var(--fh); font-size:1.15rem; font-weight:800; color:var(--ac);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.bmw2-ref span{ font-size:.78rem; line-height:1.5; color:#aab9cc; }
html[data-theme="light"] .bmw2-ref b{ color:#0B408B; }
html[data-theme="light"] .bmw2-ref span{ color:#4a5c74; }
.bmw2-src{ margin-top:14px; font-size:.7rem; line-height:1.5; color:#94a5ba; }
html[data-theme="light"] .bmw2-src{ color:#5d7089; }

@media (max-width:900px){
  .bmw2{ padding:20px 18px 18px; }
  .bmr{ grid-template-columns:34px minmax(0,1fr) 58px; grid-template-rows:auto auto; gap:10px 12px; }
  .bmr-ic{ grid-row:1; grid-column:1; width:34px; height:34px; }
  .bmr-n{ grid-row:1; grid-column:2; }
  .bmr-v{ grid-row:1; grid-column:3; }
  .bmr-track{ grid-row:2; grid-column:1 / -1; }
  .bmw2-axis{ padding-left:0; padding-right:0; }
}
@media (max-width:600px){
  .bmw2-note{ max-width:100%; }
  .bmw2-ref{ flex-direction:column; gap:6px; }
}


/* ============================================================================
   МЕТОДОЛОГИЯ (макет 09_39_25): слева описание, справа таймлайн на 9 шагов,
   между ними декоративная сфера.
   ========================================================================== */
.mgrid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,64px); align-items:start; margin-top:8px; }
.mleft .ssub{ max-width:34ch; }

.mfeats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:34px; }
.mfx-ic{ width:42px; height:42px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--ac);
  background:rgba(37,170,221,.10); border:1px solid rgba(37,170,221,.24);
  transition:transform var(--pr-t) var(--pr-ease); }
.mfx-ic svg{ width:20px; height:20px; }
.mfx:hover .mfx-ic{ transform:scale(1.07); }
.mfx b{ display:block; font-family:var(--fh); font-size:.92rem; font-weight:700;
  line-height:1.3; margin-top:14px; color:var(--tx); }
.mfx p{ font-size:.79rem; line-height:1.55; color:#aab9cc; margin-top:9px; }
html[data-theme="light"] .mfx p{ color:#4a5c74; }

.mtime{ display:flex; gap:14px; align-items:flex-start; margin-top:32px;
  padding:18px 20px; border-radius:var(--pr-r);
  background-image:var(--pr-surface); border:1px solid var(--pr-bd);
  box-shadow:var(--pr-bevel), var(--pr-shadow); }
.mtime-ic{ width:40px; height:40px; border-radius:11px; flex:0 0 40px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ac);
  background:rgba(37,170,221,.11); border:1px solid rgba(37,170,221,.25); }
.mtime-ic svg{ width:19px; height:19px; }
.mtime-l{ display:block; font-size:.76rem; font-weight:700; color:var(--ac); }
.mtime-v{ display:block; font-family:var(--fh); font-size:1.62rem; font-weight:800;
  letter-spacing:-.035em; color:var(--tx); margin-top:4px; font-variant-numeric:tabular-nums; }
.mtime-v i{ font-style:normal; font-size:1.05rem; font-weight:700; }
.mtime-d{ display:block; font-size:.76rem; color:#a2b2c6; margin-top:6px; }
html[data-theme="light"] .mtime-d{ color:#52657e; }
html[data-theme="light"] .mtime-l{ color:#0B408B; }

/* правая колонка */
.mright{ position:relative; }
.msteps{ display:flex; flex-direction:column; gap:4px; position:relative; z-index:2; }
.mst{ display:grid; grid-template-columns:46px minmax(0,1fr) 34px; gap:16px;
  align-items:start; padding:12px 0; position:relative; }
.mst-n{ width:46px; height:46px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-family:var(--fh); font-weight:800;
  font-size:.85rem; color:var(--ac); background:var(--bg2);
  border:1.5px solid rgba(37,170,221,.42); font-variant-numeric:tabular-nums;
  transition:transform var(--pr-t) var(--pr-ease), border-color var(--pr-t) var(--pr-ease),
             box-shadow var(--pr-t) var(--pr-ease); z-index:2; }
html[data-theme="light"] .mst-n{ background:#fff; color:#0B408B; border-color:rgba(11,64,139,.34); }
/* соединительная линия между кружками */
.mst:not(:last-child)::before{ content:''; position:absolute; left:23px; top:58px; bottom:-4px;
  width:1.5px; background:linear-gradient(180deg, rgba(37,170,221,.42), rgba(37,170,221,.14)); }
html[data-theme="light"] .mst:not(:last-child)::before{
  background:linear-gradient(180deg, rgba(11,64,139,.3), rgba(11,64,139,.1)); }
.mst-tx b{ display:block; font-family:var(--fh); font-size:.94rem; font-weight:700;
  line-height:1.3; color:var(--tx); }
.mst-tx p{ font-size:.8rem; line-height:1.5; color:#aab9cc; margin-top:6px; }
html[data-theme="light"] .mst-tx p{ color:#4a5c74; }
.mst-ic{ width:34px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; color:rgba(37,170,221,.6);
  transition:color var(--pr-t) var(--pr-ease), transform var(--pr-t) var(--pr-ease); }
.mst-ic svg{ width:22px; height:22px; }
.mst:hover .mst-n{ transform:scale(1.06); border-color:var(--ac);
  box-shadow:0 0 0 5px rgba(37,170,221,.12); }
.mst:hover .mst-ic{ color:var(--ac); transform:scale(1.08); }

/* декоративная сфера */
.msphere{
  position:absolute; left:-150px; top:50%; transform:translateY(-50%);
  width:240px; height:240px; border-radius:50%; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(circle at 38% 34%, rgba(37,170,221,.30), rgba(37,170,221,.06) 46%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(11,64,139,.34), rgba(6,12,22,0) 70%);
  box-shadow: inset 0 0 60px rgba(37,170,221,.16), 0 0 70px rgba(37,170,221,.10);
}
.msphere::before{ content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(37,170,221,.24); }
.msphere::after{ content:''; position:absolute; inset:-16px; border-radius:50%;
  border:1px solid rgba(37,170,221,.10); }
.msphere span{ font-family:var(--fh); font-size:.78rem; font-weight:800; letter-spacing:1.6px;
  color:rgba(210,232,245,.9); line-height:1.5; }
html[data-theme="light"] .msphere{
  background:
    radial-gradient(circle at 38% 34%, rgba(11,64,139,.16), rgba(11,64,139,.04) 46%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(11,64,139,.12), rgba(255,255,255,0) 70%);
  box-shadow: inset 0 0 50px rgba(11,64,139,.10), 0 0 50px rgba(11,64,139,.06);
}
html[data-theme="light"] .msphere span{ color:rgba(20,40,70,.72); }

@media (max-width:1150px){
  .mgrid{ grid-template-columns:1fr; gap:34px; }
  .msphere{ display:none; }
  .mleft .ssub{ max-width:100%; }
}
@media (max-width:700px){
  .mfeats{ grid-template-columns:1fr; gap:18px; }
  .mst{ grid-template-columns:40px minmax(0,1fr); gap:13px; }
  .mst-ic{ display:none; }
  .mst-n{ width:40px; height:40px; font-size:.8rem; }
  .mst:not(:last-child)::before{ left:20px; top:50px; }
}

/* длинные русские слова в признаках методологии */
.mfx b, .mfx p, .mst-tx b, .mst-tx p{ overflow-wrap:anywhere; word-break:break-word; }
@media (min-width:1600px){ .mfeats{ gap:24px; } }

/* длинные русские слова в признаках методологии */
.mfx b, .mfx p, .mst-tx b, .mst-tx p{ overflow-wrap:anywhere; word-break:break-word; }
@media (min-width:1600px){ .mfeats{ gap:24px; } }


/* ============================================================================
   ИСПРАВЛЕНИЕ МЕТОДОЛОГИИ: секция была зажата контейнером 1000px, из-за чего
   колонка признака сжималась до 90px и слова рвались посередине.
   Сфера стояла в левой колонке и налезала на карточку срока.
   ========================================================================== */
#methodology .ct{ max-width:min(1400px, 100%) !important; }

/* переносим только там, где слово физически не влезает */
.mfx b, .mst-tx b{ overflow-wrap:break-word !important; word-break:normal !important;
  hyphens:auto; }
.mfx p, .mst-tx p{ overflow-wrap:break-word !important; word-break:normal !important; }

/* сфера — строго в зазоре между колонками, за номерами шагов */
.mgrid{ position:relative; }
.msphere{
  left:auto !important; right:auto !important;
  position:absolute !important;
  top:50% !important; transform:translate(-50%,-50%) !important;
  width:min(260px, 22vw) !important; height:min(260px, 22vw) !important;
  z-index:0 !important; opacity:.85;
}
.mright{ position:static; }
.msteps{ position:relative; z-index:2; }

@media (min-width:1151px){
  /* центр зазора: левая колонка .86fr + половина gap */
  .msphere{ left:calc(43% + 6px) !important; }
}
@media (max-width:1400px){
  .msphere{ width:min(210px,20vw) !important; height:min(210px,20vw) !important; opacity:.7; }
}
@media (max-width:1150px){
  .msphere{ display:none !important; }
}

/* левая колонка рисуется поверх сферы, сфера смещена в правую половину зазора */
.mleft{ position:relative; z-index:2; }
@media (min-width:1151px){
  .msphere{ left:calc(47% + 18px) !important; }
}

/* на средних ширинах три колонки признаков слишком узкие — переводим в две */
@media (max-width:1340px) and (min-width:1151px){
  .mfeats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* ============================================================================
   ТОЧЕЧНЫЙ ГЛОБУС вместо градиентного пятна. Без текста внутри — надпись
   «9-step methodology» уже стоит надзаголовком секции и в самом заголовке,
   а внутри круга она налезала на текст шагов.
   ========================================================================== */
.mglobe{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  aspect-ratio:1; z-index:0; pointer-events:none;
}
.mglobe img{ width:100%; height:100%; display:block; }
/* положение и размер — ТОЛЬКО в финальном блоке «ГЛОБУС — единственное место» ниже */


/* ============================================================================
   ROI И КОНФИГУРАТОР: в макете фон темнее, а акценты ярче. У меня было
   наоборот — отсюда ощущение блёклости. Углубляем панели, поднимаем акценты.
   ========================================================================== */

/* --- панели темнее --- */
#roi .roiw, #configurator .cfg, #configurator .ucc, #roi .roicard{
  background-image:linear-gradient(180deg, rgba(255,255,255,.022), rgba(0,0,0,.10)) !important;
  border-color:rgba(255,255,255,.075) !important;
}
html[data-theme="light"] #roi .roiw,
html[data-theme="light"] #configurator .cfg,
html[data-theme="light"] #configurator .ucc,
html[data-theme="light"] #roi .roicard{
  background-image:linear-gradient(180deg,#ffffff,#f7f9fc) !important;
}

/* --- результат калькулятора: крупнее и ярче --- */
.roin{
  color:#3DC8F5 !important;
  font-size:clamp(1.45rem, 2.1vw, 1.95rem) !important;
  text-shadow:0 0 24px rgba(61,200,245,.28);
}
html[data-theme="light"] .roin{ color:#0B408B !important; text-shadow:none; }
.roicard{ position:relative; overflow:hidden; }
.roicard::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(61,200,245,.55),transparent);
}
html[data-theme="light"] .roicard::after{
  background:linear-gradient(90deg,transparent,rgba(11,64,139,.4),transparent);
}

/* --- ползунки: видимая заполненная часть --- */
.rosldr{
  background:linear-gradient(90deg,#25AADD 0%,#25AADD var(--fill,50%),
    rgba(255,255,255,.10) var(--fill,50%),rgba(255,255,255,.10) 100%) !important;
  height:5px !important;
}
html[data-theme="light"] .rosldr{
  background:linear-gradient(90deg,#0B408B 0%,#0B408B var(--fill,50%),
    rgba(13,21,32,.12) var(--fill,50%),rgba(13,21,32,.12) 100%) !important;
}
.rosldr::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(37,170,221,.22), 0 0 14px rgba(61,200,245,.45), 0 1px 4px rgba(0,0,0,.5) !important;
}

/* --- иконки в конфигураторе ярче --- */
#configurator .ucc:hover, #configurator .cfg:hover{
  border-color:rgba(61,200,245,.5) !important;
}


/* --- конфигуратор: иконки насыщеннее, панель темнее (как в макете) --- */
#configurator .co-ico{
  filter:saturate(1.25) brightness(1.18);
  border:1px solid currentColor; border-color:color-mix(in srgb, currentColor 32%, transparent);
  box-shadow:0 0 14px -4px currentColor;
  transition:transform var(--pr-t) var(--pr-ease), box-shadow var(--pr-t) var(--pr-ease),
             filter var(--pr-t) var(--pr-ease);
}
#configurator .co:hover .co-ico{
  transform:scale(1.07); filter:saturate(1.4) brightness(1.3);
  box-shadow:0 0 20px -3px currentColor;
}
#configurator .co{
  background-image:linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.12)) !important;
  border-color:rgba(255,255,255,.08) !important;
}
#configurator .co:hover{
  background-image:linear-gradient(180deg, rgba(37,170,221,.10), rgba(0,0,0,.08)) !important;
  border-color:rgba(61,200,245,.45) !important;
}
#configurator .co.on, #configurator .co[aria-pressed="true"]{
  border-color:rgba(61,200,245,.6) !important;
  box-shadow:inset 0 0 0 1px rgba(61,200,245,.25), 0 6px 20px rgba(0,0,0,.3) !important;
}
html[data-theme="light"] #configurator .co{
  background-image:linear-gradient(180deg,#ffffff,#f7f9fc) !important;
}
html[data-theme="light"] #configurator .co-ico{ filter:none; box-shadow:none; }

/* фон обеих секций ближе к макету */
#roi, #configurator{ background:linear-gradient(180deg, rgba(4,9,17,.55), rgba(4,9,17,.25)) !important; }
html[data-theme="light"] #roi, html[data-theme="light"] #configurator{
  background:linear-gradient(180deg,#eef1f7,#f4f6fa) !important;
}


/* ============================================================================
   МЕТОДОЛОГИЯ КАК В МАКЕТЕ: шаги по дуге, кривая по фактическим центрам,
   глобус с надписью в центре, разделители между признаками.
   ========================================================================== */

/* признаки — с вертикальными разделителями */
.mfeats{ gap:0 !important; }
.mfx{ padding:0 22px; position:relative; }
.mfx:first-child{ padding-left:0; }
.mfx + .mfx::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg,transparent,var(--pr-bd),transparent); }

/* шаги смещаются по дуге */
.mst{ margin-left:var(--o, 0px); transition:margin-left .25s var(--pr-ease); }
/* иконка прижата к правому краю колонки, а не едет вместе со строкой */
.mst-ic{ position:absolute; right:0; top:14px; margin-left:0 !important; }
.mst{ padding-right:46px; }
/* собственная линия шага больше не нужна — рисуем общую кривую */
.mst:not(:last-child)::before{ display:none !important; }

/* кривая */
.mcurve{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; overflow:visible; }
.mcurve path{ fill:none; stroke:rgba(37,170,221,.42); stroke-width:1.5; stroke-linecap:round; }
html[data-theme="light"] .mcurve path{ stroke:rgba(11,64,139,.32); }

/* глобус: крупнее, с надписью внутри, левее дуги */
.mglobe{ display:flex; align-items:center; justify-content:center; }
.mglobe img{ position:absolute; inset:0; }
.mglobe-t{
  position:relative; z-index:2; text-align:center;
  font-family:var(--fh); font-weight:800; letter-spacing:1.8px; line-height:1.55;
  font-size:clamp(.72rem, 1.05vw, .92rem);
  color:#dbeeff; text-shadow:0 2px 14px rgba(4,10,20,.85), 0 0 22px rgba(37,170,221,.35);
}
html[data-theme="light"] .mglobe-t{ color:#12325c; text-shadow:0 1px 8px rgba(255,255,255,.9); }


@media (max-width:1150px){
  .mfx{ padding:0; }
  .mfx + .mfx::before{ display:none; }
  .mfeats{ gap:20px !important; }
  .mst{ margin-left:0 !important; padding-right:0; }
  .mst-ic{ position:static; }
  .mcurve{ display:none; }
  .mst:not(:last-child)::before{ display:block !important; }
}


/* ============================================================================
   ИСПРАВЛЕНИЕ ДУГИ И ГЛОБУСА.
   Причина сдвига кривой: .mright был static, поэтому абсолютный SVG
   позиционировался от .mgrid, а координаты считались от .mright.
   ============================================================================ */
.mright{ position:relative !important; }
.mcurve{ left:0 !important; top:0 !important; }










/* ============================================================================
   ГЛОБУС — ЕДИНСТВЕННОЕ место, где задаются его положение и размер.
   Все прежние слои-переопределения удалены 01.08 (история: сфера кочевала
   между -190px и +60px пятью слоями !important).
   Решение: сфера стоит ЗА колонкой кружков, дуга проходит поверх — позиция
   привязана к кружкам и не зависит от ширины колонок.
   Надпись внутри сферы отключена: она дублирует slbl/h2 секции и на любой
   позиции либо ложится на кружки, либо на текст левой колонки.
   ========================================================================== */
@media (min-width:1401px){
  .mglobe{ left:60px; width:min(265px, 19vw); opacity:.8; }
}
@media (min-width:1151px) and (max-width:1400px){
  .mglobe{ left:50px; width:min(230px, 18vw); opacity:.7; }
}
@media (max-width:1150px){ .mglobe{ display:none; } }
.mglobe-t{ display:none; }
html[data-theme="light"] .mglobe{ opacity:.4; }


/* ---------- боли без отдельного заголовка (страницы 02-07) ---------- */
.pngrid-notitle .pn-tx{ padding-top:2px; }
.pngrid-notitle .pn-tx p{ margin-top:0; font-size:.9rem; line-height:1.6; color:#c3d1e2; }
html[data-theme="light"] .pngrid-notitle .pn-tx p{ color:#3d4f66; }


/* ============ benchmark comparison rows (avg vs best-in-class) ============ */
.bmw2{ --neg:#ef4444; --pos:#34d399; }
html[data-theme="light"] .bmw2{ --neg:#c31e23; --pos:#0e7a4e; }
.bmc-rows{ display:flex; flex-direction:column; gap:24px; }
.bmcr{ display:grid; grid-template-columns:38px minmax(140px,210px) minmax(0,1fr);
  gap:8px 16px; align-items:center; }
.bmc-pair{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.bmc-line{ display:grid; grid-template-columns:118px minmax(0,1fr) 88px;
  gap:12px; align-items:center; }
.bmc-tag{ font-size:.7rem; letter-spacing:.3px; color:var(--mu2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bmc-line .bmr-track{ height:8px; }
.bmc-v{ font-family:var(--fh); font-weight:800; font-size:.92rem; text-align:right;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.bmc-line.neg .bmc-v{ color:var(--neg); }
.bmc-line.neg .bmr-fill{ background:linear-gradient(90deg,rgba(239,68,68,.5),var(--neg)); }
.bmc-line.pos .bmc-v{ color:var(--pos); }
.bmc-line.pos .bmr-fill{ background:linear-gradient(90deg,rgba(52,211,153,.45),var(--pos)); }
@media (max-width:900px){
  .bmcr{ grid-template-columns:34px minmax(0,1fr); }
  .bmcr .bmr-ic{ width:34px; height:34px; }
  .bmc-pair{ grid-column:1 / -1; }
  .bmc-line{ grid-template-columns:92px minmax(0,1fr) 74px; gap:9px; }
}

/* stat-style benchmark rows: wider label column for sentence labels */
.bmw2-st .bmr{ grid-template-columns:38px minmax(200px,320px) minmax(0,1fr) 76px; }
.bmw2-st .bmr-n{ font-size:.83rem; line-height:1.45; }
.bmw2-st .bmw2-axis{ padding-left:calc(38px + 14px + 320px + 14px); padding-right:90px; }
@media (max-width:900px){
  .bmw2-st .bmr{ grid-template-columns:34px minmax(0,1fr) 58px; }
  .bmw2-st .bmw2-axis{ padding-left:0; padding-right:0; }
}



/* ============================================================================
   ПРЕМИУМ-СЛОЙ ИНТЕРАКТИВНЫХ ИНСТРУМЕНТОВ (все 7 страниц), 01.08.
   ВАЖНО: активные состояния кнопок JS красит через inline
   style.background / style.borderColor / style.color — эти три свойства
   здесь НЕ переопределяются. Слой строится только на transform,
   box-shadow, transition, псевдоэлементах и focus-стилях.
   Ховеры строгие: подъём ≤2px, 200ms, без свечений.
   ========================================================================== */

/* --- кнопки-опции всех инструментов --- */
.cfgo, .rtb, .cBtn,
#demoChips > button,
[id^="dt-"][onclick],
#matDims button{
  transition:transform var(--pr-t) var(--pr-ease),
             box-shadow var(--pr-t) var(--pr-ease),
             border-color var(--pr-t) var(--pr-ease),
             background var(--pr-t) var(--pr-ease),
             color var(--pr-t) var(--pr-ease) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.22);
  will-change:transform;
}
.cfgo:hover, .rtb:hover, .cBtn:hover,
#demoChips > button:hover,
[id^="dt-"][onclick]:hover,
#matDims button:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 7px 16px rgba(0,0,0,.30);
}
.cfgo:active, .rtb:active, .cBtn:active,
#demoChips > button:active,
[id^="dt-"][onclick]:active,
#matDims button:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.25);
}
html[data-theme="light"] .cfgo, html[data-theme="light"] .rtb,
html[data-theme="light"] .cBtn,
html[data-theme="light"] #demoChips > button,
html[data-theme="light"] [id^="dt-"][onclick],
html[data-theme="light"] #matDims button{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(13,21,32,.10);
}
html[data-theme="light"] .cfgo:hover, html[data-theme="light"] .rtb:hover,
html[data-theme="light"] .cBtn:hover,
html[data-theme="light"] #demoChips > button:hover,
html[data-theme="light"] [id^="dt-"][onclick]:hover,
html[data-theme="light"] #matDims button:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 7px 18px rgba(13,21,32,.14);
}

/* --- панели результатов: тонкая световая линия сверху + бевел --- */
#factCard, #matResult, #riskResult, #callPanel,
#docBefore, #docAfter, #demoMsgs, #cfgInner{
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -18px rgba(0,0,0,.55);
}
#factCard::after, #matResult::after, #riskResult::after,
#callPanel::after, #cfgInner::after{
  content:''; position:absolute; left:14px; right:14px; top:0; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(61,200,245,.5),transparent);
}
html[data-theme="light"] #factCard, html[data-theme="light"] #matResult,
html[data-theme="light"] #riskResult, html[data-theme="light"] #callPanel,
html[data-theme="light"] #docBefore, html[data-theme="light"] #docAfter,
html[data-theme="light"] #demoMsgs, html[data-theme="light"] #cfgInner{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 10px 28px -16px rgba(13,21,32,.22);
}
html[data-theme="light"] #factCard::after, html[data-theme="light"] #matResult::after,
html[data-theme="light"] #riskResult::after, html[data-theme="light"] #callPanel::after,
html[data-theme="light"] #cfgInner::after{
  background:linear-gradient(90deg,transparent,rgba(11,64,139,.35),transparent);
}

/* --- поле ввода демо-агента --- */
#demoInput{ transition:border-color var(--pr-t) var(--pr-ease),
            box-shadow var(--pr-t) var(--pr-ease) !important; }
#demoInput:focus{
  outline:none;
  border-color:rgba(61,200,245,.55) !important;
  box-shadow:0 0 0 3px rgba(37,170,221,.14);
}
html[data-theme="light"] #demoInput:focus{
  border-color:rgba(11,64,139,.5) !important;
  box-shadow:0 0 0 3px rgba(11,64,139,.10);
}

/* --- пузыри диалога демо-агента --- */
#demoMsgs > div{ box-shadow:0 2px 8px rgba(0,0,0,.20); }
html[data-theme="light"] #demoMsgs > div{ box-shadow:0 2px 8px rgba(13,21,32,.08); }

/* --- доступность: видимый фокус у всех интерактивных контролов --- */
.cfgo:focus-visible, .rtb:focus-visible, .cBtn:focus-visible,
#demoChips > button:focus-visible, [id^="dt-"][onclick]:focus-visible,
#matDims button:focus-visible, .co:focus-visible,
.rosldr:focus-visible, .h2b:focus-visible{
  outline:2px solid rgba(61,200,245,.75); outline-offset:2px;
}
html[data-theme="light"] .cfgo:focus-visible, html[data-theme="light"] .rtb:focus-visible,
html[data-theme="light"] .cBtn:focus-visible,
html[data-theme="light"] #demoChips > button:focus-visible,
html[data-theme="light"] [id^="dt-"][onclick]:focus-visible,
html[data-theme="light"] #matDims button:focus-visible,
html[data-theme="light"] .co:focus-visible,
html[data-theme="light"] .rosldr:focus-visible,
html[data-theme="light"] .h2b:focus-visible{
  outline-color:rgba(11,64,139,.7);
}

/* --- ползунки ROI: аккуратный ховер ручки --- */
.rosldr::-webkit-slider-thumb{ transition:box-shadow var(--pr-t) var(--pr-ease); }
.rosldr:hover::-webkit-slider-thumb{
  box-shadow:0 0 0 6px rgba(37,170,221,.16), 0 1px 4px rgba(0,0,0,.5) !important;
}
html[data-theme="light"] .rosldr:hover::-webkit-slider-thumb{
  box-shadow:0 0 0 6px rgba(11,64,139,.14), 0 1px 3px rgba(13,21,32,.3) !important;
}


/* ============================================================================
   TECH STACK — нативные панели (замена растровых инфографик, 01.08).
   Идея из сгенерированных картинок: категория с иконкой и подписью +
   капсулы продуктов. Трилингва, обе темы, лёгкий вес.
   ========================================================================== */
.txs{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.txp{ position:relative; border-radius:var(--pr-r-lg); padding:20px 22px 18px;
  background-image:var(--pr-surface); border:1px solid var(--pr-bd);
  box-shadow:var(--pr-bevel), var(--pr-shadow); overflow:hidden; }
.txp::before{ content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px;
  border-radius:0 3px 3px 0; background:var(--txc,#25AADD); opacity:.8; }
.txp-h{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.txp-ic{ width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--txc,#25AADD);
  background:color-mix(in srgb, var(--txc,#25AADD) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--txc,#25AADD) 30%, transparent); }
.txp-ic svg{ width:19px; height:19px; }
.txp-t b{ display:block; font-family:var(--fh); font-size:1rem; font-weight:700;
  line-height:1.25; color:var(--tx); }
.txp-t span{ display:block; font-size:.78rem; line-height:1.4; color:#a2b2c6; margin-top:3px; }
html[data-theme="light"] .txp-t span{ color:#52657e; }
.txp-tags{ display:flex; flex-wrap:wrap; gap:9px; }
.txt{ display:inline-flex; align-items:center; font-size:.8rem; line-height:1.35;
  color:var(--tx); padding:7px 13px; border-radius:10px;
  background:rgba(255,255,255,.045); border:1px solid var(--pr-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform var(--pr-t) var(--pr-ease),
             border-color var(--pr-t) var(--pr-ease),
             box-shadow var(--pr-t) var(--pr-ease); }
.txt:hover{ transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--txc,#25AADD) 45%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.26); }
html[data-theme="light"] .txp{ background-image:linear-gradient(180deg,#fff,#fafbfd); }
html[data-theme="light"] .txt{
  background:rgba(13,21,32,.035); border-color:rgba(13,21,32,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
html[data-theme="light"] .txt:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(13,21,32,.12); }
@media (max-width:600px){
  .txp{ padding:16px 16px 14px; }
  .txp-tags{ gap:7px; }
  .txt{ font-size:.76rem; padding:6px 11px; }
}

/* ============================================================================
   СВЕТЛАЯ ТЕМА — ФИКСЫ ПО АУДИТУ 01.08 (контрасты WCAG + невидимые артефакты).
   Расчётные контрасты до/после — в HANDOFF.
   ========================================================================== */

/* 1. Вторичный текст: #6b7d94 давал 4.2:1 → 5.1:1 */
html[data-theme="light"]{ --mu2:#5d7089; }

/* 2. Бенчмарки: значения и иконки строк — акцентные цвета затемняются
      к тексту с сохранением оттенка (teal 2.7 → ~7, янтарный 2.1 → ~6.5) */
html[data-theme="light"] .bmr-v{ color:color-mix(in srgb, var(--c) 55%, #0d1520); }
html[data-theme="light"] .bmr-ic{
  color:color-mix(in srgb, var(--c) 60%, #0d1520);
  background:rgba(var(--rgb), .14);
  border-color:rgba(var(--rgb), .38);
}

/* 3. Tech stack: иконки категорий и ховер капсул */
html[data-theme="light"] .txp-ic{
  color:color-mix(in srgb, var(--txc,#25AADD) 58%, #0d1520);
  background:color-mix(in srgb, var(--txc,#25AADD) 13%, #ffffff);
  border-color:color-mix(in srgb, var(--txc,#25AADD) 34%, #ffffff);
}
html[data-theme="light"] .txt:hover{
  border-color:color-mix(in srgb, var(--txc,#25AADD) 45%, #5d7089);
}

/* 4. Методология: teal-иконки 2.7:1 → бренд-синий */
html[data-theme="light"] .mfx-ic, html[data-theme="light"] .mtime-ic{
  color:#0B408B; background:rgba(11,64,139,.08); border-color:rgba(11,64,139,.22);
}
html[data-theme="light"] .mst-ic{ color:rgba(11,64,139,.55); }
html[data-theme="light"] .mst:hover .mst-ic{ color:#0B408B; }
html[data-theme="light"] .bmw2-note-ic{ color:#0B408B; }

/* 5. Невидимые на белом ховеры (страничные правила задают белёсый фон) */
html[data-theme="light"] .theme-toggle:hover{ background:rgba(13,21,32,.07); }
html[data-theme="light"] .btng:hover{
  background:rgba(13,21,32,.05); border-color:rgba(13,21,32,.22);
}

/* 6. Сноска «как это считается» */
html[data-theme="light"] #roi-method{
  background:rgba(13,21,32,.03); border-color:rgba(13,21,32,.10);
}
html[data-theme="light"] #roi-method code{ color:#2f4a6e; }

/* 7. Оффер-чат (страница 01): тело окна в light светлое, а чипы/инпут/пузыри
      были белёсыми с белым текстом. Шапку на брендовом градиенте не трогаем.
      Пузырь пользователя (linear-gradient) не трогаем. */
html[data-theme="light"] #offerChatPanel [onclick*="sendOfferChip"]{
  background:rgba(11,64,139,.06) !important;
  border-color:rgba(11,64,139,.24) !important;
  color:#274b74 !important;
}
html[data-theme="light"] #offerChatMsgs > div:not([style*="linear-gradient"]){
  background:rgba(13,21,32,.05) !important;
}
html[data-theme="light"] #offerChatInput{
  background:rgba(13,21,32,.04) !important;
  border-color:rgba(13,21,32,.14) !important;
  color:#0d1520 !important;
}
html[data-theme="light"] #offerChatInput::placeholder{ color:#5d7089; }

/* 8. TCO (страница 02): треки столбцов rgba(255,255,255,.07) на белом */
html[data-theme="light"] #bm02 div[style*="255,255,255"]{
  background:rgba(13,21,32,.08) !important;
}

/* 9. Разделители статс-бэнда на главной: были белёсыми на белой карточке */
html[data-theme="light"] .nh-statsband .nh-st + .nh-st::before{
  background:rgba(13,21,32,.14);
}
html[data-theme="light"] .nh-statsband .nh-st:nth-child(n+3)::after{
  background:rgba(13,21,32,.12);
}


/* ============================================================================
   СВЕТЛЫЕ HERO-СЦЕНЫ ОФФЕРНЫХ СТРАНИЦ (01.08): пары h2s-dark/h2s-light,
   переключение по теме. На страницах со светлым кадром (.has-light)
   плотные light-вуали заменяются лёгкой — сцена видна.
   Страница 01 (без светлого кадра) живёт по старым правилам.
   ========================================================================== */
.h2s-light{ display:none; }
html[data-theme="light"] .hero2-scene.has-light .h2s-dark{ display:none; }
html[data-theme="light"] .hero2-scene.has-light .h2s-light{ display:block; width:100%; height:100%; }
html[data-theme="light"] .hero2-scene.has-light .h2s-light img{
  width:100%; height:100%; object-fit:cover; object-position:100% 50%; }
html[data-theme="light"] .hero2-scene.has-light img{ opacity:1 !important; }
html[data-theme="light"] .hero2-scene.has-light::after{
  background:linear-gradient(90deg, rgba(242,244,249,.92) 0%,
    rgba(242,244,249,.55) 28%, rgba(242,244,249,.15) 55%,
    rgba(242,244,249,0) 74%) !important; }


/* ============================================================================
   ПЛАВАЮЩИЕ КНОПКИ ОФФЕРНЫХ СТРАНИЦ (02.08): Telegram + AI + WhatsApp
   в один столбец, та же сетка, что на главной (54/48/44, зазор 14px).
   На 02–07 своего чат-виджета нет — кнопка AI ведёт к консультанту главной.
   ========================================================================== */
.tg-fab, .ai-fab{
  position:fixed !important; right:24px !important; z-index:500;
  width:54px !important; height:54px !important; border-radius:50% !important;
  display:flex !important; align-items:center; justify-content:center;
  transition:transform .2s;
}
.tg-fab{ bottom:160px !important; background:#29A9EB;
  box-shadow:0 8px 24px rgba(41,169,235,.4); }
.tg-fab svg{ width:25px; height:25px; fill:#fff; margin-left:-2px; }
.ai-fab{ bottom:24px !important; box-shadow:0 8px 28px rgba(11,64,139,.55); }
.ai-fab svg{ width:54px; height:54px; display:block; }
.tg-fab:hover, .ai-fab:hover{ transform:translateY(-2px); }
/* WhatsApp и собственная кнопка чата на 01 — в ту же сетку */
.wa{ right:24px !important; bottom:92px !important;
  width:54px !important; height:54px !important; }
.wa svg{ width:26px; height:26px; }
.chat-btn-offer{ right:24px !important; bottom:24px !important;
  width:54px !important; height:54px !important; }
/* страницы без своего чата: Telegram занимает место над WhatsApp */
@media (max-width:768px){
  .tg-fab, .ai-fab{ right:16px !important; width:48px !important; height:48px !important; }
  .tg-fab{ bottom:144px !important; }
  .ai-fab{ bottom:20px !important; }
  .ai-fab svg{ width:48px; height:48px; }
  .tg-fab svg{ width:22px; height:22px; }
  .wa{ right:16px !important; bottom:82px !important; width:48px !important; height:48px !important; }
  .chat-btn-offer{ right:16px !important; bottom:20px !important; width:48px !important; height:48px !important; }
}
@media (max-width:480px){
  .tg-fab, .ai-fab{ right:12px !important; width:44px !important; height:44px !important; }
  .tg-fab{ bottom:132px !important; }
  .ai-fab{ bottom:16px !important; }
  .ai-fab svg{ width:44px; height:44px; }
  .tg-fab svg{ width:20px; height:20px; }
  .wa{ right:12px !important; bottom:74px !important; width:44px !important; height:44px !important; }
  .chat-btn-offer{ right:12px !important; bottom:16px !important; width:44px !important; height:44px !important; }
}


/* ============================================================================
   МОБИЛЬНАЯ ПОДТЯЖКА ОФФЕРНЫХ СТРАНИЦ (02.08) — компактнее и без переполнений.
   ========================================================================== */
@media (max-width:600px){
  /* tech stack: меньше воздуха, капсулы в две строки без обрезки */
  .txs{ gap:12px; }
  .txp{ padding:15px 14px 13px; border-radius:14px; }
  .txp-h{ gap:11px; margin-bottom:11px; }
  .txp-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; }
  .txp-ic svg{ width:17px; height:17px; }
  .txp-t b{ font-size:.94rem; }
  .txp-t span{ font-size:.75rem; }
  .txt{ font-size:.75rem; padding:6px 10px; border-radius:9px; }

  /* методология: узкая колонка номеров, дуга и подпись не давят */
  .mst{ grid-template-columns:34px minmax(0,1fr); gap:11px; padding:10px 0; }
  .mst-ic, .mst > :nth-child(3){ display:none; }
  .mcurve{ display:none; }
  .mglobe{ display:none; }
  .mfx, .mtime{ font-size:.8rem; }

  /* бенчмарки: подписи переносятся, значения не режутся */
  .bmr{ grid-template-columns:minmax(0,1fr) auto; row-gap:6px; }
  .bmr-l{ white-space:normal; font-size:.8rem; line-height:1.35; }
  .bmr-v{ font-size:.9rem; }
  .bmw2-ref{ font-size:.76rem; line-height:1.4; }

  /* карточки метрик hero: две в ряд вместо трёх узких */
  .hmc{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; }
  .hmc-d{ font-size:.72rem; }

  /* полоса логотипов: не сжимать в кашу */
  .tl img{ max-height:20px; }
}
@media (max-width:430px){
  .hmc{ grid-template-columns:1fr !important; }
  .txp-tags{ gap:6px; }
}


/* ============================================================================
   МОБИЛЬНЫЕ ФИКСЫ: САЙДБАР И HERO (02.08).
   Причина бага: правило `.sn{display:flex}` выше в этом файле не имело
   медиа-запроса и перебивало `display:none` из стилей страницы (premium.css
   подключается последним) — сайдбар оставался поверх контента на телефоне.
   ========================================================================== */
@media (max-width:960px){
  .sn{ display:none !important; }
  .wr{ margin-left:0 !important; }
}
/* hero-сцена на мобильном мешает читаемости — убираем, текст остаётся */
@media (max-width:900px){
  .hero2-scene{ display:none !important; }
  .hero2{ padding-left:16px !important; padding-right:16px !important; }
}
/* смена темы без «серых» промежуточных состояний */
html.th-swap, html.th-swap *, html.th-swap *::before, html.th-swap *::after{
  transition:none !important;
}


/* ============================================================================
   СКАНЕР AI-РИСКОВ (02.08) — двухпанельный инструмент по макету.
   Слева анкета, справа скор-кольцо, выводы, радар и приоритеты.
   ========================================================================== */
.rsk{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:20px; margin-top:26px; }
.rsk-form, .rsk-res{ background:var(--bg3); border:1px solid var(--bd);
  border-radius:20px; padding:26px 24px; box-shadow:var(--pr-bevel), var(--pr-shadow); }

/* --- вопросы --- */
.rsk-q{ display:flex; gap:12px; align-items:flex-start; margin:22px 0 12px; }
.rsk-q:first-child{ margin-top:0; }
.rsk-qi{ flex:0 0 36px; width:36px; height:36px; border-radius:11px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--ac);
  background:rgba(37,170,221,.10); border:1px solid rgba(37,170,221,.24); }
.rsk-qi svg{ width:18px; height:18px; }
.rsk-q b{ display:block; font-family:var(--fh); font-size:.9rem; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; color:var(--tx); }
.rsk-q i{ display:block; font-style:normal; font-size:.78rem; color:var(--mu2); margin-top:3px; }

/* --- плитки инструментов --- */
.rsk-tools{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:9px; }
.rsk-tool{ display:flex; align-items:center; gap:10px; padding:12px 12px;
  border:1px solid var(--bd); border-radius:11px; background:var(--sf);
  cursor:pointer; transition:border-color .2s, background .2s, transform .2s; min-width:0; }
.rsk-tool:hover{ transform:translateY(-2px); border-color:rgba(37,170,221,.4); }
.rsk-tool input{ position:absolute; opacity:0; width:0; height:0; }
.rsk-box{ flex:0 0 17px; width:17px; height:17px; border-radius:5px;
  border:1.5px solid var(--bd); background:transparent; position:relative; transition:.2s; }
.rsk-tool input:checked ~ .rsk-box, .rsk-c input:checked ~ .rsk-box{
  background:var(--ac); border-color:var(--ac); }
.rsk-tool input:checked ~ .rsk-box::after, .rsk-c input:checked ~ .rsk-box::after{
  content:''; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.rsk-tool input:checked ~ .rsk-tn{ color:var(--tx); }
.rsk-tool:has(input:checked){ border-color:rgba(37,170,221,.55); background:rgba(37,170,221,.06); }
.rsk-ico{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; display:inline-flex;
  align-items:center; justify-content:center; font-family:var(--fh); font-size:.72rem;
  font-weight:700; color:#fff; background:var(--tc,#8fa0b8); }
.rsk-tn{ font-size:.83rem; color:var(--mu2); line-height:1.3; min-width:0;
  overflow-wrap:normal; word-break:normal; hyphens:none; }

/* --- варианты ответов --- */
.rsk-opts{ display:flex; flex-wrap:wrap; gap:8px 18px; padding-left:48px; }
.rsk-opts-w{ gap:8px 14px; }
.rsk-r, .rsk-c{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:.82rem; color:var(--mu2); }
.rsk-r input, .rsk-c input{ position:absolute; opacity:0; width:0; height:0; }
.rsk-dot{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--bd);
  position:relative; transition:.2s; }
.rsk-r input:checked ~ .rsk-dot{ border-color:var(--ac); }
.rsk-r input:checked ~ .rsk-dot::after{ content:''; position:absolute; inset:3px;
  border-radius:50%; background:var(--ac); }
.rsk-r input:checked ~ span, .rsk-c input:checked ~ span{ color:var(--tx); }

/* --- кнопка --- */
.rsk-go{ width:100%; margin-top:24px; padding:15px 20px; border:none; border-radius:12px;
  background:linear-gradient(135deg,var(--ac),#0B408B); color:#fff; cursor:pointer;
  font-family:var(--fh); font-size:.98rem; font-weight:700; display:inline-flex;
  align-items:center; justify-content:center; gap:10px;
  box-shadow:0 10px 26px -12px var(--ac); transition:transform .2s, box-shadow .2s; }
.rsk-go svg{ width:20px; height:20px; }
.rsk-go:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--ac); }

/* --- правая панель --- */
.rsk-lbl{ font-size:.72rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--mu2); margin:0 0 14px; }
.rsk-head{ display:flex; align-items:center; gap:22px; margin-bottom:22px; flex-wrap:wrap; }
.rsk-ring{ position:relative; flex:0 0 152px; width:152px; height:152px; }
.rsk-ring svg{ width:100%; height:100%; }
.rsk-num{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.rsk-num b{ font-family:var(--fh); font-size:2.5rem; font-weight:800; line-height:1; color:var(--tx); }
.rsk-num i{ font-style:normal; font-size:.8rem; color:var(--mu2); margin-top:4px; }
.rsk-verdict{ flex:1 1 220px; min-width:0; }
.rsk-verdict h3{ font-family:var(--fh); font-size:1.5rem; font-weight:800; margin:0 0 8px; }
.rsk-verdict p{ font-size:.88rem; line-height:1.6; color:var(--mu2); margin:0; }

.rsk-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:22px; }
.rsk-card{ background:var(--sf); border:1px solid var(--bd); border-radius:14px; padding:16px; }
.rsk-ct{ font-size:.7rem; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--mu2); margin:0 0 12px; }
.rsk-find{ display:flex; flex-direction:column; }
.rsk-f{ display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--bd); }
.rsk-f:last-child{ border-bottom:none; padding-bottom:0; }
.rsk-fi{ flex:0 0 22px; }
.rsk-fi svg{ width:20px; height:20px; }
.rsk-f b{ display:block; font-size:.86rem; font-weight:600; color:var(--tx); }
.rsk-f i{ display:block; font-style:normal; font-size:.78rem; color:var(--mu2); margin-top:2px; line-height:1.45; }
.rsk-radar svg{ width:100%; height:auto; display:block; }

/* --- приоритеты --- */
.rsk-prio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.rsk-p{ background:var(--sf); border:1px solid var(--bd); border-radius:14px; padding:14px 15px;
  border-top:3px solid var(--pc,#8fa0b8); }
.rsk-ph{ font-size:.7rem; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--pc,#8fa0b8); font-weight:700; margin:0 0 10px; }
.rsk-pi{ padding:9px 0; border-bottom:1px solid var(--bd); }
.rsk-pi:last-child{ border-bottom:none; padding-bottom:0; }
.rsk-pi b{ display:block; font-size:.85rem; color:var(--tx); }
.rsk-pi i{ display:block; font-style:normal; font-size:.76rem; color:var(--mu2); margin-top:3px; line-height:1.45; }

/* --- CTA --- */
.rsk-cta{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; }
.rsk-b1, .rsk-b2{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px;
  border-radius:11px; font-family:var(--fb); font-size:.9rem; font-weight:600;
  cursor:pointer; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.rsk-b1{ background:var(--ac); color:#fff; border:1px solid var(--ac); }
.rsk-b2{ background:transparent; color:var(--tx); border:1px solid var(--bd); }
.rsk-b1:hover, .rsk-b2:hover{ transform:translateY(-2px); }
.rsk-b1 svg, .rsk-b2 svg{ width:17px; height:17px; }

/* до первого запуска правая панель приглушена */
.rsk-res:not(.done) .rsk-grid, .rsk-res:not(.done) .rsk-prio,
.rsk-res:not(.done) .rsk-cta{ opacity:.45; pointer-events:none; }

/* --- светлая тема --- */
html[data-theme="light"] .rsk-form, html[data-theme="light"] .rsk-res{
  background:#fff; border-color:rgba(13,21,32,.10); }
html[data-theme="light"] .rsk-tool, html[data-theme="light"] .rsk-card,
html[data-theme="light"] .rsk-p{ background:rgba(13,21,32,.03); border-color:rgba(13,21,32,.10); }
html[data-theme="light"] .rsk-box, html[data-theme="light"] .rsk-dot{ border-color:rgba(13,21,32,.25); }

/* --- адаптив --- */
@media (max-width:1100px){
  .rsk{ grid-template-columns:1fr; }
  .rsk-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .rsk-form, .rsk-res{ padding:18px 15px; border-radius:16px; }
  .rsk-tools{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
  .rsk-opts{ padding-left:0; }
  .rsk-prio{ grid-template-columns:1fr; }
  .rsk-head{ gap:16px; }
  .rsk-ring{ flex:0 0 120px; width:120px; height:120px; }
  .rsk-num b{ font-size:2rem; }
  .rsk-verdict h3{ font-size:1.25rem; }
  .rsk-cta{ justify-content:stretch; }
  .rsk-b1, .rsk-b2{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:420px){
  .rsk-tools{ grid-template-columns:1fr; }
  .rsk-tn{ font-size:.85rem; }
}


/* ===== сканер: иконки и визуальная отделка (02.08) ===== */
.rsk-ico{ background:transparent !important; color:var(--tc,#8fa0b8);
  border:1px solid color-mix(in srgb, var(--tc,#8fa0b8) 40%, transparent);
  background:color-mix(in srgb, var(--tc,#8fa0b8) 12%, transparent) !important;
  width:26px; height:26px; flex:0 0 26px; border-radius:8px; }
.rsk-ico svg{ width:19px; height:19px; }
.rsk-tool:has(input:checked) .rsk-ico{
  background:color-mix(in srgb, var(--tc,#8fa0b8) 22%, transparent) !important;
  border-color:color-mix(in srgb, var(--tc,#8fa0b8) 65%, transparent); }

/* иконка вывода — круглая плашка в цвет статуса */
.rsk-ft{ flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--fc,#f59e0b);
  background:color-mix(in srgb, var(--fc,#f59e0b) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--fc,#f59e0b) 34%, transparent); }
.rsk-ft svg{ width:17px; height:17px; }
.rsk-f{ gap:13px; align-items:flex-start; }
.rsk-f:hover b{ color:var(--ac); }

/* приоритеты: точка в заголовке + иконка у пункта */
.rsk-ph{ display:flex; align-items:center; gap:8px; }
.rsk-pd{ width:8px; height:8px; border-radius:50%; background:var(--pc,#8fa0b8);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pc,#8fa0b8) 22%, transparent); }
.rsk-pi{ display:flex; gap:10px; align-items:flex-start; }
.rsk-pic{ flex:0 0 28px; width:28px; height:28px; border-radius:8px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pc,#8fa0b8);
  background:color-mix(in srgb, var(--pc,#8fa0b8) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--pc,#8fa0b8) 28%, transparent); }
.rsk-pic svg{ width:15px; height:15px; }
.rsk-p{ transition:transform .2s, border-color .2s; }
.rsk-p:hover{ transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--pc,#8fa0b8) 45%, transparent); }

/* кольцо: мягкое свечение под аркой */
.rsk-ring::before{ content:''; position:absolute; inset:18%; border-radius:50%;
  background:radial-gradient(circle, rgba(37,170,221,.16), transparent 70%); pointer-events:none; }

/* светлая тема: плашки читаемы на белом */
html[data-theme="light"] .rsk-ico{
  color:color-mix(in srgb, var(--tc,#8fa0b8) 62%, #0d1520);
  background:color-mix(in srgb, var(--tc,#8fa0b8) 13%, #fff) !important; }
html[data-theme="light"] .rsk-ft{ color:color-mix(in srgb, var(--fc,#f59e0b) 68%, #0d1520); }
html[data-theme="light"] .rsk-pic{ color:color-mix(in srgb, var(--pc,#8fa0b8) 68%, #0d1520); }

/* фирменные иконки инструментов (SVG от заказчика) — без цветной подложки */
.rsk-ico:has(img){ background:transparent !important; border-color:transparent !important; }
.rsk-ico img{ width:26px; height:26px; display:block; object-fit:contain; }
.rsk-tool:has(input:checked) .rsk-ico:has(img){ background:transparent !important; }


/* ===== мобильная типографика офферных: слова не рвутся (02.08) ===== */
@media (max-width:700px){
  .hi2 h1, .stit, .oc h4, .mst-tx b, .txp-t b, .rsk-tn, .rsk-f b, .rsk-pi b{
    overflow-wrap:break-word !important; word-break:normal !important; hyphens:none !important; }
  .hi2 .hbadge, .hbadge{ white-space:normal; line-height:1.35; }
  .stit{ font-size:clamp(1.3rem,5.6vw,1.8rem) !important; }
}


/* ============================================================================
   СКАНЕР: ШИРЕ И КОМПАКТНЕЕ (02.08). Контент страницы ограничен .ct 900px,
   из-за чего инструмент вытягивался в высоту. Здесь он выходит за колонку
   до 1240px и раскладывается плотнее.
   ========================================================================== */
@media (min-width:1101px){
  #risk-scanner .rsk{
    width:min(1240px, calc(100vw - 210px - 96px));   /* минус сайдбар и поля */
    margin-left:50%; transform:translateX(-50%);
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:22px;
  }
  #risk-scanner .rsk-tools{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* вопрос слева, ответы справа — пары выровнены по одной линии */
  #risk-scanner .rsk-form{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
    column-gap:24px; row-gap:0; align-items:center; align-content:start; }
  #risk-scanner .rsk-form > .rsk-q:first-child,
  #risk-scanner .rsk-form > #rskTools,
  #risk-scanner .rsk-form > .rsk-go{ grid-column:1 / -1; }
  #risk-scanner .rsk-form > .rsk-q{ margin:0; padding:16px 0;
    border-top:1px solid var(--bd); align-self:stretch; align-items:center; }
  #risk-scanner .rsk-form > .rsk-q:first-child{ border-top:none; padding-top:0; }
  #risk-scanner .rsk-form > .rsk-opts{ padding:16px 0; border-top:1px solid var(--bd);
    align-self:stretch; display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; }
  #risk-scanner .rsk-q b{ font-size:.86rem; line-height:1.35; }
  /* правая панель: выводы и радар рядом, приоритеты в три колонки */
  #risk-scanner .rsk-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  #risk-scanner .rsk-radar svg{ max-height:230px; }
}
@media (min-width:1500px){
  #risk-scanner .rsk{ width:min(1400px, calc(100vw - 210px - 120px)); }
  #risk-scanner .rsk-tools{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* чуть плотнее по вертикали на всех ширинах */
.rsk-form, .rsk-res{ padding:22px 22px; }
.rsk-tools{ gap:8px; }
.rsk-tool{ padding:11px 11px; }
.rsk-head{ margin-bottom:18px; }
.rsk-grid{ margin-bottom:18px; }


/* ============================================================================
   МОБИЛЬНЫЙ HERO ОФФЕРНЫХ (02.08): занимал почти экран — ужимаем
   заголовок, подзаголовок и отступы, сцена уже скрыта выше.
   ========================================================================== */
@media (max-width:900px){
  .hero{ padding:26px 16px 26px !important; }
  .hi2 h1, .hi h1{ font-size:clamp(1.5rem,7vw,2.05rem) !important; line-height:1.16 !important;
    margin:8px 0 10px !important; }
  /* перенос в заголовке оставляем: без него слова склеиваются */
  .hsub{ font-size:.92rem !important; line-height:1.5 !important; margin-bottom:16px !important; }
  .hbadge{ font-size:.72rem !important; padding:7px 12px !important; }
  .hero2-btns{ gap:9px !important; }
  .hero2-btns .hcta, .hero2-btns a, .hero2-btns button{ padding:11px 18px !important; font-size:.88rem !important; }
  .hmc{ margin-top:14px !important; }
}
@media (max-width:480px){
  .hero{ padding:20px 14px 22px !important; }
  .hi2 h1, .hi h1{ font-size:clamp(1.4rem,6.6vw,1.8rem) !important; }
  .hsub{ font-size:.88rem !important; }
}


/* ============================================================================
   HERO НА ТЕЛЕФОНЕ — В ОДИН ЭКРАН (02.08d).
   Раньше блок растягивался на три экрана: крупный заголовок, длинный
   подзаголовок, две большие кнопки и три карточки метрик колонкой.
   ========================================================================== */
@media (max-width:700px){
  .hero{ padding:18px 14px 20px !important; }
  .hbadge{ font-size:.68rem !important; padding:6px 11px !important; }
  .hi2 h1, .hi h1{ font-size:clamp(1.38rem,6.2vw,1.7rem) !important;
    line-height:1.14 !important; margin:6px 0 8px !important; }
  /* подзаголовок: показываем 3 строки, остальное — по кнопке «подробнее» ниже по странице */
  .hsub{ font-size:.87rem !important; line-height:1.45 !important;
    margin-bottom:12px !important; display:-webkit-box; -webkit-line-clamp:4;
    -webkit-box-orient:vertical; overflow:hidden; }
  /* кнопки в один ряд */
  .hero2-btns{ display:flex !important; flex-direction:row !important; gap:8px !important; }
  .hero2-btns > *{ flex:1 1 0; min-width:0; text-align:center;
    padding:11px 10px !important; font-size:.82rem !important; line-height:1.2 !important; }
  .hero2-btns svg, .hero2-btns .arw{ display:none !important; }
  /* метрики: компактная строка из трёх — цифра и подпись, описание скрыто */
  .hmets{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important; margin-top:12px !important; }
  .hmc{ padding:10px 8px !important; border-radius:11px !important; text-align:center; }
  .hmc-h{ display:flex !important; flex-direction:column !important; align-items:center !important;
    gap:2px !important; }
  .hmc-ic{ display:none !important; }
  .hmc-v{ font-size:1.02rem !important; line-height:1.1 !important; }
  .hmc-u{ font-size:.62rem !important; line-height:1.25 !important; letter-spacing:.2px !important; }
  .hmc-d{ display:none !important; }
  /* полоса логотипов: две строки по три, мельче */
  .tl{ flex:0 0 33% !important; }
  .tl img{ max-height:17px !important; }
}
@media (max-width:380px){
  .hi2 h1, .hi h1{ font-size:1.3rem !important; }
  .hmc-v{ font-size:.95rem !important; }
}


/* ============================================================================
   ШИРИНА КОЛОНКИ HERO НА МОБИЛЬНОМ (02.08f) — ГЛАВНАЯ ПРИЧИНА «трёх экранов».
   Выше в этом файле стоит `.hi2-tx{max-width:min(620px,46%) !important}` без
   медиа-запроса: на телефоне текст жался в 46% ширины, правая половина пустая,
   а блок тянулся вниз. Здесь колонка возвращается на всю ширину.
   ========================================================================== */
@media (max-width:900px){
  .hi, .hi2{ grid-template-columns:1fr !important; gap:0 !important; }
  .hi2-tx, .hi-tx{ max-width:100% !important; width:100% !important; }
  .hero2, .hero{ padding-right:14px !important; }
  /* карточки метрик: одинаковая высота, подпись в две строки максимум */
  .hmets{ align-items:stretch !important; }
  .hmc{ display:flex !important; flex-direction:column; justify-content:center;
    min-height:74px; }
  .hmc-u{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; }
  /* кнопки на всю ширину, но в один ряд и с одинаковой высотой */
  .hero2-btns{ display:grid !important; grid-template-columns:1fr 1fr !important;
    gap:8px !important; align-items:stretch; }
  .hero2-btns > *{ display:flex !important; align-items:center; justify-content:center;
    min-height:46px; }
}


/* ============================================================================
   FAQ-БЛОК (03.08) — вопросы видимы на странице, как требует Google
   для FAQPage-разметки. Аккордеон на <details>, без JS.
   ========================================================================== */
.faq-list{ max-width:840px; margin:26px auto 0; display:flex; flex-direction:column; gap:10px; }
.faq-i{ background:var(--sf); border:1px solid var(--bd); border-radius:14px;
  padding:0 18px; transition:border-color .2s, background .2s; }
.faq-i[open]{ border-color:rgba(37,170,221,.35); background:rgba(37,170,221,.05); }
.faq-i summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:14px; padding:16px 0;
  font-family:var(--fh); font-size:.98rem; font-weight:600; color:var(--tx); }
.faq-i summary::-webkit-details-marker{ display:none; }
.faq-i summary:hover{ color:var(--ac); }
.faq-x{ flex:0 0 20px; width:20px; height:20px; position:relative; }
.faq-x::before, .faq-x::after{ content:''; position:absolute; background:var(--ac);
  border-radius:2px; transition:transform .2s, opacity .2s; }
.faq-x::before{ left:0; top:9px; width:20px; height:2px; }
.faq-x::after{ left:9px; top:0; width:2px; height:20px; }
.faq-i[open] .faq-x::after{ transform:rotate(90deg); opacity:0; }
.faq-i p{ margin:0; padding:0 0 18px; font-size:.92rem; line-height:1.62; color:var(--mu2);
  max-width:72ch; }
@media (max-width:700px){
  .faq-list{ margin-top:18px; gap:8px; }
  .faq-i{ padding:0 14px; border-radius:12px; }
  .faq-i summary{ font-size:.92rem; padding:14px 0; }
  .faq-i p{ font-size:.88rem; padding-bottom:14px; }
}


/* ===== мобильное меню услуг на офферных страницах (03.08) ===== */
.oh-burger{ display:none; width:36px; height:36px; border-radius:9px; border:1px solid var(--bd);
  background:transparent; cursor:pointer; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; }
.oh-burger span{ display:block; width:17px; height:2px; background:var(--tx); border-radius:2px;
  transition:transform .2s, opacity .2s; }
.oh-burger.on span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.oh-burger.on span:nth-child(2){ opacity:0; }
.oh-burger.on span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.oh-menu[hidden]{ display:none !important; }
.oh-menu{ position:fixed; top:60px; left:10px; right:10px; z-index:9999; max-height:80vh;
  overflow-y:auto; background:var(--bg3); border:1px solid var(--bd); border-radius:14px;
  padding:10px; box-shadow:0 26px 60px -22px rgba(0,0,0,.7); display:flex; flex-direction:column;
  scrollbar-width:thin; }
html[data-theme="light"] .oh-menu{ background:#fff; box-shadow:0 26px 55px -24px rgba(13,21,32,.32); }
.oh-h{ font-size:.7rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--mu2);
  margin:6px 10px 8px; }
.oh-menu a{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:10px;
  color:var(--tx); text-decoration:none; font-size:.92rem; }
.oh-menu a b{ font-family:var(--fh); font-size:.8rem; color:var(--mu2); min-width:22px; }
.oh-menu a:hover{ background:var(--sf); }
.oh-menu a[aria-current="page"]{ background:rgba(37,170,221,.10); color:var(--ac); }
.oh-menu a[aria-current="page"] b{ color:var(--ac); }
.oh-cta{ margin-top:8px; justify-content:center; background:var(--ac); color:#fff !important;
  font-weight:600; }
@media (max-width:960px){ .oh-burger{ display:flex; } }
@media (min-width:961px){ .oh-menu{ display:none !important; } .oh-burger{ display:none !important; } }


/* ============================================================================
   FAQ — КОМПАКТНЫЙ ВИД (03.08b). Блок нужен для соответствия FAQPage-разметке,
   поэтому остаётся видимым, но не перетягивает внимание: мелкий заголовок,
   тонкие строки без карточек, приглушённые цвета, всё свёрнуто.
   ========================================================================== */
.faqs{ padding:34px 0 38px !important; background:transparent !important; }
.faqs .slbl{ display:none !important; }
.faqs .stit{ font-size:.94rem !important; font-weight:600 !important; text-align:left !important;
  color:var(--mu2) !important; margin:0 0 6px !important; letter-spacing:.2px !important; }
.faq-list{ max-width:820px; margin:0; gap:0 !important; border-top:1px solid var(--bd); }
.faq-i{ background:transparent !important; border:none !important;
  border-bottom:1px solid var(--bd) !important; border-radius:0 !important; padding:0 !important; }
.faq-i[open]{ background:transparent !important; }
.faq-i summary{ padding:11px 0 !important; font-family:var(--fb) !important;
  font-size:.86rem !important; font-weight:500 !important; color:var(--mu2) !important; }
.faq-i summary:hover{ color:var(--tx) !important; }
.faq-i[open] summary{ color:var(--tx) !important; }
.faq-x{ width:14px !important; height:14px !important; opacity:.55; }
.faq-x::before{ top:6px !important; width:14px !important; }
.faq-x::after{ left:6px !important; height:14px !important; }
.faq-i p{ font-size:.83rem !important; line-height:1.55 !important; padding:0 0 12px !important;
  color:var(--mu2) !important; opacity:.9; }
@media (max-width:700px){
  .faqs{ padding:26px 0 28px !important; }
  .faq-i summary{ font-size:.82rem !important; padding:10px 0 !important; }
  .faq-i p{ font-size:.8rem !important; }
}

/* ============================================================================
   ИНТЕРАКТИВНЫЕ ТУЛЫ — ЕДИНЫЙ СЛОЙ (03.08). Общая оболочка .itk для всех
   шести инструментов офферных страниц + специфичные блоки под каждый макет.
   Все цветовые акценты задаются переменной --ik / --mc / --rc на элементе.
   ========================================================================== */
.itk, .itk *, .itprog, .itprog *{ hyphens:none !important; -webkit-hyphens:none !important;
  overflow-wrap:normal; word-break:normal; }
.itk{ background:var(--bg3); border:1px solid var(--bd); border-radius:20px;
  overflow:hidden; box-shadow:var(--pr-bevel), var(--pr-shadow); margin-top:26px; }
.itk-hd{ display:flex; align-items:center; gap:18px; padding:24px 28px;
  border-bottom:1px solid var(--bd);
  background:linear-gradient(135deg, rgba(11,64,139,.30), rgba(37,170,221,.05)); }
.itk-hi{ flex:0 0 58px; width:58px; height:58px; border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ik,#25AADD);
  background:color-mix(in srgb, var(--ik,#25AADD) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--ik,#25AADD) 36%, transparent); }
.itk-hi svg{ width:27px; height:27px; }
.itk-ht{ min-width:0; }
.itk-ht h3{ font-family:var(--fh); font-size:1.28rem; font-weight:800;
  margin:0 0 5px; color:var(--tx); line-height:1.25; }
.itk-ht p{ font-size:.86rem; color:var(--mu2); margin:0; line-height:1.5; }
.itk-bd{ padding:26px 28px; }

/* --- две колонки выбора с разделителем --- */
.itk-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:36px; position:relative; }
.itk-cols::before{ content:''; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:var(--bd); }
.itk-mid{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%; background:var(--bg3);
  border:1px solid var(--bd); display:flex; align-items:center; justify-content:center;
  color:var(--mu2); z-index:2; }
.itk-mid svg{ width:16px; height:16px; }
.itk-cl h4{ font-family:var(--fb); font-size:.72rem; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--ac); font-weight:600; margin:0 0 5px;
  display:flex; align-items:center; gap:9px; }
.itk-cl h4 svg{ width:16px; height:16px; }
.itk-cs{ font-size:.82rem; color:var(--mu2); margin:0 0 16px; }

/* --- карточка-опция --- */
.itopts{ display:flex; flex-direction:column; gap:10px; }
.itopt{ display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px 16px; border:1px solid var(--bd); border-radius:13px;
  background:var(--sf); cursor:pointer; font-family:var(--fb);
  transition:transform .2s, border-color .2s, background .2s; }
.itopt:hover{ transform:translateY(-2px); border-color:rgba(37,170,221,.4); }
.itopt.on{ border-color:rgba(37,170,221,.6); background:rgba(37,170,221,.08); }
.itopt-ic{ flex:0 0 40px; width:40px; height:40px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ik,#25AADD);
  background:color-mix(in srgb, var(--ik,#25AADD) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ik,#25AADD) 30%, transparent); }
.itopt-ic svg{ width:20px; height:20px; }
.itopt-tx{ flex:1 1 auto; min-width:0; }
.itopt-tx b{ display:block; font-size:.92rem; font-weight:600; color:var(--tx); line-height:1.3; }
.itopt-tx i{ display:block; font-style:normal; font-size:.79rem; color:var(--mu2);
  margin-top:3px; line-height:1.45; }
.itopt-dot{ flex:0 0 20px; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--bd); position:relative; transition:.2s; }
.itopt.on .itopt-dot{ border-color:var(--ac); }
.itopt.on .itopt-dot::after{ content:''; position:absolute; inset:4px;
  border-radius:50%; background:var(--ac); }

/* --- подвал-подсказка --- */
.itk-foot{ margin-top:26px; padding-top:22px; border-top:1px solid var(--bd);
  display:flex; align-items:center; justify-content:center; gap:13px;
  color:var(--mu2); font-size:.88rem; text-align:left; }
.itk-fic{ flex:0 0 36px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(37,170,221,.42); color:var(--ac);
  display:inline-flex; align-items:center; justify-content:center; }
.itk-fic svg{ width:17px; height:17px; }

/* --- результат внутри тула --- */
.itres{ margin-top:22px; padding-top:22px; border-top:1px solid var(--bd); }
.itres-h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ittag{ display:inline-flex; align-items:center; padding:6px 14px; border-radius:9px;
  font-family:var(--fh); font-size:.8rem; font-weight:700;
  color:var(--ik,#25AADD);
  background:color-mix(in srgb, var(--ik,#25AADD) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--ik,#25AADD) 38%, transparent); }
.itres-h span{ font-size:.82rem; color:var(--mu2); }
.itspecs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; }
.itspec{ background:var(--sf); border:1px solid var(--bd); border-radius:12px; padding:13px 15px; }
.itspec b{ display:flex; align-items:center; gap:9px; font-size:.68rem; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--mu2); font-weight:600; margin-bottom:9px; }
.itspec-ic{ flex:0 0 28px; width:28px; height:28px; border-radius:9px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--ik,#25AADD);
  background:color-mix(in srgb, var(--ik,#25AADD) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--ik,#25AADD) 30%, transparent); }
.itspec-ic svg{ width:15px; height:15px; }
.itspec i{ display:block; font-style:normal; font-size:.86rem; color:var(--tx); line-height:1.4; }

/* --- таблетки-вкладки --- */
.ittabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.ittab{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px;
  border-radius:999px; border:1px solid var(--bd); background:var(--sf);
  color:var(--mu2); font-size:.86rem; font-family:var(--fb); cursor:pointer;
  transition:border-color .2s, color .2s, background .2s, transform .2s; }
.ittab svg{ width:16px; height:16px; }
.ittab:hover{ border-color:rgba(37,170,221,.4); color:var(--tx); transform:translateY(-2px); }
.ittab.on{ border-color:rgba(37,170,221,.6); background:rgba(37,170,221,.10); color:var(--ac); }

/* --- кольцо счёта --- */
.itring{ position:relative; flex:0 0 var(--rs,124px); width:var(--rs,124px); height:var(--rs,124px); }
.itring svg{ width:100%; height:100%; display:block; }
.itring-c{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.itring-c b{ font-family:var(--fh); font-size:2rem; font-weight:800; line-height:1;
  color:var(--rc,var(--tx)); }
.itring-c i{ font-style:normal; font-size:.72rem; color:var(--mu2); margin-top:3px; }

/* ============================ 05 — до / после ============================ */
.itba{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px; position:relative; }
.itba-vs{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:var(--bg3);
  border:1px solid var(--bd); display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-weight:800; font-size:.86rem; color:var(--tx); z-index:2; }
.itba-p{ border-radius:16px; padding:20px 22px; border:1px solid; }
.itba-p.bad{ background:rgba(239,68,68,.05); border-color:rgba(239,68,68,.22); }
.itba-p.good{ background:rgba(37,170,221,.05); border-color:rgba(37,170,221,.26); }
.itba-h{ display:flex; align-items:center; gap:12px; margin-bottom:12px;
  font-family:var(--fh); font-weight:800; letter-spacing:1.1px; font-size:.94rem;
  text-transform:uppercase; }
.itba-p.bad .itba-h{ color:#ef4444; }
.itba-p.good .itba-h{ color:var(--ac); }
.itba-hi{ flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; }
.itba-hi svg{ width:17px; height:17px; }
.itba-r{ display:flex; align-items:center; gap:13px; padding:11px 0;
  border-bottom:1px solid var(--bd); }
.itba-r:last-child{ border-bottom:none; padding-bottom:2px; }
.itba-n{ flex:0 0 26px; width:26px; height:26px; border-radius:7px; display:flex;
  align-items:center; justify-content:center; font-size:.76rem; font-weight:700;
  font-family:var(--fh); }
.itba-p.bad .itba-n{ background:rgba(239,68,68,.13); color:#ef4444; }
.itba-p.good .itba-n{ background:rgba(37,170,221,.13); color:var(--ac); }
.itba-t{ flex:1 1 auto; min-width:0; font-size:.88rem; color:var(--tx); line-height:1.45; }
.itba-i{ flex:0 0 20px; display:inline-flex; opacity:.8; }
.itba-i svg{ width:19px; height:19px; }

.itmet{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.itm{ background:var(--sf); border:1px solid var(--bd); border-radius:16px; padding:18px 20px; }
.itm-t{ display:flex; align-items:center; gap:15px; }
.itm-ic{ flex:0 0 50px; width:50px; height:50px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--mc,#25AADD);
  background:color-mix(in srgb, var(--mc,#25AADD) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--mc,#25AADD) 30%, transparent); }
.itm-ic svg{ width:23px; height:23px; }
.itm-v{ font-family:var(--fh); font-size:1.65rem; font-weight:800;
  color:var(--mc,#25AADD); line-height:1.15; }
.itm-l{ font-size:.79rem; color:var(--mu2); margin-top:2px; }
.itm-bars{ display:flex; align-items:flex-end; gap:4px; height:42px; margin-top:16px; }
.itm-bars span{ flex:1 1 auto; border-radius:2px; background:var(--mc,#25AADD);
  opacity:.85; min-height:3px; }

/* ======================= 06 — аналитика звонков ========================= */
.itcalls{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.itcall{ display:flex; align-items:center; gap:14px; padding:16px 18px;
  border:1px solid var(--bd); border-radius:14px; background:var(--sf);
  cursor:pointer; text-align:left; font-family:var(--fb); width:100%;
  transition:transform .2s, border-color .2s, background .2s; }
.itcall:hover{ transform:translateY(-2px); border-color:rgba(37,170,221,.4); }
.itcall.on{ border-color:rgba(37,170,221,.6); background:rgba(37,170,221,.09); }
.itcall-ic{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--mu2);
  background:var(--sf2); border:1px solid var(--bd); }
.itcall.on .itcall-ic{ color:var(--ac); background:rgba(37,170,221,.13);
  border-color:rgba(37,170,221,.35); }
.itcall-ic svg{ width:20px; height:20px; }
.itcall-tx{ flex:1 1 auto; min-width:0; }
.itcall-tx b{ display:block; font-size:.93rem; font-weight:600; color:var(--tx); }
.itcall-tx i{ display:block; font-style:normal; font-size:.78rem; color:var(--mu2); margin-top:3px; }
.itcall-tx u{ display:block; text-decoration:none; font-size:.78rem; font-weight:600;
  margin-top:3px; color:var(--sc,#4ade80); }
.itcall-ar{ flex:0 0 16px; color:var(--mu2); display:inline-flex; }
.itcall-ar svg{ width:16px; height:16px; }

.itcp{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:16px; }
.itcp-l, .itcp-r{ background:var(--sf); border:1px solid var(--bd);
  border-radius:16px; padding:20px 22px; min-width:0; }
.itsc{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.itsc-t b{ display:block; font-family:var(--fh); font-size:1.15rem; font-weight:800;
  color:var(--rc,#4ade80); }
.itsc-t i{ display:block; font-style:normal; font-size:.86rem; color:var(--tx); margin-top:2px; }
.itsc-t span{ display:block; font-size:.79rem; color:var(--mu2); margin-top:6px; }
.itmeta{ border-top:1px solid var(--bd); }
.itmeta-r{ display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--bd); font-size:.86rem; }
.itmeta-i{ flex:0 0 20px; color:var(--mu2); display:inline-flex; }
.itmeta-i svg{ width:19px; height:19px; }
.itmeta-k{ flex:0 0 108px; color:var(--mu2); }
.itmeta-v{ flex:1 1 auto; min-width:0; color:var(--tx); }
.itsum-p{ font-size:.86rem; color:var(--mu2); line-height:1.65; margin:14px 0 0; }
.itflg-l{ font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--mu2); margin:16px 0 9px; }
.itflg{ background:var(--bg3); border:1px solid var(--bd); border-radius:11px; padding:12px 14px; }
.itflg div{ font-size:.82rem; line-height:1.5; padding:5px 0; }
.itcp-hd{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; }
.itcp-hd p{ font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--mu2); margin:0; }
.ittr-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:10px; border:1px solid var(--bd); background:var(--bg3);
  color:var(--tx); font-size:.79rem; font-family:var(--fb); cursor:pointer;
  transition:border-color .2s, transform .2s; }
.ittr-btn:hover{ border-color:rgba(37,170,221,.45); transform:translateY(-2px); }
.ittr-btn svg{ width:14px; height:14px; }
.ittr-list{ max-height:330px; overflow-y:auto; padding-right:4px; }
.ittr{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; }
.ittr-a{ flex:0 0 28px; width:28px; height:28px; border-radius:50%; font-size:.74rem;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-family:var(--fh); }
.ittr-a.a{ color:var(--ac); background:rgba(37,170,221,.13); border:1px solid rgba(37,170,221,.3); }
.ittr-a.c{ color:var(--mu2); background:var(--sf2); border:1px solid var(--bd); }
.ittr-t{ flex:1 1 auto; min-width:0; font-size:.86rem; color:var(--tx); line-height:1.5; }
.ittr-s{ flex:0 0 auto; font-size:.75rem; color:var(--mu2); padding-top:3px; }
.itplay{ display:flex; align-items:center; gap:14px; border:1px solid var(--bd);
  border-radius:13px; padding:12px 15px; margin-top:14px; background:var(--bg3); }
.itplay-b{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(37,170,221,.14); color:var(--ac); display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:transform .2s; }
.itplay-b:hover{ transform:translateY(-2px); }
.itplay-b svg{ width:15px; height:15px; }
.itplay-t{ font-size:.76rem; color:var(--mu2); font-variant-numeric:tabular-nums; }
.itwave{ flex:1 1 auto; display:flex; align-items:center; gap:2px; height:30px; min-width:0; }
.itwave span{ flex:1 1 auto; background:var(--ac); opacity:.55; border-radius:1px; min-height:2px; }
.itnote{ display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:18px; font-size:.84rem; color:var(--mu2); }
.itnote-i{ flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  background:rgba(37,170,221,.13); color:var(--ac); display:inline-flex;
  align-items:center; justify-content:center; }
.itnote-i svg{ width:17px; height:17px; }

/* ========================== 04 — демо агента ============================ */
.itag{ display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr); }
.itag-side{ border-right:1px solid var(--bd); padding:30px 24px; text-align:center; }
.itag-av{ width:132px; height:132px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ac);
  background:radial-gradient(circle at 50% 40%, rgba(37,170,221,.22), rgba(11,64,139,.10) 62%, transparent 76%);
  border:1px solid rgba(37,170,221,.22); }
.itag-av svg{ width:62px; height:62px; }
.itag-side h4{ font-family:var(--fh); font-size:1.22rem; font-weight:800; margin:0 0 7px; color:var(--tx); }
.itag-on{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:#4ade80; }
.itag-on::before{ content:''; width:8px; height:8px; border-radius:50%; background:#4ade80; }
.itag-side > p{ font-size:.83rem; color:var(--mu2); line-height:1.6; margin:14px 0 0; }
.itag-fs{ margin-top:20px; padding-top:20px; border-top:1px solid var(--bd);
  display:flex; flex-direction:column; gap:16px; }
.itag-f{ display:flex; gap:12px; text-align:left; }
.itag-fi{ flex:0 0 24px; color:var(--ac); display:inline-flex; padding-top:2px; }
.itag-fi svg{ width:20px; height:20px; }
.itag-f b{ display:block; font-size:.85rem; font-weight:600; color:var(--tx); }
.itag-f i{ display:block; font-style:normal; font-size:.79rem; color:var(--mu2);
  margin-top:3px; line-height:1.5; }
.itag-main{ display:flex; flex-direction:column; min-width:0; }
.itag-hd{ padding:24px 26px; border-bottom:1px solid var(--bd);
  background:linear-gradient(135deg, rgba(11,64,139,.28), rgba(37,170,221,.05)); }
.itag-hd h3{ font-family:var(--fh); font-size:1.28rem; font-weight:800; margin:0 0 5px; color:var(--tx); }
.itag-hd p{ font-size:.85rem; color:var(--mu2); margin:0; }
.itag-q{ padding:18px 26px 0; }
.itag-ql{ font-size:.68rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--mu2); margin:0 0 11px; }
.itchat{ padding:18px 26px 4px; display:flex; flex-direction:column; gap:14px;
  min-height:150px; max-height:340px; overflow-y:auto; }
.itmsg-u{ align-self:flex-end; display:flex; align-items:center; gap:10px; max-width:86%; }
.itmsg-u div{ background:linear-gradient(135deg,#0B408B,#1a5fbe); color:#fff;
  border-radius:14px 14px 4px 14px; padding:11px 15px; font-size:.88rem; line-height:1.5; }
.itmsg-u span{ font-size:.72rem; color:var(--mu2); white-space:nowrap; }
.itmsg-b{ display:flex; gap:12px; align-self:flex-start; max-width:92%; }
.itmsg-av{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; color:var(--ac);
  background:rgba(37,170,221,.12); border:1px solid rgba(37,170,221,.26);
  display:flex; align-items:center; justify-content:center; }
.itmsg-av svg{ width:20px; height:20px; }
.itmsg-t{ background:var(--sf); border:1px solid var(--bd);
  border-radius:14px 14px 14px 4px; padding:13px 16px; font-size:.88rem;
  line-height:1.65; color:var(--tx); min-width:0; }
.itmsg-t em{ color:var(--ac); font-style:normal; }
.itmsg-tm{ font-size:.72rem; color:var(--mu2); margin-top:6px; }
.itdots{ display:inline-flex; gap:5px; align-items:center; }
.itdots span{ width:6px; height:6px; border-radius:50%; background:var(--mu2);
  animation:itblink 1.2s infinite; }
.itdots span:nth-child(2){ animation-delay:.2s; }
.itdots span:nth-child(3){ animation-delay:.4s; }
@keyframes itblink{ 0%,100%{opacity:.25} 50%{opacity:1} }
.itsug{ display:flex; gap:9px; flex-wrap:wrap; padding:6px 26px 0; }
.itsug button{ border:1px solid var(--bd); background:var(--sf); color:var(--mu2);
  border-radius:999px; padding:8px 15px; font-size:.8rem; font-family:var(--fb);
  cursor:pointer; transition:border-color .2s, color .2s; }
.itsug button:hover{ border-color:rgba(37,170,221,.45); color:var(--tx); }
.itask{ display:flex; gap:12px; padding:18px 26px 24px; margin-top:16px;
  border-top:1px solid var(--bd); }
.itask input{ flex:1 1 auto; min-width:0; background:var(--sf); border:1px solid var(--bd);
  border-radius:11px; padding:13px 16px; color:var(--tx); font-family:var(--fb);
  font-size:.88rem; outline:none; transition:border-color .2s; }
.itask input:focus{ border-color:rgba(37,170,221,.5); }
.itask button{ border:none; border-radius:11px; padding:13px 24px; cursor:pointer;
  background:linear-gradient(135deg,#0B408B,#1a5fbe); color:#fff; font-family:var(--fb);
  font-size:.88rem; font-weight:600; white-space:nowrap; transition:transform .2s; }
.itask button:hover{ transform:translateY(-2px); }

/* ======================= 03 — зрелость данных =========================== */
.itprog{ display:flex; align-items:center; gap:16px; justify-content:flex-end;
  flex-wrap:wrap; margin:-6px 0 20px; }
.itprog-l{ font-size:.68rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--mu2); }
.itprog-bar{ width:280px; max-width:100%; height:8px; border-radius:4px;
  background:var(--bd); overflow:hidden; }
.itprog-bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,#0B408B,#25AADD); border-radius:4px; transition:width .4s; }
.itprog-n{ font-size:.82rem; color:var(--tx); font-variant-numeric:tabular-nums; }

.itdim{ display:grid; grid-template-columns:1fr;
  gap:12px; padding:16px 0; border-bottom:1px solid var(--bd); align-items:stretch; }
.itdim > .itdim-h{ grid-column:1 / -1; }
.itdim:last-of-type{ border-bottom:none; }
.itdim-h{ display:flex; gap:13px; align-items:flex-start; padding-right:8px; }
.itdim-ic{ flex:0 0 40px; width:40px; height:40px; border-radius:11px; display:flex;
  align-items:center; justify-content:center; color:var(--ik,#25AADD);
  background:color-mix(in srgb, var(--ik,#25AADD) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ik,#25AADD) 30%, transparent); }
.itdim-ic svg{ width:20px; height:20px; }
.itdim-h b{ display:block; font-size:.9rem; font-weight:600; color:var(--tx); line-height:1.35; }
.itdim-h i{ display:block; font-style:normal; font-size:.78rem; color:var(--mu2);
  margin-top:4px; line-height:1.45; }
.itdo{ display:flex; align-items:flex-start; gap:10px; padding:14px 30px 14px 14px;
  border:1px solid var(--bd); border-radius:12px; background:var(--sf);
  cursor:pointer; font-family:var(--fb); text-align:left; position:relative;
  transition:transform .2s, border-color .2s, background .2s; }
.itdo-ok{ position:absolute; top:10px; right:10px; width:21px; height:21px;
  border-radius:50%; background:var(--ik,#25AADD); color:#fff; display:none;
  align-items:center; justify-content:center; }
.itdo-ok svg{ width:12px; height:12px; }
.itdo.on .itdo-ok{ display:flex; }
.itdo-t b{ display:block; font-weight:600; }
.itdo-t i{ display:block; font-style:normal; margin-top:3px; opacity:.78; }
.itdo:hover{ transform:translateY(-2px); border-color:rgba(37,170,221,.4); }
.itdo-dot{ flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--bd); position:relative; margin-top:1px; transition:.2s; }
.itdo-t{ flex:1 1 auto; min-width:0; font-size:.82rem; color:var(--mu2); line-height:1.4; }
.itdo.on{ border-color:color-mix(in srgb, var(--ik,#25AADD) 60%, transparent);
  background:color-mix(in srgb, var(--ik,#25AADD) 8%, transparent); }
.itdo.on .itdo-t{ color:var(--tx); }
.itdo.on .itdo-dot{ border-color:var(--ik,#25AADD); }
.itdo.on .itdo-dot::after{ content:''; position:absolute; inset:3px; border-radius:50%;
  background:var(--ik,#25AADD); }

.itsum{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);
  gap:28px; background:var(--sf); border:1px solid var(--bd); border-radius:16px;
  padding:22px 24px; margin-top:20px; align-items:start; }
.itsum-h{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; min-width:0; }
.itsum-h > span{ min-width:0; flex:1 1 190px; }
.itsum-h > .itring{ flex:0 0 auto; }
.itsum-h b{ display:block; font-size:.9rem; color:var(--tx); font-weight:600; }
.itsum-h u{ display:block; text-decoration:none; font-family:var(--fh); font-size:1.2rem;
  font-weight:800; color:var(--rc,#25AADD); margin-top:3px; }
.itsum-h p{ font-size:.82rem; color:var(--mu2); margin:7px 0 0; line-height:1.55; }
.itsum-c h5{ font-size:.86rem; font-weight:600; color:var(--tx); margin:0 0 12px; font-family:var(--fb); }
.itsum-list{ display:flex; flex-direction:column; gap:2px; }
.itsum-i{ display:flex; align-items:flex-start; gap:10px; padding:6px 0;
  font-size:.82rem; color:var(--mu2); line-height:1.5; }
.itsum-i > span:first-child{ flex:0 0 18px; display:inline-flex; }
.itsum-c svg{ flex:0 0 17px; width:17px; height:17px; margin-top:1px; }
.itcta{ display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; margin-top:22px; padding:16px 22px; border:none; border-radius:13px;
  background:linear-gradient(135deg,#0B408B,#1a5fbe); color:#fff; cursor:pointer;
  font-family:var(--fh); font-size:1rem; font-weight:700;
  box-shadow:0 12px 28px -14px var(--ac); transition:transform .2s, box-shadow .2s; }
.itcta:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px var(--ac); }
.itcta svg{ width:19px; height:19px; }
.itcta[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.itcta[disabled]:hover{ transform:none; }

/* ============================ светлая тема ============================== */
html[data-theme="light"] .itk,
html[data-theme="light"] .itflg,
html[data-theme="light"] .itplay,
html[data-theme="light"] .ittr-btn,
html[data-theme="light"] .itk-mid,
html[data-theme="light"] .itba-vs{ background:#fff; border-color:rgba(13,21,32,.10); }
html[data-theme="light"] .itopt,
html[data-theme="light"] .ittab,
html[data-theme="light"] .itspec,
html[data-theme="light"] .itm,
html[data-theme="light"] .itcall,
html[data-theme="light"] .itcp-l,
html[data-theme="light"] .itcp-r,
html[data-theme="light"] .itdo,
html[data-theme="light"] .itsum,
html[data-theme="light"] .itmsg-t,
html[data-theme="light"] .itask input,
html[data-theme="light"] .itsug button{ background:rgba(13,21,32,.03); border-color:rgba(13,21,32,.10); }
html[data-theme="light"] .itopt-dot,
html[data-theme="light"] .itdo-dot{ border-color:rgba(13,21,32,.25); }
html[data-theme="light"] .itk-hd,
html[data-theme="light"] .itag-hd{ background:linear-gradient(135deg, rgba(11,64,139,.07), rgba(37,170,221,.04)); }
html[data-theme="light"] .itcall-ic{ background:rgba(13,21,32,.05); }
html[data-theme="light"] .itsc-t b,
html[data-theme="light"] .itsum-h u,
html[data-theme="light"] .itm-v,
html[data-theme="light"] .itcall-tx u{ filter:brightness(.82); }

/* ============================== адаптив ================================= */
@media (max-width:1100px){
  .itcp{ grid-template-columns:1fr; }
  .itdim-h{ padding-right:0; }
  .itsum{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:960px){
  .itag{ grid-template-columns:1fr; }
  .itag-side{ border-right:none; border-bottom:1px solid var(--bd); padding:24px 20px; }
  .itag-av{ width:104px; height:104px; }
  .itag-av svg{ width:50px; height:50px; }
  .itag-fs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
}
@media (max-width:900px){
  .itk-bd{ padding:20px 18px; }
  .itk-hd{ padding:20px 18px; gap:14px; }
  .itk-hi{ flex:0 0 46px; width:46px; height:46px; border-radius:13px; }
  .itk-hi svg{ width:22px; height:22px; }
  .itk-ht h3{ font-size:1.08rem; }
  .itk-cols{ grid-template-columns:1fr; gap:26px; }
  .itk-cols::before{ display:none; }
  .itk-mid{ display:none; }
  .itcalls{ grid-template-columns:1fr; }
  .itmet{ grid-template-columns:1fr; }
  .itba{ grid-template-columns:1fr; gap:16px; }
  .itba-vs{ position:static; transform:none; margin:0 auto; }
  .itag-hd{ padding:20px 18px; }
  .itag-q, .itchat, .itsug, .itask{ padding-left:18px; padding-right:18px; }
  .itprog{ justify-content:flex-start; }
}
@media (max-width:700px){
  .itdim{ grid-template-columns:1fr; }
  .itdo{ min-height:0; }
  .itag-fs{ grid-template-columns:1fr; }
  .itmeta-k{ flex:0 0 92px; }
  .itsc{ gap:14px; }
  .itk-foot{ flex-direction:column; text-align:center; gap:10px; }
  .itres-h{ gap:9px; }
  .itcta{ font-size:.92rem; padding:14px 18px; }
  .ittabs{ gap:8px; }
  .ittab{ padding:9px 14px; font-size:.82rem; }
}
@media (max-width:480px){
  /* макет плеера: 48 полосок волны не помещались в узкую панель */
  .itplay{ gap:10px; padding:11px 12px; }
  .itwave{ gap:1px; }
  .itwave span:nth-child(n+29){ display:none; }
  .itopt{ padding:12px 13px; gap:11px; }
  .itopt-ic{ flex:0 0 34px; width:34px; height:34px; }
  .itopt-ic svg{ width:17px; height:17px; }
  .itcp-l, .itcp-r{ padding:16px 15px; }
  .itmsg-u, .itmsg-b{ max-width:100%; }
}

/* ============================================================================
   ПЕРЕБИВКА СТАРЫХ !important ИЗ <style> СТРАНИЦ (03.08).
   На всех офферных в собственном <style> остались правила по #callPanel/#callBtns
   с !important от прошлой версии тула — они закрашивали новые панели в bg3.
   Здесь специфичность выше (id + класс), поэтому побеждают именно эти строки.
   ========================================================================== */
html[data-theme="dark"] #callPanel > .itcp-l,
html[data-theme="dark"] #callPanel > .itcp-r,
html[data-theme="dark"] #callBtns > .itcall{ background:var(--sf) !important;
  border-color:var(--bd) !important; }
html[data-theme="dark"] #callBtns > .itcall.on{ background:rgba(37,170,221,.09) !important;
  border-color:rgba(37,170,221,.6) !important; }
html[data-theme="light"] #callPanel > .itcp-l,
html[data-theme="light"] #callPanel > .itcp-r,
html[data-theme="light"] #callBtns > .itcall{ background:rgba(13,21,32,.03) !important;
  border-color:rgba(13,21,32,.10) !important; }
html[data-theme="light"] #callBtns > .itcall.on{ background:rgba(37,170,221,.10) !important;
  border-color:rgba(37,170,221,.5) !important; }

/* ============================================================================
   НАВИГАЦИЯ ОФФЕРНЫХ НА УЗКИХ ЭКРАНАХ (03.08).
   На 376–480 px (iPhone 12–15, Pro Max) в правую часть шапки не помещались
   логотип + бургер + «All solutions» + тумблер темы + EN/RO/RU: переключатель
   языка уезжал за правый край и обрезался nav{overflow:hidden} — RO и RU были
   недоступны. Прячем подпись у кнопки «назад» (иконка-шеврон остаётся) и
   поджимаем отступы уже с 480 px, а не с 375 px.
   ========================================================================== */
@media (max-width:480px){
  nav{ padding:10px 10px; }
  .nr{ gap:5px; }
  .bk span{ display:none; }
  .bk{ padding:6px 8px; }
  .lb{ padding:3px 7px; font-size:.66rem; }
  .lsw{ gap:3px; }
  nav .nl img.nav-logo-img, nav .nlogo img, nav .nav-logo img, nav img[class*="logo"]{ height:26px !important; max-width:130px !important; width:auto !important; }
}
@media (max-width:400px){
  nav{ padding:10px 8px !important; }
  .nav-right{ gap:6px !important; }
  .nav-right .lang-btn{ padding:3px 5px !important; font-size:.63rem !important; }
  nav .nl img.nav-logo-img, nav .nlogo img, nav .nav-logo img, nav img[class*="logo"]{ height:22px !important; max-width:110px !important; width:auto !important; }
  .lb{ padding:3px 5px; font-size:.63rem; }
  .lsw{ gap:2px; }
}
@media (max-width:360px){
  nav .nl img.nav-logo-img, nav .nlogo img, nav .nav-logo img, nav img[class*="logo"]{ height:20px !important; max-width:96px !important; width:auto !important; }
  .bk{ padding:5px 6px; }
  .lb{ padding:3px 4px; font-size:.6rem; }
  .theme-toggle-wrap .theme-icon-dark, .theme-toggle-wrap .theme-icon-light{ display:none; }
}


/* ============================================================================
   ШИРИНА ИНТЕРАКТИВНЫХ ТУЛОВ (03.08). Контент офферных ограничен .ct 900px —
   в четыре колонки вариантов текст ужимался до 4–5 строк и рвался переносами.
   На десктопе тулы выходят из колонки до 1240/1400px, как это уже сделано
   для сканера рисков. Сайдбар 210px и поля учтены в calc.
   ========================================================================== */
@media (min-width:1101px){
  .itag{ grid-template-columns:minmax(0,320px) minmax(0,1fr); }
  .itspecs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* 1210px — минимум, при котором за вычетом сайдбара (210) и полей (96)
   остаётся больше базовых 900px; ниже расширять нечего, иначе тул вылезал
   за правый край экрана и наезжал на сайдбар */
@media (min-width:1210px){
  #configurator > .ct > .itk,
  #infra-configurator > .ct > .itk,
  #agent-demo > .ct > .itk,
  #doc-demo > .ct > .itk,
  #call-demo > .ct > .itk,
  #maturity-tool > .ct > .rv2{
    width:min(1240px, calc(100vw - 210px - 96px));
    margin-left:50%; transform:translateX(-50%);
  }
}
@media (min-width:1600px){
  .itdim{ grid-template-columns:minmax(0,262px) repeat(4,minmax(0,1fr)); gap:14px; }
}
@media (min-width:1500px){
  #configurator > .ct > .itk,
  #infra-configurator > .ct > .itk,
  #agent-demo > .ct > .itk,
  #doc-demo > .ct > .itk,
  #call-demo > .ct > .itk,
  #maturity-tool > .ct > .rv2{ width:min(1400px, calc(100vw - 210px - 120px)); }
}
/* заголовок измерения уходит в отдельную колонку только когда тул реально широкий:
   на 1101–1279 px он ужимал карточки до 130 px и слова рвались на 4 строки */
@media (min-width:701px){
  .itdim{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* заголовок измерения уходит в отдельную колонку и варианты встают в ряд
   только когда тул реально широкий: на 1101–1439 px это ужимало карточки
   до 130–150 px и слова рвались на 3–4 строки */
@media (min-width:1440px){
  .itdim{ grid-template-columns:minmax(0,222px) repeat(4,minmax(0,1fr)); gap:12px; }
  .itdim > .itdim-h{ grid-column:auto; }
}

/* ============================================================================
   ПРЕМИАЛЬНЫЙ СЛОЙ ТУЛОВ (03.08, сборка e). Общая огранка для всех семи
   инструментов: свечение под иконками, световая кромка карточек, мягкие тени
   в цвет акцента при наведении и выборе, появление результата, отрисовка
   колец и рост столбиков. Всё выключается при prefers-reduced-motion.
   ========================================================================== */

/* --- шапка тула: световое пятно и волосяная линия акцента --- */
.itk-hd, .itag-hd{ position:relative; overflow:hidden; }
.itk-hd::before, .itag-hd::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(120% 180% at 8% 0%,
    color-mix(in srgb, var(--ik,#25AADD) 22%, transparent), transparent 62%);
  opacity:.55; pointer-events:none; }
.itk-hd::after, .itag-hd::after{ content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:linear-gradient(90deg,
    color-mix(in srgb, var(--ik,#25AADD) 60%, transparent), transparent 65%); }
.itk-hd > *, .itag-hd > *{ position:relative; z-index:1; }

/* --- иконка тула: гало, градиент и внутренняя подсветка --- */
.itk-hi{ position:relative; isolation:isolate;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--ik,#25AADD) 26%, transparent),
    color-mix(in srgb, var(--ik,#25AADD) 7%, transparent));
  box-shadow:0 10px 26px -14px var(--ik,#25AADD),
             0 0 34px -6px color-mix(in srgb, var(--ik,#25AADD) 42%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent); }
/* гало сделано тенью, а не псевдоэлементом с отрицательным inset:
   тот раздувал scrollWidth блока и ложно срабатывал в аудите вёрстки */

/* --- карточки: световая кромка сверху --- */
.itopt, .itdo, .itcall, .itspec, .itm, .itcp-l, .itcp-r, .itsum, .itba-p{
  position:relative; }
.itopt::after, .itdo::after, .itcall::after, .itm::after{
  content:''; position:absolute; left:14px; right:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, #fff 14%, transparent), transparent);
  opacity:.6; pointer-events:none; }

/* --- наведение и выбор: мягкая тень в цвет --- */
.itopt:hover, .itcall:hover, .ittab:hover{
  box-shadow:0 12px 26px -18px color-mix(in srgb, var(--ik,#25AADD) 90%, transparent); }
.itdo:hover{ box-shadow:0 10px 22px -18px color-mix(in srgb, var(--ik,#25AADD) 90%, transparent); }
.itopt.on{ box-shadow:0 14px 30px -20px var(--ac),
  inset 0 0 0 1px color-mix(in srgb, var(--ac) 26%, transparent); }
.itdo.on{ box-shadow:0 14px 28px -20px var(--ik,#25AADD),
  inset 0 0 0 1px color-mix(in srgb, var(--ik,#25AADD) 24%, transparent); }
.itcall.on{ box-shadow:0 14px 30px -20px var(--ac); }
.itdo.on .itdo-ok{ box-shadow:0 4px 12px -4px var(--ik,#25AADD); }

/* точка выбора мягко разгорается */
.itopt-dot::after, .itdo-dot::after{ transform:scale(.4); opacity:0;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s; }
.itopt.on .itopt-dot::after, .itdo.on .itdo-dot::after{ transform:scale(1); opacity:1; }
.itdo-ok{ transform:scale(.5); opacity:0;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.itdo.on .itdo-ok{ display:flex; transform:scale(1); opacity:1; }

/* --- фокус с клавиатуры --- */
.itopt:focus-visible, .itdo:focus-visible, .itcall:focus-visible, .ittab:focus-visible,
.itcta:focus-visible, .ittr-btn:focus-visible, .itsug button:focus-visible,
.itplay-b:focus-visible, .itspeed:focus-visible{
  outline:2px solid var(--ac); outline-offset:2px; }

/* --- появление результата --- */
@keyframes itRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.itres, .itsum, #callPanel, .itk-foot{ animation:itRise .38s ease both; }
.itspec, .itm, .itsum-i{ animation:itRise .4s ease both; }
.itspecs .itspec:nth-child(2){ animation-delay:.05s; }
.itspecs .itspec:nth-child(3){ animation-delay:.1s; }
.itspecs .itspec:nth-child(4){ animation-delay:.15s; }
.itmet .itm:nth-child(2){ animation-delay:.06s; }
.itmet .itm:nth-child(3){ animation-delay:.12s; }
.itsum-i:nth-child(2){ animation-delay:.06s; }
.itsum-i:nth-child(3){ animation-delay:.12s; }

/* --- кольца: отрисовываются дугой --- */
.itring svg circle:last-child, .rsk-ring svg circle:last-child{
  transition:stroke-dashoffset .9s cubic-bezier(.22,.8,.28,1), stroke .35s; }
.itring-c b{ font-variant-numeric:tabular-nums; }

/* --- столбики метрик вырастают --- */
@keyframes itGrow{ from{ transform:scaleY(.06); } to{ transform:scaleY(1); } }
.itm-bars span{ transform-origin:bottom; animation:itGrow .55s cubic-bezier(.22,.8,.28,1) both; }

/* --- строки «до/после» проявляются каскадом --- */
@keyframes itSlide{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.itba-r{ animation:itSlide .34s ease both; }
.itba-r:nth-child(2){ animation-delay:.05s; }
.itba-r:nth-child(3){ animation-delay:.1s; }
.itba-r:nth-child(4){ animation-delay:.15s; }
.itba-r:nth-child(5){ animation-delay:.2s; }
.itba-p.good{ box-shadow:0 18px 40px -30px var(--ac); }
.itba-vs{ box-shadow:0 0 0 6px var(--bg2), 0 10px 24px -14px rgba(0,0,0,.6); }

/* --- чат агента: сообщения въезжают --- */
.itmsg-u, .itmsg-b{ animation:itRise .3s ease both; }
.itag-av{ position:relative; }
.itag-av::before{ content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(37,170,221,.30) 30%, transparent 72%);
  animation:itPulse 3.4s ease-in-out infinite; }
@keyframes itPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.itmsg-u div{ box-shadow:0 10px 24px -16px #1a5fbe; }

/* оценка ответа — как в макете */
.itrate{ display:flex; gap:6px; align-items:center; margin-top:9px; }
.itrate button{ border:none; background:none; padding:3px; cursor:pointer; color:var(--mu2);
  display:inline-flex; border-radius:7px; transition:color .2s, background .2s, transform .2s; }
.itrate button svg{ width:16px; height:16px; }
.itrate button:hover{ color:var(--ac); background:rgba(37,170,221,.12); transform:translateY(-1px); }
.itrate button.on{ color:var(--ac); }
.itrate button.down.on{ color:#f59e0b; }

/* --- плеер: скорость и скачивание, как в макете --- */
.itspeed{ display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:8px;
  border:1px solid var(--bd); background:var(--sf); color:var(--tx); font-size:.74rem;
  font-family:var(--fb); cursor:pointer; white-space:nowrap; transition:border-color .2s; }
.itspeed:hover{ border-color:rgba(37,170,221,.45); }
.itspeed svg{ width:11px; height:11px; }
.itdl{ display:inline-flex; color:var(--mu2); background:none; border:none; cursor:pointer;
  padding:4px; border-radius:7px; transition:color .2s, background .2s; }
.itdl:hover{ color:var(--ac); background:rgba(37,170,221,.12); }
.itdl svg{ width:16px; height:16px; }
.itwave span{ transition:opacity .25s, background .25s; }
.itwave.playing span{ animation:itWave 1.1s ease-in-out infinite; }
@keyframes itWave{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.itwave.playing span:nth-child(3n){ animation-delay:.15s; }
.itwave.playing span:nth-child(3n+1){ animation-delay:.3s; }
.ittr-t a, .ittr-mail{ color:var(--ac); text-decoration:none; }

/* --- кнопка-действие --- */
.itcta{ position:relative; overflow:hidden; }
.itcta::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg); transition:left .55s ease; }
.itcta:hover::after{ left:120%; }

/* --- таблетки: активная слегка приподнята --- */
.ittab.on{ box-shadow:0 10px 22px -16px var(--ac); }

/* --- сканер рисков (тул 07) в той же огранке --- */
.rsk-form, .rsk-res{ position:relative; }
.rsk-tool:hover{ box-shadow:0 12px 26px -18px var(--ac); }
.rsk-tool.on{ box-shadow:0 14px 30px -20px var(--ac); }
.rsk-r:hover{ box-shadow:0 10px 22px -18px var(--ac); }
.rsk-ring{ filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.rsk-card, .rsk-pi, .rsk-f{ animation:itRise .38s ease both; }
.rsk-prio .rsk-pi:nth-child(2){ animation-delay:.06s; }
.rsk-prio .rsk-pi:nth-child(3){ animation-delay:.12s; }

/* --- светлая тема: кромка и свечение мягче --- */
html[data-theme="light"] .itopt::after,
html[data-theme="light"] .itdo::after,
html[data-theme="light"] .itcall::after,
html[data-theme="light"] .itm::after{ background:linear-gradient(90deg, transparent,
  rgba(13,21,32,.08), transparent); }
html[data-theme="light"] .itk-hd::before,
html[data-theme="light"] .itag-hd::before{ opacity:.35; }
html[data-theme="light"] .itba-vs{ box-shadow:0 0 0 6px #fff, 0 8px 20px -14px rgba(13,21,32,.3); }

@media (prefers-reduced-motion: reduce){
  .itres, .itsum, #callPanel, .itk-foot, .itspec, .itm, .itsum-i, .itba-r,
  .itmsg-u, .itmsg-b, .itm-bars span, .rsk-card, .rsk-pi, .rsk-f{ animation:none !important; }
  .itag-av::before, .itwave.playing span{ animation:none !important; }
  .itring svg circle:last-child, .rsk-ring svg circle:last-child{ transition:none !important; }
  .itcta::after{ display:none; }
}