:root {
  /* ── Цвет ───────────────────────────────────────────────────────────────
     Единая фирменная палитра: золото и изумруд. Заменяет две расходившиеся
     схемы — бирюзу WWW (H=174°, это не изумруд) и teal workspace (H=163°).
     Изумруд взят на H=158° — канонический диапазон 140–160°.
     Каждый текстовый токен проверен на контраст WCAG AA (≥4.5) на всех трёх
     поверхностях; токены -soft декоративные, порог 3.0. Расчёт и проверка:
     tools/palette-dark.json, tools/palette-light.json.                    */
  --color-canvas: #030807;
  --color-panel: #0b1715;
  --color-panel-strong: #102821;
  --color-text: #f3f7ef;
  --color-muted: #9fb2aa;
  --color-text-soft: #c9d4d0;
  --color-faint: #8a9e99;
  --color-gold: #eab04a;
  --color-gold-soft: #f6cf78;
  --color-gold-deep: #c8881f;
  --color-emerald: #54d4a5;
  --color-emerald-soft: #90dfc2;
  --color-emerald-deep: #286752;
  --color-border: #285343;
  --color-deep: #0c3123;
  --color-green: #34b268;
  --color-border-bright: var(--color-emerald);
  --rgb-border: 40 83 67;
  --rgb-deep: 12 49 35;
  --rgb-green: 52 178 104;
  --color-error: #e5706b;
  --color-success: #6ec98a;
  --color-marker-gtm: #f0a35e;
  --rgb-marker-gtm: 240 163 94;

  --rgb-canvas: 3 8 7;
  --rgb-panel: 11 23 21;
  --rgb-panel-strong: 16 40 33;
  --rgb-text: 243 247 239;
  --rgb-muted: 159 178 170;
  --rgb-gold: 234 176 74;
  --rgb-gold-deep: 200 136 31;
  /* ── Тёплое золотое свечение ───────────────────────────────────────────
     Одна лестница на весь сайт: покой → наведение → активное состояние.
     Каждая ступень из двух слоёв: широкий светлый ореол на --rgb-gold и
     плотное тёплое ядро под элементом на --rgb-gold-deep. Один плоский
     цвет читается наклейкой, два слоя дают глубину.

     Плашки со срезанным углом построены на clip-path, а он обрезает
     box-shadow — поэтому те же три ступени продублированы как
     drop-shadow. Параметра растяжения у drop-shadow нет, радиусы там
     свои.                                                              */
  --glow-rest: 0 0 20px -6px rgba(var(--rgb-gold) / .20),
    0 10px 26px -16px rgba(var(--rgb-gold-deep) / .45);
  --glow-hover: 0 0 30px -6px rgba(var(--rgb-gold) / .36),
    0 14px 32px -16px rgba(var(--rgb-gold-deep) / .60);
  --glow-active: 0 0 38px -6px rgba(var(--rgb-gold) / .50),
    0 16px 36px -16px rgba(var(--rgb-gold-deep) / .72);
  --drop-rest: drop-shadow(0 0 18px rgba(var(--rgb-gold) / .10));
  --drop-hover: drop-shadow(0 0 26px rgba(var(--rgb-gold) / .22));
  --drop-active: drop-shadow(0 0 24px rgba(var(--rgb-gold) / .28));
  --rgb-emerald: 84 212 165;

  /* ── Типографика — перенесена дословно, пропорции выверены ───────────── */
  --font-wordmark-owl: "Montserrat", "Arial Black", Arial, sans-serif;
  --font-wordmark: "Montserrat", "Arial Black", Arial, sans-serif;
  --font-display: "Montserrat", Arial, sans-serif;
  --font-accent: "Montserrat", Arial, sans-serif;
  --font-body: "Manrope", "Inter", Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  /* Арабица и иероглифы: Montserrat не покрывает ни то, ни другое.        */
  --font-arabic: "Noto Sans Arabic", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --type-display: clamp(44px, 6.8vw, 92px);
  --type-h1: clamp(34px, 5vw, 64px);
  --type-h2: clamp(28px, 3.8vw, 44px);
  --type-h3: 22px;
  --type-lead: 20px;
  --type-body: 16px;
  --type-small: 14px;
  --type-caption: 12px;

  /* ── Отступы: шаг 4px, перенесены дословно ───────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Сетка: 12 колонок, желоб 24px ───────────────────────────────────────
     Полоса контента 1180px = 12 колонок по 74px + 11 желобов по 24px.
     Проверка: 12×74 + 11×24 = 888 + 264 = 1152, плюс поля 2×14 = 1180.     */
  --grid-columns: 12;
  --grid-gutter: var(--space-6);
  --grid-column: 74px;
  --grid-margin: 14px;

  /* ── Радиусы и срез угла ─────────────────────────────────────────────────
     --cut перенесён из workspace: фирменный срезанный угол карточек,
     реализуется через clip-path на паре .frame / .frame-in.               */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --cut: 16px;

  --page-max: 1180px;
  --hero-max: 1400px;
  --header-height: 76px;

  /* ── Роли, которых не было ───────────────────────────────────────────────
     Светлая тема заставила развести то, что в тёмной случайно совпадало.
     Главное разведение — акцент как ЧЕРНИЛА и акцент как ЗАЛИВКА. На
     чёрном это один и тот же жёлтый, поэтому разницы не было видно; на
     белом чернила обязаны быть тёмными, а заливка обязана остаться
     золотой, иначе кнопка становится коричневой.                        */
  --fill-gold-top: #f6cf78;
  --fill-gold: #eab04a;
  --fill-gold-deep: #c8881f;
  --fill-gold-edge: #a8721a;
  --fill-gold-ink: #20150a;
  --rgb-fill-gold: 234 176 74;
  --fill-emerald: #54d4a5;
  --btn-sheen: rgba(255,255,255,.45);
  --btn-divider: rgba(32,21,10,.42);

  /* Поверхности второго плана. Шесть мест писали var(--tint-plate) —
     «осветлить, чтобы отделить». На светлом фоне осветлять нечего, там
     нужно затонировать; направление подсветки стало токеном.            */
  --tint-plate: rgba(255,255,255,.03);
  --color-sunken: #071310;
  --color-surface-quiet: #0e1a18;
  --color-surface-quiet-hover: #132320;
  --surface-notice: rgba(234 176 74 / .10);

  /* Линии. Волосяная — разделитель внутри блока, border — граница
     самостоятельного объекта, control-edge — кромка управляемого поля. */
  --color-hairline: rgba(243 247 239 / .09);
  --color-control-edge: rgba(243 247 239 / .18);
  --color-focus: #54d4a5;

  /* Состояния: чернила отдельно от подложки. Раньше и то и другое брали
     из -soft, и на светлом фоне подложка съедала текст.                 */
  --rgb-error: 229 112 107;
  --color-error-ink: #f2cfc9;
  --surface-err: rgba(229 112 107 / .12);
  --rgb-success: 110 201 138;
  --color-success-ink: #90dfc2;
  --surface-ok: rgba(84 212 165 / .10);
  --badge-ready-ink: #90dfc2;
  --badge-ready-bg: rgba(84 212 165 / .10);
  --badge-work-ink: #f6cf78;
  --badge-work-bg: rgba(234 176 74 / .08);
  --badge-wait-ink: #f0a35e;
  --badge-wait-bg: rgba(240 163 94 / .12);
  --badge-check-ink: #54d4a5;
  --badge-check-bg: rgba(84 212 165 / .07);

  /* Материал. В тёмной теме глубина это свечение, в светлой — тень и
     плоскость; оба описаны одними именами, поэтому компоненты об этом
     не знают.                                                          */
  --shadow-overlay: 0 18px 50px -12px rgba(0,0,0,.6);
  --inset-well: inset 0 1px 2px rgba(0,0,0,.35);
  --text-glow: 0 0 18px rgba(var(--rgb-gold) / .55);
  --scroll-thumb: #285343;
  --logo-filter: grayscale(1) brightness(1.45) opacity(.78);
  --page-grid: rgba(243 247 239 / .03);
  --page-wash: none;
  --on-globe: var(--color-muted);
  --surface-overlay: rgba(var(--rgb-panel) / .99);
  --map-idle: #10201c;
  --map-line: rgba(var(--rgb-emerald) / .34);
  --map-hover: #17332c;
  --map-active: #1d4438;
  --map-city: rgba(var(--rgb-gold) / .16);
  --map-occupied: #33393a;
  --map-occupied-line: #4a5254;
  --surface-globe: transparent;
  --globe-bezel: rgba(var(--rgb-emerald) / .16);

  /* Рамка карточки со срезанным углом — теперь токен, а не правило:
     светлая тема пишет в неё другой градиент, .frame не меняется.      */
  --frame-edge: linear-gradient(165deg,rgba(var(--rgb-gold) / .34),rgba(var(--rgb-gold) / .06) 42%,rgba(var(--rgb-emerald) / .14));
  --frame-edge-hover: linear-gradient(165deg,rgba(var(--rgb-gold) / .62),rgba(var(--rgb-gold) / .14) 45%,rgba(var(--rgb-emerald) / .25));
  --frame-fill: radial-gradient(120% 90% at 88% 0%,rgba(var(--rgb-gold) / .07),transparent 58%),linear-gradient(170deg,var(--color-panel-strong),var(--color-canvas) 62%,var(--color-panel));
  --frame-fill-hover: radial-gradient(120% 90% at 88% 0%,rgba(var(--rgb-gold) / .13),transparent 62%),linear-gradient(170deg,var(--color-panel-strong),var(--color-canvas) 62%,var(--color-panel));

  color-scheme: dark;

  /* Полоса стадии. В тёмной теме это те же цвета, что были у неё
     до вынесения в токены: изменение чисто структурное. */
  --bar-track: rgba(255,255,255,.06);
  --bar-fill: var(--color-emerald);
}

/* ══════════════════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА — «галерейный свет»

   Тёмная тема это ночь: объекты светятся сами. Светлая — галерея:
   свет падает сверху, объект им освещён и кладёт короткую тень, а
   фирменный цвет живёт в теле объекта, а не в ореоле вокруг.

   Отсюда единственное структурное решение, из которого выведено всё
   остальное: акцент расщеплён на чернила и заливку. Раньше один
   --color-gold обслуживал обе роли, и на белом фоне он обязан был
   потемнеть до #94600a ради читаемости текста — а вместе с текстом
   темнела и кнопка, превращаясь в коричневую плашку.

   Тема включается атрибутом на <html>, а не классом на <body>:
   скрипт читает токены с корня, и до этого переноса глобус и графики
   в светлом кабинете брали цвета из тёмной палитры.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* ПАЛИТРА СВЕТЛОЙ ТЕМЫ — Slate + Teal.
     Первая версия строилась инверсией тёмной: золото становилось охрой,
     изумруд — тёмно-зелёным контуром, и на белом это читалось как
     выцветшая горчица и чертёж. Здесь другой принцип: нейтральная
     подложка Slate несёт всю структуру, а единственный цвет — тил, и он
     достаётся только тому, на что надо нажать.

     Три числа, из-за которых палитра отличается от присланной:
     • белый на Teal 600 (#0D9488) даёт 3.74:1 — для текста кнопки мало,
       поэтому заливка кнопки Teal 700 (#0F766E, 5.47:1), а Teal 600
       остался наведением и тонкими акцентами;
     • подписи капсом на Slate 400 дают 2.56:1 — нечитаемо; взят
       Slate 500 (4.76:1), разница в тоне почти незаметна;
     • заполнение полосы Emerald 500 против трека Slate 100 — 2.32:1,
       для смысловой графики мало; полоса красится тем же Teal 700 (5.0:1). */

  /* Поверхности: стена Slate 50, лист белый, поднятый лист — тоже белый,
     но с тенью. Объём даёт тень, а не разница тонов. */
  --color-canvas: #f8fafc;
  --rgb-canvas: 248 250 252;
  --color-panel: #ffffff;
  --rgb-panel: 255 255 255;
  --color-panel-strong: #ffffff;
  --rgb-panel-strong: 255 255 255;
  --color-deep: #f1f5f9;
  --rgb-deep: 241 245 249;
  --color-sunken: #f1f5f9;
  --color-surface-quiet: #f8fafc;
  --color-surface-quiet-hover: #f1f5f9;
  --tint-plate: rgba(15,23,42,.05);
  --surface-notice: #fffbeb;

  /* Текст: три уровня, и ни одного ниже порога читаемости. */
  --color-text: #0f172a;
  --rgb-text: 15 23 42;
  --color-text-soft: #334155;
  --color-muted: #475569;
  --rgb-muted: 71 85 105;
  --color-faint: #64748b;

  /* Акцент как чернила. Тил — фирменный и достаточно тёмный, чтобы им
     можно было писать; янтарь остался только там, где нужно тепло. */
  --color-gold: #b45309;
  --rgb-gold: 180 83 9;
  --color-gold-soft: #92400e;
  --color-gold-deep: #78350f;
  --rgb-gold-deep: 120 53 15;
  --color-emerald: #0f766e;
  --rgb-emerald: 15 118 110;
  --color-emerald-soft: #115e59;
  --color-emerald-deep: #ccfbf1;

  /* Акцент как заливка: кнопка перестала быть золотой плашкой и стала
     тиловой. Ради этого разведения токены и держатся порознь. */
  --fill-gold-top: #0d9488;
  --fill-gold: #0f766e;
  --fill-gold-deep: #115e59;
  --fill-gold-edge: #0f766e;
  --fill-gold-ink: #ffffff;
  --rgb-fill-gold: 15 118 110;
  --fill-emerald: #0d9488;
  --btn-sheen: rgba(255,255,255,.16);
  --btn-divider: rgba(255,255,255,.34);

  /* Линии: одна кайма Slate 200 на всё. Никаких цветных контуров —
     именно они превращали карточку в чертёж. */
  --color-hairline: #e2e8f0;
  --color-border: #e2e8f0;
  --rgb-border: 226 232 240;
  --color-control-edge: #cbd5e1;
  --color-border-bright: var(--color-focus);
  --color-focus: #0f766e;
  --scroll-thumb: #cbd5e1;

  /* Состояния: мягкие пилюли, подложка и чернила парой. */
  --color-error: #b91c1c;
  --rgb-error: 185 28 28;
  --color-error-ink: #991b1b;
  --surface-err: #fee2e2;
  --color-success: #047857;
  --rgb-success: 4 120 87;
  --color-success-ink: #065f46;
  --surface-ok: #d1fae5;
  --color-green: #059669;
  --rgb-green: 5 150 105;
  --color-marker-gtm: #b45309;
  --rgb-marker-gtm: 180 83 9;
  --badge-ready-ink: #047857;
  --badge-ready-bg: #d1fae5;
  --badge-work-ink: #0f766e;
  --badge-work-bg: #ccfbf1;
  --badge-wait-ink: #b45309;
  --badge-wait-bg: #fef3c7;
  --badge-check-ink: #334155;
  --badge-check-bg: #e2e8f0;

  /* Полоса стадии: трек и заполнение своими токенами, иначе заполнение
     тянуло бы цвет из текстовых чернил и было бы либо нечитаемо, либо
     слишком тяжело. */
  --bar-track: #f1f5f9;
  --bar-fill: #0f766e;

  /* Материал: одна деликатная тень вместо ореола. */
  --glow-rest: 0 1px 2px rgba(15 23 42 / .04), 0 4px 20px -2px rgba(15 23 42 / .07);
  --glow-hover: 0 2px 4px rgba(15 23 42 / .06), 0 10px 28px -6px rgba(15 23 42 / .11);
  --glow-active: inset 0 1px 3px rgba(15 23 42 / .10);
  --drop-rest: drop-shadow(0 1px 2px rgba(15 23 42 / .05)) drop-shadow(0 6px 16px rgba(15 23 42 / .07));
  --drop-hover: drop-shadow(0 2px 4px rgba(15 23 42 / .07)) drop-shadow(0 12px 26px rgba(15 23 42 / .10));
  --drop-active: drop-shadow(0 1px 2px rgba(15 23 42 / .10)) drop-shadow(0 4px 8px rgba(15 23 42 / .10));
  --shadow-overlay: 0 4px 24px rgba(15 23 42 / .10), 0 24px 48px -16px rgba(15 23 42 / .18);
  --inset-well: inset 0 0 0 1px rgba(15 23 42 / .04);
  --text-glow: none;
  --logo-filter: grayscale(1) opacity(.68);
  --page-grid: rgba(15 23 42 / .025);
  --page-wash: radial-gradient(130% 62% at 50% -12%, rgba(255,255,255,.92), rgba(255,255,255,0) 62%);
  --on-globe: #c9d9d4;
  --surface-overlay: #ffffff;
  --map-idle: #e2e8f0;
  --map-line: #ffffff;
  --map-hover: #cbd5e1;
  --map-active: #99f6e4;
  --map-city: rgba(var(--rgb-gold) / .18);
  --map-occupied: #cbd5e1;
  --map-occupied-line: #94a3b8;
  --surface-globe: #0d211f;
  --globe-bezel: #0a1a18;

  /* Кромка карточки: ровная кайма Slate 200 вместо цветной грани. */
  --frame-edge: linear-gradient(215deg, #e2e8f0, #e2e8f0);
  --frame-edge-hover: linear-gradient(215deg, #cbd5e1, #cbd5e1);
  --frame-fill: linear-gradient(215deg, rgba(255,255,255,0), rgba(255,255,255,0)), #ffffff;
  --frame-fill-hover: linear-gradient(215deg, rgba(255,255,255,0), rgba(255,255,255,0)), #ffffff;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-block-size: 100dvh;
  margin: 0;
  background: linear-gradient(180deg, rgb(var(--rgb-canvas)) 0%, rgb(var(--rgb-deep)) 58%, rgb(var(--rgb-canvas)) 100%);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(var(--rgb-emerald) / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rgb-emerald) / 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0 0 0 / 0.9), transparent 78%);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(115deg, rgba(var(--rgb-emerald) / 0.14), transparent 42%),
    linear-gradient(250deg, rgba(var(--rgb-gold) / 0.12), transparent 54%);
  opacity: 0.82;
}

