/* ==========================================================================
   Constanta AI Integrator — design system
   Нейтральная база + один акцент (синий #2F46FF из фирменного знака «C-бот»).
   Цветом кодируется только смысл: действие, статус, «до/после».
   ========================================================================== */

/* --- 0a. Шрифты со своего домена ---------------------------------------- */

/* Раздаём сами, а не с fonts.gstatic.com: это минус DNS и TLS до двух чужих
   доменов на каждой первой загрузке. На мобильном интернете — а он здесь
   основной — это заметнее, чем размер самих файлов.
   Взяты только cyrillic, cyrillic-ext (там живут кыргызские ң ө ү) и latin;
   греческий, вьетнамский и latin-ext не нужны и не скачиваются.
   Обновлять скриптом из DEPLOY.md, а не руками. */

/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/golos-text-400-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/golos-text-400-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/golos-text-400-600-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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(assets/fonts/geologica-400-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(assets/fonts/geologica-400-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(assets/fonts/geologica-400-500-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/pt-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/pt-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/pt-mono-400-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;
}

/* --- 0. Метрики запасных шрифтов --------------------------------------- */

/* Пока грузится дисплейная гарнитура, текст рисуется системной. Без поправки
   заголовок первого экрана дёргается на всю разницу ширин в момент подмены.
   size-adjust растягивает запасной до тех же метрик, и подмена проходит
   незаметно. Пересчитывать при смене шрифта:
   size-adjust = ширина(основной) / ширина(запасного), замер — в браузере. */
@font-face {
  font-family: "Geologica Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  /* Замерено в браузере на строке заголовка 43px: Geologica 941.6px против
     932.7px у Helvetica Neue. Прежняя Unbounded была шире системной на 35% —
     заголовок первого экрана переставал прыгать только благодаря поправке
     128%. Теперь подмена почти незаметна и без неё. */
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
  font-display: swap;
}

/* PT Mono — моноширинная, и системные моноширинные к ней близки по ширине
   знака (Menlo и Roboto Mono дают 0.600–0.602em против 0.600 у PT Mono). */
@font-face {
  font-family: "PT Mono Fallback";
  src: local("Menlo"), local("Roboto Mono"), local("Consolas"), local("DejaVu Sans Mono");
  size-adjust: 100%;
  ascent-override: 88%;
  descent-override: 24%;
  line-gap-override: 0%;
  font-display: swap;
}

/* Golos Text шире системного всего на 4% — поправка мелкая, но на длинных
   русских абзацах это всё равно несколько строк перевёрстки. */
@font-face {
  font-family: "Golos Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  size-adjust: 104%;
  font-display: swap;
}

/* --- 1. Токены --------------------------------------------------------- */

:root {
  /* Нейтрали. Холодный графит с оттенком синего знака, а не чистый серый. */
  --bg:            #f7f8fc;
  --bg-sunk:       #eef0f6;
  --surface:       #ffffff;
  --surface-2:     #f3f4f9;
  --line:          #e1e4ee;
  --line-strong:   #cbd0de;

  --ink:           #0b1026;
  --body:          #3a3f55;
  --muted:         #52576d;
  --faint:         #60657b;

  /* Единственный акцент — синий знака. */
  --accent:        #2f46ff;
  --accent-ink:    #1f30c7;
  --accent-soft:   #eceffe;
  --accent-line:   #d0d6fe;
  --on-accent:     #ffffff;

  /* Ночная панель первого экрана. Не переопределяется в тёмной теме:
     это не «поверхность», а изображение ночи — оно одинаково в обеих. */
  --night:            #0b1026;
  --night-2:          #151b3a;
  --night-line:       #252c4f;
  --night-line-strong:#363e66;
  --night-ink:        #eef0fa;
  --night-body:       #c0c5da;
  --night-muted:      #9ca2bf;
  --night-faint:      #8a91b0;
  --accent-lit:       #7486ff;
  /* Пузырь ответа лежит на всегда-тёмной панели и не переворачивается по теме:
     это сам синий знака, с белым текстом 6.1:1. */
  --accent-deep:      #2f46ff;
  --night-on-accent:  #ffffff;
  --ok-lit:           #6fae82;

  /* Семантика: только для статусов, приглушённая. */
  --ok:            #3f7a52;
  --ok-soft:       #e8f0e9;
  /* Тот же приём, что у --accent / --accent-ink: сам цвет статуса годится для
     точки и рамки, но как ТЕКСТ на своей же подложке даёт 4.39:1 — ниже
     порога. Для надписей берётся затемнённый вариант. */
  --ok-ink:        #356843;
  --warn:          #8a6a1f;

  /* Форма */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 16, 38, .05);
  --shadow-md: 0 2px 4px rgba(11, 16, 38, .04), 0 12px 28px -12px rgba(11, 16, 38, .16);
  --shadow-lg: 0 4px 8px rgba(11, 16, 38, .05), 0 28px 60px -24px rgba(11, 16, 38, .22);

  /* Ритм */
  --gutter:  clamp(20px, 5vw, 48px);
  --section: clamp(72px, 9vw, 132px);
  --maxw:    1180px;

  /* Шрифты. Три роли, кириллица родная во всех трёх.
     --display широкий и геометричный, поэтому включается только на h1/h2 и крупных
     числах: в абзаце он нечитаем. Основной текст держит Golos Text (Паратайп),
     он рисовался под русский, а не под латиницу с доклеенной кириллицей. */
  --font:    "Golos Text", "Golos Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Geologica", "Geologica Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "PT Mono", "PT Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Высота строки цены. Общая для всех трёх тарифов — см. .plan-price. */
  --price-h: 92px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Вход — всегда ease-out: быстрое начало и мягкая остановка читаются как
     отзывчивость. ease-in на входе читается как «интерфейс тормозит». */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 64px;

  color-scheme: light;
}

/* Тёмная тема: и по системе, и по явному переключателю. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0b1026;
    --bg-sunk:     #070a1a;
    --surface:     #10152f;
    --surface-2:   #151b38;
    --line:        #232a4a;
    --line-strong: #333b5f;

    --ink:         #eef0f8;
    --body:        #c2c6d6;
    --muted:       #9ca1b6;
    --faint:       #878ca3;

    --accent:      #7486ff;
    --accent-ink:  #9ba8ff;
    --accent-soft: #161d48;
    --accent-line: #2b3575;
    --on-accent:   #0b1026;

    --ok:          #6fae82;
    --ok-soft:     #17251b;
    --ok-ink:      #7fbc91;
    --warn:        #c9a04a;

    --shadow-sm: none;
    --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, .7);
    --shadow-lg: 0 28px 60px -26px rgba(0, 0, 0, .8);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:          #0b1026;
  --bg-sunk:     #070a1a;
  --surface:     #10152f;
  --surface-2:   #151b38;
  --line:        #232a4a;
  --line-strong: #333b5f;

  --ink:         #eef0f8;
  --body:        #c2c6d6;
  --muted:       #9ca1b6;
  --faint:       #878ca3;

  --accent:      #7486ff;
  --accent-ink:  #9ba8ff;
  --accent-soft: #161d48;
  --accent-line: #2b3575;
  --on-accent:   #0b1026;

  --ok:          #6fae82;
  --ok-soft:     #17251b;
  --ok-ink:      #7fbc91;
  --warn:        #c9a04a;

  --shadow-sm: none;
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 28px 60px -26px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* --- 2. Сброс и база --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

/* Крупная типографика — на широком гротеске, мелкая остаётся на текстовом:
   Дисплейная ниже ~1.3rem начинает мешать читать. */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.035em;
}
h1 strong, h2 strong, .display strong { font-weight: 500; }

p { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  transition: top .18s var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* Двуязычность: показывается только активный язык.
   Селектор намеренно удвоен ([data-lang][data-lang]) — так правило переигрывает
   любой одиночный класс компонента, который задаёт свой display. Иначе языки
   протекают друг сквозь друга там, где на элементе висит и класс, и data-lang. */
[data-lang][data-lang] { display: none; }
[data-lang][data-lang].lang-active { display: inline; }
h1[data-lang][data-lang].lang-active,
h2[data-lang][data-lang].lang-active,
h3[data-lang][data-lang].lang-active,
h4[data-lang][data-lang].lang-active,
p[data-lang][data-lang].lang-active,
label[data-lang][data-lang].lang-active,
div[data-lang][data-lang].lang-active { display: block; }

/* Контейнер SVG-символов: он невидим, но должен быть вне потока.
   Раньше это задавалось атрибутом style — строгий CSP такие атрибуты
   запрещает, поэтому оформление живёт здесь. */
.svg-defs { position: absolute; }

/* Атрибут hidden должен побеждать всегда. Трём компонентам их собственный
   display перебивал его, и они висели на экране, когда не должны были:
   кнопка «наверх» — на самом первом экране, пустая розовая плашка расчёта —
   в форме заявки, а сама форма — рядом с сообщением «Заявка получена»
   после отправки. Правило одно на всех, чтобы следующий компонент со
   своим display: flex не повторил ту же ошибку. */
[hidden] { display: none !important; }

/* --- 3. Примитивы разметки --------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section); }
.section-alt { background: var(--bg-sunk); }

.section-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 {
  font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.9rem);
  margin-block: 14px 0;
}
.section-head p {
  margin-top: 18px;
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  color: var(--muted);
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .mark-glyph { color: var(--accent); flex: none; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }
.nowrap { white-space: nowrap; }

.grid { display: grid; gap: 1px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* Сетка карточек как единое полотно с волосяными линиями между ними. */
.card-canvas {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* --- 4. Кнопки --------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .938rem;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--accent-ink); }
.btn:active { transform: translateY(1px); }

.btn-lg { padding: 14px 26px; font-size: 1rem; }

.btn-secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--muted);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-invert {
  --btn-bg: var(--ink);
  --btn-fg: var(--bg);
}
.btn-invert:hover { background: var(--ink); opacity: .86; }

.btn[disabled] { opacity: .5; pointer-events: none; }

/* Текстовая ссылка со стрелкой. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink);
  font-weight: 500;
  font-size: .938rem;
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --- 5. Знак Constanta как элемент системы ----------------------------- */

.mark-glyph { display: inline-block; vertical-align: middle; }

.mark-watermark {
  position: absolute;
  color: var(--accent);
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}

/* --- 6. Шапка ---------------------------------------------------------- */

.progress-rail {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .08s linear;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.site-header > .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.018em;
  flex: none;
}
.brand img { width: 24px; height: 24px; border-radius: 6px; }
.brand-name { font-size: .975rem; }
.brand-short { display: none; font-size: .975rem; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
.nav-links a {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.is-current { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.lang-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.lang-switch button {
  padding: 4px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font-family: var(--mono);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn .icon-moon { display: none; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: block; }
:root[data-theme="dark"] .icon-btn .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .icon-moon { display: block; }
  :root:not([data-theme="light"]) .icon-btn .icon-sun { display: none; }
}

.header-wa:hover { color: #25a566; border-color: #25a566; }

.header-cta { padding: 8px 16px; font-size: .875rem; }
/* «Войти» — для тех, кто уже клиент. Контурная, а не залитая: залитая кнопка
   в шапке одна, и это «Начать бесплатно» для новых. Высота — как у соседних
   значков, чтобы ряд не прыгал по вертикали. */
.header-login { padding: 7px 14px; font-size: .875rem; min-height: 34px; }
/* Значок человека — только на узком экране, где подпись не помещается. */
.header-login-icon { display: none; flex: none; }
.nav-toggle { display: none; }

/* Мобильное меню */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  padding: 24px var(--gutter) 40px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 500;
}
.mobile-nav .btn { margin-top: 24px; }
/* «Войти» открывает меню, а не замыкает его: на телефоне десять пунктов
   не помещаются в экран, и кнопка внизу оказывалась под сгибом. Рамку
   возвращаем целиком — правило .mobile-nav a выше перекрашивает нижнюю
   в цвет разделителей. */
.mobile-nav .menu-top { display: flex; gap: 8px; margin-bottom: 12px; }
.mobile-nav .menu-login { flex: 1; margin: 0; border-color: var(--line-strong); }
/* Переключатель темы в меню нужен только там, где его нет в шапке (<480px).
   Квадрат по высоте соседней кнопки: ряд читается как одна строка. */
.mobile-nav .menu-theme { display: none; width: auto; height: auto; aspect-ratio: 1; flex: none; }

/* --- 7. Первый экран --------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 116px);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90ch 60ch at 78% -10%, var(--accent-soft), transparent 62%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 104px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 104px 100%;
  opacity: .4;
  mask-image: radial-gradient(120ch 70ch at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120ch 70ch at 50% 0%, #000 20%, transparent 78%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.85rem, 1.05rem + 2.5vw, 2.7rem);
  letter-spacing: -.045em;
  line-height: 1.13;
  hyphens: none;
  margin-block: 22px 0;
  text-wrap: initial;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero .lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.02rem, .96rem + .34vw, 1.19rem);
  color: var(--muted);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Стрелка «наружу»: кнопка уводит со страницы в панель, а не прокручивает
   к разделу ниже, — это стоит видеть до нажатия. */
.hero-connect svg { flex: none; margin-right: -4px; }

/* Снятие риска под кнопкой — мелко и тихо: это ответ на вопрос, который
   возникает в момент нажатия, а не ещё один призыв. */
.hero-note {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--faint);
}

/* Подписка в Instagram на первом экране — ссылка, а не кнопка: рядом уже
   две кнопки, третья спорила бы с «Начать бесплатно». Акцентом окрашен
   только значок, подчёркивание появляется по наведению, как у цены ниже. */
.ig-follow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 12px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s var(--ease);
}
.ig-follow svg { flex: none; color: var(--accent); }
.ig-follow:hover { border-bottom-color: var(--accent-line); }
.ig-follow:focus-visible,
.ig-card:focus-visible,
.foot-ig:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.ig-handle { font-size: .781rem; font-weight: 400; color: var(--faint); }

/* Четыре показателя, а не три: цена добавилась на первый экран. Сетка 2×2
   вместо переноса по строке — при переносе четвёртый пункт оставался один
   на второй строке и читался как приписка, а это самый важный из четырёх. */
.trust-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px clamp(20px, 3vw, 40px);
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 520px;
}
.trust-item { display: flex; flex-direction: column; gap: 3px; }
.trust-item .n {
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.trust-item .l { font-size: .82rem; color: var(--muted); max-width: 22ch; line-height: 1.4; }

/* Цена — единственный показатель в ряду, по которому можно кликнуть, поэтому
   она и выглядит иначе: подчёркивание появляется только по наведению, чтобы
   в спокойном состоянии ряд читался как один блок цифр. */
.trust-item.is-price .n {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .16s var(--ease);
}
.trust-item.is-price .n:hover { border-bottom-color: var(--accent-line); }
.trust-item.is-price .n:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Подпись первого экрана — «ночная смена».
   Панель всегда тёмная, в обеих темах: это буквально ночь, когда офис закрыт,
   а линия отвечает. Заодно даёт странице ритм свет/тень вместо сплошной бумаги. */
.nightshift {
  position: relative;
  animation: ns-panel .7s var(--ease) both .1s;
  border: 1px solid var(--night-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60ch 30ch at 88% -10%, rgba(47, 70, 255, .28), transparent 70%),
    var(--night);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--night-body);
  isolation: isolate;
}

.ns-chrome {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--night-line);
  font-family: var(--mono);
  font-size: .688rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--night-faint);
}
.ns-channel { color: var(--night-muted); }
.ns-clock {
  margin-left: auto;
  color: var(--night-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.ns-live {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok-lit);
  flex: none;
}
.ns-live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--ok-lit);
  animation: dot-pulse 2.4s var(--ease) infinite;
}

/* Выбор ниши — это не декоративный таб-бар: посетитель находит здесь свой бизнес. */
.ns-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--night-line);
}
.ns-picker-label {
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--night-faint);
}
.ns-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-chip {
  padding: 7px 13px;
  border: 1px solid var(--night-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--night-muted);
  font-size: .781rem;
  line-height: 1.3;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.ns-chip:hover { color: var(--night-ink); border-color: var(--night-line-strong); }
.ns-chip.is-on {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--night-on-accent);
}
.ns-chip:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }

/* Высота зафиксирована: при смене ниши первый экран не должен прыгать. */
.ns-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  /* Высота фиксирована, а не минимальна: шагов теперь до шести, и растущая
     лента двигала бы всё, что под панелью. Лента прокручивается сама, как
     настоящая переписка, — ни одного сдвига вёрстки за весь сценарий. */
  height: 396px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--night-line-strong) transparent;
}
.ns-thread::-webkit-scrollbar { width: 6px; }
.ns-thread::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--night-line-strong);
}

.ns-msg {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: var(--r-md);
  font-size: .875rem;
  line-height: 1.5;
  animation: ns-in .42s var(--ease) both;
}
.ns-msg-in {
  align-self: flex-start;
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-bottom-left-radius: var(--r-xs);
  color: var(--night-ink);
}
.ns-msg-out {
  align-self: flex-end;
  background: var(--accent-deep);
  border-bottom-right-radius: var(--r-xs);
  color: var(--night-on-accent);
}
.ns-who {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

/* На синем пузыре запаса яркости меньше, чем на тёмной подложке:
   при .72 подпись даёт 3.9:1 — ниже порога. Здесь приглушаем слабее (5.2:1). */
.ns-msg-out .ns-who { opacity: .9; }

/* «Печатает…» — та же геометрия, что у входящего пузыря, чтобы лента не дёргалась. */
.ns-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 14px 15px;
  border: 1px solid var(--night-line);
  border-radius: var(--r-md);
  border-bottom-left-radius: var(--r-xs);
  background: var(--night-2);
  animation: ns-in .3s var(--ease) both;
}
.ns-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--night-faint);
  animation: ns-blink 1.25s ease-in-out infinite;
}
.ns-typing i:nth-child(2) { animation-delay: .18s; }
.ns-typing i:nth-child(3) { animation-delay: .36s; }

/* Итог диалога: то, что в реальности уезжает менеджеру в CRM. */
.ns-card {
  margin-top: 3px;
  padding: 13px 14px;
  border: 1px solid var(--night-line-strong);
  border-radius: var(--r-md);
  background: var(--night-2);
  animation: ns-in .45s var(--ease) both;
}
.ns-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: .656rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.ns-card-title svg { color: var(--ok-lit); flex: none; }
.ns-rows { display: grid; gap: 7px; margin: 0; }
.ns-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: .812rem;
}
.ns-row dt { color: var(--night-muted); }
.ns-row dd { margin: 0; color: var(--night-ink); font-weight: 500; text-align: right; }

.ns-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--night-line);
  font-size: .656rem;
}
.ns-verdict {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--night-faint);
  min-height: 1em;
}
.ns-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--night-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--night-muted);
  font-size: .75rem;
  cursor: pointer;
  flex: none;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.ns-replay:hover { color: var(--night-ink); border-color: var(--night-line-strong); }
.ns-replay:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }

/* Живой демо-бот в той же панели. Режим — класс .is-live у .nightshift:
   в «Живом боте» нет часов и анимационного подвала, в «Примере» — поля ввода.
   Цветы есть только в примере, стоматология и вода — только живыми. */
.nightshift.is-live .nsd-only-example,
.nightshift:not(.is-live) .nsd-only-live { display: none; }
.nightshift.nsd-unavailable .nsd-modes { display: none; }
/* Под лентой живого чата ещё подсказки и поле ввода: лента ниже, панель — той же высоты. */
.nightshift.is-live .ns-thread { height: 300px; }
.ns-chrome { flex-wrap: wrap; row-gap: 6px; }

.nsd-modes {
  display: inline-flex;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--night-line);
  border-radius: var(--r-pill);
  text-transform: none;
  letter-spacing: 0;
}
.nightshift:not(.is-live) .nsd-modes { margin-left: auto; margin-right: 4px; }
.nsd-mode {
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--night-muted);
  font: inherit;
  font-size: .719rem;
  cursor: pointer;
}
.nsd-mode.is-on { background: var(--night-2); color: var(--night-ink); }
.nsd-mode:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 1px; }

/* Ответ бота — слева, вопрос посетителя — справа, как в любом мессенджере. */
.nsd-me { align-self: flex-end; }
.nsd-bot { align-self: flex-start; white-space: pre-line; }
/* Строка «Это демо: …» — не реплика бота, а пояснение к ней: как действие в системе. */
.nsd-demo-line { color: var(--night-muted); }
.nsd-error { color: var(--night-muted); font-size: .812rem; align-self: stretch; text-align: center; }

.nsd-foot {
  display: grid;
  gap: 9px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--night-line);
}
.nsd-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.nsd-suggest button {
  padding: 6px 11px;
  border: 1px dashed var(--night-line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--night-body);
  font-size: .781rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.nsd-suggest button:hover { color: var(--night-ink); border-color: var(--accent-lit); }
.nsd-suggest button:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }
.nsd-form { display: flex; gap: 8px; }
.nsd-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--night-line-strong);
  border-radius: var(--r-md);
  background: var(--night-2);
  color: var(--night-ink);
  font: inherit;
  font-size: 16px; /* меньше 16px iOS увеличивает страницу при фокусе */
}
.nsd-form input::placeholder { color: var(--night-faint); }
.nsd-form input:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 1px; }
.nsd-send {
  display: inline-grid;
  place-items: center;
  width: 44px;
  flex: none;
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent-deep);
  color: var(--night-on-accent);
  cursor: pointer;
}
.nsd-send:disabled { opacity: .55; cursor: default; }
.nsd-send:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }
.nsd-status { display: flex; align-items: center; gap: 10px; }
.nsd-note {
  font-size: .656rem;
  letter-spacing: .05em;
  line-height: 1.4;
  color: var(--night-faint);
}

/* «Попробовать бота» на первом экране и в карточках продуктов. */
.try-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-right: 18px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s var(--ease);
}
.try-link svg { flex: none; }
.try-link:hover { border-bottom-color: var(--accent-line); }
.try-link:focus-visible,
.try-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.try-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.try-row-label {
  width: 100%;
  font-size: .656rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.try-chip {
  padding: 5px 11px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: .781rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .16s var(--ease);
}
.try-chip:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

@keyframes ns-panel {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ns-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ns-blink {
  0%, 60%, 100% { opacity: .3; }
  30%           { opacity: 1; }
}

.dot-live {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.dot-live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  opacity: .5;
  animation: dot-pulse 2.4s var(--ease) infinite;
}
@keyframes dot-pulse {
  0%   { transform: scale(.7); opacity: .6; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.dot-idle {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}


/* --- 7b. Ночная смена: голос, фото, действие, передача ------------------ */

/* Диалог перестал быть парой «вопрос — ответ»: теперь он показывает то,
   за что человек платит, — ассистент слышит голосовое, смотрит в систему,
   ставит бронь и вовремя зовёт живого мастера. Каждый вид шага выглядит
   по-своему, иначе действие не отличить от реплики. */

/* Голосовое клиента. Волна нарисована элементами: картинка ради полутора
   десятков полосок — лишний запрос и лишний вес. */
.ns-voice {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ns-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  flex: 1 1 auto;
  min-width: 0;
}
.ns-wave i {
  flex: 1 1 auto;
  min-width: 2px;
  max-width: 3px;
  border-radius: 2px;
  background: var(--night-faint);
  height: 30%;
}
.ns-wave i:nth-child(3n)   { height: 72%; }
.ns-wave i:nth-child(4n)   { height: 46%; }
.ns-wave i:nth-child(5n+2) { height: 96%; }
.ns-wave i:nth-child(7n+1) { height: 58%; }
.ns-play {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--night-line-strong);
  -webkit-mask: none;
  position: relative;
}
.ns-play::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--night-ink);
}
.ns-dur {
  flex: none;
  font-family: var(--mono);
  font-size: .656rem;
  color: var(--night-muted);
  font-variant-numeric: tabular-nums;
}
/* Расшифровка под волной — то, что WhatsApp показывает сам, и то, из чего
   ассистент понимает просьбу. Без неё пузырь пустой. */
.ns-transcript {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--night-line);
  font-size: .812rem;
  line-height: 1.5;
  color: var(--night-body);
}

/* Фото клиента. Кадр рисуется градиентом: настоящая фотография чужого
   букета на сайте была бы стоком, а сток здесь считывается мгновенно. */
