/* ═══════════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА startt.ru — версия 3 (аудит 27.10.2026; основа — версия 2)
   Что изменено и почему — audit/changelog.md. Правила — audit/DESIGN-v3.md.
   Единственное место, где задаются цвет, шрифт, размеры, интервалы,
   отступы, скругления, иконки, тени, движение и раскладка рядов.
   В коде страниц — только классы системы и место плиток в сетке.

   УСТРОЙСТВО (по M3 ref→sys→comp, Gravity private→semantic, Carbon core):
   1. ПАЛИТРА И ШКАЛЫ (--c-*, --sp-*) — сырые значения. Палитру --c-* компоненты не берут никогда.
      Шкалу отступов --sp-* компонент может брать для внутренних отступов (как в Carbon); общие отступы — роли.
   2. РОЛИ (--color-*, --t-*, --space-*, --r-*, --icon-*, --shadow-*, --dur-*) —
      имя называет назначение, а не значение. Компоненты берут только роли.
   3. КОМПОНЕНТЫ — классы ниже. Числа внутри компонента — только у ленты ДТ и геометрия
      (повороты, 1–2 px линии, ширины плашек) — исключения записаны в DESIGN-v3.md.
   TILDA: этот файл — CSS проекта. Он грузится после CSS Тильды; там, где Тильда задает
   свои правила с той же или большей силой (фокус), стоит !important — это записано.
   Источники правил — DESIGN-v3.md, раздел «Источники».
   ═══════════════════════════════════════════════════════════════════ */