img,
svg,
canvas {
  display: block;
  max-inline-size: 100%;
}

a {
  /* text-decoration потерялось при переносе: в workspace правило было
     a{color:inherit;text-decoration:none}. Без него браузер подчёркивал
     каждую ссылку — всю навигацию, мега-меню, подвал и переключатель
     языка. Подчёркивание остаётся там, где оно осмысленно: в тексте
     контактов и в служебных сообщениях форм.                          */
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-border-bright);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  transform: translateY(-150%);
  border-radius: var(--radius-sm);
  background: var(--color-gold);
  color: var(--color-canvas);
  font-weight: 700;
  transition: transform 140ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

.cursor-canvas {
  position: fixed;
  inset: 0;
  z-index: 90;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  overflow: hidden;
  border: 1px solid rgba(var(--rgb-emerald) / 0.34);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-panel-strong) / 0.8);
}

.brand-mark img {
  inline-size: 48px;
  block-size: 48px;
  max-inline-size: none;
  object-fit: contain;
  transform: translateY(0);
  filter: drop-shadow(0 0 16px rgba(var(--rgb-emerald) / 0.28));
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 140ms ease-out,
    border-color 240ms ease-in-out,
    background 240ms ease-in-out,
    color 240ms ease-in-out,
    box-shadow 240ms ease-in-out;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.button-primary {
  background: var(--color-gold);
  color: var(--color-canvas);
  box-shadow: 0 0 24px rgba(var(--rgb-gold) / 0.28);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--color-gold-soft);
  box-shadow: 0 0 32px rgba(var(--rgb-gold) / 0.36);
}

.button-secondary {
  border: 1px solid rgba(var(--rgb-emerald) / 0.28);
  background: rgba(var(--rgb-panel) / 0.68);
  color: var(--color-text);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(var(--rgb-emerald) / 0.72);
  background: rgba(var(--rgb-panel-strong) / 0.92);
}

.button-small {
  min-block-size: 40px;
  padding-inline: var(--space-4);
  font-size: var(--type-small);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  justify-self: end;
  inline-size: min(100%, 420px);
  min-inline-size: 0;
}

.header-actions .button-small {
  flex: 1 1 180px;
  min-inline-size: 150px;
  white-space: nowrap;
}

.language-switch {
  display: inline-grid;
  grid-template-columns: max-content repeat(2, 38px);
  align-items: center;
  gap: 2px;
  min-inline-size: max-content;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(var(--rgb-emerald) / 0.28);
  border-radius: var(--radius-sm);
  background: rgba(var(--rgb-panel) / 0.72);
}

.language-switch-label {
  padding-inline: var(--space-2) var(--space-1);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.language-option {
  display: inline-grid;
  place-items: center;
  block-size: 32px;
  min-inline-size: 38px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    background 160ms ease-out,
    color 160ms ease-out,
    box-shadow 160ms ease-out,
    transform 140ms ease-out;
}

.language-option:hover,
.language-option:focus-visible {
  color: var(--color-text);
}

.language-option:active {
  transform: scale(0.96);
}

.language-option.is-active {
  background: var(--color-gold);
  color: var(--color-canvas);
  box-shadow: 0 0 18px rgba(var(--rgb-gold) / 0.24);
}

[lang="uk"] .header-actions .button-small {
  min-inline-size: 164px;
  white-space: nowrap;
}

.section {
  inline-size: min(var(--page-max), calc(100% - (var(--space-5) * 2)));
  margin-inline: auto;
  /* При переносе из workspace у секции остались только ширина и
     центровка, а вертикальный ритм потерялся. Держался он на россыпи
     инлайновых padding-top в шаблонах, и там, где их не поставили,
     блоки склеивались: между карточками продуктов и плашкой подписки
     было ровно ноль пикселей. Инлайновые значения по-прежнему сильнее
     и продолжают работать как уменьшение этого отступа.              */
  padding-block-end: var(--space-10);
}

.hero-copy {
  max-inline-size: 600px;
}

.eyebrow,
.panel-kicker {
  margin: 0 0 var(--space-4);
  color: var(--color-gold-soft);
  font-family: var(--font-accent);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0;
}

h1 {
  margin-block-end: var(--space-5);
  font-size: var(--type-display);
  line-height: 0.95;
}

.hero-wordmark {
  max-inline-size: 560px;
}

.hero-wordmark img {
  inline-size: min(100%, clamp(360px, 41vw, 560px));
  block-size: auto;
  max-inline-size: none;
  filter: drop-shadow(0 0 22px rgba(var(--rgb-gold) / 0.12));
}

.hero-offer {
  max-inline-size: 600px;
  margin-block-end: var(--space-4);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(25px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.08;
}

h2 {
  margin-block-end: var(--space-4);
  font-size: var(--type-h2);
  line-height: 1.08;
}

h3 {
  margin-block-end: var(--space-3);
  font-size: var(--type-h3);
  line-height: 1.2;
}

.hero-lead,
.section-heading p,
.contact-copy p {
  color: var(--color-muted);
  font-size: var(--type-lead);
}

.hero-lead {
  max-inline-size: 560px;
  margin-block-end: var(--space-8);
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.proof-strip div {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgba(var(--rgb-border) / 0.9);
}

.proof-strip dt {
  color: var(--color-gold-soft);
  font-family: var(--font-wordmark);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.proof-strip dd {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--type-small);
}

.globe-stage {
  position: relative;
  display: grid;
  block-size: clamp(560px, calc(100dvh - var(--header-height) - var(--space-20)), 740px);
  min-block-size: 0;
  scroll-margin-block-start: calc(var(--header-height) + var(--space-8));
  isolation: isolate;
}

.globe-shell {
  position: relative;
  overflow: visible;
  block-size: 100%;
  min-block-size: 0;
  border: 1px solid rgba(var(--rgb-emerald) / 0.16);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 35% 34%, rgba(var(--rgb-emerald) / 0.16), transparent 36%),
    linear-gradient(145deg, rgba(var(--rgb-emerald) / 0.08), transparent 48%),
    linear-gradient(315deg, rgba(var(--rgb-gold) / 0.1), transparent 54%), rgba(var(--rgb-panel) / 0.2);
  box-shadow:
    inset 0 1px 0 rgba(var(--rgb-text) / 0.08),
    inset 0 0 72px rgba(var(--rgb-emerald) / 0.08),
    0 0 72px rgba(var(--rgb-emerald) / 0.15);
}

.globe-canvas {
  position: absolute;
  inset: 0 0 5% -7%;
  cursor: grab;
}

.globe-canvas.is-dragging {
  cursor: grabbing;
}

.globe-fallback {
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: min(92%, 680px);
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: saturate(1.08) contrast(1.08);
  transition: opacity 240ms ease-in-out;
}

.globe-shell.has-fallback .globe-fallback {
  opacity: 0.88;
}

.globe-shell.is-ready .globe-fallback {
  display: none;
}

.globe-loading {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-start: var(--space-5);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(var(--rgb-emerald) / 0.24);
  border-radius: var(--radius-sm);
  background: rgba(var(--rgb-canvas) / 0.72);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
}

.globe-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.research-panel {
  position: absolute;
  inset-inline-end: var(--space-6);
  inset-block-end: var(--space-6);
  inline-size: min(340px, calc(100% - var(--space-12)));
  padding: var(--space-5);
  border: 1px solid rgba(var(--rgb-emerald) / 0.34);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-canvas) / 0.76);
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(var(--rgb-text) / 0.08),
    0 18px 44px rgba(var(--rgb-canvas) / 0.42);
  transition:
    inline-size 220ms ease-in-out,
    padding 220ms ease-in-out,
    background 220ms ease-in-out;
}

.research-panel.is-preview {
  inline-size: min(276px, calc(100% - var(--space-12)));
  padding: var(--space-4);
  background: rgba(var(--rgb-canvas) / 0.68);
}

.panel-reset {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(var(--rgb-emerald) / 0.28);
  border-radius: var(--radius-xs);
  background: rgba(var(--rgb-panel-strong) / 0.72);
  color: var(--color-muted);
  font-size: var(--type-caption);
  font-weight: 700;
  cursor: pointer;
  transition:
    color 160ms ease-out,
    border-color 160ms ease-out,
    transform 160ms ease-out;
}

.panel-reset:hover,
.panel-reset:focus-visible {
  border-color: rgba(var(--rgb-emerald) / 0.56);
  color: var(--color-text);
}

.panel-reset:active {
  transform: translateY(1px);
}

.research-panel h2 {
  margin-block-end: var(--space-3);
  font-size: 26px;
}

.research-panel p {
  color: var(--color-muted);
}

.research-panel.is-preview h2 {
  max-inline-size: none;
  font-size: 20px;
}

.research-panel.is-preview p {
  font-size: var(--type-small);
}

.research-panel.is-preview .panel-kicker {
  margin-block-end: var(--space-2);
}

.selected-meta {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.research-panel.is-preview .selected-meta {
  display: none;
}

.selected-meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid rgba(var(--rgb-border) / 0.72);
}

.selected-meta dt {
  color: var(--color-faint);
  font-size: var(--type-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.selected-meta dd {
  margin: 0;
  color: var(--color-text);
  text-align: end;
}

.inline-link {
  position: relative;
  display: inline-flex;
  padding-block-end: var(--space-1);
  color: var(--color-gold-soft);
  font-weight: 700;
}

#product,
#cases,
#method,
#contact {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-8));
}

.section-heading {
  max-inline-size: 740px;
  margin-block-end: var(--space-10);
}

.product-section,
.research-list-section,
.telemetry-section,
.case-section,
.services-section,
.method-section,
.contact-section {
  padding-block: var(--space-16);
}

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.58fr);
  gap: var(--space-6);
  align-items: stretch;
}

.report-preview,
.report-proof,
.mix-panel article,
.case-study-card {
  border: 1px solid rgba(var(--rgb-border) / 0.86);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-panel) / 0.74);
  box-shadow: inset 0 1px 0 rgba(var(--rgb-text) / 0.05);
}

.report-preview {
  padding: var(--space-6);
  background:
    radial-gradient(circle at 16% 8%, rgba(var(--rgb-emerald) / 0.14), transparent 34%),
    linear-gradient(145deg, rgba(var(--rgb-panel-strong) / 0.9), rgba(var(--rgb-panel) / 0.78));
}

.report-preview header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid rgba(var(--rgb-border) / 0.72);
}

.artifact-showcase {
  display: grid;
  gap: var(--space-5);
  margin-block-start: var(--space-6);
  padding-block: var(--space-5);
  border-block: 1px solid rgba(var(--rgb-border) / 0.68);
  background:
    linear-gradient(90deg, rgba(var(--rgb-emerald) / 0.08), transparent 38%),
    linear-gradient(180deg, rgba(var(--rgb-panel-strong) / 0.32), rgba(var(--rgb-canvas) / 0.08));
}