.ns-photo {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ns-frame {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--night-line-strong);
  background:
    radial-gradient(circle at 32% 34%, color-mix(in srgb, var(--accent-lit) 55%, transparent), transparent 58%),
    radial-gradient(circle at 68% 62%, color-mix(in srgb, var(--ok-lit) 40%, transparent), transparent 55%),
    var(--night-2);
}
.ns-photo-cap {
  font-family: var(--mono);
  font-size: .656rem;
  letter-spacing: .05em;
  color: var(--night-muted);
}

/* Действие ассистента в системе. Это не реплика: пузыря нет, строка идёт
   во всю ширину и приглушена — так видно, что произошло между сообщениями. */
.ns-tool {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: stretch;
  padding: 3px 2px;
  font-family: var(--mono);
  font-size: .688rem;
  line-height: 1.45;
  color: var(--night-muted);
  animation: ns-in .34s var(--ease) both;
}
.ns-tool::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: var(--accent-lit);
  -webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h4l3 7 4-15 2.5 8H20'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h4l3 7 4-15 2.5 8H20'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Пока действие идёт, строка дышит — но ровно один цикл на шаг, а не вечно. */
.ns-tool.is-running::before { animation: ns-pulse 1s var(--ease) 2; }

@keyframes ns-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Передача человеку. Зелёная кромка, потому что это единственный шаг,
   где ассистент останавливается — и это хорошая новость, а не сбой. */
.ns-msg-handoff {
  align-self: stretch;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--ok-lit) 45%, var(--night-line));
  border-left: 2px solid var(--ok-lit);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ok-lit) 9%, var(--night-2));
  color: var(--night-ink);
}
.ns-msg-handoff .ns-who { color: var(--ok-lit); opacity: 1; }

/* --- 8. Полоса моделей ------------------------------------------------- */

.stack-strip {
  padding-block: 26px;
  border-block: 1px solid var(--line);
  background: var(--bg-sunk);
}
.stack-strip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  flex-wrap: wrap;
}
.stack-strip-label {
  font-size: .688rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.stack-logos { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); }
.stack-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
  transition: color .18s var(--ease);
}
.stack-logo:hover { color: var(--ink); }

/* --- 8b. Зачем это бизнесу: неделя по часам ---------------------------- */

/* Сетка недели — не иллюстрация, а расчёт: 168 клеток, по одной на час.
   Цвета приглушены намеренно: громкий элемент на странице один — ночная
   панель первого экрана, а эта сетка показывает ту же ночь, только всю
   неделю сразу. Акцент несёт здесь один смысл — «ждёт ответа», так же
   как в «Пути одного сообщения» он отмечает единственный шаг с доступом
   к учёту. Клетки строит script.js, подписи дней лежат в разметке. */
