:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* first-screen-v4 */
.pg-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(48px,6vw,80px);
  
  min-height:clamp(460px,44vw,600px);
  display:flex;align-items:center;
}
.pg-hero__stage{position:absolute;inset:0;z-index:-1}
.pg-hero__scene{
  position:absolute;top:-8%;bottom:-8%;left:5%;right:-5%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,var(--mask-solid) 60%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 34%,var(--mask-solid) 60%);
}
.pg-hero__scene > canvas{position:absolute;inset:0;
  display:block;width:100%;height:100%}
.pg-hero__still{
  position:absolute;pointer-events:none;
  top:-8%;height:116%;left:33.5%;width:66.5%;
  object-fit:cover;object-position:left center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 8%,var(--mask-solid) 47%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 8%,var(--mask-solid) 47%);
}
.pg-hero--live .pg-hero__still{visibility:hidden}
.pg-hero__grid{position:relative}
.pg-hero__copy{min-width:0;max-width:580px}
.pg-prods{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:32px}
.pg-prod{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.pg-prod__mark{flex:none;width:40px;height:40px;border-radius:var(--r-md)}
.pg-prod__body{display:block;min-width:0}
.pg-prod__t{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--ink-2);line-height:1.25;
}
.pg-prod__t .ico{color:var(--blue);transition:transform var(--dur-micro) var(--ease-swap)}
.pg-prod:hover .pg-prod__t{color:var(--blue-site)}
.pg-prod:hover .pg-prod__t .ico{transform:translateX(3px)}
.pg-prod__d{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--muted-3)}
@media (prefers-reduced-motion:reduce){.pg-hero__scene{display:none}}
@media (max-width:1099px){.pg-hero{display:block}}
@media (max-width:1099px){.pg-hero__copy{max-width:none}}
@media (max-width:1099px){.pg-hero__stage{position:relative;inset:auto;
    width:min(100% - 2 * var(--pad), var(--wrap));aspect-ratio:1200 / 872;
    margin:clamp(20px,4vw,32px) auto 0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--mask-solid) 22%);
    mask-image:linear-gradient(90deg,transparent 0,var(--mask-solid) 22%)}}
@media (max-width:1099px){.pg-hero__still{top:0;left:0;width:100%;height:100%;
    -webkit-mask-image:none;mask-image:none}}
@media (max-width:1099px){.pg-hero__scene{top:0;bottom:0;left:-42.8%;right:auto;width:150.3%;
    -webkit-mask-image:none;mask-image:none}}
@media (max-width:767px){.pg-prods{gap:14px}}
/* hero-static */
.pg-hero__still{object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 47%),linear-gradient(180deg,transparent 7%,#000 13%,#000 87%,transparent 93%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 47%),linear-gradient(180deg,transparent 7%,#000 13%,#000 87%,transparent 93%);
  mask-composite:intersect}
@media (max-width:1099px){
  .pg-hero__stage{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent);
    mask-composite:intersect}
  .pg-hero__still{-webkit-mask-image:none;mask-image:none}
}
/* 01.10, продакт на широком экране: «контент узкий, выбивается ширина первого блока». Картинка
   была привязана к краям ОКНА — на 2560 тянулась от трети экрана до края, а панель обрезалась
   сверху и снизу. Теперь сцена — не шире 1400 по центру: правый край панели встаёт вровень
   с правым краем шапки (1280). До 1400 — как было. За правым краем картинка растворяется. */