.artifact-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.artifact-tabs span {
  display: inline-flex;
  align-items: center;
  min-block-size: 30px;
  padding-inline: var(--space-3);
  border: 1px solid rgba(var(--rgb-border) / 0.78);
  border-radius: var(--radius-xs);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.artifact-tabs span:first-child {
  border-color: rgba(var(--rgb-gold) / 0.54);
  background: rgba(var(--rgb-gold) / 0.12);
  color: var(--color-gold-soft);
}

.artifact-body {
  display: grid;
  grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.artifact-score {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-gold);
}

.artifact-score span,
.artifact-source span {
  color: var(--color-faint);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.artifact-score strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 0.95;
}

.artifact-signals {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.artifact-signals li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: var(--space-3);
  color: rgba(var(--rgb-text) / 0.82);
}

.artifact-signals li::before {
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: 10px;
  content: "";
  background: var(--color-emerald);
  transform: rotate(45deg);
}

.risk-matrix {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(var(--rgb-border) / 0.78);
  border-radius: var(--radius-sm);
}

.risk-matrix span {
  display: grid;
  place-items: center;
  min-block-size: 42px;
  padding-inline: var(--space-2);
  color: var(--color-text);
  font-size: var(--type-small);
  font-weight: 800;
  text-align: center;
}

.risk-matrix span:nth-child(1) {
  background: rgba(var(--rgb-green) / 0.22);
}

.risk-matrix span:nth-child(2) {
  background: rgba(var(--rgb-gold) / 0.22);
}

.risk-matrix span:nth-child(3) {
  background: rgba(var(--rgb-canvas) / 0.68);
  color: var(--color-muted);
}

.artifact-source {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgba(var(--rgb-border) / 0.68);
}

.artifact-source strong {
  color: var(--color-text);
  font-size: 17px;
}

.report-label,
.case-meta {
  margin: 0;
  color: var(--color-gold-soft);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-outline {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: var(--space-6) 0 0;
  list-style: none;
}

.report-outline li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.report-outline span {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid rgba(var(--rgb-gold) / 0.44);
  border-radius: var(--radius-sm);
  color: var(--color-gold-soft);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 800;
}

.report-outline h4 {
  margin: 0 0 var(--space-1);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.22;
}

.report-outline p,
.report-proof span,
.case-flow dd {
  color: var(--color-muted);
}

.report-outline p {
  margin: 0;
}

.report-proof {
  display: grid;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background:
    linear-gradient(180deg, rgba(var(--rgb-panel-strong) / 0.74), rgba(var(--rgb-canvas) / 0.72)),
    radial-gradient(circle at 76% 20%, rgba(var(--rgb-gold) / 0.16), transparent 34%);
}

.report-proof div {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-block-end: 1px solid rgba(var(--rgb-border) / 0.72);
}

.report-proof div:last-child {
  border-block-end: 0;
}

.report-proof span {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-proof strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.12;
}

.portfolio-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block: calc(var(--space-10) * -0.55) var(--space-6);
}

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.portfolio-filter {
  min-block-size: 36px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(var(--rgb-border) / 0.84);
  border-radius: var(--radius-sm);
  background: rgba(var(--rgb-panel) / 0.68);
  color: var(--color-muted);
  font-size: var(--type-small);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 140ms ease-out,
    border-color 220ms ease-in-out,
    background 220ms ease-in-out,
    color 220ms ease-in-out;
}

.portfolio-filter:hover,
.portfolio-filter:focus-visible,
.portfolio-filter.is-active {
  transform: translateY(-1px);
  border-color: rgba(var(--rgb-emerald) / 0.72);
  background: rgba(var(--rgb-panel-strong) / 0.9);
  color: var(--color-text);
}

.portfolio-filter.is-active {
  border-color: rgba(var(--rgb-gold) / 0.58);
  color: var(--color-gold-soft);
}

.portfolio-toggle {
  flex: none;
}

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

.portfolio-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-5);
  border: 1px dashed rgba(var(--rgb-border) / 0.86);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  background: rgba(var(--rgb-panel) / 0.42);
}

.research-card,
.telemetry-card,
.telemetry-summary,
.service-card,
.method-list li,
.contact-form {
  border: 1px solid rgba(var(--rgb-border) / 0.86);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-panel) / 0.74);
  box-shadow: inset 0 1px 0 rgba(var(--rgb-text) / 0.05);
}

.research-card {
  display: grid;
  min-block-size: 260px;
  padding: var(--space-5);
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    transform 240ms ease-in-out,
    border-color 240ms ease-in-out,
    background 240ms ease-in-out,
    box-shadow 240ms ease-in-out;
}

.research-card:hover,
.research-card:focus-visible,
.research-card.is-selected {
  transform: translateY(-4px);
  border-color: rgba(var(--rgb-emerald) / 0.72);
  background: rgba(var(--rgb-panel-strong) / 0.86);
  box-shadow: 0 0 32px rgba(var(--rgb-emerald) / 0.12);
}

.research-card .status {
  justify-self: start;
  margin-block-end: var(--space-5);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(var(--rgb-green) / 0.46);
  border-radius: var(--radius-xs);
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.research-card[data-sensitivity="aggregate"] .status {
  border-color: rgba(var(--rgb-gold) / 0.5);
  color: var(--color-gold-soft);
}

.research-card h3 {
  color: var(--color-text);
}

.research-card p {
  color: var(--color-muted);
}

.research-card footer {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  color: var(--color-faint);
  font-size: var(--type-small);
}

.telemetry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: var(--space-6);
  align-items: stretch;
}

.telemetry-card {
  min-block-size: 360px;
  padding: var(--space-6);
}

.telemetry-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.telemetry-card-header h3 {
  margin-block-start: var(--space-1);
}

.telemetry-card-header span {
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(var(--rgb-emerald) / 0.4);
  border-radius: var(--radius-sm);
  color: var(--color-emerald);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
}

.telemetry-label {
  margin: 0;
  color: var(--color-gold-soft);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.telemetry-chart {
  position: relative;
  min-block-size: 250px;
  overflow: hidden;
  border-block-start: 1px solid rgba(var(--rgb-border) / 0.74);
  background:
    linear-gradient(180deg, rgba(var(--rgb-panel-strong) / 0.64), rgba(var(--rgb-panel) / 0.1)),
    radial-gradient(circle at 80% 16%, rgba(var(--rgb-emerald) / 0.12), transparent 32%);
}

.telemetry-chart canvas {
  inline-size: 100%;
  block-size: 100%;
}

.telemetry-summary {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.telemetry-summary div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-block-end: 1px solid rgba(var(--rgb-border) / 0.72);
}

.telemetry-summary div:last-child {
  border-block-end: 0;
}

.telemetry-summary span {
  color: var(--color-faint);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.telemetry-summary strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}

.mix-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

.mix-panel article {
  padding: var(--space-5);
}

.mix-panel h3 {
  margin-block-end: var(--space-5);
}

.section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
}

.section-cta .button {
  min-inline-size: 220px;
}

.mix-bars {
  display: grid;
  gap: var(--space-4);
}

.mix-bar {
  display: grid;
  gap: var(--space-2);
}

.mix-bar header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-muted);
  font-size: var(--type-small);
  font-weight: 700;
}

.mix-bar-track {
  block-size: 8px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: rgba(var(--rgb-border) / 0.55);
}

.mix-bar-fill {
  block-size: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-emerald));
  transform: scaleX(var(--bar, 0));
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.case-study-card {
  padding: var(--space-6);
  background:
    linear-gradient(145deg, rgba(var(--rgb-panel-strong) / 0.8), rgba(var(--rgb-panel) / 0.74)),
    radial-gradient(circle at 88% 12%, rgba(var(--rgb-emerald) / 0.12), transparent 32%);
}

.case-study-card h3 {
  margin-block: var(--space-4) var(--space-6);
}

.case-flow {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.case-flow div {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgba(var(--rgb-border) / 0.72);
}

.case-flow dt {
  color: var(--color-gold-soft);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-flow dd {
  margin: var(--space-1) 0 0;
}

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

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 430px;
  padding: var(--space-6);
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(var(--rgb-panel-strong) / 0.98),
      rgba(var(--rgb-panel) / 0.92) 58%,
      rgba(var(--rgb-canvas) / 0.96)
    ),
    radial-gradient(circle at 82% 12%, rgba(var(--rgb-emerald) / 0.16), transparent 34%);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition:
    transform 240ms ease-in-out,
    border-color 240ms ease-in-out,
    box-shadow 240ms ease-in-out;
}

.service-card::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  content: "";
  background: linear-gradient(90deg, var(--color-gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms ease-in-out;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(var(--rgb-gold) / 0.52);
  box-shadow: 0 28px 58px -28px rgba(var(--rgb-emerald) / 0.36);
}

.service-card:hover::after,
.service-card:focus-within::after {
  transform: scaleX(1);
}

.service-number {
  color: var(--color-gold-soft);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.16em;
}

.service-icon {
  inline-size: 56px;
  block-size: 56px;
  margin-block: var(--space-6) var(--space-5);
  color: var(--color-gold);
  filter: drop-shadow(0 0 14px rgba(var(--rgb-gold) / 0.22));
}

.service-icon svg {
  inline-size: 100%;
  block-size: 100%;
}

.service-card h3 {
  margin-block-end: var(--space-3);
  color: var(--color-text);
}

.service-card ul {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-5) 0 0;
  list-style: none;
}

.service-card li {
  display: flex;
  gap: var(--space-3);
  color: rgba(var(--rgb-text) / 0.78);
  font-size: var(--type-small);
}

.service-card li::before {
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: 10px;
  content: "";
  background: var(--color-gold);
  transform: rotate(45deg);
}

.method-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.method-list li {
  padding: var(--space-5);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.method-list li.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.method-list span {
  display: inline-flex;
  margin-block-end: var(--space-6);
  color: var(--color-gold-soft);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 700;
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.58fr);
  gap: var(--space-10);
  align-items: start;
}

.contact-details {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
  color: var(--color-muted);
  font-style: normal;
}

.contact-details span:first-child {
  color: var(--color-text);
  font-weight: 700;
}

.contact-form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
}

.field-trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form label {
  display: grid;
  gap: var(--space-2);
}

.contact-form label span {
  color: var(--color-muted);
  font-size: var(--type-small);
  font-weight: 700;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  inline-size: 100%;
  border: 1px solid rgba(var(--rgb-border) / 0.96);
  border-radius: var(--radius-sm);
  background: rgba(var(--rgb-canvas) / 0.64);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
}

.contact-form select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--color-gold) 50%) calc(100% - 18px) 52% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--color-gold) 50%, transparent 50%) calc(100% - 13px) 52% / 7px 7px no-repeat,
    rgba(var(--rgb-canvas) / 0.64);
  cursor: pointer;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--color-border-bright);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--rgb-emerald) / 0.16);
}

.consent-label {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
}

.contact-form .consent-label input {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 4px;
  accent-color: var(--color-gold);
}

.contact-form .consent-label span {
  color: var(--color-muted);
  font-weight: 600;
}

.form-note {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-small);
}

.footer-brand {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  overflow: visible;
  border: 1px solid rgba(var(--rgb-emerald) / 0.28);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-panel) / 0.68);
}

.footer-brand img {
  inline-size: 54px;
  block-size: 54px;
  max-inline-size: none;
  object-fit: contain;
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 1160px) {
}

@media (max-width: 1024px) {

  .hero-copy {
    max-inline-size: 760px;
  }

  .globe-stage {
    block-size: clamp(520px, calc(100dvh - var(--header-height) - var(--space-16)), 660px);
    margin-inline-end: 0;
  }

  .globe-shell {
    overflow: hidden;
  }

  .globe-canvas {
    inset: 0 -6% 7%;
  }

  .research-grid,
  .case-grid,
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-layout,
  .telemetry-layout {
    grid-template-columns: 1fr;
  }

  .portfolio-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .method-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --header-height: 68px;
  }

  .header-actions {
    gap: var(--space-2);
  }

  .header-actions .button-small {
    display: none;
  }

  .language-switch {
    grid-template-columns: repeat(2, 38px);
  }

  .language-switch-label {
    display: none;
  }

  .brand-mark {
    inline-size: 44px;
    block-size: 44px;
  }

  .proof-strip {
    gap: var(--space-3);
  }

  .research-grid,
  .case-grid,
  .service-grid,
  .method-list {
    grid-template-columns: 1fr;
  }

  .telemetry-card {
    min-block-size: 320px;
    padding: var(--space-5);
  }

  .telemetry-card-header {
    flex-direction: column;
  }

  .artifact-body,
  .risk-matrix {
    grid-template-columns: 1fr;
  }

  .telemetry-chart {
    min-block-size: 220px;
  }

  .service-card {
    min-block-size: auto;
  }

  .proof-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-strip dt {
    font-size: 24px;
  }

  .proof-strip dd {
    font-size: var(--type-caption);
  }

  .globe-stage {
    block-size: clamp(500px, 72dvh, 600px);
  }

  .mix-panel {
    grid-template-columns: 1fr;
  }

  .research-panel {
    inset-inline: var(--space-4);
    inset-block-end: var(--space-4);
    inline-size: auto;
    padding: var(--space-5);
  }

  .product-section,
  .research-list-section,
  .telemetry-section,
  .case-section,
  .services-section,
  .method-section,
  .contact-section {
    padding-block: var(--space-12);
  }

  .section-cta .button {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .cursor-canvas {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 1 (утилиты и рамка) и фаза 2 (шапка, подвал)

   Перенесено из workspace-01a07539 дословно. Изменены ТОЛЬКО цвета —
   переведены на токены. Все отступы, размеры, интервалы и геометрия
   сохранены байт в байт: пропорции выверены и не подлежат правке.

   Замены цвета:
     var(--bg)      → var(--color-canvas)
     var(--cream)   → var(--color-text)        заголовки
     var(--text)    → var(--color-text-soft)   основной текст
     var(--muted)   → var(--color-muted)
     var(--gold)    → var(--color-gold)
     var(--gold-2)  → var(--color-gold-soft)
     var(--line)    → var(--color-hairline)
     rgba(232,182,76,N) → rgba(var(--rgb-gold) / N)
     rgba(244,239,220,N) → rgba(var(--rgb-text) / N)
     rgba(126,224,190,N) → rgba(var(--rgb-emerald) / N)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Фаза 1: утилиты ──────────────────────────────────────────────────────
   .container несёт 24px собственных полей. Это не приводится к
   --grid-margin (14px): тот описывает математику 12 колонок и нигде не
   используется. Ширина 1180px совпадает с --page-max точно.            */
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.lead{font-size:1.06rem;color:var(--color-text-soft);max-width:56ch}
.muted{color:var(--color-muted)}

/* Надзаголовок: заглавные золотые буквы, штрих слева, ромб-разделитель */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--color-gold);
  text-transform:uppercase;letter-spacing:.24em;font-size:11px;font-weight:800}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--color-gold)}
.eyebrow .dotsep{width:4px;height:4px;background:var(--color-gold);transform:rotate(45deg)}

/* ── Фаза 1: фирменная рамка со срезанным углом ───────────────────────────
   Пара .frame / .frame-in. Внешний элемент — градиентная рамка через
   padding:1px, внутренний перекрывает её, оставляя видимой линию в 1px.
   Срез угла делает clip-path, у внутреннего он на 1px меньше.

   ВНИМАНИЕ: clip-path обрезает box-shadow. Любое свечение на этих
   карточках задавать через filter: drop-shadow(), иначе тень
   отрисуется прямоугольником и срез угла пропадёт.                    */
/* Кромка и заливка вынесены в токены: у тёмной темы это подсветка
   изнутри, у светлой — золото на срезанной грани и изумруд сразу за
   ним. Само правило одно на обе темы.                                 */
.frame{--c:var(--cut);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);
  padding:1px;
  background:var(--frame-edge);
  filter:var(--drop-rest);
  transition:background .25s,filter .25s}
.frame:hover{background:var(--frame-edge-hover);filter:var(--drop-hover)}
.frame-in{clip-path:polygon(0 0,calc(100% - calc(var(--c) - 1px)) 0,100% calc(var(--c) - 1px),100% 100%,0 100%);
  background:var(--frame-fill);
  height:100%;padding:28px;transition:background .25s}
.frame:hover .frame-in{background:var(--frame-fill-hover)}