.week {
  /* Пустые часы смешиваются из текста и поверхности, а не берут --line:
     в тёмной теме линия почти равна фону карточки, и тишина пропадала. */
  --wk-cell: color-mix(in srgb, var(--ink) 12%, var(--surface));
  /* Рабочие часы — цветом статуса «работает», как точки у живых продуктов.
     Тёмно-серый читался как ночь: ровно наоборот тому, что он значит. */
  --wk-work: color-mix(in srgb, var(--ok) 82%, var(--surface));
  --wk-wait: color-mix(in srgb, var(--accent) 50%, transparent);
  --wk-msg:  var(--accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: center;
  margin: 0;
  padding: clamp(20px, 2.8vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.week-grid {
  display: grid;
  grid-template-columns: 2rem repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.week-day {
  font-size: .656rem;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--faint);
}
.week-grid i {
  display: block;
  aspect-ratio: 6 / 5;
  border-radius: 2px;
  background: var(--wk-cell);
}
.week-grid i.is-work { background: var(--wk-work); }
.week-grid i.is-wait { background: var(--wk-wait); }
.week-grid i.is-msg  { background: var(--wk-msg); }

/* Подписи часов стоят ровно над границами рабочего дня: 9:00 и 18:00 —
   это края тёмного блока, а не круглые числа шкалы. Отступ слева равен
   колонке дней плюс зазор, поэтому доли считаются от ширины самих клеток. */
.week-hours {
  position: relative;
  height: 1.2em;
  margin: 9px 0 0 calc(2rem + 3px);
  font-size: .656rem;
  color: var(--faint);
}
.week-hours span { position: absolute; top: 0; }
.week-hours span:nth-child(1) { left: 0; }
.week-hours span:nth-child(2) { left: calc(9 / 24 * 100%); }
.week-hours span:nth-child(3) { left: calc(18 / 24 * 100%); }
.week-hours span:nth-child(4) { right: 0; }

.week-legend {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.week-legend li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding-left: 22px;
  font-size: .844rem;
  line-height: 1.45;
  color: var(--muted);
}
.week-legend li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 9px;
  border-radius: 2px;
  background: var(--wk-cell);
}
.week-legend li.is-work::before { background: var(--wk-work); }
/* Образец ожидания составной, как и сама цепочка на сетке: первая клетка —
   само сообщение, дальше — часы, пока оно лежит без ответа. */
.week-legend li.is-wait::before {
  background: linear-gradient(90deg, var(--wk-msg) 0 40%, var(--wk-wait) 40%);
}
.week-n {
  min-width: 3ch;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.week-legend li.is-work .week-n { color: var(--ok-ink); }
.week-legend li.is-wait .week-n { color: var(--accent-ink); }
.week-ai {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* Три потери — не карточки: ни иконок, ни рамок, только линия сверху, как
   у шагов процесса, но без номеров — это не последовательность. */
.losses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: clamp(36px, 4.5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.losses li { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.losses h3 { font-size: 1.02rem; letter-spacing: -.012em; line-height: 1.3; }
.losses p { margin-top: 9px; font-size: .906rem; color: var(--muted); text-wrap: pretty; }

/* Внешняя цифра всегда с источником и ссылкой на него: это единственное
   число в разделе, которое нельзя проверить арифметикой на месте. */
.source-note {
  display: flex;
  gap: 10px;
  max-width: 84ch;
  margin-top: clamp(28px, 3.5vw, 40px);
  font-size: .812rem;
  line-height: 1.55;
  color: var(--faint);
}
.source-note svg { flex: none; margin-top: 3px; }
.source-note a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.source-note a:hover { color: var(--accent); }

@media (max-width: 860px) {
  .week { grid-template-columns: minmax(0, 1fr); }
  .losses { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 520px) {
  .week-grid { grid-template-columns: 1.5rem repeat(24, minmax(0, 1fr)); gap: 2px; }
  .week-grid i { border-radius: 1px; }
  .week-hours { margin-left: calc(1.5rem + 2px); }
}

/* --- 9. Карточки продуктов и услуг ------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--surface);
  transition: background-color .2s var(--ease);
}
.card:hover { background: var(--surface-2); }

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  flex: none;
}
.card-tag {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint);
}
.card h3 { font-size: 1.075rem; letter-spacing: -.015em; }
.card p {
  margin-top: 10px;
  font-size: .906rem;
  color: var(--muted);
  text-wrap: pretty;
}

.card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: .781rem;
  color: var(--muted);
}

/* Раскрытие карточки продукта. Отличает продукты от услуг: у продуктов
   есть что показать внутри, у услуг — пока только описание. */
.card-more { margin-top: 0; padding-top: 14px; }
.card-more summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  margin: -9px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .656rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .16s var(--ease);
}
.card-more summary::-webkit-details-marker { display: none; }
.card-more summary:hover { color: var(--accent-ink); }
.card-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.card-more summary svg { transition: transform .22s var(--ease); }
.card-more[open] summary { color: var(--accent-ink); }
.card-more[open] summary svg { transform: rotate(180deg); }

.card-more-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  animation: faq-open .28s var(--ease) both;
}
.card-more-list li {
  position: relative;
  padding-left: 15px;
  font-size: .812rem;
  line-height: 1.5;
  color: var(--muted);
}
.card-more-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-line);
}
.card-more-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: .781rem;
  color: var(--faint);
}

/* --- 9b. Что умеет ассистент -------------------------------------------- */

/* Не сетка карточек. Возможностей одиннадцать, и главное в них — не
   заголовок, а пример: что человек написал и что ассистент сделал.
   Поэтому реестр строками: свёрнуто читается список, развёрнуто —
   доказательство. Нумерации нет: это набор, а не последовательность. */
.abilities {
  border-top: 1px solid var(--line);
  max-width: 1000px;
  margin-inline: auto;
}
.ability { border-bottom: 1px solid var(--line); }

.ability > summary {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 8px 22px;
  padding: 17px 4px;
  cursor: pointer;
  list-style: none;
}
.ability > summary::-webkit-details-marker { display: none; }
.ability > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ability-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .16s var(--ease);
}
.ability > summary:hover .ability-name { color: var(--accent-ink); }

.ability-gist {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* Зрелость — не украшение: «работает» и «нужен доступ к учёту» это разные
   обещания, и человек имеет право видеть разницу до разговора. */
.ability-state {
  justify-self: end;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  font-size: .688rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
}
.ability-state.is-live {
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.ability-chev {
  justify-self: end;
  flex: none;
  color: var(--faint);
  transition: transform .22s var(--ease), color .16s var(--ease);
}
.ability[open] .ability-chev { transform: rotate(180deg); color: var(--accent); }

.ability-body {
  padding: 2px 4px 24px;
  animation: faq-open .28s var(--ease) both;
}

/* Пример — короткий обмен репликами. Это не «ночная смена»: та живая и
   печатается, здесь достаточно застывшего следа, иначе на странице
   окажутся два одинаково громких диалога. */
.ability-demo {
  display: grid;
  gap: 10px;
  max-width: 64ch;
  padding: 16px 18px;
  border-left: 2px solid var(--accent-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
}
.ability-turn {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 4px 14px;
  font-size: .875rem;
  line-height: 1.55;
}
.ability-who {
  font-size: .719rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--faint);
  padding-top: .18em;
}
.ability-turn.is-bot .ability-who { color: var(--accent-ink); }
.ability-said { color: var(--body); text-wrap: pretty; }
.ability-turn.is-bot .ability-said { color: var(--ink); }

.ability-need {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  max-width: 68ch;
  margin-top: 14px;
  font-size: .812rem;
  line-height: 1.55;
  color: var(--muted);
}
.ability-need b { color: var(--ink); font-weight: 600; }

.abilities-note {
  max-width: 74ch;
  margin: 26px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.abilities-note b { color: var(--ink); font-weight: 600; }

@media (max-width: 860px) {
  .ability > summary {
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 8px 14px;
    padding: 16px 2px;
  }
  .ability-name { grid-column: 1; }
  .ability-chev { grid-column: 2; grid-row: 1; align-self: start; margin-top: 3px; }
  .ability-gist { grid-column: 1 / -1; }
  .ability-state { grid-column: 1 / -1; justify-self: start; }
  .ability-turn { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ability-demo { padding: 14px 15px; }
}

/* --- 9c. Путь одного сообщения ------------------------------------------ */

/* Здесь нумерация оправдана: это единственное место на сайте, где содержание
   действительно последовательность — шаги идут во времени и складываются в
   пять секунд. Движения нет намеренно: смелость страницы потрачена на панель
   первого экрана, и второй громкий элемент отнял бы у неё внимание. Работает
   не анимация, а то, что каждую секунду можно сложить самому. */
.path {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.path-step,
.path-pause {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 11rem) minmax(0, 1fr) 6.4rem;
  gap: 4px 22px;
  padding: 19px 2px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.path-n {
  grid-column: 1;
  grid-row: 1;
  padding-top: .2em;
  font-size: .688rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.path-name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: .938rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.path-body { grid-column: 3; grid-row: 1; }
.path-io   { grid-column: 3; grid-row: 2; }
.path-time {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  font-family: var(--mono);
  font-size: .719rem;
  line-height: 1.4;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: .15em;
}
.path-delta { display: block; margin-top: 3px; color: var(--faint); }

/* Реплика — то, что человек написал или получил, дословно. */
.path-quote {
  margin: 0;
  padding-left: 13px;
  border-left: 2px solid var(--line-strong);
  font-size: .906rem;
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}

/* Разобранные поля: слева имя поля, справа значение. */
.path-kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
  font-size: .845rem;
  line-height: 1.45;
}
.path-kv dt {
  font-family: var(--mono);
  font-size: .719rem;
  color: var(--faint);
  padding-top: .12em;
}
.path-kv dd { margin: 0; color: var(--ink); }

/* Переключатель языка задаёт display всему, что помечено data-lang (раздел 2),
   и удвоенным селектором перебивает одиночный класс компонента. Поэтому
   обеим сеткам здесь нужен селектор той же специфичности — иначе поля
   выстраиваются в столбик вместо пар «имя → значение». */
.path-kv[data-lang][data-lang].lang-active { display: grid; }
.path-io > div[data-lang][data-lang].lang-active { display: flex; }

/* Что шаг взял и что отдал. Это не украшение: по этим двум строкам видно,
   где ассистенту нужен доступ к чужим данным, а где он справляется сам. */
.path-io {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.path-io > div { display: flex; align-items: baseline; gap: 8px; }
.path-io dt {
  font-family: var(--mono);
  font-size: .688rem;
  color: var(--faint);
  flex: none;
}
.path-io dd { margin: 0; font-size: .812rem; color: var(--muted); }

.path-note {
  margin: 12px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--line-strong);
  font-size: .812rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* Шаг, ради которого раздел и написан: единственный, которому нужен доступ
   к учёту клиента. Акцент здесь несёт смысл «вот это место», а не акцент. */
.path-step.is-key {
  margin-inline: -14px;
  padding-inline: 14px;
  background: var(--accent-soft);
  border-bottom-color: var(--accent-line);
}
.path-step.is-key .path-n { color: var(--accent-ink); }
.path-step.is-key .path-quote,
.path-step.is-key .path-io { border-color: var(--accent-line); }
.path-step.is-key .path-note {
  border-left-color: var(--accent);
  color: var(--accent-ink);
}

/* Пауза клиента — не шаг ассистента, поэтому без номера и приглушена.
   Она в списке потому, что без неё сорок секунд из сорока пяти выглядели бы
   нашими, а они не наши. */
.path-pause { padding-block: 14px; }
.path-pause-text {
  grid-column: 2 / 4;
  grid-row: 1;
  margin: 0;
  font-size: .845rem;
  line-height: 1.5;
  color: var(--faint);
  text-wrap: pretty;
}

.path-total {
  max-width: 1000px;
  margin: 22px auto 0;
  padding-left: 13px;
  border-left: 2px solid var(--accent);
  font-size: .938rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

.path-need {
  max-width: 1000px;
  margin: 26px auto 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.path-need-t {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.path-need-b {
  margin: 8px 0 0;
  max-width: 76ch;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .path-step,
  .path-pause {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: 0 14px;
    padding: 18px 2px;
  }
  .path-name { grid-column: 2; grid-row: 1; }
  .path-time { grid-column: 3; grid-row: 1; }
  .path-body { grid-column: 2 / -1; grid-row: 2; margin-top: 9px; }
  .path-io   { grid-column: 2 / -1; grid-row: 3; }
  .path-pause-text { grid-column: 2 / -1; grid-row: 1; }
  /* На телефоне кегль поднимается: мелкий моноширинный текст здесь читает
     владелец автосервиса с телефона в руке, а не разработчик с монитора. */
  .path-quote { font-size: .906rem; }
  .path-kv { grid-template-columns: minmax(0, 1fr); gap: 1px; font-size: .875rem; }
  .path-kv dt { padding-top: 6px; }
  .path-io dd { font-size: .845rem; }
  .path-step.is-key { margin-inline: -12px; padding-inline: 12px; }
}

/* --- 10–11. Сняты 23.09.2026 ------------------------------------------ */

/* Здесь были крупные цифры «+40% продуктивности» и вкладки отделов с
   «+32% к конверсии» и «92% точности прогноза». Ни одна не подтверждена
   нашим внедрением, а две противоречили остальной странице: «заменяет 3–4
   смены операторов» против «не обещаем замены менеджера» и «дожим спящих
   клиентов» против «работаем только по входящим». Раздел заменён расчётом
   окупаемости на числах посетителя — см. раздел 12. */

/* --- 12. Калькулятор --------------------------------------------------- */

/* Калькулятор стоит в разделе цен, под тарифами: вопрос «окупится ли»
   возникает ровно тогда, когда человек увидел сумму. */
.calc {
  margin-top: clamp(48px, 6vw, 80px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.calc-head {
  padding: clamp(22px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
}
.calc-head h3 { margin-top: 12px; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.calc-sub {
  margin-top: 10px;
  max-width: 64ch;
  font-size: .938rem;
  color: var(--muted);
  text-wrap: pretty;
}

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
.calc-inputs {
  padding: clamp(22px, 3vw, 30px);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 32px;
  align-content: start;
}
.calc-group { display: grid; gap: 12px; }
.calc-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.calc-group-head label { font-size: .875rem; color: var(--muted); }
.calc-val {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  color: var(--ink);
  font-size: .781rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--line) var(--fill, 0%));
}
.range::-moz-range-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--line) var(--fill, 0%));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease);
}
.range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }

.range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: .656rem;
  color: var(--faint);
}

.calc-results {
  padding: clamp(22px, 3vw, 30px);
  background: var(--bg-sunk);
  display: grid;
  gap: 20px;
  align-content: start;
}
.calc-res { display: grid; gap: 4px; }
.calc-res-label { font-size: .812rem; color: var(--muted); }
.calc-res-num {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calc-res.is-accent .calc-res-num { color: var(--accent-ink); }
.calc-res-note {
  font-size: .781rem;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.calc-res.is-accent .calc-res-note { color: var(--accent-ink); }

/* Выбор тарифа в расчёте — тот же переключатель, что «Размер бизнеса»
   в форме, но в своей обёртке: форма ищет выбранный размер по
   .size-picker, и общий класс подменил бы его ответом из калькулятора. */
.calc-mode-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-mode-group legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: .875rem;
  color: var(--muted);
}
.calc-mode label { line-height: 1.35; }

/* Честное «не окупится»: если ассистенту пришлось бы удержать каждого
   четвёртого обратившегося, мы говорим это прямо, до разговора. */
.calc-warn {
  padding: 11px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .812rem;
  line-height: 1.5;
}

/* Название тарифа стоит между подписью и суммой: сумма без названия
   не отвечает на вопрос «а это какой тариф». */
.calc-res-plan {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: -2px;
}
.calc-results .btn { margin-top: 4px; }
.calc-disclaimer { font-size: .72rem; color: var(--faint); line-height: 1.5; }

/* --- 13. Тарифы --------------------------------------------------------- */

/* Три тарифа — это список вариантов, поэтому ul/li, а не таблица: таблица
   понадобилась бы для сравнения признаков, а здесь у каждого тарифа свой
   набор. Цены выровнены по вертикали намеренно — Baymard показывает, что
   разъехавшиеся цены заставляют сравнивать заново на каждой карточке. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* Средний тариф выделен фоном, а не тенью и не увеличением: подъём карточки
   на сетке одинаковых карточек — визуальный шум, а не иерархия. */
.plan.is-featured {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.plan-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
/* «Чаще всего выбирают» лежит внутри заголовка, а не рядом: скринридер
   должен прочитать это как часть названия тарифа, иначе плашка теряется. */
.plan-flag {
  flex: none;
  margin-top: 1px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .656rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  /* Высота задана в пикселях, а не в em: у третьей карточки кегль меньше,
     и общий em дал бы разную высоту — всё, что ниже цены, разъехалось бы
     на два десятка пикселей между карточками. */
  min-height: var(--price-h);
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.2rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
/* «Считаем под задачу» набирается тем же кеглем, что и суммы, но это фраза,
   а не число — ей нужен основной шрифт: дисплейная в две строки нечитаема. */
.plan-price.is-custom {
  font-family: var(--font);
  font-size: clamp(1.28rem, 1rem + 1.2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.plan-period {
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* Условие акции стоит вплотную к цене, а не сноской внизу страницы: NN/g
   относит спрятанные условия подписки к обманным паттернам. */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: .781rem;
  font-weight: 500;
  color: var(--accent-ink);
}
.plan-badge::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: 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='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan-who {
  margin-top: 14px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.plan-incl-title {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .781rem;
  font-weight: 600;
  color: var(--ink);
}
.plan.is-featured .plan-incl-title { border-top-color: var(--accent-line); }

.plan-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.plan-list li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 10px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--body);
}
.plan-list li::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: 4px;
  background: var(--accent);
  opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Блок условий бесплатного месяца. Пунктир, а не сплошная рамка: это
   отрывной талон, а не ещё одна карточка. */
.plan-terms {
  margin-top: 20px;
  padding: 15px 16px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.plan-terms-title {
  margin: 0;
  font-size: .781rem;
  font-weight: 600;
  color: var(--ink);
}
.plan-terms ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.plan-terms li {
  position: relative;
  padding-left: 14px;
  font-size: .812rem;
  line-height: 1.5;
  color: var(--muted);
}
.plan-terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-line);
}

.plan-cta { margin-top: 22px; }
.plan-foot {
  margin-top: auto;
  padding-top: 18px;
}
.plan-cta .btn { width: 100%; justify-content: center; }
/* Две кнопки в карточке тарифа: «Подключить самому» и заявка. */
.plan-cta + .plan-cta { margin-top: 10px; }

/* Якорь цены под заголовком раздела — тише основного абзаца: это сравнение
   для ориентира, а не обещание. */
.section-head p.plans-anchor {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--accent-line);
  font-size: .938rem;
}

.plans-note {
  margin: 22px auto 0;
  max-width: 74ch;
  font-size: .812rem;
  line-height: 1.6;
  color: var(--faint);
  text-align: center;
  text-wrap: pretty;
}

/* --- 14. Процесс -------------------------------------------------------- */

.steps {
  display: grid;
  /* 200px, а не 220: иначе на ~1000px четвёртый шаг срывается на свою строку. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  counter-reset: step;
}
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--accent);
}
.step .num {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.step h3 { font-size: 1.075rem; }
.step p { margin-top: 9px; font-size: .906rem; color: var(--muted); }

/* --- 14a. Команда ------------------------------------------------------- */

/* Раздел пока не подключён к index.html — разметка лежит в TEAM_SNIPPET.html
   и ждёт реальных людей. Стили добавлены заранее, чтобы вставка была одним
   действием: подставить имена и вклеить блок. Пустых карточек на сайте нет
   намеренно — по NN/g заглушка вместо человека хуже отсутствующего раздела. */
.team-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 980px;
  margin-inline: auto;
}
.team-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.team-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.team-card h3 { margin-top: 16px; font-size: 1.02rem; letter-spacing: -.015em; }
.team-role {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: .656rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.team-card p {
  margin-top: 12px;
  font-size: .875rem;
  color: var(--muted);
  text-wrap: pretty;
}
.team-note {
  max-width: 62ch;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--faint);
  text-align: center;
}

/* --- 14b. Вопросы ------------------------------------------------------- */

/* Нумерации здесь нет намеренно: это не последовательность, а набор
   независимых возражений — порядок ничего не сообщает читателю. */
.faq-list {
  max-width: 82ch;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  font-weight: 500;
  color: var(--ink);
  transition: color .16s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.faq-chev {
  margin-left: auto;
  flex: none;
  color: var(--faint);
  transition: transform .22s var(--ease), color .16s var(--ease);
}
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--accent); }

.faq-answer {
  padding: 0 44px 22px 4px;
  color: var(--muted);
  font-size: .938rem;
  max-width: 68ch;
  animation: faq-open .3s var(--ease) both;
}
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- 15. Полоса призыва ------------------------------------------------ */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 68px);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--bg);
  text-align: center;
}
.cta-band h2 {
  color: var(--bg);
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem);
  max-width: 22ch;
  margin-inline: auto;
}
.cta-band p {
  margin-top: 16px;
  color: color-mix(in srgb, var(--bg) 72%, transparent);
  font-size: 1.02rem;
  max-width: 52ch;
  margin-inline: auto;
}
.cta-band .btn { margin-top: 30px; }
.cta-band .mark-watermark {
  right: -60px;
  top: -60px;
  opacity: .09;
  color: var(--accent);
}

/* --- 16. Контакты ------------------------------------------------------ */

.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.contact-info h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); }
.contact-info > p { margin-top: 16px; color: var(--muted); max-width: 40ch; }