@media (min-width:1100px){
  .pg-hero__stage{left:max(0px,calc(50% - 700px));right:max(0px,calc(50% - 700px))}
}
@media (min-width:1401px){
  .pg-hero__still{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 47%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 7%,#000 13%,#000 87%,transparent 93%);
    mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 47%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 7%,#000 13%,#000 87%,transparent 93%)}
}
.demo__stage{perspective:1400px;perspective-origin:50% 50%;align-self:center}
.demo__plane{
  /* Высота плоскости = снимок плюс свес карточек: карточки лежат
     абсолютом, и лишняя высота оставляла под визуалом пустой хвост. */
  position:relative;height:310px;
  transform-style:preserve-3d;
  transform:rotateY(-13deg) rotateX(4deg);
}
/* Окно в середине — снимок интерфейса. Шире своей колонки (436 против 300)
   и выходит в зазоры: так же, как в макете, где визуал лежит между рассказом
   и формой. max-width:none обязателен — общий сброс в base.css держит img
   на 100 % родителя, и снимок садился на 300 px колонки.
   Скругление и тень как у снимков в разделах (.split__shot): у настоящего
   скриншота край честный, растворять его маской, как рендер, незачем. */
.demo__win{
  /* Свес только в зазоры между колонками (по 20 px), ни одного пикселя
     на текст: при свесе в 66 px снимок ложился на вторую строку лида
     и на подписи списка. */
  position:absolute;left:-20px;top:40px;width:360px;max-width:none;height:auto;
  transform:translateZ(0);border-radius:var(--r-lg);
  box-shadow:0 2px 8px rgba(15,31,71,.07), 0 30px 62px -26px rgba(15,31,71,.32);
}

.demo__f{
  position:absolute;display:flex;align-items:center;gap:11px;
  padding:12px 14px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.97);border:1px solid var(--glass-solid-br);
  box-shadow:var(--glass-solid-sh);
}
/* Ширина карточек ограничена: без потолка «Ответы на вопросы по встречам»
   вытягивалась в 291 px и спорила с самим снимком. */
.demo__f{max-width:200px}
.demo__f p{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.25}
.demo__f--1{left:28px;top:6px;transform:translateZ(34px)}
.demo__f--2{left:146px;top:140px;transform:translateZ(46px)}
.demo__f--3{left:-14px;top:222px;transform:translateZ(34px)}
@media (prefers-reduced-motion:reduce){.demo__plane{transition:none}}
@media (max-width:1099px){.demo__stage{display:none}}

/* ── Настоящее меню и подвал (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}


/* ============================================================================
   НаВстрече — дизайн-токены.
   Источник: 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);
  --fs-hero-sub:clamp(22px,1.1rem + .8vw,28px);  /* подзаголовок первого экрана страницы продукта (D-33) */
  --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);    /* та же подложка при наведении, подсветка таба */
  --teal-text:#0b767c;                    /* текст бирюзовой метки: 4,8:1 на --tile-teal (было #0d7f85, 4,26) */
  --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}
/* На телефоне все шапки секций по левому краю: многострочный лид по центру
   читается хуже, и соседние экраны чередовали выравнивание (П3 списка
   заказчика 30.09, решение пользователя 02.10.2026). Лид секции-иллюстрации
   центрируется своим правилом (C-18), которое грузится позже (components.css),
   поэтому гашение на ступень специфичнее. */
@media (max-width:767px){
  .sec__head--center{margin-inline:0;text-align:left}
  .sec.sec--illo .sec__head--center .lead{margin-inline:0}
}
.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;
}
/* Не рвать строку: «15-летним» и подобное — число с дефисом переносилось
   после дефиса («с 15- / летним», D-28 на весь текст, № 9 списка
   заказчика 30.09) */
.nobr{white-space:nowrap}

/* ── Адаптив общего слоя ─────────────────────────────────────────────────
   Перенесено из 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:var(--teal-text)}
.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}

/* Карточка-вопрос: пример вопроса, строка с плиткой слева. Не элемент
   управления: ни наведения, ни значка «код» — кнопка, которая ничего
   не делает, читалась как недоделанное демо (№ 5 списка заказчика 30.09,
   решение пользователя 02.10.2026 — вариант «статичный список»). */
.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%;
}

/* Узел схемы «контекст в процессах» */
.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)}
/* Ниже 1100 схема идёт столбиком. Адресаты («Поручения», «Документы»,
   «Корпоративный ИИ») стояли вплотную — у их колонки не было зазора; на
   телефоне пункты полосы источников переносились как придётся: заголовок
   в строке с «ВКС», дальше по два и по одному (П2 списка заказчика 30.09). */