/* ── Фаза 2: кнопки ───────────────────────────────────────────────────────
   header.php уже выводит .btn .btn-gold .btn-sm и .btn .btn-ghost .btn-sm,
   до этого переноса в теме не было для них ни одного правила.          */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:8px;font-weight:800;font-size:14px;letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .18s,box-shadow .18s,border-color .18s,color .18s}
.btn-gold{color:var(--fill-gold-ink);border-color:var(--fill-gold-edge);
  background:linear-gradient(180deg,var(--fill-gold-top),var(--fill-gold) 54%,var(--fill-gold-deep));
  box-shadow:inset 0 1px 0 var(--btn-sheen),var(--glow-rest)}
.btn-gold:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--btn-sheen),var(--glow-hover)}
.btn-gold:active{transform:translateY(0);
  box-shadow:var(--glow-active)}
.btn-ghost{border-color:var(--color-control-edge);color:var(--color-text);
  background:var(--color-surface-quiet)}
.btn-ghost:hover{border-color:var(--color-gold);color:var(--color-gold);
  background:var(--color-surface-quiet-hover);box-shadow:var(--glow-rest)}
.btn-ghost:active{box-shadow:var(--glow-active)}
.btn-sm{padding:9px 15px;font-size:13px;border-radius:7px}
.link-more{display:inline-flex;align-items:center;gap:8px;color:var(--color-gold);font-weight:800;font-size:14px;
  background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.link-more:hover{color:var(--color-gold-soft)}
.link-more svg{width:16px;height:16px}

/* ── Фаза 2: шапка ────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(var(--rgb-canvas) / .86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-hairline)}
.header-in{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.owl-tile{width:46px;height:46px;border-radius:10px;
  background:linear-gradient(160deg,var(--color-panel-strong),var(--color-panel));
  border:1px solid rgba(var(--rgb-gold) / .34);display:grid;place-items:center;overflow:hidden;flex:none;
  box-shadow:var(--glow-rest);transition:box-shadow .25s}
.brand:hover .owl-tile{box-shadow:var(--glow-hover)}
.owl-tile img{height:40px;width:auto}
/* Начертание бренда — светлый тёплый оттенок, а не белый: рядом с
   янтарной плиткой логотипа кремовый текст читался холодным пятном.
   Взят --color-gold-soft: контраст 10.5…13.6 на всех поверхностях
   шапки, то есть втрое выше нормы. Вторая строка приглушена, чтобы
   «OWL» оставалось первым, что видит глаз.                          */
.brand-text b{display:block;color:var(--color-gold-soft);font-weight:800;font-size:15px;
  letter-spacing:.3em;line-height:1.15;text-shadow:0 0 16px rgba(var(--rgb-gold) / .35)}
.brand-text span{display:block;color:var(--color-gold-soft);opacity:.72;font-weight:700;
  font-size:10px;letter-spacing:.26em}
.brand:hover .brand-text b{text-shadow:0 0 22px rgba(var(--rgb-gold) / .6)}
.brand-text b,.brand-text span{transition:text-shadow .25s,opacity .25s}
.brand:hover .brand-text span{opacity:.9}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.site-nav a{font-size:14px;font-weight:600;color:var(--color-text-soft);transition:color .18s;white-space:nowrap}
.site-nav .lang-btn{white-space:nowrap}
.site-nav a{position:relative}
.site-nav a:hover{color:var(--color-gold)}
.site-nav a.active{color:var(--color-gold);
  text-shadow:var(--text-glow)}
.site-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--color-gold),transparent);
  box-shadow:0 0 12px rgba(var(--rgb-gold) / .7)}
/* У кнопки «Кабинет» своя подсветка — полоса под ней была бы лишней. */
.site-nav a.btn-gold.active::after{content:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--color-text);margin:5px 0;transition:.2s}

/* ── Фаза 2: мега-меню отраслей ──────────────────────────────────────────
   Объявлено ПОСЛЕ .container намеренно: .mega-grid делит с ним элемент,
   и его собственные поля 28/24/32 должны перекрывать 24px контейнера.  */
.mega{position:absolute;top:100%;left:0;right:0;background:var(--surface-overlay);
  border-top:1px solid var(--color-hairline);box-shadow:var(--shadow-overlay);
  display:none;z-index:40}
.site-header.mega-open .mega{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px;padding:28px 24px 32px}

/* Колонка отрасли: квадрат под знак и текст рядом. Раскладка на flex, а
   не на grid: секторов у отрасли может быть и три, и семь, а grid-row
   с «до конца» на неявной сетке разрешается в одну строку.            */
/* Знак стоит снаружи, а полоса отделяет его от текста, а не колонку от
   соседней. Так вертикаль читается как черта состава: слева предмет,
   справа то, из чего он состоит.                                      */
.mega-col{display:flex;gap:14px}
.mega-body{min-width:0;flex:1;
  border-left:1px solid rgba(var(--rgb-gold) / .2);padding-left:16px}

/* Знак отрасли — тот же, что на плашках страницы отраслей: у термина он
   уже лежит в мете, в табло его просто не выводили. Квадрат с подложкой,
   а не голая линия: в плотном списке из девяти колонок знак должен
   ловиться глазом до того, как прочитан заголовок.                    */
.mega-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border-radius:10px;color:var(--color-gold);
  background:rgba(var(--rgb-gold) / .07);
  border:1px solid rgba(var(--rgb-gold) / .16);
  transition:background .18s,border-color .18s,color .18s}
.mega-icon .icon{width:23px;height:23px}
.mega-col:hover .mega-icon{background:rgba(var(--rgb-gold) / .14);
  border-color:rgba(var(--rgb-gold) / .34)}

.mega-ind{display:block;color:var(--color-text);font-weight:800;margin-bottom:8px}
.mega-ind:hover{color:var(--color-gold)}
.mega-sec{display:block;font-size:13px;color:var(--color-muted);padding:3px 0}
.mega-sec:hover{color:var(--color-gold)}

/* Ссылка и раскрытие стоят парой, поэтому и зазор между ними свой, а не
   общий навигационный в 26px. Раньше каретку тянули обратно
   отрицательным полем, и она всё равно читалась отдельным пунктом.    */
.nav-disclosure{display:inline-flex;align-items:center;gap:2px}

/* Указатель раскрытия. Был четырнадцатью пикселями волосяной линии в
   пустоте между пунктами — на тёмном фоне его просто не находили.
   Теперь у него есть своя площадка: видимая в покое, ярче под курсором
   и зажжённая, когда табло открыто. Стрелка при открытии переворачивается
   — это единственный сигнал, который не нужно объяснять.              */
.mega-caret{display:inline-grid;place-items:center;width:24px;height:24px;
  border:1px solid rgba(var(--rgb-gold) / .22);border-radius:7px;
  background:rgba(var(--rgb-gold) / .08);color:var(--color-gold);
  cursor:pointer;padding:0;position:relative;
  transition:background .18s,border-color .18s,transform .18s}
.mega-caret .icon{width:15px;height:15px;stroke-width:2.3;
  transition:transform .22s}
.mega-caret:hover{background:rgba(var(--rgb-gold) / .18);
  border-color:rgba(var(--rgb-gold) / .45)}
.mega-caret[aria-expanded="true"]{background:rgba(var(--rgb-gold) / .24);
  border-color:rgba(var(--rgb-gold) / .55)}
.mega-caret[aria-expanded="true"] .icon{transform:rotate(180deg)}

/* Подсказка. Текст берётся из того же атрибута, что и ярлык для
   экранного диктора: одна строка на оба назначения — значит, они не
   разойдутся при переводе. Появляется по наведению и по фокусу с
   клавиатуры, при открытом табло не мешает.                           */
.mega-caret::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);
  left:50%;transform:translateX(-50%) translateY(-4px);
  padding:6px 10px;border-radius:7px;white-space:nowrap;
  background:var(--color-panel-strong);color:var(--color-text-soft);
  border:1px solid rgba(var(--rgb-gold) / .28);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  box-shadow:var(--glow-rest);
  opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s}
.mega-caret:hover::after,.mega-caret:focus-visible::after{opacity:1;
  transform:translateX(-50%) translateY(0)}
.mega-caret[aria-expanded="true"]::after{content:none}
@media (prefers-reduced-motion:reduce){
  .mega-caret .icon,.mega-caret::after{transition:none}
}

/* ── Фаза 2: переключатель языка ─────────────────────────────────────── */
.lang-wrap{position:relative}
.lang-btn{gap:8px}
.lang-btn .icon{width:15px;height:15px}
.lang-btn.open,.lang-btn:hover{border-color:rgba(var(--rgb-gold) / .55);color:var(--color-gold);
  box-shadow:var(--glow-rest)}

/* Панель выбора языка. Список длинный и будет расти, поэтому сверху
   поиск, а список прокручивается под ним, не уезжая вместе с полем.  */
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:70;display:none;
  width:264px;padding:8px;border-radius:12px;
  border:1px solid rgba(var(--rgb-gold) / .22);
  background:
    radial-gradient(120% 80% at 90% 0%,rgba(var(--rgb-gold) / .10),transparent 60%),
    var(--surface-overlay);
  box-shadow:var(--shadow-overlay)}
.lang-wrap.open .lang-menu{display:block}

.lang-search{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:0 10px;
  border:1px solid rgba(var(--rgb-text) / .12);border-radius:8px;
  background:rgba(var(--rgb-canvas) / .6);transition:border-color .18s,box-shadow .18s}
.lang-search:focus-within{border-color:rgba(var(--rgb-gold) / .6);box-shadow:var(--glow-rest)}
.lang-search .icon{width:15px;height:15px;color:var(--color-faint);flex:none}
.lang-search input{flex:1;min-width:0;border:0;background:none;color:var(--color-text);
  font:inherit;font-size:13px;font-weight:600;padding:9px 0;outline:none}
.lang-search input::placeholder{color:var(--color-faint);font-weight:600}
/* Крестик очистки в Safari и Chrome рисуется тёмным на тёмном. */
.lang-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.lang-list{max-height:296px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-gold) / .35) transparent}
.lang-list::-webkit-scrollbar{width:8px}
.lang-list::-webkit-scrollbar-thumb{background:rgba(var(--rgb-gold) / .3);border-radius:8px}

.lang-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:8px;border:0;background:none;color:var(--color-text-soft);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:left;
  text-decoration:none;transition:background .16s,color .16s,box-shadow .16s}
.lang-item[hidden]{display:none !important}
.lang-item:hover,.lang-item:focus-visible{background:rgba(var(--rgb-gold) / .10);color:var(--color-gold)}
.lang-item.active{color:var(--color-gold);
  background:linear-gradient(90deg,rgba(var(--rgb-gold) / .16),rgba(var(--rgb-gold) / .04));
  box-shadow:inset 2px 0 0 var(--color-gold)}
.lang-code{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--color-faint);
  font-variant-numeric:tabular-nums}
.lang-item.active .lang-code,.lang-item:hover .lang-code{color:var(--color-gold)}
.lang-item.soon{opacity:.45;cursor:default}
.lang-item.soon:hover{background:none;color:var(--color-text-soft)}
.lang-empty{margin:10px;font-size:12.5px;color:var(--color-faint)}
.lang-empty[hidden]{display:none !important}

/* ── Фаза 2: подвал ──────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--color-hairline);margin-top:72px;padding:52px 0 28px;
  background:rgba(var(--rgb-canvas) / .6)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:40px}
.f-brand .owl-tile{width:54px;height:54px}
.f-brand .owl-tile img{height:46px}
.f-brand .brand{margin-bottom:16px}
.f-brand .brand-text b{font-size:17px}
.f-brand .brand-text span{font-size:11px}
.f-brand p{font-size:13.5px;color:var(--color-muted);max-width:38ch}
.f-nav{display:flex;flex-direction:column;gap:10px;font-size:14px}
.f-nav a:hover{color:var(--color-gold)}
.f-contact p{font-size:13.5px;color:var(--color-muted)}
.f-contact a{color:var(--color-gold)}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--color-hairline);
  font-size:12.5px;color:var(--color-muted)}
.soc-row{display:flex;gap:10px;margin-top:16px}
.soc{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--rgb-text) / .2);
  display:grid;place-items:center;color:var(--color-text-soft);transition:.18s;background:var(--tint-plate)}
.soc:hover{border-color:var(--color-gold);color:var(--color-gold);transform:translateY(-2px)}
.soc svg{width:15px;height:15px}

/* ── Фаза 2: фокус клавиатуры ─────────────────────────────────────────────
   В workspace не было ни одного правила :focus-visible. Добавлено здесь,
   потому что перенесённые элементы иначе остаются без видимого фокуса.
   На .frame кольцо не рисуется через outline — его обрежет clip-path,
   поэтому там drop-shadow по контуру среза.                            */
.btn:focus-visible,.link-more:focus-visible,.lang-item:focus-visible,
.lang-btn:focus-visible,.mega-caret:focus-visible,.mega-ind:focus-visible,
.mega-sec:focus-visible,.nav-toggle:focus-visible,.soc:focus-visible,
.site-nav a:focus-visible,.f-nav a:focus-visible,.f-contact a:focus-visible,
.brand:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.site-nav a.btn-gold:focus-visible{color:var(--fill-gold-ink)}
/* У drop-shadow() нет параметра растяжения: запись «0 0 0 2px цвет» —
   четыре длины, правило невалидно и молча игнорировалось. Кольца на
   карточках не было ни в одной теме. Рисуем его толщиной подложки:
   рамка на два пикселя шире, отрицательное поле держит раскладку.    */
.frame:focus-visible,.frame:focus-within{outline:none;
  padding:3px;margin:-2px;background:var(--color-focus);
  filter:var(--drop-hover)}

/* ── Фаза 2: адаптив ──────────────────────────────────────────────────────
   Брейкпоинты 940 и 1380 сохранены как есть. Свернуть их к 1024/1160
   нельзя: между 941 и 1160 правило темы .site-nav{display:none} уже
   срабатывало, а .nav-toggle{display:block} ещё нет — в этой полосе
   у шапки не оставалось никакого элемента навигации.                   */
