/* EGA CRM - overrides poверх system.css + inline component styles
   Поправки шрифтовой шкалы и stats-секции (зелёный фон).
*/

/* ─── Убираем горизонтальный скролл (hero-треугольники свисают за край) ─── */
html, body { overflow-x: clip; }

/* ─── Stats (numbers + labels) ──────────────────────────────────── */
.stats {
  background: #073B36;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: 80px 0;
}
.stats .stat-n {
  font-size: 52px !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.stats .stat-l {
  font-size: 12px !important;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 20px !important;
}
.stats .stat-d {
  color: #fff !important;
  font-size: 14px !important;
  white-space: pre-line;
}
.stats .stat:not(:first-child) {
  border-left: 1px solid rgba(255,255,255,0.16) !important;
}
@media (max-width: 900px) {
  .stats .stat-n { font-size: 44px !important; }
}
@media (max-width: 720px) {
  .stats .stat-n { font-size: 40px !important; }
  .stats .stat:not(:first-child) {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.16) !important;
  }
}

/* ─── Clusters headline (revenue/costs slogan) ──────────────────── */
.clusters-headline {
  font-size: 56px !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  color: rgba(255,255,255,0.72) !important;
  text-shadow: 0 1px 10px rgba(15,15,18,0.32), 0 1px 2px rgba(15,15,18,0.20) !important;
}
@media (max-width: 1100px) {
  .clusters-headline { font-size: 44px !important; }
}
@media (max-width: 720px) {
  .clusters-headline { font-size: 30px !important; }
}

/* ─── Промежуточный тайпсет для подзаголовков (h2 → h3 разрыв) ──── */
.h-mid {
  font-size: 28px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.018em !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  max-width: 720px !important;
}

/* ─── Trust strip (под stats) - корректный отступ от тёмной секции ─ */
.trust { background: var(--bg); }

/* ─── Подъём clusters: видим часть скриншота на первом экране ────── */
.heroV2 { padding: 96px 0 40px !important; }
.clusters { padding: 28px 0 80px !important; }

/* (scroll-nav: возвращён оригинальный кремовый+blur, появляется только после первого экрана) */

/* ─── Footer (ctaftr) - тёмно-зелёный как треугольники hero ─── */
.ctaftr-top { background: var(--accent-2) !important; position: relative; overflow: visible; }
.ctaftr-bot { background: #073B36 !important; }

/* ─── Временно: прячем только колонки-ссылки футера, EGA-лого оставляем ─── */
.ctaftr-bot .ftr-col { display: none !important; }
.ctaftr-bot .ftr-grid { grid-template-columns: 1fr !important; }

/* ─── Footer CTA headline в стиле других секций: кикер + mint-акцент ─── */
.ctaftr-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
}
.ctaftr-top-inner h2 {
  font-size: 48px !important;
  letter-spacing: -0.03em !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  max-width: 860px !important;
}
.ctaftr-h2-accent { color: #6FE0C5; }
@media (max-width: 720px) {
  .ctaftr-top-inner h2 { font-size: 32px !important; }
}

/* ─── Клин в cases: тёмно-зелёный (цвет футера), диагональю, за карточками ─── */
.cases { position: relative; overflow: hidden; border-top: 0 !important; border-bottom: 0 !important; }
.cases::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  /* width:height = 480:1872 = 0.2564 → тот же наклон, что hero-треугольники */
  width: 480px;
  height: 1872px;
  background: #073B36;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}
.cases > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .cases::before { width: 280px; height: 1092px; }
}