@media (max-width:1099px){
  .cx-col--out{display:grid;gap:12px}
}
@media (max-width:767px){
  .cx-srcs{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .cx-srcs__t{grid-column:1 / -1}
}

/* Сетка «текст слева — визуал справа». Жила в стилях главной
   (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}
}
/* От 1280 выступ плиты сохранён с обеих сторон, но вся схема сдвинута
   внутрь сетки на его ширину — за счёт колонки текста (430 → 406): плита
   и полоса источников кончаются на правом крае контента, как все остальные
   секции (П1 списка заказчика 30.09, решение пользователя 02.10.2026). */
@media (min-width:1280px){
  #context .split--wide{grid-template-columns:minmax(0,406px) 714px}
  .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}
}

/* ── C-20 · Точки ленты ────────────────────────────────────────────────────
   Под лентой, которая листается вбок со снапом: мишень 44, знак 8 px,
   текущая — пилюля 22 px в синем. Разметку собирает скрипт ленты:
   div.dots[role=group] > button.dots__b[aria-label][aria-current].
   Второе употребление — лента шаблонов на странице НаВстрече (№ 3 списка
   заказчика 30.09); первое — лента схем «Видеоточки» (D-37), переехало сюда. */
.dots{display:flex;justify-content:center;margin-top:4px}
.dots__b{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.dots__b::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--line-strong);
  transition:width var(--dur-fast) var(--ease-swap),background-color var(--dur-fast) var(--ease-swap)}
.dots__b[aria-current="true"]::before{width:22px;background:var(--accent)}
.dots__b:focus-visible{border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){ .dots__b::before{transition:none} }


/* ============================================================================
   НаВстрече — шапка, мобильная шторка и подвал. Общие для всех страниц.
   Перенесено из блоков «раскладка секций» и «адаптив» главной 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}

/* ── Плитка знака продукта ──────────────────────────────────────────────── */
/* Осталась от редакции 2: в строке шапки продуктов больше нет (D-44),
   но карточки шторки показывают знак в плитке — там он стоит внутри
   карточки продукта, а не рядом со знаком компании. */
.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}

/* ── Компания: разделы и призыв ─────────────────────────────────────────── */
.hdr__nav{display:flex;align-items:center;gap:24px;margin-left:auto}
/* Только прямые дети: полка живёт внутри ряда (ради порядка обхода Tab),
   и без > её карточки-ссылки попадали под правила пункта меню — inline-flex
   поверх сетки и nowrap, отчего полка вырастала с 271 до 506 px. */
.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}
/* Вход в развилку продуктов отличается от разделов компании весом и цветом
   текста, а не знаком: второго фирменного знака в строке нет (D-44). */
.hdr__prodlink{font-weight:600;color:var(--text-heading)}
.hdr__prodlink:hover{color:var(--accent)}
.hdr__cta{flex:none}
.hdr__cta-s{display:none}
/* Ряд разделов — по центру полосы, а не прижат к призыву (замечание
   заказчика 04.10.2026). Флексом этого не сделать честно: при знаке 118 px
   слева и призыве 215 px справа ряд уезжает влево на 48 px. Поэтому от 1100,
   где ряд вообще виден, полоса становится сеткой из трёх колонок: знак,
   центр, призыв — центральная колонка стоит по середине полосы независимо
   от того, насколько разной ширины её соседи. Ниже 1100 ряд уходит в шторку,
   и полоса остаётся флексом с прежними уступками. */
@media (min-width:1100px){
  .hdr{display:grid;grid-template-columns:1fr auto 1fr}
  .hdr__co{justify-self:start}
  .hdr__nav{margin-left:0;justify-self:center}
  .hdr__cta{justify-self:end}
}

