/* ============================================================================
   Колба · ЛИМС — публичный лендинг. Самодостаточный CSS: без сборки, без CDN,
   без сетевых запросов в рантайме. Токены — дизайн-система «Колбы» (тёмная тема),
   те же, что в продуктовом SPA и в ИТ/ИБ-презентации.

   Шрифт заголовков — Manrope (SIL Open Font License 1.1), self-hosted:
   assets/manrope-*.woff2, подмножества latin и cyrillic. Внешних @import нет.
   ========================================================================== */

@font-face {
  font-family: "Kolba Display";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Kolba Display";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0b1418;
  --bg-2: #0d181d;
  --bg-spot: #050c0f;
  --bg-alt: #16262e;
  --bg-quiet: #101e25;
  --surface: #111d24;
  --surface-2: #16242c;
  --surface-3: #1c2e37;
  --ink: #eaf2f5;
  --text: #dde8ec;
  --text-2: #a9bcc6;
  --muted: #7d94a0;
  /* AA-минимум: #718994 даёт 5.06:1 на --bg и 4.63:1 на --surface. Не темнить. */
  --faint: #718994;
  --border: #213039;
  --border-2: #2c3f4a;
  --border-3: #3a505c;
  --teal: #2bb3a6;
  --teal-600: #36beb1;
  --teal-700: #5fd0c4;
  --teal-800: #8fe0d7;
  --teal-050: rgba(43, 179, 166, .12);
  --teal-100: rgba(43, 179, 166, .20);
  --teal-glow: rgba(43, 179, 166, .40);
  --green: #2bbd6b;
  --green-bg: rgba(43, 189, 107, .16);
  --green-fg: #6ee2a3;
  --red: #ef5664;
  --red-bg: rgba(239, 86, 100, .16);
  --red-fg: #ff97a1;
  --blue: #4d86f7;
  --blue-bg: rgba(77, 134, 247, .16);
  --blue-fg: #9bbcff;
  --amber: #e0992f;
  --amber-bg: rgba(224, 153, 47, .16);
  --amber-fg: #f3c277;
  --r-sm: 8px;
  --r: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .28);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .32), 0 6px 16px rgba(0, 0, 0, .28);
  --sh-3: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .50);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Kolba Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shell: 1320px;
  --header-h: 66px;
  /* Отступ от верха окна для всего, что «живёт» под липкой шапкой: якорный
     scroll-margin секций и липкие блоки внутри секций. Шапка 66px + 18px воздуха.
     Одно значение на всё — иначе якорь и липкая карточка разъедутся. */
  --sticky-top: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

/* Отступ под липкую шапку задаётся ОДИН раз — через scroll-margin у секций-якорей
   (section[id] ниже). scroll-padding-top на html сложился бы с ним в двойной зазор. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* фоновое свечение — тот же приём, что на титуле презентации; очень медленный
   дрейф, чтобы фон «дышал», но не отвлекал (только transform, без reflow) */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 16% 6%, rgba(43, 179, 166, .13), transparent 70%),
    radial-gradient(30% 30% at 88% 22%, rgba(77, 134, 247, .07), transparent 70%),
    radial-gradient(26% 26% at 70% 74%, rgba(43, 179, 166, .06), transparent 70%);
  animation: kolba-drift 78s ease-in-out infinite alternate;
}
@keyframes kolba-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) }
  to { transform: translate3d(2.5%, 1.5%, 0) }
}

img, svg { max-width: 100%; display: block }
a { color: var(--teal-700); text-decoration: none }
a:hover { color: var(--teal-800) }

:focus-visible {
  outline: 3px solid var(--teal-glow);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 99 }
.skip-link:focus { left: 12px; top: 12px }

/* ── Появление при скролле ────────────────────────────────────────────────────
   Объявлено ДО компонентных правил: иначе `.reveal.in{transform:none}` с равной
   специфичностью перебивает hover-подъём карточек, объявленный выше по файлу.
   Это реальный баг, уже пойманный на прошлой сборке лендинга — не переставлять.

   Амплитуда разная по роли элемента: заголовок секции подплывает еле заметно и
   расфокусом, рядовая карточка — обычным подъёмом, крупная панель/кадр — с более
   дальнего плана. `--i` (порядок внутри группы) проставляет initReveal → карточки
   всплывают каскадом, а не 48 штук одновременно. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.r-head { transform: translateY(8px); filter: blur(6px); transition-duration: .45s }
.js .reveal.r-panel { transform: translateY(28px) scale(.97); transition-duration: .9s }
.js .reveal.in { opacity: 1; transform: none; filter: none }

/* Hero — всегда в первом экране: «открытие по скроллу» для него бессмысленно (он и так
   виден на загрузке), а opacity:0 до простановки .in деферренным initReveal реально
   держит LCP-кадр (assets/shot-flow.webp) неотрисованным до выполнения JS — fetchpriority
   на самой картинке от этого бесполезен (SEO-волна 2026-07-29, находка code-reviewer). */
#hero .reveal { opacity: 1; transform: none; filter: none; transition: none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .js .reveal, .js .reveal.r-head, .js .reveal.r-panel { opacity: 1; transform: none; filter: none; transition: none }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Каркас и ритм секций ────────────────────────────────────────────────────
   Разный фон И разный вертикальный ритм: страница не должна читаться как одна
   бесконечная тёмная лента одинаковых блоков. */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 44px); position: relative; z-index: 1 }

section { position: relative; z-index: 1; padding: clamp(56px, 8vw, 104px) 0 }
section[id] { scroll-margin-top: var(--sticky-top) }
section.band { background: linear-gradient(180deg, rgba(17, 29, 36, 0), rgba(17, 29, 36, .55) 12%, rgba(17, 29, 36, .55) 88%, rgba(17, 29, 36, 0)) }
section.band-solid { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }
section.sec-tight { padding: clamp(44px, 5.5vw, 72px) 0 }

/* «прожектор» — заметно темнее фона страницы + тиловое свечение по центру */
section.sec-spot {
  background: var(--bg-spot);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(64px, 9vw, 128px) 0;
  overflow: hidden;
}
section.sec-spot::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 8%, rgba(43, 179, 166, .16), transparent 72%),
    radial-gradient(34% 34% at 12% 78%, rgba(43, 179, 166, .07), transparent 72%);
}