/* ─── 4 отзыва: сетка 2x2 ─── */
.cases-grid4 {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cs4 {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.cs4-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.cs4-quote { font-size: 16px; line-height: 1.5; color: var(--ink); margin: 0 0 22px; flex: 1; letter-spacing: -0.005em; }
.cs4-quote::before { content: '\201C'; color: var(--accent); margin-right: 1px; }
.cs4-attrib { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cs4-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.cs4-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.cs4-role { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 760px) { .cases-grid4 { grid-template-columns: 1fr; } }

/* ─── Industries: фоновые полоски под углом hero-триангла (~104°) ─── */
.industries {
  position: relative;
  background:
    repeating-linear-gradient(
      104deg,
      transparent 0,
      transparent 78px,
      rgba(11,95,86,0.05) 78px,
      rgba(11,95,86,0.05) 79px
    );
}
.industries > .container { position: relative; z-index: 2; }
.ind-card {
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s ease, border-color .25s ease !important;
}
.ind-grid > .ind-card:hover {
  transform: translateY(-4px) !important;
  z-index: 5;
}

/* ─── Overscroll: чтобы при скролле выше hero не было белой полосы ─ */
html { background: var(--accent-2); }
body { background: var(--bg); }


/* ─── Срез dashboard: контейнер под точные пропорции картинки ─────── */
.clusters-bg {
  aspect-ratio: 3022 / 1630 !important;
}
.clusters-bg-img {
  object-fit: contain !important;
  background: var(--bg-sunken);
}

/* ─── Trigger для попапа demo: курсор на скриншоте ─────────────── */
.clusters-bg { cursor: pointer !important; }

/* ─── Demo modal (vanilla, по аналогии с Pricing offer) ─────────── */
.dm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,12,10,0.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 24px;
  animation: dmOver .2s ease;
}
@keyframes dmOver { from { opacity: 0 } to { opacity: 1 } }
.dm-modal {
  position: relative; width: 100%; max-width: 720px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(150deg, #0E7F73 0%, #0A5F57 100%);
  color: #fff; border-radius: 20px; padding: 36px 44px;
  animation: dmPop .25s ease;
  font-family: var(--font-sans);
}
.dm-trust { margin-bottom: 18px !important; }
.dm-title { margin-bottom: 18px !important; }
@keyframes dmPop { from { transform: translateY(20px) scale(0.98); opacity: 0 } to { transform: translateY(0) scale(1); opacity: 1 } }
.dm-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.16); color: #fff;
  border: 0; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .15s ease;
}
.dm-close:hover { background: rgba(255,255,255,0.28); }
.dm-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); font-weight: 500;
}
.dm-title {
  font-size: 30px; line-height: 1.15; font-weight: 600;
  letter-spacing: -0.02em; color: #fff; margin: 12px 0 14px;
}
.dm-lede {
  font-size: 14.5px; color: rgba(255,255,255,0.78);
  line-height: 1.55; margin: 0 0 22px; max-width: 48ch;
}
.dm-trust { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.85); }
.dm-trust li { display: flex; gap: 10px; align-items: center; }
.dm-tick { color: #6FE0C5; font-weight: 600; }
.dm-form { display: flex; flex-direction: column; gap: 12px; }
.dm-field { display: flex; flex-direction: column; gap: 6px; }
.dm-field label { font-size: 12px; color: rgba(255,255,255,0.78); font-weight: 500; }
.dm-field input, .dm-field textarea, .dm-field select {
  padding: 11px 14px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-md);
  color: #fff; font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .15s ease, background .15s ease;
  appearance: none; -webkit-appearance: none;
}
.dm-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 8 8' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1 2.5L4 5.5L7 2.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.dm-field select option { background: #0A5F57; color: #fff; }
.dm-field input::placeholder, .dm-field textarea::placeholder { color: rgba(255,255,255,0.4); }
.dm-field input:focus, .dm-field textarea:focus { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); }
.dm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 4px; }
.dm-consent input { margin-top: 3px; }
.dm-submit {
  margin-top: 6px; padding: 13px 18px;
  background: #fff; color: var(--accent-2);
  border: 0; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: transform .15s ease, background .2s ease;
}
.dm-submit:hover { transform: translateY(-1px); background: #f4f3ef; }
.dm-done { text-align: center; padding: 24px 8px; }
.dm-done-mark {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(111, 224, 197, 0.2); color: #6FE0C5;
  margin: 0 auto 20px; display: grid; place-items: center;
}
@media (max-width: 720px) {
  .dm-modal { padding: 32px 24px; }
  .dm-title { font-size: 24px; }
  .dm-row { grid-template-columns: 1fr; }
}

/* ─── Language switcher dropdown (i18n.js) ─── */
.lang-switch { position: relative; display: inline-flex; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 6px 6px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em; font-weight: 500;
  color: var(--ink-2); cursor: pointer; line-height: 1;
  transition: color .15s ease;
}
.lang-switch-btn:hover { color: var(--ink); }
.lang-switch-btn svg { transition: transform .15s ease; }
.lang-switch.is-open .lang-switch-btn { color: var(--ink); }
.lang-switch.is-open .lang-switch-btn svg { transform: rotate(180deg); }
.lang-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 168px; padding: 4px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  display: none; z-index: 60;
}
.lang-switch.is-open .lang-switch-menu { display: block; }
.lang-switch-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px;
  font-size: 13px; color: var(--ink-2);
}
.lang-switch-opt:hover { background: var(--bg-sunken); color: var(--ink); }
.lang-switch-opt.is-active { color: var(--ink); }
.lang-switch-opt.is-active .lang-switch-code { color: var(--accent); }
.lang-switch-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); min-width: 22px; }
.lang-switch-name { font-weight: 450; }

