/* =====================================================================
   Killbot Group — Концепт 2 «Console» (центр мониторинга / live-щит).
   Светлая тема, синий, bento-сетка, живые данные. Без сеточных фонов.
   Шрифты: Sora (дисплей), IBM Plex Mono (данные), Inter (тело).
   ===================================================================== */

:root {
  --bg: #eef3fb;
  --surface: #ffffff;
  --surface-2: #f5f8fe;
  --tile: #eaf1ff;
  --tile-2: #eaf4ff;
  --border: #e1e9f6;
  --border-2: #d3deef;

  --text: #0f1b33;
  --text-2: #45567a;
  --text-3: #8497b6;

  --primary: #2563eb;
  --primary-2: #4f8cff;
  --primary-dark: #1b46b8;
  --primary-soft: #e8f0ff;

  --ok: #16a34a;
  --ok-soft: #e6f7ee;
  --warn: #d97706;
  --warn-soft: #fdf2e2;
  --bad: #dc2626;
  --bad-soft: #fdebeb;

  --grad: linear-gradient(135deg, #2563eb 0%, #4f8cff 55%, #6aa6ff 100%);
  --grad-soft: linear-gradient(135deg, #eef4ff 0%, #e7f0ff 100%);

  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-card: 0 1px 2px rgba(15,27,51,.04);
  --shadow-pop: 0 10px 30px rgba(15,27,51,.10), 0 2px 8px rgba(15,27,51,.06);
  --shadow-modal: 0 24px 70px rgba(15,27,51,.28);

  --ease: cubic-bezier(.4,0,.2,1);
  --t: .26s var(--ease);
  --t-fast: .16s var(--ease);

  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', var(--font);
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1200px;
  --header-h: 70px;
}

/* ----------------------------- reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.14; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { vertical-align: middle; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(37,99,235,.16); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 28px; height: 28px; stroke-width: 1.6; }

/* ----------------------------- buttons --------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-soft { background: var(--primary-soft); color: var(--primary-dark); }
.btn-soft:hover { background: #dbe7ff; }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-2); }
.btn-ghost:hover { color: var(--primary); border-color: var(--primary-2); }
.btn-link { background: none; color: var(--text-2); padding: 12px 6px; }
.btn-link:hover { color: var(--primary); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.canvas-submit:focus-visible {
  outline: 2px solid var(--primary-2); outline-offset: 2px;
}

/* ----------------------------- header ---------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* проскроллено в пределах hero — мягкое тёмное стекло, чтобы текст читался поверх космоса */
.site-header.is-scrolled:not(.is-blue) {
  background: rgba(9,18,42,.5);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: rgba(150,180,255,.12);
}
/* за пределами hero — фирменная синяя тема */
.site-header.is-blue {
  background: linear-gradient(100deg, #10245c 0%, #1b46b8 52%, #2c62d8 100%);
  box-shadow: 0 8px 28px rgba(10,24,66,.34);
  backdrop-filter: saturate(160%) blur(12px);
}
.site-header.is-blue .scroll-progress { background: rgba(255,255,255,.85); }
/* светлый текст шапки в обеих тёмных темах */
.site-header .bn-main { color: #fff; }
.site-header .bn-sub { color: #9ec3ff; }
/* шапка — во всю ширину: бренд по левому краю, язык/ЛК по правому */
.site-header .wrap { max-width: none; padding-left: clamp(20px, 2.6vw, 52px); padding-right: clamp(20px, 2.6vw, 52px); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 22px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.brand-logo { width: auto; height: 38px; flex: 0 0 auto; display: block; transition: transform var(--t-fast); }
.brand:hover .brand-logo { transform: translateX(1px); }
.brand-name { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1; }
.bn-main { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.bn-sub { font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--primary); margin-top: 3px; }

.main-nav { display: flex; gap: 4px; margin-left: 8px; }
.main-nav > a { padding: 8px 12px; border-radius: 8px; font-size: 14.5px; color: rgba(234,241,255,.72); font-weight: 500; white-space: nowrap; transition: color var(--t-fast), background var(--t-fast); }
.main-nav > a:hover { color: #fff; background: rgba(255,255,255,.1); }
.main-nav > a.is-active { color: #fff; }
.nav-cta { display: none; } /* видим только в мобильном меню */
@keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.lang-switch { display: inline-flex; padding: 3px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; }
.lang-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 6px; font-size: 13px; font-weight: 600; color: rgba(234,241,255,.7); transition: color var(--t-fast), background var(--t-fast); }
.lang-opt.is-active { background: rgba(255,255,255,.95); color: var(--primary-dark); }
.flag { width: 18px; height: 12px; border-radius: 2px; overflow: hidden; flex: 0 0 auto; }
.header-cta { display: none; }

.header-actions .btn-ghost { color: rgba(234,241,255,.85); border-color: rgba(255,255,255,.22); }
.header-actions .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.burger { display: none; width: 42px; height: 42px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); color: #fff; }

.scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--grad); transition: width .08s linear; }

/* ----------------------------- sections -------------------------- */
/* единый ритм: у всех секций одинаковые симметричные отступы от границ фонов */
.section { padding: 44px 0; position: relative; }
.section--alt { background: var(--surface); }
/* третий вариант фона — чтобы соседние секции не сливались (how → about → solutions) */
.section--tint { background: linear-gradient(180deg, #dbe7fa 0%, #d3e1f7 100%); }
.section-head { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.kicker {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center;
  gap: .5ch; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--text-2);
}
.kicker::before { content: "killbot:~$"; color: var(--primary); font-weight: 600; }
.kicker::after {
  content: ""; align-self: center; width: .6ch; height: 1.05em; margin-left: .05ch;
  background: var(--primary); animation: kbCaret 1.05s steps(1) infinite;
}
@keyframes kbCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kicker::after, .eyebrow::after { animation: none; opacity: 1; } }
.section-head h2 { font-size: clamp(26px, 3.6vw, 40px); }
.section-sub { margin-top: 14px; color: var(--text-2); font-size: 17px; }

/* reveal-анимация на скролле */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ------------------------------ HERO ----------------------------- */
.hero { position: relative; margin-top: calc(-1 * var(--header-h)); padding: calc(64px + var(--header-h)) 0 76px; color: #eaf1ff; overflow: hidden;
  /* на самом верху страницы виден только hero: высота вьюпорта + запас */
  min-height: calc(100vh + 90px); min-height: calc(100svh + 90px); display: flex; flex-direction: column; justify-content: center;
  background:
  radial-gradient(1100px 640px at 80% -14%, #1a3a78 0%, rgba(26,58,120,0) 58%),
  radial-gradient(760px 520px at 2% 110%, #0e2350 0%, rgba(14,35,80,0) 60%),
  linear-gradient(165deg, #0a1430 0%, #0b1838 52%, #080f24 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,160,255,.20), transparent); }
/* нижний margin в flex-центровке hero приподнимает контент (текст + глобус) над серединой */
.hero-grid { position: relative; display: block; margin-bottom: 96px; }
.hero-copy { position: relative; z-index: 2; max-width: 600px; }
.eyebrow { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .5ch; margin-bottom: 22px; font-family: var(--font-mono); font-size: 13.5px; color: #aebbd6; }
.eyebrow::before { content: "killbot:~$"; color: #6ea2ff; font-weight: 600; }
.eyebrow::after { content: ""; align-self: center; width: .6ch; height: 1.05em; margin-left: .05ch; background: #6ea2ff; animation: kbCaret 1.05s steps(1) infinite; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); position: relative; }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); opacity: .5; animation: pulse 1.8s var(--ease) infinite; }
.pulse-dot--red { background: var(--bad); }
.pulse-dot--red::after { border-color: var(--bad); }
@keyframes pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

.hero h1 { font-size: clamp(33px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; }
.hero .lead { margin-top: 22px; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-2); max-width: 560px; }
/* Нижняя линия hero: кнопка слева, телеметрия (Мониторинг 24/7 + легенда) справа — на одной оси */
.hero-baseline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; }
.hero-baseline .btn-lg { flex-shrink: 0; }
/* телеметрию центрируем по горизонтали относительно глобуса (--globe-cx ≈ центр диска), по вертикали — на линии кнопки */
.hero-baseline .hg-readout { position: absolute; left: var(--globe-cx, 76%); top: 50%; transform: translate(-50%, -50%); }
.hero-stats { display: flex; gap: 30px; margin-top: 38px; flex-wrap: wrap; }
.hstat b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.hstat span { font-size: 13.5px; color: var(--text-3); }

/* hero на тёмном космосе — переопределения текста */
.hero h1 { color: #ffffff; }
.hero .lead { color: #aebbd6; }
.hero .hstat b { color: #ffffff; }
.hero .hstat span { color: #8ea0c4; }
.hero .btn-link { color: #aebbd6; }
.hero .btn-link:hover { color: #ffffff; }

/* hero visual — орбитальный глобус как живой фон справа (вне потока: высоту hero не растит) */
.hero-globe { position: absolute; top: 50%; right: -4%; transform: translateY(-50%); height: max(158%, 600px); aspect-ratio: 1 / 1; z-index: 0; margin: 0; pointer-events: none; }
.hg-stage { position: relative; width: 100%; height: 100%; margin: 0; }
.hg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 100%); }
.hg-readout { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 16px; padding: 9px 16px; border-radius: 999px;
  max-width: 100%; background: rgba(9, 20, 48, .55); border: 1px solid rgba(120, 160, 255, .18); box-shadow: 0 6px 22px rgba(4, 10, 28, .3);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  font-family: var(--font-mono); font-size: 11.5px; color: #8ea0c4; pointer-events: none; }
.hg-info { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.hg-label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12.5px; color: #cdddff; }
.hg-label .pulse-dot { width: 7px; height: 7px; flex-shrink: 0; }
.hg-legend { display: inline-flex; gap: 14px; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
.hg-legend i { flex-shrink: 0; }
.hg-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.hg-legend .dot-hub { background: #7db4ff; box-shadow: 0 0 6px rgba(125,180,255,.9); }
.hg-legend .dot-human { background: #5cf08f; box-shadow: 0 0 6px rgba(92,240,143,.9); }
.hg-legend .dot-bot { background: #ff6b5a; box-shadow: 0 0 6px rgba(255,107,90,.9); }

/* ---- Схема-фильтр: трафик → фильтр → пропуск/блок ---- */
.scheme-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 28px; align-items: center; }
.scheme-fig { margin: 0; }

/* схема-фильтр: трафик → ядро Killbot → пропуск/блок */
.filter-scene {
  position: relative; aspect-ratio: 440 / 360;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 10px; box-shadow: var(--shadow-card);
}
.filter-svg { display: block; width: 100%; height: 100%; }
.fs-core-label { font-family: var(--font); font-size: 12px; fill: var(--text-3); font-weight: 500; }
.fs-links path { stroke-dasharray: 4 6; opacity: .9; }
.scene-run .link-pass, .scene-run .link-block { animation: dash 4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -100; } }

/* узлы и выходы (центрируются по концам линий) */
.fs-node, .fs-out {
  position: absolute; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 9px rgba(15,27,51,.08);
}
.fs-node {
  background: var(--surface); border: 1px solid var(--border-2);
  padding: 6px 13px 6px 9px; color: var(--text-2); cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.fs-node .ic, .fs-out .ic { width: 18px; height: 18px; }
.fs-node:focus-visible { outline: none; }
.fs-node:hover, .fs-node:focus-visible, .fs-node.is-active {
  border-color: var(--primary); color: var(--primary-dark);
  box-shadow: 0 4px 14px rgba(37,99,235,.18);
}
.n-human .ic, .n-ai .ic { color: var(--ok); }
.n-bot .ic, .n-bad .ic { color: var(--bad); }
.fs-out { padding: 6px 13px; }
.o-pass { background: var(--ok-soft); color: var(--ok); }
.o-block { background: var(--bad-soft); color: var(--bad); }

/* вердикт-плашка под сценой (в потоке, ничего не перекрывает) */
.fs-tip {
  margin-top: 14px; min-height: 46px; display: flex; align-items: center;
  background: var(--text); color: #e6edfb; font-size: 13.5px; line-height: 1.45;
  padding: 11px 16px; border-radius: var(--r-md); transition: background var(--t-fast);
}
.fs-tip.show { background: #16233f; }

/* правая колонка: пояснения + живой лог */
.scheme-aside { display: flex; flex-direction: column; gap: 18px; }
.scheme-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.scheme-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--text-2); line-height: 1.45; }
.scheme-points .sp-ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); margin-top: 1px; }
.scheme-points .sp-ic .ic { width: 17px; height: 17px; color: var(--primary); }
.scheme-points b { color: var(--text); font-weight: 600; }
.scheme-points .sp-ok .sp-ic { background: var(--ok-soft); } .scheme-points .sp-ok .sp-ic .ic { color: var(--ok); }
.scheme-points .sp-bad .sp-ic { background: var(--bad-soft); } .scheme-points .sp-bad .sp-ic .ic { color: var(--bad); }

.threat-log { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-card); }
.tl-head { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 11px; }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; min-height: 100px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tl-list li { display: flex; align-items: center; gap: 7px; opacity: 0; transform: translateX(-6px); animation: tlIn .4s var(--ease) forwards; }
.tl-list li::before { content: '×'; color: var(--bad); font-weight: 700; }
.tl-list li.ok::before { content: '✓'; color: var(--ok); }
.tl-list b { color: var(--text); font-weight: 600; }
@keyframes tlIn { to { opacity: 1; transform: none; } }

/* цифры под схемой (перенесены из hero) */
.how-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }
.hs-item { text-align: center; padding: 26px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.hs-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 50px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--primary-dark), var(--primary-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-item span { display: block; margin-top: 11px; font-size: 14px; color: var(--text-2); }
@media (max-width: 560px) { .how-stats { grid-template-columns: 1fr; gap: 12px; } .hs-item { padding: 20px 16px; } }

/* ------------- ЭКСПЕРТИЗА — статичные панели «консоль» ------------- */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.cred-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 28px 30px;
  transition: border-color var(--t), box-shadow var(--t);
}
.cred-card--lead { background: var(--grad-soft); border-color: var(--border-2); }
.cred-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-card); }

.cred-top {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cred-chip {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-soft);
}
.cred-chip .ic { color: var(--primary); }
.cred-top h3 { margin: 0; font-size: 18px; line-height: 1.25; }

/* --- цифры: «реестр» с разделителями; число по центру слева, подпись справа --- */
.cred-metrics { list-style: none; margin: 0; padding: 0; }
.cred-metrics li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.cred-metrics li:last-child { border-bottom: 0; padding-bottom: 2px; }
.metric {
  flex: 0 0 auto;
  min-width: 84px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 1;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
}
.cred-metrics li span { color: var(--text-2); font-size: 14px; line-height: 1.42; }

.cred-feats { list-style: none; margin: 0; padding: 20px 0 0; display: flex; flex-direction: column; gap: 16px; }
.cred-feats li { display: flex; gap: 13px; align-items: flex-start; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.cred-feats .cred-bul {
  flex: 0 0 auto; width: 30px; height: 30px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.cred-feats .cred-bul .ic { color: var(--primary); }
.cred-feats b { color: var(--text); font-weight: 600; }

/* ------------------------- PIPELINE (инфографика B) ------------- */
.pipeline { display: flex; align-items: stretch; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.pl-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 16px; min-width: 132px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); position: relative; }
.pl-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.pl-step b { color: var(--primary-dark); }
.pl-step--core { border-color: var(--border-2); background: var(--tile); }
.pl-params { position: absolute; inset: auto 16px 13px; height: 4px; border-radius: 999px; background: rgba(79,140,255,.16); overflow: hidden; }
.pl-params::after { content: ""; position: absolute; top: 0; bottom: 0; left: -42%; width: 42%; border-radius: 999px; background: linear-gradient(90deg, rgba(79,140,255,0), var(--primary-2), rgba(79,140,255,0)); animation: plScan 1.9s var(--ease) infinite; }
@keyframes plScan { 0% { left: -42%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .pl-params::after { animation: none; left: 29%; opacity: .7; } }
.pl-arrow { display: grid; place-items: center; color: var(--text-3); }
.pl-fork { background: transparent; border: none; padding: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pl-out { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.pl-out--pass { background: var(--ok-soft); color: var(--ok); }
.pl-out--block { background: var(--bad-soft); color: var(--bad); }
.pl-out .ic { width: 18px; height: 18px; }

/* -------------------- АРСЕНАЛ ПРОТИВОДЕЙСТВИЯ -------------------- */
.arsenal { margin-top: 42px; }
.ars-head { max-width: 720px; margin: 0 auto 26px; text-align: center; }
.ars-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.ars-head h3 { font-size: clamp(22px, 2.6vw, 28px); }
.ars-head p { margin-top: 10px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.ars-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ars-chip {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 16px 18px; box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.ars-chip:hover { border-color: var(--primary-2); box-shadow: var(--shadow-pop); transform: translateY(-3px); }
.ars-ic { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); transition: background var(--t-fast), color var(--t-fast); }
.ars-chip:hover .ars-ic { background: var(--primary); color: #fff; }
.ars-ic .ic { width: 21px; height: 21px; }
.ars-body b { display: block; font-family: var(--font-display); font-size: 14.5px; line-height: 1.25; margin-bottom: 5px; }
.ars-body span { font-size: 12.5px; color: var(--text-3); line-height: 1.42; }
@media (max-width: 1040px) { .ars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ars-grid { grid-template-columns: 1fr; } }

/* ------------------------------ TABS ----------------------------- */
/* табы решений живут в блоке экспертизы: отступ снизу отделяет их от карточек */
#solTabs { margin-bottom: clamp(40px, 6vw, 60px); }
.tabs-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 6px; max-width: max-content; margin: 0 auto 26px; }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-2); transition: color var(--t-fast), background var(--t-fast); }
.tab-btn .ic { color: var(--text-3); transition: color var(--t-fast); }
.tab-btn:hover { color: var(--text); }
.tab-btn.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-card); }
.tab-btn.is-active .ic { color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; animation: fadeUp .45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tp-text h3 { font-size: 25px; margin-bottom: 12px; }
.tp-text p { color: var(--text-2); margin-bottom: 20px; }
.tp-vis { background: var(--tile-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; min-height: 230px; display: grid; place-items: center; }
.score-card { width: 100%; background: var(--surface); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-card); }
.sc-title { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.sc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 12px 0; }
.sc-grid b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ok); }
.sc-grid span { font-size: 11px; color: var(--text-3); }
.sc-grid .sc-warn b { color: var(--warn); }
.sc-grid .sc-bad b { color: var(--bad); }
.sc-chart { height: 64px; }
/* ---- динамические визуалы вкладок «Решения» ---- */
.fraud-viz, .ads-viz, .tel-viz { width: 100%; }

/* fraud — живой поток заявок */
.fv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fv-stat { display: flex; flex-direction: column; line-height: 1; }
.fv-stat b { font-family: var(--font-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.fv-stat span { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.fv-stat--ok b { color: var(--ok); }
.fv-stat--bad { text-align: right; }
.fv-stat--bad b { color: var(--bad); }
.fv-ratio { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--bad-soft); overflow: hidden; }
.fv-bar { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, #1f9d57, #34d27f); border-radius: 999px; transition: width .5s var(--ease); }
.fv-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fv-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; animation: fvIn .4s var(--ease); }
.fv-item span { flex: 1 1 auto; }
.fv-item b { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.fv-item.is-ok { color: var(--ok); background: var(--ok-soft); }
.fv-item.is-bad { color: var(--bad); background: var(--bad-soft); }
@keyframes fvIn { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

/* account — Директ: корректировки ставок −100% и бюджет на клиентов */
.ads-viz { display: flex; flex-direction: column; gap: 13px; }
.av-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.av-title { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.av-src { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); white-space: nowrap; }
.av-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.av-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-card); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-2); opacity: .4; transform: translateX(-7px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.av-row .ic { flex: 0 0 auto; color: var(--text-3); transition: color .3s; }
.av-row > span { flex: 1 1 auto; min-width: 0; }
.av-adj { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--border); color: var(--text-3); white-space: nowrap; opacity: 0; transform: scale(.85); transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s, color .3s; }
.av-row.is-on { opacity: 1; transform: none; }
.av-row.is-on .av-adj { opacity: 1; transform: none; }
.av-row--bad.is-on .ic { color: var(--bad); }
.av-row--bad.is-on .av-adj { background: var(--bad-soft); color: var(--bad); }
.av-row--ok.is-on .ic { color: var(--ok); }
.av-row--ok.is-on .av-adj { background: var(--ok-soft); color: var(--ok); }
.av-bline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; }
.av-bline b { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ok); font-variant-numeric: tabular-nums; }
.av-meter { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.av-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1f9d57, #34d27f); border-radius: 999px; transition: width .4s var(--ease); }

/* academy — телефония: ротация номеров, конкурент теряет след */
.tel-viz { display: flex; flex-direction: column; gap: 12px; }
.tv-atc { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--surface); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-card); }
.tv-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: 0 0 auto; }
.tv-numwrap { flex: 1 1 auto; min-width: 150px; }
.tv-label { display: block; font-size: 10.5px; color: var(--text-3); margin-bottom: 3px; }
.tv-num { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.tv-num.is-swap { animation: tvSwap .38s var(--ease); }
@keyframes tvSwap { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.tv-enc { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); white-space: nowrap; }
.tv-calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 118px; }
.tv-call { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; animation: fvIn .4s var(--ease); }
.tv-call > span { flex: 1 1 auto; min-width: 0; color: var(--text-2); }
.tv-call b { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tv-spy { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--border-2); font-size: 12.5px; color: var(--text-3); }
.tv-spy .ic { flex: 0 0 auto; }
.tv-spy > span { flex: 1 1 auto; min-width: 0; }
.tv-spy b { font-size: 11px; font-weight: 700; white-space: nowrap; transition: color .3s; }
.tv-spy.is-lost { border-color: var(--bad-soft); }
.tv-spy.is-lost .ic, .tv-spy.is-lost b { color: var(--bad); }

/* ---------------------------- ПРОДУКТЫ --------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.product-card:hover { border-color: var(--border-2); transform: translateY(-4px); box-shadow: var(--shadow-pop); z-index: 4; }
.product-card:focus-within { z-index: 4; }
.pc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pc-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: var(--grad); color: #fff; }
.pc-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: 5px 10px; border-radius: 999px; }
.product-card h3 { font-size: 21px; margin-bottom: 12px; }
.product-card > p { color: var(--text-2); font-size: 14.5px; margin-bottom: 18px; }
.pc-hl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pc-hl li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.pc-hl .ic { color: var(--ok); }

/* инфо-иконка с тултипом (переиспользуемый компонент) */
.hint { margin-left: auto; flex: 0 0 auto; position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-3); cursor: help; transition: color var(--t-fast), background var(--t-fast); }
.hint:hover, .hint:focus-visible { color: var(--primary); background: var(--primary-soft); outline: none; }
.hint .ic { width: 15px; height: 15px; }
.hint-pop {
  position: absolute; right: -6px; bottom: calc(100% + 11px); width: 256px; max-width: 76vw;
  padding: 12px 14px; border-radius: 12px; background: var(--text); color: #e8eefb;
  font-size: 12.5px; line-height: 1.5; font-weight: 400; text-align: left; white-space: normal;
  box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index: 30; pointer-events: none;
}
.hint-pop::after { content: ""; position: absolute; top: 100%; right: 13px; border: 6px solid transparent; border-top-color: var(--text); }
.hint-pop b { color: #fff; font-weight: 600; }
.hint:hover .hint-pop, .hint:focus .hint-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.pc-more { margin-top: auto; align-self: flex-start; }
.pc-more .ic { transition: transform var(--t-fast); }
.pc-more:hover .ic { transform: translateX(3px); }

/* --- раскрытие карточки поверх соседей (вместо модалки) --- */
.product-grid { position: relative; }
.product-card.is-anim { transition: left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), box-shadow var(--t); }
.product-card.is-open, .product-card.is-anim { transform: none !important; z-index: 6; overflow: hidden; }
/* во время анимации ширина внутренних блоков заморожена (--pc-fix ставит JS),
   чтобы заголовок и абзац не перескакивали при изменении ширины карточки */
.product-card.is-anim .pc-top, .product-card.is-anim > h3, .product-card.is-anim > p { width: var(--pc-fix, auto); }
.product-card.is-open { box-shadow: var(--shadow-pop); border-color: var(--border-2); }
.pc-ghost { visibility: hidden; }
.pc-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); display: none; place-items: center; cursor: pointer; z-index: 3; transition: background var(--t-fast), color var(--t-fast); }
.pc-x:hover, .pc-x:focus-visible { background: var(--primary-soft); color: var(--primary-dark); outline: none; }
.product-card.is-open .pc-x { display: grid; }
.product-card.is-open .pc-hl, .product-card.is-open .pc-more { display: none; }
.pc-details { display: none; }
/* контент деталей включается отдельным классом is-show — после конца анимации
   расширения, чтобы текст не перевёрстывался на глазах при росте ширины */
.product-card.is-open.is-show .pc-details { display: block; animation: pcdIn .45s var(--ease) both; }
@keyframes pcdIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pcd-h { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; margin: 22px 0 12px; }
.pc-details > .pcd-h:first-child { margin-top: 2px; }
.pcd-p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; }
.pcd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.pcd-list--rows { grid-template-columns: 1fr; }
.pcd-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.pcd-list .ic { flex: 0 0 auto; margin-top: 3px; color: var(--ok); }
.pcd-list--rows .ic { color: var(--primary); }
.pcd-list b { color: var(--text); font-weight: 600; }
.pcd-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 13px 16px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.pcd-note .ic { flex: 0 0 auto; margin-top: 2px; color: var(--primary-dark); }
.pcd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (max-width: 720px) {
  .pcd-list { grid-template-columns: 1fr; }
  .pc-x { top: 12px; right: 12px; width: 44px; height: 44px; }
  .pcd-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .product-card { padding: 22px 18px; }
  .product-card h3 { font-size: 19px; }
}

.resource-card { display: flex; align-items: center; gap: 16px; margin-top: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 22px; transition: border-color var(--t-fast), background var(--t-fast); }
.resource-card:hover { border-color: var(--primary-2); background: var(--surface-2); }
.rc-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); flex: 0 0 auto; }
.rc-text { display: flex; flex-direction: column; }
.rc-text b { font-family: var(--font-display); }
.rc-text span { font-size: 13.5px; color: var(--text-3); }
.rc-ext { margin-left: auto; color: var(--text-3); }

/* ----------------------------- КОМАНДА --------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.team-card { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.tc-photo { aspect-ratio: 4/5; overflow: hidden; background: var(--surface-2); }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) contrast(.97); transition: filter .4s var(--ease), transform .5s var(--ease); }
.team-card:hover .tc-photo img { filter: none; transform: scale(1.04); }
.tc-info { padding: 16px; }
.tc-info h3 { font-size: 16.5px; }
.tc-role { display: block; font-size: 12.5px; color: var(--primary); font-weight: 600; margin-top: 3px; }
.tc-quote { font-size: 13px; color: var(--text-2); margin-top: 12px; }
.tc-meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); margin-top: 10px; }

/* ----------------------------- ОТЗЫВЫ ---------------------------- */
/* горизонтальная бегущая лента «фильмстрип»; края тают в прозрачность (mask) */
.rw { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; gap: 12px; }
.rw-viewport {
  position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rw-track { display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 6px 0; will-change: transform; cursor: grab; touch-action: pan-y; }
.rw-track:active { cursor: grabbing; }
.rw-card { flex: 0 0 auto; height: clamp(244px, 34vw, 340px); }
.rw-card img { display: block; height: 100%; width: auto; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); user-select: none; -webkit-user-drag: none; }
.rw-arrow {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2); box-shadow: var(--shadow-pop);
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.rw-arrow:hover { color: var(--primary); border-color: var(--primary-2); }
.rw-arrow:active { transform: scale(.92); }
.rw-arrow .ic { width: 20px; height: 20px; }
.rw-prev .ic { transform: rotate(180deg); }

/* ----------------------------- ВИДЕО ----------------------------- */
.video-block { max-width: 940px; margin: 0 auto; }
.video-player { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(135deg, #0d1830, #16306a); box-shadow: var(--shadow-pop); }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp-poster { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff;
  background: url("../images/intro-poster.jpg") center / cover no-repeat #0d1830; }
/* с контентным постером декоративная сцена (радар/лог) не нужна — оставляем только пульс Play */
.vp-poster .vp-scene { display: none; }
.vp-label { text-shadow: 0 1px 8px rgba(5,10,26,.8); }
.vp-play { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.6); transition: transform var(--t-fast), background var(--t-fast); }
.vp-play svg { width: 30px; height: 30px; margin-left: 4px; }
.vp-poster:hover .vp-play { transform: scale(1.08); background: rgba(255,255,255,.24); }
.vp-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em; }
.vp-play, .vp-label { position: relative; z-index: 2; }

/* --- живой постер: радар + терминал + события (в стиле «Console») --- */
.vp-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vp-radar { position: absolute; top: 50%; right: -7%; width: min(46%, 420px); aspect-ratio: 1/1; transform: translateY(-50%); }
.vp-ring { position: absolute; border: 1px solid rgba(130,168,255,.20); border-radius: 50%; }
.vp-ring--1 { inset: 0; }
.vp-ring--2 { inset: 17%; border-color: rgba(130,168,255,.16); }
.vp-ring--3 { inset: 34%; border-color: rgba(130,168,255,.12); }
.vp-sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(96,150,255,.30) 0deg, rgba(96,150,255,.10) 42deg, transparent 70deg);
  -webkit-mask: radial-gradient(circle, transparent 12%, #000 12.5%);
  mask: radial-gradient(circle, transparent 12%, #000 12.5%);
}
.video-block.is-in .vp-sweep { animation: vpSweep 5.5s linear infinite; }
@keyframes vpSweep { to { transform: rotate(360deg); } }
.vp-blip { position: absolute; width: 9px; height: 9px; border-radius: 50%; opacity: 0; }
.vp-blip--bad1 { top: 26%; left: 30%; background: #ff6d57; box-shadow: 0 0 12px rgba(255,109,87,.8); }
.vp-blip--bad2 { top: 62%; left: 68%; background: #ff6d57; box-shadow: 0 0 12px rgba(255,109,87,.8); }
.vp-blip--ok { top: 44%; left: 52%; background: #34d27f; box-shadow: 0 0 12px rgba(52,210,127,.8); }
.video-block.is-in .vp-blip--bad1 { animation: vpBlip 5.5s .6s infinite; }
.video-block.is-in .vp-blip--bad2 { animation: vpBlip 5.5s 3.1s infinite; }
.video-block.is-in .vp-blip--ok { animation: vpBlipOk 5.5s 1.9s infinite; }
@keyframes vpBlip { 0%, 4% { opacity: 0; transform: scale(.5); } 8% { opacity: 1; transform: scale(1.25); } 30% { opacity: .55; transform: scale(1); } 55%, 100% { opacity: 0; } }
@keyframes vpBlipOk { 0%, 4% { opacity: 0; transform: scale(.5); } 8% { opacity: 1; transform: scale(1.2); } 45% { opacity: .7; } 75%, 100% { opacity: 0; } }
.vp-term { position: absolute; left: 26px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.4; color: rgba(198,216,248,.85); text-align: left; }
.vp-term b { color: #7fb0ff; font-weight: 600; }
.vp-term i { font-style: normal; opacity: 0; transform: translateY(6px); }
.video-block.is-in .vp-term i { animation: vpLine .45s var(--ease) both; }
.video-block.is-in .vp-term i:nth-child(1) { animation-delay: .3s; }
.video-block.is-in .vp-term i:nth-child(2) { animation-delay: 1.1s; }
.video-block.is-in .vp-term i:nth-child(3) { animation-delay: 1.9s; }
.video-block.is-in .vp-term i:nth-child(4) { animation-delay: 2.7s; }
@keyframes vpLine { to { opacity: 1; transform: none; } }
.vp-term-last::after { content: "▍"; margin-left: 2px; color: #7fb0ff; animation: vpCaret 1.1s steps(1) infinite; }
@keyframes vpCaret { 50% { opacity: 0; } }
.vp-chip { position: absolute; right: 12%; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; opacity: 0; }
.vp-chip--block { top: 24%; background: rgba(224,68,52,.18); color: #ffa294; border: 1px solid rgba(255,130,110,.28); }
.vp-chip--pass { top: 70%; right: 30%; background: rgba(38,170,96,.18); color: #7fe3ad; border: 1px solid rgba(90,220,150,.28); }
.video-block.is-in .vp-chip--block { animation: vpChip 8s 1.4s infinite; }
.video-block.is-in .vp-chip--pass { animation: vpChip 8s 5.4s infinite; }
@keyframes vpChip { 0% { opacity: 0; transform: translateY(10px); } 6% { opacity: 1; transform: none; } 30% { opacity: 1; } 42%, 100% { opacity: 0; transform: translateY(-12px); } }
/* пульс вокруг кнопки Play */
.vp-play::before, .vp-play::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); opacity: 0; }
.video-block.is-in .vp-play::before { animation: vpPulse 2.8s var(--ease) infinite; }
.video-block.is-in .vp-play::after { animation: vpPulse 2.8s 1.4s var(--ease) infinite; }
@keyframes vpPulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
@media (max-width: 720px) {
  .vp-radar { right: -22%; width: 70%; opacity: .6; }
  .vp-chip { display: none; }
  .vp-term { left: 16px; bottom: 12px; font-size: 10.5px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-block.is-in .vp-sweep, .video-block.is-in .vp-blip,
  .video-block.is-in .vp-chip, .video-block.is-in .vp-play::before,
  .video-block.is-in .vp-play::after, .vp-term-last::after { animation: none; }
  .video-block.is-in .vp-term i { animation: none; opacity: 1; transform: none; }
  .vp-blip { opacity: .6; }
}
.video-quick { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--primary-dark); font-weight: 600; font-size: 14.5px; }
.video-quick:hover { color: var(--primary); }

/* --------- CTA: Telegram-канал в контактах --------- */
.tg-cta { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 18px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #2a9fd8 0%, #2563eb 100%); color: #fff; box-shadow: 0 6px 20px rgba(37,99,235,.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast); }
.tg-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,99,235,.32); color: #fff; }
.tg-cta-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); flex: 0 0 auto; }
.tg-cta-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tg-cta-text b { font-size: 15px; }
.tg-cta-text span { font-size: 12.5px; opacity: .85; line-height: 1.4; }
.tg-cta-arrow { flex: 0 0 auto; transition: transform var(--t-fast); }
.tg-cta:hover .tg-cta-arrow { transform: translateX(4px); }

/* ----------------------------- КАРТА ----------------------------- */
.map-section { padding: 44px 0; position: relative; background: linear-gradient(180deg, #dbe7fa 0%, #d3e1f7 100%); }
.map-frame { position: relative; height: clamp(480px, 66vh, 720px); background: var(--tile-2); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2); box-shadow: var(--shadow-pop); }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85); transition: filter var(--t); }
.map-frame:hover iframe, .map-frame:focus-within iframe { filter: none; }
@media (max-width: 880px) { .map-frame { height: clamp(420px, 63vh, 645px); } }
@media (max-width: 560px) { .map-section { padding: 36px 0; } .map-frame { height: 450px; } }

/* ------------------------- КАЛЬКУЛЯТОР --------------------------- */
.calc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 10px; box-shadow: var(--shadow-card); }
.calc-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; }
.calc-tab { flex: 1 1 auto; padding: 12px 14px; border-radius: 12px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text-2); transition: color var(--t-fast), background var(--t-fast); }
.calc-tab:hover { color: var(--text); background: var(--surface-2); }
.calc-tab.is-active { background: var(--grad); color: #fff; }
.calc-body { padding: 16px 22px 26px; }

.calc-pane { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: stretch; animation: fadeUp .4s var(--ease); }
.calc-controls { display: flex; flex-direction: column; gap: 22px; }
.calc-prod-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.calc-prod-desc { color: var(--text-2); font-size: 14.5px; margin-top: 6px; }

.period-toggle { display: inline-flex; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; align-self: flex-start; }
.period-toggle button { padding: 9px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--text-2); transition: color var(--t-fast), background var(--t-fast); position: relative; }
.period-toggle button.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-card); }
.period-toggle .save-badge { font-family: var(--font-mono); font-size: 10.5px; color: var(--ok); background: var(--ok-soft); padding: 2px 7px; border-radius: 999px; margin-left: 7px; }

.range-wrap { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; }
.range-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.range-top .rt-count { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.range-top .rt-unit { font-size: 15px; color: var(--text-2); margin-left: 6px; }
.range-top .rt-label { font-size: 13px; color: var(--text-3); }
input[type=range].kb-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--primary) var(--fill,40%), var(--border-2) var(--fill,40%)); outline: none; }
input[type=range].kb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); cursor: grab; box-shadow: var(--shadow-card); transition: transform var(--t-fast); }
input[type=range].kb-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
input[type=range].kb-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); cursor: grab; }
.range-ticks { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.range-ticks span { cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.range-ticks span.on { color: var(--primary); font-weight: 600; }

.addon-toggle { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.addon-toggle .at-text { flex: 1; }
.addon-toggle .at-text b { font-family: var(--font-display); font-size: 14.5px; }
.addon-toggle .at-text span { display: block; font-size: 12.5px; color: var(--text-3); }
.addon-toggle .at-price { font-family: var(--font-mono); font-size: 13.5px; color: var(--primary-dark); }

/* итоговая панель калькулятора */
.calc-result { background: linear-gradient(180deg, #0d1830, #16306a); color: #fff; border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; }
.cr-row { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #c2d2f0; }
.cr-row:last-of-type { border-bottom: none; }
.cr-row b { color: #fff; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cr-total { margin-top: 12px; }
.cr-total .cr-big { font-family: var(--font-display); font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cr-total .cr-per { font-size: 14px; color: #b9caea; margin-left: 8px; }
.cr-old { color: #8ea4cf; text-decoration: line-through; font-size: 15px; }
.cr-save { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: rgba(34,197,94,.16); color: #6ee7a0; font-weight: 600; font-size: 13.5px; padding: 9px 14px; border-radius: 10px; align-self: flex-start; }
.cr-save .ic { color: #6ee7a0; width: 16px; height: 16px; }
.cr-mini-chart { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 12px; }
.econ-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: #b9caea; margin-bottom: 6px; }
.econ-row b { color: #fff; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.econ-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.econ-bar i { display: block; height: 100%; border-radius: 999px; background: #8aa0cc; transition: width .6s var(--ease); }
.econ-bar--save i { background: linear-gradient(90deg, #34d27f, #6ee7a0); }
.calc-result .btn { margin-top: auto; }
.cr-note { font-size: 12px; color: #92a8d0; margin-top: 12px; text-align: center; }

/* особые панели (тест-драйв, телефония) */
.calc-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; animation: fadeUp .4s var(--ease); }
.cf-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 24px; }
.cf-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-2); font-size: 14.5px; }
.cf-list .ic { color: var(--ok); margin-top: 2px; }
.cf-price { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--primary-dark); }
.cf-price small { font-size: 16px; color: var(--text-2); font-weight: 600; }
.cf-side { background: var(--tile); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; text-align: center; }
.cf-side .big-free { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--ok); margin-bottom: 6px; }

/* доп.услуги */
.addons { margin-top: 30px; }
.addons-title { font-size: 19px; margin-bottom: 14px; }
.addon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.addon {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 24px; box-shadow: 0 8px 24px rgba(15,27,51,.07);
}
.addon-ic { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.addon-ic .ic { width: 25px; height: 25px; }
.addon--free .addon-ic { background: var(--ok-soft); color: var(--ok); }
.addon-body { flex: 1 1 auto; min-width: 0; }
.addon-body b { font-family: var(--font-display); font-size: 16px; }
.addon-body span { display: block; font-size: 13px; color: var(--text-2); margin-top: 4px; }
.addon-price { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--primary-dark); white-space: nowrap; }
.addon-price i { font-style: normal; font-size: 11px; color: var(--text-3); }
.addon-price--free { color: var(--ok); padding: 6px 14px; background: var(--ok-soft); border-radius: 999px; font-size: 13px; }

/* обзорная схема тарифов */
.plan-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 26px; }
.plan-chip {
  position: relative; display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 18px 18px 16px; text-align: left; box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.plan-chip::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary-2); opacity: 0; transition: opacity var(--t-fast); }
.plan-chip:hover { border-color: var(--primary); box-shadow: var(--shadow-pop); transform: translateY(-3px); }
.plan-chip:hover::before { opacity: 1; }
.plan-chip b { font-family: var(--font-display); font-size: 15px; }
.plan-chip span { font-family: var(--font-mono); font-size: 12px; color: var(--primary-dark); }

/* ----------------------------- ПАРТНЁРАМ ------------------------- */
.partner-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.partner-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; transition: border-color var(--t-fast); }
.pb-card:hover { border-color: var(--primary-2); }
.pb-card .ic { color: var(--primary); margin-bottom: 12px; }
.pb-card h3 { font-size: 17px; margin-bottom: 7px; }
.pb-card p { font-size: 13.5px; color: var(--text-2); }
.partner-steps { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; }
.partner-steps h3 { font-size: 19px; margin-bottom: 18px; }
.stepper { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.step { display: flex; gap: 14px; padding: 12px; border-radius: var(--r-md); transition: background var(--t-fast); cursor: pointer; }
.step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); font-family: var(--font-display); font-weight: 700; color: var(--text-3); flex: 0 0 auto; transition: background var(--t-fast), color var(--t-fast); }
.step-body b { font-family: var(--font-display); font-size: 15px; }
.step-body p { font-size: 13px; color: var(--text-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s var(--ease), margin .35s var(--ease); }
.step.is-active { background: var(--surface-2); }
.step.is-active .step-num { background: var(--grad); color: #fff; border-color: transparent; }
.step.is-active .step-body p { max-height: 80px; opacity: 1; margin-top: 4px; }

/* ------------------------------- FAQ ----------------------------- */
.faq { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 20px 4px; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; cursor: pointer; list-style: none; transition: color var(--t-fast); }
.faq-item summary::-webkit-details-marker { display: none; }
/* галочка-маркер перед вопросом (через ::before — переживает подмену innerHTML в i18n) */
.faq-item summary::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; background-color: var(--primary);
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E");
          mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E"); }
.faq-item summary:hover { color: var(--primary); }
.faq-chevron { color: var(--text-3); transition: transform var(--t), color var(--t); flex: 0 0 auto; margin-left: auto; }
.faq-item[open] .faq-chevron { transform: rotate(45deg); color: var(--primary); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 4px 22px; color: var(--text-2); font-size: 15px; max-width: 760px; }
/* плавное раскрытие через JS (grid-rows fallback на open) */
.faq-item .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq-item[open] .faq-a { grid-template-rows: 1fr; }
.faq-a > p { min-height: 0; }

.faq-cta { display: flex; align-items: center; gap: 18px; max-width: 880px; margin: 32px auto 0; background: var(--grad-soft); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 22px 26px; }
.faq-cta > .ic { color: var(--primary); flex: 0 0 auto; }
.faq-cta b { font-family: var(--font-display); display: block; }
.faq-cta span { font-size: 13.5px; color: var(--text-2); }
.faq-cta .btn { margin-left: auto; }

/* ---------------------------- КОНТАКТЫ --------------------------- */
.contacts-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start; }
.contacts-copy .kicker { margin-bottom: 16px; }
.contacts-copy h2 { font-size: clamp(24px, 3vw, 34px); }
.contacts-copy p { margin-top: 16px; color: var(--text-2); }
.contacts-list { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.contacts-list li { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.contacts-list .ic { color: var(--primary); }
.contacts-list a:hover { color: var(--primary); }

/* форма */
.lead-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--shadow-card); }
.lf-summary { background: var(--primary-soft); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 12px 16px; font-size: 13.5px; color: var(--primary-dark); margin-bottom: 18px; font-family: var(--font-mono); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field label .opt { color: var(--text-3); font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; padding: 13px 15px; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: 15px; color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.12); outline: none; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.select-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.field-error { display: none; color: var(--bad); font-size: 12.5px; margin-top: 6px; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(220,38,38,.1); }
.field.has-error .field-error { display: block; }
.field.is-valid input, .field.is-valid textarea, .field.is-valid select { border-color: var(--ok); }

.checkbox { position: relative; display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--text-2); cursor: pointer; margin-bottom: 6px; }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.cb-box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--border-2); border-radius: 7px; flex: 0 0 auto; transition: background var(--t-fast), border-color var(--t-fast); }
.cb-box .ic { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--t-fast), transform var(--t-fast); stroke-width: 2.4; }
.checkbox input:checked + .cb-box { background: var(--primary); border-color: var(--primary); }
.checkbox input:checked + .cb-box .ic { opacity: 1; transform: none; }
.checkbox input:focus-visible + .cb-box { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.field-error[data-error-for="lf-agree"] { margin-top: -2px; margin-bottom: 14px; }
.lead-form > button { margin-top: 8px; }
.lf-note { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 12px; }

/* ----------------------------- ФУТЕР ----------------------------- */
.site-footer { background: var(--text); color: #aebbd6; padding: 56px 0 26px; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand .bn-sub { color: var(--primary-2); }
.footer-brand p { font-size: 13.5px; max-width: 300px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col b { color: #fff; font-family: var(--font-display); font-size: 14px; margin-bottom: 4px; }
.footer-col a { font-size: 13.5px; transition: color var(--t-fast); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 26px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #7e8eb0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: #7e8eb0; transition: color var(--t-fast); }
.footer-legal a:hover { color: #fff; }

/* ------------------------- ПЛАВАЮЩАЯ CTA ------------------------- */
.float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fc-menu { display: flex; flex-direction: column; gap: 10px; }
.fc-item { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px 9px 12px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-pop); transform: translateY(8px) scale(.96); opacity: 0; animation: fcIn .3s var(--ease) forwards; }
.fc-menu:not([hidden]) .fc-item:nth-child(1) { animation-delay: .02s; }
.fc-menu:not([hidden]) .fc-item:nth-child(2) { animation-delay: .07s; }
.fc-menu:not([hidden]) .fc-item:nth-child(3) { animation-delay: .12s; }
@keyframes fcIn { to { transform: none; opacity: 1; } }
.fc-item .ic { width: 24px; height: 24px; }
.fc-tg .ic { color: #2aabee; }
.fc-wa .ic { color: #25d366; }
.fc-toggle { display: inline-flex; align-items: center; gap: 10px; background: var(--grad); color: #fff; border-radius: 999px; padding: 14px 22px; font-family: var(--font-display); font-weight: 600; font-size: 15px; box-shadow: 0 8px 24px rgba(37,99,235,.4); transition: transform var(--t-fast); }
.fc-toggle:hover { transform: translateY(-2px); }
.fc-toggle .fc-ic-close { display: none; }
.fc-toggle .ic { width: 22px; height: 22px; }
.float-cta.is-open .fc-toggle .fc-ic-open { display: none; }
.float-cta.is-open .fc-toggle .fc-ic-close { display: block; }

/* ----------------------------- МОДАЛКИ --------------------------- */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,18,38,.55); backdrop-filter: blur(3px); animation: fadeIn .25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { position: relative; width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-modal); animation: modalIn .3s var(--ease); overflow: hidden; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-x { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: var(--surface-2); transition: background var(--t-fast), color var(--t-fast); z-index: 2; }
.modal-x:hover { background: var(--bad-soft); color: var(--bad); }
.modal-head { display: flex; align-items: center; gap: 16px; padding: 26px 60px 18px 28px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 22px; }
.modal-scroll { padding: 22px 28px; overflow-y: auto; }
.modal-lead { color: var(--text-2); font-size: 15px; margin-bottom: 20px; }
.modal-scroll h4 { font-size: 16px; margin: 22px 0 12px; color: var(--primary-dark); }
.modal-list { display: flex; flex-direction: column; gap: 12px; }
.modal-list li { font-size: 14.5px; color: var(--text-2); padding-left: 18px; position: relative; }
.modal-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border: 1.5px solid var(--primary); border-radius: 2px; transform: rotate(45deg); }
.modal-list b { color: var(--text); }
.modal-list--compact li { font-size: 13.5px; }
.modal-checks { display: flex; flex-direction: column; gap: 10px; }
.modal-checks li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.modal-checks li::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; }
.modal-checks li.is-hidden { display: none; }
.modal-checks-more { margin-top: 4px; color: var(--primary); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.modal-req { display: flex; gap: 10px; margin-top: 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; font-size: 13.5px; color: var(--text-2); }
.modal-req .ic { color: var(--primary); flex: 0 0 auto; }
.modal-foot { display: flex; gap: 12px; padding: 18px 28px; border-top: 1px solid var(--border); background: var(--surface-2); }
.modal-foot .btn:last-child { margin-left: auto; }

/* инфографика C: перехват */
.intercept { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 22px; }
.ic-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; }
.ic-cap { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; margin-bottom: 10px; }
.ic-before .ic-cap { color: var(--bad); }
.ic-after .ic-cap { color: var(--ok); }
.ic-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.ic-flow > span { background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 11px; font-weight: 500; }
.ic-flow i { width: 14px; height: 2px; background: var(--text-3); border-radius: 2px; flex: 0 0 auto; }
.ic-flow .ic-danger { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.ic-flow .ic-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }

.modal--success { max-width: 440px; }
.success-body { padding: 40px 32px; text-align: center; }
.success-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); margin: 0 auto 18px; }
.success-ic .ic { width: 40px; height: 40px; stroke-width: 1.8; }
.success-body h3 { font-size: 23px; margin-bottom: 10px; }
.success-body p { color: var(--text-2); margin-bottom: 22px; }

body.modal-open { overflow: hidden; }

/* ============================ АДАПТИВ ============================ */
/* Согласованные брейкпоинты: 1040 — крупная перестройка + шапка→бургер;
   880 — добивка планшета; 560 — телефон. */
/* Узкий десктоп: меню + «Личный кабинет» + «Регистрация» ещё влезают, но плотнее. */
@media (max-width: 1460px) and (min-width: 1321px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: 0; margin-left: 0; }
  .main-nav > a { padding: 8px 9px; font-size: 13.5px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-sm { padding: 9px 12px; }
}
@media (max-width: 1320px) {
  /* шапка → бургер (меню + «Личный кабинет» + «Регистрация» перестают влезать уже при ≤1310) */
  .main-nav { display: none; }
  .burger { display: grid; place-items: center; }
  .header-actions .btn-ghost { display: none; }
  /* мобильное меню — оформленная выпадающая панель в стиле «Console» */
  .main-nav.is-open {
    display: flex; flex-direction: column;
    position: fixed; inset: calc(var(--header-h) + 8px) 10px auto 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 10px; gap: 2px;
    box-shadow: var(--shadow-modal); z-index: 79;
    max-height: calc(100dvh - var(--header-h) - 16px); overflow-y: auto;
    animation: navDrop .26s var(--ease);
  }
  .main-nav.is-open > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; font-size: 15.5px; font-weight: 500;
    color: var(--text); background: transparent; border-radius: var(--r-md);
    transition: background var(--t-fast), color var(--t-fast);
  }
  .main-nav.is-open > a::after {
    content: ""; width: 7px; height: 7px; margin-left: 12px; flex: 0 0 auto;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
    transform: rotate(-45deg); opacity: .45; transition: border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
  }
  .main-nav.is-open > a:hover, .main-nav.is-open > a:focus-visible, .main-nav.is-open > a.is-active {
    color: var(--primary-dark); background: var(--primary-soft); outline: none;
  }
  .main-nav.is-open > a:hover::after, .main-nav.is-open > a.is-active::after {
    border-color: var(--primary); opacity: 1; transform: translateX(2px) rotate(-45deg);
  }
  /* CTA-блок внизу меню */
  .main-nav.is-open .nav-cta {
    display: flex; flex-direction: column; gap: 9px;
    margin-top: 8px; padding: 14px 6px 6px; border-top: 1px solid var(--border);
  }
  .main-nav.is-open .nav-cta .btn { width: 100%; justify-content: center; padding: 13px 16px; font-size: 14.5px; }
}
@media (max-width: 1040px) {
  /* парные сетки → одна колонка (единый порог) */
  .hero-copy { max-width: none; }
  /* глобус возвращается в поток под текстом */
  .hero-globe { position: static; transform: none; height: auto; aspect-ratio: auto; width: 100%; max-width: 520px; margin: 18px auto 0; }
  .hg-stage { aspect-ratio: 1 / 1; height: auto; margin: 0 auto; }
  .hg-canvas { -webkit-mask-image: none; mask-image: none; }
  /* нижняя линия hero складывается в столбец: кнопка сверху, телеметрия под ней */
  .hero-baseline { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 26px; }
  .hero-baseline .btn-lg { width: 100%; }
  /* на мобильных телеметрия возвращается в поток (столбец под кнопкой) */
  .hero-baseline .hg-readout { position: static; top: auto; left: auto; transform: none; justify-content: space-between; }
  .scheme-grid { grid-template-columns: 1fr; gap: 24px; }
  .tab-panel.is-active { grid-template-columns: 1fr; gap: 22px; }
  .calc-pane, .calc-feature { grid-template-columns: 1fr; gap: 22px; }
  .contacts-grid { grid-template-columns: 1fr; gap: 30px; }
  .partner-layout { grid-template-columns: 1fr; }

  /* многоколоночные → меньше колонок */
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .plan-map { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .product-grid { grid-template-columns: 1fr; gap: 16px; }
  .partner-benefits { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .addon-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cred-grid { grid-template-columns: 1fr; }
  .pl-fork { flex-direction: row; }
  /* FAQ-cta: стек раньше телефонной ширины (иконка+текст+кнопка не помещались в ряд) */
  .faq-cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .faq-cta .btn { margin-left: 0; width: 100%; }
  /* калькулятор: равномерный перенос вкладок, без растяжения одиночной */
  .calc-tab { flex: 1 1 40%; }
}
@media (max-width: 560px) {
  .section { padding: 36px 0; }
  .wrap { padding: 0 18px; }
  .header-inner { gap: 12px; }
  .rw { gap: 6px; }
  .rw-arrow { width: 40px; height: 40px; }
  .hero { padding: calc(36px + var(--header-h)) 0 50px; }
  .hero-grid { margin-bottom: 24px; }
  .hero-stats { gap: 20px; }
  .hero-globe { max-width: 380px; }
  .hg-label { font-size: 11px; }
  .hg-readout { gap: 8px; }
  .hg-legend { gap: 9px; flex-shrink: 0; }
  .calc-tabs { gap: 6px; }
  .plan-map { grid-template-columns: 1fr 1fr; }
  .partner-benefits { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .site-footer { padding-bottom: 84px; } /* клиренс под плавающую кнопку */
  .lead-form, .modal-head, .modal-scroll, .modal-foot { padding-left: 20px; padding-right: 20px; }
  .modal-foot { flex-direction: column; }
  .modal-foot .btn { width: 100%; margin-left: 0; }
  .float-cta { right: 14px; bottom: 14px; }
  .fc-toggle .fc-text { display: none; }
  .fc-toggle { padding: 15px; }
  .cr-total .cr-big { font-size: 34px; }

  /* схема-фильтр: компактнее пилюли на телефоне */
  .filter-scene { aspect-ratio: 440 / 320; }
  .fs-node, .fs-out { font-size: 11px; gap: 5px; }
  .fs-node { padding: 4px 9px 4px 7px; }
  .fs-out { padding: 4px 9px; }
  .fs-node .ic, .fs-out .ic { width: 15px; height: 15px; }

  /* телефония: карточка АТС ужимается, плашка шифрования уходит вниз */
  .tv-enc { order: 3; }

  /* доп-опции: вертикальная раскладка (иконка/текст/цена в столбец) */
  .addon { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .addon-price { align-self: flex-start; }

  /* pipeline: вертикально, чевроны разворачиваются вниз */
  .pipeline { flex-direction: column; align-items: stretch; }
  .pl-step { width: 100%; }
  .pl-arrow { transform: rotate(90deg); }

  /* метрики экспертизы: меньше резерв под число */
  .metric { min-width: 64px; font-size: 24px; }
  .cred-metrics li { gap: 14px; }

  /* тач-таргеты ≥ ~40px */
  .tab-btn { min-height: 42px; }
  .lang-opt { min-height: 38px; }
}