/* ВЕНДОРНАЯ КОПИЯ design-system/core.css студии website-crew.
   Источник: C:/Users/User/website-crew/design-system/core.css, снято 2026-09-10. Правки — ТАМ, сюда копируется.
   Здесь лежит копией, потому что кабинет «Сторно» не имеет права ходить за стилями во внешний CDN (CSP). */
/* ===========================================================================
   design-system/core.css — СТУДИЙНОЕ ЯДРО (примитивы + компоненты).
   Прогон: runs/premium-redesign/ (роль 5 · дизайн-директор, 09.09.2026).
   Формула арт-направления: СТРОГИЙ · ВОЗДУШНЫЙ · ТОЧНЫЙ.

   Что здесь есть: шкала отступов, радиусы, тени, типографическая шкала,
   моушн-токены, фокус-кольцо, плотность (тач ≥44px), состояния .btn/.card/
   .input/.link/.badge и обязательная светлая поверхность .surface-calc.

   Чего здесь НЕТ: ни одного брендового цвета и ни одной гарнитуры.
   Цвет и шрифт приходят из скина: design-system/skins/apex.css | alfa.css.

   Порядок подключения (нарушать нельзя):
     1) core.css   2) skins/<бренд>.css   3) site.css самого сайта

   🔴 ПРАВИЛО ПРИЁМКИ: ни одного hex, ни одного px-отступа/радиуса/длительности
   вне токенов. Появилось магическое значение — это баг, а не «мелочь».

   🔴 Игрику (sites/igrik) core.css НЕ подключается: у клиента свой источник
   правды assets/css/tokens.css. Из ядра туда переносятся точечно только
   правила плотности и состояний (блок «7. ПЛОТНОСТЬ И ДОСТУПНОСТЬ»),
   цвета не трогаются. Основание — research.md R12/F13.
   =========================================================================== */

/* ===========================================================================
   1. ПРИМИТИВЫ — не зависят от бренда
   =========================================================================== */
:root {
  /* --- 1.1 Шкала отступов. База 4px. Шаги 1–10 — канон спека §2.
         11–12 — продолжение для полноэкранных hero-паддингов. --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;
  --space-11:160px;
  --space-12:192px;

  /* --- 1.2 Вертикальный ритм секций: 64px моб → 112px деск.
         Проверка clamp: 375px → 24+30=54 → отсечка 64; 1100px → 112; дальше 112. --- */
  --section-y: clamp(4rem, 1.5rem + 8vw, 7rem);

  /* --- 1.3 Сетка и контейнеры --- */
  --container:        1140px;
  --container-wide:   1280px;
  --container-narrow:  720px;
  --gutter: var(--space-5);          /* 24px; на ≥768px → 32px, см. §8 */
  --grid-gap: var(--space-5);
  --grid-cols: 4;                    /* моб; 768 → 8; 1024 → 12 */

  /* --- 1.4 Радиусы (фиксированный набор, разнобой запрещён) --- */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-full: 999px;

  /* --- 1.5 Тени. Цвет тени задаёт скин (--shadow-1/--shadow-2). --- */
  --shadow-sm: 0 1px 2px var(--shadow-1), 0 2px 6px var(--shadow-2);
  --shadow-md: 0 2px 6px var(--shadow-1), 0 12px 32px -10px var(--shadow-2);

  /* --- 1.6 Типографическая шкала. Гарнитуры — слоты, значения в скине. --- */
  --font-display: system-ui, sans-serif;
  --font-text:    system-ui, sans-serif;
  --font-mono:    ui-monospace, monospace;

  --fs-display: clamp(2.25rem, 1.40rem + 3.2vw, 4rem);      /*  36 → 64 */
  --fs-h1:      clamp(1.875rem, 1.25rem + 2.4vw, 3rem);     /*  30 → 48 */
  --fs-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);    /*  24 → 36 */
  --fs-h3:      clamp(1.25rem, 1.10rem + 0.6vw, 1.5rem);    /*  20 → 24 */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);  /*  18 → 20 */
  --fs-body:    1.0625rem;                                   /*  17 */
  --fs-small:   0.9375rem;                                   /*  15 */
  --fs-caption: 0.8125rem;                                   /*  13 */
  --fs-num:     clamp(1.75rem, 1.30rem + 1.8vw, 2.5rem);    /*  28 → 40, только --font-mono */
  /* Кегль цены считается от ширины КОНТЕЙНЕРА, а не вьюпорта.
     Причина (QA 09.09.2026, находка B-2): в четырёхколоночной сетке тарифов
     карточка отдаёт под контент 184.5px, а «от 180 000 ₽» на 40px требует
     202.5px — «₽» и само число уезжали на отдельные строки.
     Вывод формулы (замер, JetBrains Mono, advance 0.6em):
       7 глифов × 0.6em + «от» 16px + два gap по 8px + «₽» 10.5px ≈ 4.2em + 42.5px.
     Влезает, пока 4.2em + 42.5px ≤ W → em ≤ 0.238·W − 10px; берём 22.5cqi − 0.6rem
     и никогда не крупнее --fs-num (на широкой карточке размер не меняется). */
  --fs-num-fit: min(var(--fs-num), 22.5cqi - 0.6rem);

  --lh-display: 1.05;
  --lh-head:    1.15;
  --lh-snug:    1.35;
  --lh-body:    1.60;
  --lh-num:     1.10;

  --tracking-tight: -0.02em;
  --tracking-flat:   0;
  --tracking-wide:   0.12em;   /* надзаголовки/оверлайны, только UPPERCASE */

  --measure:     66ch;         /* максимальная длина строки текста */
  --measure-sm:  52ch;

  /* --- 1.7 Моушн. Бюджет — 5 эффектов, список в README. --- */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out:        cubic-bezier(.2, .6, .2, 1);
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
  --lift-hover: -2px;          /* подъём карточки/кнопки */
  --press-active: 1px;         /* просадка при нажатии */

  /* --- 1.8 Фокус и плотность --- */
  --focus-w: 2px;
  --focus-offset: 2px;
  --control-h-sm: 44px;        /* 🔴 нижняя граница тач-таргета, меньше нельзя */
  --control-h:    48px;
  --control-h-lg: 56px;
  --border-w: 1px;

  /* --- 1.9 Слои --- */
  --z-base: 1;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 200;
}