/* светлее фона — единственная «вывернутая» секция страницы */
section.sec-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-3);
  border-bottom: 1px solid var(--border-3);
  padding: clamp(52px, 7vw, 92px) 0;
}
section.sec-alt .seg-row { border-top-color: rgba(255, 255, 255, .13) }
section.sec-alt .section-lead { color: #c3d3da }

section.sec-quiet {
  background: var(--bg-quiet);
  border-top: 1px solid var(--border);
  padding: clamp(56px, 7.5vw, 100px) 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

h1, h2, h3, h4, .brand, .stat .v, .flow-title, .stage-name {
  font-family: var(--display);
}
h1 {
  /* fluid: 40px на 360px, ~56px на 1280px, потолок 76px на 1920px
     (потолок подобран под ширину колонки: выше — заголовок рвётся по 1–2 слова) */
  font-size: clamp(2.5rem, 4.4vw, 4.75rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.032em;
  line-height: 1.03;
}
h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; color: var(--ink); letter-spacing: -.024em; line-height: 1.14 }
h3 { font-size: clamp(16px, 1.5vw, 18.5px); font-weight: 700; color: var(--ink); letter-spacing: -.012em }
h4 { font-size: 13.5px; font-weight: 800; color: var(--teal-700); letter-spacing: .04em; text-transform: uppercase; margin-top: 22px }

.section-lead {
  color: var(--text-2);
  font-size: clamp(15px, 1.7vw, 19px);
  max-width: 74ch;
  margin-top: 14px;
}
.small { font-size: 13px; color: var(--muted); line-height: 1.5 }
.mono { font-family: var(--mono) }
strong, b { color: var(--ink); font-weight: 700 }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.pill.green { background: var(--green-bg); color: var(--green-fg); border: 1px solid rgba(43, 189, 107, .25) }
.pill.amber { background: var(--amber-bg); color: var(--amber-fg); border: 1px solid rgba(224, 153, 47, .25) }
/* Монохромный бейдж доверия: цветные плашки в «Колбе» несут статус, а не декор. */
.pill.flat { background: rgba(255, 255, 255, .04); color: var(--text-2); border: 1px solid var(--border-2); font-weight: 600 }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .2s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal-600), var(--teal));
  color: #04211d;
  box-shadow: 0 6px 20px rgba(43, 179, 166, .28);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(43, 179, 166, .42); color: #04211d }
.btn-primary:hover::after { left: 115% }
.btn-ghost {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  color: var(--teal-700);
  background: var(--surface-3);
  box-shadow: var(--sh-2);
}
.btn:active { transform: translateY(0) scale(.99) }
.btn-lg { font-size: 16px; padding: 15px 30px }
.btn-sm { font-size: 13.5px; padding: 8px 16px }
.btn-block { width: 100% }
/* Единственная primary-кнопка первого экрана — она обязана быть крупнее всего. */
.btn-hero { font-size: 18px; padding: 0 34px; height: 58px; letter-spacing: -.01em }

/* Блик под курсором — только на двух главных кнопках и только на «настоящей» мыши.
   Координаты подаёт JS в --mx/--my; без них блик стоит по центру и не мешает. */
@media (hover: hover) and (pointer: fine) {
  .btn-hero::before, .form-actions .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .3), transparent 65%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .btn-hero:hover::before, .form-actions .btn-primary:hover::before { opacity: 1 }
}

/* ── Шапка ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: rgba(11, 20, 24, .88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

/* Полоска прогресса чтения. Ведётся scroll-timeline'ом, без единого слушателя
   скролла; там, где таймлайна нет, полоски просто не существует (иначе она
   залипла бы на нуле и читалась как сломанная). */
@keyframes kolba-progress { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    /* 3px, а не 2px: тонкая полоска сливалась с подчёркиванием активного пункта nav
       (тот теперь и вовсе не подчёркивание, а точка — см. .site-nav a.current). */
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--teal-800));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: kolba-progress linear both;
    animation-timeline: scroll(root block);
  }
}
.header-in { display: flex; align-items: center; gap: 18px; height: var(--header-h) }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-size: 19px }
.brand:hover { color: var(--ink) }
.brand svg { width: 26px; height: 26px; flex: none }
.brand .b-sub { color: var(--faint); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px }
.site-nav a {
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .16s ease, background .16s ease;
}
.site-nav a:hover { color: var(--teal-700); background: var(--teal-050) }
/* Активный раздел (scrollspy): цвет текста + точка. Подчёркивание такой же
   толщины, как полоска прогресса чтения, читалось с ней как один элемент —
   поэтому здесь форма другая, а не другой оттенок той же линии.
   Сдвига раскладки нет: точка живёт в отрицательном нижнем margin. */
.site-nav a.current { color: var(--teal-800) }
.site-nav a.current::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 3px auto -7px;
  border-radius: 999px;
  background: var(--teal);
  animation: kolba-dot .3s var(--ease) both;
}
@keyframes kolba-dot { from { opacity: 0; transform: scale(.2) } to { opacity: 1; transform: none } }
.header-cta { display: flex; align-items: center; gap: 14px }
.nav-login { color: var(--text-2); font-size: 14.5px; font-weight: 600; white-space: nowrap }
.nav-login:hover { color: var(--teal-700) }
.nav-toggle { display: none }
/* Кнопка заявки в бургер-меню: на десктопе её роль играет кнопка шапки (.hide-sm),
   поэтому там её нет вовсе — включается только в мобильном меню (≤860px). */
.site-nav .nav-cta { display: none }
.site-nav .nav-cta::after { content: none }
/* Кнопка внутри nav попадает под `.site-nav a` — специфичность (0,1,1) перебивает
   .btn/.btn-primary (0,1,0), и кнопка теряла цвет текста (серый по бирюзовому —
   контраст ниже AA), скругление и отступы. Возвращаем их селектором (0,2,0). */
.site-nav .nav-cta, .site-nav .nav-cta:hover {
  color: #04211d;
  background: linear-gradient(135deg, var(--teal-600), var(--teal));
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14.5px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: clamp(38px, 5.5vw, 76px) 0 clamp(52px, 7vw, 96px); overflow: hidden }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
}
.hero h1 { margin-bottom: 20px }
.hero h1 .hl {
  background: linear-gradient(120deg, var(--teal-700), var(--teal-800));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { font-size: clamp(16px, 1.65vw, 19px); color: var(--text-2); max-width: 58ch }
.hero-actions { margin-top: 30px }
.cta-micro { margin-top: 12px; font-size: 13.5px; color: var(--muted); max-width: 46ch }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none }

