/* ============================================================================
   НаВстрече — дизайн-токены.
   Источник: Figma «НаВстрече · Light Glass / Desktop 1440» (302:3).
   Значения стекла, кнопок и типографики сняты через Figma MCP и совпадают
   с токенами «Видеоточки» (191:804) и прежней страницы «НаВстрече» (61:2164) —
   один и тот же файл, одна дизайн-система. Проверено по get_variable_defs:
   Blue Ribbon #005CFE, Primary/600 #2563eb, Gray/900 #101828.
   ========================================================================= */

@font-face{
  font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/img/v9a/019021ad6e1f.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/img/v9a/21e838f00fb7.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ── Имена v2 (ds/tokens.json, A7) ─────────────────────────────────────
     Имена эталона ds.html. Прежние имена выше — псевдонимы: var(--новое).
     Новые правила пишутся только новыми именами. */
  --accent:#1a59f5;
  --accent-hover:#1450e0;
  --accent-text:#1a59f5;
  --text-heading:#031040;
  --text-section:#0c132e;
  --text-lead-hero:#384563;
  --text-body:#424f6b;
  --text-menu:#424f6b;
  --text-caption:#505e78;
  --text-footnote:#505e78;
  --surface-soft:#f7f9fd;
  --surface-sunken:#f4f7fc;
  --line-soft:#eef2f9;
  --line:#e4eaf6;
  --fs-label:11px;
  --fs-footnote:12px;
  --fs-caption:13px;
  --fs-card:14px;
  --fs-dense:15px;
  --fs-body:16px;
  --fs-lead-hero:17px;
  --fs-stat:clamp(22px,1.2rem + .5vw,26px);
  --fs-stat-card:clamp(26px,1.4rem + .4vw,28px);
  --mock-fs-1:9px;
  --mock-fs-2:11px;
  --mock-fs-3:12px;
  --mock-fs-4:13px;
  --mock-fs-5:15px;
  --pad-card-xl:46px;
  --pad-form:26px;
  --r-card:20px;
  --r-pill:999px;
  --elev-1:0 1px 2px rgba(15,31,71,.04), 0 12px 28px -12px rgba(15,31,71,.16);
  --elev-2:0 18px 46px rgba(15,31,71,.10);
  --elev-3:0 2px 6px rgba(15,31,71,.06), 0 28px 56px -22px rgba(15,31,71,.24);
  --sh-tile:0 3px 8px rgba(26,89,242,.13);
  --sh-header-scrolled:0 10px 30px rgba(15,31,71,.12);
  --sh-media:0 4px 14px rgba(15,31,71,.08),0 46px 88px -36px rgba(15,31,71,.38);
  --blur-strong:18px;
  --blur-glass:16px;
  --blur-solid:8px;
  --blur-node:10px;
  --blur-ghost:5px;

  /* ── Чернила и текст ─────────────────────────────────────────────────── */
  --ink:var(--text-section);
  --ink-2:var(--text-heading);        /* заголовки */
  --muted:var(--text-lead-hero);        /* лид */
  --muted-2:var(--text-body);      /* основной текст */
  --muted-3:var(--text-caption);      /* правка главной v6, перенесено из home.responsive.css */
  --muted-4:var(--text-footnote);      /* сноски; = --muted-3, пара была неразличима (D-02 А) */
  --nav:var(--text-menu);          /* пункты меню; = --muted-2 (D-02 А) */

  /* ── Акценты ─────────────────────────────────────────────────────────── */
  --blue:var(--accent);         /* кнопки, активные состояния */
  --blue-site:var(--accent-text);    /* акцентный текст; один синий на сайт (D-01 А) */
  --blue-deep:var(--accent-hover);    /* hover primary */
  --violet:#7a5eed;
  --teal:#14a1a8;
  --rec:#e5484d;          /* индикатор записи */
  --ok:#30a46c;           /* активные источники, успех */

  /* Семантика сигналов радара. Отдельный ряд от акцентов: эти четыре цвета
     обозначают тип сигнала, а не подсвечивают интерфейс, и в схемы не идут. */
  --sig-risk:#e5484d;     /* риски */
  --sig-opp:#1a59f5;      /* возможности */
  --sig-obj:#e08c31;      /* возражения */
  --sig-pos:#2f9e63;      /* позитив */

  /* ── Поверхности ─────────────────────────────────────────────────────── */
  --tile:#ebf1fd;         /* плитка под иконкой */
  --tile-teal:#e2f6f4;
  --tile-violet:#efeafd;
  --tile-grey:#eef1f6;
  --tile-risk:#fdecec;
  --tile-obj:#fdf1e3;
  --tile-pos:#e6f5ec;
  --line-2:var(--line);       /* разделители */
  --line-3:var(--line-soft);
  --surface:#ffffff;
  --surface-2:var(--surface-soft);    /* вложенные панели */
  --surface-3:var(--surface-sunken);
  --bg-page:linear-gradient(180deg,#fafbfe 0%,#f7f9fc 240px);  /* фон страницы (A7) */

  /* Линии (D-04 А): семь сырых серо-голубых сведены к трём линиям и дорожке */
  --line-strong:#c9d3e6;  /* наведение на поле и чип, пунктир, связи схемы */
  --track:#e6ecf7;        /* дорожка шкалы и степпера */

  /* Сырые цвета общего слоя получили имена с теми же значениями (A7) */
  --accent-fill:rgba(26,89,245,.96);      /* заливка основной кнопки */
  --ghost-bg:rgba(255,255,255,.72);       /* заливка кнопки-призрака и шапки */
  --ghost-br:rgba(26,89,245,.34);         /* рамка кнопки-призрака */
  --strip-br:rgba(255,255,255,.8);        /* рамка полосы C-03 */
  --accent-wash:rgba(26,89,245,.075);     /* подложка чипа первого экрана главной */
  --accent-wash-2:rgba(26,89,245,.11);    /* та же подложка при наведении, подсветка таба */
  --chip-text:#2c3a5a;                    /* текст чипа первого экрана главной */

  /* Тёмная секция — только «Где работает НаВстрече» на главной (D-05 Б) */
  --inverse-bg:#101e37;
  --inverse-card:#1b2c47;
  --inverse-line:#3b506e;
  --inverse-text:#f5f8ff;
  --inverse-lead:#bfcee5;
  --inverse-accent:#a9c9ff;
  --inverse-body:#e0e8f5;  /* пункты списка */
  --inverse-card-hover:#223652;

  /* Секция-иллюстрация C-18: свои серые подписи (D-03 А) */
  --illo-caption:#5c6680;
  --illo-note:#616b85;

  /* Завесы поверх видео и картинок в первом экране. Нужны там, где под
     текстом лежит движущийся кадр: без них контраст зависит от того, что
     сейчас в кадре. Ступеней много намеренно — двухстоповый градиент даёт
     видимую вертикальную границу там, где кончается заливка, а здесь
     плотность спадает по кривой и края перехода не видно.
     --scrim-l  — светлая, под тёмный текст (основной стиль сайта);
     --scrim-d  — тёмная, под светлый текст. */
  --scrim-l:linear-gradient(90deg,
    rgba(247,249,252,.985) 0%,  rgba(247,249,252,.975) 20%,
    rgba(247,249,252,.94) 34%,  rgba(247,249,252,.86) 44%,
    rgba(247,249,252,.72) 54%,  rgba(247,249,252,.52) 64%,
    rgba(247,249,252,.3) 75%,   rgba(247,249,252,.12) 86%,
    rgba(247,249,252,0) 96%);
  --scrim-d:linear-gradient(90deg,
    rgba(9,17,40,.94) 0%,   rgba(9,17,40,.92) 20%,
    rgba(9,17,40,.86) 34%,  rgba(9,17,40,.76) 44%,
    rgba(9,17,40,.6) 54%,   rgba(9,17,40,.42) 64%,
    rgba(9,17,40,.24) 75%,  rgba(9,17,40,.1) 86%,
    rgba(9,17,40,0) 96%);

  /* ── Стекло ──────────────────────────────────────────────────────────── */
  --glass-bg:rgba(255,255,255,.48);
  --glass-br:rgba(255,255,255,.78);
  --glass-blur:var(--blur-glass);
  --glass-sh:var(--elev-2);

  /* Плотное стекло — карточки поверх визуала (макет: .86 / .9 / blur 8) */
  --glass-solid-bg:rgba(255,255,255,.86);
  --glass-solid-br:rgba(255,255,255,.9);
  --glass-solid-blur:var(--blur-solid);
  --sheet-bg:rgba(255,255,255,.94);   /* шторка меню: плотнее стекла, сквозь .86 проступала кнопка первого экрана */
  --glass-solid-sh:0 18px 23px rgba(15,31,71,.10);

  /* ── Тени ────────────────────────────────────────────────────────────── */
  --sh-card:var(--elev-1);
  --sh-lift:var(--elev-3);
  --sh-btn:0 8px 20px rgba(20,71,219,.22);
  --sh-btn-hover:0 12px 26px rgba(20,71,219,.28);

  /* Непрозрачная ступень для масок. Это не цвет из палитры: маске всё равно,
     какой оттенок, ей важно «видно / не видно», а любой непрозрачный цвет
     читается как «видно». Лежит здесь, потому что линтер (L1) запрещает
     сырые цвета в CSS страниц, и обходить его именованным чёрным нельзя:
     сторож, который обходят, перестаёт быть сторожем. */
  --mask-solid:#000;
  --ring:0 0 0 3px rgba(26,89,245,.22);
  --ring-err:0 0 0 3px rgba(229,72,77,.20);

  /* ── Градиенты (about S-01, бенто фактов) ───────────────────────────────
     --grad-hero-mid — промежуточный тон фирменного градиента акцентной
     плиты. Не сырой оттенок прототипа (#2f6ff7, контраст с белым 4.43:1 —
     не проходил 4.5:1): затемнён до смеси 75% --blue / 25% --teal, тем же
     курсом на teal, контраст с белым 4.95:1. --grad-hero держит ≥4.5:1
     с белым текстом первые ~65% плиты по диагонали 135deg (там и стоит
     текст: верхний левый угол, подпись ограничена max-width 34ch) — дальний
     нижний правый угол (декоративное пятно ::after, без текста) уходит ниже,
     это ожидаемо. */
  --grad-hero-mid:#196be2;
  --grad-hero:linear-gradient(135deg,var(--blue) 0%,var(--grad-hero-mid) 45%,var(--teal) 130%);
  --grad-tint-violet:linear-gradient(160deg,#fff 0%,#f4f1ff 70%,#eef4ff 100%);
  --grad-tint-teal:linear-gradient(120deg,#fff 0%,#eef7f7 100%);
  --sh-hero-plate:0 18px 40px -18px rgba(20,71,219,.55);
  --on-accent:#fff;                        /* текст на --grad-hero, ≥4.5:1 в рабочей зоне */

  /* ── Радиусы ─────────────────────────────────────────────────────────── */
  --r-xs:8px;  --r-sm:10px; --r-md:12px; --r-lg:14px;
  /* Семь ступеней (D-16 Б): 15 сведено к 14, 19 — к 20. --r-xl и --r-2xl —
     псевдонимы --r-lg и --r-3xl, пока их употребления не переименованы */
  --r-xl:var(--r-lg); --r-2xl:var(--r-card); --r-3xl:var(--r-card);
  --r-illo:24px;          /* секция-иллюстрация C-18 (D-03 А) */

  /* ── Раскладка ───────────────────────────────────────────────────────── */
  --wrap:1200px;
  --wrap-wide:1280px;
  --pad:clamp(16px,4vw,24px);
  --sec-y:clamp(40px,5vw,58px);
  --head-gap:clamp(28px,3.4vw,44px);  /* шапка секции → содержимое (D-14 Б) */
  --gap-grid:20px;                    /* зазор сетки карточек C-17 (D-21 А) */
  --pad-card:22px;                    /* поле карточки; на ≤639 — 16 (D-15 Б) */

  /* ── Кегли заголовков: роли с clamp (D-06 А) ─────────────────────────── */
  --fs-h1:clamp(32px,1.6rem + 1.4vw,44px);
  --fs-h2:clamp(30px,1.5rem + 2.2vw,46px);
  --fs-h3:clamp(17px,1rem + .4vw,20px);
  --hdr-h:68px;

  /* ── Движение ────────────────────────────────────────────────────────────
     Перенесено из navstreche-redesign/src/styles/v4.css. Ограниченный
     словарь: одно вхождение --dur-epic на страницу, translateY без
     translateX для текста. ------------------------------------------------ */
  --ease-entrance:cubic-bezier(.22,1,.36,1);   /* всё, что въезжает */
  --ease-swap:cubic-bezier(.76,0,.24,1);       /* смена состояния на месте */
  --ease-chip:cubic-bezier(.34,1.36,.64,1);    /* только плавающие элементы */

  --dur-micro:120ms;   /* hover, focus */
  --dur-fast:240ms;    /* таб, подсветка */
  --dur-base:420ms;    /* reveal карточки */
  --dur-slow:720ms;    /* сигнатурная схема */
  --dur-epic:1200ms;   /* первый экран, один раз */

  --stagger:60ms;
  --reveal-y:16px;
}


/* ============================================================================
   НаВстрече — сброс, полотно, ореолы, контейнеры.
   ========================================================================= */

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

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

body{
  position:relative;
  margin:0;
  font-family:Onest,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--muted-2);
  /* Полотно макета ровное: замер пикселей hero-figma.png даёт #f7f9fc и слева,
     и справа, и внизу. Боковая лавандовая подмешка и одиннадцать радиальных
     пятен были выдумкой прототипа — заказчик читал их как непрофессиональную
     «лилово-пурпурную» гамму. Оставляем плоский фон макета с едва заметным
     подъёмом сверху; фактуру даёт структурная сетка .bg-grid. */
  background:var(--bg-page);
  background-attachment:scroll;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0;text-wrap:pretty}

h1,h2,h3,h4{margin:0;color:var(--ink-2);letter-spacing:-.02em;line-height:1.14}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.12;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:600;line-height:1.209;letter-spacing:0;color:var(--ink)}
h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;color:var(--ink-2)}
h4{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);line-height:1.3}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue);color:#fff}

/* Ссылка «к содержимому» для клавиатуры */
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:16px;top:16px;z-index:100;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);text-decoration:none;
}

/* ── Фактура фона ─────────────────────────────────────────────────────────
   Раньше здесь были одиннадцать размытых эллипсов «Glow / *», перенесённых
   из макета. Замер пикселей самого макета показал, что фон в нём ровный
   #f7f9fc — эллипсы существовали только в прототипе и давали ту самую
   лилово-пурпурную гамму. Убраны целиком.
   Структурный фон: тонкая инженерная сетка, привязанная к вьюпорту, чтобы
   маска не зависела от высоты полотна (8600px). Контраст на грани видимости —
   она должна читаться как бумага в клетку, а не как декор. */