.contact-list { margin-top: 32px; display: grid; gap: 2px; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  margin-inline: -14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: .938rem;
  font-weight: 500;
  transition: background-color .16s var(--ease);
}
a.contact-item:hover { background: var(--surface-2); }
.contact-item .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  flex: none;
}
.contact-item-static { color: var(--muted); font-weight: 400; }

.messenger-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.messenger-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.messenger-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }

/* Instagram — не мессенджер для заявки, а лента компании, поэтому своя
   строка с подписью и ником, а не третья кнопка в ряду. */
.ig-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  max-width: 360px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.ig-card:hover { border-color: var(--accent-line); background: var(--surface-2); }
.ig-card .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  flex: none;
}
.ig-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ig-card-title { font-size: .938rem; font-weight: 500; }
.ig-card-arrow { flex: none; margin-left: auto; color: var(--muted); }

/* Форма */
.contact-form {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 20px;
}
.field { display: grid; gap: 8px; }
.field > label,
.field-label-row label {
  font-size: .812rem;
  font-weight: 500;
  color: var(--muted);
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

input[type="text"], input[type="tel"], textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: .938rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 108px; resize: vertical; line-height: 1.55; }

.predict-line {
  font-size: .75rem;
  color: var(--accent-ink);
  opacity: 0;
  max-height: 0;
  transition: opacity .22s var(--ease), max-height .22s var(--ease);
}
.predict-line.show { opacity: 1; max-height: 3em; }