/* Пословная сборка заголовка. Класс `split` ставит JS: без него заголовок просто
   виден (он же LCP). Анимация, а не transition, и `both` — при
   prefers-reduced-motion глобальное правило схлопывает длительность в 0.001ms,
   и слово мгновенно оказывается в КОНЕЧНОМ состоянии, то есть видимым. */
.hero h1 .w { display: inline-block }
/* Длительность СЛОВА заведомо короче шага между словами (380 vs 100 мс на слово):
   иначе появление одного слова перекрывает пять следующих, и волна читается как
   один общий blur-in всего заголовка, а не как «слова приземляются по одному». */
.hero h1.split .w {
  opacity: 0;
  transform: translateY(.45em);
  filter: blur(8px);
  animation: kolba-word .38s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}
@keyframes kolba-word { to { opacity: 1; transform: none; filter: blur(0) } }

/* Реальный кадр продукта: подрезан правым краем панели, подсвечен снизу. */
.hero-shot { position: relative; margin: 0 }
.hero-shot picture { display: block }
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 8% -6% -14% 2%;
  border-radius: 40%;
  background: radial-gradient(50% 50% at 50% 50%, var(--teal-glow), transparent 72%);
  filter: blur(38px);
  opacity: .75;
  pointer-events: none;
}
.hero-shot img {
  position: relative;
  /* Кадр задаётся высотой: по ширине он заведомо больше колонки и уходит
     за правый край экрана (обрезка правым краем — приём ux-designer).
     Исходник подрезан по содержательной полосе (1840×440): раньше файл нёс
     672px высоты, из которых нижняя треть — пустая сетка холста, и на широких
     экранах кадр читался как «одна карточка и пустота». Высота уменьшена
     пропорционально обрезке, чтобы масштаб самого кадра не изменился. */
  height: clamp(210px, 24vw, 330px);
  width: auto;
  max-width: none;
  border-radius: 14px 0 0 14px;
  border: 1px solid var(--border-2);
  border-right: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .04) inset;
  transform: perspective(1700px) rotateY(-7deg) rotateX(1.5deg);
  transform-origin: left center;
}
.hero-shot figcaption {
  position: relative;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--faint);
  max-width: 46ch;
}

/* ── Карточки ────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; margin-top: 34px }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--sh-1);
  min-width: 0;
  transition: transform .2s var(--ease), border-color .18s ease, box-shadow .22s ease, background .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--teal) 34%, var(--border));
  box-shadow: var(--sh-3);
}
.card.hl { border-color: var(--teal-100); background: linear-gradient(180deg, var(--teal-050), var(--surface) 58%) }
.card p { color: var(--text-2); font-size: 14.5px; margin-top: 8px }

.icon-chip {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--teal-050);
  color: var(--teal-700);
  box-shadow: inset 0 0 0 1px var(--teal-100);
  font-size: 21px;
  margin-bottom: 14px;
  transition: background .18s ease, transform .22s var(--ease);
}
.icon-chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.proof-item .icon-chip svg, .contact-row .icon-chip svg { width: 19px; height: 19px }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.card:hover .icon-chip { background: var(--teal-100); transform: scale(1.05) rotate(-3deg) }

/* ── Ход исследования (дифференциатор) ───────────────────────────────────── */
.flow-wrap {
  margin-top: 34px;
  background: rgba(17, 29, 36, .92);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--sh-3);
}
.flow-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 22px }
.flow-title { font-size: 15.5px; font-weight: 700; color: var(--ink) }
.flow-title span { display: block; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--faint); margin-top: 2px }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 4px; gap: 2px }
.seg button {
  font: inherit; font-weight: 700; font-size: 13px; color: var(--text-2);
  background: none; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.seg button:hover { color: var(--teal-700) }
.seg button.on { background: var(--teal); color: #04211d; box-shadow: 0 2px 12px var(--teal-glow) }
.seg button.on[data-branch="negative"] { background: var(--green); color: #032414; box-shadow: 0 2px 12px rgba(43, 189, 107, .4) }

/* Этапы соединены коннекторами: без них степпер читается как обычная сетка. */
.stage-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px }
.branch .stage-row { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.stage {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 14px;
  position: relative;
  min-width: 0;
  transition: border-color .2s ease, background .2s ease, opacity .3s ease, transform .2s var(--ease);
}
.stage:hover { transform: translateY(-2px); border-color: var(--teal) }
.stage.skipped { opacity: .55; border-style: dashed }
/* Однократный прогон при появлении секции: волна подсветки по этапам 1→4. */
.stage.lit { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-100), 0 6px 22px var(--teal-glow) }

.track .stage:not(:last-child)::before,
.track .stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  pointer-events: none;
}
/* линия в промежутке между карточками */
.track .stage:not(:last-child)::before {
  right: -28px;
  width: 28px;
  height: 2px;
  transform: translateY(-1px);
  background: linear-gradient(90deg, var(--teal), rgba(43, 179, 166, .35));
}
/* остриё стрелки у следующей карточки */
.track .stage:not(:last-child)::after {
  right: -12px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--teal);
  border-right: 2px solid var(--teal);
  transform: translateY(-50%) rotate(45deg);
}
.branch-negative .track .stage:not(:last-child)::before { background: linear-gradient(90deg, var(--green), rgba(43, 189, 107, .35)) }
.branch-negative .track .stage:not(:last-child)::after { border-color: var(--green) }

.stage-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--teal-050); border: 1px solid var(--teal-100); color: var(--teal-700);
  font-size: 12px; font-weight: 800; font-family: var(--mono);
}
.stage-n.done { background: var(--green-bg); border-color: rgba(43, 189, 107, .3); color: var(--green-fg) }
.stage-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 9px; line-height: 1.3 }
.stage-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.stage-meta span {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
  font-family: var(--mono);
}
.stage-meta span.reagent { color: var(--amber-fg); border-color: rgba(224, 153, 47, .22) }