/* «Радар сигналов» — шейдерный фон. Раз в 6.5 с из точки за левым нижним углом
   расходится очень широкий мягкий фронт; самой окружности не видно, читается
   только перепад плотности. Когда фронт проходит через фиксированные позиции,
   полтора десятка точек на мгновение проявляются акцентным синим и гаснут.
   Кольца рисовать нельзя — с ними это мгновенно военный HUD из шаблона.

   Буфер один к одному с CSS-пикселями (без множителя плотности): в кадре нет
   мелкой детали, кроме точек, а полноэкранный холст при 1.5× стоил бы вдвое
   с лишним дороже. Ниже 768 холст не создаётся вовсе — там остаётся плоский
   фон и сетка. */
.bg-radar{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;display:block;
}
@media (max-width:767px){ .bg-radar{display:none} }

.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right, rgba(23,52,112,.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,52,112,.038) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(135% 95% at 50% 38%,#000 0%,transparent 78%);
  mask-image:radial-gradient(135% 95% at 50% 38%,#000 0%,transparent 78%);
}


/* ── Контейнеры ──────────────────────────────────────────────────────────── */
.wrap{
  width:min(100% - 2 * var(--pad),var(--wrap));
  margin-inline:auto;
  position:relative;
  z-index:1;
}
.wrap--wide{width:min(100% - 2 * var(--pad),var(--wrap-wide))}

.sec{padding-block:var(--sec-y);position:relative}
.sec--tight{padding-block:calc(var(--sec-y) * .72)}

/* Шапка секции */
.sec__head{max-width:820px}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head + *{margin-top:var(--head-gap)}

.eyebrow{
  display:block;margin-bottom:14px;
  font:600 11px/1.4 Onest;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-site);
}
.eyebrow--badge{
  display:inline-block;margin-bottom:20px;padding:7px 12px;
  border-radius:var(--r-xs);background:var(--tile);
  color:var(--blue-site);letter-spacing:.1em;
}

.lead{
  margin-top:18px;
  font-size:16px;
  line-height:1.5625;color:var(--muted-2);
}
.note{margin-top:16px;font-size:13px;line-height:1.6;color:var(--muted-4)}
.note--center{text-align:center}

/* Служебное: доступно скринридеру, скрыто визуально */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Адаптив общего слоя ─────────────────────────────────────────────────
   Перенесено из home.responsive.css (не было скоуплено по #id — правило
   сайта, а не варианта главной). */
@media (max-width:767px){
  /* Стекло на телефоне дорого: blur меньше, часть ореолов убрана */
  :root{--blur-glass:12px;--reveal-y:10px}
}
@media (max-width:639px){
  h2{font-size:clamp(24px,5.8vw,30px)}
}

/* Заголовки секций выравнивают строки по длине (D-10 А) */
.sec__head h2,.split__copy h2{text-wrap:balance}


/* ============================================================================
   НаВстрече — примитивы. Каждый компонент со всеми состояниями:
   default / hover / active / focus-visible / disabled, где применимо.
   ========================================================================= */

/* ── Стекло ──────────────────────────────────────────────────────────────── */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-br);
  border-radius:var(--r-3xl);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}
/* Плотное стекло: карточки, лежащие поверх визуала */
.glass--solid{
  background:var(--glass-solid-bg);
  border-color:var(--glass-solid-br);
  box-shadow:var(--glass-solid-sh);
  -webkit-backdrop-filter:blur(var(--glass-solid-blur));
  backdrop-filter:blur(var(--glass-solid-blur));
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.94)}
  .glass--solid{background:rgba(255,255,255,.96)}
  .btn--ghost{background:rgba(255,255,255,.96)}
  .sheet{background:rgba(240,245,253,.99)}
}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 26px;border:0;border-radius:var(--r-lg);
  font:500 14px/1 Onest;text-align:center;text-decoration:none;
  cursor:pointer;position:relative;isolation:isolate;
  transition:transform var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap),
             background-color var(--dur-micro) var(--ease-swap),
             border-color var(--dur-micro) var(--ease-swap),
             color var(--dur-micro) var(--ease-swap);
}
.btn--primary{
  background:var(--accent-fill);color:#fff;box-shadow:var(--sh-btn);
}
.btn--primary:hover{background:var(--blue-deep);box-shadow:var(--sh-btn-hover);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(20,71,219,.24)}

.btn--ghost{
  background:var(--ghost-bg);color:var(--blue);
  border:1px solid var(--ghost-br);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.btn--ghost:hover{background:#fff;border-color:rgba(26,89,245,.55);transform:translateY(-1px)}
.btn--ghost:active{transform:translateY(0);background:rgba(240,245,255,.9)}

.btn--lg{min-height:56px;border-radius:var(--r-lg);padding:0 32px;font-size:15px}
.btn--block{width:100%}

.btn[disabled],.btn[aria-disabled="true"]{
  pointer-events:none;opacity:.55;box-shadow:none;transform:none;
}

/* Состояние отправки: подпись уходит, крутится колечко */
.btn[data-state="loading"]{pointer-events:none}
.btn[data-state="loading"] .btn__label{opacity:0}
.btn[data-state="loading"]::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:ui-spin .7s linear infinite;
}
.btn--ghost[data-state="loading"]::after{
  border-color:rgba(26,89,245,.25);border-top-color:var(--blue);
}

/* ── Текстовая ссылка со стрелкой ────────────────────────────────────────── */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--blue);font-weight:600;font-size:14px;text-decoration:none;
  transition:color var(--dur-micro) var(--ease-swap);
}
.link-arrow__ico{
  transition:transform var(--dur-micro) var(--ease-swap);
  width:14px;height:14px;flex:none;
}
.link-arrow:hover{color:var(--blue-deep)}
.link-arrow:hover .link-arrow__ico{transform:translateX(3px)}

/* ── Иконки ──────────────────────────────────────────────────────────────── */
.ico{flex:none;color:currentColor}
.ico--14{width:14px;height:14px}
.ico--16{width:16px;height:16px}
.ico--18{width:18px;height:18px}
.ico--20{width:20px;height:20px}
.ico--22{width:22px;height:22px}

/* Плитка под иконкой — фирменный мотив макета */
/* Плитка под иконкой снята с макета, узел 298:1104: квадрат со скруглением
   0,3125 от стороны, заливка не плоская, а вертикальным градиентом
   #e0edff → #f7fbff, и мягкая синяя тень 0 8 18 при 13 % — за счёт неё плитка
   не лежит на фоне, а чуть парит. Плоская заливка --tile осталась запасной:
   на цветных вариантах градиент строится от их собственного тона. */
.icon-tile{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:var(--r-sm);
  background:linear-gradient(180deg,#e0edff 0%,#f7fbff 100%);
  color:var(--blue);
  box-shadow:0 3px 8px rgba(26,89,242,.13);
  transition:background-color var(--dur-fast) var(--ease-swap),
             color var(--dur-fast) var(--ease-swap);
}
.icon-tile--lg{width:56px;height:56px;border-radius:var(--r-lg);
  box-shadow:0 6px 14px rgba(26,89,242,.13)}
.icon-tile--teal  {background:linear-gradient(180deg,var(--tile-teal) 0%,#f4fcfb 100%);
  color:var(--teal);box-shadow:0 3px 8px rgba(20,161,168,.14)}
.icon-tile--violet{background:linear-gradient(180deg,var(--tile-violet) 0%,#f8f6fe 100%);
  color:var(--violet);box-shadow:0 3px 8px rgba(122,94,237,.14)}
.icon-tile--grey  {background:linear-gradient(180deg,var(--tile-grey) 0%,#f8fafc 100%);
  color:var(--muted-3);box-shadow:0 3px 8px rgba(15,31,71,.10)}

/* ── Чипы и бейджи ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:30px;padding:0 12px;border-radius:var(--r-xs);
  background:var(--surface-3);border:1px solid var(--line-2);
  font-size:13px;font-weight:500;color:#1c2742;white-space:nowrap;
  transition:background-color var(--dur-micro) var(--ease-swap),
             border-color var(--dur-micro) var(--ease-swap);
}
.chip--accent{background:var(--tile);border-color:transparent;color:var(--blue-site)}

.badge{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:var(--r-xs);
  font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;
  background:var(--tile);color:var(--blue-site);
  transition:background-color var(--dur-fast) var(--ease-swap);
}
.badge--teal  {background:var(--tile-teal);  color:#0d7f85}
.badge--violet{background:var(--tile-violet);color:#5f45c9}
.badge--grey  {background:var(--tile-grey);  color:var(--muted-3)}

/* ── Карточка ────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line-3);
  border-radius:var(--r-3xl);
  box-shadow:var(--sh-card);
  transition:transform var(--dur-fast) var(--ease-entrance),
             box-shadow var(--dur-fast) var(--ease-entrance),
             border-color var(--dur-fast) var(--ease-entrance);
}
/* Плоская карточка на стекле: тот же случай, что #flow .way на главной
   (home.v2.css) — подложка --surface-2 (#f7f9fd) против фона страницы
   (#f7f9fc, base.css body) на глаз не отличима, карточка сливается
   с фоном. Рецепт главной — стекло вместо плоской заливки; здесь тот же
   рецепт как явный вариант общего слоя (F-01, 2026-09-20), второе
   употребление — about #story. */
.card--glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-br);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--line-2)}
.card--hover:focus-within{transform:translateY(-4px);box-shadow:var(--sh-lift)}
/* Ховер поднимает карточку, но рамку оставляет стеклянной — как у
   #flow .way.card--hover:hover на главной, иначе светлый контур на
   наведении подменяется серым и читается как мигание. */
.card--glass.card--hover:hover{border-color:var(--glass-br)}

/* Полоса-заметка на всю ширину */
.strip{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;border-radius:var(--r-3xl);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(244,248,255,.62));
  border:1px solid var(--strip-br);
}
/* Иконка в полосе лежала прямо на фоне — на макете под ней та же плитка */
.strip__ico{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#e0edff 0%,#f7fbff 100%);
  color:var(--blue);box-shadow:0 3px 8px rgba(26,89,242,.13);
}
.strip__t{font-weight:600;color:var(--ink-2);font-size:15px;line-height:1.35}
.strip__d{margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted-3)}

.divider{height:1px;background:var(--line-3);border:0;margin:0}

/* ── Табы ────────────────────────────────────────────────────────────────── */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tab{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 20px;border-radius:var(--r-3xl);text-align:left;
  background:var(--surface-2);border:1.5px solid transparent;
  cursor:pointer;width:100%;
  transition:background-color var(--dur-fast) var(--ease-swap),
             border-color var(--dur-fast) var(--ease-swap),
             box-shadow var(--dur-fast) var(--ease-swap),
             transform var(--dur-fast) var(--ease-entrance);
}
.tab:hover{background:#fff;box-shadow:var(--sh-card);transform:translateY(-2px)}
.tab[aria-selected="true"]{
  background:#fff;border-color:var(--blue);box-shadow:0 10px 26px -14px rgba(26,89,245,.5);
}
.tab__n{
  display:grid;place-items:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--tile-grey);color:var(--muted-3);
  font-size:12px;font-weight:600;
  transition:background-color var(--dur-fast) var(--ease-swap),
             color var(--dur-fast) var(--ease-swap);
}
.tab[aria-selected="true"] .tab__n{background:var(--blue);color:#fff}
.tab__t{font-size:16px;font-weight:600;color:var(--ink-2);line-height:1.25}
.tab[aria-selected="true"] .tab__t{color:var(--blue-site)}
.tab__d{margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted-3)}
.tab__badge{margin-top:10px}

.tabpanels{position:relative;margin-top:22px}
.tabpanel[hidden]{display:none}

/* ── Степпер ─────────────────────────────────────────────────────────────── */
.stepper{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.step{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;position:relative}
.step__n{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--track);color:var(--muted-3);font-size:13px;font-weight:600;
  transition:background-color var(--dur-fast) var(--ease-swap),color var(--dur-fast) var(--ease-swap);
}
.step[data-state="current"] .step__n{background:var(--blue);color:#fff}
.step__t{font-size:16px;font-weight:600;color:var(--ink-2)}
.step[data-state="current"] .step__t{color:var(--blue-site)}
.step__d{margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted-3);max-width:26ch}
/* Пунктир между шагами */
.step + .step::before{
  content:"";position:absolute;left:-38px;top:36px;width:56px;
  border-top:1.5px dashed var(--line-strong);
}
/* Подчёркивание активного шага — ширина анимируется из motion.css */
.stepper__bar{
  position:absolute;left:0;bottom:0;height:3px;border-radius:999px;
  background:var(--blue);width:33.333%;
  transition:transform var(--dur-fast) var(--ease-swap);
}

/* ── Индикаторы ──────────────────────────────────────────────────────────── */
.meter{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.meter__fill{
  height:100%;border-radius:999px;background:var(--blue);
  width:var(--val,0%);
  transition:width var(--dur-slow) var(--ease-entrance);
}
.meter--level{height:5px;background:var(--track)}
.meter--level .meter__fill{background:var(--ok)}

.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.dot--rec{width:10px;height:10px;background:var(--rec)}

/* Пульсирующее кольцо вокруг индикатора записи */
.rec{
  display:grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:#fdeced;position:relative;
}
.rec::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(229,72,77,.45);
}
.rec__core{width:14px;height:14px;border-radius:50%;background:var(--rec)}

/* ── Поля формы ──────────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:16px}
.field__label{
  display:block;margin-bottom:8px;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.field__req{color:var(--rec);margin-left:3px}
.field__ctrl{
  display:block;width:100%;min-height:48px;
  padding:12px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-2);
  font-size:15px;color:var(--ink-2);
  transition:border-color var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap),
             background-color var(--dur-micro) var(--ease-swap);
}
.field__ctrl::placeholder{color:#98a2b8}
.field__ctrl:hover{border-color:var(--line-strong)}
.field__ctrl:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.field__ctrl[aria-invalid="true"]{border-color:var(--rec);box-shadow:var(--ring-err)}
.field__ctrl:disabled{background:var(--surface-3);color:var(--muted-4);cursor:not-allowed}
textarea.field__ctrl{min-height:92px;resize:vertical;line-height:1.5}
/* На телефоне кегль поля 16: Safari на iPhone увеличивает страницу при фокусе
   на поле мельче 16 px и сам масштаб не возвращает (О-2 приёмки main, круг 1).
   Формы с этими полями — на главной и на компанийной главной. */
@media (max-width:767px){
  .field__ctrl{font-size:16px}
}

/* Select со своей стрелкой */
.field--select{position:relative}
.field--select .field__ctrl{appearance:none;padding-right:44px;cursor:pointer}
.field--select::after{
  content:"";position:absolute;right:18px;bottom:19px;
  width:10px;height:10px;pointer-events:none;
  border-right:2px solid var(--muted-3);border-bottom:2px solid var(--muted-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-micro) var(--ease-swap);
}
.field--select:focus-within::after{border-color:var(--blue)}