.size-picker,
.calc-mode { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.size-picker input,
.calc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.size-picker label,
.calc-mode label {
  flex: 1;
  padding: 9px 8px;
  border-radius: 6px;
  text-align: center;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.size-picker label:hover,
.calc-mode label:hover { color: var(--ink); }
.size-picker input:checked + label,
.calc-mode input:checked + label {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.size-picker input:focus-visible + label,
.calc-mode input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

.predict-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .656rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
}
.predict-badge svg { color: var(--accent); }

.task-suggest { display: flex; flex-wrap: wrap; gap: 7px; }
.task-chip {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  color: var(--muted);
  font-size: .812rem;
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}
.task-chip:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }

textarea.filled-by-ai { animation: fill-flash .7s var(--ease); }
@keyframes fill-flash {
  0%   { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  100% { border-color: var(--line-strong); box-shadow: none; }
}

.submit-btn { position: relative; }
.submit-btn .is-idle-label { display: inline-flex; align-items: center; gap: 9px; }
.submit-btn .is-loading-label { display: none; }
.submit-btn.is-sending .is-idle-label { display: none; }
.submit-btn.is-sending .is-loading-label { display: inline-flex; align-items: center; gap: 9px; }

.typing { display: inline-flex; gap: 3px; }
.typing span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: typing 1.1s var(--ease) infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

.form-error {
  padding: 11px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .844rem;
}
.form-error[hidden] { display: none; }

/* Пояснение для пришедших с «Подключить самому», когда регистрация закрыта.
   Нейтральное, не акцентное: это не ошибка, а объяснение, куда человек попал. */
.form-note {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: .844rem;
  line-height: 1.5;
}
.form-note:focus { outline: none; }
.form-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ловушка для ботов: вне экрана, но не display:none — часть ботов
   пропускает скрытые так поля и заполнять бы их не стала. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 4px;
}
.submit-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  color: var(--faint);
}

.submit-success {
  padding: clamp(28px, 3.5vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.submit-success[hidden] { display: none; }
.submit-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  margin-bottom: 18px;
}
.submit-success h3 { font-size: 1.3rem; }
.submit-success-text { margin-top: 10px; color: var(--muted); }
.submit-success-bot { margin-top: 20px; display: grid; justify-items: center; gap: 8px; }
.submit-success-bot[hidden] { display: none; }
.submit-success-hint { font-size: .812rem; color: var(--muted); max-width: 36ch; }
.submit-success-steps {
  display: grid;
  gap: 10px;
  margin: 26px 0;
  padding: 20px 0;
  border-block: 1px solid var(--line);
  text-align: left;
}
.submit-success-steps > span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .812rem;
  color: var(--muted);
}
.submit-success-steps em {
  font-style: normal;
  color: var(--accent-ink);
  font-size: .688rem;
  letter-spacing: .08em;
}

/* Прикреплённый расчёт: посетитель должен видеть, что именно уедет вместе
   с заявкой, и иметь возможность это снять. Скрытых довесков в форме нет. */
.calc-attach {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .812rem;
  line-height: 1.45;
  animation: faq-open .3s var(--ease) both;
}
.calc-attach svg { flex: none; margin-top: 2px; }
.calc-attach-text { flex: 1; }
.calc-attach-drop {
  flex: none;
  padding: 6px 2px;
  margin: -6px -2px;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-size: .75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: .75;
}
.calc-attach-drop:hover { opacity: 1; }

/* --- 17. Подвал -------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-sunk); }
.foot-top {
  display: grid;
  /* Последняя колонка — «Мы на связи»: значки по 36px в ряд,
     уже 172px они сжимаются. */
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) minmax(172px, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(44px, 5vw, 68px) clamp(32px, 4vw, 48px);
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
}
.foot-brand img { width: 26px; height: 26px; border-radius: 7px; }
.foot-tagline { margin-top: 14px; font-size: .875rem; color: var(--muted); max-width: 34ch; }
.foot-col-title {
  display: block;
  font-family: var(--mono);
  font-size: .656rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}
.foot-links { display: grid; gap: 10px; }
.foot-links a { font-size: .875rem; color: var(--muted); transition: color .16s var(--ease); }
.foot-links a:hover { color: var(--ink); }
.foot-social { display: flex; gap: 8px; }
.foot-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.foot-social-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.foot-ig {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 14px;
  font-size: .875rem;
  color: var(--muted);
  transition: color .16s var(--ease);
}
.foot-ig:hover { color: var(--ink); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  font-size: .781rem;
  color: var(--faint);
}

/* --- 18. Мобильная панель действий ------------------------------------- */

.mobile-bar {
  display: none;
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 95;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
}
.mobile-bar .btn { flex: 1; }
.mobile-bar .btn-secondary { flex: 0 0 auto; }

/* --- 18b. Служебное: копирование, «наверх», скрытые подписи ------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 300;
  transform: translate(-50%, 12px);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: .812rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.to-top:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-2px); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* На узком экране палец крупнее курсора: мелкие переключатели растим.
   Шапка при этом не должна вырасти, поэтому берём 40px, а не рекомендованные
   Apple 44 — по WCAG 2.2 минимум 24, так что запас остаётся приличный. */
@media (max-width: 720px) {
  .icon-btn { width: 40px; height: 40px; }
  .lang-switch button { padding: 10px 11px; }
  .foot-social-btn { width: 42px; height: 42px; }
  /* Кнопки выросли — шапка перестала помещаться в 375px и появилась
     горизонтальная прокрутка. Отыгрываем ширину на промежутках. */
  .header-actions { gap: 4px; }
  .ns-chip { padding: 9px 14px; font-size: .812rem; }
  .card-more summary { padding: 12px 0; margin: -12px 0; }
  .ns-replay { padding: 8px 12px; }
}

/* На узких экранах внизу уже стоит панель действий — кнопку туда не пускаем. */
@media (max-width: 720px) {
  .to-top { display: none; }
}

/* Ниже 400px в шапке одновременно не помещаются знак, языки и три кнопки.
   Жертвуем значком WhatsApp: он продублирован в нижней панели действий
   и в блоке контактов, а боковая прокрутка ломает всю страницу. */
@media (max-width: 400px) {
  .header-wa { display: none; }
}

/* «Войти» в шапке остаётся на любой ширине: вернувшемуся клиенту на телефоне
   вход нужнее всего. Уже 480px подпись не помещается рядом со знаком,
   языками и меню (на 360px свободно 13px), поэтому кнопка становится
   значком 40×40, как соседние, а подпись уходит в скрытую — её читают
   читалка экрана и стенд приёмки (SPEC 2.4 сверяет «Кирүү»). Место под
   значок отдаёт переключатель темы: он переезжает в первую строку меню
   рядом с «Войти» — на телефоне тему почти всегда задаёт система. */