/* ── ШРИФТЫ: только Sofia Sans Condensed. Sofia Sans обычной ширины удалена: ни одно правило ее не берет, браузер ее не загружал ── */
@font-face{font-family:'Sofia Sans Condensed';font-style:normal;font-weight:1 1000;font-display:swap;src:url('https://static.tildacdn.com/tila3561-3863-4033-b864-366136356533/SofiaSansCond-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Sofia Sans Condensed';font-style:normal;font-weight:1 1000;font-display:swap;src:url('https://static.tildacdn.com/tila6136-3264-4336-b031-383432373534/SofiaSansCond-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+20BD;}

:root{
  /* ═══ 1. ПАЛИТРА «Сад» ═══ */
  --c-green:#027b49; --c-green-h:#015c37;
  --c-ember:#fa4d43; --c-ember-d:#d93a31; --c-ember-dd:#c8322a;   /* ember-d / -dd — для фона под белым текстом (контраст 4,57 и 5,32) */
  --c-carbon:#000000; --c-iron:#1f1f1f; --c-coal:#3d3d3d; --c-graphite:#5a5a5a;
  --c-concrete:#d9d9d9; --c-ash:#c4c4c4; --c-mist:#ececec; --c-white:#ffffff;

  /* ═══ 1. ШКАЛА ОТСТУПОВ: шаг 4 px (Carbon, Atlassian, Gravity) ═══ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ═══ 2. РОЛИ ЦВЕТА ═══ */
  /* фон */
  --color-bg-page:var(--c-concrete);        /* фон страницы */
  --color-bg-tile:var(--c-white);           /* обычная плитка, окно, шторка, плашка */
  --color-bg-tile-second:var(--c-mist);     /* плитка второго плана, подложка иконки, кнопка второго плана */
  --color-bg-accent:var(--c-ember-d);       /* акцентная плитка, плитка-призыв: под белым текстом */
  --color-bg-accent-hover:var(--c-ember-dd);
  --color-bg-action:var(--c-green);         /* зеленая кнопка («Ок», маршрут) */
  --color-bg-action-hover:var(--c-green-h);
  --color-bg-header:rgba(255,255,255,.92);
  --color-bg-scrim:rgba(0,0,0,.42);         /* затемнение под шторкой меню */
  --color-bg-veil:rgba(0,0,0,.55);          /* затемнение под окном контактов */
  /* текст */
  --color-text-strong:var(--c-carbon);      /* заголовки, телефоны, меню */
  --color-text:var(--c-coal);               /* весь остальной текст и подписи (решение Томаса 24.10) */
  --color-text-inverse:var(--c-white);      /* текст на заливке: на акцентном (4,57) и на зеленом (5,34) фоне — только 100 % белый */
  --color-text-on-accent:var(--color-text-inverse);   /* прежнее имя, оставлено: им пользуются страницы и HEAD */
  --color-link:var(--c-green);              /* ссылки, цены, акцентные слова — только на белом и сером фоне плитки */
  --color-link-line:rgba(2,123,73,.4);
  /* линии */
  --color-border:var(--c-ash);              /* рамка плитки */
  --color-border-hover:rgba(0,0,0,.18);
  --color-divider:rgba(0,0,0,.08);          /* линии между пунктами меню */
  --color-divider-strong:rgba(0,0,0,.18);
  --color-handle:rgba(0,0,0,.2);            /* ручка шторки */
  --color-focus:var(--c-green);             /* кольцо фокуса с клавиатуры: на белом 5,34, на фоне страницы 3,78 */
  --color-focus-on-accent:var(--c-white);   /* кольцо фокуса внутри красной плитки: зеленое на красном — 1,17 */
  --color-h1-shine:var(--c-graphite);       /* блик по черному H1 */
  --color-h1-shine-link:var(--c-white);     /* блик по зеленому слову H1 */
  /* лента ДТ (исключение): статусы и текст «экрана программы» */
  --color-band-text:var(--c-iron); --color-band-muted:var(--c-graphite);
  --color-status-neutral:var(--c-graphite); --color-status-warn:var(--c-ember); --color-status-ok:var(--c-green);
  --lga:var(--c-carbon); --lgb:var(--c-white);   /* логотип */

  /* ═══ 2. РОЛИ ШРИФТА ═══ */
  --ff:'Sofia Sans Condensed','Arial Narrow',Arial,sans-serif;
  --ff-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;   /* лента ДТ */
  --fw-regular:400; --fw-semibold:600; --fw-bold:700;
  --ls-caps:.08em;
  --ls-menu:.04em;   /* пункты меню капсом; раньше было в HEAD с !important */
  /* 9 ролей текста + одна служебная (огромная цифра 404). Каждая роль = размер / межстрочный / начертание.
     Межстрочный: текст 1.5, заголовки 1.1–1.2 (Carbon, Atlassian). */
  --fs-display:clamp(34px,4.4vw,44px); --lh-display:1.05;   /* H1 страницы, капс */
  --fs-headline-l:32px; --lh-headline-l:1.1;                /* крупный заголовок плитки-призыва, акцентной плитки, цена */
  --fs-headline:24px;   --lh-headline:1.2;                  /* заголовок раздела, телефон */
  --fs-title:22px;      --lh-title:1.2;                     /* заголовок плитки и карточки */
  --fs-body-l:20px;     --lh-body-l:1.5;                    /* вводный абзац */
  --fs-body:18px;       --lh-body:1.5;                      /* текст */
  --fs-label:16px;      --lh-label:1.25;                    /* меню, кнопки, навигационная плитка, телефон в шапке */
  --fs-caption:14px;    --lh-caption:1.5;                   /* подписи, крошки, подвал */
  --fs-overline:12px;   --lh-overline:1.2;                  /* кикер капсом */
  --fs-giant:132px;     --lh-giant:1;                       /* только цифра 404 */
  /* готовые наборы (font): размер + межстрочный + начертание + семейство */
  --t-display:var(--fw-semibold) var(--fs-display)/var(--lh-display) var(--ff);
  --t-headline-l:var(--fw-semibold) var(--fs-headline-l)/var(--lh-headline-l) var(--ff);
  --t-headline:var(--fw-semibold) var(--fs-headline)/var(--lh-headline) var(--ff);
  --t-title:var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--ff);
  --t-body-l:var(--fw-regular) var(--fs-body-l)/var(--lh-body-l) var(--ff);
  --t-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--ff);
  --t-label:var(--fw-bold) var(--fs-label)/var(--lh-label) var(--ff);
  --t-caption:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--ff);
  --t-overline:var(--fw-bold) var(--fs-overline)/var(--lh-overline) var(--ff);
  /* «сильные» варианты: та же роль, начертание 700 (цифры, телефоны, цена, жирная ссылка) */
  --t-headline-l-strong:var(--fw-bold) var(--fs-headline-l)/var(--lh-headline-l) var(--ff);
  --t-headline-strong:var(--fw-bold) var(--fs-headline)/var(--lh-headline) var(--ff);
  --t-title-strong:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--ff);
  --t-body-l-strong:var(--fw-bold) var(--fs-body-l)/var(--lh-body-l) var(--ff);
  --t-body-strong:var(--fw-bold) var(--fs-body)/var(--lh-body) var(--ff);
  --t-caption-strong:var(--fw-bold) var(--fs-caption)/var(--lh-caption) var(--ff);

  /* ═══ 2. РОЛИ ОТСТУПОВ (диапазоны Atlassian: малый 4–8 внутри группы, средний 12–24 внутри компонента, крупный 32+ между разделами) ═══ */
  --space-tight:var(--sp-1);       /* 4: строки одной группы (телефон и подпись) */
  --space-text:var(--sp-2);        /* 8: заголовок → текст, абзац → абзац, пункт списка → пункт */
  --space-kicker:var(--sp-3);      /* 12: кикер → заголовок */
  --space-kicker-hero:var(--sp-4); /* 16: кикер → H1 в герое */
  --space-slot:var(--sp-4);        /* 16: иконка → заголовок, текст → кнопка */
  --space-inline:var(--sp-2);      /* 8: иконка ↔ подпись в кнопке и ссылке */
  --gap-grid:var(--sp-4);          /* 16: между плитками */
  --space-section:var(--sp-8);     /* 32: между разделами страницы */
  --space-page-x:var(--sp-5);      /* 20: поле страницы слева и справа */
  --pad-tile:var(--sp-6);          /* 24: внутри плитки, окна, шторки */
  --pad-tile-compact:var(--sp-5);  /* 20: внутри небольшой плашки (cookie), плитка на телефоне */
  --pad-hero:var(--sp-10);         /* 40: внутри героя */
  --pad-control:var(--sp-3) var(--sp-5); /* 12 / 20: внутри кнопки */
  --row:150px; --maxw:1240px; --maxw-doc:900px;
  --measure:68ch;   /* длина строки текста: ~70–75 знаков у Sofia Sans Condensed (M3 40–60, GOV.UK ≤75) */

  /* ═══ 2. РОЛИ СКРУГЛЕНИЙ (по роли элемента: Atlassian, M3) ═══ */
  --r-container:24px;   /* плитка, окно, шторка, плашка, лента ДТ */
  --r-control:12px;     /* кнопка, подложка иконки, вложенный блок плитки */
  --r-mark:4px;         /* метка, штамп, ручка шторки, полоски бургера */
  --r-pill:999px; --r-round:50%;

  /* ═══ 2. ИКОНКИ (один размер набора + малый; M3 20/24, Carbon 16/20) ═══ */
  --icon:20px;          /* иконка в подложке, в нижней панели */
  --icon-s:16px;        /* иконка в кнопке и стрелка */
  --icon-box:40px;      /* подложка иконки, кружок раскрытия */
  --icon-box-s:28px;    /* кружок со стрелкой */
  --icon-stroke:1.8;
  --logo-s:40px; --logo-m:60px;
  --tap:44px;           /* зона нажатия кнопки: 44 (Carbon; WCAG 2.5.5 AAA). Минимум AA по WCAG 2.5.8 — 24 */
  --bar-h:62px;         /* высота нижней панели телефона */

  /* ═══ 2. СОСТОЯНИЯ ═══ */
  --color-bg-disabled:var(--c-mist); --color-text-disabled:var(--c-graphite);   /* 5,84 — читаемо, хотя норма не требует */

  /* ═══ 2. ТЕНИ (два уровня) ═══ */
  --shadow-raise:0 12px 28px rgba(0,0,0,.12);    /* приподнятая плитка при наведении, плашка cookie */
  --shadow-overlay:0 24px 60px rgba(0,0,0,.28);  /* окно поверх страницы */

  /* ═══ 2. ДВИЖЕНИЕ ═══ */
  --dur-1:150ms;   /* цвет, фон, рамка */
  --dur-2:250ms;   /* сдвиг, поворот, подчеркивание */
  --dur-3:450ms;   /* меню, шторка, раскрытие */
  --dur-flip:720ms;/* переворот плитки */
  --dur-stagger:34ms; --delay-menu:80ms;   /* шаг и задержка появления пунктов меню */
  --dur-sheen:8.4s;/* блик по H1: движение — первая половина (4,2 с), затем стоит. Играет один раз (WCAG 2.2.2) */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-flip:cubic-bezier(.4,.15,.2,1);
  --lift:-3px;     /* подъем плитки при наведении */

  /* ═══ 2. СЛОИ ═══ */
  --z-header:30; --z-scrim:99; --z-sheet:100; --z-bar:101; --z-modal:100000;

  /* ── совместимость: старые имена версии 1, которые еще встречаются в коде страниц и HEAD (не использовать в новом коде).
     Неиспользуемые 39 имен удалены — список в audit/changelog.md ── */
  --tile:var(--color-bg-tile); --ink:var(--color-text-strong); --mut:var(--color-text); --acc:var(--color-link); --acc-h:var(--color-bg-action-hover); --brd:var(--color-border); --sh-12:rgba(0,0,0,.12);
}
/* телефон ≤640: меняются значения ролей, имена те же (GOV.UK — адаптивная шкала) */
@media(max-width:640px){:root{
  --fs-display:30px; --fs-headline-l:26px; --fs-headline:22px; --fs-title:20px; --fs-giant:88px;
  --pad-tile:var(--pad-tile-compact); --pad-hero:var(--sp-6); --space-page-x:var(--sp-4); --space-section:var(--sp-8);
}}