/* Знак внутри поля. Заведено для формы заявки на главной продукта,
   второе употребление — форма компанийной главной, поэтому правило
   переехало сюда из home.layout.css. Отступ слева считается от знака,
   у списка добавляется место справа под собственную стрелку select. */
.field--ico{position:relative}
.field--ico .field__ctrl{padding-left:48px}
.field--ico.field--select .field__ctrl{padding-right:44px}
.field__ico{position:absolute;left:16px;top:15px;color:var(--muted-3);pointer-events:none}

.field__err{
  display:none;margin-top:6px;font-size:13px;color:var(--rec);
}
.field[data-state="error"] .field__err{display:block}

/* Чекбокс */
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin:20px 0 18px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  display:grid;place-items:center;flex:none;
  width:20px;height:20px;margin-top:1px;border-radius:6px;
  background:var(--surface);border:1.5px solid var(--line-2);
  transition:background-color var(--dur-micro) var(--ease-swap),
             border-color var(--dur-micro) var(--ease-swap);
}
.check__box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity var(--dur-micro)}
.check:hover .check__box{border-color:var(--line-strong)}
.check input:checked + .check__box{background:var(--blue);border-color:var(--blue)}
.check input:checked + .check__box svg{opacity:1}
.check input:focus-visible + .check__box{box-shadow:var(--ring);border-color:var(--blue)}
.check__t{font-size:13px;line-height:1.5;color:var(--muted-3)}
.check[data-state="error"] .check__box{border-color:var(--rec)}