/* ─── Clusters: скриншот раскрывается ТОЛЬКО при наведении на фон-дашборд,
   при наведении на карточки они остаются (не исчезают). Через :has(). ─── */
.clusters-stage:hover .clusters-bg-img { filter: blur(14px) !important; }
.clusters-stage:hover .cluster-card { opacity: 1 !important; pointer-events: auto !important; }
.clusters-stage:hover .clusters-headline { opacity: 1 !important; }
.clusters-stage:hover .clusters-bg-tint,
.clusters-stage:hover .clusters-bg-hint { opacity: 1 !important; }
.clusters-stage:has(.clusters-bg:hover) .clusters-bg-img { filter: blur(0) !important; }
.clusters-stage:has(.clusters-bg:hover) .cluster-card { opacity: 0 !important; pointer-events: none !important; }
.clusters-stage:has(.clusters-bg:hover) .clusters-headline { opacity: 0 !important; }
.clusters-stage:has(.clusters-bg:hover) .clusters-bg-tint,
.clusters-stage:has(.clusters-bg:hover) .clusters-bg-hint { opacity: 0 !important; }


/* ─── CSS-карусель отзывов (без JS, на radio; показ слайда через display) ─── */
.csx { position: relative; }
.csx > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.csx-slide { display: none; margin-top: 32px; }
#csx1:checked ~ .csx-viewport .csx-slide:nth-child(1),
#csx2:checked ~ .csx-viewport .csx-slide:nth-child(2),
#csx3:checked ~ .csx-viewport .csx-slide:nth-child(3),
#csx4:checked ~ .csx-viewport .csx-slide:nth-child(4) { display: block; animation: csxFade .35s ease; }
@keyframes csxFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.csx-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; }
.csx-dots label { width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.csx-dots label:hover { background: var(--accent-line); }
#csx1:checked ~ .csx-dots label:nth-child(1),
#csx2:checked ~ .csx-dots label:nth-child(2),
#csx3:checked ~ .csx-dots label:nth-child(3),
#csx4:checked ~ .csx-dots label:nth-child(4),
.csx-dots label.is-active { background: var(--accent); transform: scale(1.3); }

/* ─── Hero правый треугольник: удлинён (тот же наклон 0.2564) ─── */
.heroV2-tri-br { width: 480px !important; height: 1872px !important; }
@media (max-width: 820px){ .heroV2-tri-br { width: 240px !important; height: 936px !important; } }

/* ─── Фоновый зелёный клин в clusters: уходит вниз за дашбордом и стыкуется
   со Stats-блоком (низ = низ clusters = верх Stats). Тот же наклон 0.2564. ─── */
.clusters { position: relative; }
.clusters > * { position: relative; z-index: 1; }
.clusters::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 520px;
  height: 2028px;
  background: var(--accent-2);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 820px){ .clusters::after { width: 280px; height: 1092px; } }