/* ── Полка продуктов (D-45, вариант 1 стенда design/ds-stands/hdr-peek/) ──
   Раскрывается под полосой по наведению на «Продукты» или по фокусу в ряду.
   Во всю ширину полосы: два продукта рядом, одинаковой ширины — в строке
   они равны, и в полке тоже. Фон непрозрачный: полка ложится на заголовок
   первого экрана, сквозь стекло (.86) он читался под её текстом. Тень
   уровня 2 — та же, что у стекла шапки. Мостик ::before закрывает зазор
   8 px, чтобы курсор не ронял полку по дороге вниз.
   Полки нет в раскладке, пока не взведена (data-armed, site.js): до этого
   её ленивые снимки (22 и 3 КБ) не грузятся. */
.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);
}
.hshelf[data-armed]{display:grid}
.hshelf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
.hshelf[data-open]{opacity:1;transform:translateY(0)}
.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);
}
.hcard:hover{background:var(--surface-sunken)}
.hcard[aria-current="page"]{background:var(--accent-wash)}
.hcard__img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);display:block}
.hcard__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:4px 4px 4px 0}
.hcard__k{font-size:var(--fs-label);font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hcard__n{margin-top:4px;font-size:var(--fs-h3);font-weight:600;line-height:1.25;color:var(--text-heading)}
.hcard__p{margin-top:6px;font-size:var(--fs-card);line-height:1.45;color:var(--text-body)}
.hcard__pts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.hcard__pt{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-caption);line-height:1.4;color:var(--text-caption)}
.hcard__pt .ico{margin-top:1px;color:var(--accent)}
.hcard__go{margin-top:12px}
.hcard:hover .hcard__go{color:var(--accent-hover)}

/* ── Бургер (≤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)}

/* ── Шторка (≤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}
  /* Ряд разделов уходит в шторку, а вместе с ним и полка: вход в продукты
     здесь — карточки шторки, те же снимок, имя и обещание. */
  .hdr__nav,.hshelf,.hshelf[data-armed]{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}
  .sheet__in{margin-top:calc(24px + var(--hdr-h))}
  .sheet{scroll-padding-top:calc(24px + var(--hdr-h))}
}
/* Полка — только там, где есть наведение; на касании «Продукты» сразу ведут
   на развилку первого экрана. */
@media (hover:none),(pointer:coarse){
  .hshelf,.hshelf[data-armed]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hdr,.hdr__nav > a,.hshelf,.hshelf[data-open],.hcard,
  .burger span,.burger span::before,.burger span::after{transition:none}
  .hshelf,.hshelf[data-open]{transform:none}
}

/* ── Подвал ────────────────────────────────────────────────────────────────
   Вариант A, выбран пользователем 2026-09-19: светлый, на полотне страницы,
   отделён линией — меньше всего спорит с призывом над ним. */
.ftr{position:relative;z-index:1;margin-top:8px;font-size:14px;line-height:1.5}
/* Ширина — как у .wrap секций: поле снаружи, а не внутри 1200. С полем
   внутри текст подвала начинался на 24 px правее контента страницы
   (№ 10 списка заказчика 30.09). На телефоне ширина та же, что была. */
.ftr__in{width:min(100% - 2 * var(--pad),var(--wrap));margin-inline:auto}
.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}

  /* Спарклайн сигнала прочерчивается при появлении карточки.
     Длину задаёт home.js — без неё dasharray был бы на глаз.
     Базовое состояние — график виден. Прячет его только метка
     html[data-spark], которую ставит тот же скрипт, что потом отмечает
     карточку .is-in: не сработал скрипт — график просто стоит, а не пропадает
     (№ 12 списка заказчика 30.09). */
  .spark__line{
    stroke-dasharray:var(--len,300);stroke-dashoffset:0;
    transition:stroke-dashoffset var(--dur-slow) var(--ease-entrance);
  }
  .spark__area{opacity:.16;transition:opacity var(--dur-slow) var(--ease-entrance) 160ms}
  :root[data-spark] .sig:not(.is-in) .spark__line{stroke-dashoffset:var(--len,300)}
  :root[data-spark] .sig:not(.is-in) .spark__area{opacity:0}

  /* Соединители схемы прорисовываются при первом показе панели */
  .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}