/* Результат отправки */
.form__result{
  display:none;margin-top:16px;padding:14px 18px;border-radius:var(--r-md);
  font-size:14px;line-height:1.5;
}
.form__result[data-state="success"]{display:block;background:#e8f6ef;color:#1a7a4f}
.form__result[data-state="error"]  {display:block;background:#fdeced;color:#b4262b}

@keyframes ui-spin{to{transform:rotate(360deg)}}

/* Связи схемы: слой поверх колонок, но под карточками */
.flow{position:relative}
.flow__wires{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:0;
}
.wire{fill:none;stroke:var(--line-strong);stroke-width:1.5}

/* ── Зона нажатия ────────────────────────────────────────────────────────────
   Контролы внутри UI-мокапа дашборда нарисованы в макете мельче 44px.
   Размер оставляем как в макете, а область попадания расширяем невидимым
   слоем — палец попадает, вид не меняется. */
.iconbtn,.panel__link,.btn--sm,.acts a{position:relative}
.iconbtn::after,.panel__link::after,.btn--sm::after,.acts a::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}

/* ============================================================================
   НаВстрече — компоненты, которых не было в «Видеоточке».
   Палитра шире: к синему добавлены фиолетовый, зелёный, красный и янтарный —
   это семантика сигналов радара, а не второй акцент интерфейса.
   ========================================================================= */

/* Темы плитки и бейджа под сигналы */
.icon-tile--risk{background:linear-gradient(180deg,var(--tile-risk) 0%,#fef7f7 100%);
  color:var(--sig-risk);box-shadow:0 3px 8px rgba(229,72,77,.14)}
.icon-tile--obj {background:linear-gradient(180deg,var(--tile-obj) 0%,#fefaf4 100%);
  color:var(--sig-obj);box-shadow:0 3px 8px rgba(224,140,49,.14)}
.icon-tile--pos {background:linear-gradient(180deg,var(--tile-pos) 0%,#f4fbf7 100%);
  color:var(--sig-pos);box-shadow:0 3px 8px rgba(47,158,99,.14)}
.badge--risk{background:var(--tile-risk);color:#c0393d}
.badge--obj {background:var(--tile-obj); color:#b06a1c}
.badge--pos {background:var(--tile-pos); color:#1f7a4b}

/* Чип с иконкой — в первом экране обозначает вариант размещения */
.chip--lg{
  min-height:40px;padding:0 16px;border-radius:var(--r-md);
  background:var(--surface);font-size:14px;font-weight:500;
  box-shadow:var(--sh-card);gap:6px;
}
.chip--lg .ico{width:16px;height:16px}
.chip--lg .ico{color:var(--blue)}
.chip--lg:hover{background:#fff;border-color:var(--line-strong)}

/* Плавающая карточка первого экрана: заголовок, текст, цветная плитка */
.feature{
  display:flex;gap:11px;align-items:flex-start;
  padding:15px 15px 15px 16px;border-radius:var(--r-2xl);
}
.feature__t{font-size:15px;font-weight:600;color:var(--ink-2);line-height:18px}
.feature__d{margin-top:2px;font-size:12.5px;line-height:18px;color:#5a6473}

/* Карточка-вопрос: строка с плиткой слева и значком «код» справа */
.qcard{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:var(--r-xl);
  background:var(--surface-2);border:1px solid transparent;
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  text-align:left;width:100%;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-swap),
             border-color var(--dur-fast) var(--ease-swap),
             transform var(--dur-fast) var(--ease-entrance),
             box-shadow var(--dur-fast) var(--ease-entrance);
}
.qcard__code{margin-left:auto;color:var(--muted-4);flex:none}
.qcard:hover{background:#fff;border-color:var(--line-2);box-shadow:var(--sh-card);transform:translateX(3px)}
.qcard:hover .qcard__code{color:var(--blue)}

/* Узел схемы «контекст в процессах» */
.node{
  padding:18px 20px;border-radius:var(--r-3xl);
  background:var(--surface);box-shadow:var(--sh-card);
  border:1px solid var(--line-3);
}
.node__t{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.node__list{display:grid;gap:9px}
.node__li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--muted-3)}
.node__li .ico{color:var(--muted-4);margin-top:2px}

/* Список с галочками — повторяется в карточках размещения и узлах схемы */
.checks{display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--muted-2)}
.checks .ico{color:var(--ink-2);margin-top:2px;flex:none}

/* Спарклайн в карточке сигнала: линия рисуется при появлении */
.spark{width:130px;height:62px;display:block;margin-left:auto;overflow:visible}
.spark__line{fill:none;stroke:var(--sig-c,var(--blue));stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Заливка под кривой была отключена (display:none), и медиазапросы ниже,
   выставлявшие ей opacity, не срабатывали: в карточках оставались тонкие
   голые загогулины вместо графиков макета. */
.spark__area{fill:var(--sig-c,var(--blue));opacity:.12}

/* Счётчик сигналов: подпись слева, число справа */
.counter{
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-3);
  transition:border-color var(--dur-fast) var(--ease-swap),
             box-shadow var(--dur-fast) var(--ease-swap);
}
.counter:hover{border-color:var(--line-2);box-shadow:var(--sh-card)}
/* В макете знак сигнала идёт цветом по фону карточки, без плитки */
.counter__i{color:var(--sig-c);flex:none}
.counter__t{font-size:14px;font-weight:500;color:var(--ink-2)}
.counter__v{
  margin-left:auto;font-size:15px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}


/* ============================================================================
   НаВстрече — общий слой компонентов.
   Подключается после primitives.css, до chrome.css — каскад должен решаться
   так же, как если бы правило стояло в home.*.css: где на главной компонент
   переопределён по id (#hero, #place, …), тот id всегда специфичнее голого
   класса и побеждает независимо от порядка файлов.
   Реестр — ds/components.md (C-nn). Правит только ds.
   ========================================================================= */

/* ── C-01 · Сетка первого экрана (hero) ──────────────────────────────────────
   Вынесена с главной (было в home.layout.css): текст слева, визуальная часть
   справа. Это базовая раскладка — сам визуал (плавающие карточки, скриншот,
   параллакс) остаётся вариантом главной в #hero (home.v2.css), который всегда
   переопределяет эти голые классы по специфичности id. Взяла страница
   «О компании» (S-01): слева копия, справа — столбец фактов. */
.hero{padding-block:clamp(28px,5.3vw,76px) clamp(26px,3.3vw,48px);position:relative}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 644px;
  gap:clamp(24px,2.4vw,32px);align-items:start;
}
@media (max-width:1279px){
  .hero__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
}
@media (max-width:1099px){
  .hero__grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:767px){
  .hero{padding-top:24px}
}

/* ── C-12 · Заголовок первого экрана ─────────────────────────────────────────
   Вынесен с главной (было #hero h1, home.v2.css + home.responsive.css):
   второе употребление — about S-01. Класс, а не id-скоуп: страница не имеет
   доступа к home.v2.css/home.responsive.css. */
.hero__title{
  font-size:clamp(32px,1.6rem + 1.4vw,44px);
  line-height:1.13;font-weight:800;letter-spacing:-.025em;
  color:var(--ink-2);text-wrap:pretty;
}
@media (max-width:767px){
  .hero__title{font-size:31px}
}

/* ── C-01 (продолжение) · Лид и кнопки первого экрана ─────────────────────────
   Вынесены с главной: базовая `.hero__lead`/`.hero__cta` жила в
   home.layout.css, а `#hero .hero__lead`/`#hero .hero__cta` (home.v2.css)
   переопределяли её под финальный вид главной — id всегда побеждал голый
   класс, поэтому базой стали сразу значения id-варианта. Второе
   употребление — about S-01 (сборщик взял обычный `.lead` и заново собрал
   `.pg-hero-cta`, потому что общего класса не было — F-02).
   Адаптив `.hero__lead` на ≤1099 (home.responsive.css: max-width:none,
   margin-top:24px) на главной не переносится: он был мёртвым кодом под
   `#hero`-скоупом (id есть всегда, медиазапрос его не побеждал) — здесь
   он и остаётся мёртвым, так что вид главной не меняется. Адаптив
   `.hero__cta` на ≤767 (id-скоуп его не перекрывал — flex-direction/btn
   width там не были заданы) переносится как есть: он и был живым. */
.hero__lead{
  margin-top:18px;max-width:430px;
  font-size:17px;line-height:1.6;color:var(--muted);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media (max-width:767px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}

/* ── C-02 · Карточка возможности ─────────────────────────────────────────────
   Плитка иконки + заголовок + описание. На главной — «После встречи остаётся
   готовый рабочий результат» (#result .feats), сетка 4 → 2 → 1. Взяла страница
   «О компании» как факты первого экрана (S-01), карточки инфраструктуры (S-03),
   цифры и утверждения (S-04) и карточки условий работы (S-05). */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);margin-top:var(--head-gap)}
/* В макете карточка 285×168 — текст плотнее обычного */
.feat{padding:var(--pad-card)}
.feat h3{margin:16px 0 10px;font-size:16px}
.feat p{font-size:13px;line-height:1.45;color:var(--muted-3)}
@media (max-width:1099px){
  .feats{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .feats{grid-template-columns:1fr}
}
@media (max-width:639px){
  .feat{padding:16px}
}

/* Размер плитки иконки для карточки возможности — модификатор примитива
   .icon-tile (primitives.css), 46px вместо базовых 34. */
.icon-tile--lg2{width:46px;height:46px;border-radius:var(--r-lg)}

/* Вариант «факт»: значение карточки — не название, а само число/утверждение
   («15 лет», «1000+ компаний»), крупная строка, по которой пробегает глаз
   (design/about.md S-01, S-04). Второе употребление — about S-01 (факты
   первого экрана) и S-04 (цифры и утверждения), F-A. Кегль ниже h2 секции
   (min 30px) — заголовок карточки не спорит с заголовком секции.
   Значение — класс `.feat__stat`, не привязан к тегу: в S-04 это `<h3>`
   (первый h3 страницы стоит после h2 секции — уровни не пропущены), в S-01
   это `<p>` (h1 → h2 секции ещё не было, `<h3>` был бы пропуском уровня,
   F-09/F-05 круга 2, 2026-09-20). Вес/цвет/трекинг заданы явно, а не
   унаследованы от h3 — иначе на `<p>` они бы не сработали. */
.feat--stat .feat__stat{
  display:block;margin:16px 0 10px;
  font-size:clamp(26px,1.4rem + .4vw,28px);line-height:1.15;
  font-weight:600;letter-spacing:-.015em;color:var(--ink-2);
}


/* ── C-19 · Карточка с иллюстрацией ─────────────────────────────────────────
   Карточка факта с изометрической иллюстрацией слева и текстом справа.
   Первое употребление — «О компании» S-04/S-05; вынесена в общий слой
   решением D-23 А. Модификатор сетки .feats: пары, в столбец на ≤959
   (иллюстрация 180 px и текст рядом не помещаются в половину планшета),
   на ≤639 иллюстрация встаёт над текстом (потолок 220 px).
   Две строки-пружины 1fr вокруг заголовка и текста центрируют их
   относительно иллюстрации, которая занимает все четыре линии. Картинка
   стоит в поле карточки — радиус 12 (C-07). */
.illo-cards{grid-template-columns:1fr 1fr}
@media (max-width:959px){
  .illo-cards{grid-template-columns:1fr}
}
.illo-cards__pic{display:block;line-height:0;grid-row:1 / -1}
.illo-cards__pic img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.illo-cards .feat{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  grid-template-rows:1fr auto auto 1fr;
  gap:6px 20px;align-items:center;
}
.illo-cards h3,.illo-cards .feat__stat{grid-row:2;margin:0}
.illo-cards p{grid-row:3}
/* Правка 01.10.2026 по обратной связи 30.09 (вариант Б2, решение
   пользователя). Раньше на ≤639 иллюстрация вставала над текстом с потолком
   220 px: в карточке шириной 358 это оставляло справа около 120 px пустоты,
   а две секции по четыре карточки занимали на телефоне 3650 px. Карточка
   остаётся горизонтальной, иллюстрация ужимается со 180 до 112 px — строка
   сетки, зазор и центрирование берутся из базового правила выше.
   Высота «О компании» на 390: 9015 → 7606. */
@media (max-width:639px){
  .illo-cards .feat{grid-template-columns:112px minmax(0,1fr);column-gap:16px}
  .illo-cards__pic{max-width:112px}
}

/* ── C-18 · Секция-иллюстрация ─────────────────────────────────────────────
   Одна широкая иллюстрация под центрированной шапкой секции, значения
   главной (D-03 А, D-22 А): лид под заголовком на 18, как на главной;
   картинка под шапкой — на --head-gap, общий зазор новых страниц (D-14 Б).
   Ниже 959 картинка не вписывается, а
   прокручивается внутри рамки: вписанная в телефон схема дала бы подписи
   кеглем около трёх пикселей. */
.sec--illo .sec__head{max-width:1080px}
.sec--illo .sec__head .lead{max-width:882px;margin-inline:auto;margin-top:18px}
.illo{line-height:0}
.illo__img{width:100%;height:auto;display:block;border-radius:var(--r-illo)}
@media (max-width:959px){
  .illo{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-illo)}
  .illo__img{width:1100px;max-width:none;border-radius:0}
}

/* ── C-03 · Информационные полосы ────────────────────────────────────────────
   Базовая полоса .strip и её плитка/текст — уже примитив (primitives.css).
   Здесь — три варианта состава, снятые с главной как есть. */

/* С кнопкой справа (#flow «Одна платформа — разные способы поступления
   встреч»). Взяла «О компании» как итоговая полоса пути (S-02, без кнопки —
   с кнопкой в конце пути) и полоса с кнопкой перед подвалом (S-06). */
.strip--cta{align-items:center;margin-top:22px;gap:18px;flex-wrap:wrap}
.strip--cta .strip__acts{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
@media (max-width:959px){
  .strip--cta{flex-direction:column;align-items:flex-start}
  .strip--cta .strip__acts{margin-left:0}
}
@media (max-width:767px){
  .strip--cta .strip__acts{width:100%}
  .strip--cta .btn{width:100%;justify-content:center}
}

/* Одна строка, по центру (#signals «Каждый сигнал связан…»). Взяла
   «О компании» как итоговая фраза ленты этапов (S-02). */
.strip--note{margin-top:24px;align-items:center;max-width:440px}
.strip--note .strip__t{font-size:14px;line-height:1.4}

/* Модификатор полной ширины: снимает max-width у .strip--note, когда полосе
   нужно растянуться на весь контейнер (решение пользователя 2026-09-22,
   about S-02 «Технологии менялись…»). Поля, радиус, фон, выравнивание и
   кегль текста — не трогает, только ширина. */
.strip--note.strip--wide{max-width:none}

/* Из трёх пунктов с разделителями (#templates, под вкладками). Взяла
   «О компании» как юридическая справка (S-05). */
.strip--three{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  padding:28px;margin-top:22px;align-items:flex-start;
}
.strip__item{display:flex;gap:12px;align-items:flex-start}
@media (max-width:1099px){
  .strip--three{grid-template-columns:1fr;gap:16px}
}

/* ── C-04 · Полоса доверия ────────────────────────────────────────────────────
   Бегущая лента логотипов клиентов, целиком с главной (id="trust" вне
   какой-либо секции — уже общий элемент, не вариант). Страница «О компании»
   употребляет её как есть (решение Р-3 А), с теми же двенадцатью знаками.
   Приём снят замером с hero gong.io, но размещение другое: у них полоса стоит
   отдельной секцией под первым экраном, у нас живёт внутри колонки текста, под
   кнопками на главной. Место там и так пустовало, и первый экран не становится
   выше ни на пиксель — полоса видна без прокрутки. Плата: в кадре стоит
   три-четыре знака вместо восьми, остальные приезжают лентой. Знаки приведены
   к одному тону, лента едет медленно и продублирована для бесшовности. Ещё
   отличие: при наведении лента встаёт, а знак под курсором проявляется своим
   фирменным цветом. Цвет не потерян при перекраске — каждый дополнительный
   цвет знака вынесен в свою переменную --lN с запасным значением currentColor,
   поэтому в покое знак одноцветный, а на ховере палитра возвращается без
   второй копии файла. У Полисорба, ЕКС и Digis в наборе только негативные
   версии: фирменного цвета взять неоткуда, они уходят в чернила. ЮФУ и «Опека»
   растровые — у них монохром это маска по альфе, а цвет отдельным слоем.
   Размеры у каждого знака свои: у словесного знака и круглой печати при
   равной высоте разная зрительная масса, поэтому общей высоты ряда здесь нет. */
.trust{
  --ts:1;--gap:56px;
  padding-block:20px 0;position:relative;z-index:1;
}
/* Поле сверху ступенями шкалы, а не clamp: промежуточные значения clamp
   выпадали из шкалы отступов (D-12 Б) */
@media (max-width:1279px){.trust{padding-top:16px}}
@media (max-width:959px){.trust{padding-top:12px}}
@media (max-width:767px){.trust{padding-top:10px}}
.trust__cap{
  margin:0 0 20px;text-align:center;
  font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--blue-site);
}
.trust__mask{
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.trust__track{
  display:flex;width:max-content;align-items:center;gap:var(--gap);
  animation:trust-run 52s linear infinite;
}
/* половина минус половина зазора — иначе на стыке копий появляется лишний шаг */
@keyframes trust-run{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--gap) / 2))}
}
.trust__mask:hover .trust__track,
.trust__mask:focus-within .trust__track{animation-play-state:paused}

/* Переходов здесь нет намеренно: color умеет анимироваться, а подстановка --lN
   происходит мгновенно, и знак из двух цветов проявлялся по частям — у DDX
   оранжевое слово опережало бирюзовое. Одновременность важнее плавности. */
.tl{
  position:relative;flex:none;display:block;
  height:calc(var(--h) * 1px * var(--ts));color:var(--muted-3);
}
.tl svg{display:block;height:100%;width:auto}
.tl__m{
  display:block;height:100%;aspect-ratio:var(--ar);background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
}
.tl__c{
  position:absolute;inset:0;background:var(--c) center/contain no-repeat;opacity:0;
}
/* монохромный слой гасим только там, где под ним лежит цветной: у Полисорба
   цветной версии нет, и общее правило заставляло знак исчезать на ховере */
.tl:hover .tl__c{opacity:1}
.tl--sfedu:hover .tl__m,.tl--opeka:hover .tl__m{opacity:0}

.tl--ttk:hover      {color:#1a1b1b;--l2:#dd2538}
.tl--tsu:hover      {color:#0072bc;--l2:#231f20}
.tl--uis:hover      {color:#0000aa}
.tl--ddx:hover      {color:#12d8d8;--l2:#ff7d20}
.tl--dialogi:hover  {color:#4c4af3}
.tl--finbridge:hover{color:#22093b;--l2:#722ea5}
.tl--extyl:hover    {color:#000;--l2:#f20036}
.tl--polisorb:hover,.tl--digis:hover{color:var(--ink-2)}
/* у ЕКС темнеет только надпись: квадратный знак с лучами при затемнении
   превращается в чёрное пятно и перетягивает на себя весь ряд, поэтому
   он приколот к общему тону явным значением, а не наследует color */
.tl--eks:hover{color:var(--ink-2);--l2:var(--muted-3)}

.tl--ttk{--h:20}
.tl--tsu{--h:34}
.tl--uis{--h:28}
.tl--ddx{--h:26}
.tl--polisorb{--h:24;--ar:247/39;--m:url("/img/v9a/f86b68528045.png")}
.tl--dialogi{--h:22}
.tl--eks{--h:32}
/* Знак Finbridge собран из трёх слоёв: лаймовая плашка сзади, фиолетовая копия
   со смещением и тёмная сверху. Плашка выезжает из-под знака светлым язычком,
   а на ховере лаймом перекрывает сам знак — гасим её в обоих состояниях. */
.tl--finbridge{--h:24;--l3:transparent}
.tl--digis{--h:20}
.tl--extyl{--h:48}
.tl--sfedu{--h:40;--ar:130/120;--m:url("/img/v9a/8c9da7e6b78b.png");--c:url("/img/v9a/96fad2f1dc7b.png")}
.tl--opeka{--h:40;--ar:140/121;--m:url("/img/v9a/92572525625e.png");--c:url("/img/v9a/396a7625f9c9.png")}

@media (prefers-reduced-motion:reduce){.trust__track{animation:none}}
@media (max-width:959px){
  .trust{--ts:.78;--gap:36px}
  .trust__cap{margin-bottom:14px;font-size:14px}
}


/* ============================================================================
   Схема «встречи → контекст → рабочие системы».
   Переехала из assets/css/home.v2.css на втором употреблении: та же схема
   стоит на странице продукта (index #context) и на компанийной главной
   (main.html). Геометрия жёсткая, обоснование — в комментарии ниже.
   ========================================================================= */
/* ── 8 · Контекст встреч: схема на строгой сетке ──────────────────────────
   Прежняя схема разъезжалась: шесть блоков начинались на шести разных высотах
   (132, 196, 247, 324, 483, 504), связи существовали, но были длиной 37 px и
   на экране не читались. Здесь геометрия задана жёстко — три колонки
   202 / 222 / 238, общая ось 190, адресаты по 116 с центрами 58 / 190 / 322,
   три ветви из общего ствола. Ниже 1100 схема разворачивается в столбик:
   абсолютные координаты там неприменимы. */
.cx-schema{position:relative;display:grid;gap:14px}
.cx-slab,.cx-halo,.cx-wires,.cx-dot{display:none}
.cx-node{border-radius:18px;padding:16px;
  background:var(--glass-solid-bg);border:1px solid var(--glass-solid-br);
  box-shadow:0 1px 2px rgba(15,31,71,.04), 0 14px 32px -14px rgba(15,31,71,.20);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cx-t{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:9px}
.cx-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);
  background:var(--tile);color:var(--blue);margin:0 auto 12px}
.cx-list{display:grid;gap:8px}
.cx-li{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.35;
  color:var(--muted-3)}
.cx-li .ico{flex:none;color:var(--blue);margin-top:1px}
.cx-node--in .cx-t{justify-content:center}
.cx-node--hero{padding:18px;border-radius:var(--r-2xl);
  background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.96);
  box-shadow:0 2px 4px rgba(15,31,71,.05), 0 26px 54px -20px rgba(20,71,219,.28)}
.cx-node--hero .cx-t{justify-content:center;font-size:15px;margin-bottom:12px}
.cx-logo{display:block;margin:0 auto 12px}
.cx-node--out .cx-t{margin-bottom:10px}
/* Чипы внутри схемы мельче общесайтовых: карточка-адресат держит высоту 116,
   а базовые 30 px по высоте и 12,5 по кеглю выбивали пять чипов «Поручений»
   на третью строку и вываливали их за карточку. */
.cx-node .chips{gap:6px}
.cx-node .chip{min-height:24px;padding:0 9px;font-size:11.5px;font-weight:400;
  background:var(--surface-3);border-color:var(--line-3);color:var(--muted-2)}
/* Подпись висит под главным узлом и не участвует в его центрировании:
   иначе колонка центрировала «карточку + подпись» как одно целое, карточка
   уезжала вверх на 22 px, и связь от «Встреч» приходила не в её центр.
   Отрицательное поле снизу равно высоте подписи вместе с её отступом. */
.cx-badge{display:inline-flex;align-items:center;gap:7px;margin:12px auto -44px;
  padding:7px 11px;border-radius:var(--r-sm);background:#eef3fe;color:var(--blue);
  font-size:11.5px;font-weight:500;white-space:nowrap}
.cx-srcs{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px;
  padding:14px 24px;border-radius:var(--r-3xl);
  background:var(--glass-bg);border:1px solid var(--glass-br);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.cx-srcs__t{margin:0;font-size:14px;font-weight:600;color:var(--ink-2);flex:0 0 auto}
.cx-src{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted-2)}
.cx-src .icon-tile{width:30px;height:30px;border-radius:var(--r-sm)}

/* Сетка «текст слева — визуал справа». Жила в стилях главной
   (home.layout.css:240, home.responsive.css:29) и переехала сюда на втором
   употреблении — секция «Контекст встреч» компанийной главной собиралась
   без неё своей сеткой и разошлась с главной (F-01 приёмки main, круг 1).
   Значения и порядок правил те же, вид главной не меняется. */
.split{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.split__copy .lead{max-width:44ch}
/* Широкий вариант — «Контекст встреч». Стоит раньше адаптива ниже:
   пока он жил в home.layout.css, файл главной грузился после общего слоя,
   и его две колонки перебивали столбик на ≤1099 — гейт главной поймал
   это на 768 и 390 при первой попытке переноса. */
.split--wide{grid-template-columns:minmax(0,390px) minmax(0,1fr)}
@media (max-width:1099px){
  .split,.split--wide{grid-template-columns:1fr;gap:28px}
  .split__copy .lead{max-width:none}
}

@media (min-width:1100px){
  #context .split--wide{grid-template-columns:minmax(0,430px) 714px;gap:56px;
    align-items:center}
  .cx-schema{display:block;width:714px;height:380px}
  .cx-slab{display:block;position:absolute;inset:-22px -24px;border-radius:30px;
    background:var(--glass-bg);border:1px solid var(--glass-br);
    box-shadow:0 24px 60px rgba(15,31,71,.10);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:0}
  .cx-halo{display:block;position:absolute;left:228px;top:70px;width:222px;height:240px;
    border-radius:40px;z-index:0;filter:blur(18px);
    background:radial-gradient(60% 55% at 50% 50%, rgba(26,89,245,.16), transparent 70%)}
  .cx-wires{display:block;position:absolute;inset:0;width:714px;height:380px;
    pointer-events:none;z-index:1;overflow:visible}
  .cx-w{fill:none;stroke:url(#cxlg);stroke-width:1.25;vector-effect:non-scaling-stroke}
  .cx-col{position:absolute;top:0;height:380px;display:flex;flex-direction:column;
    justify-content:center;z-index:2}
  .cx-col--in {left:0;    width:202px}
  .cx-col--mid{left:228px;width:222px}
  .cx-col--out{left:476px;width:238px;justify-content:space-between}
  .cx-node--out{height:116px;display:flex;flex-direction:column;justify-content:center}
  .cx-node{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.95)}
  /* Полоса источников по ширине равна плите схемы, а не блоку: плита выходит
     за блок на 24 px в каждую сторону, и без этого её правый край не совпадал
     с краем полосы — расхождение 24 px было видно на глаз.
     Отступ сверху считается от плиты, а не от сетки: плита поднимается
     на 22 px, поэтому 30 px превращались в зазор 8. */
  .cx-srcs{margin-top:56px;margin-inline-end:-24px}
  .cx-srcs__t{flex:0 0 260px}
  .cx-src{flex:1;justify-content:center;border-left:1px solid var(--line-2)}
}
/* На 1100–1279 поля по бокам контейнера — 24…40 px, и выступ плиты схемы
   и полосы источников на 24 px вправо упирал их в край окна: слева поле 24,
   справа 0 (О-4 и F-12 приёмки main; то же было на главной). Здесь выступа
   справа нет — оба правых края стоят по краю контейнера и совпадают друг
   с другом. От 1280 всё как было. */
@media (min-width:1100px) and (max-width:1279px){
  .cx-slab{right:0}
  .cx-srcs{margin-inline-end:0}
}

/* Точки едут по связям, карточка отвечает вспышкой рамки. Обе анимации —
   CSS и одной длительности: отклик сдвинут ровно на оборот, поэтому вспышка
   приходится на миг прибытия и не разъезжается со временем. */
@media (min-width:1100px){
  #context{--cyc:2.8s}
  .cx-dot{display:block;position:absolute;left:0;top:0;width:7px;height:7px;
    border-radius:50%;background:var(--blue);z-index:1;
    box-shadow:0 0 0 4px rgba(26,89,245,.12);
    offset-rotate:0deg;offset-distance:0%;
    animation:cx-ride var(--cyc) linear infinite}
  .cx-dot--1{offset-path:path('M450 190 H455 Q463 190 463 182 V66 Q463 58 471 58 H476');
    animation-delay:0s}
  .cx-dot--2{offset-path:path('M450 190 H476');animation-delay:.55s}
  .cx-dot--3{offset-path:path('M450 190 H455 Q463 190 463 198 V314 Q463 322 471 322 H476');
    animation-delay:1.1s}
  .cx-node--out{--d:0s;animation:cx-edge var(--cyc) cubic-bezier(.22,1,.36,1) infinite;
    animation-delay:calc(var(--d) + var(--cyc))}
  .cx2{--d:.55s} .cx3{--d:1.1s}
}
@keyframes cx-ride{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
@keyframes cx-edge{
  0%{border-color:rgba(26,89,245,.85);
     box-shadow:0 0 0 3px rgba(26,89,245,.14), 0 14px 32px -14px rgba(15,31,71,.20)}
  30%,100%{border-color:rgba(255,255,255,.95);
     box-shadow:0 0 0 0 rgba(26,89,245,0), 0 14px 32px -14px rgba(15,31,71,.20)}
}
@media (prefers-reduced-motion:reduce){
  .cx-dot{display:none}
  .cx-node--out{animation:none}
  .cx-w{stroke:var(--line-strong)}
}

/* ── C-16 · Секция демонстрации ──────────────────────────────────────────────
   Три колонки на общей сетке 1200 (420 + 20 + 340 + 20 + 400): рассказ,
   визуал, форма заявки. Жила в стилях главной (home.layout.css,
   home.responsive.css) и переехала сюда на втором употреблении —
   компанийная главная собирала её копией, и копии разошлись: форма 380
   против 400 на 1024, поле формы 26 против 20 и контакты в строку против
   столбика на 390 (F-03 приёмки main, круг 1). Значения и порядок правил
   те же, вид главной не меняется.
   Визуал в середине у каждой страницы свой: .demo__stage с наклонённой
   плоскостью — на главной, картинка .pg-demo__stage — на компанийной. */
.demo{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr) 400px;
  gap:20px;align-items:start;
}
.demo__copy h2{text-wrap:balance}
.demo__copy h2{margin-bottom:16px}
/* Заголовок финала выходит за колонку рассказа в зазор и на край визуала:
   в 420 px после неразрывного «на&nbsp;вашем» (D-28) он вставал в четыре
   строки по слову. Визуал центрирован по высоте ряда и начинается ниже
   двух строк заголовка — наложения нет (замер на 1440 и 1100). */
@media (min-width:1100px){
  .demo__copy h2{margin-inline-end:-64px}
}
.demo__copy .lead{max-width:44ch}
.demo__eyebrow{margin:32px 0 16px}
.demo__list{display:grid;gap:22px}
.demo__list li{display:flex;gap:16px;align-items:flex-start}
.demo__t{font-size:16px;font-weight:600;color:var(--ink-2);line-height:1.3}
.demo__d{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted-3)}
.demo__contacts{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px}
.demo__contacts a{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:14px;color:var(--muted-2);text-decoration:none;
  transition:color var(--dur-micro) var(--ease-swap);
}
.demo__contacts a:hover{color:var(--blue)}
.demo__contacts .ico{color:var(--muted-3)}
.demo__form{padding:26px}
.demo__form-d{margin:10px 0 22px;font-size:15px;line-height:1.5;color:var(--muted-3)}
.demo__form .field{margin-bottom:12px}
.demo__form textarea.field__ctrl{min-height:104px;padding-top:14px}
.demo__form .btn{margin-top:10px}
.demo__note{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:13px;line-height:1.5;color:var(--muted-4);
}
.demo__note .ico{flex:none;margin-top:2px;color:var(--muted-4)}
@media (max-width:1099px){
  .demo{grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
}
@media (max-width:959px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .demo__form{max-width:520px}
}
@media (max-width:767px){
  .demo__form{padding:20px}
  .demo__contacts{gap:12px;flex-direction:column}
}


/* ============================================================================
   НаВстрече — шапка, мобильная шторка и подвал. Общие для всех страниц.
   Перенесено из блоков «раскладка секций» и «адаптив» главной v6.
   ========================================================================= */

/* ── Шапка C-09, редакция 2 ───────────────────────────────────────────────
   Вариант 5 «Знак-ссылка с предпросмотром» (решение пользователя 01.10.2026,
   D-32; стенд и замеры — design/ds-stands/header-v5/). Шапка сохраняет то,
   что задавала C-09: стекло .glass, липкость, контейнер --wrap-wide 1280,
   высоту --hdr-h и компактный режим после прокрутки. Новое — ряд продуктов
   со знаками в плитках под меткой «Продукты», предпросмотр продукта под шапкой
   и шторка, которая начинается с карточек продуктов. Поведение — site.js. */
/* ── Место шапки ──────────────────────────────────────────────────────────
   Высота места постоянна, поэтому страница под шапкой не сдвигается, когда
   шапка становится компактной. Отрицательный top держит прилипшую шапку
   в 12 px от края окна — столько же, сколько на телефоне. Прозрачное место
   не перехватывает нажатия у контента под ним. */
.hdr-slot{
  position:sticky;top:-12px;z-index:60;
  height:calc(24px + var(--hdr-h));
  padding:24px var(--pad) 0;
  pointer-events:none;
}
.hdr{
  position:relative;z-index:2;pointer-events:auto;
  max-width:var(--wrap-wide);margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  min-height:var(--hdr-h);padding:0 12px 0 24px;
  transition:min-height var(--dur-fast) var(--ease-swap),
             box-shadow var(--dur-fast) var(--ease-swap),
             background-color var(--dur-fast) var(--ease-swap);
}
.hdr-slot[data-state="scrolled"] .hdr{
  min-height:56px;
  background:var(--ghost-bg);
  box-shadow:var(--sh-header-scrolled);
}

/* ── Компания: голый словесный знак ─────────────────────────────────────── */
/* Фокус на пунктах полосы шапки не прокручивает страницу. У html стоит
   scroll-padding-top (место шапки + 32, base.css) — для якорей, а липкая
   шапка лежит внутри этой зоны, и браузер считал её пункты закрытыми:
   Tab по шапке и возврат фокуса на бургер после Esc сдвигали прокрученную
   страницу вверх на 460 px. Отрицательное поле опускает верх пункта ниже
   зоны отступа. Только полоса .hdr: в шторке своя прокрутка, и там такое
   поле прятало бы верхний пункт при обходе вверх. */
.hdr a,.hdr button{scroll-margin-top:calc(-1 * (var(--hdr-h) + 52px))}
.hdr__co{display:flex;align-items:center;min-height:44px;flex:none;border-radius:var(--r-xs)}
.hdr__co img{height:32px;width:auto}
.hdr__sep{flex:none;width:1px;height:28px;background:var(--line-strong)}

/* ── Продукты: знак в плитке, как иконка приложения ─────────────────────── */
/* Видимая метка группы — та же, что у групп шторки и подвала (.ftr__h):
   12/600, прописные, разрядка .08em, цвет сноски. Стоит в строку перед
   плитками, а не над ними: высота шапки не растёт. Это ответ на вопрос
   «где компания, где продукт» в покое, без наведения — у компании слева
   словесный знак без подписи, у продуктов — метка и плитки. Она же имя
   навигации для скринридера (aria-labelledby). */
.hprods{flex:none;display:flex;align-items:center;gap:12px}
.hprods__h{
  flex:none;font-size:var(--fs-footnote);font-weight:600;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:var(--text-footnote);
}
.hprods__list{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.hprod{
  display:flex;align-items:center;gap:10px;
  min-height:48px;padding:4px 14px 4px 4px;
  border-radius:var(--r-lg);
  font-size:var(--fs-dense);font-weight:600;line-height:1.2;white-space:nowrap;
  color:var(--text-heading);text-decoration:none;
  transition:background-color var(--dur-micro) var(--ease-swap),
             color var(--dur-micro) var(--ease-swap);
}
/* Плитка стоит в поле 4 у пилюли с радиусом 14: внутренний радиус 10 (D-16). */
.hprod__tile{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line-soft);
  box-shadow:var(--sh-tile);
  transition:transform var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap);
}
.hprod__tile img{width:26px;height:26px}
.hprod:hover,.hprod[data-peeking]{background:var(--surface-sunken)}
.hprod:hover .hprod__tile,.hprod[data-peeking] .hprod__tile{transform:translateY(-1px);box-shadow:var(--elev-1)}
/* Текущий продукт: подложка акцента, синее название, рамка плитки в тон.
   Признак не только цветом: подложка меняет форму пункта (пилюля). */
.hprod[aria-current="page"]{background:var(--accent-wash);color:var(--accent)}
.hprod[aria-current="page"]:hover,.hprod[aria-current="page"][data-peeking]{background:var(--accent-wash-2)}
.hprod[aria-current="page"] .hprod__tile{border-color:var(--ghost-br)}

/* ── Компания: разделы и призыв ─────────────────────────────────────────── */
.hdr__nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.hdr__nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-card);color:var(--text-menu);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-swap);
}
.hdr__nav a:hover{color:var(--text-heading)}
.hdr__nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.hdr__cta{flex:none}
.hdr__cta-s{display:none}

/* ── Бургер (≤1099) — рисунок C-09, превращается в крестик ───────────────── */
.burger{
  display:none;flex:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  padding:0;background:transparent;border:0;border-radius:var(--r-lg);cursor:pointer;
  color:var(--text-heading);
}
.burger span{
  display:block;width:20px;height:2px;border-radius:var(--r-pill);
  background:currentColor;position:relative;
  transition:background-color var(--dur-fast) var(--ease-swap);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;
  border-radius:var(--r-pill);background:currentColor;
  transition:transform var(--dur-fast) var(--ease-swap),top var(--dur-fast) var(--ease-swap);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ── Предпросмотр ─────────────────────────────────────────────────────────
   Одна панель на оба продукта: при переходе с одного знака на другой она
   не закрывается, а переезжает под новый знак (--peek-x ставит
   site.js), содержимое сменяется наплывом. Фон непрозрачный: панель ложится
   на заголовок первого экрана, и сквозь плотное стекло (.86) он читался
   под текстом панели — проверено снимком. Тень уровня 2 — та же, что
   у стекла шапки. Мостик ::before закрывает
   зазор 8 px между шапкой и панелью, чтобы курсор не ронял её по дороге. */
/* Панели нет в раскладке (display:none), пока посетитель не показал
   намерение: курсор или фокус в ряду продуктов ставит data-armed
   (site.js). До этого её ленивые картинки не грузятся вовсе — замер
   в стенда design/ds-stands/header-v5/shots.mjs: ни одной картинки панели в resource entries до наведения. */
.peek{
  position:absolute;top:calc(100% + 8px);left:0;z-index:2;
  display:none;width:560px;padding:12px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--elev-2);
  transform:translate(var(--peek-x, 0px), -4px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-entrance),
             transform var(--dur-fast) var(--ease-entrance),
             visibility 0s linear var(--dur-fast);
}
.peek[data-armed]{display:grid}
.peek::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
.peek[data-open]{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(var(--peek-x, 0px), 0);
  transition:opacity var(--dur-fast) var(--ease-entrance),
             transform var(--dur-fast) var(--ease-swap),
             visibility 0s;
}
.peek__card{
  grid-area:1 / 1;
  display:grid;grid-template-columns:216px minmax(0,1fr);gap:20px;
  color:inherit;text-decoration:none;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-fast) var(--ease-swap),visibility 0s linear var(--dur-fast);
}
.peek[data-show="nv"] .peek__card[data-for="nv"],
.peek[data-show="vt"] .peek__card[data-for="vt"]{
  opacity:1;visibility:visible;
  transition:opacity var(--dur-fast) var(--ease-swap),visibility 0s;
}
/* Картинка в поле 12 панели с радиусом 20: внутренний радиус 8 (D-16). */
.peek__img{
  width:100%;height:100%;min-height:184px;
  object-fit:cover;border-radius:var(--r-xs);
  background:var(--surface-sunken);
}
.peek__body{display:flex;flex-direction:column;align-items:flex-start;padding:8px 8px 0 0}
.peek__kicker{font-size:var(--fs-label);font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.peek__name{margin-top:4px;font-size:var(--fs-h3);font-weight:600;line-height:1.25;color:var(--text-heading)}
.peek__promise{margin-top:6px;font-size:var(--fs-card);line-height:1.45;color:var(--text-body)}
.peek__pts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.peek__pt{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-caption);line-height:1.4;color:var(--text-caption)}
.peek__pt .ico{margin-top:1px;color:var(--accent)}
.peek__go{margin-top:auto}
.peek__card:hover .peek__go{color:var(--accent-hover)}

/* ── Шторка (≤1099) ────────────────────────────────────────────────────────
   Живёт внутри места шапки (оно липкое, без transform и filter, поэтому
   fixed считается от окна) и ниже полосы шапки по z-index.
   Во весь экран, под шапкой: шапка остаётся сверху, её бургер закрывает
   шторку. Содержимое начинается под шапкой (отступ сверху — место шапки
   плюс 12). Продукты — первыми, карточками с тем же снимком и обещанием,
   что в предпросмотре на десктопе. */
.sheet{
  position:fixed;inset:0;z-index:1;overflow-y:auto;pointer-events:auto;
  padding:0 var(--pad) 24px;
  background:var(--sheet-bg);
  -webkit-backdrop-filter:blur(var(--blur-strong));backdrop-filter:blur(var(--blur-strong));
}
.sheet[hidden]{display:none}
.sheet__in{display:flex;flex-direction:column;max-width:720px;margin:calc(36px + var(--hdr-h)) auto 0}
/* Зона под полосой шапки — та же, что верхний отступ содержимого: на низком
   окне обход Tab вверх по шторке иначе оставлял первую карточку под шапкой. */
.sheet{scroll-padding-top:calc(36px + var(--hdr-h));scroll-padding-bottom:8px}
.sheet__h{margin:0 0 10px;font-size:var(--fs-footnote);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-footnote)}
.sheet__prods{display:grid;gap:12px;margin:0 0 28px;padding:0;list-style:none}
.sprod{
  display:flex;align-items:center;gap:14px;
  min-height:88px;padding:12px;
  border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--elev-1);
  color:var(--text-heading);text-decoration:none;
}
.sprod:hover{box-shadow:var(--elev-3)}
.sprod[aria-current="page"]{border-color:var(--ghost-br);background:var(--surface-soft)}
.sprod__img{flex:none;width:88px;height:64px;object-fit:cover;border-radius:var(--r-xs)}
.sprod__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.sprod__top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.hprod__tile--sm{width:28px;height:28px;border-radius:var(--r-xs)}
.hprod__tile--sm img{width:20px;height:20px}
.sprod__name{font-size:var(--fs-body);font-weight:600;line-height:1.2}
.sprod__here{
  display:none;align-items:center;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--accent-wash);color:var(--accent);
  font-size:var(--fs-footnote);font-weight:600;line-height:1.4;
}
.sprod[aria-current="page"] .sprod__here{display:inline-flex}
.sprod__promise{font-size:var(--fs-caption);line-height:1.4;color:var(--text-caption)}
.sheet__links{margin:0 0 24px;padding:0;list-style:none}
.sheet__links a{
  display:flex;align-items:center;min-height:52px;
  font-size:var(--fs-h3);font-weight:600;color:var(--text-heading);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.sheet__links a:hover{color:var(--accent)}
.sheet__links a[aria-current="page"]{color:var(--accent)}

/* ── Адаптив ──────────────────────────────────────────────────────────── */
/* Метка «Продукты» добавила строке 87 px (75 метка + 12 зазор). Замер ряда
   на каждой ширине (круг 2): без перестановок кнопка вылезала за поле шапки
   на 64 px при 1100, на 74 при 960, на 61 при 768 и на 18 при 640. Порядок
   уступок — от наименее важного: сначала короче подпись призыва, потом
   разделы компании уходят в шторку, потом призыв (как у C-09 на ≤959),
   и только на телефоне — продукты. Метка видна везде, где продукты в строке. */
@media (max-width:1279px){
  .hdr__nav{gap:20px}
  .hdr__cta-l{display:none}
  .hdr__cta-s{display:inline}
  .hdr__cta{padding-inline:20px}
}
/* 960–1099: разделы компании — в шторку за бургером; в строке компания,
   продукты с меткой и призыв. */
@media (max-width:1099px){
  .hdr{gap:12px;padding-right:8px}
  .hprod{padding-right:10px}
  .hdr__nav{display:none}
  .hdr__cta{margin-left:auto}
  .burger{display:flex}
}
/* 768–959: призыв уходит в шторку, как у C-09; в строке компания, продукты
   с меткой и бургер. */
@media (max-width:959px){
  .hdr__cta{display:none}
  .burger{margin-left:auto}
}
@media (min-width:640px){
  .sheet__prods{grid-template-columns:1fr 1fr}
}
/* 960–1099: призыв стоит в строке шапки над шторкой — второй в шторке
   был бы вторым призывом на экране. */
@media (min-width:960px){
  .sheet__cta{display:none}
}
/* ≤767: в строке компания и бургер; продукты — первыми карточками шторки.
   С меткой ряд продуктов на 640 не помещался (18 px), а без метки продукты
   снова стояли бы в строке без объяснения. */
@media (max-width:767px){
  .hdr-slot{top:0;height:calc(12px + var(--hdr-h));padding-top:12px}
  .hdr{padding-left:16px}
  .hdr__sep,.hprods,.peek,.peek[data-armed]{display:none}
  .sheet__in{margin-top:calc(24px + var(--hdr-h))}
  .sheet{scroll-padding-top:calc(24px + var(--hdr-h))}
}
/* Предпросмотр — только там, где есть наведение; на касании знак сразу ведёт
   на страницу продукта. */
@media (hover:none),(pointer:coarse){
  .peek,.peek[data-armed]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hdr,.hprod,.hprod__tile,.hdr__nav a,.peek,.peek[data-open],.peek__card,
  .burger span,.burger span::before,.burger span::after{transition:none}
  .peek,.peek[data-open]{transform:translate(var(--peek-x, 0px), 0)}
  .hprod:hover .hprod__tile,.hprod[data-peeking] .hprod__tile{transform:none}
}

/* ── Подвал ────────────────────────────────────────────────────────────────
   Вариант A, выбран пользователем 2026-09-19: светлый, на полотне страницы,
   отделён линией — меньше всего спорит с призывом над ним. */
.ftr{position:relative;z-index:1;margin-top:8px;font-size:14px;line-height:1.5}
.ftr__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.ftr__grid{display:grid;grid-template-columns:minmax(296px,1.5fr) repeat(3,minmax(0,1fr));gap:32px 40px}
.ftr__logo{display:inline-flex;min-height:44px;align-items:center}
.ftr__logo img{height:32px;width:auto}
.ftr__tag{margin:12px 0 0;max-width:300px;color:var(--muted-2)}
.ftr__reg{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:6px 12px 6px 10px;border-radius:999px;background:var(--tile);color:var(--blue);font-size:13px;font-weight:600;white-space:nowrap}
.ftr__col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ftr__h{margin:10px 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-4)}
.ftr__col a:not(.link-arrow){display:inline-flex;align-items:center;min-height:32px;color:var(--ink-2);text-decoration:none}
.ftr__col a:not(.link-arrow):hover{color:var(--blue)}
.ftr__col a[aria-current="page"]{color:var(--blue)}
/* На телефоне ссылки подвала — мишени от 44 px, как всё остальное нажимаемое
   на сайте: при 32 они были ниже рекомендации Apple (О-9 приёмки main). */