/* ═══════════════════════════════════════════════════════════════════
   PRICING PAGE: визуальный апгрейд ближе к главной (классы .ph-* только тут)
   ═══════════════════════════════════════════════════════════════════ */

/* Hero: два тёмно-зелёных треугольника, угол как на главной (W/H = 480/1872 = 0.2564).
   Правый продлён вниз и виден за блоком принципов (overflow visible + прозрачные принципы). */
.ph-hero { position: relative; overflow: visible; }
.ph-hero > .container, .ph-hero-inner { position: relative; z-index: 2; }
.ph-hero::before, .ph-hero::after {
  content: "";
  position: absolute;
  top: 0;
  background: var(--accent-2);
  z-index: 0;
  pointer-events: none;
}
/* диагональные полосы по краям (как на главной), не перекрывают текст.
   обе наклон 0.2564, правая продлена вниз за принципы. */
.ph-hero::before {
  left: 0;
  width: 150px; height: 585px;         /* 150/585 = 0.2564 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ph-hero::after {
  right: 0;
  /* угол 0.2564; высота/ширина выставляются из JS под позицию калькулятора,
     чтобы клин одинаково дотягивался во всех языках (fallback 300/1170) */
  width: var(--ph-wedge-w, 300px); height: var(--ph-wedge-h, 1170px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
@media (max-width: 900px){
  .ph-hero::before { width: 90px; height: 351px; }
  .ph-hero::after  { width: 150px; height: 585px; }
}

/* Принципы: связаны с шапкой - без отдельного фона/линий, треугольник из hero виден за ними */
.ph-prin { position: relative; background: transparent !important; border-top: 0 !important; border-bottom: 0 !important; }
.ph-prin > .container { position: relative; z-index: 2; }

/* Эстиматор: утопленный фон, чтобы блок-калькулятор читался как отдельная зона */
.ph-est {
  background: var(--bg-sunken);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
/* контент калькулятора над диагональным клином hero, чтобы клин был
   ЗА плашками (виден в промежутках), а не поверх карточек */
.ph-est > .container { position: relative; z-index: 1; }

/* Принципы-карточки: лёгкий hover-подъём акцента сверху */
.ph-prin-card { position: relative; transition: background .2s ease; }
.ph-prin-card:hover { background: var(--bg-sunken); }

/* ═══════════════════════════════════════════════════════════════════
   MODULES PAGE: фоны/ритм ближе к главной (классы .m-* только тут)
   ═══════════════════════════════════════════════════════════════════ */

/* Core ("included in base platform"): чистый ровный фон (без обрывающихся полос) */
.m-core { position: relative; background: var(--bg); }

/* Add-on секции: чередование белый / утопленный серый (зиг-заг с лево/право) */
.m-addon-right { background: var(--bg-sunken); }
.m-addon-left  { background: var(--bg); }
.m-addon { border-top: 1px solid var(--line-soft); }

/* Bundles ("most teams use one of these"): мягкий зелёный акцентный фон + клин */
.m-bundles {
  position: relative;
  overflow: hidden;
  background: var(--accent-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.m-bundles > .container { position: relative; z-index: 2; }
.m-bundles::after {
  content: "";
  position: absolute;
  right: 0; bottom: -1px;
  width: 26%; height: 150%;
  background: var(--accent-2);
  opacity: 0.06;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 0; pointer-events: none;
}

/* How-it-works: лёгкий утопленный фон для отбивки перед футером */
.m-how { background: var(--bg-sunken); border-top: 1px solid var(--line-soft); }

/* Hero: тонкий диагональный акцент слева за орбитой (как на главной) */
.m-hero { position: relative; }
.m-hero::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 90px; height: 60%;
  background: var(--accent);
  opacity: 0.08;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0; pointer-events: none;
}
.m-hero > .container { position: relative; z-index: 1; }
@media (max-width: 820px){ .m-hero::before { display: none; } }

/* Modules: резервируем место под скриншоты (без скачка вёрстки, чтобы якоря попадали точно) */
.m-shot img { aspect-ratio: 3412 / 1844; }

/* ═══════════════════════════════════════════════════════════════════
   MODULES: макеты модулей в стиле реального дашборда продукта (.mok-*)
   ═══════════════════════════════════════════════════════════════════ */
.mok { background:#F3F5F8; border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:0 24px 48px -22px rgba(15,23,42,0.22), 0 8px 18px -10px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.05);
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
  font-family:var(--font-sans); color:var(--ink); }
.mok-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; }
.mok-title { display:flex; align-items:center; gap:8px; font-weight:600; font-size:12.5px; letter-spacing:-0.01em; }
.mok-ico { width:24px; height:24px; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.mok-ico svg { width:14px; height:14px; }
.mok-btn { font-size:10px; font-weight:600; color:#fff; background:var(--accent); padding:5px 11px; border-radius:8px; white-space:nowrap; }
.mok-btn.ghost { background:#fff; color:var(--ink-2); border:1px solid var(--line); }
.mok-body { display:flex; flex-direction:column; gap:8px; min-height:0; }
.mok-card { background:#fff; border:1px solid var(--line-soft); border-radius:11px; padding:11px 12px; }
.mok-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mok-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.mok-label { font-size:8.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted-2); font-family:var(--font-mono); }
.mok-num { font-size:21px; font-weight:700; letter-spacing:-0.025em; line-height:1.05; margin-top:4px; }
.mok-num.sm { font-size:16px; }
.mok-sub { font-size:9.5px; color:var(--accent); margin-top:4px; display:flex; align-items:center; gap:3px; }
.mok-sub.mut { color:var(--muted); }
.mok-row { display:flex; align-items:center; gap:9px; }
.mok-row + .mok-row { margin-top:7px; padding-top:7px; border-top:1px solid var(--line-soft); }
.mok-av { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; display:grid; place-items:center; font-size:9.5px; font-weight:600; flex-shrink:0; }
.mok-av.gray { background:var(--bg-sunken); color:var(--muted); }
.mok-txt { flex:1; min-width:0; }
.mok-t1 { font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mok-t2 { font-size:9.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mok-pill { font-size:9px; font-weight:600; padding:3px 8px; border-radius:100px; background:var(--bg-sunken); color:var(--muted); white-space:nowrap; }
.mok-pill.g { background:var(--accent-soft); color:var(--accent); }
.mok-pill.o { background:#FCEEE3; color:#D9772E; }
.mok-pill.b { background:#E8EFFC; color:#3B6FD1; }
.mok-chk { width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line); flex-shrink:0; display:grid; place-items:center; }
.mok-chk.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.mok-chk svg { width:10px; height:10px; }
.mok-track { height:7px; border-radius:4px; background:var(--bg-sunken); flex:1; overflow:hidden; }
.mok-fill { height:100%; border-radius:4px; background:var(--accent); }
.mok-fill.o { background:#E08A3C; } .mok-fill.b { background:#3B6FD1; } .mok-fill.gr { background:#9AA3AE; }
.mok-tabs { display:flex; gap:5px; flex-wrap:wrap; }
.mok-tab { font-size:9.5px; font-weight:500; padding:4px 9px; border-radius:7px; background:#fff; border:1px solid var(--line-soft); color:var(--muted); }
.mok-tab.on { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.mok-spark { display:flex; align-items:flex-end; gap:3px; height:38px; }
.mok-spark > i { flex:1; border-radius:2px 2px 0 0; background:var(--bg-sunken); }
.mok-spark > i.on { background:var(--accent); }
.mok-flow { display:flex; align-items:center; gap:8px; }
.mok-seqp { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.mok-arrow { color:var(--muted-2); font-size:11px; }
.mok-donut { width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--accent) 0 62%, #3B6FD1 62% 80%, var(--line) 80% 100%);
  -webkit-mask:radial-gradient(circle 19px at center, transparent 98%, #000 100%);
  mask:radial-gradient(circle 19px at center, transparent 98%, #000 100%); }
.mok-legend { display:flex; flex-direction:column; gap:5px; }
.mok-leg { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--ink-2); }
.mok-dot { width:7px; height:7px; border-radius:2px; flex-shrink:0; }
.mok-sync { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.mok-syncico { width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
@media (max-width:540px){ .mok { aspect-ratio:auto; } }

/* ═══════════════════════════════════════════════════════════════════
   МОБИЛКА: точечные правки только для узких экранов
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Главная hero: убрать правый треугольник на первом экране */
  .heroV2-tri-br { display: none !important; }

  /* Clusters: скрыть заголовок "One tool to grow sales and cut costs" */
  .clusters-headline { display: none !important; }

  /* Полностью статичный clusters на мобилке: дашборд всегда резкий, карточки всегда видны,
     никаких размытий/исчезновений по наведению (тач-hover на телефоне неудобен). */
  .clusters-bg-img,
  .clusters-stage:hover .clusters-bg-img,
  .clusters-bg:hover .clusters-bg-img,
  .clusters-stage:has(.clusters-bg:hover) .clusters-bg-img { filter: blur(0) !important; }

  .cluster-card,
  .clusters-stage:hover .cluster-card,
  .clusters-bg:hover ~ .cluster-card,
  .clusters-stage:has(.clusters-bg:hover) .cluster-card { opacity: 1 !important; pointer-events: auto !important; }

  .clusters-bg-tint,
  .clusters-stage:hover .clusters-bg-tint,
  .clusters-bg:hover .clusters-bg-tint { opacity: 0 !important; }

  .clusters-bg-hint,
  .clusters-stage:hover .clusters-bg-hint { display: none !important; }

  .clusters-bg { cursor: default !important; }

  /* Pricing hero: убрать левый треугольник на первом экране */
  .ph-hero::before { display: none !important; }
}

/* ─── Языковой переключатель (.lang-dd2) - общий для всех страниц ─── */
.lang-dd2 { position: relative; }
.lang-dd2 summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 14px; font-weight: 450; line-height: 1; color: var(--ink-2); }
.lang-dd2 summary::-webkit-details-marker { display: none; }
.lang-dd2 summary:hover { color: var(--ink); }
.lang-dd2[open] summary svg { transform: rotate(180deg); }
.lang-dd2 summary svg { transition: transform .15s ease; }
.lang-dd2-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; padding: 4px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); z-index: 60; }
.lang-dd2-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-2); }
.lang-dd2-menu a:hover { background: var(--bg-sunken); color: var(--ink); }
.lang-dd2-menu a.is-active { color: var(--ink); }
.lang-dd2-menu a.is-active .lc { color: var(--accent); }
.lang-dd2-menu .lc { font-family: var(--font-mono); font-size: 11px; color: var(--muted); min-width: 22px; }

/* ─── Языковой переключатель в футере (одна линия-разделитель сверху от grid) ─── */
.ftr-lang { display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; margin-top:18px; }
.ftr-lang-label { font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.45); font-family:var(--font-mono); margin-right:2px; }
.ftr-lang a { font-size:12.5px; color:rgba(255,255,255,0.72); }
.ftr-lang a:hover { color:#fff; }
.ftr-lang a.is-active { color:#6FE0C5; font-weight:500; }

/* ─── Выпадающий переключатель языка (футер + мобильное меню) ─── */
.lang-dd3 { position:relative; }
.lang-dd3 summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:13px; font-weight:450; line-height:1; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-md); white-space:nowrap; }
.lang-dd3 summary::-webkit-details-marker { display:none; }
.lang-dd3 .lang-globe { opacity:.75; flex:none; }
.lang-dd3 .lang-caret { opacity:.7; flex:none; transition:transform .15s ease; }
.lang-dd3[open] .lang-caret { transform:rotate(180deg); }
.lang-dd3-menu { position:absolute; left:0; min-width:184px; padding:4px; background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-2); z-index:90; }
.lang-dd3:not(.lang-dd3--up) .lang-dd3-menu { top:calc(100% + 6px); }
.lang-dd3--up .lang-dd3-menu { bottom:calc(100% + 6px); }
.lang-dd3-menu a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; font-size:13px; color:var(--ink-2); }
.lang-dd3-menu a:hover { background:var(--bg-sunken); color:var(--ink); }
.lang-dd3-menu a.is-active { color:var(--ink); }
.lang-dd3-menu a.is-active .lc { color:var(--accent); }
.lang-dd3-menu .lc { font-family:var(--font-mono); font-size:11px; color:var(--muted); min-width:22px; }
/* вариант для тёмного футера */
.lang-dd3--ftr summary { color:rgba(255,255,255,0.82); border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); }
.lang-dd3--ftr summary:hover { color:#fff; border-color:rgba(255,255,255,0.32); }
/* вариант для мобильного меню */
.lang-dd3--menu summary { color:var(--ink-2); border-color:var(--line); }
.lang-dd3--menu summary:hover { color:var(--ink); }

/* ═══ Единая мобильная шапка на всех страницах: Book a demo + бургер ═══ */
.nav-m-actions { display:none; }
.nav-m-menu { display:none; }
.nav-mobile-lang { display:flex; flex-wrap:wrap; gap:12px 18px; padding:10px 0 4px; }
.nav-mobile-lang a { padding:0 !important; font-size:14px !important; color:var(--ink-2); }
.nav-mobile-lang a:hover { color:var(--ink); }
.nav-mobile-lang a.is-active { color:var(--accent) !important; font-weight:500; }
.nav-mobile-divider { height:1px; background:var(--line-soft); margin:8px 0; }

@media (max-width: 820px) {
  /* прячем десктоп-навигацию и старые бургеры/меню */
  .nav-inner .nav-links, .nav-inner .nav-cta, .nav-inner .nav-burger, .nav-mobile { display:none !important; }
  /* единые действия в шапке: Book a demo + бургер */
  .nav-m-actions { display:flex !important; align-items:center; gap:10px; margin-left:auto; }
  .nav-m-demo { padding:9px 14px !important; font-size:13px !important; }
  .nav-m-burger { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:40px; height:40px; border:1px solid var(--line); background:var(--bg-raise); border-radius:8px; cursor:pointer; flex-shrink:0; padding:0; }
  .nav-m-burger span { width:16px; height:1.6px; background:var(--ink); display:block; border-radius:2px; }
  /* выпадающее меню */
  .nav-m-menu { flex-direction:column; gap:2px; padding:10px 24px 20px; background:var(--bg); border-top:1px solid var(--line-soft); }
  .nav-m-menu > a { padding:12px 0; font-size:16px; color:var(--ink); }
  .nav-m-menu > a:hover { color:var(--accent); }
  /* index: scroll-nav как липкая шапка */
  .scroll-nav { transform:translateY(0) !important; opacity:1 !important; pointer-events:auto !important;
    background:rgba(246,247,245,0.92); -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px);
    border-bottom:1px solid var(--line-soft); }
  body:has(.scroll-nav) { padding-top:58px; }
  .heroV2-logo-wrap { display:none !important; }
  .heroV2 { padding-top:24px !important; }
}