/* Развилка: ствол → перекладина → две ноги со стрелками. */
.fork { position: relative; height: 54px; margin-top: 4px }
.fork span { position: absolute; display: block; transition: opacity .35s ease, filter .35s ease }
.fork-stem { left: 50%; top: 0; width: 2px; height: 20px; margin-left: -1px; background: var(--border-3) }
.fork-stem::after {
  content: "";
  position: absolute;
  left: -4px; bottom: -1px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--border-3);
  border-right: 2px solid var(--border-3);
  transform: rotate(135deg);
  display: none;
}
.fork-bar { left: 25%; right: 25%; top: 19px; height: 2px; background: linear-gradient(90deg, var(--green), var(--border-3) 50%, var(--teal)) }
.fork-leg { top: 19px; width: 2px; height: 35px }
.fork-leg::after {
  content: "";
  position: absolute;
  left: -4px; bottom: -1px;
  width: 8px; height: 8px;
  transform: rotate(135deg);
}
.fork-leg.leg-neg { left: 25%; background: linear-gradient(180deg, var(--green), rgba(43, 189, 107, .5)) }
.fork-leg.leg-neg::after { border-top: 2px solid var(--green); border-right: 2px solid var(--green) }
.fork-leg.leg-pos { left: 75%; background: linear-gradient(180deg, var(--teal), rgba(43, 179, 166, .5)) }
.fork-leg.leg-pos::after { border-top: 2px solid var(--teal); border-right: 2px solid var(--teal) }

.flow-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.branch {
  border-radius: var(--r);
  border: 1px dashed var(--border-2);
  padding: 16px;
  transition: opacity .35s ease, border-color .25s ease, background .25s ease, filter .35s ease;
  min-width: 0;
}
.branch-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px }
.branch-head b { font-size: 13.5px }
.branch-note { font-size: 12.5px; color: var(--text-2); margin-top: 12px; line-height: 1.45 }

#flow-demo[data-active="positive"] .branch-negative,
#flow-demo[data-active="negative"] .branch-positive { opacity: .3; filter: saturate(.25) }
/* Нога вилки гаснет вместе со своей веткой. Без этого стрелка продолжала гореть
   в погашенную ветку — переключатель выглядел неработающим наполовину.
   Ставится на сам span: ::after (остриё стрелки) наследует opacity родителя. */
#flow-demo[data-active="positive"] .fork-leg.leg-neg,
#flow-demo[data-active="negative"] .fork-leg.leg-pos { opacity: .22; filter: saturate(.25) }
#flow-demo[data-active="positive"] .branch-positive { border-color: var(--teal); border-style: solid; background: var(--teal-050) }
#flow-demo[data-active="negative"] .branch-negative { border-color: var(--green); border-style: solid; background: var(--green-bg) }

/* Ключевая фраза дифференциатора — не сноска между линеек. */
.flow-decide {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  margin: 22px 0 0; color: var(--ink); font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; letter-spacing: -.015em; text-align: center;
}
.flow-decide::before, .flow-decide::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--border-2), transparent) }

/* Развилка «прорисовывается» один раз, когда секция попала во вьюпорт. */
@keyframes kolba-grow-y { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes kolba-grow-x { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.flow-wrap.autorun .fork-stem { transform-origin: 50% 0; animation: kolba-grow-y .3s var(--ease) both; animation-delay: .72s }
.flow-wrap.autorun .fork-bar { transform-origin: 50% 50%; animation: kolba-grow-x .45s var(--ease) both; animation-delay: 1s }
.flow-wrap.autorun .fork-leg { transform-origin: 50% 0; animation: kolba-grow-y .35s var(--ease) both; animation-delay: 1.4s }

.flow-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); margin-top: clamp(30px, 4.4vw, 52px) }
.flow-facts div { font-size: 14px; color: var(--text-2) }
.flow-facts b { display: block; font-family: var(--display); color: var(--teal-700); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px }

/* ── Витрина интерфейса ──────────────────────────────────────────────────────
   Три оси (десктоп/мобильный/светлая тема), внутри оси — плёнка кадров. Кадры
   лежат в ОДНОЙ grid-ячейке, поэтому при переключении высота не прыгает: меняется
   только opacity/scale. Без JS (нет класса `js`) витрина вырождается в обычный
   вертикальный список кадров с подписями — страница остаётся полноценной. */
.showcase { margin-top: clamp(24px, 3.4vw, 38px) }
.showcase .seg-tabs, .showcase .sc-film, .showcase .sc-caption { display: none }
.showcase.js .seg-tabs { display: inline-grid }
.showcase.js .sc-film { display: flex }
.showcase.js .sc-caption { display: block }

/* Табы: скользящая пилюля вместо перекраски. */
.seg-tabs {
  position: relative;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.seg-tabs::-webkit-scrollbar { display: none }
.seg-tabs button { position: relative; z-index: 1; scroll-snap-align: center }
.seg-tabs button[aria-selected="true"] { color: #04211d }
.seg-ind {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 2px 12px var(--teal-glow);
  transition: transform .25s var(--ease), width .25s var(--ease);
  pointer-events: none;
}

.sc-stage { position: relative; margin-top: 18px }
.showcase.js .sc-stage {
  display: grid;
  /* Ровно одна ячейка с ОПРЕДЕЛЁННЫМ размером: иначе кадр раздувает строку по
     своей натуральной высоте, и height:100% у картинки резолвится по кругу. */
  grid-template: 100% / 100%;
  aspect-ratio: 2200 / 1083;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* Мобильная ось — кадр телефона показываем ростом «как в руке», а не вписываем
   в широкую рамку (иначе на узком экране он схлопнется в марку). Оба мобильных
   кадра одного размера, поэтому высота между ними всё равно не прыгает. */
.showcase.js[data-axis="mobile"] .sc-stage {
  aspect-ratio: auto;
  height: min(72vh, 620px);
  max-width: 620px;
  margin: 18px auto 0;
  padding: 22px 0;
  background:
    radial-gradient(34% 70% at 50% 50%, rgba(43, 179, 166, .16), transparent 72%),
    var(--bg-spot);
}
.showcase.js[data-axis="mobile"] .sc-film { justify-content: center }
.showcase.js[data-axis="mobile"] .sc-caption { text-align: center }
.showcase.js[data-axis="mobile"] .sc-item img {
  width: auto;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid var(--border-3);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
}

/* Шиммер под кадром, пока он грузится (класс снимает JS по событию load). */
.showcase.js .sc-stage.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .05) 40%, transparent 60%);
  background-size: 240% 100%;
  animation: kolba-shimmer 1.4s linear infinite;
}
@keyframes kolba-shimmer { from { background-position: 120% 0 } to { background-position: -120% 0 } }