/* ═══ 3. БАЗА ═══ */
*{box-sizing:border-box;margin:0;}
html{font-language-override:"RUS";}   /* русские формы кириллицы у Sofia; основное — lang="ru" у html */
body{font:var(--t-body);background:var(--color-bg-page);color:var(--color-text);}
h1,h2,h3{font:var(--t-title);color:var(--color-text-strong);overflow-wrap:break-word;}
p{overflow-wrap:break-word;}
a{text-decoration:none;color:inherit;}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;}   /* фокус с клавиатуры виден всегда (WCAG 2.4.7) */
/* TILDA: в CSS Тильды есть :where(.t-records) a:focus-visible / button:focus-visible — синее кольцо #2015FF, сила 0,1,1.
   Оно перебивает правило выше (0,1,0) у всех ссылок и кнопок. Поэтому — !important (исключение записано). */
:where(.t-records) a:focus-visible,:where(.t-records) button:focus-visible,:where(.t-records) [tabindex]:focus-visible{outline:2px solid var(--color-focus)!important;outline-offset:2px!important;}
.t-accent :focus-visible,.cta-act :focus-visible{outline-color:var(--color-focus-on-accent)!important;}   /* элемент внутри красной плитки */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-page-x);}

/* ═══ 3. ШАПКА ═══ */
header{position:sticky;top:0;z-index:var(--z-header);background:var(--color-bg-header);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);}
.hd{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--space-page-x);max-width:var(--maxw);margin:0 auto;gap:var(--sp-4);}
.hd-brand{display:flex;align-items:center;gap:var(--sp-3);}
.hd-brand svg{width:var(--logo-s);height:var(--logo-s);flex:0 0 auto;}
.hd-brand .nm{font:var(--t-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text-strong);}
.hd-right{display:flex;align-items:center;gap:var(--sp-5);}
.hd-phone{font:var(--t-label);color:var(--color-text-strong);white-space:nowrap;padding:var(--sp-1) 0;}
.burger{width:var(--tap);height:var(--tap);padding:0;border:none;background:transparent;color:inherit;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--sp-1);cursor:pointer;}
.burger span{width:var(--icon);height:2px;background:var(--color-text-strong);border-radius:var(--r-mark);transition:transform var(--dur-3) var(--ease),opacity var(--dur-1);}
body.mopen .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.mopen .burger span:nth-child(2){opacity:0;}
body.mopen .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.crumb{max-width:var(--maxw);margin:var(--sp-5) auto 0;padding:0 var(--space-page-x);font:var(--t-caption);color:var(--color-text);}
.crumb a{display:inline-block;padding:var(--sp-1) 0;}   /* высота ссылки ≥ 24 (WCAG 2.5.8) */
.crumb a:hover{color:var(--color-text-strong);}

/* ═══ 3. МЕНЮ ═══ */
/* закрытое меню скрыто и для клавиатуры: visibility убирает ссылки из обхода Tab (раньше Tab шел по 10 невидимым пунктам) */
#stMenu{height:0;overflow:hidden;visibility:hidden;background:var(--color-bg-tile);border-bottom:1px solid transparent;transition:height var(--dur-3) var(--ease),border-color var(--dur-3),visibility 0s linear var(--dur-3);}
#stMenu.open{visibility:visible;border-bottom-color:var(--color-border);transition:height var(--dur-3) var(--ease),border-color var(--dur-3),visibility 0s;}
#stMenu .minner{padding:var(--sp-6) var(--space-page-x) var(--sp-8);max-width:var(--maxw);margin:0 auto;}
#stMenu nav{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-10);width:100%;}
#stMenu nav a{font:var(--t-label);letter-spacing:var(--ls-menu);color:var(--color-text-strong);text-transform:uppercase;padding:var(--sp-3) 0;border-bottom:1px solid var(--color-divider);opacity:0;transform:translateY(-10px);transition:opacity var(--dur-2),transform var(--dur-3) var(--ease),color var(--dur-1),padding-left var(--dur-2);}
body.mopen #stMenu nav a{opacity:1;transform:none;transition-delay:calc(var(--n) * var(--dur-stagger) + var(--delay-menu));}
#stMenu nav a:hover{color:var(--color-link);padding-left:var(--sp-2);}