/* ===========================================================================
   2. КОНТРАКТ СКИНА — какие переменные обязан объявить skins/*.css
      Значения ниже — НЕ дизайн, а серый диагностический фолбэк:
      увидели серо-стальной сайт — значит скин не подключён.
   =========================================================================== */
:root {
  /* поверхности */
  --color-bg:            #101214;
  --color-bg-alt:        #16191d;
  --color-surface-1:     #1c2025;
  --color-surface-2:     #23282e;
  --color-line:          #2b3138;   /* декоративные разделители */
  --color-line-strong:   #5a636d;   /* граница ИНТЕРАКТИВНОГО элемента, нужно ≥3:1 */

  /* текст */
  --color-text:          #f2f4f6;
  --color-text-muted:    #b3bbc4;
  --color-text-subtle:   #8b949e;

  /* действие — ровно один акцент на скин */
  --color-action:        #8b949e;
  --color-action-hover:  #a2abb4;
  --color-action-active: #79828c;
  --color-on-action:     #101214;
  --color-action-quiet:  rgba(139,148,158,.14);
  --action-fill:         var(--color-action);
  --action-fill-hover:   var(--color-action-hover);
  --action-fill-active:  var(--color-action-active);

  /* служебный цвет КАТЕГОРИИ/срочности.
     🔴 По умолчанию РАВЕН нейтральному: в скине с одним акцентом
     (apex) второго цвета не появляется. Отдельное значение задаёт
     только alfa — и только как гипотеза с датой пересмотра. */
  --color-category:      var(--color-text-subtle);
  --color-category-bg:   var(--color-surface-2);
  --color-on-category:   var(--color-text);

  /* ссылки и фокус */
  --color-link:          var(--color-text);
  --color-link-hover:    var(--color-text);
  --color-focus:         var(--color-text);

  /* семантика. 🔴 Цветом статус не передаётся никогда — только цвет + глиф/текст. */
  --color-success:       #4ade9e;
  --color-warn:          #f0b429;
  --color-error:         #ff6b6b;
  --color-success-bg:    rgba(74,222,158,.12);
  --color-warn-bg:       rgba(240,180,41,.12);
  --color-error-bg:      rgba(255,107,107,.12);

  /* выключенное состояние */
  --color-disabled-bg:   #1b2330;
  --color-disabled-text: #7b8a9e;

  /* тени */
  --shadow-1: rgba(0,0,0,.28);
  --shadow-2: rgba(0,0,0,.46);

  /* 🔴 2.1 СВЕТЛАЯ ПОВЕРХНОСТЬ «СЧИТАЕМОГО» — обязательна в КАЖДОМ скине.
     Правило R1 (research.md, находки F2/F3): любой блок с ценой, ставкой,
     сметой, образцом отчёта или таблицей цифр подаётся на светлом фоне
     независимо от темы сайта. Это НЕ переключатель темы (R10): дефолт
     видят все, переключают немногие. */
  --surface-light-bg:          #f6f7f5;
  --surface-light-surface:     #ffffff;
  --surface-light-text:        #14181e;
  --surface-light-muted:       #4a5462;
  --surface-light-line:        #e1e4df;
  --surface-light-line-strong: #7e847b;
  --surface-light-action:      #14181e;
  --surface-light-on-action:   #ffffff;
  --surface-light-success:     #1f7a4d;
  --surface-light-warn:        #8a5a00;
  --surface-light-error:       #b3261e;
}