/* ============================================================================
   Компанийная главная. Собирается по макетам ~/Downloads/Главная (3)/Main_1…6,
   решение пользователя 2026-09-25.

   Почему файл называется main, а не home: слаг home уже занят — его носит
   страница продукта (produkt.html, data-page="home"), и два файла с одним
   слагом путают линтер, сверку текста и сверку с главной. Имя страницы
   не связано с тем, какая из них когда-нибудь станет produkt.html.

   Блоки страницы носят префикс pg- (правило L4). Всё, что уже есть в общем
   слое — карточки, чипы, кнопки, поля, плитки под иконками, лента логотипов —
   берётся оттуда и здесь не переопределяется.
   ========================================================================= */

/* ── S-1 · Первый экран: развилка двух продуктов ─────────────────────────
   D-44, стенд design/ds-stands/hero-v1/. Вверху общий заголовок о задаче,
   под ним две равные колонки: снимок работы продукта, имя со стрелкой,
   строка о деле. Колонка целиком — ссылка, поэтому отдельной кнопки в ней
   нет: иначе в экране оказалось бы два призыва при одном разрешённом.
   Приём взят у R-35 (Jack & Jill), подпись продукта работой — у R-34 (Zoom).

   Скругления у секции нет: она во всю ширину окна, и радиус у края экрана
   читался как обрезанная плашка (F-11 приёмки, круг 1). */
/* Поля — кратные четырём: clamp давал дробные 57,6 и 30,72, а шкала
   отступов этого не допускает (D-12). */
.pg-fork{padding-block:40px 48px}
@media (min-width:1100px){ .pg-fork{padding-block:56px 64px} }
/* Заголовок и лид — готовые компоненты C-12 и C-01, свои кегли не заводим:
   у .hero__title на ≤767 своя ступень 31, а голый --fs-h1 давал 32 вне шкалы. */
.pg-fork__top{max-width:62ch}
.pg-fork__h{margin:0;text-wrap:balance}
/* Лид первого экрана у C-01 уже, чем нужно развилке: под заголовком в 62ch
   он ломался на три коротких строки. Ширину держит .pg-fork__top. */
.pg-fork__lead{margin:16px 0 0;max-width:none}
.pg-fork__cta{margin-top:24px}

/* Две равные колонки. Зазор — общий шаг сетки страницы. */
.pg-fork__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-grid);margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none}

/* Колонка — одна большая ссылка. Приподнимается и светлеет рамкой, как
   карточки страницы (C-07), своей тени не изобретаем. */
.pg-fork__col{display:flex;flex-direction:column;height:100%;
  padding:var(--pad-card);border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line-3);box-shadow:var(--sh-card);
  text-decoration:none;color:inherit;
  transition:transform var(--dur-fast) var(--ease-entrance),
             box-shadow var(--dur-fast) var(--ease-entrance),
             border-color var(--dur-fast) var(--ease-entrance)}
.pg-fork__col:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--line-2)}
.pg-fork__col:focus-visible{transform:translateY(-4px);box-shadow:var(--sh-lift)}

/* Снимок работы продукта: пропорция одна у обеих колонок, кадр обрезается
   по центру. Разные исходники (1536×1024 и 676×248) иначе дали бы колонки
   разной высоты, а развилка держится на их равенстве. */
.pg-fork__shot{display:block;border-radius:var(--r-illo);overflow:hidden;
  border:1px solid var(--line-3);box-shadow:var(--sh-media)}
.pg-fork__shot img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}

.pg-fork__name{display:flex;align-items:center;gap:8px;margin-top:20px;
  font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;color:var(--text-heading)}
.pg-fork__arr{flex:none;color:var(--accent-text);
  transition:transform var(--dur-micro) var(--ease-swap)}
.pg-fork__col:hover .pg-fork__arr{transform:translateX(3px)}
.pg-fork__d{margin-top:6px;font-size:var(--fs-body);line-height:1.5;color:var(--text-body)}