/* ═══ 3. НИЖНЯЯ ПАНЕЛЬ (телефон) ═══ */
#stBar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);height:var(--bar-h);background:var(--color-bg-tile);border-top:1px solid var(--color-border);display:none;}
#stBar a,#stBar button{flex:1;border:none;background:none;font:var(--t-overline);color:var(--color-text-strong);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);}
#stBar svg{width:var(--icon);height:var(--icon);stroke:var(--color-text-strong);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;}
#stBar .mid svg{transition:transform var(--dur-3) var(--ease);}
body.mopen #stBar .mid{color:var(--color-link);}
body.mopen #stBar .mid svg{stroke:var(--color-link);transform:rotate(90deg);}
#stScrim{position:fixed;inset:0;z-index:var(--z-scrim);background:var(--color-bg-scrim);opacity:0;visibility:hidden;transition:opacity var(--dur-2),visibility var(--dur-2);}
body.mopen #stScrim{opacity:1;visibility:visible;}
@media(max-width:640px){
  .burger{display:none!important;}
  #stBar{display:flex;}
  body{padding-bottom:var(--bar-h);}
  #stMenu{position:fixed;left:0;right:0;bottom:var(--bar-h);top:auto;z-index:var(--z-sheet);height:auto;max-height:72vh;overflow-y:auto;border-top:1px solid var(--color-border);border-bottom:none;border-radius:var(--r-container) var(--r-container) 0 0;transform:translateY(115%);visibility:hidden;transition:transform var(--dur-3) var(--ease),visibility var(--dur-3);}
  #stMenu.open{transform:none;visibility:visible;}
  #stMenu .minner{padding:var(--sp-4) var(--space-page-x) var(--sp-6);}
  #stMenu .minner::before{content:"";display:block;width:var(--icon-box);height:var(--sp-1);border-radius:var(--r-mark);background:var(--color-handle);margin:0 auto var(--sp-4);}
  #stMenu nav{grid-template-columns:1fr;}
}
@media(min-width:640.02px){#stScrim{display:none;}}

/* ═══ 3. ОКНО КОНТАКТОВ: оборот плитки и запасное окно ═══ */
.t-cta,.st-scene{grid-area:cta;}
.st-scene{perspective:1400px;}
.st-flip{position:relative;height:100%;display:grid;transform-style:preserve-3d;transition:transform var(--dur-flip) var(--ease-flip);}
.st-flip>.tile,.st-flip>.st-back{grid-area:1/1/2/2;}
.st-flip.flipped{transform:rotateX(180deg);}
.st-flip.flipped>.st-back{visibility:visible;}   /* оборот скрыт, пока не перевернут: его ссылки не ловят Tab (раньше 4 скрытые остановки) */
.st-flip>.tile{width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.flip-tile{cursor:pointer;}
.st-back{position:relative;visibility:hidden;transition:visibility 0s linear calc(var(--dur-flip) / 2);transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--color-bg-tile);border:1px solid var(--color-border);border-radius:var(--r-container);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--pad-tile);text-align:left;color:var(--color-text-strong);}
#stContact{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-bg-veil);display:none;align-items:center;justify-content:center;padding:var(--pad-tile);}
#stContact.open{display:flex;}
#stContact .cbox{background:var(--color-bg-tile);border:1px solid var(--color-border);border-radius:var(--r-container);padding:var(--pad-tile);max-width:380px;width:100%;position:relative;text-align:left;box-shadow:var(--shadow-overlay);}
.st-back h3,#stContact h3{font:var(--t-label);color:var(--color-text-strong);margin:0 var(--sp-10) var(--space-kicker) 0;text-transform:uppercase;}
.st-back .cph,#stContact .cph{display:block;font:var(--t-headline-strong);color:var(--color-text-strong);margin:var(--space-tight) 0;white-space:nowrap;transition:color var(--dur-1);}
.st-back .cph:hover,#stContact .cph:hover{color:var(--color-link);}
.st-back .cem,#stContact .cem{display:inline-block;font:var(--t-label);color:var(--color-link);margin-top:var(--space-kicker);}
.st-back .chours,#stContact .chours{font:var(--t-caption);color:var(--color-text);margin-top:var(--space-kicker);}
.st-back .cclose,#stContact .cclose{position:absolute;top:var(--sp-3);right:var(--sp-3);width:var(--tap);height:var(--tap);border-radius:var(--r-control);border:1px solid var(--color-border);background:transparent;color:var(--color-text-strong);font:var(--t-label);font-family:var(--ff);cursor:pointer;transition:transform var(--dur-2),background var(--dur-1),border-color var(--dur-1);}
.st-back .cclose:hover,#stContact .cclose:hover{transform:rotate(90deg);background:var(--color-bg-tile-second);border-color:transparent;}
@media(prefers-reduced-motion:reduce){.st-flip{transition:none;}}

/* ═══ 3. ПЛИТКА — анатомия (M3 card): верх (иконка или кикер) → заголовок → текст → действие.
   Отступы между частями задает плитка, а не сами части (Every Layout «Stack»). ═══ */
.tile{min-width:0;position:relative;background:var(--color-bg-tile);border:1px solid var(--color-border);border-radius:var(--r-container);padding:var(--pad-tile);display:flex;flex-direction:column;justify-content:flex-start;transition:transform var(--dur-2),border-color var(--dur-1),box-shadow var(--dur-2);}
.tile h2,.tile h3,.tile .ttl{font:var(--t-title);color:var(--color-text-strong);text-wrap:balance;}
.tile p,.tile .txt{font:var(--t-body);color:var(--color-text);}
.tile>*+*,.tile .l>*+*{margin-top:var(--space-text);}           /* по умолчанию между частями — 8 */
.tile>.tag+*,.tile .l>.tag+*{margin-top:var(--space-kicker);}   /* кикер → следующее — 12 */
.tile>.ic+*,.tile>.ic-row+*{margin-top:var(--space-slot);}      /* иконка → заголовок — 16 */
.tag{font:var(--t-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text);}
.lead,.slg{font:var(--t-body-l);color:var(--color-text);max-width:var(--measure);}
.tile p{max-width:var(--measure);}
/* интерактивная плитка: подъем + тень (один вид наведения для всех кликабельных плиток) */
a.tile{color:inherit;}
a.tile:hover,.t-cont:hover{transform:translateY(var(--lift));border-color:var(--color-border-hover);box-shadow:var(--shadow-raise);}
/* стрелка в правом верхнем углу кликабельной плитки */
.tile>.arr{position:absolute;top:var(--sp-4);right:var(--sp-4);margin:0;width:var(--icon-box-s);height:var(--icon-box-s);border-radius:var(--r-round);background:var(--color-bg-tile-second);display:flex;align-items:center;justify-content:center;font:var(--t-caption);color:var(--color-text-strong);transition:background var(--dur-1),color var(--dur-1),transform var(--dur-2);}
a.tile:hover>.arr,.t-cont:hover .arr{transform:translate(2px,-2px);background:var(--color-bg-accent);color:var(--color-text-on-accent);}