@media (max-width:767px){
  .ftr__col a:not(.link-arrow){min-height:44px}
}
.ftr__cta{margin-top:6px}
.ftr__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:40px;padding-block:22px 28px;border-top:1px solid var(--line-2);color:var(--muted-4);font-size:13px}
.ftr__legal p{margin:0}
.ftr__legal p + p{max-width:620px}
@media (max-width:959px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1 / -1}}
@media (max-width:639px){.ftr__grid{grid-template-columns:1fr 1fr;gap:24px 20px}.ftr__col:last-child{grid-column:1 / -1}.ftr__legal{flex-direction:column}}
.ftr{border-top:1px solid var(--line-2);padding-top:48px}


/* ============================================================================
   НаВстрече — движение.

   Базис — нативные scroll-driven анимации (animation-timeline: view()):
   ноль JS, работа на потоке композитора. Для браузеров без поддержки —
   общий IntersectionObserver из js/site.js, вешающий .is-in на [data-reveal]
   (общий для всех страниц, не только главной).

   ⚠️ ЛОВУШКА, из-за которой весь блок ревилов обёрнут в no-preference.
   Глобальное `animation-duration:.01ms !important` под prefers-reduced-motion
   схлопывает обычную анимацию, но progress-based таймлайн длительностью
   НЕ управляется — правило не отменяет ничего, и контент продолжает
   двигаться у того, кто попросил его не двигать. Поэтому:
     · весь блок ревилов — внутри prefers-reduced-motion: no-preference
     · в reduce-ветке явно гасим и animation, и animation-timeline
     · базовое состояние элемента ВИДИМОЕ; скрытие живёт только в @keyframes from
   ========================================================================= */