@media (max-width:1380px){
  .site-nav{gap:16px}
  .site-nav a{font-size:13px}
}
@media (max-width:940px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;left:0;right:0;top:72px;background:rgba(var(--rgb-canvas) / .98);
    flex-direction:column;align-items:flex-start;padding:22px 24px;gap:18px;display:none;
    border-bottom:1px solid var(--color-hairline)}
  .site-header.nav-open .site-nav{display:flex}
  .mega-caret{display:none}
  .mega-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mega-grid{grid-template-columns:1fr}
  .mega-icon{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 3: герой со статическим глобусом
   Значения перенесены дословно, изменены только цвета.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero{padding:72px 0 64px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-visual{position:relative;min-height:420px}

/* Статический SVG-глобус. Четыре анимации: развёртка сектора, пульсация
   городских точек, бегущий пунктир маршрутов, расходящееся кольцо над Киевом.
   Все они объявлены здесь, а не в SVG, чтобы гаситься одним правилом
   prefers-reduced-motion ниже.                                            */
.globe{width:100%;max-width:560px;margin:0 auto;display:block}
.sweep{transform-origin:280px 280px;animation:rot 10s linear infinite}
.dotp{animation:pulse 2.6s ease-in-out infinite}
.flow path{stroke-dasharray:3 7;animation:dashf 2.8s linear infinite}
.kyiv-ring{transform-box:fill-box;transform-origin:center;animation:kring 2.4s ease-out infinite}

@keyframes rot{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes dashf{to{stroke-dashoffset:-100}}
@keyframes kring{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.55);opacity:0}}

/* Карточка-пример поверх глобуса. Позиционируется абсолютно и намеренно
   выступает за границы визуала на 26px — на узких экранах прижимается
   к краю, чтобы не вызывать горизонтальную прокрутку.                    */
.case-card{position:absolute;right:-26px;bottom:-26px;width:min(272px,86%);z-index:2}
.case-card .frame-in{padding:16px 18px}
.case-card h3{font-size:1.0rem;margin-bottom:6px}
.case-card p{font-size:12px;color:var(--color-muted);margin-bottom:10px}
.case-card .link-more{margin-top:10px}
.cc-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted);
  font-weight:800;margin-bottom:10px}
.cc-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-top:1px solid var(--color-hairline);font-size:11.5px}
.cc-row span{color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px;font-weight:700;padding-top:2px}
.cc-row b{color:var(--color-text);text-align:right;font-weight:700}

/* Общие секции контента */
.section-head{margin-bottom:34px;max-width:720px}
.section-head p{color:var(--color-muted)}

@media (max-width:1200px){
  .case-card{right:0;bottom:0}
}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr}
}

/* В workspace анимации глобуса не были закрыты этим правилом.
   Добавлено здесь: четыре бесконечных цикла — заметная нагрузка
   для тех, кто просил уменьшить движение.                               */
@media (prefers-reduced-motion:reduce){
  .sweep,.dotp,.flow path,.kyiv-ring{animation:none}
  .dotp{opacity:.8}
}

/* ── Фаза 3: типографика workspace ────────────────────────────────────────
   Шкала темы (--type-display 92px, --type-h1 64px) рассчитана под лендинг
   WWW с одним экраном. Разметка workspace выверена под свою, более
   компактную: h1 доходит до 52.8px вместо 92px.

   Это не косметика. При шкале темы заголовок героя разгонялся до 92px,
   min-content текстовой колонки превышал её долю в сетке, и вторая
   колонка (глобус) схлопывалась в нулевую ширину — герой терял правую
   половину целиком.

   min-inline-size:0 на детях сетки — защита от повторения этого эффекта
   на любых будущих длинных словах: по умолчанию grid-элемент не может
   стать уже своего min-content.                                        */
body{font-family:var(--font-body);font-size:16px;line-height:1.65}
h1,h2,h3{color:var(--color-text);font-weight:800;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.3rem);margin:14px 0 18px}
h2{font-size:clamp(1.45rem,2.6vw,2.1rem);margin-bottom:14px}
h3{font-size:1.15rem}
p{margin-bottom:12px}
.hero-grid > *{min-inline-size:0}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 4: воронка и карточки продуктов
   ═══════════════════════════════════════════════════════════════════════════ */

/* Номер шага: золотой, разрядка .18em */
.num{color:var(--color-gold);font-size:12px;font-weight:800;letter-spacing:.18em}

/* ── Воронка маршрута ─────────────────────────────────────────────────────
   Плашки растягиваются поровну (flex:1) при нижней границе 160px, между
   ними золотые стрелки. На узких экранах стрелки скрываются, а плашки
   переносятся — flex-wrap уже стоит.                                    */
/* Цепочка маршрута. Пока пять плашек стоят в строку, между ними идут
   стрелки. Как только строка не вмещает всю цепочку, стрелки убираются:
   стрелка, указывающая за край строки, обещает продолжение, которого в
   этом направлении нет — а порядок и без неё читается по номерам 01…05.

   Доля плашки при переносе задана жёстко (flex:0 0), а не растяжением:
   при flex:1 последняя одинокая плашка раздувалась во всю ширину, и
   пятый шаг выглядел важнее первых четырёх.                          */
.funnel{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.funnel-plate{display:block;flex:1 1 0;min-width:0}
.funnel-plate .frame-in{display:flex;flex-direction:column;gap:6px;padding:18px}
.funnel-plate b{color:var(--color-text);font-size:1.02rem}
.funnel-plate small{color:var(--color-muted);font-size:12px}
.f-arrow{align-self:center;color:var(--color-gold);flex:none}
.f-arrow svg{width:20px;height:20px}

/* ── Карточки продуктов ───────────────────────────────────────────────────
   .frame-in выстроен колонкой, а ссылка прижата margin-top:auto — за счёт
   этого карточки в ряду одинаковой высоты независимо от длины описания,
   и все ссылки стоят на одной линии.                                    */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.cards-3 > .frame{height:100%}
.p-card .frame-in{display:flex;flex-direction:column}
.p-card .num{color:var(--color-gold);font-size:12px;font-weight:800;letter-spacing:.18em}
.p-card .icon{width:44px;height:44px;color:var(--color-gold);margin:18px 0 16px}
.p-card h3{font-size:1.25rem;margin-bottom:10px}
.p-card p{font-size:14px;color:var(--color-muted)}
.p-card .link-more{margin-top:auto;padding-top:16px}
.p-card .cta-actions{margin-top:auto;padding-top:14px}

@media (max-width:1100px){
  /* Три сверху, два снизу — доли равные, пропорции не плывут. */
  .f-arrow{display:none}
  .funnel-plate{flex:0 0 calc((100% - 20px) / 3)}
}
@media (max-width:940px){
  .cards-3{grid-template-columns:1fr}
}
@media (max-width:820px){
  .funnel-plate{flex:0 0 calc((100% - 10px) / 2)}
}
@media (max-width:540px){
  .funnel-plate{flex:0 0 100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 5: блок подписки и контакты
   ═══════════════════════════════════════════════════════════════════════════ */

/* Широкая плашка подписки: текст слева, кнопка справа.
   Пропорция 1.2fr/.8fr и поля 40px — как в оригинале.              */
.subscribe-band .frame-in{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;
  align-items:center;padding:40px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Контакты: сведения слева, форма справа в рамке.                  */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.contact-info p{font-size:14.5px}
.contact-info b{color:var(--color-text)}
.contact-info a{color:var(--color-gold);text-decoration:underline;text-underline-offset:4px}
.contact-info .c-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.contact-info .c-row svg{width:18px;height:18px;color:var(--color-gold);flex:none;margin-top:3px}

/* Форма внутри рамки. Разметка от темы WWW — она рабочая, с honeypot
   и отправкой в REST. Поле-ловушка скрыто от людей, но остаётся в
   потоке для ботов, поэтому убирается из виду позиционированием,
   а не display:none.                                               */
.contact-form{display:grid;gap:14px}
.contact-form label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--color-muted)}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:11px 13px;border-radius:8px;
  border:1px solid rgba(var(--rgb-text) / .14);
  background:rgba(var(--rgb-canvas) / .5);color:var(--color-text-soft);
  font:inherit;font-size:14px;font-weight:400}
.contact-form textarea{resize:vertical;min-height:110px}
.contact-form input:focus-visible,.contact-form select:focus-visible,
.contact-form textarea:focus-visible{outline:none;border-color:var(--color-emerald);
  box-shadow:0 0 0 3px rgba(var(--rgb-emerald) / .16)}
.contact-form .field-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-form .consent-label{grid-template-columns:auto 1fr;align-items:start;gap:10px;
  font-weight:400;font-size:12.5px;line-height:1.5}
.contact-form .consent-label input{width:auto;margin-top:2px}

@media (max-width:940px){
  .subscribe-band .frame-in{grid-template-columns:1fr;padding:28px}
  .cta-actions{justify-content:flex-start !important}
}
@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr;gap:28px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 6: внутренние страницы, сетка отраслей
   ═══════════════════════════════════════════════════════════════════════════ */

/* Шапка внутренней страницы: надзаголовок, заголовок, лид.
   Отличается от героя главной отсутствием визуала и меньшими полями. */
.page-hero{padding:64px 0 40px}
.page-hero .lead{margin-top:6px}

/* Сетка отраслей: три колонки, minmax(0,1fr) вместо 1fr — иначе длинные
   названия секторов не дают колонке сжаться и ломают ряд.            */
.cards-9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* Карточка отрасли. Золотая черта под заголовком через ::after,
   min-height у описания выравнивает карточки с разным числом секторов,
   кнопки прижаты к низу через margin-top:auto.                       */
.frame.i-card,.frame.sector-plate{display:flex}
.i-card .frame-in,.sector-plate .frame-in{display:flex;flex-direction:column;flex:1;width:100%}
.i-card .icon{width:38px;height:38px;color:var(--color-gold);margin-bottom:14px}
.i-card h3{font-size:1.32rem;margin-bottom:8px;font-weight:800;color:var(--color-text)}
.i-card h3::after{content:"";display:block;width:34px;height:2px;background:var(--color-gold);margin-top:7px}
.i-card p{font-size:13.5px;color:var(--color-muted);min-height:44px}

/* Три кнопки в ряд. flex:1 1 auto с min-width:0 позволяет им ужиматься
   до узкой колонки; текст переносится, а не обрезается.               */
.i-card .i-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px;
  flex-wrap:nowrap;align-items:stretch}
.i-card .i-actions .btn{flex:1 1 auto;min-width:0;padding:9px 6px;font-size:11.5px;
  white-space:normal;line-height:1.3;text-align:center}
.sector-plate .i-actions{margin-top:auto;padding-top:16px;display:flex;gap:8px;
  align-items:stretch;flex-wrap:nowrap}
.sector-plate .i-actions .btn{flex:1 1 0;min-width:0;padding:9px 6px;font-size:11.5px;
  white-space:normal;line-height:1.3;text-align:center}

@media (max-width:1100px){
  .i-card .i-actions,.sector-plate .i-actions{flex-wrap:wrap}
}
@media (max-width:1020px){
  .cards-9{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cards-9{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 7: аккордеоны, фильтры, плашки секторов
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Аккордеон на нативных <details> ──────────────────────────────────────
   Ни строки JavaScript: раскрытие даёт браузер, плюс поворачивается
   в крестик через ::after и transform. Работает с клавиатуры и при
   отключённых скриптах.                                                */
.acc{border-bottom:1px solid var(--color-hairline)}
.acc summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 4px;
  cursor:pointer;color:var(--color-text);font-weight:800;font-size:1.02rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";margin-left:auto;color:var(--color-gold);font-size:22px;
  font-weight:600;transition:transform .2s;line-height:1}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 4px 20px;color:var(--color-muted);font-size:14.5px;max-width:70ch}
.acc .idx{color:var(--color-gold);font-size:12px;font-weight:800;letter-spacing:.12em;min-width:26px}

/* Две колонки для форматов покупки */
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* ── Фильтр-чипы по отраслям ──────────────────────────────────────────── */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
.chips[hidden]{display:none !important}
.chips-label{color:var(--color-muted);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;margin-right:6px;align-self:center}
.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--color-control-edge);
  background:none;color:var(--color-text-soft);cursor:pointer;font:inherit;font-size:13px;
  font-weight:700;transition:.18s}
.chip:hover{border-color:rgba(var(--rgb-gold) / .5);color:var(--color-gold)}
.chip:hover{box-shadow:var(--glow-rest)}
.chip.active{border-color:var(--color-gold);color:var(--fill-gold-ink);
  background:linear-gradient(180deg,var(--color-gold-soft),var(--color-gold) 55%,var(--color-gold-deep));
  box-shadow:inset 0 1px 0 var(--btn-sheen),var(--glow-hover)}

/* ── Плашки секторов ──────────────────────────────────────────────────── */
.sector-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}
.sector-plate .frame-in{padding:26px}
.sp-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.sp-head .icon{width:34px;height:34px;color:var(--color-gold);flex:none}
.sp-head h3{font-size:1.2rem}
.sec-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  padding:11px 14px;margin-bottom:8px;border:1px solid rgba(var(--rgb-text) / .13);
  border-radius:8px;background:var(--tint-plate);color:var(--color-text-soft);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.18s;text-align:left}
.sec-item:hover{border-color:var(--color-gold);color:var(--color-gold);
  background:rgba(var(--rgb-gold) / .06);box-shadow:var(--glow-rest)}
.sec-item svg{width:15px;height:15px;flex:none}

/* Блок-предупреждение с золотой полосой слева */
.note-quote{border-left:3px solid var(--color-gold);background:rgba(var(--rgb-gold) / .06);
  padding:20px 24px;border-radius:0 10px 10px 0}
.note-quote b{color:var(--color-gold)}
.note-quote p{margin:0;font-size:14.5px}

/* Фокус клавиатуры на новых интерактивных элементах.
   В workspace их не было — добавлено при переносе.                     */
.chip:focus-visible,.sec-item:focus-visible,.acc summary:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:3px}