/* иконка в подложке — один размер на весь сайт */
.ic{width:var(--icon-box);height:var(--icon-box);border-radius:var(--r-control);background:var(--color-bg-tile-second);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ic svg{width:var(--icon);height:var(--icon);stroke:var(--color-link);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;}
.ic-row{display:flex;gap:var(--sp-3);}
.ic-row>*+*{margin-top:0;}

/* ЧЕТЫРЕ ВИДА ПЛИТОК (решение Томаса 24.10)
   1. обычная — .tile   2. второго плана — .t-second   3. с ценой — .t-num   4. акцентная — .t-accent (.t-mid — по центру) */
.t-second{background:var(--color-bg-tile-second);border-color:transparent;}
.t-num .num{font:var(--t-headline-l-strong);color:var(--color-link);}
.t-num h3{font:var(--t-body);color:var(--color-text);}
.t-accent{background:var(--color-bg-accent);border-color:transparent;color:var(--color-text-on-accent);}
.t-accent .tag,.t-accent .big,.t-accent h2,.t-accent h3,.t-accent .ttl,.t-accent p,.t-accent .sm{color:var(--color-text-on-accent);}
.t-accent h2{font:var(--t-headline-l);text-transform:uppercase;}
a.t-accent:hover{background:var(--color-bg-accent-hover);}
.t-accent>.arr,a.t-accent:hover>.arr{background:var(--color-text-on-accent);color:var(--color-bg-accent);}
.t-accent.t-mid{justify-content:center;}
.t-accent.t-mid p{font:var(--t-body-strong);}
@media(max-width:640px){.t-accent:has(>.arr) .tag{padding-right:var(--sp-10);}}

/* ═══ 3. РЯД ПЛИТОК .crow — ЛЮБЫЕ плитки, стоящие в ряд (карточки с иконкой, вопросы, преимущества, цены).
   Части плиток ряда стоят на общих линиях: верх / заголовок / текст (subgrid).
   Высота строки заголовка — по самому длинному заголовку ряда. Плитки в ряд ставятся только внутри .crow.
   Колонок: 3 по умолчанию, .crow-2 — две; планшет — 2, телефон — 1. ═══ */
.crow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:var(--gap-grid);min-width:0;}
.crow-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.bento>.crow{grid-column:1/-1;}
.crow>.tile{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;}   /* 4 линии: верх / заголовок / текст / действие */
.crow>.tile>*{align-self:start;margin-top:0;grid-column:1;}   /* одна колонка внутри плитки: в версии 2 лишний абзац уходил в соседнюю колонку */
.crow>.tile>.ic,.crow>.tile>.ic-row,.crow>.tile>.tag,.crow>.tile>.num{grid-row:1;}
.crow>.tile>h3,.crow>.tile>.ttl{grid-row:2;}
.crow>.tile>p,.crow>.tile>.txt{grid-row:3;margin-top:var(--space-text);}
.crow>.tile>p~*:not(.arr),.crow>.tile>.txt~*:not(.arr){grid-row:4;margin-top:var(--space-slot);justify-self:start;}   /* хвост (кнопка или второй абзац) — своя линия: в версии 2 кнопка ложилась поверх текста. Больше одной части после текста — в обертку .txt */
.crow>.tile>.ic,.crow>.tile>.ic-row{margin-bottom:var(--space-slot);}
.crow>.tile>.tag{margin-bottom:var(--space-kicker);}
.crow>.tile>.num{margin-bottom:var(--space-kicker);}
.crow>.span2{grid-column:span 2;}
.crow a:not(.tile):not(.btn),.crow p a{color:var(--color-link);border-bottom:1px solid var(--color-link-line);}
.crow p a:hover{border-bottom-color:var(--color-link);}
@supports not (grid-template-rows:subgrid){.crow>.tile{display:flex;flex-direction:column;}}
@media(min-width:640.02px) and (max-width:1024px){.crow{grid-template-columns:repeat(2,minmax(0,1fr));}.crow>.span2{grid-column:auto;}}
@media(max-width:640px){.crow,.crow-2{grid-template-columns:1fr;}.crow>.span2{grid-column:auto;}}

/* ═══ 3. ГЕРОЙ ═══ */
.t-hero{justify-content:center;padding:var(--pad-hero);}
.t-hero>.tag+*,.t-hero>.brand+*{margin-top:var(--space-kicker-hero);}
.t-hero h1{font:var(--t-display);color:var(--color-text-strong);text-transform:uppercase;text-wrap:balance;}
.t-hero h1 span{color:var(--color-link);}
.t-hero p{font:var(--t-body-l);color:var(--color-text);max-width:var(--measure);}
.t-hero h1+*{margin-top:var(--sp-4);}
.t-hero .sub{font:var(--t-body-l-strong);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text);}
.t-hero .brand{font:var(--t-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text);}
.geo-kick{font:var(--t-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--color-text);}
.t-hero .geo-kick{margin-top:var(--sp-4);}
.t-hero .geo-kick+p{margin-top:var(--space-tight);}
.hero-logo2{position:absolute;top:var(--sp-8);right:var(--sp-8);width:var(--logo-m);height:var(--logo-m);margin:0;}
@media(max-width:640px){.hero-logo2,.t-hero .hero-logo{display:none!important;}}
@keyframes sheen{0%{background-position:180% 0}50%{background-position:-80% 0}100%{background-position:-80% 0}}
.t-hero.shine h1{background:linear-gradient(105deg,var(--color-text-strong) 44%,var(--color-h1-shine) 50%,var(--color-text-strong) 56%) 0 0/250% 100% no-repeat,var(--color-text-strong);-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen var(--dur-sheen) linear 1 both;}
.t-hero.shine h1 span{background:linear-gradient(105deg,var(--color-link) 44%,var(--color-h1-shine-link) 50%,var(--color-link) 56%) 0 0/250% 100% no-repeat,var(--color-link);-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen var(--dur-sheen) linear 1 both;}
@media(prefers-reduced-motion:reduce){.t-hero.shine h1,.t-hero.shine h1 span{animation:none;background:none;color:var(--color-text-strong);}.t-hero.shine h1 span{color:var(--color-link);}}

/* ═══ 3. ПЛИТКА-ПРИЗЫВ: кикер вверху, по центру — красный блок с крупным заголовком ═══ */
.t-cta{position:relative;color:var(--color-text-strong);justify-content:center;align-items:center;text-align:center;cursor:pointer;font:inherit;padding:calc(var(--pad-tile) + var(--fs-overline) * var(--lh-overline) + var(--space-kicker-hero)) var(--pad-tile);}
.t-cta>.tag{position:absolute;top:var(--pad-tile);left:var(--pad-tile);right:var(--pad-tile);margin:0;text-align:left;}
.t-cta>*+*{margin-top:0;}
.t-cta .tag,.t-cta .cta-act,.t-cta .cta-ttl{display:block;}   /* внутри кнопки допустимы только span: .cta-ttl — замена h2 (HTML-правка) */
.t-cta h2,.t-cta .cta-ttl{font:var(--t-headline-l);text-transform:uppercase;text-wrap:balance;}
.t-cta .go{margin-top:var(--space-slot);font:var(--t-body-strong);display:inline-flex;align-items:center;gap:var(--sp-3);}
.t-cta .go span{width:var(--icon-box-s);height:var(--icon-box-s);border-radius:var(--r-round);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font:var(--t-label);}
.t-cta .cta-act{background:var(--color-bg-accent);color:var(--color-text-on-accent);border-radius:var(--r-control);padding:var(--sp-5) var(--sp-6);transition:background var(--dur-1);}
.t-cta .cta-act h2,.t-cta .cta-act .cta-ttl,.t-cta .cta-act .go{color:var(--color-text-inverse);}
.t-cta .cta-act .go span{background:var(--color-text-inverse);color:var(--color-bg-accent);}   /* белый кружок, красная стрелка: 4,57 (было белое на 24 % белого — 3,26) */
.t-cta:hover .cta-act{background:var(--color-bg-accent-hover);}
@media(hover:none){
  .t-cta{background:var(--color-bg-accent);border-color:transparent;color:var(--color-text-on-accent);}
  .t-cta>.tag,.t-cta h2,.t-cta .cta-ttl,.t-cta .go{color:var(--color-text-inverse);}
  .t-cta .cta-act{background:transparent;padding:0;}
}
@media(max-width:640px){.t-cta{padding:var(--pad-tile)!important;}.t-cta>.tag{position:static;margin-bottom:var(--space-kicker-hero);}}