@media (prefers-reduced-motion: no-preference){

  @supports (animation-timeline: view()){
    [data-reveal]{
      animation:ui-reveal linear both;
      animation-timeline:view();
      /* Заканчиваем ещё в фазе входа: когда элемент вошёл на 70%, он уже
         полностью проявился. С `cover` высокая карточка доезжала до
         непрозрачности слишком поздно и на середине экрана оставалась
         полупрозрачной. */
      animation-range-start:entry 4%;
      animation-range-end:entry 70%;
    }
    /* Карточки в группе въезжают друг за другом: сдвиг диапазона вместо delay,
       потому что у progress-based анимации delay не работает. */
    /* Каскад: сдвигаем начало диапазона, а не delay — у progress-based
       анимации задержка не работает. calc допустим только внутри процента,
       поэтому свойства раздельные, а не сокращённое animation-range. */
    [data-reveal][style*="--i"]{
      animation-range-start:entry calc(4% + var(--i, 0) * 7%);
      animation-range-end:entry calc(70% + var(--i, 0) * 5%);
    }
  }

  @supports not (animation-timeline: view()){
    [data-reveal]{
      opacity:0;transform:translateY(var(--reveal-y));
      transition:opacity var(--dur-base) var(--ease-entrance),
                 transform var(--dur-base) var(--ease-entrance);
      transition-delay:calc(var(--i, 0) * var(--stagger));
    }
    [data-reveal].is-in{opacity:1;transform:none}
  }

  /* Hero — единственный --dur-epic на странице. Каскад по --i. */
  [data-anim="hero"]{
    opacity:0;transform:translateY(18px);
    animation:ui-reveal var(--dur-epic) var(--ease-entrance) forwards;
    animation-delay:calc(120ms + var(--i, 0) * 90ms);
  }

  /* Плавающие карточки первого экрана дышат с разной амплитудой.
     Только на широком экране: на узком они стоят в потоке, и сдвиг читается
     как дрожание. */
  @media (min-width:1100px){
    [data-float="1"]{animation:ui-float 7s var(--ease-swap) infinite alternate}
    [data-float="2"]{animation:ui-float 9s var(--ease-swap) -3s infinite alternate}
  }

  /* Точки радара проступают одна за другой и мягко пульсируют */
  .radar__pts circle{
    transform-box:fill-box;transform-origin:center;
    animation:ui-pop var(--dur-base) var(--ease-chip) both,
              ui-breathe 3.2s ease-in-out infinite;
  }
  .radar__pts circle:nth-child(1){animation-delay:200ms, 0ms}
  .radar__pts circle:nth-child(2){animation-delay:320ms, 400ms}
  .radar__pts circle:nth-child(3){animation-delay:440ms, 800ms}
  .radar__pts circle:nth-child(4){animation-delay:560ms, 1200ms}

  /* Спарклайн сигнала прочерчивается при появлении карточки.
     Длину задаёт js/signals.js — без неё dasharray был бы на глаз. */
  .spark__line{
    stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
    transition:stroke-dashoffset var(--dur-slow) var(--ease-entrance);
  }
  .sig.is-in .spark__line{stroke-dashoffset:0}
  .spark__area{opacity:0;transition:opacity var(--dur-slow) var(--ease-entrance) 160ms}
  .sig.is-in .spark__area{opacity:.16}

  /* Соединители схемы прорисовываются при первом показе панели */
  .wire{
    stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);
    animation:ui-draw var(--dur-slow) var(--ease-entrance) forwards;
    animation-delay:calc(var(--wi, 0) * 90ms);
  }
}

/* Полное отключение движения по просьбе пользователя */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-anim="hero"],[data-float],.radar__pts circle,.wire{
    animation:none !important;animation-timeline:none !important;
    opacity:1 !important;transform:none !important;transition:none !important;
    stroke-dashoffset:0 !important;
  }
  .spark__line{stroke-dashoffset:0}
  .spark__area{opacity:.16}
    html{scroll-behavior:auto}
}

/* Смена таба: контент проявляется, не прыгая */
.tabpanel{animation:ui-fade var(--dur-fast) var(--ease-swap) both}
@media (prefers-reduced-motion: reduce){ .tabpanel{animation:none} }

