/* Шрифты сайта: свои файлы, а не Google Fonts.
 *
 * Внешний стиль шрифтов блокировал первую отрисовку и стоил двух лишних
 * соединений (fonts.googleapis.com за CSS, потом fonts.gstatic.com за файлами).
 * Здесь переменные начертания в woff2, только нужные наборы знаков —
 * латиница и кириллица; браузер берёт файл по unicode-range и грузит один-два.
 *
 * Файлы лежат в frontend/public/brand/fonts и обновляются вручную вместе с
 * этим файлом: порядок в docs/ops/LANDING.md.
 */

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-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: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/onest-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: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/onest-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: 'Raleway';
  font-style: normal;
  font-weight: 200 300;
  font-display: swap;
  src: url(/brand/fonts/raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 200 300;
  font-display: swap;
  src: url(/brand/fonts/raleway-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200 300;
  font-display: swap;
  src: url(/brand/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200 300;
  font-display: swap;
  src: url(/brand/fonts/raleway-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;
}

/* Публичный сайт erp.akeda.ru.
   Палитра и типографика — те же, что в продукте (frontend/src/styles/tokens.css):
   Onest и JetBrains Mono, один акцент (хвоя на светлом, лайм на тёмном), медь
   только в знаке и в ячейке клиентского модуля.

   Тема идёт за системой, как в приложении: bare :root — светлая, тёмная
   переопределяет только токены. Переключатель в шапке временный, на время
   выбора направления, и пишет тот же ключ akeda.theme. */
:root {
  --canvas: #f5f7fa;
  --panel: #ffffff;
  --panel-2: #eef1f5;
  /* Тональная шкала текста — та же, что в продукте
     (frontend/src/styles/tokens.css). Раньше все четыре ступени светлой темы
     были чистым чёрным: название, пояснение к нему и строка редакции шли одним
     пятном, и читателю не за что было зацепиться. Тёмная тема шкалу имела
     всегда, здесь её получает и светлая. */
  --ink: #111827;
  --muted: #475569;
  --subtle: #64748b;
  --faint: #94a3b8;
  --hair: #d8dee8;
  --hair-2: #e6eaf0;
  --accent: #176f52;
  --accent-hover: #125f45;
  --accent-text: #155f47;
  --on-accent: #f2fbf6;
  --accent-soft: rgba(205, 232, 220, 0.62);
  --ok: #2c9a66;
  --ok-soft: rgba(44, 154, 102, 0.12);
  --warn: #b8860b;
  --warn-soft: rgba(217, 146, 11, 0.14);
  --copper: #d9541e;
  --shadow-cube: rgba(70, 90, 120, 0.22);
  /* Кубики модулей на странице тарифов: графит — включённый модуль, медь —
     клиентский, ghost — место модуля, которого в тарифе нет. Единственные
     цвета сверх палитры продукта (макет «Кубики модулей»). */
  --cube-top: #8e939b;
  --cube-left: #26292f;
  --cube-front: #3f444b;
  --cube-ink: rgba(0, 0, 0, 0.42);
  --cube-ink-hi: rgba(255, 255, 255, 0.14);
  --ghost: rgba(15, 23, 42, 0.035);
  --ghost-line: rgba(15, 23, 42, 0.16);
  --cu-top: #ee8a5c;
  --cu-left: #9e3b12;
  --cu-front: #d9541e;
  /* Всплывающие панели — значения из продукта (frontend/src/styles/tokens.css). */
  --float-border: rgba(148, 163, 184, 0.2);
  --menu-bg: #ffffff;
  --menu-hover: #eef2f7;
  --shadow-pop: 0 24px 58px rgba(15, 23, 42, 0.16);
  --radius: 16px;
  --container: min(1560px, 94vw);
  --pad: clamp(20px, 4vw, 64px);
  --cell: 118px;
  --cell-d: 64px;
  --cell-lift: 92px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0f0e0c;
    --float-border: #2a2721;
    --menu-bg: #1c1b17;
    --menu-hover: #1f1e19;
    --shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.5);
    --panel: #141311;
    --panel-2: #171613;
    --ink: #f2f0ea;
    --muted: #c9c4ba;
    --subtle: #97928a;
    --faint: #6e695f;
    --hair: #2e2b24;
    --hair-2: #1f1e19;
    --accent: #cdf463;
    --accent-hover: #d6f878;
    --accent-text: #cdf463;
    --on-accent: #131210;
    --accent-soft: rgba(205, 244, 99, 0.12);
    --ok: #5adb9e;
    --ok-soft: rgba(90, 219, 158, 0.14);
    --warn: #ffc24b;
    --warn-soft: rgba(255, 194, 75, 0.13);
    --shadow-cube: rgba(0, 0, 0, 0.65);
    --cube-top: #c4c8ce;
    --cube-left: #2b2e34;
    --cube-front: #4b5058;
    --ghost: rgba(255, 255, 255, 0.035);
    --ghost-line: rgba(255, 255, 255, 0.16);
  }
}
:root[data-theme="dark"] {
  --canvas: #0f0e0c;
  --float-border: #2a2721;
  --menu-bg: #1c1b17;
  --menu-hover: #1f1e19;
  --shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.5);
  --panel: #141311;
  --panel-2: #171613;
  --ink: #f2f0ea;
  --muted: #c9c4ba;
  --subtle: #97928a;
  --faint: #6e695f;
  --hair: #2e2b24;
  --hair-2: #1f1e19;
  --accent: #cdf463;
  --accent-hover: #d6f878;
  --accent-text: #cdf463;
  --on-accent: #131210;
  --accent-soft: rgba(205, 244, 99, 0.12);
  --ok: #5adb9e;
  --ok-soft: rgba(90, 219, 158, 0.14);
  --warn: #ffc24b;
  --warn-soft: rgba(255, 194, 75, 0.13);
  --shadow-cube: rgba(0, 0, 0, 0.65);
  --cube-top: #c4c8ce;
  --cube-left: #2b2e34;
  --cube-front: #4b5058;
  --ghost: rgba(255, 255, 255, 0.035);
  --ghost-line: rgba(255, 255, 255, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent-text);
}
h1,
h2,
h3 {
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 {
  font-size: clamp(38px, 5vw, 60px);
}
h2 {
  font-size: clamp(30px, 3.6vw, 46px);
}
h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 6px;
}
p {
  margin: 0 0 14px;
  max-width: 66ch;
}
ul,
ol,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
strong {
  font-weight: 600;
}
.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--subtle);
  margin: 0 0 12px;
}
.lede {
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
}
.muted {
  color: var(--subtle);
}
.right {
  text-align: right;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  width: 100%;
}
.narrow {
  max-width: 780px;
}
.section {
  padding: clamp(64px, 9vw, 128px) 0;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 8px 12px;
  border-radius: 8px;
}
.skip:focus {
  left: 8px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Кнопки и пилюли ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.btn:hover {
  color: inherit;
}
.btn-lg {
  height: 50px;
  padding: 0 24px;
  font-size: 15px;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  filter: brightness(1.08);
  color: var(--on-accent);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair);
}
.btn-secondary:hover {
  border-color: var(--subtle);
  color: var(--ink);
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.pill-ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.pill-warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.tone-ok {
  color: var(--ok);
}
.tone-warn {
  color: var(--warn);
}
.tone-accent {
  color: var(--accent-text);
}
.tone-ink {
  color: var(--ink);
}
.tone-faint {
  color: var(--faint);
}
.chip {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  color: var(--subtle);
  font-size: 11px;
}
.more::after {
  content: " →";
}
.more {
  color: var(--accent-text);
  font-weight: 600;
}

/* ── Шапка ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hair);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* Знак и слово — канонические файлы design/brand: свой вариант на светлом и
   на тёмном холсте, лишний прячется, а не перекрашивается. */
.logo-img {
  display: block;
  height: 44px;
  width: auto;
}
.site-footer .logo-img {
  height: 132px;
  margin-bottom: 8px;
}
.logo-on-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light {
    display: none;
  }
  :root:not([data-theme="light"]) .logo-on-dark {
    display: block;
  }
}
:root[data-theme="dark"] .logo-on-light {
  display: none;
}
:root[data-theme="dark"] .logo-on-dark {
  display: block;
}
.wordmark {
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  letter-spacing: 0.42em;
  font-size: 15px;
  text-transform: uppercase;
}
.site-nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lang,
.theme-toggle {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}
.theme-toggle::before {
  content: "◐ ";
}

/* ── Палуба ──────────────────────────────────────────────────────────────── */
/* Секция высотой в (разделы + 1) экран, внутри липкий кадр. Прокрутка целиком
   нативная: скрипт ничего не перехватывает, поэтому страница не дёргается, а
   слайды сменяются по положению страницы. Куб стоит на одном месте справа и
   только доворачивается к активной ячейке. */
.deck {
  position: relative;
  border-bottom: 1px solid var(--hair);
}
.deck-viewport {
  padding-top: 0;
}
.status-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
  color: var(--subtle);
}
.status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.status-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.status-list i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: akPulse 2s infinite;
}
.status-list li:nth-child(2) i {
  animation-delay: 0.4s;
}
.status-list li:nth-child(3) i {
  animation-delay: 0.8s;
}
.clock {
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
}
@keyframes akPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.deck-frame {
  position: relative;
  padding-top: 20px;
  padding-bottom: 24px;
}
.deck-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  /* Холст куба лежит слоем выше и перехватывал клики по кнопкам первого
     экрана: «Запросить демо» не работала вовсе, потому что нажатие попадало
     в холст. Текст и кнопки обязаны быть над ним. */
  position: relative;
  z-index: 2;
}
/* Ниже кнопок холст снова главный: там крутят куб, и мешать этому нечему. */
.deck-hero .lede,
.deck-hero .hero-kicker,
.deck-hero h1 {
  pointer-events: none;
}
.deck-hero .actions {
  pointer-events: auto;
}
/* Строка «ERP для управления компанией» — крупная надпись, а не служебная
   метка: она называет продукт, поэтому обычным начертанием и без разрядки. */
.hero-kicker {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.deck-hero h1 {
  margin: 0;
}
.deck-hero .lede {
  margin: 0;
  max-width: 58ch;
}
.deck-hero .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.deck-hint {
  color: var(--faint);
  font-size: 12px;
  margin: 8px 0 0;
}

/* Куб. Геометрия в переменных: позиция ячейки — --x/--y/--z, разлёт — --d,
   поворот — --rx/--ry на кубе. Скрипт меняет только их. */
.cube-area {
  position: relative;
  height: clamp(260px, 26vw, 340px);
  margin-top: 24px;
  perspective: none;
  cursor: grab;
  user-select: none;
}
.cube-area:active {
  cursor: grabbing;
}
.cube-shadow {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(380px, 70%);
  height: 78px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 48%, var(--shadow-cube) 0%, transparent 62%),
    radial-gradient(ellipse at 50% 50%, var(--shadow-cube) 0%, transparent 72%);
  filter: blur(5px);
  pointer-events: none;
}
.cube-pivot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.cube {
  transform-style: preserve-3d;
  transform: scale(var(--scale, 1)) rotateX(var(--rx, -35.264deg)) rotateY(var(--ry, -135deg));
}
.cell {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  left: calc(var(--cell) / -2);
  top: calc(var(--cell) / -2);
  padding: 0;
  border: 0;
  background: none;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x) * var(--d, var(--cell-d))), calc(var(--y) * var(--d, var(--cell-d)) - var(--cell-rise, 0px)), calc(var(--z) * var(--d, var(--cell-d))));
  transition: transform 500ms cubic-bezier(0.2, 0, 0, 1);
  cursor: pointer;
}
.cell[data-current] {
  --d: var(--cell-lift);
}
/* В изометрии радиальный вылет верхней передней ячейки направлен точно
   в камеру. Подъём открывает такой же заметный зазор, как у нижнего ряда. */
.cell:not(.cell-low)[data-current] {
  --cell-rise: calc(var(--cell) * 0.44);
}
.face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cell[data-current] .face {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.face-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9c4ba;
}
.cell-accent .face-label {
  color: #fff1ea;
}
/* Цвета граней — из фирменного знака; ячейка задаёт их переменными, поэтому
   верхний ряд, нижний ряд и медная ячейка отличаются только значениями.
   Затемнение нижнего ряда — цветом, а не filter: фильтр создаёт свой контекст
   композиции и плющит preserve-3d, отчего куб переставал быть кубом. */
.cell {
  --f-top: linear-gradient(135deg, #9ba0a8, #8e939b);
  --f-front: linear-gradient(135deg, #464b53, #383c43);
  --f-side: linear-gradient(135deg, #33373d, #2a2d33);
  --f-left: linear-gradient(135deg, #2b2e35, #22252b);
  --f-bottom: #15171b;
}
.cell-low {
  --f-top: linear-gradient(135deg, #7c8086, #72767c);
  --f-front: linear-gradient(135deg, #383c42, #2d3036);
  --f-side: linear-gradient(135deg, #292c31, #222428);
  --f-left: linear-gradient(135deg, #22252a, #1b1e22);
  --f-bottom: #111216;
}
.cell-accent {
  --f-top: linear-gradient(135deg, #f07a45, #d9541e);
  --f-front: linear-gradient(135deg, #e86a32, #c9501c);
  --f-side: linear-gradient(135deg, #d9541e, #b84416);
  --f-left: linear-gradient(135deg, #c9501c, #a93e14);
  --f-bottom: #8f3410;
}
.cell-accent.cell-low {
  --f-top: linear-gradient(135deg, #c06237, #ae4318);
  --f-front: linear-gradient(135deg, #ba5528, #a14016);
  --f-side: linear-gradient(135deg, #ae4318, #933612);
  --f-left: linear-gradient(135deg, #a14016, #873211);
  --f-bottom: #722a0d;
}
.face-front {
  background: var(--f-front);
  transform: translateZ(calc(var(--cell) / 2));
}
.face-back {
  background: var(--f-side);
  transform: rotateY(180deg) translateZ(calc(var(--cell) / 2));
}
.face-right {
  background: var(--f-side);
  transform: rotateY(90deg) translateZ(calc(var(--cell) / 2));
}
.face-left {
  background: var(--f-left);
  transform: rotateY(-90deg) translateZ(calc(var(--cell) / 2));
}
.face-top {
  background: var(--f-top);
  transform: rotateX(90deg) translateZ(calc(var(--cell) / 2));
}
.face-bottom {
  background: var(--f-bottom);
  transform: rotateX(-90deg) translateZ(calc(var(--cell) / 2));
}

/* Слайды: без скрипта — обычный список друг за другом. */
.slides {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 48px;
}
.slide-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--subtle);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(135deg, #9ba0a8, #464b53);
}
.swatch-accent {
  background: linear-gradient(135deg, #f07a45, #d9541e);
}
.slide-title {
  font-size: clamp(30px, 3.8vw, 52px);
  margin-bottom: 10px;
}
/* Название модуля в мета-строке: заголовком стоит обещание результата, и имя
   раздела обязано читаться рядом с ним, а не растворяться в служебной строке. */
.slide-module {
  color: var(--muted);
  font-weight: 600;
}
.slide-lede {
  color: var(--muted);
  font-size: 16px;
  max-width: 52ch;
}
/* Действия слайда. Восемь кадров палубы шли без единой кнопки: человек,
   которого зацепил именно склад, дальше склада пойти не мог. */
.slide-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
}
.slide-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-text);
  font-weight: 600;
  white-space: nowrap;
}
.slide-long {
  color: var(--subtle);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.usp-list {
  border-top: 1px solid var(--hair);
}
.usp-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.usp-n {
  color: var(--accent-text);
  font-size: 12px;
  padding-top: 3px;
}
.usp-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.usp-copy strong {
  font-size: 15px;
  line-height: 1.3;
}
.usp-copy span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--subtle);
}
.slide-link {
  margin: 14px 0 0;
}
/* Четыре плитки внизу слайда: плотный ряд фактов о разделе. */
.slide-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.slide-tiles li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
}
.tile-key {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.slide-tiles strong {
  font-size: 15px;
  line-height: 1.25;
}
.slide-tiles li > span:last-child {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--subtle);
}
.slide-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 0;
  max-width: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cue {
  color: var(--faint);
  font-size: 11px;
}
.deck-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.deck-dot {
  width: 16px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: var(--hair);
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}
.deck-dot[data-current] {
  width: 40px;
  background: var(--accent);
}

/* ── Режим липкой палубы (включается скриптом) ───────────────────────────── */
.js .deck {
  height: calc((var(--slides) + 1) * 100vh);
}
/* Кадр липнет ПОД шапкой и ровно на оставшуюся высоту окна: раньше он висел
   на всю высоту, начинаясь под шапкой, и низ уезжал за экран вместе с кубом. */
.js .deck-viewport {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  /* Кадр обязан резать слайды, иначе соседние видны на прокрутке. Но куб
     вращается и его верхний угол выходит за кадр: на обычном hidden грань
     обрывалась ровной линией. clip с запасом режет всё то же самое и оставляет
     кубу место повернуться. */
  overflow: clip;
  overflow-clip-margin: 160px;
}
/* Кадр не растягивается выше своей меры и прижат к верху: строка с именем
   продукта должна стоять сразу под шапкой, а не уезжать к середине экрана. */
.js .deck-frame {
  flex: 1;
  min-height: 0;
  max-height: 900px;
  margin-top: 0;
  margin-bottom: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-bottom: 16px;
}
/* Куб стоит на месте: правая половина кадра, вне потока слайдов. */
/* Куб выровнен по ВЕРХУ кадра, а не по проценту высоты: на высоком мониторе
   процент уводил его далеко вниз от заголовка. Так его верхняя грань стоит на
   уровне заголовка раздела на любом экране. */
.js .cube-area {
  position: absolute;
  right: 0;
  top: 0;
  width: 46%;
  height: min(46vh, 430px);
  margin: 0;
  transform: none;
  transition: right 600ms cubic-bezier(0.2, 0, 0, 1), top 600ms cubic-bezier(0.2, 0, 0, 1), height 600ms cubic-bezier(0.2, 0, 0, 1);
}
/* В hero область привязана ко второй строке сетки, ПОСЛЕ всего заголовка.
   Процент от полного кадра накладывал куб на кнопки при переносе текста. */
.js .deck[data-mode="hero"] .cube-area {
  grid-row: 2;
  right: 0;
  left: 0;
  top: 32px;
  bottom: 16px;
  width: 100%;
  height: auto;
  transform: none;
}
/* На первом экране кадр занимает всю высоту: текст стоит вверху, а куб
   заполняет остаток, поэтому под ним не остаётся пустого поля. */
.js .deck[data-mode="hero"] .deck-frame {
  max-height: none;
}
.js .deck[data-mode="hero"] .cube {
  /* Куб первого экрана обязан помещаться целиком: множитель считается от
     высоты окна, поэтому на ноутбуке он мельче, а на большом мониторе крупнее,
     и ни там ни там не срезается краем экрана. */
  --scale: min(1.15, 42vh / 355px);
}
/* В hero заголовок стоит в потоке первой строкой, поэтому подсказка и куб
   не накладываются друг на друга. При переходе к разделам он гаснет и
   вынимается из потока, освобождая кадр слайду. */
.js .deck-hero {
  transition: opacity 400ms cubic-bezier(0.2, 0, 0, 1), transform 400ms cubic-bezier(0.2, 0, 0, 1);
}
.js .deck-hero[data-hidden] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transform: translateY(-32px);
  pointer-events: none;
}
/* Строки кадра закреплены явно: в режиме раздела заголовок уходит из потока,
   и без этого слайды получали нулевую строку, а всю высоту забирали точки. */
.js .deck-hero {
  grid-row: 1;
}
.js .slides {
  grid-row: 2;
  position: relative;
  display: block;
  margin: 0;
  min-height: 0;
  height: 100%;
}
.js .deck-dots {
  grid-row: 3;
}
/* Слайд подъезжает снизу и гаснет вверх; ничего не двигает страницу. */
.js .slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  row-gap: 14px;
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.2, 0, 0, 1), transform 520ms cubic-bezier(0.2, 0, 0, 1);
}
.js .slide[data-active] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.js .slide[data-past] {
  transform: translateY(-28px);
}
.js .slide-head,
.js .slide .usp-list {
  max-width: 52%;
}
/* Шкала слайда с шагом около 1,5: название модуля — обещание — тезис —
   пояснение. Каждая ступень заметно крупнее следующей, иначе читатель не
   видит, что важнее, и читает всё подряд либо не читает ничего. */
.js .slide-title {
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.1;
  margin-bottom: 6px;
}
/* Полоса заголовка одной высоты на всех восьми слайдах: без неё ряд плиток
   съезжал на разделах с длинным обещанием, и при листании было видно, как
   нижняя часть кадра дёргается. */
.js .slide-head {
  min-height: min(168px, 22vh);
}
.js .slide .usp-list li {
  padding: 0;
}
.js .slide .usp-copy {
  gap: 4px;
}
.js .slide .usp-copy strong {
  font-size: clamp(17px, 1.42vw, 21px);
  line-height: 1.3;
  font-weight: 600;
}
/* Пояснение тезиса — мера 45–75 знаков в строке. На всю ширину колонки строка
   уходила за восемьдесят знаков, и глаз терял начало следующей. */
.js .slide .usp-copy span {
  font-size: clamp(14.5px, 1.12vw, 16.5px);
  line-height: 1.5;
  max-width: 58ch;
}
/* Три тезиса стоят плотной группой по центру отведённой полосы, а интервал
   между ними ограничен сверху: распределение по всей высоте разносило их на
   сто с лишним пикселей и открывало те самые пустоты. */
.js .slide .usp-list {
  grid-row: 2;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 26px);
  align-self: stretch;
  margin: 16px 0 22px;
}
.js .slide-link {
  margin-top: 10px;
}
.js .slide-tiles li {
  padding: 13px 15px;
}
.js .slide-tiles strong {
  font-size: 14.5px;
}
/* Под пояснение плитки отведены ровно три строки — и когда их две, и когда
   текст длиннее. Иначе ряд плиток на разных разделах имел разную высоту, и при
   листании палубы низ кадра прыгал на два десятка пикселей. */
.js .slide-tiles li > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.4em);
  font-size: 13px;
  line-height: 1.4;
}
.js .slide-meta {
  margin-bottom: 6px;
}
.js .slide-tiles {
  grid-row: 3;
  align-self: end;
  margin-top: 0;
}
.js .slide-cta {
  grid-row: 4;
  align-self: end;
  margin-top: 16px;
}
.js .slide-title {
  max-width: 18ch;
}
/* Обещание результата — вторая ступень: заметно мельче названия и заметно
   крупнее тезисов. */
.js .deck .slide .slide-lede {
  max-width: 34ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 1.62vw, 25px);
  font-weight: 500;
  line-height: 1.3;
}
.slide-detail {
  display: contents;
}
/* Старый HTML уже открытого preview получает ту же композицию без перезапуска. */
.slide-long,
.slide-closing,
.slide-link {
  display: none;
}

.js .deck[data-mode="hero"] .slides {
  pointer-events: none;
}

/* ── Факты и вопросы на внутренних страницах ──────────────────────────── */
.facts {
  display: grid;
  gap: 0 24px;
  margin-top: 24px;
}
.facts-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.facts li {
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}
.facts h3 {
  font-size: 17px;
}
.facts p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.facts-line {
  color: var(--subtle);
}
.faq {
  columns: 2;
  column-gap: 40px;
  margin-top: 32px;
}
.faq details {
  break-inside: avoid;
  border-top: 1px solid var(--hair);
  padding: 14px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--subtle);
  font-family: "JetBrains Mono", monospace;
}
.faq details[open] summary::after {
  content: "−";
}
.faq p {
  font-size: 15px;
  color: var(--muted);
  margin: 10px 0 0;
}

/* ── Заявка и подвал ─────────────────────────────────────────────────────── */
.section-cta {
  background: var(--panel-2);
  border-top: 1px solid var(--hair);
}
.cta-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  max-width: 640px;
}
.lead label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--subtle);
}
.lead input {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
}
.lead input:focus {
  border-color: var(--accent);
}
.lead button {
  grid-column: 1 / -1;
  justify-self: start;
}
.lead .consent,
.lead .form-status {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--subtle);
  margin: 0;
}
.lead .form-status:empty {
  display: none;
}
/* Согласия — отдельными галочками, мелко, но читаемо: это юридический текст,
   его должно быть видно, а не спрятано под кнопкой. */
.consent-check {
  grid-column: 1 / -1;
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: var(--subtle);
  cursor: pointer;
}
.consent-check input[type="checkbox"],
.section-cta.story-section .lead .consent-check input[type="checkbox"],
.talk-lead .consent-check input[type="checkbox"] {
  flex: none;
  width: 18px;
  min-width: 18px;
  height: 18px;
  border: 0;
  background: none;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent);
}
.section-cta.story-section .lead .consent-check { font-size: 13px; color: var(--subtle); }
.consent-check + .consent-check { margin-top: -10px; }
.consent-check a {
  color: inherit;
  text-decoration: underline;
}
.hp {
  position: absolute;
  left: -9999px;
}
.trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--subtle);
  font-size: 12.5px;
}
.trust li::before {
  content: "• ";
  color: var(--accent);
}
.site-footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--hair);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 32px;
}
.site-footer h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 12px;
}
.site-footer nav a {
  display: block;
  color: var(--muted);
  font-size: 15px;
  padding: 4px 0;
}
.footer-requisites {
  font-size: 13px;
  color: var(--faint);
  margin-top: 12px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  color: var(--faint);
  font-size: 13px;
}