/* ===========================================================================
   3. СБРОС И БАЗА
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--control-h-lg) + var(--space-4));
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 🔴 DS-2 (QA 10.09.2026): здесь стоял `overflow-x: hidden`. Снят: он не чинил
     переполнение, а прятал его — и заодно обесценивал пункт приёмки
     «scrollWidth == clientWidth», который проходил даже когда элементы реально
     вылезали (доказано на agency-promo: .hero-grid и .stage 333 > 327 на 375).
     Переполнения теперь чинятся в вёрстке; поэлементный замер обоих сайтов
     на 12 вьюпортах после снятия — 0. */
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
p  { max-width: var(--measure); text-wrap: pretty; }

/* ===========================================================================
   4. РАСКЛАДКА
   =========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

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

/* вертикальный ритм внутри блока: один способ вместо margin-разнобоя */
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack--tight  { --stack-gap: var(--space-2); }
.stack--loose  { --stack-gap: var(--space-6); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ===========================================================================
   5. ТИПОГРАФИЧЕСКИЕ УТИЛИТЫ
   =========================================================================== */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}
.lead    { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: var(--measure); }
.small   { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--color-text-subtle); }

.overline {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Цифры — всегда моно и табличные: колонки не «прыгают» при пересчёте.
   Мотив «считаемого» унаследован от business-apps (crew/07-design.md). */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--tracking-flat);
}
.num--big { font-size: var(--fs-num); line-height: var(--lh-num); font-weight: 600; }

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

/* ===========================================================================
   6. КОМПОНЕНТЫ — состояния перечислены явно у каждого
      default / hover / active / focus-visible / disabled (+ success / error у форм)
   =========================================================================== */

/* --- 6.1 КНОПКА ------------------------------------------------------------ */
.btn {
  /* default */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  min-width: var(--control-h-sm);
  padding: 0 var(--space-5);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background: var(--action-fill);
  color: var(--color-on-action);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    background-image var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover  { background: var(--action-fill-hover); transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-md); }
.btn:active { background: var(--action-fill-active); transform: translateY(var(--press-active)); box-shadow: none; }
.btn:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line-strong);
}
.btn--ghost:hover  { background: var(--color-action-quiet); border-color: var(--color-action); color: var(--color-text); }
.btn--ghost:active { background: var(--color-action-quiet); transform: translateY(var(--press-active)); }

.btn--quiet {
  background: transparent;
  color: var(--color-link);
  padding-inline: var(--space-3);
}
.btn--quiet:hover  { background: var(--color-action-quiet); box-shadow: none; transform: none; }
.btn--quiet:active { transform: translateY(var(--press-active)); }

.btn--sm { min-height: var(--control-h-sm); padding-inline: var(--space-4); font-size: var(--fs-caption); }
.btn--lg { min-height: var(--control-h-lg); padding-inline: var(--space-6); font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

/* --- 6.2 КАРТОЧКА ---------------------------------------------------------- */
.card {
  background: var(--color-surface-1);
  border: var(--border-w) solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card__title { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.card__text  { color: var(--color-text-muted); }

/* 🔴 hover есть ТОЛЬКО у кликабельной карточки. Ховер у некликабельной —
   ложное обещание интерактивности, находка QA прошлых прогонов. */
.card--link { display: block; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
/* Тень на ховере — только --shadow-sm: 1px-рамка вместе с широкой мягкой
   тенью даёт «призрачную карточку», по которой узнают сгенерированный
   интерфейс. Одно из двух, не оба. */
.card--link:hover  { border-color: var(--color-line-strong); transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-sm); }
.card--link:active { transform: translateY(var(--press-active)); box-shadow: var(--shadow-sm); }
.card--link:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); }
.card--link[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* --- 6.3 ФОРМА ------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--fs-small); font-weight: 600; }
.field__hint  { font-size: var(--fs-caption); color: var(--color-text-subtle); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--control-h-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  color: var(--color-text);
  border: var(--border-w) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.textarea { min-height: calc(var(--control-h-lg) * 2); resize: vertical; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-action); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-color: var(--color-action);
}
.input[disabled], .textarea[disabled], .select[disabled] {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: var(--color-line);
  cursor: not-allowed;
}