@keyframes ui-reveal{
  from{opacity:0;transform:translate(var(--enter-x,0),var(--reveal-y))}
  to  {opacity:1;transform:none}
}
@keyframes ui-fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes ui-pop { from{opacity:0;transform:scale(.6) rotate(-25deg)} to{opacity:1;transform:none} }
@keyframes ui-ping{
  0%  {transform:scale(1);   opacity:.7}
  70% {transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
@keyframes ui-float{ from{transform:translateY(-5px)} to{transform:translateY(5px)} }
@keyframes ui-breathe{ 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes ui-draw { to{stroke-dashoffset:0} }

/* Не оставляем will-change висеть после анимации */
.hero__shot{will-change:transform}


/* Макет «contacts-fixed» — вариант 3Б с исправлениями по сверке живой страницы
   «Контакты» (01.10.2026, отчёт https://claude.ai/artifact/MRsZ7wPCTmunRZtBYumBgH).
   Номера правок — из отчёта; места помечены data-fix.

   Основа — «contacts-v3b». Только классы pg-* и токены из assets/css/tokens.css
   (целевые значения — ds/tokens.json). Брейкпоинты — 1279/1099/959/767/639.

   Контакты — вариант 3Б: вариант 3 «Форма остаётся» с правками 01.10.2026
   (картинка варианта 1; полоса часов и контактов под лидом; три пути
   обращения; блок реквизитов с живой страницы). */

/* ── Первый экран: pg-ct-grid ─────────────────────────────────────────────
   Сетка C-01, но правая колонка — карточка формы C-16 шириной 400, как в
   .demo, а не визуал 644. Две колонки держатся до 960, как у формы C-16
   (.demo складывается на ≤959); ниже — столбец: текст, полоса, картинка,
   форма. Зазор — со шкалы: 32, на ≤1279 — 24. */
.hero__grid.pg-ct-grid{grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start}
@media (max-width:1279px){
  .hero__grid.pg-ct-grid{gap:24px}
}
@media (max-width:959px){
  .hero__grid.pg-ct-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  /* Правка 6: форма на ≤959 — 520, как в образце C-16 (было во всю ширину). */
}
.pg-ct-copy{min-width:0}

/* Заголовок формы — h2 по уровню (после h1 первого экрана), вид h3 C-16. */
.pg-ct-form__t{font-size:var(--fs-h3);line-height:1.14;letter-spacing:-.015em;color:var(--text-heading)}

/* ── Полоса часов и контактов: C-03 (.strip) ─────────────────────────────
   Правки 2 и 3: часы, почта и телефон — одной полосой, как в варианте 2,
   сразу под лидом. В варианте 2 полоса шла на 1200 и контакты стояли
   справа; в колонке 768 им не хватает 90 px, и .strip--cta переносил
   их вправо на вторую строку. Здесь контакты — вторая строка под текстом,
   с той же левой кромки, что заголовок и пояснение полосы (как полоса
   варианта 2 на ≤959). Строка контактов — C-16 .demo__contacts без её
   верхнего поля 32. Отступ от лида — 24, как у кнопок первого экрана
   (.hero__cta). */
.strip.pg-ct-hours{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;
  margin-top:24px;align-items:start}
/* Правка 7: полоса по ширине содержимого — на 1440 справа пустовало 297 px из 768. */
.strip.pg-ct-hours{width:fit-content;max-width:100%}
.pg-ct-hours__txt{min-width:0;padding-top:2px}
.demo__contacts.pg-ct-hours__contacts{grid-column:2;margin-top:0;gap:8px 26px}
@media (max-width:767px){
  /* .demo__contacts на ≤767 встаёт столбцом с зазором 12 — оставляем,
     ссылки по 44 в высоту и так дают воздух. */
  .demo__contacts.pg-ct-hours__contacts{gap:0}
}

/* Картинка «Маршрут обращения» под полосой: прозрачный рендер на фоне
   страницы, без рамки и тени. */
.pg-ct-illo{margin:24px 0 0}
.pg-ct-illo img{display:block;width:100%;height:auto}

/* Ссылки внутри абзацев — акцентный текст, подчёркивание при наведении. */
.pg-ct-lnk{color:var(--accent-text);text-decoration:none;
  transition:color var(--dur-micro) var(--ease-swap)}
.pg-ct-lnk:hover{color:var(--accent-hover);text-decoration:underline}

/* Названия путей — h2 (шапки у путей нет, уровни не пропускаем) в виде
   h3 карточки C-02: 16/600. */
.pg-ct-way__t{margin:0 0 10px;font-size:16px;font-weight:600;line-height:1.3;
  letter-spacing:-.01em;color:var(--text-heading)}

/* ── Реквизиты: общее ─────────────────────────────────────────────────────
   Список — как на живой странице: подпись 13 цветом подписей, значение
   15/600 цветом заголовков. */
.pg-req-t{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--text-heading)}
.pg-req-dl{display:grid;gap:14px;margin:0}
.pg-req-dl dt{font-size:13px;line-height:1.5;color:var(--text-caption)}
.pg-req-dl dd{margin:2px 0 0;font-size:15px;font-weight:600;line-height:1.4;color:var(--text-heading);
  overflow-wrap:anywhere}
.pg-req-copy{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pg-req-ok{font-size:14px;color:var(--text-caption)}
/* Полоса реестра — C-03 .strip--three, пунктов два: две колонки. */
.strip--three.pg-req-reg{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
@media (max-width:1099px){
  .strip--three.pg-req-reg{grid-template-columns:minmax(0,1fr)}
}

/* ══ Вариант 3Б ════════════════════════════════════════════════════════════
   Картинка уже колонки — 520 вместо 768: левая колонка кончается почти
   вровень с формой (замер на 1440 — в «Итоге» design/contacts-hero.md),
   картинка не перевешивает форму. Прижата к левой кромке текста. */
.pg-ct-illo{max-width:520px}

/* ── Пути обращения: продолжение первого экрана ──────────────────────────
   Как ряд варианта 2: от колонок их отделяет зазор шапки секции до
   содержимого (--head-gap). Ряд на три — D-30: с 1099 столбец. Карточка
   горизонтальная на всех ширинах — плитка слева, текст справа, как пути
   на живой странице; в трети ряда (386 на 1440) тексту остаётся 280. */
.pg-ct-more{margin-top:var(--head-gap)}
.pg-ct-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid)}
.pg-ct-path{display:flex;align-items:flex-start;gap:16px;min-width:0}
.pg-ct-path__body{min-width:0}
@media (max-width:1099px){
  .pg-ct-paths{grid-template-columns:minmax(0,1fr)}
}

/* ── Реквизиты: одна карточка-документ ───────────────────────────────────
   C-07 с полем 22. Внутри три колонки (Компания, Адрес, Банк), между ними
   тонкая линия --line-soft (рамка карточки C-07), у каждой колонки шапка:
   плитка C-08 34 и h3 в строку. Кнопка копирования — в подвале карточки,
   над ним та же линия: видно, что копируется содержимое этой карточки.
   Неровная высота колонок не видна — у колонок нет своих рамок.
   С 1099 колонки идут столбцом, линии — горизонтальные. */
.pg-req-doc{margin-top:var(--head-gap);padding:0;min-width:0;overflow:hidden}
.pg-req-doc__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-req-col{padding:var(--pad-card);min-width:0}
.pg-req-col + .pg-req-col{border-left:1px solid var(--line-soft)}
.pg-req-col__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pg-req-doc__foot{padding:16px var(--pad-card);border-top:1px solid var(--line-soft)}
.strip--three.pg-req-reg{margin-top:var(--gap-grid)}
@media (max-width:1099px){
  .pg-req-doc__cols{grid-template-columns:minmax(0,1fr)}
  .pg-req-col + .pg-req-col{border-left:0;border-top:1px solid var(--line-soft)}
}
@media (max-width:639px){
  .pg-req-col{padding:16px}
  .pg-req-doc__foot{padding:16px}
  .pg-req-doc__foot .btn{width:100%;justify-content:center}
}

/* ══ Правки по сверке ═══════════════════════════════════════════════════
   Правки 4 и 12: подсказки полей и списка. Предложенный токен
   --text-placeholder (4,69 : 1 на белом, светлее основного текста) — в
   систему ещё не принят, поэтому значение здесь, в макете. */
:root{--text-placeholder:#68748e}
.pg-ct-form .field__ctrl::placeholder{color:var(--text-placeholder)}
.pg-ct-form .field--select select:has(option[value=""]:checked){color:var(--text-placeholder)}
.pg-ct-form .field--select select option{color:var(--text-heading)}

/* Правка 10: у Видеоточки знак продукта в плитке, как в шапке. */
.pg-ct-mark img{width:26px;height:26px}

/* Ссылка на политику в сноске формы — подчёркнута, как на живой странице. */
.pg-ct-lnk--u{text-decoration:underline;color:inherit}

/* Правка 1: юридические ссылки подвала строкой; на телефоне мишени 44. */
.pg-ftr-docs{display:flex;flex-wrap:wrap;gap:4px 20px}
.pg-ftr-docs a{color:inherit;text-decoration:none}
.pg-ftr-docs a:hover{color:var(--accent)}
@media (max-width:767px){
  .ftr__col a,.pg-ftr-docs a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── Панель прототипа: что исправлено и метки на странице ─────────────── */
.pg-proto{position:fixed;right:16px;bottom:16px;z-index:80;max-width:min(360px,calc(100vw - 32px))}
.pg-proto__box{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  box-shadow:var(--elev-2);padding:16px 18px}
.pg-proto__sum{cursor:pointer;font-weight:600;color:var(--text-heading);font-size:15px}
.pg-proto__list{list-style:decimal;margin:10px 0 0;padding-left:22px;font-size:13px;line-height:1.45;color:var(--text-body);
  display:grid;gap:4px}
.pg-proto__tgl{display:flex;align-items:center;gap:8px;margin-top:12px;min-height:44px;font-size:14px;color:var(--text-heading);cursor:pointer}
.pg-proto__tgl input{width:18px;height:18px;accent-color:var(--accent)}
.pg-proto__note{margin-top:4px;font-size:12px;color:var(--text-caption)}
@media (max-width:767px){
  .pg-proto__box:not([open]){padding:10px 14px}
}
.pg-marks [data-fix]{outline:2px dashed var(--accent);outline-offset:4px;position:relative}
.pg-marks [data-fix]::after{content:attr(data-fix);position:absolute;top:-12px;left:-12px;z-index:5;
  min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;line-height:1;box-shadow:var(--sh-btn)}
.pg-marks .ftr[data-fix]::after{top:8px;left:8px}

/* ct-simple */#demo .pg-ct-grid{grid-template-columns:minmax(0,640px);justify-content:center}#demo .pg-ct-form__contacts{margin:4px 0 20px}

/* ── Настоящее меню и подвал (qa/v6-nav.mjs) ─────────────────────────────── */
.hdr__nav--real{gap:clamp(4px,1vw,14px)}
.hdr__nav--real>a{padding-inline:8px}
.nav-grp{position:relative;display:flex;align-items:center}
.nav-grp__btn{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;
  background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:14px;color:var(--nav);white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-swap);
}
.nav-grp__btn:hover,.nav-grp:hover .nav-grp__btn,.nav-grp:focus-within .nav-grp__btn{color:var(--ink-2)}
.nav-grp__chev{transition:transform var(--dur-fast) var(--ease-swap)}
.nav-grp:hover .nav-grp__chev,.nav-grp:focus-within .nav-grp__chev,
.nav-grp[data-open] .nav-grp__chev{transform:rotate(180deg)}
.nav-grp__panel{
  position:absolute;left:0;top:100%;z-index:80;padding-top:10px;width:420px;
  visibility:hidden;opacity:0;
  transition:opacity var(--dur-fast) var(--ease-swap),visibility var(--dur-fast) var(--ease-swap);
}
.nav-grp:hover .nav-grp__panel,.nav-grp:focus-within .nav-grp__panel,
.nav-grp[data-open] .nav-grp__panel{visibility:visible;opacity:1}
.nav-grp__card{
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:var(--sh-lift);
}
/* ⚠️ Селектор с .hdr__nav — не для красоты. У макета своё правило на ссылки
   в меню: display:inline-flex, white-space:nowrap, min-height:44px. Оно сильнее
   одиночного класса — пункт панели вытягивался в одну строку, а описание
   уезжало за край карточки. Первый снимок это и показал. */
.hdr__nav .nav-it{
  display:block;padding:9px 12px;border-radius:var(--r-md);text-decoration:none;
  min-height:0;white-space:normal;
  transition:background-color var(--dur-micro) var(--ease-swap);
}
.hdr__nav .nav-it:hover{background:var(--surface-3)}
.nav-it__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-it__t{font-size:15px;font-weight:600;color:var(--ink-2);line-height:1.3}
.nav-it__b{
  flex:none;padding:3px 8px;border-radius:6px;
  background:var(--surface-3);color:var(--muted-3);font-size:11px;font-weight:600;white-space:nowrap;
}
.nav-it__d{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted-3)}

.sheet--real{justify-content:flex-start;gap:0;overflow-y:auto;padding-block:20px 28px}
.sheet--real a{min-height:42px;font-size:16.5px}
.sheet__close{
  position:sticky;top:0;align-self:flex-end;flex:none;
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin-bottom:4px;background:transparent;border:0;color:var(--ink-2);cursor:pointer;
}
.sheet__cap{
  margin:18px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-4);
}
.sheet__cap:first-child{margin-top:0}

.ftr{
  margin-top:clamp(48px,6vw,80px);padding-block:clamp(36px,4vw,56px) 24px;
  background:var(--surface-2);border-top:1px solid var(--line-2);
}
.ftr__grid{display:grid;grid-template-columns:minmax(260px,1fr) 2.2fr;gap:clamp(24px,4vw,64px)}
.ftr__brand{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--ink-2)}
.ftr__lead{margin:0 0 16px;max-width:36ch;font-size:14px;line-height:1.5;color:var(--muted-3)}
.ftr__contact{margin:0 0 6px}
.ftr__contact a{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none}
.ftr__contact a:hover{color:var(--blue)}
.ftr__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
.ftr__cap{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-4)}
.ftr__col a{
  display:block;margin-bottom:7px;font-size:14px;line-height:1.4;
  color:var(--muted-2);text-decoration:none;
}
.ftr__col a:hover{color:var(--blue)}
.ftr__legal{
  display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:flex-start;
  margin-top:clamp(28px,3vw,40px);padding-top:20px;border-top:1px solid var(--line-2);
}
.ftr__legal-text p{margin:0 0 4px;font-size:12.5px;line-height:1.5;color:var(--muted-4);max-width:70ch}
.ftr__legal-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.ftr__legal-links a{font-size:12.5px;color:var(--muted-3);text-decoration:none}
.ftr__legal-links a:hover{color:var(--blue)}