/* ── Внутренние страницы ─────────────────────────────────────────────────── */
.page-head {
  padding: clamp(48px, 7vw, 96px) 0 32px;
}
.page-metric strong {
  color: var(--accent-text);
  font-size: 15px;
}
.hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 96px;
}
.hub-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}
.hub-card-accent {
  border-color: color-mix(in srgb, var(--copper) 45%, var(--hair));
}
.hub-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.hub-card h2 {
  font-size: 22px;
  margin: 0 0 4px;
}
.hub-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.hub-more {
  margin-top: auto;
  padding-top: 12px;
}
.docs-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 96px;
}
.toc,
.toc-shell {
  position: sticky;
  top: 88px;
  align-self: start;
}
.toc h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
}
.toc a {
  display: block;
  padding: 6px 0;
  color: var(--muted);
  font-size: 15px;
}
.toc a[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 600;
}
.docs-body > section {
  margin-bottom: 40px;
}
.docs-body h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

/* ── Типографика текстовых страниц ─────────────────────────────────────────
   Один набор правил на все страницы, где человек читает подряд: правовые
   документы, статьи и термины, безопасность, разделы возможностей.

   Базовые правила сайта сняты с посадочных: ссылка там — кнопка, а список —
   плитки, поэтому `a` идёт без подчёркивания, а `ul` без маркеров и отступа.
   В тексте это читается как сплошное полотно: ссылку не видно, пока не
   наведёшь мышь, а перечисление не отличить от абзаца. Ниже — обратное. */
.prose {
  line-height: 1.72;
}
.prose p {
  max-width: 70ch;
  margin: 0 0 1.05em;
}
.prose > *:last-child {
  margin-bottom: 0;
}
/* Ссылку видно без наведения: цвет акцента и подчёркивание с отбивкой от
   буквы, при наведении — доведённое до полного. Подчёркивание, а не только
   цвет: цвет один и тот же у ссылки и у выделенного слова, а подчёркивание
   принадлежит только ссылке. */
.prose a,
.legal-note-link a,
.consent a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition:
    text-decoration-color 0.12s ease,
    color 0.12s ease;
}
.prose a:hover,
.legal-note-link a:hover,
.consent a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.prose a:focus-visible,
.legal-note-link a:focus-visible,
.consent a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Перечисление отличается от абзаца отступом и коротким акцентным штрихом
   вместо точки: точка спорит с текстом, штрих ведёт взгляд по столбцу. */
.prose ul,
.prose ol {
  margin: 0 0 1.15em;
  padding: 0;
  max-width: 70ch;
}
.prose ul {
  list-style: none;
}
.prose ol {
  list-style: decimal;
  padding-left: 1.5em;
}
.prose li {
  margin-bottom: 0.4em;
}
.prose li:last-child {
  margin-bottom: 0;
}
.prose ul > li {
  position: relative;
  padding-left: 22px;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.6;
}
.prose strong {
  color: var(--ink);
  font-weight: 600;
}
/* Абзац из одного жирного куска — это подпись к перечислению, а не абзац: он
   прижимается к своему списку, а список получает волосок слева, чтобы видно
   было, где перечисление началось и где кончилось. */
.prose p:has(> strong:only-child) {
  margin-bottom: 0.45em;
}
.prose p:has(> strong:only-child) + ul {
  margin-left: 2px;
  padding-left: 20px;
  border-left: 2px solid var(--hair);
}
.prose p:has(> strong:only-child) + ul > li {
  padding-left: 18px;
}
.prose p:has(> strong:only-child) + ul > li::before {
  left: 0;
}

/* ── Выходные данные страницы ──────────────────────────────────────────────
   «Редакция от … · Версия …» — служебная строка: её сверяют до чтения, но не
   читают. Поэтому моноширинный набор, приглушённый тон и волосок сверху,
   отделяющий её от текста. Одинаково на документе, статье и термине. */
.meta,
.doc-meta {
  color: var(--subtle);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.page-head .meta {
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  max-width: none;
}
.pending {
  color: var(--subtle);
  font-style: italic;
}
.meta {
  color: var(--subtle);
}
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.shot {
  margin: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--panel-2);
}
.shot figcaption {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--subtle);
}
.scheme {
  color: var(--subtle);
  margin: 28px 0 40px;
  max-width: none;
}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cta-grid {
    grid-template-columns: 1fr;
  }
  .hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .docs-grid {
    grid-template-columns: 1fr;
  }
  .toc,
  .toc-shell {
    position: static;
  }
}
@media (max-width: 760px) {
  :root {
    --cell: 92px;
    --cell-d: 50px;
    --cell-lift: 74px;
  }
  .site-nav,
  .status-list li:nth-child(n + 3),
  .clock {
    display: none;
  }
  .slide-body,
  .slide-facts,
  .facts-3,
  .hub,
  .lead {
    grid-template-columns: 1fr;
  }
  .js .deck[data-mode="story"] .slide-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq {
    columns: 1;
  }
  .js .deck-stage {
    min-height: 0;
  }
  .js .deck[data-mode] .slides,
  .js .deck[data-mode] .slide {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .js .deck[data-mode] .slides {
    display: flex;
  }
  .js .slide-head,
  .js .slide .usp-list {
    max-width: none;
  }
  .js .slide-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .js .deck[data-mode="story"] .cube-area {
    position: relative;
  }
  .js .deck[data-mode="story"] .cube-pivot,
  .js .deck[data-mode="story"] .cube-shadow {
    left: 50%;
  }
  .js .deck-dots {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* WebGL draws the same eight interactive cells with actual bevels and PBR.
   CSS geometry stays as the accessible fallback and source of motion. */
/* Поле вокруг области: при вращении угол куба уходит дальше своей клетки, и
   на прежних 90 пикселях нижняя грань срезалась ровной линией. */
.cube-render-canvas {
  position: absolute;
  inset: -170px;
  width: calc(100% + 340px);
  height: calc(100% + 340px);
  z-index: 1;
}
.cube-area[data-renderer="webgl"] .face {
  opacity: 0;
}

/* ── Движение палубы ────────────────────────────────────────────────────────
   Куб и слайды ведёт прогресс прокрутки, а не переключение состояний.
   Правила, по которым это сделано:
     * анимируются только transform и opacity — композитные свойства, они не
       вызывают пересчёт раскладки; left/top/width анимировать нельзя, именно
       от них были рывки;
     * ни одного transition на этих свойствах: значение и так меняется каждый
       кадр вслед за прокруткой, а переход поверх дал бы запаздывание;
     * едет ВСЯ область куба, а не опора внутри неё: так вместе с ней едет и
       холст объёмного куба, который лежит в той же области;
     * раскладка читается только при изменении размера окна.
   Тот же результат даёт CSS scroll-driven animations (animation-timeline:
   scroll()), но их поддержка неполная, а переменные работают везде. */
.js .deck[data-mode] .cube-area {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  inset: auto;
  width: min(46%, 620px);
  height: min(46vh, 430px);
  margin: 0;
  transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) scale(var(--as, 1));
  transform-origin: 50% 50%;
  transition: none;
  will-change: transform;
}
.js .deck[data-mode] .slide {
  transition: none;
  will-change: transform, opacity;
}

/* Первый экран лежит поверх кадра ВСЕГДА: раньше он при переходе к разделу
   вынимался из потока (position менялся), и текст скакал. Теперь меняются
   только прозрачность и сдвиг, а их ведёт прогресс прокрутки. */
.js .deck[data-mode] .deck-hero {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transition: none;
  will-change: transform, opacity;
}
.js .deck[data-mode] .deck-hero[data-hidden] {
  transform: none;
}

/* ── Шапка и знак ────────────────────────────────────────────────────────────
   Логотип крупнее в полтора раза, шапка выросла под него. Высота шапки нужна
   и липкому кадру палубы, поэтому она задана здесь же, рядом со знаком. */
.site-header {
  height: 96px;
}
.logo-img {
  height: 66px;
}
.js .deck-viewport {
  top: 96px;
  height: calc(100vh - 96px);
}

/* ── Шапка: меню модулей, значки, переключатель языка ───────────────────────── */
.site-nav {
  align-items: center;
}
.nav-menu {
  position: relative;
}
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.nav-trigger:hover,
.nav-menu[data-open] .nav-trigger {
  color: var(--ink);
}
.nav-menu[data-open] .nav-trigger svg {
  transform: rotate(180deg);
}
.nav-trigger svg {
  transition: transform 0.2s;
}
.nav-drop {
  position: absolute;
  left: -16px;
  top: calc(100% + 14px);
  min-width: 320px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 60;
}
.nav-menu[data-open] .nav-drop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-drop ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.nav-drop a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--ink);
}
.nav-drop a:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.nav-drop-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}
.nav-drop-note {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav-drop-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--hair);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-text);
}
.nav-drop-all svg {
  transform: rotate(-90deg);
}

/* Значок темы: солнце на светлой, месяц на тёмной. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.icon-btn:hover {
  color: var(--ink);
  border-color: var(--subtle);
}
.icon-btn .icon-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .icon-sun {
    display: none;
  }
  :root:not([data-theme="light"]) .icon-btn .icon-moon {
    display: inline-flex;
  }
}
:root[data-theme="dark"] .icon-btn .icon-sun {
  display: none;
}
:root[data-theme="dark"] .icon-btn .icon-moon {
  display: inline-flex;
}

/* Язык: текущий и второй рядом, как сегменты. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.lang-switch span {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 9px;
  border-radius: 999px;
}
.lang-on {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.lang-off {
  color: var(--faint);
}
.lang-switch:hover .lang-off {
  color: var(--ink);
}

/* ── Подсказка прокрутки под кубом ──────────────────────────────────────────
   Мышь с бегущим колесом: узнаваемый знак «листайте вниз». Гаснет вместе с
   первым экраном — прозрачность ведёт тот же прогресс прокрутки. */
.scroll-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.scroll-mouse {
  position: relative;
  width: 24px;
  height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  opacity: 0.75;
}
.scroll-mouse i {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  animation: akWheel 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes akWheel {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    transform: translateY(12px);
    opacity: 0;
  }
  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}
@media (max-width: 760px) {
  .header-row {
    gap: 8px;
  }
  .site-header .logo-img {
    height: clamp(32px, 9vw, 44px);
  }
  .header-actions {
    gap: 6px;
  }
  .header-actions .btn {
    font-size: 12px;
    padding-inline: 10px;
  }
  /* «Запросить демо» стоит в шапке рядом с «Войти» такой же компактной
     кнопкой; переключатель темы на телефоне скрыт — места на четыре элемента
     в строке нет, а тема берётся из системной. */
  .header-actions .icon-btn,
  .nav-demo-short {
    display: none;
  }
  .nav-drop {
    position: static;
    min-width: 0;
  }
  .scroll-cue {
    display: none;
  }
}

/* Точки разделов на первом экране не нужны: там ещё нечего листать. */
.js .deck[data-mode="hero"] .deck-dots {
  opacity: 0;
  pointer-events: none;
}
.js .deck-dots {
  transition: opacity 0.3s;
}
/* Строка «Возможности» в списке модулей — в одну строку со стрелкой. */
.nav-drop-all {
  white-space: nowrap;
  gap: 10px;
}
.nav-drop-all svg {
  flex: none;
}
/* Указатель прокрутки стоит выше края и не задевает точки разделов. */
.scroll-cue {
  bottom: 26px;
}
.scroll-mouse {
  width: 22px;
  height: 34px;
}

/* ── Список модулей ────────────────────────────────────────────────────────
   Пункты идут ровной решёткой: пять строк в столбце, по строке на модуль, без
   переносов. Раньше длинные названия переносились на вторую строку, и список
   выглядел рваным. */
.nav-drop {
  left: -18px;
  min-width: 0;
  padding: 12px;
  border-radius: 20px;
}
.nav-drop ul {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 2px 8px;
}
.nav-drop li {
  display: flex;
}
.nav-drop a {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  white-space: nowrap;
  color: var(--muted);
}
.nav-drop a:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.nav-drop-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
.nav-drop a:hover .nav-drop-title {
  font-weight: 600;
}

/* Пункты списка выравниваются по левому краю, колонки одинаковой ширины:
   центрирование пришло по наследству и делало список зыбким. */
.nav-drop {
  text-align: left;
}
.nav-drop ul {
  grid-auto-columns: minmax(190px, 1fr);
}
.nav-drop a {
  justify-content: flex-start;
  text-align: left;
}

/* ── Выпадающее меню: как в приложении ──────────────────────────────────────
   Скругление, поля, тень, высота пункта и появление взяты из продукта
   (frontend/src/index.css, .ak-menu и .ak-menu-item), чтобы сайт и кабинет
   вели себя одинаково. */
.nav-drop {
  left: -10px;
  top: calc(100% + 10px);
  min-width: 232px;
  padding: 7px;
  border: 1px solid var(--float-border);
  border-radius: 18px;
  background: var(--menu-bg);
  box-shadow: var(--shadow-pop);
  text-align: left;
}
.nav-menu[data-open] .nav-drop {
  animation: akDrop 240ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes akDrop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.nav-drop ul {
  display: block;
  gap: 0;
}
.nav-drop li {
  display: block;
}
.nav-drop a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 0;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1), color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-drop a:hover {
  background: var(--menu-hover);
  color: var(--ink);
}
.nav-drop-title {
  font: inherit;
  font-weight: inherit;
}
.nav-drop a:hover .nav-drop-title {
  font-weight: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu[data-open] .nav-drop {
    animation: none;
  }
}

/* Название занимает всю ширину пункта и прижато влево: так выравнивание не
   зависит от того, какой контейнер пытается центрировать содержимое. */
.nav-drop-title {
  flex: 1 1 auto;
  display: block;
  text-align: left;
}

/* ── Плотная палуба ─────────────────────────────────────────────────────────
   Шаг прокрутки равен высоте кадра, а не высоте экрана: иначе под последним
   разделом оставалась пустая треть экрана, и следующий блок «живые цифры»
   начинался далеко внизу. Переключатель разделов стоит сразу под плитками. */
:root {
  --deck-step: min(820px, calc(100vh - 96px));
}
.js .deck {
  /* Полшага запаса: без него кадр переставал липнуть ровно на последнем
     разделе, и его заголовок уезжал под шапку. */
  height: calc((var(--slides) + 1.5) * var(--deck-step));
}
.js .deck-viewport {
  height: var(--deck-step);
}
.js .deck-frame {
  max-height: none;
  padding-bottom: 12px;
}
/* Пять дорожек на четыре блока: последняя пустая. Свободная высота кадра
   делится между полосой тезисов и нижним полем в отношении 1,618 к 1, поэтому
   ряд плиток встаёт примерно на линию золотого сечения кадра — одинаково на
   всех восьми слайдах и на любом экране, независимо от длины заголовка. */
.js .slide {
  grid-template-rows: auto minmax(min-content, 2.6fr) auto auto minmax(0, 1fr);
}
.js .slide-tiles {
  margin-top: 16px;
}
.js .deck-dots {
  margin-top: 12px;
}

/* Невысокий кадр (ноутбук 1280×720 и любое окно ниже 800 px). Кадр палубы —
   это высота окна минус шапка, и на нём полный набор ступеней не помещается:
   строка действий уходила за нижний край. Уменьшается вся шкала целиком, а не
   выбрасывается ступень: пропавший ряд плиток или пропавшая кнопка ломают
   композицию сильнее, чем шрифт на два пункта мельче. */
@media (min-width: 1101px) and (max-height: 800px) {
  .js .slide-head {
    min-height: min(108px, 17vh);
  }
  .js .slide-title {
    font-size: clamp(26px, 2.3vw, 34px);
  }
  .js .deck .slide .slide-lede {
    font-size: clamp(17px, 1.4vw, 19px);
  }
  .js .slide .usp-list {
    gap: 8px;
    margin: 8px 0 12px;
  }
  .js .slide .usp-copy strong {
    font-size: 17px;
  }
  .js .slide .usp-copy span {
    font-size: 14px;
    line-height: 1.45;
  }
  .js .slide-tiles li {
    padding: 10px 12px;
  }
  .js .slide-tiles strong {
    font-size: 13.5px;
  }
  .js .slide-tiles li > span:last-child {
    font-size: 12px;
    line-height: 1.35;
    min-height: calc(3 * 1.35em);
  }
  .js .slide-cta {
    margin-top: 12px;
  }
}

/* Указатель прокрутки стоит под кубом: координату даёт скрипт, потому что низ
   куба зависит от его масштаба и высоты окна. */
.js .scroll-cue {
  top: var(--cue-y, auto);
  bottom: auto;
}

/* Центр области куба задаётся напрямую: половину ширины вычитает сам CSS,
   поэтому куб стоит по центру, даже если ширина области поменялась после
   замера. Раньше половина бралась из скрипта и отставала на кадр. */
.js .deck[data-mode] .cube-area {
  transform: translate3d(calc(var(--ax, 0px) - 50%), calc(var(--ay, 0px) - 50%), 0) scale(var(--as, 1));
}

/* Команда: композиция и движение из исходного Sites-макета.
   --team-progress — путь секции через окно, от 0 до 1. */
.team-showcase { overflow: clip; padding-block: clamp(72px, 8vw, 128px); }
.team-showcase .centered-intro { max-width: 880px; margin-inline: auto; text-align: center; }
.team-showcase .eyebrow { color: var(--accent-text); margin-bottom: 32px; }
.team-showcase h2 { font-size: clamp(34px, 4.8vw, 72px); line-height: 1.08; }
.team-showcase .soft-heading { color: var(--muted); }
.team-showcase .centered-intro > p:not(.eyebrow) { max-width: 590px; margin: 28px auto 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.65; text-wrap: balance; }
.team-showcase .team-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: clamp(18px, 2.2vw, 34px); margin: 96px 8px 70px; isolation: isolate; }
.team-showcase .team-screen { min-width: 0; margin: 0; position: relative; will-change: transform; }
.team-showcase .team-left { transform: translateX(calc(130px - var(--team-progress, .5) * 260px)) rotate(calc(-1deg - var(--team-progress, .5) * 4deg)); z-index: 1; }
.team-showcase .team-center { transform: translateY(calc(25px - var(--team-progress, .5) * 75px)); z-index: 2; }
.team-showcase .team-right { transform: translateX(calc(-130px + var(--team-progress, .5) * 260px)) rotate(calc(1deg + var(--team-progress, .5) * 4deg)); z-index: 1; }
.team-showcase .product-window { display: block; border: 1px solid var(--hair); border-radius: 20px; background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px -24px var(--shadow-cube), 0 3px 12px -6px var(--shadow-cube); overflow: hidden; }
.team-showcase .team-facts { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; color: var(--muted); font: 14px/1.6 "JetBrains Mono", monospace; text-align: center; }
.team-showcase .team-facts i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
@media (max-width: 800px) {
  .team-showcase .team-scenes { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 540px; margin: 48px auto; }
  .team-showcase .team-screen { transform: none; will-change: auto; }
  .team-showcase .team-facts { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-showcase .team-screen { transform: none; will-change: auto; }
}

/* Нижняя история: связанные операции → подключения → личная панель → запуск.
   Цифры обозначают разделы и шаги; данные примера панели подписаны как демонстрационные. */
.story-section { --story-gap: clamp(32px, 5vw, 76px); scroll-margin-top: 100px; }
.story-section + .story-section,
.story-section + .doc-index,
.doc-index + .story-section {
  border-top: 1px solid var(--hair-2);
}
.story-section h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1.09; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.story-section h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.025em; }
.story-section p { line-height: 1.65; }
.story-section .story-eyebrow { display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--accent-text); margin-bottom: 26px; }
.story-eyebrow > span { color: var(--subtle); letter-spacing: 0; }
.story-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--story-gap); margin-bottom: 64px; }
.story-heading h2 { margin: 0; }
.connectors-section .story-heading, .launch-section .story-heading { grid-template-columns: 1.25fr 1fr; }
.story-lede { color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); max-width: 54ch; margin: 0; }
.anchor-alias { display: block; scroll-margin-top: 100px; }

/* Три реальные сцены одного процесса. Сохраняем исходное движение карточек. */
.team-showcase .story-eyebrow { justify-content: center; }
.team-showcase .centered-intro > p:not(.eyebrow) { max-width: 750px; }
.team-showcase .product-window { background: linear-gradient(145deg, var(--panel-2), var(--panel) 60%); }
.team-screenshot-link { display: block; color: inherit; text-decoration: none; }
.team-screenshot-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.team-screen-heading { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 22px; }
.team-screen-heading strong { font-size: clamp(16px, 1.35vw, 19px); font-weight: 500; line-height: 1.35; }
.team-screen-heading .screen-index { color: var(--accent-text); font-size: 12px; }
.team-screen-heading .screen-expand { margin-left: auto; color: var(--muted); font-size: 20px; }
.team-screenshot-link img { display: block; width: 100%; height: auto; border-block: 1px solid var(--hair); }
.team-screenshot-link:focus-visible { outline: none; }
.team-screenshot-link:focus-visible::after { outline: 2px solid var(--accent-text); outline-offset: -3px; }
.team-screenshot-link:hover .screen-expand { color: var(--accent-text); }
.team-screen-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 16px 20px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.team-screen-caption > span:last-child { color: var(--ink); }

.process-captions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.process-captions li { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; font-size: 16px; color: var(--muted); }
.process-captions .mono { color: var(--accent-text); }
.process-arrow { position: absolute; right: -22px; color: var(--subtle); }

/* Четыре направления обмена: типографика и единая линия данных. */
.connectors-section { border-top: 1px solid var(--hair); }
.connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.connection-grid > li { display: flex; flex-direction: column; padding: 24px 25px 0; border-right: 1px solid var(--hair); min-width: 0; }
.connection-grid > li:first-child { padding-left: 0; }
.connection-grid > li:last-child { padding-right: 0; border-right: 0; }
.connection-number { display: block; font-size: clamp(76px, 7.6vw, 112px); font-weight: 400; line-height: 1; letter-spacing: -.075em; color: var(--accent-text); margin-bottom: 35px; }
.connection-grid h3 { margin: 0 0 16px; min-height: 2.6em; }
.connection-grid p { font-size: 16px; color: var(--muted); margin: 0 0 26px; }
.connection-sources { margin-top: auto; font-size: 12px; line-height: 1.8; color: var(--subtle); min-height: 3.6em; }
.connection-destination { display: flex; align-items: center; gap: 12px; padding: 25px 0; font-size: 14px; color: var(--muted); }
.connection-destination > span { color: var(--accent-text); font-size: 22px; }
.connection-summary { display: flex; align-items: center; gap: 28px; padding: 26px 0; border-block: 1px solid var(--hair); }
.connection-mark { font-size: 14px; letter-spacing: .2em; color: var(--accent-text); }
.connection-summary strong { font-size: 17px; }
.connection-summary p { font-size: 15px; margin: 0 0 0 auto; max-width: 40ch; color: var(--muted); }
.integration-extension { display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--story-gap); margin-top: 48px; }
.integration-extension h3 { max-width: 20ch; }
.integration-extension p { font-size: 17px; color: var(--muted); }
.integration-extension .more { font-size: 14px; margin-top: 10px; display: inline-block; }