.sc-item { margin: 0; min-width: 0 }
.showcase:not(.js) .sc-item + .sc-item { margin-top: 22px }
.showcase:not(.js) .sc-item img { border-radius: var(--r-lg); border: 1px solid var(--border-2); width: 100% }
.showcase:not(.js) .sc-item figcaption { margin-top: 10px; font-size: 13px; color: var(--faint) }
.showcase.js .sc-item {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.showcase.js .sc-item.on { opacity: 1; transform: none; pointer-events: auto; z-index: 1 }
.showcase.js .sc-item img { width: 100%; height: 100%; object-fit: contain; object-position: center }
.showcase.js .sc-item figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.sc-failed {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 14px;
}
.sc-item.failed img { display: none }
.showcase.js .sc-item.failed .sc-failed { display: flex }
/* Кадры вне выбранной оси не участвуют ни в раскладке, ни в табуляции. */
.showcase.js[data-axis="desktop"] .sc-item:not([data-axis="desktop"]),
.showcase.js[data-axis="mobile"] .sc-item:not([data-axis="mobile"]),
.showcase.js[data-axis="light"] .sc-item:not([data-axis="light"]),
.showcase.js[data-axis="desktop"] .sc-thumb:not([data-axis="desktop"]),
.showcase.js[data-axis="mobile"] .sc-thumb:not([data-axis="mobile"]),
.showcase.js[data-axis="light"] .sc-thumb:not([data-axis="light"]) { display: none }

.sc-film {
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.sc-thumb {
  flex: 0 0 auto;
  width: clamp(104px, 13vw, 168px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  opacity: .55;
  filter: saturate(.7);
  transition: opacity .2s ease, filter .2s ease, transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease;
}
.sc-thumb img { width: 100%; height: clamp(54px, 6.6vw, 84px); object-fit: cover; object-position: left top }
.sc-thumb span {
  display: block;
  padding: 6px 8px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-thumb:hover { opacity: 1; filter: none; transform: translateY(-3px) }
.sc-thumb.on { opacity: 1; filter: none; border-color: var(--teal); box-shadow: 0 6px 20px var(--teal-glow) }
.sc-thumb.on span { color: var(--ink) }
.sc-caption { margin-top: 12px; font-size: 13.5px; color: var(--faint) }

/* ── Сквозной процесс (бенто) ────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 34px }
.bento .card { display: flex; flex-direction: column }
.b-wide { grid-column: span 3 }
.b-third { grid-column: span 2 }
.b-half { grid-column: span 3 }
.step-no {
  font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--faint);
  letter-spacing: .1em; margin-bottom: 6px;
}

/* ── Proof-сетка ─────────────────────────────────────────────────────────── */
.proof-item { display: flex; gap: 14px; align-items: flex-start }
.proof-item .icon-chip { margin-bottom: 0; width: 38px; height: 38px; font-size: 18px }
.proof-item h3 { font-size: 15.5px }
.proof-item p { margin-top: 5px; font-size: 14px }

/* ── Доверие/безопасность (сжатая секция) ────────────────────────────────── */
.trust-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 48px); align-items: center }
.trust-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px }
.trust-cta .small { max-width: 26ch }
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px }
.stat .v { font-size: 17px; font-weight: 800; color: var(--teal-700); letter-spacing: -.015em; line-height: 1.2 }
.stat .l { color: var(--text-2); font-size: 12.5px; margin-top: 6px; line-height: 1.45 }

/* ── Стоимость ───────────────────────────────────────────────────────────── */
.price-rule { margin-top: 10px; font-size: 14.5px; color: var(--text-2) }
.model-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; margin-top: 26px; align-items: start }

/* Лестница тарифов: высота столбика — цена ЗА ОДНУ ЛАБОРАТОРИЮ (--p — доля от самой
   дорогой из них, ставится в разметке из tierBarPct). Столбики УБЫВАЮТ, и диаграмма
   тем самым показывает объёмную скидку. Высота по абсолютной сумме счёта делала
   ровно обратное: чем больше лабораторий — тем выше столбик, то есть «дороже».
   Цифры при этом продублированы ТЕКСТОМ под каждым столбиком — без CSS страница
   остаётся читаемым списком «столько лабораторий — столько евро». */
.scale-bar { display: flex; align-items: flex-end; gap: 8px; margin: 20px 0 6px; list-style: none }
.scale-step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.scale-col {
  display: block;
  /* 1.6px на процент: самый дорогой тариф = 160px, открытый конец шкалы — чуть выше */
  height: calc(var(--p, 0) * 1.6px);
  border: 1px solid var(--border-2);
  border-bottom: 2px solid var(--teal);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, rgba(43, 179, 166, .28), rgba(43, 179, 166, .06));
  transform-origin: 50% 100%;
  transition: background .2s ease, border-color .2s ease;
}
.scale-step:hover .scale-col { border-color: var(--teal); border-bottom-color: var(--teal-800) }
/* Открытый конец шкалы: столбик без верхней границы и с растворяющейся заливкой —
   он НЕ обещает конкретную сумму, он показывает «дальше считаем отдельно». */
.scale-open .scale-col {
  border-top: 0;
  border-left-style: dashed;
  border-right-style: dashed;
  background: linear-gradient(180deg, rgba(43, 179, 166, 0), rgba(43, 179, 166, .06));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
  mask-image: linear-gradient(180deg, transparent, #000 42%);
}
.scale-labs { display: block; font-size: 13px; color: var(--text-2); margin-top: 10px; line-height: 1.3; font-weight: 600 }
/* Сумма — главное число секции: раньше она была набрана 16px, то есть мельче
   лид-абзаца (19px) над ней. Кегль дисплейный, тот же, что у заголовков. */
.scale-price {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-size: clamp(20px, 1.95vw, 28px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--teal-700);
}
/* «по договору» — не число: набрано спокойнее, чтобы не спорить с суммами. */
.scale-open .scale-price { font-size: clamp(15px, 1.35vw, 19px); color: var(--text-2) }
/* Подпись цены за лабораторию — то, что показывает высота столбика. */
/* Две строки зарезервированы всегда: столбики выровнены по нижнему краю, и без
   резерва подписи на две строки поднимали свою сумму выше соседних. */
.scale-per { display: block; margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--muted); min-height: 2.7em }
@keyframes kolba-step-rise { from { transform: scaleY(.04) } to { transform: scaleY(1) } }
.reveal.in .scale-col { animation: kolba-step-rise .5s var(--ease) both }
.reveal.in .scale-step:nth-child(1) .scale-col { animation-delay: .05s }
.reveal.in .scale-step:nth-child(2) .scale-col { animation-delay: .14s }
.reveal.in .scale-step:nth-child(3) .scale-col { animation-delay: .23s }
.reveal.in .scale-step:nth-child(4) .scale-col { animation-delay: .32s }
.reveal.in .scale-step:nth-child(5) .scale-col { animation-delay: .41s }