/* Статус поля: цвет + глиф + текст. Цвета одного здесь недостаточно. */
.field[data-status="error"]   .input,
.field[data-status="error"]   .textarea { border-color: var(--color-error); background: var(--color-error-bg); }
.field[data-status="success"] .input,
.field[data-status="success"] .textarea { border-color: var(--color-success); background: var(--color-success-bg); }

.field__message { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-caption); line-height: var(--lh-snug); }
.field__message::before { font-family: var(--font-mono); font-weight: 700; line-height: inherit; }
.field[data-status="error"]   .field__message { color: var(--color-error); }
.field[data-status="error"]   .field__message::before { content: "✕"; }
.field[data-status="success"] .field__message { color: var(--color-success); }
.field[data-status="success"] .field__message::before { content: "✓"; }
.field[data-status="warn"]    .field__message { color: var(--color-warn); }
.field[data-status="warn"]    .field__message::before { content: "!"; }

/* --- 6.4 ССЫЛКА ------------------------------------------------------------ */
.link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.link:hover  { color: var(--color-link-hover); text-decoration-thickness: 2px; }
.link:active { color: var(--color-action-active); }
.link:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); text-decoration: none; }
.link[aria-disabled="true"] { color: var(--color-disabled-text); pointer-events: none; text-decoration: none; }

/* --- 6.5 БЕЙДЖ / ЧИП ------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-6);
  padding: var(--space-1) var(--space-3);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-subtle);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* глиф статуса: смысл не должен зависеть от цвета */
.badge::before { font-family: var(--font-mono); font-weight: 700; }
.badge[data-status="success"] { background: var(--color-success-bg); color: var(--color-success); }
.badge[data-status="success"]::before { content: "✓"; }
.badge[data-status="warn"]    { background: var(--color-warn-bg); color: var(--color-warn); }
.badge[data-status="warn"]::before { content: "!"; }
.badge[data-status="error"]   { background: var(--color-error-bg); color: var(--color-error); }
.badge[data-status="error"]::before { content: "✕"; }
.badge[data-status="neutral"]::before { content: "•"; }

/* Категория/срочность — служебный цвет скина. В скине с одним акцентом
   он равен нейтральному, и второго цвета на странице не появляется. */
.badge--category { background: var(--color-category-bg); color: var(--color-category); }
.badge--category::before { content: "•"; }

/* Кликабельный чип (фильтр) — у него есть все состояния. */
.badge--action { cursor: pointer; min-height: var(--control-h-sm); padding-inline: var(--space-4); border-color: var(--color-line-strong); background: transparent; color: var(--color-text); }
.badge--action:hover  { background: var(--color-action-quiet); border-color: var(--color-action); }
.badge--action:active { transform: translateY(var(--press-active)); }
.badge--action:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); }
.badge--action[aria-pressed="true"] { background: var(--color-action-quiet); border-color: var(--color-action); color: var(--color-text); }
.badge--action[disabled] { color: var(--color-disabled-text); border-color: var(--color-line); cursor: not-allowed; }

/* --- 6.6 🔴 .surface-calc — СВЕТЛАЯ ПОВЕРХНОСТЬ «СЧИТАЕМОГО» ---------------
   Где обязательна: цена и её единица, ставка ₽/час, смета, состав работ,
   образец отчёта, любая таблица цифр, калькулятор.
   Основание: research.md R1 ← F2 («на тёмном красивее, честнее на белом» —
   светлый выбрала вся комната) + F3 (без единицы цены гадают, с ней считают).
   Механика: класс переопределяет локальные --color-*, поэтому вложенные
   .btn/.input/.badge автоматически берут светло-безопасные значения —
   роль 6 ничего не «докрашивает» руками. --- */