@media (max-width:1100px){
  .nav-grp__panel{width:360px}
}
@media (max-width:980px){
  .ftr__grid{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ftr__cols{grid-template-columns:1fr}
  .ftr__legal{flex-direction:column}
}

.ftr__cols--v1{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.ftr__cols--v1{grid-template-columns:1fr}}
/* Шапка: раскладка поверх макета дизайнера — ⛔ С 04.10.2026 (поздно) ПРАВИЛ НЕТ.
 *
 * Шапка «Продукты + полка» (предложение продакта 04.10): знак компании слева, по центру
 * «Продукты · Партнёрам · О компании · Контакты», справа кнопка «Войти». Знаков и названий
 * продуктов в строке больше нет — они в полке под «Продуктами» и в развилке первого экрана
 * главной. Путать знак компании с продуктом НаВстрече в строке теперь не с чем.
 *
 * ~~01.10 (поздно), вариант A: знак компании один слева, всё меню справа, черта между
 * продуктами и разделами (order + margin)~~ — перекрыто шапкой от 04.10: тех элементов нет.
 *
 * Файл подключает Header.astro и вставляет в страницы-макеты qa/preview-v9.mjs. Все селекторы под .hdr-slot.
 */
/* 05.10, продакт: «ссылка „Продукты“ по контрасту чуть отличается от тех, что рядом» — у дизайнера она
   полужирная (600), соседние разделы — обычные (400), цвет тот же. Начертание как у соседей; текущий
   раздел по-прежнему выделяется синим. Селектор длиннее обычного: на «Контактах» стили шапки сайта
   вставляются после этого файла и при равной специфичности перебили бы правку. */
.hdr-slot .hdr__nav .hdr__prodlink{font-weight:400}

.trust__mask{max-width:var(--wrap,1200px);margin-inline:auto}
/* Главная, «Контекст встреч встраивается…»: на 1024–1279 колонка узкая для 46 px — «встраивается»
   выходило за колонку (308 > 282 px на 1100) и упиралось в схему. */
@media (min-width:1024px) and (max-width:1279px){#context .split__copy h2{font-size:38px}}
/* «О компании», 320–359 px: заголовки двух карточек выходили за край (дизайнер ждал выбора способа) —
   перенос по слогам и чуть меньший кегль. */
@media (max-width:359px){#usage .feat__stat,#terms h3{hyphens:auto;overflow-wrap:break-word}#usage .feat__stat{font-size:22px}}
/* «О компании», «Инфраструктура»: плашка-примечание под четырьмя карточками была 440 px (max-width
   у .strip--note) — в полторы колонки, ни с чем не совпадала. Во всю ширину — так же, как дизайнер
   делает широкие примечания классом .strip--wide. ~~Отступ над карточками «Ваш контур или облако»~~ —
   замер вживую: 24 px против 28 px на главной, разницы нет, правка снята. */
#infrastructure .strip--note{max-width:none}
/* Видеоточка, «Как масштабируется», лента схем (телефон и планшет): карточки тянулись до высоты самой
   высокой (1291 px), и сетка внутри разносила содержимое — в «Одном зале» пустота ~190 px посередине.
   Каждой карточке — её высота. */
@media (max-width:1099px){#scale .pg-switch__stage{align-items:flex-start}}
/* «Партнёрам», первый экран на широком экране (продакт, снимок 05.10: «картинка улетела из сетки»): фон
   был растянут на всё окно — на 2560 картинка доходила до края окна при шапке 640…1920. Как на главной
   (01.10): с 1441 px фон не шире 1400 по центру, правый край картинки растворяется. До 1440 — как было. */
@media (min-width:1441px){
  #hero .pg-hero-bg__stage{left:max(0px,calc(50% - 700px));right:max(0px,calc(50% - 700px))}
  #hero .pg-hero-bg__img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 40%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 40%,#000 92%,transparent 100%)}
}
/* Подсказка выпадающего списка — серым, как подсказки полей (на «Контактах» так и было — у них своё
   правило с более тёмным серым, оно специфичнее и остаётся). Пункты списка — обычным цветом. */
.field--select select:has(option[value=""]:checked){color:#98a2b8}
.field--select select option{color:var(--ink,#0d1733)}
.pg-consent{margin:4px 0 16px}
.pg-consent .check__t a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.pg-consent__err{margin:-10px 0 14px}
.pg-consent[data-state="error"] + .pg-consent__err{display:block}

/* header-v5 (сайт) */
/* СГЕНЕРИРОВАНО qa/port-header-v5.mjs из qa/_v9-scena/main.html — руками не править. */
@font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url(/img/fonts/onest-3.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url(/img/fonts/onest-4.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}
.hdr-slot{--blue:var(--accent);--accent:#1a59f5;--glass-bg:rgba(255,255,255,.48);--glass-br:rgba(255,255,255,.78);--r-3xl:var(--r-card);--r-card:20px;--glass-sh:var(--elev-2);--elev-2:0 18px 46px rgba(15,31,71,.10);--glass-blur:var(--blur-glass);--blur-glass:16px;--r-lg:14px;--dur-micro:120ms;--ease-swap:cubic-bezier(.76,0,.24,1);--accent-fill:rgba(26,89,245,.96);--sh-btn:0 8px 20px rgba(20,71,219,.22);--blue-deep:var(--accent-hover);--accent-hover:#1450e0;--sh-btn-hover:0 12px 26px rgba(20,71,219,.28);--muted-4:var(--text-footnote);--text-footnote:#505e78;--ink-2:var(--text-heading);--text-heading:#031040;--muted-3:var(--text-caption);--text-caption:#505e78;--hdr-h:68px;--pad:clamp(16px,4vw,24px);--wrap-wide:1280px;--dur-fast:240ms;--ghost-bg:rgba(255,255,255,.72);--sh-header-scrolled:0 10px 30px rgba(15,31,71,.12);--r-xs:8px;--r-sm:10px;--surface:#ffffff;--line-soft:#eef2f9;--sh-tile:0 3px 8px rgba(26,89,242,.13);--fs-card:14px;--text-menu:#424f6b;--surface-soft:#f7f9fd;--surface-sunken:#f4f7fc;--accent-wash:rgba(26,89,245,.075);--fs-label:11px;--fs-h3:clamp(17px,1rem + .4vw,20px);--text-body:#424f6b;--fs-caption:13px;--r-pill:999px;--sheet-bg:rgba(255,255,255,.94);--blur-strong:18px;--fs-footnote:12px;--elev-1:0 1px 2px rgba(15,31,71,.04), 0 12px 28px -12px rgba(15,31,71,.16);--elev-3:0 2px 6px rgba(15,31,71,.06), 0 28px 56px -22px rgba(15,31,71,.24);--ghost-br:rgba(26,89,245,.34);--fs-body:16px;--line:#e4eaf6;font-family:Onest,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.hdr-slot *,.hdr-slot *::before,.hdr-slot *::after{box-sizing:border-box}
.hdr-slot a{color:inherit}.hdr-slot img{max-width:none}
@media (max-width:767px){.hdr-slot{--blur-glass:12px}}
.hdr-slot :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.hdr-slot .glass{background:var(--glass-bg);
  border:1px solid var(--glass-br);
  border-radius:var(--r-3xl);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hdr-slot .glass{background:rgba(255,255,255,.94)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hdr-slot .sheet{background:rgba(240,245,253,.99)}}
.hdr-slot .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 26px;border:0;border-radius:var(--r-lg);
  font:500 14px/1 Onest;text-align:center;text-decoration:none;
  cursor:pointer;position:relative;isolation:isolate;
  transition:transform var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap),
             background-color var(--dur-micro) var(--ease-swap),
             border-color var(--dur-micro) var(--ease-swap),
             color var(--dur-micro) var(--ease-swap);}
.hdr-slot .btn--primary{background:var(--accent-fill);color:#fff;box-shadow:var(--sh-btn);}
.hdr-slot .btn--primary:hover{background:var(--blue-deep);box-shadow:var(--sh-btn-hover);transform:translateY(-1px)}
.hdr-slot .btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(20,71,219,.24)}
.hdr-slot .btn--block{width:100%}
.hdr-slot .btn[disabled],.hdr-slot .btn[aria-disabled="true"]{pointer-events:none;opacity:.55;box-shadow:none;transform:none;}
.hdr-slot .btn[data-state="loading"]{pointer-events:none}
.hdr-slot .btn[data-state="loading"] .btn__label{opacity:0}
.hdr-slot .btn[data-state="loading"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:ui-spin .7s linear infinite;}
.hdr-slot .link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--blue);font-weight:600;font-size:14px;text-decoration:none;
  transition:color var(--dur-micro) var(--ease-swap);}
.hdr-slot .link-arrow:hover{color:var(--blue-deep)}
.hdr-slot .link-arrow:hover .link-arrow__ico{transform:translateX(3px)}
.hdr-slot .ico{flex:none;color:currentColor}
.hdr-slot .ico--16{width:16px;height:16px}
.hdr-slot .chip--lg .ico{width:16px;height:16px}
.hdr-slot .chip--lg .ico{color:var(--blue)}
.hdr-slot .node__li .ico{color:var(--muted-4);margin-top:2px}
.hdr-slot .checks .ico{color:var(--ink-2);margin-top:2px;flex:none}
@media (max-width:767px){.hdr-slot .hero__cta .btn{width:100%}}
@media (max-width:767px){.hdr-slot .strip--cta .btn{width:100%;justify-content:center}}
.hdr-slot .cx-li .ico{flex:none;color:var(--blue);margin-top:1px}
.hdr-slot .demo__contacts .ico{color:var(--muted-3)}
.hdr-slot .demo__form .btn{margin-top:10px}
.hdr-slot .demo__note .ico{flex:none;margin-top:2px;color:var(--muted-4)}
.hdr-slot{position:sticky;top:-12px;z-index:60;
  height:calc(24px + var(--hdr-h));
  padding:24px var(--pad) 0;
  pointer-events:none;}
.hdr-slot .hdr{position:relative;z-index:2;pointer-events:auto;
  max-width:var(--wrap-wide);margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  min-height:var(--hdr-h);padding:0 12px 0 24px;
  transition:min-height var(--dur-fast) var(--ease-swap),
             box-shadow var(--dur-fast) var(--ease-swap),
             background-color var(--dur-fast) var(--ease-swap);}
.hdr-slot[data-state="scrolled"] .hdr{min-height:56px;
  background:var(--ghost-bg);
  box-shadow:var(--sh-header-scrolled);}
.hdr-slot .hdr a,.hdr-slot .hdr button{scroll-margin-top:calc(-1 * (var(--hdr-h) + 52px))}
.hdr-slot .hdr__co{display:flex;align-items:center;min-height:44px;flex:none;border-radius:var(--r-xs)}
.hdr-slot .hdr__co img{height:32px;width:auto}
.hdr-slot .hprod__tile{flex:none;display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line-soft);
  box-shadow:var(--sh-tile);
  transition:transform var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap);}
.hdr-slot .hprod__tile img{width:26px;height:26px}
.hdr-slot .hdr__nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.hdr-slot .hdr__nav > a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-card);color:var(--text-menu);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-swap);}
.hdr-slot .hdr__nav > a:hover{color:var(--text-heading)}
.hdr-slot .hdr__nav > a[aria-current="page"]{color:var(--accent);font-weight:600}
.hdr-slot .hdr__prodlink{font-weight:600;color:var(--text-heading)}
.hdr-slot .hdr__prodlink:hover{color:var(--accent)}
.hdr-slot .hdr__cta{flex:none}
@media (min-width:1100px){.hdr-slot .hdr{display:grid;grid-template-columns:1fr auto 1fr}}
@media (min-width:1100px){.hdr-slot .hdr__co{justify-self:start}}
@media (min-width:1100px){.hdr-slot .hdr__nav{margin-left:0;justify-self:center}}
@media (min-width:1100px){.hdr-slot .hdr__cta{justify-self:end}}
.hdr-slot .hshelf{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:2;
  display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--elev-2);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--dur-fast) var(--ease-swap),
             transform var(--dur-fast) var(--ease-swap);}
.hdr-slot .hshelf[data-armed]{display:grid}
.hdr-slot .hshelf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
.hdr-slot .hshelf[data-open]{opacity:1;transform:translateY(0)}
.hdr-slot .hcard{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;
  padding:12px;border-radius:var(--r-lg);background:var(--surface-soft);
  color:inherit;text-decoration:none;
  transition:background-color var(--dur-micro) var(--ease-swap);}
.hdr-slot .hcard:hover{background:var(--surface-sunken)}
.hdr-slot .hcard[aria-current="page"]{background:var(--accent-wash)}
.hdr-slot .hcard__img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);display:block}
.hdr-slot .hcard__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:4px 4px 4px 0}
.hdr-slot .hcard__k{font-size:var(--fs-label);font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hdr-slot .hcard__n{margin-top:4px;font-size:var(--fs-h3);font-weight:600;line-height:1.25;color:var(--text-heading)}
.hdr-slot .hcard__p{margin-top:6px;font-size:var(--fs-card);line-height:1.45;color:var(--text-body)}
.hdr-slot .hcard__pts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.hdr-slot .hcard__pt{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-caption);line-height:1.4;color:var(--text-caption)}
.hdr-slot .hcard__pt .ico{margin-top:1px;color:var(--accent)}
.hdr-slot .hcard__go{margin-top:12px}
.hdr-slot .hcard:hover .hcard__go{color:var(--accent-hover)}
.hdr-slot .burger{display:none;flex:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  padding:0;background:transparent;border:0;border-radius:var(--r-lg);cursor:pointer;
  color:var(--text-heading);}
.hdr-slot .burger span{display:block;width:20px;height:2px;border-radius:var(--r-pill);
  background:currentColor;position:relative;
  transition:background-color var(--dur-fast) var(--ease-swap);}
.hdr-slot .burger span::before,.hdr-slot .burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  border-radius:var(--r-pill);background:currentColor;
  transition:transform var(--dur-fast) var(--ease-swap),top var(--dur-fast) var(--ease-swap);}
.hdr-slot .burger span::before{top:-6px}
.hdr-slot .burger span::after{top:6px}
.hdr-slot .burger[aria-expanded="true"] span{background:transparent}
.hdr-slot .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hdr-slot .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.hdr-slot .sheet{position:fixed;inset:0;z-index:1;overflow-y:auto;pointer-events:auto;
  padding:0 var(--pad) 24px;
  background:var(--sheet-bg);
  -webkit-backdrop-filter:blur(var(--blur-strong));backdrop-filter:blur(var(--blur-strong));}
.hdr-slot .sheet[hidden]{display:none}
.hdr-slot .sheet__in{display:flex;flex-direction:column;max-width:720px;margin:calc(36px + var(--hdr-h)) auto 0}
.hdr-slot .sheet{scroll-padding-top:calc(36px + var(--hdr-h));scroll-padding-bottom:8px}
.hdr-slot .sheet__h{margin:0 0 10px;font-size:var(--fs-footnote);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-footnote)}
.hdr-slot .sheet__prods{display:grid;gap:12px;margin:0 0 28px;padding:0;list-style:none}
.hdr-slot .sprod{display:flex;align-items:center;gap:14px;
  min-height:88px;padding:12px;
  border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--elev-1);
  color:var(--text-heading);text-decoration:none;}
.hdr-slot .sprod:hover{box-shadow:var(--elev-3)}
.hdr-slot .sprod[aria-current="page"]{border-color:var(--ghost-br);background:var(--surface-soft)}
.hdr-slot .sprod__img{flex:none;width:88px;height:64px;object-fit:cover;border-radius:var(--r-xs)}
.hdr-slot .sprod__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.hdr-slot .sprod__top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.hdr-slot .hprod__tile--sm{width:28px;height:28px;border-radius:var(--r-xs)}
.hdr-slot .hprod__tile--sm img{width:20px;height:20px}
.hdr-slot .sprod__name{font-size:var(--fs-body);font-weight:600;line-height:1.2}
.hdr-slot .sprod__here{display:none;align-items:center;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--accent-wash);color:var(--accent);
  font-size:var(--fs-footnote);font-weight:600;line-height:1.4;}
.hdr-slot .sprod[aria-current="page"] .sprod__here{display:inline-flex}
.hdr-slot .sprod__promise{font-size:var(--fs-caption);line-height:1.4;color:var(--text-caption)}
.hdr-slot .sheet__links{margin:0 0 24px;padding:0;list-style:none}
.hdr-slot .sheet__links a{display:flex;align-items:center;min-height:52px;
  font-size:var(--fs-h3);font-weight:600;color:var(--text-heading);text-decoration:none;
  border-bottom:1px solid var(--line);}
.hdr-slot .sheet__links a:hover{color:var(--accent)}
.hdr-slot .sheet__links a[aria-current="page"]{color:var(--accent)}
@media (max-width:1279px){.hdr-slot .hdr__nav{gap:20px}}
@media (max-width:1279px){.hdr-slot .hdr__cta{padding-inline:20px}}
@media (max-width:1099px){.hdr-slot .hdr{gap:12px;padding-right:8px}}
@media (max-width:1099px){.hdr-slot .hdr__nav,.hdr-slot .hshelf,.hdr-slot .hshelf[data-armed]{display:none}}
@media (max-width:1099px){.hdr-slot .hdr__cta{margin-left:auto}}
@media (max-width:1099px){.hdr-slot .burger{display:flex}}
@media (max-width:959px){.hdr-slot .hdr__cta{display:none}}
@media (max-width:959px){.hdr-slot .burger{margin-left:auto}}
@media (min-width:640px){.hdr-slot .sheet__prods{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.hdr-slot .sheet__cta{display:none}}
@media (max-width:767px){.hdr-slot{top:0;height:calc(12px + var(--hdr-h));padding-top:12px}}
@media (max-width:767px){.hdr-slot .hdr{padding-left:16px}}
@media (max-width:767px){.hdr-slot .sheet__in{margin-top:calc(24px + var(--hdr-h))}}
@media (max-width:767px){.hdr-slot .sheet{scroll-padding-top:calc(24px + var(--hdr-h))}}
@media (hover:none),(pointer:coarse){.hdr-slot .hshelf,.hdr-slot .hshelf[data-armed]{display:none}}
@media (prefers-reduced-motion:reduce){.hdr-slot .hdr,.hdr-slot .hdr__nav > a,.hdr-slot .hshelf,.hdr-slot .hshelf[data-open],.hdr-slot .hcard,.hdr-slot .burger span,.hdr-slot .burger span::before,.hdr-slot .burger span::after{transition:none}}
@media (prefers-reduced-motion:reduce){.hdr-slot .hshelf,.hdr-slot .hshelf[data-open]{transform:none}}
.hdr-slot .ftr__col a:not(.link-arrow){display:inline-flex;align-items:center;min-height:32px;color:var(--ink-2);text-decoration:none}
.hdr-slot .ftr__col a:not(.link-arrow):hover{color:var(--blue)}
@media (max-width:767px){.hdr-slot .ftr__col a:not(.link-arrow){min-height:44px}}