.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 14px; list-style: none }
.incl li { position: relative; padding-left: 24px; font-size: 14px; color: var(--text-2) }
.incl li::before { content: "✓"; position: absolute; left: 0; color: var(--green-fg); font-weight: 800 }
/* «под запрос» — НЕ входит в подписку: галочка тут читалась бы как «включено» */
.incl.extra li::before { content: "+"; color: var(--amber-fg) }

.steps { list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 12px; margin-top: 16px }
.steps li { counter-increment: st; position: relative; padding-left: 34px; font-size: 14px; color: var(--text-2) }
.steps li::before {
  content: counter(st);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--teal-050); border: 1px solid var(--teal-100); color: var(--teal-700);
  font-family: var(--mono); font-size: 11.5px; font-weight: 800;
}
.card p.btn-slot { margin: 20px 0 12px }

/* Правая карточка «Что вы получите после заявки» заметно короче левой (шкала
   тарифов + два списка «входит/под запрос»). На широких экранах она залипает,
   чтобы призыв к действию оставался на виду, пока читают левую колонку, и чтобы
   под ней не зияло полэкрана пустоты. Ниже 1001px .model-grid схлопывается в одну
   колонку (см. @media max-width:1000px) — там залипание бессмысленно и правила
   просто нет: обычный поток.
   `align-self: start` уже даёт `.model-grid { align-items: start }` — растянутая
   на всю высоту строки карточка липнуть не могла бы; здесь это зафиксировано явно.
   max-height — предохранитель: если контент карточки когда-нибудь перерастёт
   экран, она не уедет низом за пределы окна, а прокрутится внутри себя. */
@media (min-width: 1001px) {
  .model-grid > .card.hl {
    position: sticky;
    top: var(--sticky-top);
    align-self: start;
    height: fit-content;
    max-height: calc(100vh - var(--sticky-top) - 24px);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* ── Гибкость: лист возможностей ─────────────────────────────────────────────
   Намеренно НЕ карточная сетка (их на странице уже достаточно): двухколоночный
   spec-sheet на волосяных линейках. Слева — кластер с номером, справа — короткие
   пункты. Никаких рамок/теней/иконок: контраст паттерна к соседним секциям. */
.capsheet { margin-top: clamp(26px, 3.6vw, 40px); border-top: 1px solid var(--border-2) }
.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(12px, 3vw, 46px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--border-2);
}
.cap-row dt { min-width: 0 }
.cap-no {
  display: block;
  font-family: var(--mono);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--faint);
  margin-bottom: 9px;
  transition: color .18s ease;
}
.cap-row:hover .cap-no { color: var(--teal-700) }
/* Волосяная линейка прочерчивается вместе с появлением строки. */
.cap-row { position: relative }
.cap-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
  opacity: .5;
}
.cap-row.in::after { transform: scaleX(1) }
.cap-row dt b {
  display: block;
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
}
.cap-hint {
  display: block;
  margin-top: 8px;
  max-width: 32ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.cap-row dd { margin: 0; min-width: 0 }
.cap-list { list-style: none; display: grid; gap: 11px }
.cap-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.cap-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}
.cap-list b { color: var(--ink) }

/* ── Сегменты ────────────────────────────────────────────────────────────────
   Намеренно НЕ ещё одна сетка одинаковых карточек: строки на волосяных линейках,
   тот же паттерн, что в «Гибкости». */
.segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: 30px }
.seg-row {
  display: flex; gap: 14px; align-items: flex-start; min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--border-3);
  transition: border-color .2s ease;
}
.seg-row .icon-chip { width: 38px; height: 38px; margin-bottom: 0; transition: background .18s ease, transform .22s var(--ease) }
.seg-row .icon-chip svg { width: 19px; height: 19px }
.seg-row:hover { border-top-color: var(--teal) }
.seg-row:hover .icon-chip { background: var(--teal-100); transform: scale(1.06) rotate(-3deg) }
.seg-row b { display: block; font-family: var(--display); font-size: 15.5px; color: var(--ink); letter-spacing: -.015em }
.seg-row p { font-size: 13.5px; color: var(--text-2); margin-top: 5px }

/* ── Форма заявки ────────────────────────────────────────────────────────── */
.cta-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 4vw, 48px); align-items: start; margin-top: 34px }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--sh-3);
}
.form-intro { margin: 6px 0 18px }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field.full { grid-column: 1 / -1 }
.field label { font-size: 13.5px; font-weight: 700; color: var(--text-2) }
.field .req { color: var(--teal-700) }
.field input, .field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.5 }
.field input::placeholder, .field textarea::placeholder { color: var(--faint) }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
  background: var(--surface-2);
}
.field.invalid input, .field.invalid textarea { border-color: var(--red) }
.field.invalid input:focus, .field.invalid textarea:focus { box-shadow: 0 0 0 3px rgba(239, 86, 100, .32) }
.err { font-size: 12.5px; color: var(--red-fg); min-height: 1em; line-height: 1.35 }

.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--teal) }
.consent label { font-size: 13px; color: var(--text-2); font-weight: 500; line-height: 1.45 }
.consent-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0 }
.consent-link { font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px }
.form-status { font-size: 13px; color: var(--amber-fg); min-height: 1.2em; margin-top: 10px }

.form-success { text-align: center; padding: 18px 6px }
.form-success .ok-mark {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--green-bg); color: var(--green-fg); font-size: 26px;
  box-shadow: inset 0 0 0 1px rgba(43, 189, 107, .3);
}
.form-success h3 { font-size: 19px }
.form-success p { color: var(--text-2); font-size: 14.5px; margin-top: 10px }
.form-success-note { margin-top: 14px }

.contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px }
.contact-row { display: flex; gap: 13px; align-items: center }
.contact-row .icon-chip { margin-bottom: 0; width: 38px; height: 38px; font-size: 17px }
.contact-row b { display: block; font-size: 14.5px }
.contact-row span { font-size: 13px; color: var(--text-2) }

/* Опора под финальным призывом: пересказ трёх фактов со страницы рядом с формой.
   Подпись блока набрана тем же капительным стилем, что колонки подвала (.footer-h)
   и факты под ходом исследования (.flow-facts b) — новых типографских правил не
   заводим. Галочка — та же, что в «Входит в подписку» (.incl li::before). */
.assure { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border) }
.assure-h {
  font-size: 12.5px; font-weight: 700; color: var(--teal-700);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.assure-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 16px }
.assure-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--text-2) }
.assure-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green-fg); font-weight: 800 }
.assure-list b { color: var(--ink); font-weight: 700 }

/* ── Липкая плашка заявки (только узкие экраны) ──────────────────────────────
   На ≤860px кнопка «Запросить демо» из шапки скрыта, а страница длиной больше
   десятка экранов: без этой плашки от hero до формы не было ни одной видимой
   точки перехода. На широких экранах плашка выключена полностью. */
.cta-dock, .cta-dock[hidden] { display: none }

/* ── Футер ───────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0 34px; position: relative; z-index: 1; background: var(--bg-2) }
/* Сетка, а не flex-wrap: при переносе flex «Контакты» уезжали под логотип, оставляя
   половину подвала пустой. Колонки: бренд — разделы — контакты. */
.footer-in { display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 28px 48px; align-items: start }
.footer-about { margin-top: 10px; max-width: 44ch }
/* Колонки подвала подписаны так же, как факты под ходом исследования (.flow-facts b):
   мелкий капительный заголовок teal-цветом — чтобы контакт не висел безымянной ссылкой. */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px }
.footer-h {
  font-size: 12.5px; font-weight: 700; color: var(--teal-700);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; margin-bottom: 2px;
}
.footer-col a { font-size: 14px; color: var(--text-2); font-weight: 600 }
.footer-col a:hover { color: var(--teal-700) }
.footer-hint { color: var(--faint); margin-top: -2px }
.footer-legal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--faint); font-size: 12.5px; line-height: 1.6 }
/* Вся фраза «Договор, SLA и реквизиты компании» — ссылка: в мелкой строке подвала
   она обязана читаться кликабельной, поэтому подчёркнута, а не только окрашена. */
.footer-legal a { color: var(--text-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.footer-legal a:hover { color: var(--teal-700) }

/* ── Страница «Документы и реквизиты» ────────────────────────────────────── */
.doc-page { padding: clamp(34px, 6vw, 64px) 0 }
.doc-page .shell { max-width: 900px }
.doc-page h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1 }
.doc-page h2 { font-size: clamp(20px, 2.4vw, 26px); margin-top: 38px }
/* Заголовок-якорь (#data — цель ссылки от чекбокса согласия) не должен уезжать
   под липкую шапку: тот же токен, что у секций лендинга. */
.doc-page h2[id] { scroll-margin-top: var(--sticky-top) }
.doc-page p { color: var(--text-2); margin-top: 12px; max-width: 78ch }
.doc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px }
.doc-row {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px;
  transition: border-color .18s ease, transform .18s var(--ease);
}
.doc-row:hover { border-color: var(--teal); transform: translateY(-2px) }
.doc-row .icon-chip { margin-bottom: 0; width: 36px; height: 36px }
.doc-row .icon-chip svg { width: 18px; height: 18px }
.doc-row b { font-size: 14.5px; color: var(--ink) }
.doc-row p { font-size: 13.5px; color: var(--text-2); margin-top: 3px }
.req-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; font-size: 14.5px }
.req-table th, .req-table td { text-align: left; padding: 12px 16px; vertical-align: top }
.req-table th { color: var(--text-2); font-weight: 600; width: 38%; white-space: nowrap }
.req-table td { color: var(--text); border-left: 1px solid var(--border) }
.req-table tr + tr th, .req-table tr + tr td { border-top: 1px solid var(--border) }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
.todo { color: var(--amber-fg); font-weight: 600 }

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

/* Между «бургер уже не показываем» и «места вдоволь» пунктам меню тесно: без этого
   сжатия названия разделов ломались на две строки и шапка вырастала вдвое.
   (Проверено: на 1024px так было и до переименования пунктов — не регрессия, но
   чинится тем же заходом.) */
@media (min-width: 861px) and (max-width: 1150px) {
  .header-in, .header-cta { gap: 10px }
  .site-nav { gap: 0 }
  .site-nav a { padding: 8px 8px; font-size: 13.5px; white-space: nowrap }
}
/* Самая тесная полоса: бургер ещё не включился, а пять пунктов + кнопка + «Войти»
   уже не влезали — шапка выезжала за правый край и давала горизонтальный скролл. */
@media (min-width: 861px) and (max-width: 980px) {
  .brand .b-sub { display: none }
  .site-nav a { padding: 8px 6px; font-size: 13px }
  .header-cta .btn.btn-sm { padding: 8px 13px }
}

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr }
  /* Текст первым — на мобильном первый экран не должен быть картинкой без слов. */
  .hero-copy { order: 1 }
  .hero-shot { order: 2; margin-top: 12px }
  /* Кадр целиком на узком экране нечитаем — показываем его левую часть
     кропом по высоте: остаётся видно, что это реальный редактор хода. */
  .hero-shot img {
    width: 100%;
    height: clamp(210px, 30vw, 280px);
    object-fit: cover;
    object-position: left top;
    border-radius: 14px;
    border-right: 1px solid var(--border-2);
    transform: none;
  }
  .hero-shot::before { inset: 10% 0 -10% 0 }
  .g3, .segments { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .b-wide, .b-half { grid-column: span 6 }
  .b-third { grid-column: span 3 }
  .model-grid, .cta-grid, .trust-in { grid-template-columns: 1fr }
  .flow-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  /* Заголовок кластера встаёт над списком — колонка 300px больше не помещается. */
  .cap-row { grid-template-columns: 1fr; gap: 14px }
  .cap-hint { max-width: 62ch }
}