/* ═══ 3. ПЛИТКА КОНТАКТОВ ═══ */
.t-cont{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;cursor:pointer;}
.t-cont>*+*{margin-top:0;}
.t-cont .ph{font:var(--t-headline-strong);color:var(--color-text-strong);}
.t-cont .em{font:var(--t-body-l-strong);color:var(--color-link);}
.t-cont .reg,.t-cont .note{font:var(--t-caption);color:var(--color-text);}
.ph .sep{color:var(--color-border);font-weight:var(--fw-regular);margin:0 var(--sp-2);}
.ph .pn{white-space:nowrap;}
.t-cont:has(.ct-title){flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;}
.ct-title{display:block;font:var(--t-headline);color:var(--color-text-strong);margin-bottom:var(--space-kicker);}
.t-cont .note{margin-top:var(--space-tight);}
.t-cont:has(.ct-title) .em{margin-top:var(--space-text);}
@media(max-width:1024px){.t-cont{flex-direction:column;align-items:flex-start;}}
@media(max-width:640px){.t-cont .ph{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-tight);}.t-cont .sep{display:none;}.ph a{white-space:nowrap!important;}}

/* ═══ 3. ЗАГОЛОВОК РАЗДЕЛА и «еще вопросы» ═══ */
.fh{font:var(--t-headline);color:var(--color-text-strong);margin:calc(var(--space-section) - var(--gap-grid)) 0 var(--space-slot);}
/* версия 1: ряд вопросов .frow/.fc — теперь это .crow с обычными плитками; старые классы оставлены до переноса страниц */
.frow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:var(--gap-grid);}
.fc{background:var(--color-bg-tile);border:1px solid var(--color-border);border-radius:var(--r-container);padding:var(--pad-tile);min-width:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--space-text);align-content:start;}
.fc h3{font:var(--t-title);margin:0;align-self:start;overflow-wrap:anywhere;}
.fc p{font:var(--t-body);color:var(--color-text);align-self:start;}
.fc a{color:var(--color-link);border-bottom:1px solid var(--color-link-line);}
@supports not (grid-template-rows:subgrid){.fc{display:flex;flex-direction:column;gap:var(--space-text);}}
@media(min-width:640.02px) and (max-width:1024px){.frow{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.frow{grid-template-columns:1fr;}}

/* ═══ 3. ПОДВАЛ ═══ */
footer{border-top:1px solid var(--color-border);padding:var(--sp-6) var(--space-page-x);font:var(--t-caption);color:var(--color-text);}
footer .fw{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;}
footer a{display:inline-block;padding:var(--sp-1) 0;}
.t-serv a,.about a,footer a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--dur-2),color var(--dur-1);}
.t-serv a:hover,.about a:hover,footer a:hover{background-size:100% 1px;color:var(--color-text-strong);}

/* ═══ 3. СЕТКА-БЕНТО: только верх страницы (герой, призыв и плитки рядом с ними). Ряды ниже — .crow.
   Ширины экрана — три: телефон ≤640, планшет 641–1024, компьютер ≥1025 (раньше были еще 880). ═══ */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(var(--row),auto);gap:var(--gap-grid);margin:var(--sp-4) 0 var(--gap-grid);}
.bento>*{min-width:0;}
/* ВЕРТИКАЛЬНЫЙ РИТМ СТРАНИЦЫ: все группы плиток отстоят друг от друга на 16 (как плитки внутри группы);
   32 — только над заголовком раздела и над подвалом */
.wrap>.crow,.wrap>.t-line,.wrap>.t-cont{margin-bottom:var(--gap-grid);}
.wrap>.crow:first-child{margin-top:var(--sp-4);}
footer{margin-top:var(--space-section);}   /* схлопывается с нижними 16 у последней группы → 32. В версии 2 было 32−16 = 16: отступы не складываются */
@media(min-width:640.02px) and (max-width:1024px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:none!important;}
  .bento>*{grid-area:auto!important;}
  .t-hero,.t-cargo,.t-req,.t-cont,.faqsec,.crow{grid-column:1/-1!important;}  /* «Кому подходят» — половина ширины, рядом с призывом: во всю ширину она оставляла дыру (+469 px на /perehod-s-cargo) */
  /* плитка без пары в строке (соседи сверху и снизу — во всю ширину) тоже во всю ширину: одна плитка на половине ряда оставляет дыру */
  .bento>:not(.t-hero,.t-cargo,.t-req,.t-cont,.faqsec,.crow):is(:first-child,:is(.t-hero,.t-cargo,.t-req,.t-cont,.faqsec,.crow)+*):is(:last-child,:has(+:is(.t-hero,.t-cargo,.t-req,.t-cont,.faqsec,.crow))){grid-column:1/-1!important;}
  .crow>.tile:last-child:nth-child(odd),.frow>.fc:last-child:nth-child(odd),.acc-grid>.t-num:last-child:nth-child(odd){grid-column:1/-1;}   /* последняя плитка без пары — во всю ширину */
}
.crow-2>.tile:last-child:nth-child(odd){grid-column:1/-1;}
/* телефон: раскладку задает CSS страницы (на главной навигационные плитки — по две в ряд) */
@media(max-width:1024px){.hd-phone{display:inline!important;}}
@media(max-width:640px){.hd-phone{display:none!important;}}

/* ═══ 3. РАЗДЕЛЫ ПОД СЕТКОЙ: общая ширина и шаг ═══ */
.acc,.about,.faq,.duo{max-width:var(--maxw);margin:0 auto var(--gap-grid);padding:0 var(--space-page-x);}

/* блок текстовых плиток одна под другой */
.about{display:flex;flex-direction:column;gap:var(--gap-grid);}
.about>*{min-width:0;}
.about p{max-width:var(--measure);}
.about a,.link-tile a{color:var(--color-link);border-bottom:1px solid var(--color-link-line);}
.about a:hover,.link-tile a:hover{border-bottom-color:var(--color-link);}

/* две плитки рядом (не ряд однотипных: у плиток разное содержимое) */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid);}
.duo>*{min-width:0;}
@media(max-width:640px){.duo{grid-template-columns:1fr;}}

/* плитка со ссылками в заголовке */