@media (max-width:767px){
  /* Колонки встают друг под друга — и ложатся набок, как карточки продуктов
     в шторке шапки (C-09). Вертикальными они не помещались в первый кадр:
     в окне 390×844 имя второго продукта уходило на 58 px за сгиб, а снимок
     обрезался, то есть «продуктов два» на телефоне было не видно без
     прокрутки — ровно то, ради чего развилка и делалась (приёмка D-44,
     круг 1). Сниженная пропорция снимка (21/9) этого не спасала. */
  .pg-fork__cols{grid-template-columns:minmax(0,1fr);gap:12px}
  .pg-fork__col{display:grid;grid-template-columns:96px minmax(0,1fr);
    column-gap:16px;align-content:center;padding:12px}
  /* Рамка снимка занимает оба ряда, но по высоте равна самой картинке:
     без align-self она растягивалась под более высокую карточку (у «НаВстрече»
     строка о деле переносится на две), и под миниатюрой оставалось пустое
     поле внутри рамки — 18 px на 390 (приёмка D-44, круг 2). */
  .pg-fork__shot{grid-row:1 / 3;align-self:center}
  .pg-fork__shot img{aspect-ratio:3 / 2}
  .pg-fork__name{margin-top:0;align-self:end}
  .pg-fork__d{align-self:start}
  .pg-fork__col:hover,.pg-fork__col:focus-visible{transform:none}
}

/* ── S-3 · Схема трёх кругов — общая секция-иллюстрация C-18
   (components.css, D-22 А). */

/* ── S-4 · Одна задача. Два продукта ─────────────────────────────────────
   Карточки идут парой во всю ширину сетки, заголовок стоит над ними
   общим .sec__head — как в одноимённой секции страницы продукта.
   В макете заголовок стоял слева отдельной колонкой; пользователь
   попросил вынести его наверх, и обе секции с карточками (S-4 и S-6)
   перестроены одинаково. */
.pg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-grid);align-items:stretch}
.pg-card{padding:var(--pad-card);display:flex;flex-direction:column}
.pg-card__head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.pg-card__mark{flex:none;width:48px;height:48px;border-radius:var(--r-lg)}
/* Роль h3 (D-06 А): 20 на десктопе, мельче на узких; 22 из макета
   на телефоне почти равнялось заголовку секции (F-06). */
.pg-card__t{font-size:var(--fs-h3);letter-spacing:-.02em}
.pg-card__d{margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted-3)}
/* Пропорции у двух снимков разные: интерфейс почти квадратный, съёмка
   переговорной — широкая полоса. Общая рамка и object-fit приводят их
   к одному кадру, иначе карточки разъезжаются по высоте. */
.pg-card__shot{width:100%;height:190px;object-fit:cover;object-position:top;
  border-radius:var(--r-md);border:1px solid var(--line-2);box-shadow:var(--sh-card)}
.pg-feats{display:grid;gap:12px;margin:20px 0 22px}
.pg-feats li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.35;color:var(--ink-2)}
.pg-feats .icon-tile{flex:none}
/* Вторая кнопка по ширине своего текста и без стрелки: стрелка внутри
   кнопки на сайте запрещена (C-05, решение Р-1 А), а во всю ширину кнопка
   растягивается только на телефоне (F-02). */
.pg-card__more{margin-top:auto;align-self:flex-start}

@media (max-width:767px){
  .pg-two{grid-template-columns:minmax(0,1fr)}
  /* Снимки в общем кадре и на телефоне: иначе снимок интерфейса выходил
     почти вдвое выше съёмки переговорной (196 против 109 px на 375). */
  .pg-card__shot{height:auto;aspect-ratio:16 / 10}
  .pg-card__more{align-self:stretch}
}
@media (max-width:639px){
  /* Поле карточки на телефоне 16, как у карточек главной
     (ds/tokens-rules.md §5; F-07). */
  .pg-card{padding:16px}
}

/* ── S-6 · Ваш контур или облако ─────────────────────────────────────────
   Та же раскладка, что у «Двух продуктов»: заголовок над карточками,
   карточки парой. Полоса про реестр идёт под ними во всю ширину. */