@media (max-width: 860px) {
  /* Три колонки подвала в строку уже не помещаются: бренд занимает всю ширину,
     «Разделы» и «Контакты» встают парой под ним. */
  .footer-in { grid-template-columns: 1fr 1fr }
  .footer-brand { grid-column: 1 / -1 }
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    padding: 10px;
    display: none;
  }
  .site-nav.open { display: flex }
  .site-nav a { padding: 11px 14px; border-radius: var(--r-sm) }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 42px; height: 38px;
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm);
    color: var(--text); cursor: pointer; font-size: 17px;
  }
  /* только вторичная кнопка лендинга; на documents.html кнопки шапки нужны */
  .header-cta .btn.hide-sm { display: none }
  /* …а её роль в раскрытом бургер-меню берёт на себя эта кнопка. */
  .site-nav .nav-cta { display: inline-flex; margin-top: 6px }

  .cta-dock:not([hidden]) {
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px 9px 16px;
    border-radius: 999px;
    background: rgba(13, 24, 29, .93);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-2);
    box-shadow: var(--sh-3);
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s var(--ease), opacity .28s ease;
  }
  .cta-dock.on { transform: none; opacity: 1; pointer-events: auto }
  .cta-dock-txt {
    font-size: 13px; font-weight: 600; color: var(--text-2);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cta-dock .btn { flex: none }
  /* Плашка висит поверх страницы — подвалу нужен запас, чтобы она не накрыла
     последнюю строку. Запас только там, где плашка реально есть: на
     documents.html её нет, и лишней пустоты внизу быть не должно. */
  body:has(.cta-dock:not([hidden])) .site-footer { padding-bottom: 92px }
  .stage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .flow-split { grid-template-columns: 1fr }
  /* ветки встали друг под друга — вилка вырождается в одну стрелку вниз */
  .fork { height: 34px }
  .fork-stem { height: 28px }
  .fork-stem::after { display: block }
  /* `.fork span { display: block }` выше по файлу — специфичность (0,1,1), поэтому
     селектор из одного класса её НЕ перебивал: перекладина и ноги оставались видимы
     на телефоне, хотя ветки уже стоят друг под другом и вилке там взяться неоткуда.
     Добавлен родительский класс — специфичность (0,2,0). */
  .fork .fork-bar, .fork .fork-leg { display: none }
}

@media (max-width: 640px) {
  .shell { padding: 0 16px }
  .g2, .g3, .segments, .stat-row { grid-template-columns: 1fr }
  .b-third, .b-half, .b-wide { grid-column: span 6 }
  .form-grid { grid-template-columns: 1fr }
  .incl { grid-template-columns: 1fr }
  .flow-facts { grid-template-columns: 1fr }
  .footer-in { grid-template-columns: 1fr; gap: 26px }
  /* На телефоне пять столбиков в строку сжали бы «€100 000» до нечитаемого огрызка.
     Лестница кладётся набок: строка «сколько лабораторий — сколько евро», а метафора
     роста сохраняется полосой, ширина которой — та же доля --p. */
  .scale-bar { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 16px }
  .scale-step {
    /* колонка стала строкой: flex:1 1 0 из десктопного правила схлопнул бы высоту в ноль */
    flex: 0 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    text-align: left;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    overflow: hidden;
  }
  /* Полоса меры — по НИЖНЕЙ кромке строки, а не заливкой под текстом: заливка
     обрывалась ровно посреди слова и читалась как дефект вёрстки. */
  .scale-col {
    position: absolute;
    inset: auto auto 0 0;
    height: 3px;
    /* 0.85 % на процент: даже самый дорогой тариф не заливает строку целиком,
       и открытый конец шкалы (112) остаётся заметно длиннее последнего тарифа */
    width: min(100%, calc(var(--p, 0) * .85%));
    border: 0;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, rgba(43, 179, 166, .45), var(--teal));
    transform-origin: 0 50%;
  }
  .scale-open .scale-col {
    background: linear-gradient(90deg, rgba(43, 179, 166, .45), rgba(43, 179, 166, 0));
    -webkit-mask-image: none;
    mask-image: none;
  }
  .scale-labs, .scale-price { position: relative; margin-top: 0 }
  .scale-labs { font-size: 13.5px; color: var(--ink) }
  .scale-price { font-size: 19px; white-space: nowrap }
  .scale-open .scale-price { font-size: 14.5px }
  /* Третий элемент строки-грида: подпись «за лабораторию» встаёт под парой
     «сколько лабораторий — сколько евро», а не ломает две колонки. */
  .scale-per { position: relative; grid-column: 1 / -1; margin-top: 2px; font-size: 11.5px }
  @keyframes kolba-step-rise-x { from { transform: scaleX(.04) } to { transform: scaleX(1) } }
  .reveal.in .scale-col { animation-name: kolba-step-rise-x }
  /* Кроп hero для узкой ширины уже кадрирован в самом файле — не режем повторно. */
  .hero-shot img { height: auto; object-fit: fill }
  .hero-actions .btn, .form-actions .btn { width: 100% }
  .btn-hero { padding: 0 20px; font-size: 16.5px }
  .flow-head { flex-direction: column; align-items: flex-start }
  .seg { width: 100% }
  .seg button { flex: 1 1 0; padding: 9px 8px }
  .req-table th { width: auto; white-space: normal }
  /* На узком экране логотип и так ведёт на главную — вторая кнопка лишняя. */
  .header-cta .btn.hide-xs { display: none }
  .eyebrow { font-size: 11.5px; padding: 4px 12px; letter-spacing: .03em }

  /* один столбец — коннекторы разворачиваются вертикально */
  .stage-row, .branch .stage-row { grid-template-columns: 1fr; gap: 26px }
  .track .stage:not(:last-child)::before {
    right: auto; left: 50%; top: auto; bottom: -26px;
    width: 2px; height: 26px; transform: translateX(-1px);
    background: linear-gradient(180deg, var(--teal), rgba(43, 179, 166, .35));
  }
  .branch-negative .track .stage:not(:last-child)::before { background: linear-gradient(180deg, var(--green), rgba(43, 189, 107, .35)) }
  .track .stage:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: -14px;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 400px) {
  .brand .b-sub { display: none }
  .pill { white-space: normal }
}