@media (max-width:900px){
  .sector-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cards-2{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 8: шаги работы и полоса призыва
   ═══════════════════════════════════════════════════════════════════════════ */

/* Три шага работы: круглый номер в золотой окружности, заголовок, описание */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step .step-num{width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(var(--rgb-gold) / .5);color:var(--color-gold);
  display:grid;place-items:center;font-weight:800;margin-bottom:16px}
.step p{font-size:14px;color:var(--color-muted)}

/* Полоса призыва: текст слева, кнопки справа, переносятся на узком экране */
.cta-band .frame-in{display:flex;justify-content:space-between;align-items:center;
  gap:28px;flex-wrap:wrap;padding:38px 42px}
.cta-band h3{font-size:1.5rem;margin-bottom:10px}
.cta-band p{max-width:60ch;color:var(--color-muted);margin:0}

@media (max-width:820px){
  .steps{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ИСПРАВЛЕНИЯ, НАЙДЕННЫЕ НА БОЕВОМ САЙТЕ
   ═══════════════════════════════════════════════════════════════════════════ */

/* Иконки спрайта контурные: <path> без атрибутов заливки и обводки.
   Без этого правила SVG применяет умолчание fill:black — символы
   отрисовывались чёрными пятнами вместо золотых контуров.
   Правило было в workspace, но при переносе я его пропустил.       */
/* Размер по умолчанию у .icon отсутствовал, и SVG без правила в своём
   контексте разворачивался в стандартные для встроенного элемента
   300×150. На боевом это было видно: кнопка «Go-to-Market» на обзорах
   секторов и отраслей раздувалась до 407×178 пикселей вокруг стрелки
   в 265×150. Теперь у иконки есть размер по умолчанию, а контекстные
   правила его перекрывают — их специфичность выше.                   */
.icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  width:18px;height:18px;flex:none}
.btn .icon{width:16px;height:16px}
.btn-sm .icon{width:14px;height:14px}

/* Кнопка «Кабинет» в навигации.
   .site-nav a имеет специфичность (0,0,1,1) и перебивала .btn-gold (0,0,1,0),
   из-за чего тёмный текст кнопки заменялся цветом ссылок навигации —
   золотое на золотом, почти нечитаемо.
   Переопределение задано и для покоя, и для наведения: иначе при
   наведении сработало бы .site-nav a:hover{color:gold}.             */
.site-nav a.btn-gold,
.site-nav a.btn-gold:hover,
.site-nav a.btn-gold:focus-visible{color:var(--fill-gold-ink)}

/* ── Визитка в QR ─────────────────────────────────────────────────────────
   Нативный <details>: раскрытие даёт браузер, работает с клавиатуры
   и без JavaScript — как аккордеоны на страницах отчётов.

   На узких экранах блок скрыт целиком. Причина не в месте: QR-код
   нельзя отсканировать телефоном с экрана этого же телефона, поэтому
   на мобильных он бесполезен. Там работают ссылки мессенджеров выше —
   один тап открывает чат.                                            */
.vcard{margin-top:18px}
.vcard summary{list-style:none;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;color:var(--color-muted);font-size:12.5px;font-weight:700;
  padding:6px 0;transition:color .18s}
.vcard summary::-webkit-details-marker{display:none}
.vcard summary:hover{color:var(--color-gold)}
.vcard summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.vcard summary .icon{width:15px;height:15px;flex:none}
.vcard-body{display:flex;gap:14px;align-items:center;margin-top:10px;
  padding:14px;border:1px solid var(--color-hairline);border-radius:10px;
  background:var(--tint-plate);max-width:340px}

/* Код наследует цвет текста: модули покрашены currentColor, поэтому
   он читается и на тёмном фоне сайта, и на светлом в кабинете.       */
.vcard-body svg{width:104px;height:104px;flex:none;color:var(--color-text)}
.vcard-body p{margin:0;font-size:11.5px;line-height:1.45}

@media (max-width:720px){
  .vcard{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ WORKSPACE — фаза 9: список клиентов
   ═══════════════════════════════════════════════════════════════════════════ */

/* Строка клиента: номер фиксированной ширины, растяжимая середина,
   маркеры по правому краю. Пропорции перенесены дословно: 56px под
   номер, желоб 18px, вертикальные отступы 18px и волосяная линия снизу
   (в workspace --line: cream на 9%).                                    */
.client-row{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;
  padding:18px 6px;border-block-end:1px solid var(--color-hairline)}
.client-row[hidden]{display:none !important}
.client-rank{color:var(--color-gold);font-weight:800;font-size:1.1rem;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}

/* min-inline-size:0 — иначе длинное название страны и сектора не даёт
   средней колонке сжаться, и маркеры уезжают за край строки.           */
.client-main{min-inline-size:0}
.client-main b{color:var(--color-text);display:block}
.client-main span{color:var(--color-muted);font-size:13px}

.client-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tag{font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 10px;border-radius:6px;
  text-transform:uppercase;white-space:nowrap}

/* Три маркера — три ступени воронки, и цвет здесь несёт смысл, а не
   украшает. Золото и изумруд взяты из фирменной пары; третий, медный,
   заведён токеном --color-marker-gtm на H=28°, чтобы не остаться
   случайным литералом мимо палитры.                                    */
.tag-ind{color:var(--color-gold-soft);border:1px solid rgba(var(--rgb-gold) / .5);
  background:rgba(var(--rgb-gold) / .08)}
.tag-sec{color:var(--color-emerald-soft);border:1px solid rgba(var(--rgb-emerald) / .45);
  background:rgba(var(--rgb-emerald) / .1)}
.tag-gtm{color:var(--color-marker-gtm);border:1px solid rgba(var(--rgb-marker-gtm) / .55);
  background:rgba(var(--rgb-marker-gtm) / .12)}

/* Заголовок материка. В workspace его создавал скрипт; здесь он есть в
   разметке, поэтому число рядом обновляется, а не рождается вместе с
   заголовком.                                                          */
.geo-head{margin:28px 0 4px;color:var(--color-gold);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;font-size:12px;display:flex;align-items:center;gap:12px}
.geo-head[hidden]{display:none !important}
.geo-head::after{content:"";flex:1;height:1px;background:rgba(var(--rgb-gold) / .25)}
.geo-count{color:var(--color-faint);font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}

.client-empty{margin-top:28px;color:var(--color-muted);font-size:14px}
.client-empty[hidden]{display:none !important}

@media (max-width:720px){
  .client-row{grid-template-columns:40px 1fr}
  .client-tags{grid-column:2;justify-content:flex-start}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Фаза 10: витрина логотипов и доска отзывов
   ═══════════════════════════════════════════════════════════════════════════ */

/* Стена логотипов. Логотипы приходят от клиентов в разных цветах, и на
   тёмном фоне пёстрый ряд рассыпается. Поэтому в покое они приглушены
   до одного тона, а под курсором возвращают собственный цвет — приём
   старый и здесь уместный: ряд читается как одно целое, а конкретный
   логотип можно рассмотреть.                                          */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;margin:18px 0 0;padding:0;list-style:none}
.logo-cell{display:grid;place-items:center;min-height:96px;padding:18px 22px;
  border:1px solid var(--color-hairline);border-radius:10px;
  background:var(--tint-plate);transition:border-color .22s,background .22s,box-shadow .22s}
.logo-cell:hover{border-color:rgba(var(--rgb-gold) / .45);
  background:rgba(var(--rgb-gold) / .05);box-shadow:var(--glow-rest)}
.logo-cell img{max-width:100%;height:auto;max-height:56px;width:auto;
  filter:var(--logo-filter);transition:filter .22s}
.logo-cell:hover img{filter:none}
.logo-note{font-size:12.5px;margin-top:14px}

/* Заглушка для гостя на закрытой странице. */
.gate .frame-in{display:grid;justify-items:center;text-align:center;gap:12px;padding:56px 32px}
.gate-icon{width:34px;height:34px;color:var(--color-gold);
  filter:drop-shadow(0 0 18px rgba(var(--rgb-gold) / .45))}
.gate h2{font-size:1.5rem}
.gate p{max-width:44ch}
.gate .cta-actions{margin-top:8px}

/* Отзывы. Две колонки на широком экране: отзыв читается целиком, а не
   тянется строкой на 1180px.                                          */
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0}
.review{margin:0}
.review .frame-in{display:grid;gap:14px;padding:30px}
.review-mark{width:26px;height:26px;color:var(--color-gold);opacity:.55;flex:none}
.review blockquote{margin:0;font-size:15.5px;line-height:1.65;color:var(--color-text-soft)}
.review blockquote p{margin:0 0 10px}
.review blockquote p:last-child{margin-bottom:0}
.review figcaption{display:grid;gap:2px;padding-top:14px;
  border-top:1px solid var(--color-hairline)}
.review figcaption b{color:var(--color-text);font-size:14px}
.review figcaption span{color:var(--color-muted);font-size:12.5px}
.review .review-client{color:var(--color-faint);font-size:12px}

@media (max-width:900px){
  .reviews{grid-template-columns:1fr}
}
@media (max-width:720px){
  .logo-wall{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  .logo-cell{min-height:78px;padding:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Фаза 11: кабинет, вход и регистрация
   ═══════════════════════════════════════════════════════════════════════════ */

/* Поля ввода. В теме их до сих пор не было: единственная форма жила в
   плагине и рисовалась скриптом. Перенесено из workspace на токены.   */
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border-radius:8px;font:inherit;font-size:14px;
  color:var(--color-text);background:var(--color-sunken);
  box-shadow:var(--inset-well);
  border:1px solid var(--color-control-edge);
  transition:border-color .18s,box-shadow .18s}
/* Фокус не подменяется цветом рамки покоя: на светлом фоне золотая
   рамка давала контраст 2.48 — человек с клавиатуры просто не видел,
   где он находится. Возвращено настоящее кольцо.                      */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.pref-rank select:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:2px;
  border-color:var(--color-gold)}
.field input::placeholder{color:var(--color-faint)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.field .pref-label{font-size:12px;color:var(--color-muted);letter-spacing:.06em;font-weight:700}
.field label em{color:var(--color-gold);font-style:normal}
.field-hint{font-size:11.5px;color:var(--color-faint)}
.field-check{flex-direction:row;align-items:flex-start;gap:10px}
.field-check input{width:auto;flex:none;margin-top:3px}
.field-check label{font-size:12.5px;letter-spacing:0;font-weight:600;line-height:1.5}

/* Ссылка золотом внутри абзаца — подчёркивание здесь уместно: без него
   ссылка в сплошном тексте не отличается от выделения цветом.         */
a.gold{color:var(--color-gold);text-decoration:underline;text-underline-offset:3px}
a.gold:hover{color:var(--color-gold-soft)}

.form-title{margin-bottom:6px}
.form-sub{color:var(--color-muted);font-size:13.5px;margin-bottom:20px}
.form-note{border-radius:8px;padding:14px 16px;font-size:13.5px;margin:6px 0 18px}
.form-note.ok{border:1px solid var(--color-success);
  background:var(--surface-ok);color:var(--color-success-ink)}
.form-note.err{border:1px solid var(--color-error);
  background:var(--surface-err);color:var(--color-error-ink)}

/* Вкладки «Вход / Регистрация». */
.tabs{display:flex;gap:8px;margin-bottom:20px}
.tab{padding:10px 18px;border-radius:8px;border:1px solid var(--color-control-edge);
  background:none;color:var(--color-text-soft);font:inherit;font-weight:800;font-size:13px;
  cursor:pointer;transition:.18s}
.tab:hover{border-color:rgba(var(--rgb-gold) / .5);color:var(--color-gold);box-shadow:var(--glow-rest)}
.tab.active{border-color:transparent;color:var(--fill-gold-ink);
  background:linear-gradient(180deg,var(--color-gold-soft),var(--color-gold) 55%,var(--color-gold-deep));
  box-shadow:inset 0 1px 0 var(--btn-sheen),var(--glow-hover)}
.tab:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

/* Кабинет. */
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:20px}
.dash-head h3{font-size:1.1rem}
.dash-head h3 span{color:var(--color-gold)}
.dash-logout{margin:0}
.dash-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.dash-title{color:var(--color-gold);font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:12px}

.status-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 10px;border-radius:6px;white-space:nowrap}
/* У каждого состояния своя пара «чернила + подложка». Раньше цвет брали
   из -soft, а подложку из того же тона с альфой: в тёмной теме -soft
   ярче фона и потому заметнее, в светлой светлее значит бледнее, и весь
   одиннадцатипиксельный текст значков уходил под порог читаемости.   */
.st-ready{color:var(--badge-ready-ink);border:1px solid currentColor;
  background:var(--badge-ready-bg)}
.st-work{color:var(--badge-work-ink);border:1px solid currentColor;
  background:var(--badge-work-bg)}
.st-wait{color:var(--badge-wait-ink);border:1px solid currentColor;
  background:var(--badge-wait-bg)}

/* «На проверке» стоит между работой и готовностью, поэтому и цвет
   промежуточный: изумруд готовности, но пунктиром — ещё не выдано. */
.st-check{color:var(--badge-check-ink);border:1px dashed currentColor;
  background:var(--badge-check-bg)}

/* Полоска стадии занимает всю ширину строки заказа под названием и
   значком: это не третья колонка, а подпись ко всей строке.          */
.order-row{display:grid;grid-template-columns:1fr auto auto;gap:14px 14px;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--color-hairline)}
.order-title b{color:var(--color-text);display:block;font-size:14px}
.order-title span{color:var(--color-muted);font-size:12px}

.stage{grid-column:1 / -1;display:flex;gap:12px;align-items:flex-start}
.stage-bar{display:flex;gap:5px;padding-top:5px;flex:none}
.stage-dot{width:22px;height:4px;border-radius:2px;background:rgba(var(--rgb-text) / .14)}
.stage-dot.is-done{background:var(--color-gold)}
.stage-text{font-size:12.5px;line-height:1.5;min-width:0}
.stage-text b{color:var(--color-text);display:block;margin-bottom:2px}
.stage-text .muted{color:var(--color-muted)}

/* Настройки кабинета: подпись под полем и ранжированный список языков. */
.hint{font-size:12px;line-height:1.5;color:var(--color-muted);margin:2px 0 0}
.pref-upsell{color:var(--color-gold-soft)}
.pref-langs{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pref-rank{display:flex;gap:10px;align-items:center}
.pref-rank select{flex:1;min-width:0}
.pref-num{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:6px;
  background:rgba(var(--rgb-gold) / .12);color:var(--color-gold);
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}

/* Телефон: код страны и номер. */
.phone-row{display:flex;gap:8px}
.phone-row .cc-select{flex:0 0 112px;min-width:112px}
.phone-row input{flex:1;min-width:0}

/* Просьба подтвердить почту — не ошибка и не успех, поэтому своя
   нейтральная плашка с золотой полосой слева.                        */
.verify-note{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:10px;
  border-left:3px solid var(--color-gold);background:rgba(var(--rgb-gold) / .06)}
.verify-note .icon{width:22px;height:22px;color:var(--color-gold);margin-top:2px}
.verify-note b{display:block;color:var(--color-text);margin-bottom:6px}
.verify-note p{margin:0 0 12px;font-size:13.5px;max-width:52ch}
.verify-note form{margin:0}

@media (max-width:900px){
  .dash-grid{grid-template-columns:1fr;gap:22px}
}
@media (max-width:720px){
  .order-row{grid-template-columns:1fr auto}
  .verify-note{flex-direction:column;gap:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Фаза 12: о компании, демо и политики
   ═══════════════════════════════════════════════════════════════════════════ */

/* Карточка раздела: номер, иконка, заголовок, текст, ссылка внизу.
   .team-grid и .acc-card — модификаторы без собственных правил, как и в
   workspace: они лишь адресуют потомков.                              */
.p-card .num{color:var(--color-gold);font-size:12px;font-weight:800;letter-spacing:.18em}
.p-card .icon{width:44px;height:44px;color:var(--color-gold);margin:18px 0 16px}
.p-card h3{font-size:1.25rem;margin-bottom:10px}
.p-card p{font-size:14px;color:var(--color-muted)}
.p-card .frame-in{display:flex;flex-direction:column}
.p-card .link-more{margin-top:auto;padding-top:16px}
.p-card .cta-actions{margin-top:auto;padding-top:14px}
/* Иконки соцсетей внутри карточки не должны наследовать 44px. */
.soc .icon{width:15px;height:15px;margin:0;color:inherit}

.p-avatar{width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(var(--rgb-gold) / .45);display:grid;place-items:center;
  color:var(--color-gold);font-weight:800;margin-bottom:14px}
.p-photo{width:112px;height:112px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(var(--rgb-gold) / .45);margin-bottom:16px;
  background:var(--color-panel);box-shadow:var(--glow-rest)}
.p-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.p-role{color:var(--color-gold);font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:10px}

.p-card .acc summary{padding:12px 0;font-size:13px}
.p-card .acc .acc-body{padding:0 2px 12px;font-size:13px}
.p-card .acc .acc-body p{margin-bottom:10px}
.team-grid .frame-in{display:flex;flex-direction:column}
.team-grid .p-role{min-height:34px}
.team-grid .acc{margin-top:auto}
.team-grid .soc-row{margin-top:16px}

/* Список с ромбовидным маркером. */
.dlist{list-style:none;display:grid;gap:12px;padding:0;margin:0}
.dlist li{position:relative;padding-left:24px;font-size:14.5px}
.dlist li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  background:var(--color-gold);transform:rotate(45deg)}
.dlist b{color:var(--color-text)}

/* Демо-версия отчёта. */
.demo-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}
.demo-names{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:18px}
.demo-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-muted);margin-bottom:4px}
.demo-name{margin:0;font-size:19px;color:var(--color-text)}
.demo-list{list-style:none;margin:10px 0 0;padding:0}
.demo-list li{position:relative;padding:7px 0 7px 26px;font-size:13.5px;
  color:var(--color-text);border-bottom:1px dashed rgba(var(--rgb-text) / .12)}
.demo-list li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:9px;
  border:2px solid var(--color-gold);border-radius:2px}
.demo-list.gold li::before{background:var(--color-gold)}
.demo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.demo-reader{margin-top:16px}
.demo-reader iframe{width:100%;height:78vh;border-radius:10px;background:var(--color-panel);
  border:1px solid rgba(var(--rgb-text) / .16)}

@media (max-width:900px){
  .demo-cols{grid-template-columns:1fr}
}

/* Кабинет: строка действий в шапке и раскрывающиеся «Мои данные». */
.dash-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dash-actions form{margin:0}
.theme-toggle[hidden]{display:none !important}
.theme-toggle span{font-variant-numeric:tabular-nums}
.dash-acc{margin-top:28px;border-top:1px solid var(--color-hairline)}
.dash-acc > summary{padding:16px 0;cursor:pointer;color:var(--color-gold);
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;list-style:none}
.dash-acc > summary::-webkit-details-marker{display:none}
.dash-acc > summary::after{content:"+";float:right;font-size:16px;line-height:1}
.dash-acc[open] > summary::after{content:"−"}
.dash-acc > summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.dash-form{max-width:420px;margin:0 0 8px}

/* Глобус в кабинете. Публичная высота рассчитана на герой во весь
   экран, здесь он — блок внутри карточки, поэтому ниже и с полем
   под подпись. */
/* Кнопки приближения. Колесо работает только пока указатель на глобусе,
   и находят его не все — кнопки делают приближение видимым и дают его
   тем, у кого нет колеса вовсе: с клавиатуры и с телефона.            */
.globe-zoom{position:absolute;right:12px;bottom:12px;z-index:3;
  display:flex;flex-direction:column;gap:6px}
.globe-zoom-btn{width:32px;height:32px;display:grid;place-items:center;
  border:1px solid rgba(var(--rgb-gold) / .28);border-radius:8px;
  background:rgba(var(--rgb-canvas) / .72);color:var(--color-gold);
  font-family:var(--font-body);font-size:17px;font-weight:700;line-height:1;
  cursor:pointer;backdrop-filter:blur(6px);
  transition:background .16s,border-color .16s,color .16s,opacity .16s}
.globe-zoom-btn:hover:not(:disabled){background:rgba(var(--rgb-gold) / .16);
  border-color:rgba(var(--rgb-gold) / .55)}
.globe-zoom-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.globe-zoom-btn:disabled{opacity:.35;cursor:default}
/* На тёмной вставке глобуса в светлом кабинете кнопки живут на тёмном,
   а не на фоне страницы, — иначе они пропадают на своей же подложке. */
:root[data-theme="light"] .cabinet-globe .globe-zoom-btn{
  background:rgba(0,0,0,.34);color:var(--fill-gold);
  border-color:rgba(var(--rgb-fill-gold) / .38)}

/* ═══════════════════════════════════════════════════════════════════════════
   КАРТА УКРАИНЫ — врезка в кабинете

   КАНАЛЬНЫЙ КОНТРАКТ. На карту претендуют три разных утверждения, и если
   они делят один канал, картинка начинает врать. Поэтому каналы разведены
   раз и навсегда:

     заливка области   — ТОЛЬКО статус территории. Это единственное
                         утверждение о мире, и рисовать его можно лишь по
                         данным с датой и источником. Пока такого листа
                         нет, заливка нейтральна у всех областей;
     маркер в центроиде — заказы этого человека. Заказ не красит область:
                         иначе покупка клиента молча перекрашивала бы
                         утверждение о территории;
     контур и яркость  — состояние выбора и наведения. Это про указатель,
                         а не про мир, и потому обратимо и мимолётно.

   Нарушение контракта дешевле всего заметить здесь, поэтому правило
   записано рядом с правилами, а не в переписке.
   ═══════════════════════════════════════════════════════════════════════════ */

.geo-stage{margin:0 0 8px}
.geo-modes{display:inline-flex;gap:2px;padding:3px;margin-bottom:10px;
  border:1px solid var(--color-hairline);border-radius:9px;
  background:var(--color-surface-quiet)}
.geo-mode{padding:6px 14px;border:0;border-radius:6px;background:none;
  color:var(--color-muted);font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;cursor:pointer;transition:background .16s,color .16s}
.geo-mode:hover{color:var(--color-text)}
.geo-mode.is-on{background:var(--surface-overlay);color:var(--color-gold);
  box-shadow:var(--glow-rest)}
.geo-mode:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* Обе проекции занимают одну коробку, чтобы список заказов под ними не
   прыгал при переключении. */
/* Высота та же, что у глобуса, чтобы список заказов под ним не прыгал
   при переключении вида. Класс .cabinet-globe врезке не даётся: он несёт
   тёмную оправу приборного экрана, и карта в светлой теме оказывалась на
   почти чёрном поле, которое читалось дырой, а не бумагой.            */
.ua-shell{position:relative;overflow:hidden;
  aspect-ratio:1000/682;height:auto;min-block-size:320px;max-block-size:460px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-panel);box-shadow:var(--glow-rest)}