/* Личная панель. Подборки меняют состав и приоритеты демонстрационной панели. */
.dashboard-section { background: var(--panel); border-block: 1px solid var(--hair); }
.dashboard-composition { display: grid; grid-template-columns: .8fr 1.6fr; gap: var(--story-gap); align-items: center; }
.dashboard-points { display: grid; gap: 28px; }
.dashboard-points li { display: grid; grid-template-columns: 26px 1fr; gap: 16px; }
.dashboard-points .mono { color: var(--accent-text); padding-top: 5px; }
.dashboard-points h3 { font-size: 20px; margin-bottom: 12px; }
.dashboard-points p { font-size: 16px; color: var(--muted); margin: 0; }
.dashboard-example { background: var(--canvas); border: 1px solid var(--hair); border-radius: 22px; padding: 26px; box-shadow: 0 18px 45px -30px var(--shadow-cube); min-width: 0; }
.dashboard-example-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--hair); }
.dashboard-example-head strong { font-size: 17px; letter-spacing: -.025em; }
.dashboard-example-head .mono { font-size: 12px; color: var(--subtle); }
.dashboard-presets { display: flex; gap: 8px; flex-wrap: wrap; padding: 22px 0; }
.dashboard-presets button { font: 500 13px/1.4 Onest, sans-serif; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; background: transparent; padding: 10px 14px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.dashboard-presets button:hover { border-color: var(--accent); color: var(--accent-text); }
.dashboard-presets button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.dashboard-widget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-widget { min-width: 0; min-height: 192px; position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--panel); border: 1px solid var(--hair); border-radius: 12px; padding: 20px; overflow: hidden; }
.dashboard-widget[hidden], .dashboard-preset-notes [hidden] { display: none; }
.dashboard-widget[data-primary="true"] { grid-column: span 3; min-height: 170px; border-color: color-mix(in srgb, var(--accent) 55%, var(--hair)); background: linear-gradient(115deg, var(--accent-soft), var(--panel) 75%); padding-right: 34%; }
.widget-tag { font-size: 12px; color: var(--subtle); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.widget-grip { position: absolute; right: 14px; top: 12px; font-size: 21px; color: var(--hair); line-height: 1; }
.dashboard-widget h4 { margin: 0 0 8px; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.dashboard-widget p { font-size: 13px; color: var(--subtle); line-height: 1.5; margin: 0; }
.dashboard-widget[data-primary="true"] h4 { font-size: clamp(22px, 2vw, 28px); }
.dashboard-widget[data-primary="true"] .widget-tag { color: var(--accent-text); }
.widget-placeholder { display: none; }
.dashboard-widget[data-primary="true"] .widget-placeholder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: absolute; width: 22%; height: 54%; right: 7%; bottom: 23%; opacity: .22; }
.widget-placeholder i { border: 1px solid var(--accent); border-radius: 3px; }
.dashboard-preset-notes { padding-top: 22px; min-height: 65px; }
.dashboard-preset-notes p { font-size: 14px; color: var(--muted); margin: 0; }
.dashboard-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 38px; margin-top: 48px; border-top: 1px solid var(--hair); }
.dashboard-foot strong { font-size: 19px; letter-spacing: -.02em; }
.dashboard-foot > span { font-size: 15px; color: var(--muted); }

/* Четыре шага: крупные номера и единая последовательность. */
.launch-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.launch-steps li { position: relative; border-top: 1px solid var(--hair); padding-top: 30px; display: flex; flex-direction: column; }
.launch-steps li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: absolute; top: -4px; }
.launch-number { font-size: clamp(58px, 6vw, 86px); font-weight: 400; letter-spacing: -.07em; line-height: 1.1; color: var(--accent-text); margin-bottom: 35px; }
.launch-steps h3 { font-size: clamp(19px, 1.6vw, 22px); margin: 0 0 15px; min-height: 2.6em; }
.launch-steps p { font-size: 16px; color: var(--muted); margin-bottom: 25px; }
.launch-outcome { color: var(--subtle); border-top: 1px solid var(--hair); font-size: 12px; padding-top: 16px; margin-top: auto; }
.launch-custom { display: flex; align-items: center; gap: 20px; padding: 28px 30px; border: 1px solid var(--hair); border-radius: 12px; margin-top: 60px; }
.custom-swatch { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; background: var(--copper); }
.launch-custom strong { white-space: nowrap; font-size: 18px; }
.launch-custom p { font-size: 16px; color: var(--muted); max-width: none; margin: 0 0 0 auto; }

/* Более спокойная подача контроля и вопросов после визуальных блоков. */
.security-section { background: var(--panel); border-block: 1px solid var(--hair); }
.security-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--story-gap); margin-bottom: 50px; }
.security-heading h2 { margin: 0; }
.security-heading .more { display: inline-block; margin-top: 24px; font-size: 15px; }
.security-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.security-facts li { border-top: 1px solid var(--hair); padding-top: 24px; }
.security-sign { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; color: var(--accent-text); font-size: 25px; margin-bottom: 22px; }
.security-facts h3 { font-size: 19px; margin-bottom: 15px; }
.security-facts p { color: var(--muted); font-size: 16px; margin: 0; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--story-gap); }
.faq-section h2 { font-size: clamp(32px, 3.3vw, 50px); }
.faq-section .faq { columns: auto; margin: 0; border-bottom: 1px solid var(--hair); }
.faq-section details { padding: 24px 0; }
.faq-section summary { display: grid; grid-template-columns: 28px 1fr 20px; gap: 18px; font-size: 18px; font-weight: 500; }
.faq-number { color: var(--subtle); font-size: 12px; margin-top: 4px; }
.faq-section summary::after { font-size: 20px; color: var(--accent-text); line-height: 1.2; }
.faq-section .faq p { margin: 18px 36px 0 46px; font-size: 16px; }
.section-cta.story-section { background: var(--panel-2); }
.section-cta.story-section h2 { font-size: clamp(36px, 4vw, 60px); max-width: 19ch; margin: 0 0 26px; }
.section-cta.story-section .cta-grid { grid-template-columns: 1.15fr 1fr; gap: var(--story-gap); }
.section-cta.story-section .lead { grid-template-columns: 1fr; background: var(--panel); padding: clamp(25px, 3vw, 44px); border: 1px solid var(--hair); border-radius: 18px; margin: 0; gap: 22px; }
.section-cta.story-section .lead label { font-size: 14px; color: var(--muted); gap: 9px; }
.section-cta.story-section .lead input { border-radius: 8px; background: var(--canvas); font-size: 16px; padding: 14px 16px; min-width: 0; width: 100%; }
.section-cta.story-section .lead button { width: 100%; justify-content: center; margin-top: 8px; }
.section-cta.story-section .trust { gap: 18px; margin-top: 36px; color: var(--muted); font-size: 16px; }
.section-cta.story-section .trust li { display: flex; gap: 18px; align-items: center; }
.section-cta.story-section .trust li::before { display: none; }
.section-cta.story-section .trust .mono { color: var(--accent-text); }

@media (max-width: 1100px) {
  .site-nav { display: none; }
  .story-heading, .security-heading { grid-template-columns: 1fr 1fr; gap: 32px; }
  .dashboard-composition { grid-template-columns: 1fr; }
  .dashboard-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .dashboard-points li { display: block; }
  .dashboard-points .mono { display: block; margin-bottom: 14px; }
  .dashboard-example { max-width: 100%; }
  .connection-grid > li { padding-inline: 16px; }
  .connection-summary { flex-wrap: wrap; }
  .connection-summary p { margin-left: 0; max-width: none; }
  .security-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .launch-custom { flex-wrap: wrap; }
  .launch-custom p { margin-left: 34px; }
}
@media (max-width: 800px) {
  .story-section { scroll-margin-top: 85px; }
  .story-heading, .connectors-section .story-heading, .launch-section .story-heading, .security-heading, .faq-layout, .integration-extension, .section-cta.story-section .cta-grid { grid-template-columns: 1fr; gap: 28px; }
  .story-heading { margin-bottom: 42px; }
  .story-section h2 { font-size: clamp(34px, 7vw, 48px); }
  .story-section .story-eyebrow { margin-bottom: 22px; }
  .story-section .story-lede { font-size: 17px; }
  .team-showcase .team-scenes { margin-top: 42px; }
  .team-showcase .product-window { min-height: 290px; }
  .process-captions { grid-template-columns: 1fr; gap: 20px; }
  .process-captions li { justify-content: start; }
  .process-arrow { position: static; margin-left: auto; transform: rotate(90deg); }
  .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection-grid > li { padding: 24px 22px 0; }
  .connection-grid > li:nth-child(2n) { border-right: 0; padding-right: 0; }
  .connection-grid > li:nth-child(2n + 1) { padding-left: 0; }
  .connection-grid > li:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .connection-number { font-size: 76px; margin-bottom: 24px; }
  .connection-grid h3 { font-size: 20px; }
  .connection-grid p { font-size: 16px; }
  .connection-summary { gap: 15px; padding-block: 24px; }
  .connection-summary strong { font-size: 16px; }
  .integration-extension { margin-top: 36px; }
  .integration-extension h3 { max-width: none; margin: 0; }
  .dashboard-points { grid-template-columns: 1fr; }
  .dashboard-points li { display: grid; }
  .dashboard-points .mono { margin-bottom: 0; }
  .dashboard-example { padding: 18px; border-radius: 16px; }
  .dashboard-presets { gap: 6px; }
  .dashboard-presets button { font-size: 12px; padding: 9px 10px; }
  .dashboard-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-widget { min-height: 165px; padding: 16px; }
  .dashboard-widget[data-primary="true"] { grid-column: span 2; min-height: 165px; }
  .dashboard-widget:last-child { grid-column: auto; }
  .dashboard-widget-grid > :not([hidden]):last-child { grid-column: span 2; }
  .dashboard-widget[data-primary="true"] .widget-placeholder { gap: 6px; }
  .dashboard-foot { display: block; margin-top: 32px; padding-top: 28px; }
  .dashboard-foot > span { display: block; margin-top: 12px; }
  .launch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .launch-steps h3 { font-size: 20px; }
  .launch-number { font-size: 66px; margin-bottom: 24px; }
  .launch-custom { padding: 22px; margin-top: 38px; gap: 15px; }
  .launch-custom p { margin-left: 29px; }
  .security-heading { margin-bottom: 40px; }
  .security-facts { gap: 28px; }
  .faq-section summary { grid-template-columns: 24px 1fr 16px; gap: 10px; font-size: 17px; }
  .faq-section .faq p { margin-left: 34px; margin-right: 10px; }
}
@media (max-width: 440px) {
  .connection-grid { grid-template-columns: 1fr; }
  .connection-grid > li { border-right: 0; padding: 24px 0 0; display: grid; grid-template-columns: 66px 1fr; gap: 0 18px; border-top: 1px solid var(--hair); }
  .connection-grid > li:first-child { border-top: 0; }
  .connection-number { grid-row: span 3; font-size: 60px; margin: 0; }
  .connection-grid h3 { min-height: 0; margin-bottom: 12px; }
  .connection-grid p { margin-bottom: 16px; }
  .connection-sources { min-height: 0; }
  .connection-destination { grid-column: 2; }
  .connection-summary .connection-mark { flex-basis: 100%; }
  .dashboard-widget-grid { grid-template-columns: 1fr; }
  .dashboard-widget, .dashboard-widget[data-primary="true"], .dashboard-widget-grid > :not([hidden]):last-child { grid-column: auto; min-height: 138px; }
  .dashboard-widget[data-primary="true"] { padding-right: 28%; }
  .dashboard-widget[data-primary="true"] .widget-placeholder { width: 16%; grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .dashboard-widget[data-primary="true"] h4 { font-size: 22px; }
  .dashboard-presets { flex-direction: column; align-items: stretch; }
  .dashboard-presets button { font-size: 13px; }
  .dashboard-preset-notes { min-height: 86px; }
  .launch-steps, .security-facts { grid-template-columns: 1fr; }
  .launch-steps li { padding-left: 78px; }
  .launch-number { position: absolute; left: 0; top: 24px; font-size: 56px; }
  .launch-steps h3 { min-height: 0; }
  .launch-custom strong { white-space: normal; }
  .security-facts li { display: grid; grid-template-columns: 40px 1fr; gap: 0 15px; }
  .security-sign { grid-row: span 2; margin: 0; align-self: start; }
  .security-facts h3 { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-presets button { transition: none; }
}

/* Пример дашборда с явно обозначенными демонстрационными показателями. */
.dashboard-example .dashboard-period { margin: 18px 0 0; color: var(--subtle); font-size: 12px; }
.dashboard-example .dashboard-presets { padding-top: 16px; }
.dashboard-widget { justify-content: flex-start; min-height: 260px; }
.dashboard-widget[data-primary="true"] { min-height: 250px; padding-right: 45%; }
.dashboard-widget h4 { font-size: 14px; color: var(--muted); font-weight: 500; }
.dashboard-widget[data-primary="true"] h4 { font-size: 17px; }
.widget-tag { margin-bottom: 10px; }
.widget-stat { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.widget-value { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -.055em; font-weight: 500; }
.widget-unit { font-size: 14px; white-space: nowrap; color: var(--muted); }
.dashboard-widget[data-primary="true"] .widget-value { font-size: clamp(40px, 4vw, 58px); }
.dashboard-widget .widget-metric-label { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.widget-note { display: block; font-size: 12px; line-height: 1.5; margin-top: 10px; color: var(--accent-text); }
.widget-chart { width: 100%; margin-top: 16px; }
.widget-chart svg { width: 100%; height: 70px; display: block; }
.chart-grid { stroke: var(--hair); stroke-width: 1; }
.chart-fill { fill: var(--accent); opacity: .08; }
.chart-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--accent); }
.chart-months { display: none; }
.dashboard-widget[data-primary="true"] .widget-chart { position: absolute; width: 35%; right: 5%; top: 48px; margin: 0; }
.dashboard-widget[data-primary="true"] .widget-chart svg { height: 130px; }
.dashboard-widget[data-primary="true"] .chart-months { display: flex; justify-content: space-between; font-size: 10px; color: var(--subtle); }
.widget-details { display: grid; gap: 7px; border-top: 1px solid var(--hair); margin-top: auto; padding-top: 14px; }
.widget-details > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 12px; font-size: 12px; line-height: 1.5; }
.widget-details dt { color: var(--subtle); }
.widget-details dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.dashboard-widget[data-primary="true"] .widget-details { margin-top: 20px; }
.widget-target { height: 5px; background: var(--hair); border-radius: 4px; overflow: hidden; margin: 20px 0; }
.widget-target > span { height: 100%; display: block; border-radius: inherit; background: var(--accent); }
.dashboard-widget[data-widget="projects"][data-primary="true"] { padding-right: 20px; }
.dashboard-widget[data-widget="projects"][data-primary="true"] .widget-details { grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) {
  .dashboard-widget { min-height: 240px; }
  .dashboard-widget[data-primary="true"] { min-height: 260px; }
}
@media (max-width: 440px) {
  .dashboard-widget, .dashboard-widget[data-primary="true"] { min-height: 0; padding-right: 16px; }
  .dashboard-widget[data-primary="true"] .widget-value { font-size: 44px; }
  .dashboard-widget .widget-details { margin-top: 18px; }
  .dashboard-widget[data-primary="true"] .widget-chart { position: static; width: 100%; margin-top: 16px; }
  .dashboard-widget[data-primary="true"] .widget-chart svg { height: 110px; }
  .dashboard-widget[data-widget="projects"][data-primary="true"] .widget-details { grid-template-columns: 1fr; gap: 7px; }
}

/* На телефоне и планшете все описания читаются в обычном потоке.
   Узкая колонка липкого кадра не вмещает три абзаца и четыре плитки. */
@media (max-width: 1100px) {
  .js .deck { height: auto; }
  .js .deck-viewport { position: relative; top: auto; height: auto; overflow: clip; }
  .js .deck-frame { display: block; max-height: none; padding-top: 32px; padding-bottom: 48px; }
  .js .deck[data-mode] .deck-hero { position: relative; inset: auto; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .js .deck[data-mode] .cube-area { position: relative; inset: auto; width: min(100%, 520px); height: 380px; margin: 40px auto 56px; transform: none; will-change: auto; }
  .js .deck[data-mode] .cube { --scale: .85; }
  .js .deck[data-mode] .slides { position: static; display: flex; flex-direction: column; height: auto; gap: 64px; margin: 0; }
  .js .deck[data-mode] .slide { position: relative; inset: auto; display: grid; grid-template-rows: auto auto auto auto; row-gap: 24px; opacity: 1 !important; transform: none !important; pointer-events: auto !important; will-change: auto; scroll-margin-top: 112px; }
  .js .slide-head, .js .slide .usp-list { max-width: none; }
  .js .slide-head { min-height: 0; }
  .js .slide .usp-list { min-height: 0; height: auto; grid-row: auto; display: block; margin-top: 0; }
  .js .slide-cta { grid-row: auto; align-self: start; margin-top: 4px; }
  .js .slide-tiles { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .js .deck-dots, .js .scroll-cue { display: none; }
}

/* Голосовой помощник: круглая кнопка со значком разговора и панель, в которой
   нет ничего, кроме её лица. Подписи, рамки и шапка убраны намеренно — вокруг
   собеседника не должно быть интерфейса, он разговаривает, а не заполняет
   форму. Управление сведено к двум кнопкам поверх картинки. */
.talk {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
/* Кнопка разговора — кружок с её лицом и зелёной точкой: собеседник на месте.
   Пузырь чата обещал переписку, которой здесь нет; лицо обещает разговор,
   который здесь есть. Подписи нет намеренно — кружок понятен без неё. */
.talk-open {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  box-shadow: var(--shadow-pop);
  transition: transform .18s ease;
}
.talk-open:hover { transform: translateY(-2px); }
.talk-open[aria-expanded="true"] { display: none; }
.talk-open__photo {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
/* Кольцо — знак, что собеседник на месте: медленный вздох, а не мигание.
   Живое, но не дёргает глаз у читающего страницу. */
.talk-open::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: .45;
  animation: talk-alive 2.8s ease-in-out infinite;
  pointer-events: none;
}
.talk-open__online {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--canvas);
  background: var(--ok);
}
@keyframes talk-alive {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.06); opacity: .12; }
}
@media (prefers-reduced-motion: reduce) {
  .talk-open::after { animation: none; }
}
/* На большом экране кружок крупнее: там он одна деталь среди многих и в
   компактном размере теряется, а на телефоне тот же размер уже занимал бы
   заметную часть экрана. */
@media (min-width: 1024px) {
  .talk-open,
  .talk-open__photo { width: 73px; height: 73px; }
  .talk-open__online {
    right: 3px;
    bottom: 3px;
    width: 16px;
    height: 16px;
  }
}

.talk-panel {
  position: relative;
  width: min(320px, calc(100vw - 28px));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: #000;
  line-height: 0;
}
.talk-panel__video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #000;
}
/* Соединение: пока лицо поднимается, посетитель видит не чёрный прямоугольник,
   а расходящиеся круги — знак, что его ждут, а не что всё сломалось. Появилось
   лицо — круги уходят: поверх собеседника им делать нечего. Слой лежит под
   кнопками: их порядок в разметке это и задаёт. */
.talk-connect {
  position: absolute;
  inset: 0 0 62px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  line-height: 1.3;
  color: #fff;
  background: radial-gradient(circle at 50% 45%, rgba(23, 111, 82, .38), rgba(0, 0, 0, .86) 72%);
  transition: background .6s ease;
}
.talk-connect[hidden] { display: none; }
.talk-connect__rings {
  position: relative;
  width: 84px;
  height: 84px;
}
.talk-connect__rings::before {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 26px var(--accent);
  animation: talk-core 1.8s ease-in-out infinite;
}
.talk-connect__rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: talk-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
.talk-connect__rings i:nth-child(2) { animation-delay: .8s; }
.talk-connect__rings i:nth-child(3) { animation-delay: 1.6s; }
.talk-connect__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
@keyframes talk-ring {
  0% { transform: scale(.35); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: scale(1.15); opacity: 0; }
}
@keyframes talk-core {
  0%, 100% { transform: scale(.92); opacity: .85; }
  50% { transform: scale(1.08); opacity: 1; }
}
/* Речь идёт по удержанию: пока кнопка не зажата, микрофон молчит. Постоянное
   слушание ловило шум комнаты и рвало реплики на полуслове, а здесь границу
   задаёт сам человек. */
.talk-push {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 16px;
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background .15s ease, transform .15s ease;
}
.talk-push:hover { background: var(--accent-hover); }
/* Поле для номера — прямо в окне разговора, над кнопкой речи. Раньше Лера
   доводила человека до согласия и отправляла искать форму на странице: искать
   никто не шёл, и разговор заканчивался ничем. Панель тёмная, поэтому поле
   светлое: оно должно читаться как место для ввода, а не как часть видео. */
.talk-lead {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 62px;
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  line-height: 1.3;
}
.talk-lead__label { display: grid; gap: 5px; }
.talk-lead__label > span {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.talk-lead input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
}
.talk-lead input::placeholder { color: rgba(255, 255, 255, .55); }
.talk-lead input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.talk-lead__submit {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
}
.talk-lead__submit:hover { background: var(--accent-hover); }
.talk-lead__submit[disabled] { opacity: .55; cursor: default; }
.talk-lead__status:empty { display: none; }
.talk-lead .consent-check { font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, .85); gap: 8px; }
.talk-lead .consent-check input[type="checkbox"] { width: 15px; min-width: 15px; height: 15px; }
.talk-lead .consent-check a { color: #fff; }
.talk-lead__status {
  margin: 0;
  font-size: 12px;
  color: #fff;
}

.talk-push[data-holding="true"] {
  background: var(--copper);
  transform: scale(.99);
}
.talk-push[disabled] { opacity: .55; cursor: default; }
.talk-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.talk-chip:hover { background: rgba(0, 0, 0, .7); }
/* Единственный текст на панели: почему она молчит. Без него отказ микрофона
   выглядит как сломанный помощник. */
.talk-panel__status {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 62px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
}
/* Имя и состояние, субтитры, подсказка. Шире телефона имя и подсказка
   скрыты: на маленькой карточке говорят лицо и кнопка. */
.talk-panel__who,
.talk-panel__hint { display: none; }
/* Точка состояния: жёлтая — соединяю, зелёная — слушает, мигает — думает. */
.talk-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0b341;
  flex: none;
}
.talk[data-state="ready"] .talk-panel__dot,
.talk[data-state="live"] .talk-panel__dot { background: var(--accent); }
.talk[data-state="thinking"] .talk-panel__dot { background: var(--accent); animation: akPulse 1s infinite; }
.talk[data-state="failed"] .talk-panel__dot { background: #d9541e; }
/* Пока кнопка зажата, вокруг неё расходится кольцо: видно, что микрофон открыт. */
.talk-push[data-holding="true"]::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--copper);
  animation: akTalkRing 1.1s ease-out infinite;
  pointer-events: none;
}
@keyframes akTalkRing {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.12); opacity: 0; }
}