.surface-calc {
  --color-bg:            var(--surface-light-bg);
  --color-bg-alt:        var(--surface-light-bg);
  --color-surface-1:     var(--surface-light-surface);
  --color-surface-2:     var(--surface-light-bg);
  --color-line:          var(--surface-light-line);
  --color-line-strong:   var(--surface-light-line-strong);
  --color-text:          var(--surface-light-text);
  --color-text-muted:    var(--surface-light-muted);
  --color-text-subtle:   var(--surface-light-muted);
  --color-action:        var(--surface-light-action);
  --color-action-hover:  var(--surface-light-action);
  --color-action-active: var(--surface-light-action);
  --color-on-action:     var(--surface-light-on-action);
  --color-action-quiet:  rgba(20,24,30,.06);
  --action-fill:         var(--surface-light-action);
  --action-fill-hover:   var(--surface-light-action);
  --action-fill-active:  var(--surface-light-action);
  --color-link:          var(--surface-light-action);
  --color-link-hover:    var(--surface-light-action);
  --color-focus:         var(--surface-light-action);
  --color-category:      var(--surface-light-muted);
  --color-category-bg:   var(--surface-light-bg);
  --color-success:       var(--surface-light-success);
  --color-warn:          var(--surface-light-warn);
  --color-error:         var(--surface-light-error);
  --color-success-bg:    rgba(31,122,77,.10);
  --color-warn-bg:       rgba(138,90,0,.10);
  --color-error-bg:      rgba(179,38,30,.10);
  --color-disabled-bg:   #e8eae6;
  --color-disabled-text: #6c7469;
  --shadow-1: rgba(20,24,30,.06);
  --shadow-2: rgba(20,24,30,.10);

  background: var(--surface-light-bg);
  color: var(--surface-light-text);
  border: var(--border-w) solid var(--surface-light-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.surface-calc h1, .surface-calc h2, .surface-calc h3 { color: var(--surface-light-text); }
.surface-calc .lead, .surface-calc .card__text { color: var(--surface-light-muted); }

/* Цена: число + ОБЯЗАТЕЛЬНАЯ единица рядом (R2 ← F3). Без .price__unit
   верстать .price запрещено — это половина эффекта находки. */
.price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; container-type: inline-size; }
.price__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-num); line-height: var(--lh-num); font-weight: 600; white-space: nowrap; }
/* Фолбэк — выше по файлу (--fs-num, по вьюпорту): движок без container queries
   (Safari < 16, Firefox < 110) получает прежнее поведение, а не сломанную вёрстку. */
@supports (container-type: inline-size) {
  .price__value { font-size: var(--fs-num-fit); }
}
.price__unit  { font-size: var(--fs-small); color: var(--surface-light-muted); }
.price__sample { font-size: var(--fs-caption); color: var(--surface-light-muted); }

/* Таблица цифр внутри .surface-calc: моб — первый вьюпорт (R9 ← F18),
   поэтому на узком экране строки складываются, а не уезжают вбок. */
.calc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.calc-table th, .calc-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: var(--border-w) solid var(--surface-light-line); }
.calc-table td.is-num, .calc-table th.is-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- 6.7 БЛОК ДОВЕРИЯ ------------------------------------------------------
   Каркас под R4 ← F7: «часы приёма по местному времени · имя человека ·
   что происходит, когда его нет». Значения — из брифа клиента, не из головы. --- */
.trust { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trust__item  { display: grid; gap: var(--space-1); align-content: start; }
.trust__label { font-size: var(--fs-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
.trust__value { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--color-text); }
.trust__value.num, .trust__value--time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.trust__note  { font-size: var(--fs-small); color: var(--color-text-muted); max-width: var(--measure-sm); }

/* --- 6.8 ХЕДЕР / ФУТЕР ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* Фолбэк первым: Safari < 16.2 не знает color-mix() и без этой строки получил бы
     ПРОЗРАЧНУЮ липкую шапку поверх контента (находка QA m-10, 09.09.2026). */
  background: var(--color-bg);
  -webkit-backdrop-filter: blur(10px);   /* Safari ≤ 17 понимает только префиксную форму */
  backdrop-filter: blur(10px);
  border-bottom: var(--border-w) solid var(--color-line);
  transition: padding-block var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  padding-block: var(--space-4);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
}
.site-header[data-scrolled="true"] { padding-block: var(--space-2); border-color: var(--color-line-strong); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--control-h-sm); }
.site-header__nav { display: flex; gap: var(--space-5); }
.site-header__nav a { display: inline-flex; align-items: center; min-height: var(--control-h-sm); color: var(--color-text-muted); }
.site-header__nav a:hover { color: var(--color-text); }
.site-header__nav a[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-action); }
.site-header__nav a:focus-visible { outline: var(--focus-w) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }

.site-footer { background: var(--color-bg-alt); border-top: var(--border-w) solid var(--color-line); padding-block: var(--space-8) var(--space-5); }
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer__title { font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-3); }
.site-footer__legal { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-w) solid var(--color-line); font-size: var(--fs-caption); color: var(--color-text-subtle); }
.site-footer a:hover { color: var(--color-text); }

/* Ссылка «пропустить навигацию» — клавиатурный вход на каждой странице */
.skip-link { position: absolute; left: var(--space-4); top: calc(-1 * var(--control-h-lg) - var(--space-6)); z-index: var(--z-modal); background: var(--action-fill); color: var(--color-on-action); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); transition: top var(--dur-fast) var(--ease-out); }
.skip-link:focus { top: var(--space-4); }

/* ===========================================================================
   7. ПЛОТНОСТЬ И ДОСТУПНОСТЬ
      🔴 Это единственный блок, который переносится в sites/igrik точечно.
   =========================================================================== */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
/* Дефолтное кольцо гасим только там, где выставили своё */
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }

/* Тач-таргет: любой интерактив ≥44px по короткой стороне */
:where(button, [role="button"], summary, label[for], .btn) { min-height: var(--control-h-sm); }
/* Ссылки: тач-таргет только у навигационных/блочных (шапка, меню, подвал, карточки). Текстовая ссылка
   в абзаце остаётся inline — исключение WCAG 2.5.8. Раньше правило било ВСЕ a[href] и каждый сайт
   заводил своё исключение (agency-promo подвал, products блок ошибки формы) — 2-й случай, 10.09.2026. */
:where(header a[href], nav a[href], footer a[href], .site-header a[href], .site-footer a[href], .menu a[href], .mobile-menu a[href], .card > a[href]):not(.btn) { min-height: var(--control-h-sm); display: inline-flex; align-items: center; }

/* Пустое состояние: причина + выход. Отличается от загрузки (R12 п.3 ← F17). */
.empty-state { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-7) var(--space-5); border: var(--border-w) dashed var(--color-line-strong); border-radius: var(--radius-lg); color: var(--color-text-muted); }
.empty-state__title { font-size: var(--fs-h3); color: var(--color-text); }
.loading-state { display: grid; gap: var(--space-3); padding: var(--space-7) var(--space-5); border: var(--border-w) solid var(--color-line); border-radius: var(--radius-lg); color: var(--color-text-subtle); }
.loading-state::before { content: "…"; font-family: var(--font-mono); font-size: var(--fs-h2); line-height: 1; }

/* ===========================================================================
   8. БРЕЙКПОЙНТЫ. Мобильный — основной вьюпорт (R9 ← F18), поэтому
      правила пишутся снизу вверх: база = 375px, дальше расширения.
   =========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: var(--space-6); --grid-cols: 8; }
}
@media (min-width: 1024px) {
  :root { --grid-cols: 12; }
}

/* ===========================================================================
   9. БЮДЖЕТ ДВИЖЕНИЯ — 5 эффектов, полный список в README.
      Каждый обязан выключаться в prefers-reduced-motion.
   =========================================================================== */
/* 🔴 Контент по умолчанию ВИДЕН. Прятать его вправе только уже работающий
   JS (он ставит data-js="on" на <html>): иначе при отключённом скрипте,
   в headless-рендере и на фоновой вкладке секция уезжает в прод пустой. */
[data-reveal] { opacity: 1; transform: none; }
html[data-js="on"] [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized);
}
html[data-js="on"] [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --lift-hover: 0px;
    --press-active: 0px;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Печать: тёмные поверхности не печатаем, «считаемое» и так светлое.
   🔴 N-5 (QA 10.09.2026): сброса на `body` не хватало — цвета текста заданы
   на самих компонентах через var(), поэтому на бумаге оставался светло-серый
   по белому (.card p = 2.59:1, заголовки 1.15:1). Здесь — только структура
   печати; ЗНАЧЕНИЯ цвета переопределяет скин (`skins/apex.css`, блок @media print):
   его `:root` грузится ПОСЛЕ ядра и перебил бы любые токены, объявленные тут
   (проверено замером: с блоком в ядре .card p оставался #94A2B6). */
@media print {
  /* print-color-adjust наследуется: одной строки на body хватает, чтобы заливки
     печатались (иначе белый текст на плашке «Чаще выбирают» исчезал бы). Фоны
     поверхностей скин уже перевёл в белый — лишней краски это не даёт. */
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header, .skip-link { display: none; }
}