.ua-frame{position:absolute;inset:0;touch-action:pan-y;cursor:grab}
.ua-frame.is-dragging{cursor:grabbing}
.ua-layer{position:absolute;inset:0;transform-origin:0 0;
  transition:transform .18s ease-out}
.ua-layer.is-live{transition:none}
.ua-layer > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ua-marks{pointer-events:none}

/* Заливка — территория. Пока листа статусов нет, у всех областей она
   одна и та же: карта не утверждает ничего, чего не знает. */
.ua-region{fill:var(--map-idle);stroke:var(--map-line);stroke-width:1.1;
  stroke-linejoin:round;transition:fill .16s;cursor:pointer}
.ua-region[data-kind="city"]{fill:var(--map-city)}

/* Статус территории — единственное, что говорит заливка.
   Обычная область остаётся фирменного цвета; занятая целиком гасится в
   серый, то есть лишается цвета вовсе; занятая частично получает тот же
   серый штриховкой поверх обычного — вторым каналом, чтобы разница
   читалась и там, где оттенки серого сливаются. */
.ua-region[data-status="occupied"]{fill:var(--map-occupied)}
.ua-region[data-status="partial"]{fill:url(#ua-hatch)}
.ua-hatch-bg{fill:var(--map-idle)}
.ua-hatch-line{fill:var(--map-occupied-line)}
.ua-defs{position:absolute;pointer-events:none}

/* Подпись и легенда. Заливка без даты и источника — мнение сайта,
   поэтому они выводятся ровно вместе со слоем и никогда без него. */
.ua-caption{margin:8px 0 0;font-size:12px;color:var(--color-muted)}
.ua-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;padding:0;
  list-style:none;font-size:12px;color:var(--color-muted)}
.ua-legend li{display:flex;align-items:center;gap:7px}
.ua-key{width:14px;height:14px;flex:none;border-radius:3px;
  border:1px solid var(--color-border)}
.ua-key-plain{background:var(--map-idle)}
.ua-key-occupied{background:var(--map-occupied)}
.ua-key-partial{background:repeating-linear-gradient(45deg,
  var(--map-idle) 0 4px,var(--map-occupied-line) 4px 7px)}

/* Контур и яркость — выбор и наведение. */
.ua-region:hover{fill:var(--map-hover)}
.ua-region.is-active{fill:var(--map-active);stroke:var(--color-gold);stroke-width:1.8}
/* У области со статусом наведение и выбор работают контуром и яркостью,
   но не заливкой: иначе указатель на секунду стирал бы утверждение
   о территории. */
.ua-region[data-status]:hover,
.ua-region[data-status].is-active{filter:brightness(1.12)}
.ua-region[data-status="occupied"]:hover,
.ua-region[data-status="occupied"].is-active{fill:var(--map-occupied)}
.ua-region[data-status="partial"]:hover,
.ua-region[data-status="partial"].is-active{fill:url(#ua-hatch)}
.ua-frame:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}

/* Маркер — заказ. Цвет стадии приходит из тех же токенов, что и значки
   в списке, поэтому карта и список говорят одним языком. */
.ua-mark{stroke:var(--color-canvas);stroke-width:1.6}
.ua-mark.is-check{stroke-dasharray:2 2}
.ua-count{fill:var(--color-canvas);font-size:11px;font-weight:800;
  text-anchor:middle;dominant-baseline:central;paint-order:stroke}

/* Имя области у курсора. Ничего больше: подпись отвечает на «что это»,
   а не пересказывает карточку заказа. */
.ua-hint{position:absolute;z-index:4;margin:0;padding:5px 9px;
  border-radius:7px;pointer-events:none;white-space:nowrap;
  background:var(--surface-overlay);color:var(--color-text);
  border:1px solid var(--color-border);box-shadow:var(--shadow-overlay);
  font-size:12px;font-weight:700}
.ua-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Обратная связь: выбранная на карте область приглушает чужие строки в
   списке заказов, а не перекрашивает их. Приглушение обратимо и не
   спорит со значком стадии, у которого свой канал. */
/* ── Результаты поиска ────────────────────────────────────────────────
   Список, а не карточки: у результата нет ничего, кроме заголовка и
   выдержки, и рамка вокруг двух строк текста только утяжеляет.       */
.search-list{list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-direction:column;gap:18px;max-width:70ch}
.search-item{padding-block-end:18px;border-bottom:1px solid var(--color-border)}
.search-item:last-child{border-bottom:0}
.search-link{font-size:17px;font-weight:700;color:var(--color-text);text-decoration:none}
.search-link:hover{color:var(--color-gold)}
.search-item p{margin:6px 0 0;font-size:13.5px}

/* ── Отраслевой слой карты ────────────────────────────────────────────
   Знак несёт величину размером, а не цветом: заливка области занята
   статусом территории, и второй смысл в тот же канал не помещается.
   Пунктирный контур вместо заливки — это кластер: у персонального
   наблюдения точных координат нет и не должно быть.               */
.ua-picker{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 10px}
.ua-chip{font:600 12px var(--font-body);padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--color-border);background:transparent;color:var(--color-muted);
  transition:border-color .15s,background .15s,color .15s}
.ua-chip:hover{border-color:var(--color-control-edge);color:var(--color-text)}
.ua-chip.is-on{background:var(--color-emerald);border-color:var(--color-emerald);
  color:var(--color-panel)}
.ua-picker .ua-source{width:100%;margin:2px 0 0;font-size:11.5px;color:var(--color-faint)}
.ua-industry{pointer-events:none}
.ua-ind{fill:var(--color-emerald);fill-opacity:.28;stroke:var(--color-emerald);stroke-width:1.4}
.ua-ind.is-cluster{fill:none;stroke-dasharray:4 3;stroke-width:2}

/* ── Готовое к скачиванию ─────────────────────────────────────────────
   Отдельная плашка над всем остальным: это единственное место кабинета,
   где клиенту есть что забрать, и искать его в общем списке он не
   должен.                                                              */
.ready-box{margin:24px 0 0;padding:16px 18px;border-radius:var(--radius-md);
  border:1px solid rgba(var(--rgb-gold) / .28);background:rgba(var(--rgb-gold) / .07)}
.ready-box .dash-title{margin:0 0 10px}
.ready-list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.ready-row{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.ready-name{font-size:14px;font-weight:700;color:var(--color-text)}

/* ── Заказы по стадиям: он же фильтр списка ───────────────────────────
   Строка — ссылка целиком, а не текст с маленькой кнопкой: попасть
   пальцем в полоску высотой десять пикселей нельзя, а в строку высотой
   в тридцать восемь — можно.                                          */
.stages{margin:26px 0 0;max-width:680px}
.stages-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.stages-all{font-size:12.5px;color:var(--color-gold);text-decoration:none;
  border-bottom:1px solid transparent}
.stages-all:hover{border-bottom-color:currentColor}
.stages-rows{list-style:none;margin:10px 0 0;padding:0;display:flex;
  flex-direction:column;gap:2px}
.stages-hit{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;
  align-items:center;gap:12px;padding:8px 10px;margin-inline:-10px;
  border-radius:var(--radius-sm);text-decoration:none;color:inherit;
  transition:background .15s ease-out}
a.stages-hit:hover{background:var(--tint-plate)}
.stages-row.is-on .stages-hit{background:rgba(var(--rgb-emerald) / .14)}
.stages-hit.is-empty{opacity:.55;cursor:default}
.stages-name{font-size:12.5px;color:var(--color-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stages-row.is-on .stages-name{color:var(--color-text);font-weight:700}
/* Дорожка показывает шкалу: без неё пустая стадия исчезала бы, и было бы
   непонятно, ноль это или строку не вывели. */
.stages-track{height:9px;border-radius:9999px;background:var(--bar-track);
  box-shadow:var(--inset-well);overflow:hidden}
.stages-bar{display:block;height:100%;border-radius:9999px;
  background:var(--bar-fill);transition:width .3s ease-out}
.stages-value{font-size:13px;font-weight:800;color:var(--color-text);
  font-variant-numeric:tabular-nums;min-width:1.5em;text-align:right}
.stages-note{font-size:12.5px;margin:14px 0 0;display:flex;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){ .stages-bar{transition:none} }
@media (max-width:540px){
  .stages-hit{grid-template-columns:1fr auto;grid-template-areas:"name value" "track track";gap:4px 10px}
  .stages-name{grid-area:name}
  .stages-value{grid-area:value}
  .stages-track{grid-area:track}
}

/* Контейнер списка — flex-колонка: только так работает order, которым
   совпавшие с выбранной областью строки поднимаются наверх. */
.order-list{display:flex;flex-direction:column}
.order-row.is-dimmed{opacity:.38}
.order-row{transition:opacity .16s}
@media (prefers-reduced-motion:reduce){
  .order-row{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .ua-layer,.ua-region{transition:none}
}

/* Глобус и врезка живут в одной коробке: пропорция взята у карты
   (1000×682), высота одна и та же. Пока у глобуса была своя высота, а
   у холста — свой размер, посчитанный до раскладки, сфера вылезала за
   рамку и наезжала на график под ней. Обрезка обязательна: холст
   WebGL не обязан помещаться в родителя, и единственное, что его
   удерживает, — overflow.                                            */
.cabinet-globe{aspect-ratio:1000/682;height:auto;
  min-block-size:320px;max-block-size:460px;margin:0 0 8px;overflow:hidden}
.cabinet-globe .globe-canvas{inset:0}
.globe-empty{position:absolute;inset:auto 0 18px;text-align:center;margin:0;
  font-size:12.5px;color:var(--color-faint);padding:0 24px}
.cabinet-globe .globe-loading{font-size:12.5px}

/* Глобус в светлом кабинете остаётся тёмным — и это не забытая правка.
   Светлый шар на светлой карточке неизбежно читается картинкой в
   документе, а карта заказов должна быть главным предметом на странице.
   Днём приборная панель тоже держит тёмный дисплей: радар, терминал.
   Чтобы тёмное поле не выглядело дырой, у него появляется оправа —
   фаска, внутренняя тень сверху и светлый блик снизу. Тогда это
   намеренная вставка, единственная на всей светлой странице.         */
:root[data-theme="light"] .cabinet-globe{
  border:1px solid var(--globe-bezel);
  border-radius:var(--radius-md);
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.07),transparent 60%),
    var(--surface-globe);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(255,255,255,.10),
    var(--glow-rest)}
:root[data-theme="light"] .cabinet-globe .globe-shell{
  border-color:transparent;background:none;box-shadow:none}
:root[data-theme="light"] .globe-empty,
:root[data-theme="light"] .cabinet-globe .globe-loading{color:var(--on-globe)}


/* --- catalogue --- */
/* ═══════════════════════════════════════════════════════════════════════════
   КАТАЛОГ ОТЧЁТОВ — page-reports.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Чип-ссылка. Фасеты каталога считает сервер, поэтому чип здесь <a>,
   а не <button>: у каждой комбинации фильтров собственный адрес.
   Правила .chip подходят целиком, не хватает только центровки — её
   <button> давал сам, а якорь нет.                                     */
.chips a.chip{display:inline-flex;align-items:center;justify-content:center;text-align:center}

.reports-count{font-size:1.15rem}
.reports-count b{color:var(--color-gold)}

/* Карточка отчёта: колонка, языки прижаты вниз. В ряду карточки разной
   длины, и без этого подписи языков гуляли бы по вертикали.            */
.reports-grid{margin-top:4px}
.report-card .frame-in{display:flex;flex-direction:column;gap:12px;padding:24px}
.rc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rc-demo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-emerald-soft)}
.rc-demo .icon{width:13px;height:13px;flex:none}
.rc-title{font-size:1.06rem;line-height:1.35;margin:0}
.rc-title a{color:var(--color-text);transition:color .18s}
.rc-title a:hover{color:var(--color-gold)}
.rc-title a:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.rc-sum{font-size:13.5px;line-height:1.6;margin:0}

.rc-facts{list-style:none;display:grid;gap:7px;padding:0;margin:2px 0 0}
.rc-facts li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--color-text-soft)}
.rc-facts .icon{width:15px;height:15px;flex:none;color:var(--color-gold)}