@media (max-width: 760px) {
  /* Кнопка: круглая, в правом нижнем углу, над безопасной зоной iPhone. */
  .talk {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* Подвал не прячется под кнопкой. */
  .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* Панель — весь экран: лицо сверху, состояние и кнопка внизу. */
  html[data-talk-open] { overflow: hidden; }
  .talk-panel[hidden] { display: none; }
  .talk-panel {
    position: fixed;
    inset: 0;
    width: auto;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    line-height: 1.4;
  }
  .talk-panel__who {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 56px 12px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }
  .talk-panel__video {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
  .talk-chip {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: 36px;
    height: 36px;
  }
  .talk-panel__hint {
    display: block;
    margin: 0;
    padding: 12px 16px 6px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    text-align: center;
  }
  .talk-panel__status {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 12px;
  }
  .talk-push {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 64px;
    font-size: 16px;
    border-radius: 18px;
  }
  .talk-push svg { width: 22px; height: 22px; }
}

/* Клиентский модуль: собственный процесс раскрывается в общую систему. */
.custom-section { --custom-orange: #ee814c; --custom-progress: 1; --custom-core: 1; --app-enter: 1; border-bottom: 1px solid var(--hair); }
.custom-section .story-heading { grid-template-columns: 1fr; gap: 26px; }
.custom-section .story-lede { max-width: 830px; }
.custom-section .story-eyebrow { color: var(--copper); }
.custom-showcase { display: grid; grid-template-columns: 1.12fr 1fr; gap: 20px; }
.custom-map { display: flex; flex-direction: column; gap: 22px; min-width: 0; margin: 0; padding: 28px 24px 18px; border: 1px solid var(--hair); border-radius: 24px; background: radial-gradient(ellipse at 29% 53%, #ed753b12, transparent 58%), var(--panel); overflow: hidden; }
.custom-map > figcaption { font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
.custom-network { position: relative; height: 358px; flex-shrink: 0; margin-block: auto; isolation: isolate; }
.custom-network::before { content: ''; position: absolute; width: 230px; height: 220px; left: 5%; top: 40px; border-radius: 50%; background: radial-gradient(ellipse, #ee814c20, transparent 68%); opacity: calc(.3 + var(--custom-core) * .7); transform: scale(calc(.6 + var(--custom-core) * .4)); pointer-events: none; }
.custom-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.custom-track { stroke: var(--hair); stroke-width: 1.4; }
.custom-signal, .custom-wire-glow { stroke: url(#custom-flow); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--wire)); }
.custom-wire-glow { stroke-width: 6; opacity: .12; }
.custom-packet { fill: #e5ffc0; filter: drop-shadow(0 0 4px #c8f568); }
.custom-module-node { position: absolute; width: 49%; top: 70px; left: 0; display: flex; align-items: center; flex-direction: column; text-align: center; }
.custom-module-symbol { width: 178px; height: 193px; filter: drop-shadow(0 19px 16px #6d341b28); position: relative; z-index: 2; transform: perspective(650px) translateY(calc(20px - var(--custom-core) * 13px)) rotateX(calc(12deg - var(--custom-core) * 12deg)) rotateY(calc(-12deg + var(--custom-core) * 12deg)); }
.custom-module-node > strong { font-size: 21px; letter-spacing: -.035em; margin-top: 20px; }
.custom-module-node > span { color: var(--muted); font-size: 12px; margin-top: 8px; }
.custom-module-stack { position: absolute; width: 133px; height: 92px; top: -4px; left: calc(50% - 66.5px); z-index: 3; pointer-events: none; perspective: 850px; }
.custom-module-stack > span { --fan-x: 0px; --fan-y: 0px; --fan-angle: 0deg; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 12px; border: 1px solid color-mix(in srgb, var(--custom-orange) 42%, var(--hair)); border-radius: 10px; background: linear-gradient(150deg, color-mix(in srgb, var(--custom-orange) 5%, var(--panel-2)), var(--panel-2) 65%); box-shadow: 0 16px 28px -18px #000b, inset 0 1px 0 #ffffff0c; text-align: left; transform-origin: 50% 110%; font-size: 12px; overflow: hidden; transform: translate3d(calc(var(--card) * var(--fan-x)), calc(36px + var(--card) * (var(--fan-y) - 36px)), 0) rotate(calc(var(--card) * var(--fan-angle))) rotateX(calc(22deg - var(--card) * 22deg)) scale(calc(.88 + var(--card) * .12)); }
.custom-module-stack > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, #ffffff12 48%, transparent 70%); transform: translateX(calc(-110% + var(--card) * 220%)); pointer-events: none; }
.custom-module-stack i { display: flex; justify-content: space-between; align-self: stretch; font-style: normal; font-size: 12px; color: var(--custom-orange); }
.custom-module-stack i em { font-style: normal; font-family: inherit; font-size: 17px; line-height: 1; }
.custom-module-stack b { font-weight: 500; line-height: 1.4; }
.custom-module-stack > span:nth-child(1) { --fan-x: -72px; --fan-y: -4px; --fan-angle: -12deg; }
.custom-module-stack > span:nth-child(2) { --fan-y: -70px; }
.custom-module-stack > span:nth-child(3) { --fan-x: 72px; --fan-y: 40px; --fan-angle: 12deg; }
.custom-destinations { position: absolute; width: 37%; right: 0; inset-block: 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.custom-destinations li { position: relative; display: flex; gap: 12px; align-items: center; border: 1px solid color-mix(in srgb, var(--accent) calc(var(--arrival) * 30%), var(--hair)); border-radius: 12px; padding: 16px 12px; background: var(--panel); box-shadow: 0 8px 16px -15px #0008; }
.custom-connected { position: absolute; top: 10px; right: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: var(--arrival); box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 40%, transparent); transform: scale(calc(.4 + var(--arrival) * .6)); }
.custom-port { font-size: 21px; color: var(--accent-text); }
.custom-destinations strong { display: block; font-size: 15px; font-weight: 500; }
.custom-destinations li div > span { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 5px; }
.custom-app { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 24px; padding: 32px; border: 1px solid var(--hair); border-radius: 24px; background: linear-gradient(135deg, var(--panel), var(--panel-2)); min-width: 0; }
.custom-kicker { font-size: 12px; color: var(--subtle); text-transform: uppercase; letter-spacing: .06em; }
.custom-app-copy h3 { font-size: clamp(23px, 1.85vw, 28px); line-height: 1.2; margin: 18px 0; }
.custom-app-copy p { margin: 0; color: var(--muted); font-size: 16px; }
.custom-app-copy > ul { display: grid; gap: 12px; margin-top: 24px; font-size: 13px; color: var(--muted); }
.custom-app-copy > ul li::before { content: '↗'; color: var(--copper); padding-right: 9px; }
.custom-phone-example { width: 250px; max-width: 100%; margin: 0; min-width: 0; justify-self: center; }
.custom-phone { --phone-progress: .5; position: relative; width: 100%; aspect-ratio: 250 / 530; border: 1px solid #969995; border-radius: 41px; background: linear-gradient(115deg, #b4b5af, #454845 8%, #191b1b 48%, #868981 90%, #383c37); box-shadow: inset 0 0 0 2px #272b28, inset 0 0 0 3px #d9dacf50, 0 28px 40px -18px #000a, 0 4px 8px #0004; transform: perspective(1000px) translateY(calc(20px - var(--app-enter) * 20px)) rotateY(calc(-9deg + var(--app-enter) * 9deg)) rotateZ(calc(2deg - var(--app-enter) * 2deg)); }
.custom-phone::before, .custom-phone::after, .phone-side-key { content: ''; position: absolute; width: 3px; background: linear-gradient(90deg, #a0a29d, #454942); border-radius: 2px; }
.custom-phone::before { left: -3px; top: 88px; height: 18px; }
.custom-phone::after { left: -3px; top: 125px; height: 62px; }
.phone-side-key { right: -3px; top: 138px; height: 49px; }
.phone-screen { position: absolute; inset: 6px; border: 2px solid #080b09; border-radius: 35px; overflow: hidden; isolation: isolate; color: #20231f; background: #f5f6f3; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; line-height: 1.4; }
.phone-screen svg { flex-shrink: 0; width: 18px; height: 18px; }
.phone-screen button { appearance: none; font: inherit; color: inherit; border: 0; margin: 0; background: none; cursor: pointer; letter-spacing: normal; }
.phone-screen button:focus-visible { outline: 2px solid #66782f; outline-offset: -2px; }
.phone-screen [hidden] { display: none !important; }
.phone-statusbar { height: 42px; display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 16px 0; color: #191d17; font-size: 11px; font-weight: 650; }
.phone-statusbar > div { display: flex; align-items: center; gap: 3px; padding-top: 2px; }
.phone-statusbar svg { width: 12px; height: 12px; }
.phone-battery { position: relative; width: 19px; height: 9px; border: 1px solid #555b4f; border-radius: 2px; margin-left: 2px; }
.phone-battery::before { content: ''; position: absolute; inset: 1px 3px 1px 1px; border-radius: 1px; background: #272c23; }
.phone-battery::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 3px; border-radius: 1px; background: #6b7066; }
.phone-island { position: absolute; width: 65px; height: 19px; top: 8px; left: calc(50% - 32.5px); border-radius: 15px; background: #080a09; z-index: 20; box-shadow: 0 0 0 1px #000; }
.phone-island > span { position: absolute; width: 8px; height: 8px; right: 8px; top: 5px; border: 2px solid #141b20; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #243b52, #080e13 65%); }
.phone-home-indicator { position: absolute; bottom: 7px; width: 79px; height: 3px; left: calc(50% - 39.5px); border-radius: 3px; background: #222720; z-index: 20; }
.phone-app { position: absolute; inset: 44px 0 17px; overflow: hidden; }
.phone-view { position: absolute; inset: 0 0 49px; display: flex; flex-direction: column; min-height: 0; }
.phone-app-heading { display: flex; justify-content: space-between; align-items: center; padding: 4px 15px 0; gap: 8px; }
.phone-app-heading > div > span { display: block; font-size: 10px; color: #757a70; margin-bottom: 4px; }
.phone-screen h4 { color: #1e251c; font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.045em; margin: 0; }
.phone-avatar { width: 29px; height: 29px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #e1e9d1; color: #4a5734; font-size: 10px; font-weight: 650; }
.phone-date { padding: 6px 15px 12px; color: #737a6b; font-size: 10px; }
.phone-summary { margin: 0 13px 13px; border: 1px solid #dce4c5; border-radius: 14px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 5px; background: linear-gradient(120deg, #edf4dd, #f1f6e7); }
.phone-summary > div > span { display: block; font-size: 10px; color: #65704f; }
.phone-summary strong { display: block; color: #737e5d; font-size: 19px; font-weight: 500; line-height: 1.3; margin-top: 2px; }
.phone-summary strong b { color: #28321d; font-size: 25px; font-weight: 650; }
.phone-summary small { display: block; font-size: 9px; color: #6a7457; margin-top: 4px; }
.phone-summary svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.phone-summary circle { stroke: #dbe4c4; stroke-width: 4; fill: none; }
.phone-summary .phone-progress-ring { stroke: #748e3a; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--phone-progress)); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.phone-filter { display: flex; padding: 3px; margin: 0 13px 6px; border-radius: 8px; background: #e9ece4; flex-shrink: 0; }
.phone-filter button { flex: 1; font-size: 10px; line-height: 1.3; text-align: center; padding: 6px 3px; border-radius: 6px; color: #737c69; }
.phone-filter button[aria-pressed="true"] { color: #242d1e; background: #fff; box-shadow: 0 1px 4px #29302115; }
.phone-job-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 10px 16px; mask-image: linear-gradient(to bottom, #000 95%, transparent); }
.phone-job-scroll::-webkit-scrollbar, .phone-detail-scroll::-webkit-scrollbar { display: none; }
.phone-jobs { margin: 0; padding: 0; list-style: none; }
.phone-jobs > li { border-bottom: 1px solid #e3e7dd; }
.phone-job { display: flex; width: 100%; text-align: left; gap: 9px; padding: 12px 3px !important; align-items: flex-start; border-radius: 10px; }
.phone-job:hover { background: #ecf0e5; }
.phone-job-time { min-width: 31px; color: #646f57; font-size: 10px; padding-top: 2px; }
.phone-job-time i { display: grid; place-items: center; width: 17px; height: 17px; margin-top: 9px; border: 1px solid #d1d9c5; border-radius: 50%; color: transparent; }
.phone-job-time i svg { width: 12px; height: 12px; }
.phone-job-info { min-width: 0; flex: 1; }
.phone-job-info > strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.35; color: #26301f; }
.phone-job-info > small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.3; color: #818876; }
.phone-job-state { display: inline-block; font-size: 9px; color: #ac6736; margin-top: 7px; background: #f4e7d9; padding: 2px 6px; border-radius: 4px; }
.phone-job [data-job-done] { display: none; }
.phone-job[data-state="done"] .phone-job-state { color: #788466; background: #e7eddf; }
.phone-job[data-state="done"] [data-job-pending] { display: none; }
.phone-job[data-state="done"] [data-job-done] { display: inline; }
.phone-job[data-state="done"] .phone-job-time i { color: #7f9063; background: #e7eddf; border-color: #e7eddf; }
.phone-chevron { font-size: 20px; color: #a9b09f; line-height: 1; align-self: center; }
.phone-tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: 49px; display: flex; align-items: stretch; background: #f7f9f3f2; border-top: 1px solid #dfe5d6; backdrop-filter: blur(12px); }
.phone-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 8px; color: #939c86; }
.phone-tabbar svg { width: 18px; height: 18px; }
.phone-tabbar button[aria-pressed="true"] { color: #5d7630; }
.phone-detail { position: absolute; inset: 0; z-index: 5; background: #f5f6f3; display: flex; flex-direction: column; transform: translateX(105%); visibility: hidden; transition: transform .48s cubic-bezier(.2,.75,.2,1), visibility .48s; }
.phone-detail[data-open] { transform: translateX(0); visibility: visible; }
.phone-detail-nav { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; padding: 7px 12px 12px 5px; border-bottom: 1px solid #e3e7dd; color: #7b8470; font-size: 9px; }
.phone-detail-nav button { color: #6d853a; display: flex; gap: 0; align-items: center; font-size: 11px; padding: 4px 0; }
.phone-detail-nav button svg { width: 16px; height: 16px; }
.phone-detail-nav b { font-weight: 500; }
.phone-detail-scroll { padding: 15px 15px 24px; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.phone-detail-status { display: inline-block; font-size: 9px; color: #a56b39; padding: 3px 7px; background: #f4e7d9; border-radius: 5px; margin-bottom: 10px; }
.phone-detail[data-complete] .phone-detail-status { color: #697f3f; background: #e7eddf; }
.phone-detail h4 { font-size: 22px; line-height: 1.18; }
.phone-task-facts { display: grid; gap: 6px; margin: 14px 0; padding-bottom: 12px; border-bottom: 1px solid #e0e5d9; }
.phone-task-facts > div { display: flex; justify-content: space-between; gap: 9px; font-size: 10px; }
.phone-task-facts dt { color: #8a917f; }
.phone-task-facts dd { margin: 0; text-align: right; color: #47533b; }
.phone-detail-scroll > p { font-size: 11px; color: #818976; line-height: 1.55; margin: 0 0 20px; }
.phone-stage-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; gap: 8px; }
.phone-stage-heading strong { font-weight: 600; }
.phone-stage-heading > span { font-size: 10px; color: #8a957c; }
.phone-checklist { margin: 8px 0 0; padding: 0; list-style: none; }
.phone-checklist li + li { border-top: 1px solid #e6eadf; }
.phone-checklist button { display: flex; gap: 9px; align-items: center; width: 100%; padding: 11px 0; text-align: left; }
.phone-check-icon { width: 21px; height: 21px; display: grid; place-items: center; flex-shrink: 0; border: 1.5px solid #cfd8c1; border-radius: 7px; color: transparent; transition: background .25s, border-color .25s, color .25s; }
.phone-check-icon svg { width: 15px; height: 15px; }
.phone-checklist button[aria-pressed="true"] .phone-check-icon { background: #7f964c; border-color: #7f964c; color: #fff; }
.phone-checklist strong { display: block; font-size: 11px; line-height: 1.4; font-weight: 500; }
.phone-checklist small { display: block; font-size: 9px; color: #8b9580; margin-top: 3px; }
.phone-result-note { border: 1px solid #e0e6d5; border-radius: 10px; background: #edf1e5; margin-top: 16px; padding: 11px; }
.phone-result-note > span { font-size: 9px; color: #7e8a6c; }
.phone-result-note p { font-size: 11px; color: #556244; margin: 5px 0 0; }
.phone-detail-footer { flex-shrink: 0; margin-top: auto; padding: 9px 13px; border-top: 1px solid #e0e5d9; background: #f7f9f4; }
.phone-detail-footer button { display: block; width: 100%; border-radius: 10px; background: #c5ed80; color: #28341b; text-align: center; padding: 12px 6px; font-size: 11px; font-weight: 600; }
.phone-detail-footer [data-finish-done] { display: flex; align-items: center; justify-content: center; gap: 5px; }
.phone-detail-footer svg { width: 14px; height: 14px; }
.phone-detail-footer button:disabled { cursor: default; background: #e2eacb; color: #70834c; }
.phone-secondary { padding: 8px 15px 15px; overflow-y: auto; scrollbar-width: none; }
.phone-secondary .phone-date { padding: 8px 0 10px; }
.phone-mini-chart { display: flex; align-items: end; gap: 7px; height: 120px; padding: 10px; background: #edf2e4; border-radius: 12px; margin: 10px 0; }
.phone-mini-chart i { display: block; flex: 1; height: var(--bar-height); background: #a4c564; border-radius: 3px 3px 0 0; }
.phone-secondary dl { width: 100%; margin: 12px 0; }
.phone-secondary dl > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #e0e5d9; padding: 13px 0; font-size: 10px; }
.phone-secondary dt { color: #869077; }
.phone-secondary dd { margin: 0; color: #34412a; font-size: 14px; font-weight: 600; white-space: nowrap; }
.phone-profile { align-items: center; gap: 7px; }
.phone-profile h4 { align-self: flex-start; }
.phone-profile > .phone-avatar { width: 59px; height: 59px; font-size: 20px; margin-top: 25px; }
.phone-profile > strong { font-size: 15px; margin-top: 6px; }
.phone-profile > span:not(.phone-avatar) { color: #8b957f; font-size: 11px; }
.phone-online { font-size: 10px; color: #738c47; }
.phone-sync-toast { display: flex; gap: 9px; align-items: center; position: absolute; left: 10px; right: 10px; bottom: 64px; z-index: 8; padding: 12px; border: 1px solid #ffffff20; border-radius: 13px; color: #e0f2c2; background: #263222f5; box-shadow: 0 7px 22px #14210f30; opacity: 0; transform: translateY(14px) scale(.97); visibility: hidden; transition: opacity .3s, transform .4s cubic-bezier(.2,.75,.2,1), visibility .4s; pointer-events: none; }
.phone-sync-toast[data-show] { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.phone-sync-toast > svg { width: 23px; height: 23px; color: #c7ef91; }
.phone-sync-toast strong { display: block; font-size: 11px; font-weight: 500; }
.phone-sync-toast div > span { display: block; font-size: 9px; color: #afbf9e; margin-top: 3px; }
.phone-tap { width: 29px; height: 29px; border-radius: 50%; border: 1px solid #71914780; background: #c4e79766; position: absolute; z-index: 12; opacity: 0; pointer-events: none; }
.phone-tap[data-tapping] { animation: phone-tap .55s ease-out; }
@keyframes phone-tap { 0% { transform: scale(1.1); opacity: 0; } 30% { transform: scale(.72); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
.custom-phone-example figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--subtle); font-size: 11px; margin-top: 20px; }
.phone-play { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font: inherit; border: 0; background: none; padding: 5px 0; cursor: pointer; }
.phone-play:hover { color: var(--ink); }
.phone-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.phone-play[hidden] { display: none; }
.custom-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; align-items: start; }
.custom-capabilities details { border-block: 1px solid var(--hair); }
.custom-capabilities summary { display: flex; gap: 14px; align-items: baseline; list-style: none; padding: 23px 0; cursor: pointer; }
.custom-capabilities summary::-webkit-details-marker { display: none; }
.custom-point-number { color: var(--copper); font-size: 12px; }
.custom-capabilities summary strong { font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
.custom-teaser { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 8px; }
.custom-expand { margin-left: auto; color: var(--subtle); font-size: 22px; line-height: 1; transition: transform .2s; }
.custom-capabilities details[open] .custom-expand { transform: rotate(45deg); }
.custom-capabilities details > p { font-size: 16px; color: var(--muted); margin: 0 0 24px; }
.custom-capabilities summary:hover strong { color: var(--copper); }
.custom-capabilities summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
.custom-examples-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 55px 0 25px; }
.custom-examples-heading h3 { margin: 0; }
.custom-examples-heading > span { font-size: 12px; color: var(--subtle); }
.custom-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.custom-examples li { display: flex; align-items: flex-start; gap: 16px; padding: 23px 0; border-top: 1px solid var(--hair); }
.custom-industry-index { color: var(--subtle); font-size: 12px; padding-top: 4px; }
.custom-examples h4 { font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; margin: 0 0 10px; }
.custom-examples p { font-size: 15px; margin: 0; color: var(--muted); }
.custom-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--hair); }
.custom-footer strong { font-size: 23px; letter-spacing: -.03em; font-weight: 500; }
.custom-footer p { font-size: 16px; margin: 8px 0 0; color: var(--muted); }
.custom-footer .btn { white-space: nowrap; }
@media (max-width: 1350px) {
  .custom-showcase { grid-template-columns: 1fr 1fr; }
  .custom-app { grid-template-columns: minmax(0, 1fr) 230px; padding: 24px; gap: 20px; }
  .custom-app-copy p { font-size: 15px; }
  .custom-app-copy > ul { display: none; }
  .custom-module-symbol { width: 148px; height: 161px; }
  .custom-module-stack > span:nth-child(1) { --fan-x: -50px; --fan-angle: -9deg; }
  .custom-module-stack > span:nth-child(3) { --fan-x: 57px; --fan-angle: 9deg; }
  .custom-destinations { width: 38%; }
  .custom-destinations li { gap: 8px; padding: 14px 9px; }
  .custom-port { display: none; }
}
@media (max-width: 1200px) {
  .custom-showcase { grid-template-columns: 1fr; }
  .custom-app { grid-template-columns: minmax(0, 1fr) 250px; gap: 55px; padding: 35px; }
  .custom-app-copy > ul { display: grid; }
  .custom-app-copy p { font-size: 16px; }
  .custom-module-symbol { width: 178px; height: 193px; }
  .custom-module-stack > span:nth-child(1) { --fan-x: -72px; --fan-angle: -12deg; }
  .custom-module-stack > span:nth-child(3) { --fan-x: 72px; --fan-angle: 12deg; }
  .custom-capabilities { gap: 18px; }
  .custom-capabilities summary { gap: 9px; }
  .custom-capabilities summary strong { font-size: 16px; }
}
@media (max-width: 800px) {
  .custom-section .story-heading { grid-template-columns: 1fr; }
  .custom-capabilities { grid-template-columns: 1fr; gap: 0; }
  .custom-capabilities details + details { border-top: 0; }
  .custom-capabilities summary strong { font-size: 19px; }
  .custom-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
  .custom-examples-heading { margin-top: 40px; display: block; }
  .custom-examples-heading > span { display: block; margin-top: 12px; }
  .custom-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
  .custom-map { padding: 22px 16px 10px; }
  .custom-map > figcaption { font-size: 16px; }
  .custom-network { height: 348px; margin-top: 35px; }
  .custom-module-node { width: 47%; top: 108px; }
  .custom-module-symbol { width: 133px; height: 145px; }
  .custom-module-stack { top: -76px; height: 60px; width: min(133px, 100%); left: 50%; transform: translateX(-50%); }
  .custom-module-stack > span { justify-content: center; align-items: center; text-align: center; padding: 10px; }
  .custom-module-stack i { display: none; }
  .custom-module-stack > span:nth-child(1) { --fan-x: 0px; --fan-y: -50px; --fan-angle: -6deg; }
  .custom-module-stack > span:nth-child(2) { --fan-y: 0px; }
  .custom-module-stack > span:nth-child(3) { --fan-x: 0px; --fan-y: 50px; --fan-angle: 6deg; }
  .custom-module-node > strong { font-size: 18px; }
  .custom-module-node > span { font-size: 12px; max-width: 14ch; line-height: 1.5; }
  .custom-destinations { width: 43%; inset-block: 4px; gap: 13px; }
  .custom-destinations strong { font-size: 14px; }
  .custom-destinations li div > span { font-size: 12px; }
  .custom-app { grid-template-columns: minmax(0, 1fr); padding: 27px 22px; gap: 30px; }
  .custom-app-copy h3 { font-size: 29px; }
  .custom-app-copy > ul { display: none; }
  .custom-phone-example { width: 250px; justify-self: center; }
  .custom-examples { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 18px; }
  .custom-examples li { flex: 0 0 87%; scroll-snap-align: start; padding: 22px 18px; border: 1px solid var(--hair); border-radius: 14px; }
  .custom-examples p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-section { --custom-progress: 1 !important; --custom-core: 1 !important; --app-enter: 1 !important; }
  .custom-module-stack > span { --card: 1 !important; }
  .custom-wire { --wire: 1 !important; }
  .custom-destinations li { --arrival: 1 !important; }
  .custom-packet { display: none; }
  .custom-expand { transition: none; }
  .phone-screen *, .phone-screen *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Телефон: компактная композиция ─────────────────────────────────────────
   На телефоне страница была простынёй в 35 экранов, из них 14 — восемь
   разделов подряд. Здесь разделы — лента карточек со snap-остановками под
   маленьким вращающимся кубом, экраны продукта и виджеты панели — тоже ленты,
   тексты сокращены до заголовков и одной строки. Полные описания остаются на
   страницах разделов. Шире телефона всё это не действует. */
.deck-swipe,
.nav-demo-short {
  display: none;
}
@media (max-width: 760px) {
  .nav-demo-full {
    display: none;
  }
  .nav-demo-short {
    display: inline;
  }
  .header-row {
    gap: 6px;
  }
  .site-header .logo-img {
    height: clamp(28px, 8vw, 40px);
  }
  .section {
    padding: 48px 0;
  }
  /* ── Первый экран: всё в одном экране телефона ──
     Шапка, заголовок, кнопка, куб, лента разделов и точки укладываются в
     высоту окна на любом iPhone. Строки сетки: заголовок — по содержимому,
     куб — всё, что осталось (не меньше 96px), лента — по карточке. Масштаб
     куба скрипт считает от высоты его строки. На низких экранах (Safari с
     панелями на маленьком iPhone) прячется подзаголовок, на высоких
     появляются пилюли фактов. */
  .site-header {
    height: 56px;
  }
  /* Холст куба шире области на 340px: на телефоне он выходил за край окна,
     страница становилась шире экрана, и браузер её уменьшал. Здесь холст
     режется по кадру, а страница не переливается вширь. */
  html,
  body {
    overflow-x: clip;
  }
  .js .deck-viewport {
    overflow: clip;
    overflow-clip-margin: 0;
  }
  .js .deck-frame {
    display: grid;
    /* Все строки по содержимому, а высота куба — от размера экрана, не от
       остатка: остаток зависел от текста и шрифтов, и куб прыгал в размере
       после их подгрузки. Свободное место остаётся снизу. */
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
    row-gap: 4px;
    /* svh, а не dvh: динамическая высота меняется при каждом показе и
       скрытии адресной строки, и первый экран «дышал» вместе с кубом. */
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
    max-height: none;
    padding-top: 10px;
    /* Небольшая полоса снизу: круглая кнопка помощника в правом нижнем углу
       ложится только на пустой угол карточки рядом со ссылкой, а не на текст. */
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }
  .js .deck[data-mode] .deck-hero {
    grid-row: 1;
    gap: 5px;
  }
  /* Кнопок под заголовком на телефоне нет: «Запросить демо» ушла в шапку,
     «Как работает система» вести пока некуда. */
  .deck-hero .actions {
    display: none;
  }
  .hero-kicker {
    font-size: 13px;
    line-height: 1.3;
  }
  .deck-hero h1 {
    font-size: clamp(24px, 7.4vw, 32px);
    line-height: 1.05;
  }
  .deck-hero .lede {
    font-size: 14.5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .deck-hero .actions {
    margin-top: 2px;
    gap: 4px 14px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .deck-hero .actions .btn-lg {
    padding: 10px 18px;
    font-size: 14.5px;
    white-space: nowrap;
  }
  /* Вторая кнопка — ссылкой: две кнопки в столбик съедали экран. */
  .deck-hero .actions .btn-secondary {
    border: 0;
    background: none;
    padding: 6px 0;
    color: var(--muted);
    font-weight: 500;
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--hair);
  }
  /* Область куба режет свой холст: он шире и выше её на 170px и лежал
     поверх кнопок сверху и поверх ленты снизу, перехватывая касания —
     кнопки не нажимались, лента не листалась. Холст на телефоне вообще не
     ловит касания: тап по ячейке принимает CSS-ячейка под ним. */
  .js .deck[data-mode] .cube-area {
    grid-row: 2;
    width: 100%;
    /* Высота куба — доля экрана в фиксированных границах; svh не меняется
       с адресной строкой, поэтому размер куба постоянен. */
    height: clamp(110px, 24vh, 240px);
    height: clamp(110px, 24svh, 240px);
    min-height: 0;
    margin: 4px 0;
    align-self: auto;
    overflow: clip;
    overflow-clip-margin: 16px;
  }
  .js .deck[data-mode] .cube-render-canvas {
    pointer-events: none;
  }
  /* Без переходов: угол ведёт скрипт каждый кадр, любой переход поверх
     давал рывок в конце свайпа. */
  .js .deck[data-mode] .cube {
    --scale: 0.5;
    transition: none;
  }
  .js .deck[data-mode] .cube-shadow {
    display: none;
  }
  .deck-swipe {
    grid-row: 3;
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .deck-swipe [data-counter] {
    color: var(--accent-text);
  }
  /* Лента разделов: карточка на 84% ширины, соседняя выглядывает справа. */
  .js .deck[data-mode] .slides {
    grid-row: 4;
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: auto;
    margin: 0 calc(-1 * var(--pad));
    padding: 2px var(--pad) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    pointer-events: auto;
    /* Лента ловит горизонтальный жест сама: палец на карточке не двигает
       страницу вверх-вниз, а на краях ленты не уходит в свайп «назад» Safari. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .js .deck[data-mode] .slides::-webkit-scrollbar {
    display: none;
  }
  .js .deck[data-mode] .slide {
    display: flex;
    flex: 0 0 84%;
    flex-direction: column;
    gap: 3px;
    padding: 9px 14px 9px;
    border: 1px solid var(--hair);
    border-radius: 16px;
    background: var(--panel);
    scroll-snap-align: start;
    scroll-margin-top: 0;
  }
  .js .deck[data-mode] .slide[data-active] {
    border-color: var(--accent);
  }
  .js .deck .slide-meta {
    margin: 0 0 2px;
    font-size: 10px;
  }
  .js .deck .slide-title {
    font-size: 21px;
    line-height: 1.15;
    margin: 0;
    max-width: none;
  }
  .js .deck .slide .slide-lede {
    font-size: 14px;
    line-height: 1.35;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .js .deck .slide .usp-copy {
    gap: 0;
  }
  /* Три преимущества — только заголовки: абзацы живут на странице раздела. */
  .js .deck .slide .usp-list {
    min-height: 0;
    height: auto;
    max-width: none;
    border-top: 0;
    margin-top: 2px;
    display: block;
  }
  .js .deck .slide .usp-list li {
    grid-template-columns: 18px 1fr;
    gap: 6px;
    padding: 4px 0;
  }
  /* Заголовок преимущества — одной строкой: три строки списка держат
     карточку одной высоты на всех разделах. */
  .js .deck .slide .usp-copy strong {
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .js .deck .slide .usp-n {
    font-size: 11px;
    padding-top: 2px;
  }
  .js .deck .slide .usp-copy span {
    display: none;
  }
  /* Четыре плитки — четыре пилюли; на телефоне только при запасе высоты. */
  .js .deck .slide-tiles {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
  }
  .js .deck .slide-tiles li {
    padding: 5px 10px;
    border-radius: 999px;
    gap: 0;
  }
  .js .deck .slide-tiles .tile-key,
  .js .deck .slide-tiles li > span:last-child {
    display: none;
  }
  .js .deck .slide-tiles strong {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }
  /* На карточке остаётся только переход в раздел: кнопка демо стоит в шапке
     и на первом экране, третий её дубликат в ленте лишний. */
  .js .deck .slide-cta {
    margin-top: auto;
    padding-top: 2px;
  }
  .js .deck .slide-cta .btn {
    display: none;
  }
  .js .deck .slide-more {
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
  }
  .js .deck-dots,
  .js .deck[data-mode="hero"] .deck-dots {
    grid-row: 5;
    display: flex;
    margin-top: 0;
    opacity: 1;
    pointer-events: auto;
  }
  /* Низкий экран: без подзаголовка первого экрана и с обещанием раздела в одну
     строку. Ссылка «Открыть раздел» остаётся: это единственный переход с
     карточки на страницу модуля, и убирать её ради второй строки описания
     значило бы обрывать путь читателя ровно там, где он заинтересовался. */
  @media (max-height: 640px) {
    .deck-hero .lede {
      display: none;
    }
    .js .deck-frame {
      padding-top: 6px;
    }
    .deck-hero h1 {
      font-size: clamp(24px, 7vw, 28px);
    }
    .js .deck .slide .slide-lede {
      -webkit-line-clamp: 1;
    }
    .js .deck .slide .usp-list li {
      padding: 4px 0;
    }
  }
  /* Совсем низкий экран (маленький iPhone с панелями Safari): без строки
     над заголовком. */
  @media (max-height: 580px) {
    .hero-kicker {
      display: none;
    }
    .js .deck-frame {
      row-gap: 4px;
    }
  }
  /* Очень высокий экран: карточка получает пилюли фактов. */
  @media (min-height: 900px) {
    .js .deck .slide-tiles {
      display: flex;
    }
    .js .deck-frame {
      row-gap: 10px;
    }
  }

  /* Истории ниже: заголовки меньше, отступы короче. */
  .story-section {
    scroll-margin-top: 80px;
  }
  .story-section h2 {
    font-size: clamp(27px, 7.4vw, 34px);
  }
  .story-section .story-eyebrow {
    margin-bottom: 12px;
  }
  .story-heading {
    gap: 12px;
    margin-bottom: 26px;
  }
  .story-section .story-lede {
    font-size: 15.5px;
  }
  .story-section h3 {
    font-size: 17px;
  }

  /* Три экрана продукта — лента, а не столбик. */
  .team-showcase {
    padding-block: 48px;
  }
  .team-showcase h2 {
    font-size: clamp(27px, 7.4vw, 34px);
  }
  .team-showcase .eyebrow {
    margin-bottom: 14px;
  }
  .team-showcase .centered-intro > p:not(.eyebrow) {
    margin-top: 14px;
    font-size: 15.5px;
  }
  .team-showcase .team-scenes {
    display: flex;
    gap: 12px;
    max-width: none;
    margin: 26px calc(-1 * var(--pad)) 18px;
    padding: 0 var(--pad) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .team-showcase .team-scenes::-webkit-scrollbar {
    display: none;
  }
  .team-showcase .team-screen {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  .team-showcase .product-window {
    min-height: 0;
  }
  .process-captions {
    gap: 8px;
  }
  .process-captions li {
    font-size: 14.5px;
  }

  /* Подключения: номер в узкой колонке, текст в одну-две строки. */
  .connection-grid {
    grid-template-columns: 1fr;
  }
  .connection-grid > li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0 12px;
    padding: 18px 0 0;
    border-right: 0;
    border-top: 1px solid var(--hair);
  }
  .connection-grid > li:first-child {
    border-top: 0;
  }
  .connection-number {
    grid-row: span 3;
    font-size: 34px;
    margin: 0;
  }
  .connection-grid h3 {
    min-height: 0;
    margin: 0 0 6px;
  }
  .connection-grid p {
    font-size: 15px;
    margin: 0 0 8px;
  }
  .connection-sources {
    min-height: 0;
    font-size: 11px;
  }
  .connection-destination {
    grid-column: 2;
    margin-top: 6px;
    font-size: 13px;
  }
  .connection-summary {
    gap: 10px;
    padding-block: 18px;
  }
  .integration-extension {
    margin-top: 24px;
    gap: 10px;
  }
  .integration-extension p {
    font-size: 15px;
  }

  /* Личная панель: три тезиса короче, виджеты примера — лентой. */
  .dashboard-points {
    gap: 14px;
  }
  .dashboard-points li {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }
  .dashboard-points p {
    font-size: 15px;
  }
  .dashboard-example {
    padding: 16px;
  }
  .dashboard-presets {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0 -16px;
    padding: 14px 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dashboard-presets::-webkit-scrollbar {
    display: none;
  }
  .dashboard-presets button {
    flex: 0 0 auto;
    font-size: 12.5px;
    padding: 8px 12px;
  }
  .dashboard-widget-grid {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .dashboard-widget-grid::-webkit-scrollbar {
    display: none;
  }
  .dashboard-widget,
  .dashboard-widget[data-primary="true"],
  .dashboard-widget-grid > :not([hidden]):last-child {
    flex: 0 0 82%;
    min-height: 0;
    padding: 16px;
    scroll-snap-align: start;
  }
  .dashboard-widget[hidden] {
    display: none;
  }
  .dashboard-widget[data-primary="true"] .widget-value {
    font-size: 40px;
  }
  .dashboard-preset-notes {
    min-height: 0;
  }
  .dashboard-preset-notes p {
    font-size: 14px;
  }
  .dashboard-foot {
    margin-top: 22px;
    padding-top: 18px;
  }

  /* Клиентский модуль на телефоне: история читается сверху вниз. Три карточки
     процесса веером над кубом модуля, куб по центру, под ним три раздела-
     получателя в ряд; провода идут вниз, сигнал бежит по ним при прокрутке.
     Правила шире телефона (абсолютные колонки слева/справа) здесь сняты. */
  .custom-map {
    padding: 18px 14px 14px;
  }
  .custom-network {
    height: auto;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .custom-network::before {
    left: 50%;
    top: 96px;
    width: 220px;
    height: 200px;
    transform: translateX(-50%) scale(calc(0.6 + var(--custom-core) * 0.4));
  }
  .custom-module-node {
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
    padding-top: 92px;
  }
  .custom-module-symbol {
    width: 132px;
    height: 143px;
  }
  /* Три карточки процесса в ряд над кубом: из стопки (--card = 0) они
     разъезжаются по местам. Ширина ряда равна внутренней ширине карты. */
  .custom-module-stack {
    top: 0;
    left: 50%;
    width: 98px;
    height: 62px;
    transform: translateX(-50%);
  }
  .custom-module-stack > span {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.3;
  }
  .custom-module-stack i {
    display: none;
  }
  .custom-module-stack > span:nth-child(1) {
    --fan-x: -104px;
    --fan-y: 10px;
    --fan-angle: -7deg;
  }
  .custom-module-stack > span:nth-child(2) {
    --fan-x: 0px;
    --fan-y: 0px;
    --fan-angle: 0deg;
  }
  .custom-module-stack > span:nth-child(3) {
    --fan-x: 104px;
    --fan-y: 10px;
    --fan-angle: 7deg;
  }
  .custom-module-node > strong {
    font-size: 18px;
    margin-top: 12px;
  }
  .custom-module-node > span {
    max-width: 24ch;
    font-size: 12px;
    line-height: 1.5;
  }
  .custom-destinations {
    position: relative;
    inset: auto;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    margin-top: 84px;
  }
  .custom-destinations li {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 12px 8px 10px;
    text-align: center;
  }
  .custom-port {
    display: block;
    font-size: 18px;
  }
  .custom-destinations strong {
    font-size: 13.5px;
    line-height: 1.25;
  }
  .custom-destinations li div > span {
    font-size: 11.5px;
    margin-top: 4px;
  }
  .custom-connected {
    top: 8px;
    right: 8px;
  }
  .custom-app {
    padding: 22px 18px;
    gap: 22px;
  }
  .custom-app-copy h3 {
    font-size: 24px;
    margin: 12px 0;
  }
  .custom-app-copy p {
    font-size: 15px;
  }
  .custom-phone-example {
    width: 272px;
  }
  .custom-capabilities summary strong {
    font-size: 17px;
  }
  .custom-examples-heading {
    margin-top: 28px;
  }
  .custom-examples li {
    flex-basis: 80%;
    padding: 18px 16px;
  }
  .custom-examples p {
    font-size: 15px;
  }

  /* Запуск и доступ: номер слева, заголовок и строка справа. */
  .launch-steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .launch-steps li {
    padding: 18px 0 0 58px;
  }
  .launch-steps h3 {
    font-size: 17px;
    min-height: 0;
    margin: 0 0 6px;
  }
  .launch-steps p {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .launch-number {
    position: absolute;
    left: 0;
    top: 16px;
    font-size: 40px;
    margin: 0;
  }
  .security-heading {
    margin-bottom: 24px;
  }
  .security-facts {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .security-facts li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0 12px;
    padding-top: 16px;
  }
  .security-sign {
    grid-row: span 2;
    margin: 0;
    align-self: start;
  }
  .security-facts h3 {
    font-size: 17px;
    margin: 4px 0 6px;
  }
  .security-facts p {
    font-size: 15px;
  }
  .faq-section summary {
    font-size: 16px;
  }
  .faq-section .faq p {
    font-size: 15px;
  }

  /* Заявка: кнопка во всю ширину, подвал в две колонки. */
  .section-cta.story-section .story-lede {
    font-size: 15.5px;
  }
  .lead {
    margin-top: 16px;
  }
  .lead button {
    justify-self: stretch;
  }
  .site-footer {
    padding: 40px 0 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .footer-brand .logo-img {
    width: 72px;
    height: auto;
    flex: none;
  }
  .footer-requisites {
    margin-top: 0;
  }
  .footer-bottom {
    margin-top: 26px;
  }
}

/* ── Страницы-ответы ───────────────────────────────────────────────────────
   Решения, интеграции, сравнения, статьи и термины. Первым в тексте идёт
   прямой ответ: его читают и человек, и отвечающая система, поэтому он
   выделен, а не спрятан в середину. Таблица фактов и вопросы набраны той же
   типографикой, что документы, — отдельного «стиля статьи» нет.           */
.answer-lead {
  font-size: 1.18rem;
  line-height: 1.6;
  font-weight: 500;
  border-left: 3px solid var(--accent);
  padding: 0 0 0 1rem;
  margin: 0 0 1.75rem;
}
.prose table.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
}
.prose table.facts th,
.prose table.facts td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--hair);
}
.prose table.facts thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.prose table.facts tbody th {
  font-weight: 600;
  white-space: nowrap;
}
.answer-limits ul {
  margin: 0;
}
.answer-faq dl {
  margin: 0;
}
.answer-faq dt {
  font-weight: 600;
  margin: 1.25rem 0 0.35rem;
}
.answer-faq dd {
  margin: 0;
  color: var(--muted);
}
.answer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2.25rem 0 0;
}
@media (max-width: 640px) {
  .prose table.facts tbody th { white-space: normal; }
}

/* Оглавление раздела: список страниц одной темы. Ссылка занимает всю карточку,
   поэтому попасть по ней просто и мышью, и пальцем. */
/* ── Список модулей: значок, левый край, размер как у «Модули» ───────────────
   Пункт набирается тем же кеглем, что и триггер `.nav-trigger`: список в шапке
   и надпись над ним читаются одинаково. Значок стоит слева ровной колонкой,
   название прижато к левому краю.

   `flex-direction` задаётся явно: выше по файлу `.nav-drop a` остаётся
   колонкой, а при `align-items: center` в колонке название встаёт по центру
   пункта, а не по левому краю. */
.nav-drop a {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: auto;
  min-height: 34px;
  padding: 0 12px;
  font-size: 15px;
  text-align: left;
}
.nav-drop-icon {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.72;
  transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-drop a:hover .nav-drop-icon,
.nav-drop a:focus-visible .nav-drop-icon {
  opacity: 1;
}
.nav-drop-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  text-align: left;
}
/* Фокус с клавиатуры виден: до значков пункт подсвечивался только наведением. */
.nav-drop a:focus-visible {
  background: var(--menu-hover);
  color: var(--ink);
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}
/* ── Страница модуля ─────────────────────────────────────────────────────────
   Продающая страница раздела: обещание и главный экран, кому что даёт,
   тезисные истории с экранами, один день с модулем, связи, факты, вопросы.
   Экраны стоят в тех же окнах продукта, что и сцены на главной. */
.module-hero { padding-bottom: clamp(32px, 4vw, 56px); }
/* Блоки страницы модуля идут плотнее общих секций главной: между ними
   один шаг, а не два, иначе страница читается как набор отдельных экранов. */
.module-roles, .module-stories, .module-day, .module-links, .module-facts, .module-faq { padding: clamp(40px, 5vw, 80px) 0; }
.module-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.module-hero-copy h1 { font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -.045em; max-width: 16ch; }
.module-hero-copy .lede { max-width: 50ch; margin-bottom: 26px; }
.module-hero-copy .eyebrow a { color: var(--accent-text); }
.module-hero-copy .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.module-screen { margin: 0; display: block; border: 1px solid var(--hair); border-radius: 20px; background: linear-gradient(145deg, var(--panel-2), var(--panel) 60%); color: var(--ink); box-shadow: 0 24px 60px -24px var(--shadow-cube), 0 3px 12px -6px var(--shadow-cube); overflow: hidden; position: relative; }
.module-screen img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--hair); }
.module-shot { aspect-ratio: 1614 / 1011; border-radius: 20px; }
.module-proofs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--hair); }
.module-proofs li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 0 0; border-right: 1px solid var(--hair); margin-right: 24px; }
.module-proofs li:last-child { border-right: 0; margin-right: 0; }
.module-proofs strong { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.03em; color: var(--accent-text); line-height: 1.1; }
.module-proofs span { font-size: 14px; color: var(--muted); line-height: 1.5; }

.roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.roles-grid li { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius); }
.roles-grid h3 { margin: 0; }
.roles-grid p { margin: 0; font-size: 15px; }
.role-pain { color: var(--subtle); }
.role-pain::before { content: "— "; color: var(--faint); }
.role-gain { color: var(--ink); border-top: 1px solid var(--hair); padding-top: 12px; margin-top: auto !important; }

.stories { display: grid; gap: clamp(56px, 7vw, 112px); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.story-flip .story-copy { order: 2; }
.story-copy h2 { font-size: clamp(28px, 3vw, 44px); margin: 12px 0 22px; max-width: 18ch; }
.story-n { color: var(--accent-text); }
.theses { display: grid; gap: 14px; }
.theses li { position: relative; padding-left: 26px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.theses li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--accent); }

.day { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.day li { padding: 24px 24px 0 0; border-right: 1px solid var(--hair); margin-right: 24px; min-width: 0; }
.day li:last-child { border-right: 0; margin-right: 0; }
.day-time { display: block; color: var(--accent-text); margin-bottom: 14px; }
.day h3 { font-size: 18px; margin-bottom: 8px; }
.day p { font-size: 15px; color: var(--muted); margin: 0; }

.module-links .story-heading { margin-bottom: 8px; }
.links-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.links-grid a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius); color: inherit; transition: border-color .15s; }
.links-grid a:hover { border-color: var(--subtle); color: inherit; }
.links-grid .mono { color: var(--subtle); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.links-grid strong { font-size: 20px; }
.links-grid p { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.links-grid .more { margin-top: auto; font-size: 14px; }

.module-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }
.module-facts .facts-line { margin: 0 0 8px; }
.module-faq .faq-layout > div:first-child h2 { font-size: clamp(30px, 3.3vw, 46px); }

.module-next { border-top: 1px solid var(--hair); padding: clamp(40px, 5vw, 64px) 0; }
.module-next-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.module-nav { display: flex; flex-direction: column; gap: 6px; color: inherit; }
.module-nav .mono { color: var(--subtle); }
.module-nav strong { font-size: 22px; }
.module-nav:hover strong { color: var(--accent-text); }
.module-nav-next { text-align: right; align-items: flex-end; }

@media (max-width: 1100px) {
  .module-hero-grid { grid-template-columns: 1fr; }
  .module-hero-copy h1 { max-width: none; }
  .module-proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .module-proofs li:nth-child(2n) { border-right: 0; }
  .day { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .day li:nth-child(3n) { border-right: 0; }
  .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ribbon-hint { display: none; }
.story-solo { grid-template-columns: minmax(0, 1fr); }
.story-solo .story-copy h2 { max-width: 24ch; }
.story-solo .theses li { max-width: 60ch; }
@media (max-width: 760px) {
  .module-hero-copy h1 { font-size: clamp(30px, 8vw, 40px); }
  .story, .story-flip { grid-template-columns: 1fr; }
  .story-flip .story-copy { order: 0; }
  .story-copy h2 { max-width: none; }
  .module-next-grid { grid-template-columns: 1fr; text-align: left; }
  .module-nav-next { text-align: left; align-items: flex-start; }
  .module-next-grid .btn { justify-self: start; order: 3; }
  /* Ряды карточек листаются влево-вправо, как лента разделов на главной:
     колонка из восьми плиток подряд читалась бы простынёй. Лента выходит
     за поля контейнера до края экрана, чтобы край следующей карточки был виден. */
  .ribbon-hint { display: flex; justify-content: flex-end; color: var(--subtle); margin: 0 0 12px; }
  .ribbon {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-bottom: 6px;
    border-top: 0;
  }
  .ribbon::-webkit-scrollbar { display: none; }
  .ribbon > li { flex: 0 0 82%; scroll-snap-align: start; margin-right: 0; border-right: 0; min-width: 0; }
  .ribbon > li:last-child { margin-right: var(--pad); }
  .module-proofs.ribbon { margin-top: 24px; }
  .module-proofs.ribbon > li { flex-basis: 64%; padding: 18px 18px 14px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--panel); }
  .day.ribbon > li { padding: 20px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--panel); }
  .links-grid.ribbon a { height: 100%; }
  .module-tiles.ribbon > li { flex-basis: 76%; }
}

/* ── Большой экран ───────────────────────────────────────────────────────────
   На мониторе шире 1700px палуба занимает всё окно: кадр на всю ширину и на
   всю высоту под шапкой, текст и плитки крупнее, кубу больше места. Иначе на
   2000px контейнер в 1560px оставлял пустые поля по бокам, а кадр в 820px —
   пустую треть снизу. Ноутбук и телефон этот блок не трогает. */
@media (min-width: 1700px) {
  :root {
    --deck-step: calc(100vh - 96px);
    /* Куб крупнее ячейкой, а не множителем: объёмный рендер читает размер
       ячейки и её трансформацию, а масштаб области ему не указ. */
    --cell: 150px;
    --cell-d: 82px;
    --cell-lift: 117px;
  }
  .js .deck[data-mode="hero"] .cube {
    --scale: min(1.15, 42vh / 450px);
  }
  .deck-frame.container {
    max-width: none;
  }
  .js .slide-head,
  .js .slide .usp-list {
    max-width: 48%;
  }
  .js .slide-title {
    font-size: clamp(46px, 2.9vw, 62px);
  }
  .js .slide-head {
    min-height: min(224px, 22vh);
  }
  .js .deck .slide .slide-lede {
    font-size: clamp(25px, 1.7vw, 32px);
  }
  .js .slide .usp-copy strong {
    font-size: clamp(21px, 1.35vw, 25px);
  }
  .js .slide .usp-copy span {
    font-size: clamp(16.5px, 1vw, 19px);
  }
  .js .slide-tiles li {
    padding: 18px 22px;
  }
  .js .slide-tiles strong {
    font-size: 17px;
  }
  .js .slide-tiles li > span:last-child {
    font-size: 14.5px;
  }
  .js .deck[data-mode] .cube-area {
    width: min(46%, 960px);
    height: min(54vh, 760px);
  }
}
/* Сводка раздела для поиска стоит под подзаголовком мелким текстом: читателю
   она не мешает, а краулер получает факты в первом экране. */
.module-summary {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 64ch;
  margin: 4px 0 30px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
/* Снимок экрана под тему: по умолчанию светлый, в тёмной теме — тёмный.
   Правила повторяют переключение логотипа в шапке. */
.module-screen .shot-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .module-screen .shot-on-light { display: none; }
  :root:not([data-theme="light"]) .module-screen .shot-on-dark { display: block; }
}
:root[data-theme="dark"] .module-screen .shot-on-light { display: none; }
:root[data-theme="dark"] .module-screen .shot-on-dark { display: block; }

/* «Читайте также»: соседние страницы по теме. */
.answer-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.answer-related li a { font-weight: 500; }

/* Окно «заявка принята». Отдельный слой поверх страницы: строка под кнопкой
   терялась, и человек не понимал, ушла ли заявка. */
/* Скрытое окно обязано быть скрытым: правило display у класса перебивает
   служебный атрибут hidden, и окно висело поверх страницы с первой секунды,
   перехватывая клики по кнопкам первого экрана. */
.lead-done[hidden] { display: none; }
.lead-done {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 8, 10, 0.72);
  backdrop-filter: blur(2px);
}
.lead-done-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 2rem 2rem 1.75rem;
  max-width: 30rem;
  text-align: center;
  box-shadow: var(--shadow-pop);
}
.lead-done-mark {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.5rem;
  font-weight: 700;
}
.lead-done-card h3 { margin: 0 0 0.6rem; font-size: 1.5rem; }
.lead-done-card p { margin: 0 0 0.75rem; }
.lead-done-next { color: var(--muted); font-size: 0.95rem; }
.lead-done-card .btn { margin-top: 0.75rem; }

/* ── Окно выбора по cookie ────────────────────────────────────────────────
   Внизу слева, чтобы не закрывать кнопку помощника справа. Кнопки равного
   веса: отказ не прячется и не мельче согласия. */
.cookie-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 420px;
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  font-size: 14px;
  line-height: 1.45;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 0 12px; }
.cookie-banner a { color: inherit; text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner__actions .btn { flex: 1 1 auto; justify-content: center; }
.footer-cookie-settings {
  display: block;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.footer-cookie-settings[hidden] { display: none; }
.footer-cookie-settings:hover { color: var(--ink); }
@media (max-width: 640px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 88px; max-width: none; }
}
/* ── Тарифы ──────────────────────────────────────────────────────────────────
   Карточка тарифа — собранный куб: включённые модули графит с гравировкой.
   Цена за месяц и за год лежат в разметке обе, переключатель меняет только
   атрибут data-period на секции: сетка не перерисовывается и карточки не прыгают. */
.pricing {
  padding: clamp(36px, 5vw, 56px) 0 clamp(64px, 8vw, 96px);
}
.pricing .container {
  max-width: min(1312px, 94vw);
}
.pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.pricing-head h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  max-width: 16ch;
}
.pricing-lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
}

/* Сегмент периода: пилюля, активный вариант — приподнятая плашка. */
.period-seg {
  display: inline-flex;
  background: var(--panel-2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.period-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.period-btn[aria-pressed="true"] {
  background: var(--menu-bg);
  color: var(--ink);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
}
.period-badge {
  font-size: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
}

/* Готовые тарифы — главный выбор, поэтому они занимают всю ширину первого
   ряда. Отдельные модули идут своей сеткой ниже: так их количество не растягивает
   карточки тарифов по высоте. */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 52px);
  margin-top: clamp(28px, 3.4vw, 44px);
  align-items: start;
}
.plan-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  align-items: stretch;
}
.plan-dots {
  display: none;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 28px;
}
.plan-card-rec {
  border-color: var(--accent);
}
.plan-top {
  position: relative;
  min-height: 126px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  perspective: 1400px;
}
.plan-name {
  max-width: 32rem;
}
.plan-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.plan-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 9px;
}
.plan-who {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}
.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.price-value {
  /* Сумму не переносят: «RUB» на одной строке и «12,000» на другой читаются
     как два разных числа. Английский текст здесь на треть длиннее русского. */
  white-space: nowrap;
  font-size: clamp(30px, 2.8vw, 38px);
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.price-per,
.addon-per {
  color: var(--subtle);
  font-size: 14px;
}
.price-swap {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
/* Период показывает одну цену из двух. Обе остаются в разметке: их читает
   поисковик, markdown-версия страницы и человек без скрипта. */
.pricing[data-period="year"] .price-swap[data-price="month"],
.pricing[data-period="month"] .price-swap[data-price="year"] {
  display: none;
}
.plan-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.plan-modules li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.25;
}
.plan-limits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--hair-2);
  padding-top: 16px;
}
.plan-limits p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 14px;
}
.plan-limits p span:first-child {
  color: var(--muted);
}
.plan-extra {
  display: block;
  font-size: 12px;
  color: var(--subtle);
  margin-top: 4px;
  text-wrap: pretty;
}
.plan-cta {
  margin-top: auto;
  height: 40px;
  border-radius: 8px;
  justify-content: center;
}

/* Тариф-конструктор: та же карточка, только цена в ней не задана, а собирается.
   Список входящего и пакет заменены переключателями модулей и двумя
   счётчиками — всё остальное (имя, куб, место цены, действие внизу) стоит там
   же, где у соседей, чтобы карточки читались одним рядом, а не тремя разными
   предложениями. */
.plan-card-own .own-base {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: -12px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.own-modules {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.own-mod {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.25;
  color: var(--subtle);
  cursor: pointer;
}
/* Выбранный модуль набран обычным текстом, невыбранный — приглушён. Зачёркивать
   здесь нечего: это не «не входит в тариф», а «ещё не выбрано», и разница
   между ними — весь смысл карточки. */
.own-mod-picked {
  color: var(--ink);
}
.own-mod .solo-cube {
  opacity: 0.45;
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.own-mod-picked .solo-cube {
  opacity: 1;
}
.own-mod input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.own-mod-name {
  min-width: 0;
  /* Длинное имя («Маркетплейсы») переносится внутри своей колонки, а не
     выезжает на цену. Сокращать его многоточием нельзя: по имени человек
     узнаёт, что покупает. */
  overflow-wrap: anywhere;
}
/* Кубик в списке конструктора мельче, чем в строке стека модулей: здесь он
   помечает выбор, а не представляет товар, и крупный съедал бы место у имени. */
.own-mod .solo-cube {
  --s: 18px;
}
.own-mod-price {
  white-space: nowrap;
  font-size: 13px;
}
/* Счётчики стоят своим блоком, а не внутри .plan-limits: там строка — flex с
   разгоном по краям, и подпись цены встала бы в колонку числа. */
.own-limits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--hair-2);
  padding-top: 16px;
}
.own-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 14px;
}
.own-count label {
  color: var(--muted);
}
.own-count input {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  text-align: right;
  font-size: 14px;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: 8px;
}
.own-count-hint {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--subtle);
}

/* Модули отдельно: адаптивная сетка под тарифами. Количество модулей может меняться
   в живом каталоге, поэтому колонки раскладываются сами. Клиентский модуль занимает отдельную
   широкую строку, чтобы заявка не выглядела ещё одним готовым тарифом. */
.addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 12px;
  align-items: start;
}
.addons-title {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--subtle);
}
.addons-title-short {
  display: none;
}
/* Карточка модуля собрана вертикально внутри своей колонки: имя, цена, описание и
   статус не делят одну узкую строку и не наезжают друг на друга. */
.addon-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.addon-row .solo-cube {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  margin-top: 3px;
}
.addon-name {
  grid-column: 2;
  grid-row: 1;
  /* Длинное слово без пробелов («Маркетплейсы») в узкой колонке переносится,
     а не выезжает на цену: ячейки сетки не пересекаются, текст мог. */
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 600;
}
.addon-price {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin: 0;
  white-space: nowrap;
}
.addon-who {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-wrap: pretty;
}
.addon-note {
  grid-column: 2;
  grid-row: 4;
  justify-self: start;
  margin: 4px 0 0;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--subtle);
}
.addon-price .price-swap {
  gap: 2px;
  white-space: nowrap;
}
.addon-value {
  font-size: 18px;
  font-weight: 500;
}
.addon-per {
  font-size: 12px;
}
/* Свой модуль — композиция во всю ширину карточки: кубик и заголовок одной
   строкой, объяснение под ними на всю ширину, действия внизу. Столбиком рядом
   с кубиком заголовок ломался по два слова в строке. */
.addon-custom {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 10px;
}
.addon-custom .solo-cube {
  grid-row: 1 / span 2;
  align-self: center;
  margin-top: 0;
}
.addon-custom .addon-name {
  grid-column: 2;
  grid-row: 1;
}
.addon-custom .addon-who {
  grid-column: 2;
  grid-row: 2;
}
.addon-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.btn-copper {
  flex: none;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--cu-front);
  color: var(--cu-front);
  background: transparent;
  font-weight: 500;
}
.btn-copper:hover {
  color: var(--cu-front);
  background: rgba(217, 84, 30, 0.08);
}
/* Второе действие «Свой модуль» — тихая ссылка: медная кнопка на сайте одна,
   и вторая обводка рядом спорила бы с ней за внимание. */
.btn-quiet {
  flex: none;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-text);
  font-weight: 500;
}
.btn-quiet:hover {
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* Кубик: изометрия знака, три видимые грани, гравировка кодом модуля. */
.plan-cube {
  position: relative;
  right: auto;
  top: auto;
  flex: none;
  width: 132px;
  height: 116px;
  --s: 31px;
  --d: 35px;
}
.plan-cube .pc-iso {
  left: 66px;
  top: 62px;
}
.solo-cube {
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--s) * 1.6);
  height: calc(var(--s) * 1.6);
  perspective: 900px;
  --s: 30px;
  /* Одиночный кубик стоит в центре и никуда не разъезжается. Значения
     объявлены здесь, а не на самой ячейке: своя декларация всегда сильнее
     унаследованной, и ячейка перестала бы слышать разлёт куба тарифа. */
  --d: 0px;
  --x: 0.5;
  --y: 0.5;
  --z: 0.5;
}
.plan-modules .solo-cube {
  --s: 14px;
}
.solo-cube .pc-iso {
  left: 50%;
  top: 55%;
}
.pc-iso {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-35.264deg) rotateY(45deg);
}
.pc-cell {
  position: absolute;
  width: var(--s);
  height: var(--s);
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  transform-style: preserve-3d;
  transform: translate3d(calc((var(--x) - 0.5) * var(--d)), calc((var(--y) - 0.5) * var(--d)), calc((var(--z) - 0.5) * var(--d)));
}
.pc-face {
  position: absolute;
  inset: 0;
}
.pc-top {
  transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
}
.pc-left {
  transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
}
.pc-front {
  transform: translateZ(calc(var(--s) / 2));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Гравировка — псевдоэлемент: код грани не должен становиться текстом страницы.
   На ячейке меньше 20 px надпись не рисуется вовсе, там она превращается в грязь. */
.pc-front::after {
  content: var(--code, "");
  font-size: calc(var(--s) * 0.19);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--cube-ink);
  text-shadow: 0 1px 0 var(--cube-ink-hi);
}
.pc-on .pc-top {
  background: var(--cube-top);
}
.pc-on .pc-left {
  background: var(--cube-left);
}
.pc-on .pc-front {
  background: var(--cube-front);
}
.pc-copper .pc-top {
  background: var(--cu-top);
}
.pc-copper .pc-left {
  background: var(--cu-left);
}
.pc-copper .pc-front {
  background: var(--cu-front);
}
.pc-off .pc-face {
  background: var(--ghost);
  border: 1px solid var(--ghost-line);
}

/* Сравнение тарифов — одна раскрывающаяся строка между линиями. */
.pricing-compare {
  margin-top: 32px;
  border-top: 1px solid var(--hair-2);
  border-bottom: 1px solid var(--hair-2);
}
.pricing-compare summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.pricing-compare summary::-webkit-details-marker {
  display: none;
}
.pricing-compare summary svg {
  color: var(--subtle);
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.pricing-compare[open] summary svg {
  transform: rotate(180deg);
}
.compare-scroll {
  overflow-x: auto;
  padding-bottom: 20px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-top: 1px solid var(--hair-2);
  vertical-align: top;
}
.compare-table thead th {
  border-top: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--subtle);
}
.compare-table tbody th {
  font-weight: 400;
  color: var(--muted);
  width: 34%;
}
.compare-group th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--subtle);
  padding-top: 24px;
}
.compare-no {
  color: var(--subtle);
}

.pricing-faq {
  margin-top: clamp(40px, 5vw, 64px);
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.pricing-faq h2 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.pricing-faq .faq {
  columns: auto;
  margin: 0;
  border-bottom: 1px solid var(--hair-2);
}
.pricing-faq .faq details {
  border-top: 1px solid var(--hair-2);
  padding: 18px 0;
}
.pricing-faq .faq summary {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  gap: 16px;
  font-size: 16px;
  font-weight: 500;
}
.pricing-faq .faq summary::after {
  color: var(--accent-text);
  font-size: 18px;
  line-height: 1.2;
}
.pricing-faq .faq p {
  margin: 12px 36px 0 42px;
  max-width: 640px;
  text-wrap: pretty;
}

/* На средней ширине действия клиентского модуля уходят в свою строку: кнопки не
   отбирают ширину у объяснения. */
@media (max-width: 1279px) {
  .addon-custom {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .addon-actions {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .pricing-faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Планшет: два тарифа остаются рядом, но карточка узкая, и куб, стоявший в ней
   поверх текста, наезжал на строку «для кого». Здесь он встаёт в строку с
   именем, как на телефоне, и пересечься им уже негде. */
@media (min-width: 761px) and (max-width: 1200px) {
  .plan-top {
    min-height: 118px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .plan-name {
    max-width: none;
  }
  .plan-cube {
    position: relative;
    right: auto;
    top: auto;
    flex: none;
    width: 118px;
    height: 108px;
    --s: 28px;
    --d: 31px;
  }
  .plan-cube .pc-iso {
    left: 59px;
    top: 60px;
  }
}

/* Телефон: тарифы листаются лентой с подглядыванием следующей карточки,
   под ней — точки-индикаторы. Модули отдельно идут компактными строками. */
@media (max-width: 760px) {
  .pricing-head {
    align-items: stretch;
    gap: 18px;
  }
  /* Телефон 390 макета: поля 20, заголовок 30/36, дальше всё считает высота
     карточки в ленте — лишние восемь пикселей здесь означают ещё один свайп до
     цены. Колонка тарифов идёт во всю ширину экрана: обычные 94 % оставляли
     справа полосу, и лента переставала подглядывать следующую карточку. */
  .pricing .container {
    max-width: 100%;
  }
  .pricing-head h1 {
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 10px;
  }
  .pricing-lede {
    font-size: 15px;
    line-height: 22px;
  }
  .period-seg {
    display: flex;
    width: 100%;
  }
  .period-btn {
    flex: 1;
    justify-content: center;
    padding: 7px 0;
    font-size: 13px;
  }
  .plan-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--pad) * -1);
    padding-right: var(--pad);
    scrollbar-width: none;
  }
  .plan-rail::-webkit-scrollbar {
    display: none;
  }
  .plan-card {
    width: 300px;
    flex: none;
    scroll-snap-align: start;
    padding: 20px;
    gap: 16px;
  }
  /* Рекомендуемый тариф идёт первым: в ленте человек видит одну карточку, и
     первой должна быть та, которую мы советуем. Порядок в разметке остаётся
     прежним — его читают поисковик и страница без скрипта. */
  .plan-card-rec {
    order: -1;
  }
  .plan-top {
    min-height: 100px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  /* Здесь куб стоит в строке, а не поверх текста: ширину имени держит сама
     строка, и запас под куб из настольной раскладки только мешает. */
  .plan-name {
    max-width: none;
  }
  .plan-card h2 {
    gap: 6px;
    font-size: 19px;
    line-height: 24px;
  }
  /* Имя тарифа и чип стоят одной строкой рядом с кубом 110 px: на карточке
     300 px это последние свободные пиксели, и чип набран мельче. */
  .plan-chip {
    font-size: 11px;
    padding: 2px 7px;
  }
  .plan-price .price-value {
    font-size: 30px;
    line-height: 36px;
  }
  .plan-price .price-per {
    font-size: 13px;
  }
  .plan-limits {
    padding-top: 14px;
    font-size: 13px;
  }
  .plan-limits p {
    font-size: 13px;
  }
  .plan-cube {
    position: relative;
    right: auto;
    top: auto;
    /* Куб не сжимается вместе с текстом: в гибкой строке он терял половину
       ширины, и грани съезжали друг на друга. */
    flex: none;
    width: 110px;
    height: 100px;
    --s: 26px;
    --d: 29px;
  }
  .plan-cube .pc-iso {
    left: 55px;
    top: 56px;
  }
  /* На телефоне модули тарифа идут одной строкой через « · »: восемь строк с
     кубиками растягивали карточку карусели так, что до цены соседнего тарифа
     приходилось листать экран. Перечёркнутых модулей здесь нет — в ленте важно,
     что входит, а чего нет, видно по соседней карточке. */
  .plan-modules {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: var(--muted);
  }
  .plan-modules li {
    display: inline;
  }
  .plan-modules .solo-cube {
    display: none;
  }
  .plan-modules .plan-mod-on::after {
    content: " · ";
  }
  .plan-modules .plan-mod-last::after {
    content: none;
  }
  .plan-cta {
    height: 44px;
    border-radius: 10px;
  }
  .plan-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 16px 0 0;
  }
  .plan-dot {
    width: 4px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--hair);
    cursor: pointer;
    transition: width 0.18s cubic-bezier(0.2, 0, 0, 1);
  }
  .plan-dot[aria-current="true"] {
    width: 16px;
    background: var(--ink);
  }
  .addons-title {
    margin: 22px 0 -2px;
  }
  .addons-title-full {
    display: none;
  }
  .addons-title-short {
    display: inline;
  }
  /* Модуль на телефоне — компактная строка макета: кубик, имя и подпись под
     ним, цена справа. Описание «для чего» уходит: в строке 14/16 оно занимало
     больше места, чем имя и цена вместе. */
  .addon-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 0;
    padding: 14px 16px;
    border-radius: 14px;
    align-items: center;
  }
  .addon-row .solo-cube {
    --s: 24px;
    /* Оправа кубика на телефоне по его же размеру: лишние шесть пикселей
       уводили подпись «Открыт в пробном периоде» на вторую строку. */
    width: 34px;
    height: 34px;
  }
  .addon-name {
    font-size: 14px;
    line-height: 16px;
  }
  .addon-who {
    display: none;
  }
  .addon-note {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    max-width: none;
    text-align: left;
    font-size: 12px;
    line-height: 16px;
  }
  .addon-price {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .addon-value {
    font-size: 15px;
  }
  .addon-per {
    font-size: 11px;
  }
  /* У клиентского модуля объяснение остаётся: без него «Свой модуль» — просто
     строка. Действия идут под текстом во всю ширину. */
  .addon-custom {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 8px;
  }
  .addon-custom .addon-name {
    line-height: 18px;
  }
  .addon-custom .addon-who {
    display: block;
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
  }
  .addon-custom .addon-actions {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .addon-custom .btn-copper,
  .addon-custom .btn-quiet {
    flex: 1;
    height: 44px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-dot,
  .pricing-compare summary svg {
    transition: none;
  }
}

/* ── Правовой документ: оферта, политика, согласие, оплата и их указатель ───

   Блок документа — оглавление плюс колонка текста — собран в одну ширину и
   поставлен по центру окна. Раньше сетка растягивалась на весь контейнер, а
   текст внутри упирался в 72ch: документ прижимался к левому краю, а правая
   половина экрана оставалась пустой, и заголовок висел в ней узким столбцом.

   Узкая колонка самого текста — не украшение: юридический документ читают
   подряд, и строка в полтора экрана шириной заставляет глаз терять начало
   следующей. Те же 65–75 знаков стоят у Битрикс24, Контура и Т-Банка.

   Оглавление с подсветкой текущего раздела — наше добавление: ни у одного из
   них внутристраничного оглавления нет, документ листают подряд. Мы его
   оставляем, потому что наши документы длиннее и на них ссылаются пунктами. */
:root {
  --doc-toc: 264px;
  --doc-gap: clamp(28px, 4vw, 64px);
  --doc-measure: 72ch;
  --doc-block: calc(var(--doc-toc) + var(--doc-gap) + var(--doc-measure));
}
/* Страница без оглавления — «Безопасность» и подобные: ширина блока равна
   ширине самой колонки текста, иначе текст снова прижимается к левому краю. */
.doc-narrow {
  --doc-block: var(--doc-measure);
}
/* Одна ширина у шапки, сетки документа и указателя: заголовок, оглавление и
   текст стоят на одной линии слева и заканчиваются на одной справа. */
.doc-width {
  max-width: min(var(--container), calc(var(--doc-block) + var(--pad) * 2));
}
.doc-head {
  padding-bottom: 0;
}
.doc-head-inner {
  max-width: min(var(--container), calc(var(--doc-block) + var(--pad) * 2));
}
/* Заголовок документа читается как название бумаги, а не как обложка лендинга:
   герой на 60px в узкой колонке разваливался на три строки. */
.doc-head h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin-bottom: 18px;
}
.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--subtle);
}
.doc-back svg {
  flex: none;
  transition: transform 0.14s ease;
}
.doc-back:hover svg {
  transform: translateX(-3px);
}
.doc-about {
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.6;
}
/* Редакция и версия — строка выходных данных под шапкой, отбитая волоском:
   её сверяют до чтения, но читают не её. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--muted);
}
.doc-meta div {
  display: flex;
  gap: 8px;
}
.doc-meta dt {
  color: var(--subtle);
}
.doc-meta dt::after {
  content: ":";
}
.doc-meta dd {
  margin: 0;
}
.doc-grid {
  grid-template-columns: var(--doc-toc) minmax(0, 1fr);
  gap: var(--doc-gap);
  padding-top: clamp(40px, 5vw, 64px);
}
.toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.toc-summary::-webkit-details-marker {
  display: none;
}
.toc-summary svg {
  flex: none;
  transition: transform 0.15s ease;
}
.toc[open] > .toc-summary svg {
  transform: rotate(180deg);
}
.toc-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.toc-list a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 0 8px 12px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -14px;
  border-radius: 0 6px 6px 0;
}
.toc-list a:hover,
.toc-list a:focus-visible {
  color: var(--ink);
  background: var(--accent-soft);
}
/* Подсветка раздела, в котором читатель сейчас. Ставит её скрипт страницы;
   без скрипта документ остаётся полностью читаемым, просто без подсветки. */
.toc-list a[aria-current="true"] {
  color: var(--ink);
  border-left-color: var(--accent);
  font-weight: 500;
}
.toc-list a[aria-current="true"] .toc-num {
  color: var(--accent-text);
}
.toc-num {
  font-size: 11.5px;
  color: var(--faint);
  text-align: right;
}

/* ── Текст документа ───────────────────────────────────────────────────────
   Базовые правила сайта снимают у ссылок подчёркивание, а у списков — маркеры
   и отступ: на посадочной это верно, в документе — нет. Там ссылку надо
   увидеть, не наводя мышь, а перечисление — отличить от абзаца. */
.hub-story .doc-section > h2 {
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.22;
}
.doc-body {
  max-width: var(--doc-measure);
  font-size: 16.5px;
  line-height: 1.72;
}
.doc-body > .doc-section {
  margin-bottom: 0;
}
.doc-section + .doc-section {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--hair-2);
}
.doc-section > h2:has(> .doc-num) {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
}
.doc-section > h2 {
  font-size: clamp(21px, 2.1vw, 26px);
  letter-spacing: -0.018em;
  line-height: 1.22;
  margin: 0 0 18px;
  scroll-margin-top: 96px;
}
.doc-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-text);
  text-align: right;
}
.doc-section > *:last-child {
  margin-bottom: 0;
}
/* Якорь проявляется при наведении и при переходе с клавиатуры: он нужен тому,
   кто хочет сослаться на пункт, и мешает тому, кто просто читает. */
.doc-anchor {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  color: var(--subtle);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.doc-section > h2:hover .doc-anchor,
.doc-anchor:focus-visible {
  opacity: 1;
}

/* ── Список строк: указатель документов и указатели материалов ──────────────────────────────────────────────────
   Плоский список строк, разделённых волоском: номер, название-ссылка,
   о чём документ, редакция и версия. Ни карточек, ни рамок — список
   документов не витрина. Нажимается вся строка, но ссылка в ней одна. */
.doc-index {
  padding-top: clamp(40px, 5vw, 64px);
}
.doc-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}
.doc-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 24px;
  gap: 0 20px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--hair);
}
.doc-row-num {
  font-size: 12px;
  color: var(--faint);
  padding-top: 8px;
}
.doc-row-link {
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
/* Накрывающий псевдоэлемент: нажимается вся строка, а в дереве доступности
   остаётся одна ссылка с названием документа. */
.doc-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.doc-row-about {
  display: block;
  margin-top: 8px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}
.doc-row-meta {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
  padding-top: 8px;
  color: var(--subtle);
  font-size: 11.5px;
  white-space: nowrap;
}
.doc-row-go {
  display: flex;
  padding-top: 6px;
  color: var(--faint);
  transition:
    transform 0.16s ease,
    color 0.16s ease;
}
.doc-row:hover .doc-row-link,
.doc-row:focus-within .doc-row-link {
  color: var(--accent-text);
}
.doc-row:hover .doc-row-num,
.doc-row:focus-within .doc-row-num,
.doc-row:hover .doc-row-go,
.doc-row:focus-within .doc-row-go {
  color: var(--accent-text);
}
.doc-row:hover .doc-row-go,
.doc-row:focus-within .doc-row-go {
  transform: translateX(4px);
}
.doc-row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.legal-note {
  margin: 28px 0 0;
  max-width: 76ch;
  color: var(--subtle);
  font-size: 14.5px;
  line-height: 1.6;
}
.legal-note-link {
  margin-top: 10px;
}
/* Ссылка на весь указатель стоит под перечнем документов и отбита волоском:
   это вход в раздел, а не ещё один документ. */
.footer-all {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  color: var(--subtle);
  font-size: 14px;
}

@media (max-width: 1080px) {
  .doc-grid {
    grid-template-columns: 1fr;
  }
  .doc-body {
    max-width: 70ch;
  }
  .toc-list a {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    border-radius: 6px;
  }
  .toc-list a[aria-current="true"] {
    border-left: none;
  }
}
@media (max-width: 760px) {
  .doc-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 14px;
    padding: 22px 0;
  }
  .doc-row-meta {
    grid-column: 2;
    justify-items: start;
    text-align: left;
    padding-top: 10px;
    white-space: normal;
  }
  .doc-row-go {
    display: none;
  }
  .doc-meta {
    gap: 6px 24px;
  }
}

/* Approved homepage direction: photographic hero, meaning-first blocks and
   real product stories. The public page remains useful without motion. */
.home-v2-page>.home-hero-v2>.container,.home-v2-page>.fan-section>.container,.home-v2-page>.home-motion>.container,.home-v2-page>.home-modules-v2>.container,.home-v2-page>.approved-team>.container,.home-v2-page>.approved-simple>.container,.home-v2-page>.custom-section>.container,.home-v2-page>.approved-growth>.container,.home-v2-page>.approved-usecases>.container,.home-v2-page>.approved-faq>.container,.home-v2-page>.approved-final-cta>.container{width:min(1240px,calc(100% - 80px));max-width:none;padding-inline:0}
.home-hero-v2{padding:clamp(44px,6vw,88px) 0 38px;background:#f5f7fa;color:#111827}
.home-hero-v2 .btn-secondary,.approved-final-cta .btn-secondary{color:#111827;border-color:#9aa7a0;background:rgba(255,255,255,.35)}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,1fr);gap:clamp(36px,5vw,76px);align-items:center}
.home-hero-copy h1{max-width:720px;font-size:clamp(42px,5vw,70px);font-weight:600;letter-spacing:-.055em}
.home-hero-copy h1 em{font-style:normal;color:#176f52}
.home-hero-copy>p{max-width:560px;margin-top:25px;font-size:19px;color:#475569}
.home-hero-note{font-size:13px!important;line-height:1.65;color:#64748b!important}
.home-hero-art{position:relative;margin:0;min-width:0}
.home-hero-art>img{display:block;width:100%;height:clamp(420px,39vw,560px);object-fit:cover;object-position:58% center;border-radius:22px 22px 88px 22px}
.home-float{position:absolute;min-width:225px;padding:15px 19px;border:1px solid rgba(255,255,255,.78);border-radius:13px;background:rgba(255,255,255,.74);box-shadow:0 18px 46px rgba(21,36,28,.15);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.home-float span{display:block;margin-bottom:6px;font:500 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.06em;color:#64748b}
.home-float strong{font-size:15px;font-weight:600}.home-float strong i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#17805d}
.home-float-team{right:12px;top:58%}.home-float-money{left:-22px;bottom:34px}
.home-art-label{position:absolute;right:18px;bottom:10px;padding:3px 7px;border-radius:4px;background:rgba(255,255,255,.78);font-size:9px;color:#64748b}
.home-hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;padding-top:20px;border-top:1px solid #d8dee8;font-size:13px;color:#475569}
.home-hero-proof span:first-child{color:#111827;font-weight:600}

.home-motion{background:var(--canvas)}
.home-motion .story-heading,.home-modules-v2 .story-heading{grid-template-columns:1.12fr 1fr;gap:80px;margin-bottom:38px}
.home-motion .story-heading h2,.home-modules-v2 .story-heading h2{font-size:clamp(31px,3.5vw,46px);font-weight:500;letter-spacing:-.04em;line-height:1.12}
.home-motion .story-heading .story-lede,.home-modules-v2 .story-heading .story-lede{max-width:490px;font-size:18px}
.home-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:28px}
.home-proof article{padding-top:20px;border-top:1px solid var(--hair)}
.home-proof small{display:block;margin-bottom:10px;font:500 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--accent-text)}
.home-proof h3{font-size:21px}.home-proof p{font-size:14px;color:var(--muted)}
.home-linkline{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:28px}
.home-linkline p{margin:0;color:var(--muted);font-size:14px}

.home-modules-v2{padding:80px 0;background:#fff;color:#111827;--cell:82px;--cell-d:45px;--cell-lift:56px;--shadow-cube:rgba(70,90,120,.22)}
.home-modules-v2 .story-lede{color:#475569}
.home-module-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.home-module-cube{position:relative;min-width:0;height:430px;display:grid;place-items:center;overflow:hidden;background:#fff}
.home-module-cube:focus-visible{outline:2px solid #176f52;outline-offset:4px;border-radius:14px}
.home-module-cube .cube-area{width:100%;height:430px;margin:0;background:#fff;cursor:grab;touch-action:pan-y}
.home-module-cube .cube-shadow{opacity:.3}
.home-module-links{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home-module-links a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 18px;border:1px solid #e0e7e2;border-radius:10px;transition:background .2s,border-color .2s}
.home-module-links a:hover,.home-module-links a:focus-visible,.home-module-links a.selected{color:#111827;border-color:#8cb29a;background:#edf4ef}
.home-module-links b{display:block;font-size:16px;font-weight:500}.home-module-links small{display:block;margin-top:6px;color:#738277;font-size:11px}.home-module-links i{font-style:normal;font-size:18px;color:#176f52}

.home-motion.ai-story{padding:92px 0;background:#101b17;color:#fff}
.ai-story .story-heading .story-lede{color:#b8c9c0}
.ai-story .eyebrow{color:#bddbba}
.ai-story .story-heading h2 em{font-style:normal;color:#cdf463}
.ai-story .home-proof article{border-color:#384b40}
.ai-story .home-proof p,.ai-story .home-linkline p{color:#b8c9c0}
.ai-story .home-proof small{color:#759286}
.ai-story .home-linkline .btn{background:#cdf463;border-color:#cdf463;color:#13231b}
.ai-story .home-linkline .btn:hover{background:#bce64f;border-color:#bce64f}

/* Cinemas are deliberately light product surfaces in both themes, like an
   embedded video. This keeps one composition and one contrast model. */
.cinema,.cinema *{color-scheme:light}
.cinema p{color:inherit}
.home-motion .cinema{margin-top:10px}
.home-motion .cinema-canvas{font-family:"Onest",system-ui,sans-serif}
.home-motion .cinema-canvas img{max-width:none}
.home-motion .finance-wordmark b{margin:0;color:#27563c}
.home-motion .screen-heading h3{margin:0}
.home-motion .finance-example-note{color:var(--subtle)}
.custom-section{overflow:clip}

/* Approved lower half of the homepage. These blocks replace the legacy
   launch/security/connectors tail while keeping the real site header/footer. */
.approved-team,.approved-simple,.approved-growth,.approved-usecases,.approved-faq,.approved-final-cta{color:#111827}
.approved-team{background:#fff}
.approved-split{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.approved-team-photo{border-radius:18px;overflow:hidden;position:relative;min-width:0}
.approved-team-photo>img{display:block;width:100%;height:430px;object-fit:cover}
.approved-task-card{position:absolute;bottom:24px;left:24px;right:60px;padding:20px;background:rgba(255,255,255,.94);border-radius:12px;box-shadow:0 10px 30px rgba(20,35,28,.09);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.approved-task-card strong{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.approved-task-card .row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid #e2e7e3;font-size:11px;color:#64748b}
.approved-task-card .row b{color:#176f52;font-weight:600}.approved-task-card small{display:block;margin-top:5px;color:#64748b;font-size:9px}
.approved-team-copy>p{margin-top:20px;color:#475569;font-size:17px}
.approved-steps{display:grid;gap:10px;margin-top:24px}.approved-steps div{display:flex;gap:11px;align-items:center;font-size:14px}.approved-steps span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e1ede4;color:#176f52;font-size:12px}
.approved-link{display:inline-block;margin-top:24px;color:#176f52;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.approved-simple{background:#f5f7fa;padding:68px 0}.approved-simple h2{max-width:700px}
.approved-simple-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:35px}
.approved-simple-grid article{border-top:1px solid #cfd8d2;padding-top:22px}.approved-simple-grid h3{font-size:20px}.approved-simple-grid p{font-size:14px;margin-top:12px;color:#64748b}
.approved-growth{background:#fff}.approved-intro p{margin-top:15px;color:#64748b}
.approved-growth-card{margin-top:35px;border-radius:18px;background:#eef3ef;padding:36px;display:grid;grid-template-columns:1fr 180px;gap:15px;align-items:center}
.approved-growth-card h3{font-size:clamp(25px,3vw,38px)}.approved-growth-card p{font-size:14px;margin-top:15px;max-width:680px;color:#475569}
.approved-connect{display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:rotate(6deg)}.approved-connect span{background:#fff;border:1px solid #dbe2dc;padding:16px 8px;text-align:center;border-radius:10px;font-size:11px;box-shadow:0 8px 20px rgba(20,35,28,.05)}
.approved-usecases{padding-top:0;background:#fff}.approved-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:35px}
.approved-case{display:block;border:1px solid #e2e7e3;border-radius:16px;overflow:hidden;color:#111827;background:#fff;transition:transform .2s,box-shadow .2s}.approved-case:hover,.approved-case:focus-visible{color:#111827;transform:translateY(-4px);box-shadow:0 16px 38px rgba(20,35,28,.1)}
.approved-case img{display:block;height:205px;width:100%;object-fit:cover}.approved-case>div{padding:24px}.approved-case h3{font-size:21px}.approved-case p{font-size:14px;margin-top:12px;color:#64748b}.approved-case .approved-link{margin-top:18px}
.approved-faq{background:#f5f7fa;padding:75px 0}.approved-faq .approved-split{align-items:start;grid-template-columns:.7fr 1.3fr}.approved-faq p{font-size:15px;color:#64748b}.approved-faq details{border-top:1px solid #cfd8d2;padding:19px 0}.approved-faq details:last-child{border-bottom:1px solid #cfd8d2}.approved-faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;font-size:17px;font-weight:600;list-style:none}.approved-faq summary::-webkit-details-marker{display:none}.approved-faq summary::after{content:"+";font-size:22px;font-weight:400;color:#176f52}.approved-faq details[open] summary::after{content:"−"}.approved-faq details p{margin-top:12px;max-width:68ch}
.approved-final-cta{padding:80px 0;background:#e1ede4}.approved-final-cta>.container{display:flex;justify-content:space-between;align-items:center;gap:50px}.approved-final-cta h2{max-width:720px}.approved-final-cta p{margin-top:18px;max-width:600px;color:#475569}.approved-final-cta .actions{min-width:240px;display:grid;margin-top:0}
.approved-lead-panel[hidden]{display:none}.approved-lead-panel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(12,24,19,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.approved-lead-dialog{position:relative;width:min(560px,100%);max-height:min(780px,calc(100vh - 40px));overflow:auto;padding:42px;border-radius:20px;background:var(--panel);box-shadow:0 28px 80px rgba(12,24,19,.28)}
.approved-lead-dialog .lead{display:grid;grid-template-columns:1fr;gap:18px;margin:0}.approved-lead-dialog .lead input:not([type="checkbox"]){width:100%}.approved-lead-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#eef3ef;color:#14231c;font-size:24px;cursor:pointer}

@media(max-width:1400px) and (min-width:1101px){
  .header-row{gap:14px}
  .site-header .logo-img{height:50px}
  .site-nav{gap:12px;font-size:13px}
  .nav-trigger{font-size:13px}
  .header-actions{gap:6px}
  .header-actions .btn{padding:10px 12px;font-size:13px}
  .header-actions .icon-btn{width:36px;height:36px}
  .header-actions .lang-switch{width:auto;height:36px;flex:none}
  .header-actions .lang-switch span{padding-inline:5px}
}

@media(max-width:1000px){
  .home-v2-page>.home-hero-v2>.container,.home-v2-page>.fan-section>.container,.home-v2-page>.home-motion>.container,.home-v2-page>.home-modules-v2>.container,.home-v2-page>.approved-team>.container,.home-v2-page>.approved-simple>.container,.home-v2-page>.custom-section>.container,.home-v2-page>.approved-growth>.container,.home-v2-page>.approved-usecases>.container,.home-v2-page>.approved-faq>.container,.home-v2-page>.approved-final-cta>.container{width:calc(100% - 48px)}
  .home-hero-grid{grid-template-columns:1fr 1fr;gap:30px}.home-hero-art>img{height:440px}.home-float{min-width:185px;padding:12px 14px}.home-float-money{left:8px}.home-module-layout{grid-template-columns:1fr 1fr;gap:30px}.home-module-links a{padding:17px 12px}.home-module-links b{font-size:14px}.home-module-links small{font-size:10px}
}
@media(max-width:760px){
  .home-v2-page>.home-hero-v2>.container,.home-v2-page>.fan-section>.container,.home-v2-page>.home-motion>.container,.home-v2-page>.home-modules-v2>.container,.home-v2-page>.approved-team>.container,.home-v2-page>.approved-simple>.container,.home-v2-page>.custom-section>.container,.home-v2-page>.approved-growth>.container,.home-v2-page>.approved-usecases>.container,.home-v2-page>.approved-faq>.container,.home-v2-page>.approved-final-cta>.container{width:calc(100% - 40px)}
  .home-hero-v2{padding:38px 0 28px}.home-hero-grid{grid-template-columns:1fr;gap:36px}.home-hero-copy h1{font-size:42px}.home-hero-copy>p{font-size:17px}.home-hero-art>img{height:390px;border-bottom-right-radius:58px;object-position:58% center}.home-float{min-width:0;width:auto;padding:11px 14px;background:rgba(255,255,255,.69)}.home-float-team{right:10px;top:auto;bottom:86px}.home-float-money{left:10px;bottom:18px}.home-float span{font-size:9px}.home-float strong{font-size:13px}.home-art-label{display:none}.home-hero-proof{grid-template-columns:1fr;gap:8px;margin-top:34px}.home-proof{grid-template-columns:1fr;gap:18px}.home-linkline{align-items:flex-start;flex-direction:column}.home-module-layout{grid-template-columns:1fr;gap:24px}.home-module-cube,.home-module-cube .cube-area{height:340px}.home-module-links{gap:10px}.home-module-links a{padding:16px 13px}.home-modules-v2{padding:64px 0;--cell:66px;--cell-d:36px;--cell-lift:46px}.home-motion .story-heading,.home-modules-v2 .story-heading{grid-template-columns:1fr;gap:20px;margin-bottom:25px}.home-motion .story-heading .story-lede,.home-modules-v2 .story-heading .story-lede{font-size:16px}
}
@media(max-width:760px){
  .approved-split{grid-template-columns:1fr;gap:36px}.approved-team-photo>img{height:350px}.approved-task-card{right:24px;bottom:20px;padding:16px}.approved-team-copy>p{font-size:16px}
  .approved-simple-grid{grid-template-columns:1fr;gap:24px}.approved-simple,.approved-faq{padding:60px 0}
  .approved-growth-card{padding:28px;grid-template-columns:1fr}.approved-growth-card .approved-connect{max-width:220px;margin-top:25px}.approved-connect span{padding:12px 5px;font-size:9px}
  .approved-case-grid{grid-template-columns:1fr}.approved-case img{height:220px}.approved-faq .approved-split{grid-template-columns:1fr;gap:22px}
  .approved-final-cta>.container{display:block}.approved-final-cta .actions{margin-top:28px;display:grid;min-width:0}.approved-final-cta .actions .btn{width:100%;justify-content:center;padding-inline:12px}
  .approved-lead-dialog{padding:46px 20px 24px}.approved-lead-panel{padding:10px}
}
@media(max-width:390px){.home-hero-art>img{height:365px}.home-float-team{bottom:78px}.home-float strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.home-float{animation:none}.home-module-links a{transition:none}}

/* Three outcomes open like a fan while the visitor reaches the section. */
.fan-section{--fan:1;--spread:360px;--card-width:330px;--card-height:362px;padding:78px 0 52px;overflow:clip;background:radial-gradient(ellipse at 50% 67%,#e6efe8a0,transparent 55%)}
.fan-heading{text-align:center}.fan-heading .eyebrow{margin-bottom:16px}.fan-heading h2{font-size:clamp(34px,4vw,52px)}.fan-heading p{margin:22px auto 0;font-size:16px}
.fan-stage{position:relative;height:485px;perspective:1400px;isolation:isolate;margin-top:14px}
.fan-card{position:absolute;left:calc(50% - var(--card-width)/2);top:64px;width:var(--card-width);height:var(--card-height);border:1px solid #d4dfd4;border-radius:22px;padding:25px;display:flex;flex-direction:column;box-shadow:0 24px 38px -25px #1d382943;transform-origin:50% 100%;transform:translate3d(calc(var(--side)*var(--spread)*var(--fan)),calc((1 - var(--fan))*48px + var(--lift)*var(--fan)),0) rotate(calc(var(--side)*7deg*var(--fan))) rotateX(calc((1 - var(--fan))*16deg));background:#edf3ee;will-change:transform}
.fan-card:focus-visible{outline-offset:8px;z-index:5}.fan-card:hover{box-shadow:0 30px 45px -22px #1d382960}
.fan-money{--side:-1;--lift:15px;background:#e9f1ec;z-index:1}.fan-team{--side:0;--lift:-12px;background:#fff;z-index:3}.fan-ai{--side:1;--lift:15px;background:#f2f1fa;z-index:2;border-color:#dddceb}
.fan-label{display:flex;justify-content:space-between;gap:8px;font:10px 'JetBrains Mono',monospace;text-transform:uppercase;color:#627466;margin-bottom:21px}.fan-label i{font-style:normal;font-size:15px}.fan-card h3{font-size:24px;line-height:1.2}.fan-card p{font-size:12px;line-height:1.6;margin-top:auto}.fan-link{font-size:12px;color:#176f52;margin-top:14px;font-weight:500}
.fan-chart{position:relative;height:107px;margin:19px 0 16px;display:flex;gap:15px;align-items:end;padding:0 12px}.fan-chart span{width:18%;height:35%;background:#b7d0c0;border-radius:4px 4px 0 0}.fan-chart span:nth-child(2){height:53%}.fan-chart span:nth-child(3){height:47%}.fan-chart span:nth-child(4){height:70%}.fan-chart span:nth-child(5){height:89%;background:#91b59f}.fan-chart svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#176f52;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fan-tasks{display:grid;gap:8px;margin:19px 0 16px}.fan-tasks div{display:flex;gap:9px;align-items:center;font-size:11px;padding:8px;border:1px solid #e9ede8;border-radius:7px}.fan-tasks b{color:#176f52}.fan-tasks i{margin-left:auto;font-size:8px;font-style:normal;display:grid;place-items:center;background:#e5ede4;width:21px;height:21px;border-radius:50%}
.fan-chat{margin:27px 0 20px;font-size:11px}.fan-chat>span{display:block;background:#e0ddef;margin-left:20px;padding:12px;border-radius:9px 9px 0 9px}.fan-chat>div{display:flex;gap:9px;align-items:center;padding:16px 0}.fan-chat img{width:24px;height:27px}.fan-chat b{font-weight:400}.fan-chat em{font-style:normal;color:#176f52;margin-left:6px}
.fan-foot{display:flex;align-items:center;justify-content:center;gap:16px;color:#657168;font-size:12px}.fan-foot>span{height:1px;width:50px;background:#cedbd0}
@media(max-width:1200px){.fan-section{--spread:29vw;--card-width:28vw;--card-height:350px}.fan-card{padding:21px}.fan-card h3{font-size:21px}.fan-label{font-size:9px}}
@media(max-width:760px){.fan-section{--spread:25vw;--card-width:48vw;--card-height:255px;padding:54px 0 35px}.fan-heading p{font-size:14px;max-width:260px}.fan-stage{height:355px;margin-left:-18px;margin-right:-18px;margin-top:8px}.fan-card{top:52px;padding:16px 12px;border-radius:16px;transform-origin:50% 100%;transform:translate3d(calc(var(--side)*var(--spread)*var(--fan)),calc((1 - var(--fan))*25px + var(--lift)*var(--fan)),0) rotate(calc(var(--side)*13deg*var(--fan)));}.fan-money,.fan-ai{--lift:24px}.fan-team{--lift:-30px}.fan-label{font-size:8px;margin-bottom:14px;line-height:1.5}.fan-label i{display:none}.fan-card h3{font-size:17px}.fan-card p{font-size:10px}.fan-link{font-size:9px;margin-top:10px}.fan-chart{height:72px;gap:7px;margin:16px 0}.fan-tasks{gap:5px;margin:14px 0}.fan-tasks div{font-size:9px;padding:5px;gap:5px}.fan-tasks i{font-size:7px;width:16px;height:16px}.fan-chat{font-size:9px;margin:16px 0}.fan-chat>span{padding:9px;margin-left:10px}.fan-chat>div{gap:5px;padding:12px 0}.fan-chat img{width:18px;height:22px}.fan-foot{font-size:10px;gap:9px}.fan-foot>span{width:18px}}
@media(prefers-reduced-motion:reduce){.fan-card{will-change:auto}.fan-section{--fan:1!important}}
.fan-section{--card-height:390px}.fan-mobile-title{display:none}.fan-tasks div{flex-shrink:0}.fan-tasks{gap:6px}.fan-stage{height:505px}
@media(max-width:1200px) and (min-width:761px){.fan-section{--card-height:380px}}
@media(max-width:760px){.fan-section{--spread:30vw;--card-width:28vw;--card-height:222px}.fan-stage{height:325px}.fan-card{padding:13px 9px;transform:translate3d(calc(var(--side)*var(--spread)*var(--fan)),calc((1 - var(--fan))*25px + var(--lift)*var(--fan)),0) rotate(calc(var(--side)*7deg*var(--fan)));border-radius:12px}.fan-money,.fan-ai{--lift:14px}.fan-team{--lift:0px}.fan-desktop-title{display:none}.fan-mobile-title{display:inline}.fan-card h3{font-size:14px;line-height:1.25;letter-spacing:-.035em}.fan-label{font-size:7px;height:24px;margin-bottom:7px}.fan-card p{display:none}.fan-link{margin-top:auto;font-size:9px;line-height:1.4}.fan-chart{height:65px;padding:0 3px;gap:5px}.fan-tasks{gap:4px;margin:13px 0}.fan-tasks div{font-size:7px;padding:5px 3px;gap:3px}.fan-tasks i{display:none}.fan-chat{font-size:7px;margin:14px 0 8px}.fan-chat>span{padding:7px;margin-left:0}.fan-chat>div{align-items:start;padding:10px 0}.fan-chat img{width:14px;height:17px}.fan-chat em{margin-left:0}.fan-foot{font-size:9px}}

/* Approved product storytelling. Each scene is a living app surface, with a
   choreographed cursor. Copied into the production bundle intentionally. */
.cinema{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;color:#1b3026;background:#eaf1e9;min-height:640px;contain:layout paint}.cinema-wash{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 25% 10%,#f9fff4 0,transparent 55%),radial-gradient(ellipse at 75% 75%,#a9c9af 0,transparent 60%),#e4ede3}.ai-cinema .cinema-wash{background:radial-gradient(ellipse at 65% 25%,#d1e7b5 0,transparent 60%),radial-gradient(ellipse at 20% 75%,#aac6b4 0,transparent 55%),#e6eee4}.cinema h3,.cinema h4,.cinema p{margin:0}.cinema h3{font-size:25px;line-height:1.18;letter-spacing:-.04em}.cinema small{font-size:10px}.cinema i,.cinema em{font-style:normal}.cinema-footer{position:absolute;bottom:14px;left:30px;right:22px;display:flex;align-items:center;justify-content:center;gap:15px;min-height:30px;font-size:13px;color:#3b5848}.cinema-pause{position:absolute;right:0;width:28px;height:28px;border:1px solid #a7bbae;border-radius:50%;background:#ffffff9c;color:#2b523d;opacity:.35;transition:opacity 0.1504s;cursor:pointer;font-size:13px;padding:0}.cinema:hover .cinema-pause,.cinema-pause:focus-visible{opacity:1}.demo-app{position:absolute;inset:42px 42px 66px;display:flex;filter:drop-shadow(0 25px 30px #263e2420);perspective:1200px;transition:opacity 0.5263s,transform 0.6767s cubic-bezier(.2,.7,.2,1)}.demo-rail{position:absolute;left:0;top:0;bottom:0;width:62px;border-radius:18px;background:#fff;display:flex;align-items:center;flex-direction:column;z-index:3;border:1px solid #ffffffa0;box-shadow:0 0 0 8px #ffffff30;transition:left 0.6767s cubic-bezier(.2,.7,.2,1)}.demo-brand{font-size:38px;line-height:1;font-weight:600;letter-spacing:-.1em;margin-top:18px;color:#214d3a}.demo-brand>span,.finance-wordmark>span{color:#d9541e}.rail-icons{display:grid;gap:16px;margin-top:60px;width:100%;justify-content:center}.rail-icons>span{display:grid;place-items:center;width:38px;height:38px;font-size:23px;color:#8a9c91;border-radius:11px;transition:background 0.3008s,color 0.3008s,transform 0.3008s}.demo-avatar{margin-top:auto;margin-bottom:20px;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;background:#e9efea;font-size:9px}.demo-chat{position:absolute;right:0;top:8px;bottom:8px;width:33%;background:#fff;border:1px solid #dce7de;border-radius:0 17px 17px 0;z-index:2;overflow:hidden;transition:width 0.6767s cubic-bezier(.2,.7,.2,1),right 0.6767s cubic-bezier(.2,.7,.2,1),border-radius 0.5263s,opacity 0.3759s}.demo-workspace{position:absolute;left:70px;right:31%;top:8px;bottom:8px;background:#fafcfb;border-radius:0 14px 14px 0;padding:0 22px;overflow:hidden;opacity:1;transition:opacity 0.4511s,transform 0.6767s;transform-origin:left}.workspace-bar{height:43px;border-bottom:1px solid #e5ece7;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#7c8c81}.workspace-avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:8px;background:#dfeadf;color:#4f7257}.chat-header{height:51px;border-bottom:1px solid #ecf0ed;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:12px}.chat-header>span:first-child{display:flex;align-items:center;gap:8px;font-weight:500}.chat-header i{font-size:22px;color:#2a684b}.chat-welcome{position:absolute;left:20px;right:20px;top:77px;display:flex;align-items:center;flex-direction:column;text-align:center;transition:opacity 0.2632s,transform 0.3759s}.welcome-spark{font-size:32px;color:#34714e;line-height:1;margin-bottom:16px}.chat-welcome h3{font-size:29px}.chat-welcome p{font-size:12px;color:#71867a;margin:13px 0 16px}.suggestion{display:flex;gap:10px;align-items:center;border:1px solid #e2ebe4;border-radius:7px;font-size:11px;padding:8px 12px;margin-top:7px;width:228px;text-align:left}.suggestion span{color:#568567;font-size:15px}.chat-composer{position:absolute;left:18px;right:18px;bottom:33px;border:1px solid #b4ccb9;box-shadow:0 3px 12px #1632200b;border-radius:10px;min-height:88px;padding:12px;font-size:12px;line-height:1.45;background:#fff;transition:border 0.3008s,box-shadow 0.3008s}.composer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#8da093}.composer-bottom i{display:grid;place-items:center;background:#215b40;color:#fff;width:25px;height:25px;border-radius:7px;font-size:17px}.composer-placeholder{color:#a0aea4}.composer-caret{display:none;width:1px;height:13px;background:#31583e;vertical-align:middle;animation:caret 0.7519s steps(1) infinite}.chat-disclaimer{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:#91a094;font-size:8px!important}.chat-conversation{position:absolute;inset:67px 17px 135px;opacity:0;transform:translateY(12px);transition:opacity 0.3008s,transform 0.3759s}.user-message{background:#286749;color:#fff;border-radius:11px 11px 2px 11px;padding:11px 13px;font-size:11px;line-height:1.55;margin-left:22px}.assistant-thinking{display:flex;gap:4px;align-items:center;margin-top:22px;color:#819387;font-size:10px}.assistant-thinking i{width:4px;height:4px;border-radius:50%;background:#3f8059;animation:thought 0.7519s ease-in-out infinite}.assistant-thinking i:nth-child(2){animation-delay:0.1128s}.assistant-thinking i:nth-child(3){animation-delay:0.2256s}.assistant-thinking span{margin-left:6px}.assistant-answer{display:flex;gap:9px;align-items:center;margin:17px 0 12px;opacity:0;transition:opacity 0.3008s}.assistant-answer p{font-size:11px;line-height:1.5}.answer-avatar{color:#2c6a47;font-size:23px}.action-preview{border:1px solid #c9dbcd;border-radius:10px;background:#fbfdfb;padding:13px;opacity:0;transform:translateY(14px);transition:opacity 0.3008s,transform 0.3759s;box-shadow:0 4px 13px #173c2310}.action-preview>small{font-size:8px;letter-spacing:.05em;color:#78907e}.action-preview h4{font-size:15px;letter-spacing:-.02em;line-height:1.3;margin:6px 0 10px}.action-person{display:flex;align-items:center;gap:7px;font-size:11px}.action-person i,.person-line>i,.avatar-pair i,.mini-person{width:23px;height:23px;display:inline-grid;place-items:center;border-radius:50%;background:#e3ecdc;color:#5b7558;font-size:8px}.action-date{font-size:10px!important;margin-top:8px!important;color:#708573}.simulated-confirm{background:#245f42;border-radius:6px;color:#fff;font-size:11px;padding:9px 10px;display:flex;justify-content:space-between;margin-top:12px;transition:transform 0.188s,background 0.188s}.confirmed-label{display:none;color:#286b45;font-size:11px;padding-top:10px;margin-top:8px;border-top:1px solid #e1e9df}.chat-result-link{font-size:11px;color:#2d7251;display:flex;justify-content:space-between;margin-top:12px;opacity:0;transition:opacity 0.3759s}.screen-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0}.screen-heading small{font-size:8px;color:#8a9b90;letter-spacing:.07em;display:block;margin-bottom:7px}.view-chip{border:1px solid #dee7df;border-radius:6px;padding:6px 9px;background:#fff;font-size:9px;color:#748579;white-space:nowrap}.calendar-top{display:flex;justify-content:space-between;font-size:11px;padding:5px 0 15px}.calendar-top>span{font-size:9px;color:#7c8c80}.calendar-grid{position:relative;height:288px;border-top:1px solid #e4eae5;margin-left:26px}.day-head{height:51px;display:grid;grid-template-columns:repeat(5,1fr);text-align:center;font-size:8px;color:#8d9b90}.day-head>span{display:flex;align-items:center;flex-direction:column;gap:3px;padding-top:7px}.day-head b{font-size:12px;color:#536b5b}.day-head .today b{background:#225c41;color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.calendar-hours{position:absolute;left:-29px;top:66px;display:grid;gap:41px;font-size:7px;color:#9aaa9f}.calendar-lines{position:absolute;inset:51px 0 0;background:repeating-linear-gradient(to bottom,#e6ece7 0 1px,transparent 1px 52px),repeating-linear-gradient(to right,#e6ece7 0 1px,transparent 1px 20%)}.calendar-existing{position:absolute;left:2px;top:57px;width:19%;padding:6px 5px;background:#e9eee8;border-left:2px solid #bccdbb;border-radius:4px;font-size:8px;color:#788c78}.calendar-existing small{display:block;font-size:7px;margin-top:3px}.calendar-event{position:absolute;left:20%;top:110px;width:39%;padding:10px;background:#dcefd8;border-left:3px solid #477c4c;border-radius:6px;box-shadow:0 3px 8px #264e2420;transform:scale(.65);transform-origin:left top;opacity:0;transition:opacity 0.3759s,transform 0.6015s cubic-bezier(.16,1.4,.3,1)}.calendar-event>span{font-size:8px;color:#59805a}.calendar-event b{display:block;font-size:12px;margin:4px 0 8px}.calendar-event small{font-size:8px;display:flex;align-items:center;gap:6px}.calendar-event i{background:#c6ddbf;border-radius:50%;padding:3px;font-size:7px}.event-popover{position:absolute;top:100px;right:0;width:76%;padding:20px;background:#fff;border:1px solid #dae5dc;border-radius:12px;box-shadow:0 16px 50px #193d2730;transform:translateY(18px) scale(.95);opacity:0;transition:opacity 0.3759s,transform 0.4887s cubic-bezier(.2,.8,.2,1)}.success-label{color:#45855c;font-size:9px}.event-popover h4{font-size:19px;letter-spacing:-.04em;margin:10px 0}.event-popover p{font-size:10px;color:#6e8274}.person-line{display:flex;align-items:center;gap:9px;font-size:11px;margin-top:19px}.person-line small{display:block;color:#839589;font-size:8px;margin-top:2px}.mini-calendar-icon{position:absolute;right:17px;bottom:20px;font-size:23px;border:1px solid #dce7dd;padding:4px 8px;border-radius:7px;line-height:1.15;text-align:center;color:#4d7257}.mini-calendar-icon span{display:block;font-size:6px;letter-spacing:.05em}.demo-toast{position:absolute;bottom:16px;left:25px;right:25px;background:#fff;border:1px solid #d9e5d9;border-radius:10px;padding:10px 14px;box-shadow:0 8px 25px #25452815;display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(15px);transition:opacity 0.3759s,transform 0.3759s;z-index:4}.demo-toast>span{width:25px;height:25px;border-radius:50%;background:#e7f1e3;color:#4b8050;display:grid;place-items:center}.demo-toast b{font-size:11px}.demo-toast small{display:block;font-size:9px;color:#8b9b8e}.demo-tasks{display:none}.task-tabs{display:flex;gap:22px;font-size:10px;border-bottom:1px solid #e3eae4;padding:0 0 12px;color:#8e9d93}.task-tabs b{font-weight:500;color:#245638}.task-tabs em{background:#e3eee3;padding:1px 5px;border-radius:4px;margin-left:4px;font-size:8px}.task-table-head,.task-table-row{display:grid;grid-template-columns:1fr 75px 46px;gap:10px;padding:12px 0;font-size:9px;border-bottom:1px solid #e7ede7;align-items:center}.task-table-head{color:#9ba99f;font-size:8px}.task-table-row>span:first-child{display:flex;align-items:center;gap:7px}.task-check{width:10px;height:10px;border:1px solid #b6c8b9;border-radius:3px;display:inline-grid;place-items:center;font-size:7px;flex-shrink:0}.task-check.done{color:#4d8656;background:#e0eddf}.avatar-pair{display:flex;gap:4px;align-items:center}.avatar-pair i{width:18px;height:18px;font-size:6px}.task-table-row small{font-size:8px;color:#8c9b90}.new-task{background:#edf5e8;opacity:0;transform:translateY(-10px);transition:opacity 0.3759s,transform 0.5263s}.task-detail{position:absolute;top:59px;right:0;bottom:0;width:81%;padding:20px;background:#fff;border-left:1px solid #dfe7df;box-shadow:-14px 0 40px #18342312;transform:translateX(105%);transition:transform 0.6767s cubic-bezier(.2,.75,.2,1)}.detail-kicker{font-size:8px;color:#9aaa9f;display:flex;justify-content:space-between}.task-detail h4{font-size:24px;line-height:1.16;letter-spacing:-.04em;margin:20px 0 15px}.task-status{display:inline-block;font-size:9px;color:#5c8055;background:#edf3e8;border-radius:5px;padding:5px 8px}.task-detail dl{font-size:10px;margin:17px 0}.task-detail dl>div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #eef2ec;align-items:center}.task-detail dt{width:70px;color:#91a094}.task-detail dd{margin:0;display:flex;align-items:center;gap:7px}.task-detail p{font-size:11px;line-height:1.6;color:#819084}.detail-activity{position:absolute;bottom:15px;display:flex;gap:10px;align-items:center;font-size:9px;color:#5a7c60}.detail-activity i{font-size:20px}.detail-activity small{display:block;font-size:8px;color:#96a398;margin-top:2px}.demo-pointer{position:absolute;left:0;top:0;width:27px;height:34px;z-index:8;pointer-events:none;filter:drop-shadow(0 2px 2px #17352625);opacity:1;transition:opacity 0.2256s}.demo-pointer svg{width:100%;height:100%}.demo-pointer>i{position:absolute;left:-14px;top:-14px;width:36px;height:36px;border:2px solid #7bb995;border-radius:50%;opacity:0}.demo-pointer.is-clicking>i{animation:clickring 0.4511s ease-out}.demo-pointer.is-clicking svg{transform:scale(.88)}
.ai-cinema:not(.is-expanded) .demo-chat{width:55%;right:19%;border-radius:0 16px 16px 0}.ai-cinema:not(.is-expanded) .demo-rail{left:calc(26% - 62px)}.ai-cinema:not(.is-expanded) .demo-workspace{opacity:0;transform:scaleX(.65)}.ai-cinema[data-scene="intro"] .demo-chat{opacity:0;transform:scaleX(.1);transform-origin:left}.ai-cinema[data-scene="intro"] .demo-rail{left:calc(50% - 31px)}.ai-cinema .demo-chat{transition:width 0.6767s,right 0.6767s,border-radius 0.5263s,opacity 0.3759s,transform 0.6767s}.ai-cinema.is-typing .chat-composer{border-color:#4d8a5d;box-shadow:0 0 0 3px #accda326}.ai-cinema.is-typing .composer-caret{display:inline-block}.ai-cinema.is-typing .composer-placeholder{display:none}.ai-cinema.has-message .chat-welcome{opacity:0;transform:translateY(-12px)}.ai-cinema.has-message .chat-conversation{opacity:1;transform:none}.ai-cinema.has-preview .assistant-thinking{display:none}.ai-cinema.has-preview .assistant-answer,.ai-cinema.has-preview .action-preview{opacity:1;transform:none}.ai-cinema.is-confirmed .simulated-confirm{display:none}.ai-cinema.is-confirmed .confirmed-label{display:block}.ai-cinema.is-confirmed .chat-result-link{opacity:1}.ai-cinema.is-confirmed .demo-toast{opacity:1;transform:none}.ai-cinema.has-result .calendar-event,.ai-cinema.has-result .new-task{opacity:1;transform:none}.ai-cinema.has-detail .event-popover{opacity:1;transform:none}.ai-cinema.has-detail .task-detail{transform:none}.ai-cinema.has-detail .demo-toast{opacity:0;transform:translateY(12px)}.ai-cinema[data-act="task"] .demo-calendar{display:none}.ai-cinema[data-act="task"] .demo-tasks{display:block}.ai-cinema [data-nav="assistant"]{background:#e5f0df;color:#356747}.ai-cinema.is-expanded [data-nav="assistant"]{background:transparent;color:#8a9c91}.ai-cinema.is-expanded[data-act="meeting"] [data-nav="calendar"],.ai-cinema.is-expanded[data-act="task"] [data-nav="tasks"]{background:#e5f0df;color:#356747}.cinema.is-transitioning .demo-app,.cinema.is-transitioning .finance-app{opacity:0;transform:translateY(12px) scale(.98)}.cinema.is-transitioning .demo-pointer{opacity:0}.cinema.is-paused *{animation-play-state:paused!important}
/* Finance: incoming documents, live report construction and a reconciled balance. */
.finance-app{position:absolute;inset:40px 70px 68px;background:#fff;border:1px solid #dbe7db;border-radius:17px;box-shadow:0 25px 50px #1d42231d;overflow:visible;transition:opacity 0.4511s,transform 0.6015s}.finance-app-bar{height:56px;padding:0 24px;display:flex;align-items:center;gap:18px;border-bottom:1px solid #e9eee8}.finance-wordmark{font-size:29px;font-weight:600;letter-spacing:-.08em;display:flex;align-items:center;color:#27563c}.finance-wordmark>span{margin-right:18px}.finance-wordmark>b{font-size:13px;letter-spacing:0;font-weight:500}.finance-period{font-size:10px;color:#849488;margin-left:auto}.finance-nav{display:flex;gap:27px;height:41px;padding:0 25px;border-bottom:1px solid #e4ebe3;align-items:center;font-size:10px;color:#809287}.finance-nav>span{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent;transition:color 0.2256s,border-color 0.2256s}.finance-cinema[data-screen="operations"] [data-fnav="operations"],.finance-cinema[data-screen="pnl"] [data-fnav="pnl"],.finance-cinema[data-screen="balance"] [data-fnav="balance"]{color:#25663f;border-color:#31714c}.finance-workspace{position:absolute;inset:97px 0 0;overflow:hidden}.finance-screen{position:absolute;inset:0;padding:0 30px;opacity:0;transform:translateX(24px);transition:opacity 0.4887s,transform 0.6015s;pointer-events:none}.finance-cinema[data-screen="operations"] .finance-inbox,.finance-cinema[data-screen="pnl"] .pnl-screen,.finance-cinema[data-screen="balance"] .balance-screen{opacity:1;transform:none;pointer-events:auto}.finance-inbox .screen-heading{margin:21px 0}.finance-inbox h3{font-size:23px;line-height:1.1}.sync-label{font-size:9px;color:#7f9684;display:flex;align-items:center;gap:5px}.sync-label i{width:5px;height:5px;background:#82ac77;border-radius:50%}.live-document{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid #e1e9de;border-radius:11px;background:#fff;box-shadow:0 8px 20px #28412706;margin-bottom:12px;opacity:0;transform:translateY(25px) scale(.96);transition:opacity 0.4511s,transform 0.6015s cubic-bezier(.2,.8,.2,1),border-color 0.3008s}.document-icon{width:39px;height:44px;border:1px solid #dce7d9;border-radius:7px;background:#f5f8f2;display:grid;place-items:center;font-size:25px;color:#72906b}.live-document>div>small{display:block;color:#8e9e8b;font-size:8px;letter-spacing:.05em}.live-document b{display:block;font-size:13px;font-weight:500;margin:4px 0}.live-document>div>span{font-size:9px;color:#889b85}.live-document strong{margin-left:auto;text-align:right;font-size:20px;font-weight:500;letter-spacing:-.04em}.live-document strong small{display:block;font-size:8px;font-weight:400;letter-spacing:0;color:#94a18f;margin-top:4px}.live-document em{font-size:9px;background:#f0f6ea;color:#688d57;padding:5px 7px;border-radius:5px;min-width:86px;text-align:center}.payment-document{border-color:#bed6b7}.payment-document .document-icon{background:#eaf3df;color:#4d7940}.payment-document strong{color:#4d7b42}.payment-document em{background:#285f3b;color:white}.payment-link{display:flex;align-items:center;gap:13px;padding:15px 20px;background:#eff5e9;border:1px solid #d9e8d1;border-radius:9px;opacity:0;transform:translateY(15px);transition:opacity 0.3759s,transform 0.5263s}.payment-link>span{font-size:25px;color:#73935e}.payment-link b{font-size:11px;font-weight:500}.payment-link small{display:block;color:#7e9274;font-size:9px;margin-top:3px}.payment-link>i{margin-left:auto;color:#5c8651}.finance-bottom-note{font-size:10px;color:#899a80;margin-top:15px;opacity:0;transition:opacity 0.3759s}.finance-bottom-note>span{color:#64924f}.finance-notification{position:absolute;right:-25px;top:72px;display:flex;align-items:center;gap:12px;padding:15px 18px;background:#fff;border:1px solid #c7dbc0;border-radius:12px;box-shadow:0 15px 40px #173b2626;z-index:4;opacity:0;transform:translateY(-20px);transition:opacity 0.3759s,transform 0.5263s}.finance-notification>i{font-size:21px;width:35px;height:35px;background:#e8f4db;border-radius:10px;display:grid;place-items:center;color:#628c42}.finance-notification b{display:block;font-size:13px}.finance-notification div>span{font-size:9px;color:#8ea080}.finance-notification>small{font-size:8px;color:#a3ae9c;align-self:flex-start}.finance-mini-toast{position:absolute;bottom:16px;right:22px;font-size:10px;border:1px solid #d9e7cf;background:#f7fbf2;padding:9px 13px;border-radius:7px;color:#709154;opacity:0;transform:translateY(10px);transition:opacity 0.3759s,transform 0.5263s}.finance-cinema.has-sale .sale-document,.finance-cinema.has-payment .payment-document,.finance-cinema.has-match .payment-link{opacity:1;transform:none}.finance-cinema.has-notification .finance-notification{opacity:1;transform:none}.finance-cinema.has-match .finance-bottom-note{opacity:1}.finance-cinema.has-match .payment-document em{background:#eef5e7;color:#63864f;font-size:0}.finance-cinema.has-match .payment-document em:after{content:'✓ Связано';font-size:9px}.finance-cinema.has-reports .finance-mini-toast{opacity:1;transform:none}.report-table{border:1px solid #e2e9df;border-radius:10px;overflow:hidden}.report-table-head{display:flex;justify-content:space-between;padding:11px 18px;background:#f8faf6;color:#8f9f86;font-size:10px}.report-line{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e8eee3;padding:14px 18px;opacity:0;transform:translateY(12px);transition:opacity 0.3759s,transform 0.4511s;font-size:13px}.report-line strong{font:500 19px 'JetBrains Mono',monospace;letter-spacing:-.05em}.report-dot{display:inline-block;width:6px;height:6px;background:#7e9f65;border-radius:50%;margin-right:8px}.report-line.sub{color:#8b9c81;font-size:12px}.report-line.sub strong{font-size:16px}.report-line.total{background:#eaf3df;color:#466d32;padding:18px}.report-line.total strong{font-size:26px}.profit-visual{margin-top:21px;opacity:0;transform:translateY(10px);transition:opacity 0.3759s,transform 0.3759s}.profit-track{display:flex;height:49px;border-radius:8px;overflow:hidden}.profit-track>span{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px}.cost-part{background:#e2e9dc;width:64%;color:#829475}.profit-part{width:36%;background:#80a95d;color:white}.profit-track small{font-size:8px;margin-top:3px}.profit-visual>span{display:block;text-align:center;font-size:9px;color:#92a087;margin-top:7px}.report-insight{display:flex;gap:12px;align-items:center;margin-top:21px;opacity:0;transform:translateY(10px);transition:opacity 0.3759s,transform 0.3759s}.report-insight>i{color:#759455;font-size:24px}.report-insight b{font-size:12px;font-weight:500;display:block}.report-insight p>span{font-size:10px;display:block;margin-top:3px;color:#879b7b}.balance-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}.balance-label{font-size:9px;color:#809775;letter-spacing:.06em;display:block;margin-bottom:15px}.balance-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;padding:13px 0;border-bottom:1px solid #e5eddf;opacity:0;transform:translateY(10px);transition:opacity 0.3759s,transform 0.4511s}.balance-row b{font-size:13px;white-space:nowrap;font-weight:500}.balance-total{margin-top:20px;background:#edf4e4;border-radius:9px;padding:16px;display:flex;flex-direction:column;gap:7px;opacity:0;transform:translateY(10px);transition:opacity 0.3759s,transform 0.4511s}.balance-total>span{font-size:10px;color:#718b5d}.balance-total strong{font:500 24px 'JetBrains Mono',monospace;color:#547537;letter-spacing:-.05em}.balance-check{display:flex;gap:13px;align-items:center;justify-content:center;margin-top:26px;opacity:0;transform:translateY(10px);transition:opacity 0.3759s,transform 0.4511s}.balance-check>span{background:#e3f1d7;color:#628845;width:35px;height:35px;border-radius:50%;display:grid;place-items:center}.balance-check b{display:block;font-size:14px;font-weight:500}.balance-check small{font-size:10px;color:#849979}.finance-cinema[data-rows="1"] [data-row="1"],.finance-cinema[data-rows="2"] [data-row="1"],.finance-cinema[data-rows="2"] [data-row="2"],.finance-cinema[data-rows="3"] [data-row]{opacity:1;transform:none}.finance-cinema.has-totals .profit-visual,.finance-cinema.has-totals .report-insight,.finance-cinema.has-totals .balance-total,.finance-cinema.has-totals .balance-check{opacity:1;transform:none}.finance-example-note{font-size:11px!important;color:#829280;margin:14px 0 0!important;max-width:960px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes caret{50%{opacity:0}}@keyframes thought{50%{opacity:.25;transform:translateY(-2px)}}@keyframes clickring{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}



.ai-cinema.has-message .chat-composer{min-height:52px;max-height:63px;padding:9px 12px}.ai-cinema.has-message .composer-bottom{margin-top:4px}.ai-cinema.has-message .chat-conversation{bottom:100px}.ai-cinema.has-message .composer-placeholder{font-size:10px}.ai-cinema.has-message .chat-composer [data-cinema-typed]:empty+.composer-caret{display:none}

.balance-screen .screen-heading{margin:18px 0}.balance-columns{margin-top:15px}.balance-total{margin-top:15px;padding:14px 16px}.balance-check{margin-top:18px}

.ai-cinema.is-typing .suggestion{opacity:0;transition:opacity 0.2632s}


/* One fixed composition on every device, scaled as a film. */
.cinema{width:100%;aspect-ratio:1240 / 640;min-height:0}.cinema-canvas{position:absolute;left:0;top:0;width:1240px;height:640px;transform-origin:0 0;transform:scale(var(--cinema-scale,1));isolation:isolate}.demo-workspace{right:33%}
@media(max-width:760px){.story-section{padding:60px 0}.story-heading{grid-template-columns:1fr;gap:20px;margin-bottom:25px}.story-heading p{font-size:16px}.story-proof{grid-template-columns:1fr;gap:18px}.story-proof article{padding-top:16px}.story-proof small{margin-bottom:7px}.story-linkline{align-items:flex-start;flex-direction:column}.cinema{width:100vw;margin-left:calc((100% - 100vw)/2);margin-right:0;border-radius:0}.finance-example-note{font-size:10px!important;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.cinema *{animation:none!important;transition:none!important}.demo-pointer{display:none}}

.demo-brand{letter-spacing:0;line-height:1}.demo-brand img{width:35px;height:40px;object-fit:contain}.finance-wordmark{gap:12px;letter-spacing:0}.finance-wordmark img{width:29px;height:34px;object-fit:contain}

.finance-cinema[data-lang="en"].has-match .payment-document em:after{content:'✓ Matched'}