@media (max-width: 720px) {
  .header-login { min-height: 40px; }
}
@media (max-width: 479px) {
  .header-theme { display: none; }
  .mobile-nav .menu-theme { display: inline-flex; }
  .header-login { width: 40px; height: 40px; padding: 0; }
  .header-login-icon { display: block; }
  .header-login-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- 19. Появление при скролле ----------------------------------------- */

/* Появление намеренно короткое и малоамплитудное. NN/g «Scroll Fading 101»:
   текст, проявляющийся дольше 500 мс, читатели пропускают целиком, а
   оптимум лежит в 100–400 мс. Прежние 600 мс и 12 px были ровно тем
   «оживлением страницы», по которому узнают шаблонную вёрстку.
   Кривая — своя, с сильным выходом: вход должен быть быстрым, а остановка
   мягкой, чтобы глаз успел зацепиться за блок. */
[data-reveal] {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
[data-reveal].in-view { opacity: 1; transform: none; }

/* На телефоне не проявляем ничего. NN/g рекомендует это прямо: на маленьком
   экране блок занимает почти весь вьюпорт, и задержка читается не как
   изящество, а как медленная загрузка. */
@media (max-width: 640px) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- 20. Адаптив ------------------------------------------------------- */

@media (max-width: 1040px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  /* В одну колонку карточки идут друг под другом — выравнивать по вертикали
     больше нечего, и резервировать высоту незачем. */
  .plan-price { min-height: 0; }
  .plan-head { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .nightshift { max-width: 560px; }
  .contact-wrap { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-inputs { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Шапка по ширине. Ряд ограничен шириной .wrap — 1084 px на любом большом
   экране, — и в него должны встать знак, пять пунктов навигации, языки,
   тема, WhatsApp, «Войти» и «Начать бесплатно». Кыргызские пункты длиннее
   русских на 55 px; до «Войти» на 901 и 1121 px кыргызская шапка уже
   вылезала за экран и давала боковую прокрутку. Поэтому:
     ≥1181   навигация в строку, имя короткое — полное не помещается;
     901–1180 навигация уходит в меню, зато видно полное имя и обе кнопки;
     ≤900    меню, короткое имя, главная кнопка — в нижней панели. */
@media (min-width: 1181px) {
  .brand-name { display: none; }
  .brand-short { display: inline; }
}

@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 900px) {
  :root { --header-h: 58px; }
  .header-cta { display: none; }
  .brand-name { display: none; }
  .brand-short { display: inline; }
  .site-header > .wrap { gap: 12px; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }

  .stack-strip .wrap { gap: 14px; }

  /* Четыре колонки под брендом: «Навигация», «Боты по нишам», «Клиентам»,
     «Мы на связи» — сеткой 2×2, чтобы ни одна не осталась одна в ряду. */
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .trust-row { gap: 22px 20px; }
  .plan { padding: 22px; }
  .plan-head { flex-wrap: wrap; }
  .foot-top { grid-template-columns: 1fr; }
  .submit-success-steps { gap: 12px; }
}

/* --- 21. Уважение к настройкам движения -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .faq-answer, .calc-attach, .card-more-list, .ability-body { animation: none; }
  .ns-msg, .ns-card, .ns-typing, .nightshift, .ns-tool { animation: none; opacity: 1; }
  .ns-tool.is-running::before { animation: none; opacity: 1; }
  .ns-thread { scroll-behavior: auto; }
}

@media print {
  .site-header, .mobile-bar, .mobile-nav, .progress-rail, .hero-bg { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- Согласие на обработку персональных данных (форма заявки) ---------- */

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .781rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.consent-check input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.consent-check a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-check a:hover { color: var(--accent); }

/* Версия редакции в privacy.html — идентификатор, который уходит с заявкой
   (consent_version). Строка над ней набрана капителью, а идентификатор
   должен читаться ровно так, как записан. */
.legal-meta .legal-version { text-transform: none; letter-spacing: 0; }

/* Ссылка на политику в нижней строке футера */
.foot-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.foot-bottom a:hover { color: var(--ink); }

/* --- 20. Страница «Для таксопарков» (taxi.html) ---------------------------
   Отдельная страница на той же дизайн-системе: токены, кнопки, карточки и
   тарифы — общие, здесь только то, чего нет на главной (первый экран без
   ночной панели, полоса цифр, шаги запуска, риски, ряд контактов в полосе
   призыва). Всё в классах — строгий CSP не пускает атрибут style. */

.taxi-hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 104px); }
.taxi-hero h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 20ch;
  margin-top: 16px;
}
.taxi-lead {
  margin-top: 20px;
  max-width: 62ch;
  font-size: clamp(1.02rem, .97rem + .25vw, 1.17rem);
  color: var(--muted);
  text-wrap: pretty;
}
.taxi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.taxi-actions .btn svg,
.taxi-cta-row .btn svg { flex: none; }

.taxi-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 6vw, 64px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.taxi-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--surface);
}
.taxi-stat-num {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.taxi-stat-label { font-size: .875rem; line-height: 1.45; color: var(--muted); }
.taxi-stat-accent { background: var(--accent-soft); }
.taxi-stat-accent .taxi-stat-num { color: var(--accent-ink); }
.taxi-note {
  margin-top: 14px;
  max-width: 80ch;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--faint);
}

.taxi-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.taxi-steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.taxi-step-day {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.taxi-steps strong { color: var(--ink); font-size: 1.02rem; }
.taxi-step-text { color: var(--muted); font-size: .9rem; line-height: 1.55; }

.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }

.taxi-risks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.taxi-risks li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
}
.taxi-risks strong { color: var(--ink); font-size: 1.02rem; }
.taxi-risks p { color: var(--body); font-size: .92rem; line-height: 1.6; }

.taxi-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.cta-band .taxi-cta-row .btn { margin-top: 0; }
.taxi-btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 38%, transparent);
}
.taxi-btn-ghost:hover { border-color: var(--bg); }
.cta-band p.taxi-cta-note { margin-top: 18px; font-size: .85rem; }
.taxi-cta-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1040px) {
  .plans-2 { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 900px) {
  .taxi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taxi-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taxi-risks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .taxi-steps { grid-template-columns: minmax(0, 1fr); }
  .taxi-actions > span[data-lang][data-lang].lang-active { display: block; width: 100%; }
  .taxi-actions .btn { width: 100%; }
}
.card-more-note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Шестой пункт шапки («Таксопаркам») между 1181 и 1340 px выталкивал кнопки
   за край в кыргызской версии. В этом диапазоне он прячется: ссылка остаётся
   в карточке продукта, в футере, а ниже 1181 px — в мобильном меню. */
@media (max-width: 1340px) { .nav-links .nav-taxi { display: none; } }
/* --- Страница «Партнёрам» (partners.html) ------------------------------
   Отдельная страница для SMM-специалистов: сколько платим и как начать.
   Стили здесь, а не inline-<style>: новый inline-блок потребовал бы
   нового хеша в CSP (tools/build_csp.py). */
.pp {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(56px, 8vw, 96px);
  color: var(--body);
  line-height: 1.6;
}
.pp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.pp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.pp-eyebrow {
  font-family: var(--mono);
  font-size: .719rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 10px;
}
.pp h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 16px;
}
.pp-lede { font-size: 1.06rem; margin: 0 0 8px; }
/* У section на главной большой вертикальный отступ; здесь блоки идут плотно. */
.pp .pp-block { margin-top: clamp(36px, 6vw, 56px); padding: 0; }
.pp h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 14px;
}
.pp-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.pp-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: .938rem;
}
.pp-table th, .pp-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pp-table th { font-weight: 500; color: var(--muted); font-size: .812rem; }
.pp-table td b { color: var(--ink); }
.pp-note {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .875rem;
}
.pp-list, .pp-steps, .pp-offer { padding-left: 1.2em; margin: 0 0 14px; }
.pp-list li, .pp-steps li, .pp-offer li { margin-bottom: 8px; }
.pp-steps b { color: var(--ink); }
.pp-offer { font-size: .875rem; }
.pp-meta {
  font-family: var(--mono);
  font-size: .719rem;
  color: var(--faint);
  margin: -8px 0 12px;
}
.pp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pp-foot { margin-top: clamp(40px, 6vw, 64px); font-size: .844rem; color: var(--muted); }
.pp-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pp-foot a:hover { color: var(--ink); }
@media (max-width: 480px) {
  .pp-cta .btn { width: 100%; }
  /* Четыре колонки влезают в 343px без прокрутки: главная — «за 3 месяца» — не прячется. */
  .pp-table { min-width: 0; font-size: .781rem; }
  .pp-table th, .pp-table td { padding: 8px 5px; }
  .pp-table th { white-space: normal; font-size: .719rem; }
}