/* Языки выдачи — подписи, а не ссылки: скачивание проверяет права, и
   кнопка из каталога уводила бы на отказ вместо страницы отчёта.       */
.rc-langs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;
  padding-top:14px;border-top:1px solid var(--color-hairline)}
.rc-langs-label{color:var(--color-faint);font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase}
.rc-lang{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  color:var(--color-text-soft);border:1px solid rgba(var(--rgb-text) / .16)}
.rc-lang-none{color:var(--color-faint);border-style:dashed}

/* Пагинация. Классы кнопок дописывает шаблон, здесь только раскладка:
   второй системы стилей для страниц каталога заводить незачем.         */
.reports-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:34px}
.reports-pager .page-numbers{min-width:42px}
.reports-pager .dots{color:var(--color-faint);align-self:center;padding:0 4px}

.reports-note{font-size:12.5px;margin-top:22px;max-width:70ch}

/* .cards-3 схлопывается сразу с трёх колонок в одну. Для каталога, где
   карточек два десятка, промежуточный шаг в две колонки нужнее, чем для
   трёх карточек продуктов, — поэтому правило только для этой сетки.    */
@media (max-width:940px) and (min-width:721px){
  .reports-grid.cards-3{grid-template-columns:1fr 1fr}
}

/* --- single --- */
/* ═══════════════════════════════════════════════════════════════════════════
   СТРАНИЦА ОДНОГО ОТЧЁТА — single-owl_report.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Плашка вида отчёта над заголовком. Отдельная строка, а не .eyebrow:
   .tag несёт цвет ступени воронки, и золотая черта надзаголовка рядом
   с ним читалась бы как вторая, конкурирующая метка.                  */
.report-kind{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

/* Полоса метаданных. auto-fit вместо фиксированных колонок: пар бывает
   от двух до четырёх (период и страницы заполнены не всегда), и на
   узком экране они переносятся, а не оставляют пустые столбцы.        */
.report-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:18px 28px;max-width:860px;margin:26px 0 0;padding-top:20px;
  border-top:1px solid var(--color-hairline)}
.report-meta > div{display:grid;gap:4px}
.report-meta dt{color:var(--color-faint);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
.report-meta dd{margin:0;color:var(--color-text);font-size:14.5px}

/* Языки выдачи — ряд равных кнопок, а не выпадающий список: сколько
   версий готово, видно сразу, и это часть предложения.                */
.report-files{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* Текст из редактора: ширина по строке, а не по контейнеру в 1180px. */
.report-body{max-width:72ch}
.report-body > :first-child{margin-top:0}

/* Карточки соседних периодов. .frame-in растянут, чтобы «Узнать
   подробнее» у всех карточек ряда стояло на одной линии независимо
   от длины собранного заголовка.                                      */
.frame.report-card{display:flex}
.report-card .frame-in{display:flex;flex-direction:column;gap:8px;flex:1;width:100%;padding:22px}
.report-card .tag{align-self:flex-start}
.report-card h3{font-size:1.06rem;line-height:1.4;margin:0}
.report-card .muted{font-size:12.5px;margin:0}
.report-card .link-more{margin-top:auto;padding-top:12px}

/* --- requests --- */
/* ═══════════════════════════════════════════════════════════════════════════
   Фаза 13: заявка на язык, которого у отчёта нет
   ═══════════════════════════════════════════════════════════════════════════ */

/* Карточка стоит под самим отчётом и спорить с ним не должна: рамка и
   поля общие с остальной темой, своя здесь только сетка формы — язык и
   почта рядом, комментарий и кнопки во всю ширину.                     */
.lang-ask{margin-top:28px}
.lang-ask-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.lang-ask-head .icon{width:22px;height:22px;color:var(--color-gold);flex:none;margin-top:3px}
.lang-ask-head h3{margin:0;font-size:1.05rem}
.lang-ask > .frame-in > p.muted{margin:0 0 18px;font-size:13.5px;max-width:66ch}
.lang-ask-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 18px;align-items:start}
.lang-ask-form .lang-ask-note{grid-column:1 / -1;max-width:540px}
.lang-ask-form textarea{resize:vertical}
.lang-ask-actions{grid-column:1 / -1;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:2px}
.lang-ask-meanwhile{margin:0;color:var(--color-faint);font-size:12.5px}
@media (max-width:640px){
  .lang-ask .frame-in{padding:22px 18px}
  .lang-ask-actions{gap:10px}
  .lang-ask-actions .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Фаза 13: выдача файлов, просмотр в странице, лента просмотренного
   ═══════════════════════════════════════════════════════════════════════════ */

.delivery{display:grid;gap:12px}
.delivery-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.delivery-note{margin:0;font-size:12.5px;color:var(--color-muted);max-width:60ch}

/* Кнопка с каретой: слева действие, справа список. Разделены волосяной
   линией внутри одной золотой плашки — так видно, что это одно целое,
   а нажатий два разных.                                               */
.dl-split{display:inline-flex}
.dl-main{border-top-right-radius:0;border-bottom-right-radius:0}
.dl-caret{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:10px;padding-right:10px;
  gap:0;box-shadow:inset 1px 0 0 var(--btn-divider),inset 0 1px 0 var(--btn-sheen),var(--glow-rest)}
.dl-caret .icon{transition:transform .2s}
.dl-split.open .dl-caret .icon{transform:rotate(180deg)}

/* Меню в потоке, а не поверх карточки: рамка построена на clip-path, и
   он обрезает всё, что выходит за её границы, — абсолютное меню было
   видно на два десятка пикселей. В потоке карточка растёт под меню. */
.dl-menu{display:none;margin-top:12px;
  width:290px;max-width:100%;padding:8px;border-radius:12px;
  border:1px solid rgba(var(--rgb-gold) / .22);
  background:radial-gradient(120% 80% at 90% 0%,rgba(var(--rgb-gold) / .10),transparent 60%),
    var(--surface-overlay);
  box-shadow:var(--shadow-overlay)}
[data-dl-split].open .dl-menu{display:block}
.dl-list{max-height:320px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-gold) / .35) transparent}
.dl-list::-webkit-scrollbar{width:8px}
.dl-list::-webkit-scrollbar-thumb{background:rgba(var(--rgb-gold) / .3);border-radius:8px}

.dl-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:var(--color-text-soft);font-size:13px;font-weight:700;text-decoration:none;
  transition:background .16s,color .16s}
.dl-item[hidden]{display:none !important}
.dl-item:hover,.dl-item:focus-visible{background:rgba(var(--rgb-gold) / .10);color:var(--color-gold)}
/* Растягивается подпись, а не значок: у пункта «+ другой язык» первым
   идёт квадратик со знаком, и на него это правило раздувало плашку во
   всю ширину строки. */
.dl-item > span:first-of-type:not(.dl-plus){flex:1;min-width:0}
.dl-add > .dl-plus + span{flex:1;min-width:0}
.dl-item .icon{width:15px;height:15px;flex:none}
.dl-fmt{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--color-faint);flex:none}
.dl-item:hover .dl-fmt{color:var(--color-gold)}
.dl-item.is-primary{color:var(--color-gold);
  background:linear-gradient(90deg,rgba(var(--rgb-gold) / .16),rgba(var(--rgb-gold) / .04));
  box-shadow:inset 2px 0 0 var(--color-gold)}
/* «Оба файла» — главное, ради чего меню и открывают: изумруд отделяет
   его от списка языков, не соревнуясь с золотом основного действия. */
.dl-item.is-both{color:var(--color-emerald-soft);
  background:rgba(var(--rgb-emerald) / .08);margin:4px 0}
.dl-item.is-both:hover{background:rgba(var(--rgb-emerald) / .16);color:var(--color-emerald-soft)}
.dl-item.is-both .dl-fmt{color:var(--color-emerald-soft)}
/* Пункт «+ другой язык» — не файл, а заявка: пунктирная рамка и
   приглушённый цвет, чтобы он не спорил с настоящими языками выше. */
.dl-add{margin-top:6px;border:1px dashed rgba(var(--rgb-gold) / .28);
  color:var(--color-muted);font-weight:600}
.dl-add:hover,.dl-add:focus-visible{border-color:rgba(var(--rgb-gold) / .55);
  color:var(--color-gold)}
.dl-plus{display:grid;place-items:center;width:18px;height:18px;flex:none;
  border-radius:6px;background:rgba(var(--rgb-gold) / .14);color:var(--color-gold);
  font-size:14px;font-weight:700;line-height:1;transition:background .16s,color .16s}
.dl-add:hover .dl-plus{background:var(--color-gold);color:var(--color-canvas)}
.dl-sep{padding:10px 10px 6px;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-faint);
  border-top:1px solid var(--color-hairline);margin-top:4px}
.dl-empty{margin:10px;font-size:12.5px;color:var(--color-faint)}
.dl-empty[hidden]{display:none !important}

/* Просмотр в странице. */
.preview-box{margin-top:6px;border:1px solid rgba(var(--rgb-gold) / .22);border-radius:12px;
  overflow:hidden;background:var(--surface-overlay);box-shadow:var(--glow-rest)}
.preview-box[hidden]{display:none !important}
.preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--color-hairline);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold)}
.preview-frame{height:clamp(420px,72vh,860px)}
.preview-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}

/* Лента «вы смотрели». Горизонтальная прокрутка, а не сетка: это
   подсказка сбоку от основного содержания, и высоту страницы она
   занимать не должна.                                                */
.recent-section{padding-top:8px}
.recent-section[hidden]{display:none !important}
.recent-head{margin-bottom:14px}
.recent-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-gold) / .3) transparent}
.recent-strip::-webkit-scrollbar{height:8px}
.recent-strip::-webkit-scrollbar-thumb{background:rgba(var(--rgb-gold) / .28);border-radius:8px}
.recent-card{flex:0 0 auto;width:238px;scroll-snap-align:start;display:grid;gap:8px;
  padding:16px 18px;border-radius:10px;text-decoration:none;
  border:1px solid var(--color-hairline);background:var(--tint-plate);
  transition:border-color .2s,background .2s,box-shadow .2s}
.recent-card:hover{border-color:rgba(var(--rgb-gold) / .45);
  background:rgba(var(--rgb-gold) / .05);box-shadow:var(--glow-rest)}
.recent-card .tag{justify-self:start}
.recent-card b{color:var(--color-text);font-size:14px;line-height:1.35}
.recent-period{color:var(--color-faint);font-size:12px;font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .dl-menu{width:100%}
  .recent-card{width:200px}
}
.delivery-locked{display:grid;gap:10px;justify-items:start}

/* ── Светлая тема: правки формы, а не только цвета ─────────────────────
   Токенами задаётся цвет, но три вещи в светлой теме неправильны по
   форме, а не по тону, и лечатся только правилом.                     */

/* 1. Срезанный угол. На тёмном он читается как грань приборной панели;
      на белом та же линия становится чертёжной засечкой. В светлой теме
      карточка — обычный лист: скругление и мягкая тень. Тень оставлена
      фильтром, потому что правило общее для обеих тем.                */
:root[data-theme="light"] .frame,
:root[data-theme="light"] .frame-in{clip-path:none;border-radius:14px}
:root[data-theme="light"] .frame{padding:1px}

/* 2. Бейджи статусов. Жёсткая кайма в цвет текста на светлом фоне даёт
      обводку вокруг каждого слова; мягкая пилюля говорит то же самое
      тише. Пунктир у «на проверке» остаётся: он значит «ещё не выдано». */
:root[data-theme="light"] .status-badge{border-color:transparent;padding:5px 11px;border-radius:9999px}
:root[data-theme="light"] .st-check{border-style:dashed;border-color:var(--color-control-edge)}

/* 3. Подписи капсом. Золотом они кричали; их работа — называть раздел,
      а не привлекать внимание. Slate 500, а не 400: на 400 контраст
      2.56:1, то есть подпись, которую не прочесть.                    */
:root[data-theme="light"] .dash-title,
:root[data-theme="light"] .eyebrow{color:var(--color-faint)}
:root[data-theme="light"] .eyebrow::before{background:var(--color-control-edge)}
:root[data-theme="light"] .eyebrow .dotsep{background:var(--color-faint)}

/* 4. Плашка готового отчёта. Золотая подложка на белом выглядела
      предупреждением; тиловая говорит «здесь есть что забрать». */
:root[data-theme="light"] .ready-box{border-color:#99f6e4;background:#f0fdfa}