/* ═══ 3. РАСКРЫВАЮЩИЙСЯ ПРАЙС ═══ */
.acc-toggle{width:100%;background:var(--color-bg-tile);border:1px solid var(--color-border);border-radius:var(--r-container);padding:var(--pad-tile);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);cursor:pointer;color:var(--color-text-strong);text-align:left;font:var(--t-body);}
.acc-toggle .att{display:flex;flex-direction:column;gap:var(--space-tight);}
.acc-toggle .att b{font:var(--t-title);}
.acc-toggle .att span{font:var(--t-caption-strong);color:var(--color-link);}
.acc-toggle .chev{width:var(--icon-box);height:var(--icon-box);border-radius:var(--r-round);background:var(--color-bg-tile-second);display:flex;align-items:center;justify-content:center;font:var(--t-label);flex:0 0 auto;transition:transform var(--dur-2);}
.acc.open .acc-toggle .chev{transform:rotate(180deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height var(--dur-3) ease;}
.acc.open .acc-body{max-height:2600px;}
/* сетка цен — тот же ряд .crow (4 колонки) */
.acc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:var(--gap-grid);padding-top:var(--gap-grid);}
.acc-grid>*{min-width:0;}
.acc-grid .span2{grid-column:span 2;}
.acc-grid .t-num{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;}
.acc-grid .t-num>*{margin:0;}
.acc-grid .t-num>.tag{margin-bottom:var(--space-kicker);}
.acc-grid .t-num>.num{margin-bottom:var(--space-kicker);}
@supports not (grid-template-rows:subgrid){.acc-grid .t-num{display:flex;flex-direction:column;}}
@media(min-width:640.02px) and (max-width:1024px){.acc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.acc-grid .span2{grid-column:auto;}}
@media(max-width:640px){.acc-grid{grid-template-columns:1fr;}.acc-grid .span2{grid-column:auto;}}

/* ═══ 3. ПЛИТКА-СТРОКА: иконка слева, текст справа, на всю ширину ═══ */
.t-line{flex-direction:row;align-items:center;gap:var(--sp-6);}
.t-line>*+*{margin-top:0;}
.t-line .price-txt>*+*{margin-top:var(--space-text);}
@media(max-width:640px){.t-line{flex-direction:column;align-items:flex-start;gap:var(--space-slot);}}

/* ═══ 3. СПИСКИ ═══ */
.rd-list{list-style:none;padding:0;display:grid;gap:var(--space-text);font:var(--t-body-l);color:var(--color-text);}
.rd-list li{position:relative;padding-left:var(--sp-4);}
.rd-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:var(--r-round);background:var(--color-link);}
.slist{font:var(--t-body-l-strong);}
.slist a{display:block;width:fit-content;margin:var(--space-text) 0;color:var(--color-text-strong);border-bottom:1px solid var(--color-divider-strong);transition:color var(--dur-1),border-color var(--dur-1);}
.slist a:hover{color:var(--color-link);border-bottom-color:var(--color-link);}

/* ═══ 3. РЕКВИЗИТЫ, ТЕЛЕФОНЫ, АДРЕС ═══ */
.t-req .nm2{font:var(--t-body-l-strong);color:var(--color-text-strong);}
.t-req .r{font:var(--t-caption);color:var(--color-text);}
.tile .big{font:var(--t-title-strong);color:var(--color-text-strong);}
.t-ph .big{font:var(--t-headline-strong);}
.tile .sm{font:var(--t-caption);color:var(--color-text);}
.tile .big+.sm{margin-top:var(--space-text);}
@media(max-width:640px){.t-ph .big{white-space:nowrap;}}