/* Полоса про реестр — общая C-03 (.strip.strip--three): фон, радиус, поле,
   плитка 38 и кегль те же, что у полос главной. Своего здесь два пункта
   вместо трёх и место во всю ширину сетки карточек. Раньше полоса была
   собрана отдельно и стала третьим видом полосы на сайте (F-09).
   Варианта на два пункта в общем слое нет — это первое его употребление. */
.pg-reg{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid)}
@media (max-width:767px){
  .pg-reg{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* ── S-7 · Покажем систему на вашем сценарии ─────────────────────────────
   Секция — общий компонент C-16 (.demo): сетка 420 + 340 + 400, рассказ,
   список, контакты и форма те же, что на главной. Копия .pg-demo/.pg-form
   снята — она разошлась с главной (F-03 приёмки, круг 1).
   Своё здесь два: картинка в средней колонке и пункты списка в одну строку
   (на главной у пунктов есть пояснение, здесь, как в макете, — нет). */
.pg-demo-short li{align-items:center}

/* Центральный визуал — сгенерированная иллюстрация по эталону
   design/refs/nv-demo-visual-target.png (решение пользователя, вариант
   demo-stage-1). Выровнена по центру ряда, как визуал главной.
   Маска по краям: фон иллюстрации светлее полотна на пару единиц, и без
   неё по периметру виден прямоугольник кадра. Иллюстрация чуть шире своей
   колонки (340 из 1200) и выходит в зазоры сетки — это безопасно ровно
   потому, что края растворены, а курсор она не перехватывает. */
.pg-demo__stage{min-width:0;margin:0;align-self:center}
.pg-demo__illo{display:block;width:114%;margin-inline:-7%;height:auto;pointer-events:none;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%,var(--mask-solid) 78%,transparent 100%);
  mask-image:radial-gradient(72% 72% at 50% 50%,var(--mask-solid) 78%,transparent 100%)}
@media (max-width:1099px){
  .pg-demo__stage{display:none}
}

/* ── S-5 · Контекст встреч ───────────────────────────────────────────────
   Та же секция, что на главной: общая сетка .split.split--wide и схема C-14.
   Своей сетки .pg-ctx больше нет — она разошлась с главной: края плиты
   и полосы не совпадали на 30 px, на планшете схема сжималась вдвое,
   на 1100–1199 лид выходил в 130 знаков (F-01 приёмки, круг 1). */

/* ── S-3 · Одна встреча. История встреч. Вся картина ──────────────────────
   Ниже 960 схема — не лента, которую нужно угадать и листать (видна была
   четверть, «Одна встреча»), а три уровня друг под другом, между ними
   стрелки из спрайта (№ 1 списка заказчика 30.09, решение пользователя
   02.10.2026 — вариант «столбиком»). Кадры вырезаны из d36a3fcf.png без
   масштаба: d36a3fcf-1…3.webp — три кадра той же картинки в сборке стоили
   бы ещё 5 МБ. Цельная картинка на узкой ширине скрыта визуально, но
   остаётся для чтения с экрана — у кадров alt пустой. */
.pg-lvls{display:none}
@media (max-width:959px){
  #picture .illo{overflow:visible;margin-inline:0;border-radius:0}
  #picture .illo__img{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  /* Потолок 520: на планшете кадры во всю ширину (720) раздували первый
     уровень в 1,6 раза и вытягивали секцию до 2500 px. От 768 столбик
     по центру, как шапка; до 767 — от левого края, как шапка по П3 (N-05). */
  .pg-lvls{display:grid;justify-items:center;gap:4px;max-width:520px;margin-inline:auto}
  .pg-lvl{display:block;width:100%;height:auto;border-radius:var(--r-illo)}
  .pg-lvls__arr{width:22px;height:22px;margin-block:2px;color:var(--blue);transform:rotate(90deg)}
}
@media (max-width:767px){
  .pg-lvls{margin-inline:0}
}