/* кнопка «Проложить маршрут» */
.route{margin-top:auto;padding-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.rbtn{display:inline-flex;align-items:center;gap:var(--space-inline);background:var(--color-bg-action);color:var(--color-text-inverse);font:var(--t-caption-strong);padding:var(--pad-control);border-radius:var(--r-control);min-height:var(--tap);transition:background var(--dur-1);}
a.tile:hover .rbtn{background:var(--color-bg-action-hover);}
.rbtn svg{width:var(--icon-s);height:var(--icon-s);fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;}
.rhint{font:var(--t-caption);color:var(--color-text);}
@media(max-width:640px){.rbtn{width:100%;justify-content:center;}}

/* ═══ 3. НАВИГАЦИОННАЯ ПЛИТКА (главная): иконка вверху, название прижато к низу — исключение из «всё к верху» (решение 25.10) ═══ */
.nav .ic{margin-bottom:auto;}
.nav .ic svg{stroke:var(--color-text-strong);}
.nav h3{font:var(--t-label);padding-top:var(--sp-4);}
.nav>.ic+*{margin-top:0;}

/* ═══ 3. ЛЕНТА «ДТ В РАБОТЕ» (главная) — самостоятельный компонент.
   ИСКЛЮЧЕНИЕ: внутри ленты свои числа (--dtbg-*), это имитация экрана программы, а не текст сайта. Снаружи — роли системы.
   В версии 2 .dtbg-root был объявлен трижды подряд (наклон −8° → −22°, поле 0 % → 7 % → 9 %, шрифт 13 → 8,6 px);
   здесь — один блок с итоговыми значениями. Правила для ≤640 удалены: лента скрыта на ≤1024. ═══ */
#dtBand{position:relative;grid-area:band;height:auto;border-radius:var(--r-container);overflow:hidden;background:var(--color-bg-tile);border:1px solid var(--color-border);}
@media(max-width:1024px){#dtBand{display:none;}}
#dtWrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;}
.dtbg-root{
  --dtbg-bg:var(--color-bg-page); --dtbg-surface:var(--color-bg-tile-second); --dtbg-line:var(--color-bg-tile-second);
  --dtbg-text:var(--color-band-text); --dtbg-muted:var(--color-band-muted); --dtbg-overlay-color:var(--color-bg-page);
  --dtbg-status-neutral:var(--color-status-neutral); --dtbg-status-info:var(--color-status-neutral);
  --dtbg-status-warn:var(--color-status-warn); --dtbg-status-ok:var(--color-status-ok);
  --dtbg-overlay:.72; --dtbg-blur:0px; --dtbg-tilt-y:-22deg; --dtbg-tilt-x:3deg;
  --dtbg-bleed:9%; --dtbg-pad:calc(var(--dtbg-bleed) + 22px); --dtbg-row-h:20px;
  --dtbg-grid:minmax(0,1.12fr) minmax(0,.82fr) minmax(0,.95fr) minmax(0,1.2fr) minmax(0,.92fr);
  position:absolute; inset:0; overflow:hidden; isolation:isolate;
  background:var(--dtbg-bg); color:var(--dtbg-text);
  font:400 8.6px/1.2 var(--ff-mono); font-variant-numeric:tabular-nums;
  pointer-events:none; user-select:none; -webkit-user-select:none; }
.dtbg-root::before,.dtbg-root::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;}
.dtbg-root::before{background:var(--dtbg-overlay-color);opacity:calc(var(--dtbg-overlay) * .55);}
.dtbg-root::after{background:linear-gradient(90deg,var(--dtbg-overlay-color) 0%,var(--dtbg-overlay-color) 30%,transparent 85%);opacity:var(--dtbg-overlay);}
.dtbg-screen{position:absolute;inset:calc(-1 * var(--dtbg-bleed));z-index:1;display:flex;flex-direction:column;filter:blur(var(--dtbg-blur));transform:perspective(1600px) rotateX(var(--dtbg-tilt-x)) rotateY(var(--dtbg-tilt-y));transform-origin:50% 50%;transition:transform .6s ease;}
.dtbg-top{display:flex;align-items:center;gap:16px;padding:7px var(--dtbg-pad) 6px;background:var(--dtbg-surface);border-bottom:1px solid var(--dtbg-line);}
.dtbg-title{font-size:1.08em;font-weight:600;white-space:nowrap;}
.dtbg-counts{display:flex;gap:20px;overflow:hidden;color:var(--dtbg-muted);white-space:nowrap;}
.dtbg-count{display:inline-flex;align-items:center;gap:7px;}
.dtbg-count i{width:6px;height:6px;border-radius:50%;background:var(--tc);}
.dtbg-count b{color:var(--dtbg-text);font-weight:600;}
.dtbg-clock{margin-left:auto;color:var(--dtbg-muted);white-space:nowrap;}
.dtbg-cols,.dtbg-row{display:grid;grid-template-columns:var(--dtbg-grid);gap:0 12px;align-items:center;padding:0 var(--dtbg-pad);}
.dtbg-cols{padding-top:.5em;padding-bottom:.5em;color:var(--dtbg-muted);font-size:.92em;border-bottom:1px solid var(--dtbg-line);}
.dtbg-body{position:relative;flex:1;overflow:hidden;}
.dtbg-row{position:absolute;left:0;right:0;top:0;height:var(--dtbg-row-h);box-sizing:border-box;border-bottom:1px solid var(--dtbg-line);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s ease;will-change:transform;}
.dtbg-root.is-static .dtbg-row{transition:none;}
.dtbg-c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dtbg-c-num.is-empty{color:var(--dtbg-muted);}
.dtbg-code{margin-right:10px;}
.dtbg-name{color:var(--dtbg-muted);}
.dtbg-st-submitted{--tc:var(--dtbg-status-neutral);}
.dtbg-st-processing{--tc:var(--dtbg-status-info);}
.dtbg-st-inspection,.dtbg-st-docs{--tc:var(--dtbg-status-warn);}
.dtbg-st-released{--tc:var(--dtbg-status-ok);}
.dtbg-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 9px;border-radius:var(--r-pill);color:var(--tc);background:rgba(138,155,173,.12);background:color-mix(in srgb,var(--tc) 14%,transparent);font-size:12px;font-weight:500;white-space:nowrap;}
.dtbg-badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.dtbg-badge.is-new{animation:dtbg-in .6s ease-out;}
.dtbg-row.is-flash{animation:dtbg-flash 1.8s ease-out;}
@keyframes dtbg-in{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
@keyframes dtbg-flash{from{background:color-mix(in srgb,var(--tc) 16%,transparent);}to{background:transparent;}}
@media(prefers-reduced-motion:reduce){.dtbg-row{transition:none;}.dtbg-row.is-flash,.dtbg-badge.is-new{animation:none;}}
/* ═══ конец ленты ДТ ═══ */

/* ═══ 3. СТРАНИЦА-ДОКУМЕНТ (политика) ═══ */
.art{max-width:var(--maxw-doc);margin:var(--sp-3) auto var(--sp-10);padding:0 var(--space-page-x);}
body:has(.art) .crumb{max-width:var(--maxw-doc);}
.art h1{font:var(--t-headline-l);color:var(--color-text-strong);text-transform:uppercase;margin:var(--sp-4) 0 var(--sp-5);}
.art h2{font:var(--t-headline);margin:var(--sp-8) 0 var(--sp-3);}
.art p{font:var(--t-body);color:var(--color-text);margin:var(--space-text) 0;max-width:var(--measure);}
.art p.li{padding-left:var(--sp-4);}

/* ═══ 3. КНОПКИ ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-inline);min-height:var(--tap);padding:var(--pad-control);border-radius:var(--r-control);font:var(--t-label);white-space:nowrap;transition:background var(--dur-1);}
.btn-acc{background:var(--color-bg-accent);color:var(--color-text-on-accent);}
.btn-acc:hover{background:var(--color-bg-accent-hover);}
.btn-ghost{background:var(--color-bg-tile-second);color:var(--color-text-strong);border:1px solid var(--color-border);}
.btn-ghost:hover{background:var(--color-bg-tile);}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--color-bg-disabled);color:var(--color-text-disabled);border-color:transparent;cursor:not-allowed;}

/* ═══ 3. СТРАНИЦА 404 ═══ */
.nf{min-height:62vh;display:flex;align-items:center;padding:var(--sp-10) 0;}
.nf-card{background:var(--color-bg-tile);border:1px solid var(--color-border);border-radius:var(--r-container);padding:var(--pad-hero);width:100%;position:relative;overflow:hidden;}
.nf-card .stamp{position:absolute;top:var(--sp-6);right:var(--sp-8);border:2px solid var(--color-link);color:var(--color-link);font:var(--t-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-mark);transform:rotate(6deg);}
.nf .code{font:var(--fw-bold) var(--fs-giant)/var(--lh-giant) var(--ff);color:var(--color-link);}
.nf h1{font:var(--t-headline-l);color:var(--color-text-strong);text-transform:uppercase;margin-top:var(--sp-4);}
.nf p{font:var(--t-body-l);color:var(--color-text);max-width:60ch;margin-top:var(--sp-3);}
.nf-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-8);}
@media(max-width:640px){.nf-card .stamp{position:static;display:inline-block;transform:none;margin-bottom:var(--sp-4);}}

/* ═══ 3. ПЛАШКА СОГЛАСИЯ НА COOKIE (создает скрипт в HEAD) ═══
   Исключение: !important — в HEAD у плашки свои стили с !important. */
html body #ck-banner{background:var(--color-bg-tile)!important;border:1px solid var(--color-border)!important;border-radius:var(--r-container)!important;padding:var(--pad-tile-compact)!important;width:260px!important;gap:var(--sp-3)!important;box-shadow:var(--shadow-raise)!important;font:var(--t-caption)!important;color:var(--color-text)!important;}
html body #ck-link{color:var(--color-text-strong)!important;font:var(--t-caption-strong)!important;}
html body #ck-accept{background:var(--color-bg-action)!important;color:var(--color-text-inverse)!important;min-height:var(--tap)!important;border-radius:var(--r-control)!important;font:var(--t-caption-strong)!important;padding:var(--sp-3) 0!important;}
html body #ck-accept:hover{background:var(--color-bg-action-hover)!important;}
@media(max-width:640px){html body #ck-banner{width:200px!important;padding:var(--sp-4)!important;bottom:var(--sp-4)!important;left:var(--sp-4)!important;}}