/* deskee.ru — маркетинговый сайт на ките, направление 9 («вычищенный»).

   ОТКУДА ЧТО ВЗЯТО.
   Токены и компоненты — design/kit-components.css (кит как прислан). Поверх —
   слой правок контраста из design/direction-9.css: он не про вкус, он про
   числа (design/аудит-кита.py). Каждая правка помечена «дир.9» и несёт своё
   измерение, чтобы через полгода никто не «вернул как в ките», не зная цены.

   ЧЕМ САЙТ ОТЛИЧАЕТСЯ ОТ КАБИНЕТА. Раздел 7 кита («Маркетинговый сайт»):
   разрядить — секции по 80–120px, display-кегль, ширина до 1200px, тени
   усилить, появление карточек по скроллу. Плотный ритм дашборда остаётся
   внутри макетов приложения — там кит велит ровно обратное: плотнее веба,
   радиусы меньше, тени только у плавающих слоёв.

   БАЗОВЫЙ КЕГЕЛЬ 16px, А НЕ КИТОВЫЕ 15. Пятнадцать взяты для дашборда, где на
   экран надо влезть; здесь человек читает сплошной текст с телефона. Внутри
   .desktop-frame кегель возвращается к 13–14px — это и есть та самая плотность
   утилиты, по которой макет читается как программа, а не как блок сайта.

   ОДИН ФАЙЛ. Девять страниц не стоят сборочного конвейера, а версию в адресе
   всё равно ставит build.py по хешу содержимого.
   ============================================================ */

/* ===== ТОКЕНЫ ===== */
:root{
  /* ОДИН ИНДИГО, ТОН ЗНАКА (21.08.2026). Было два: китовый #666cff под
     декоративные пятна и затемнённый #5257e0 везде, где на цвете лежит текст
     (белый на #666cff — 4.07 при пороге 4.5). Разделение выведено правильно,
     но у знака Р₂ тон #5257e0, и рядом стояли два похожих индиго: марка
     одного, а тени и декоративные пятна другого. Свели к тону знака —
     контраст от этого только вырос, цвет везде стал глубже.
     Тёмная тема не трогается: там акцент обязан быть светлее фона. */
  --app-primary:#5257e0;--app-primary-rgb:82,87,224;
  --app-primary-strong:#5257e0;--app-primary-strong-hover:#4348c4;
  --app-secondary:#6d788d;--app-success:#72e128;--app-success-rgb:114,225,40;
  --app-danger:#ff4d49;--app-danger-rgb:255,77,73;--app-warning:#fdb528;--app-info:#26c6f9;

  --app-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --app-font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --app-fw-regular:400;--app-fw-medium:500;--app-fw-semibold:600;

  --app-fs-tiny:.75rem;--app-fs-sm:.8125rem;--app-fs-base:1rem;--app-fs-lead:1.1875rem;
  --app-fs-h5:1.125rem;--app-fs-h4:1.473rem;--app-fs-h3:1.695rem;
  --app-fs-h2:2.252rem;--app-fs-h1:2.697rem;--app-fs-display:3.699rem;
  --app-lh-body:1.55;--app-lh-head:1.2;--app-ls-wide:.4px;--app-ls-label:.2px;

  --app-radius-sm:.25rem;--app-radius:.375rem;--app-radius-lg:.5rem;
  --app-radius-xl:.625rem;--app-radius-2xl:1rem;--app-radius-pill:50rem;

  --app-dur-fast:150ms;--app-dur-base:200ms;--app-dur-slow:300ms;
  --app-ease-out:cubic-bezier(0,0,.2,1);--app-ease-in-out:ease-in-out;
  --app-t-button:color var(--app-dur-fast) var(--app-ease-in-out),background-color var(--app-dur-fast) var(--app-ease-in-out),border-color var(--app-dur-fast) var(--app-ease-in-out),box-shadow var(--app-dur-fast) var(--app-ease-in-out);
  --app-t-card:box-shadow var(--app-dur-slow) var(--app-ease-in-out),transform var(--app-dur-slow) var(--app-ease-in-out);

  --app-container:1200px;   /* кит, раздел 7: ширина контента маркетинга */
  --app-navbar-h:4rem;
  --app-section:5.5rem;     /* 88px — середина китовых 80–120 */
}

/* Светлая — на голом :root, чтобы она была значением по умолчанию, а не
   ветвью медиазапроса. Тёмная объявляется ДВАЖДЫ ниже: по системе и по
   атрибуту. Разводить их нельзя — правка в одном месте разойдётся с другим
   (на это уже наступали в самом ките: ссылка под голым :root ушла в тёмную
   тему и дала 1.98). */
:root,[data-theme=light]{
  color-scheme:light;
  --app-bg:#ffffff;--app-bg-soft:#f7f7f9;--app-surface:#ffffff;--app-surface-alt:#f2f3f4;
  --app-text:#676a7b;--app-heading:#3b4055;
  --app-text-muted:#6b6e79;      /* дир.9: китовые #a8aab4 давали 2.31 → 5.08 */
  --app-border:rgba(38,43,67,.12);--app-border-soft:rgba(38,43,67,.075);--app-divider:#e9e9ec;
  --app-gray-25:#fafafa;--app-gray-50:#f2f3f4;--app-gray-100:#e9e9ec;--app-gray-200:#d4d5d9;
  --app-gray-300:#8b8f9c;        /* дир.9: границы полей 1.84 → 3.23 (порог 3) */
  --app-gray-600:#7d808e;
  --app-primary-subtle:#e7e7ff;--app-primary-subtle-text:#292b66;--app-primary-subtle-border:#c3c6ff;
  --app-success-subtle:#e8fadd;--app-success-subtle-text:#2e5a10;--app-success-subtle-border:#c8f3ab;
  --app-danger-subtle:#ffe3e2;--app-danger-subtle-text:#661f1d;--app-danger-subtle-border:#ffbab8;
  --app-warning-subtle:#fff3dd;--app-warning-subtle-text:#654810;--app-warning-subtle-border:#fee2ab;
  --app-info-subtle:#dcf6fe;--app-info-subtle-text:#0f4f64;--app-info-subtle-border:#aae9fd;
  --app-secondary-subtle:#e8e9ed;--app-secondary-subtle-text:#2c3038;--app-secondary-subtle-border:#c6cad3;
  --app-navbar-bg:rgba(255,255,255,.85);
  --app-link:#5257e0;--app-link-hover:#4348c4;   /* дир.9: 4.07 → 5.53 */
  --app-shadow-xs:0 .125rem .375rem 0 rgba(38,43,67,.14);
  --app-shadow-sm:0 .125rem .625rem 0 rgba(38,43,67,.16);
  --app-shadow:0 .25rem .875rem 0 rgba(38,43,67,.16);
  --app-shadow-lg:0 .375rem 1.25rem 0 rgba(38,43,67,.18);
  --app-shadow-xl:0 .5rem 1.625rem 0 rgba(38,43,67,.18);
  --app-shadow-primary:0 2px 6px 0 rgba(var(--app-primary-rgb),.14);
  --app-hero:linear-gradient(135deg,#4348c4 0%,#5257e0 100%); /* дир.9: белый на светлом конце был 2.20 */
}

/* Тёмная тема кита — не серая инверсия, а фиолетово-синяя. Правило кита:
   поверхность всегда СВЕТЛЕЕ подложки, в обеих темах. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --app-bg:#282a42;--app-bg-soft:#25273c;--app-surface:#30334e;--app-surface-alt:#3b3e58;
    --app-text:#b2b3ca;--app-heading:#d7d8ee;
    --app-text-muted:#a0a2ba;    /* дир.9: китовые #7b7d95 давали 3.05 → 4.90 */
    --app-border:rgba(234,234,255,.12);--app-border-soft:rgba(255,255,255,.09);--app-divider:#434660;
    --app-gray-25:#333851;--app-gray-50:#3b3e58;--app-gray-100:#434660;--app-gray-200:#555871;
    --app-gray-300:#7b7d95;--app-gray-600:#9fa0b8;
    --app-primary-subtle:#393c6a;--app-primary-subtle-text:#a3a7ff;--app-primary-subtle-border:#5358c1;
    --app-success-subtle:#3b4f48;--app-success-subtle-text:#aaed7e;--app-success-subtle-border:#5ba435;
    --app-danger-subtle:#51374d;--app-danger-subtle-text:#ff9492;--app-danger-subtle-border:#b7444b;
    --app-warning-subtle:#514848;--app-warning-subtle-text:#fed37e;--app-warning-subtle-border:#b58835;
    --app-info-subtle:#2e4b69;--app-info-subtle-text:#7dddfb;--app-info-subtle-border:#2a93bd;
    --app-secondary-subtle:#3a3e58;--app-secondary-subtle-text:#a7aebb;--app-secondary-subtle-border:#586077;
    --app-navbar-bg:rgba(40,42,66,.85);
    --app-link:#a3a7ff;--app-link-hover:#acb0ff;
    --app-shadow-xs:0 .125rem .375rem 0 rgba(16,17,33,.2);
    --app-shadow-sm:0 .125rem .625rem 0 rgba(16,17,33,.24);
    --app-shadow:0 .25rem .875rem 0 rgba(16,17,33,.26);
    --app-shadow-lg:0 .375rem 1.25rem 0 rgba(16,17,33,.28);
    --app-shadow-xl:0 .5rem 1.625rem 0 rgba(16,17,33,.3);
    --app-shadow-primary:0 2px 6px 0 rgba(var(--app-primary-rgb),.3);
    --app-primary:#666cff;--app-primary-rgb:102,108,255;--app-primary-strong:#a3a7ff;--app-primary-strong-hover:#acb0ff;
  }
}
[data-theme=dark]{
  color-scheme:dark;
  --app-bg:#282a42;--app-bg-soft:#25273c;--app-surface:#30334e;--app-surface-alt:#3b3e58;
  --app-text:#b2b3ca;--app-heading:#d7d8ee;--app-text-muted:#a0a2ba;
  --app-border:rgba(234,234,255,.12);--app-border-soft:rgba(255,255,255,.09);--app-divider:#434660;
  --app-gray-25:#333851;--app-gray-50:#3b3e58;--app-gray-100:#434660;--app-gray-200:#555871;
  --app-gray-300:#7b7d95;--app-gray-600:#9fa0b8;
  --app-primary-subtle:#393c6a;--app-primary-subtle-text:#a3a7ff;--app-primary-subtle-border:#5358c1;
  --app-success-subtle:#3b4f48;--app-success-subtle-text:#aaed7e;--app-success-subtle-border:#5ba435;
  --app-danger-subtle:#51374d;--app-danger-subtle-text:#ff9492;--app-danger-subtle-border:#b7444b;
  --app-warning-subtle:#514848;--app-warning-subtle-text:#fed37e;--app-warning-subtle-border:#b58835;
  --app-info-subtle:#2e4b69;--app-info-subtle-text:#7dddfb;--app-info-subtle-border:#2a93bd;
  --app-secondary-subtle:#3a3e58;--app-secondary-subtle-text:#a7aebb;--app-secondary-subtle-border:#586077;
  --app-navbar-bg:rgba(40,42,66,.85);
  --app-link:#a3a7ff;--app-link-hover:#acb0ff;
  --app-shadow-xs:0 .125rem .375rem 0 rgba(16,17,33,.2);
  --app-shadow-sm:0 .125rem .625rem 0 rgba(16,17,33,.24);
  --app-shadow:0 .25rem .875rem 0 rgba(16,17,33,.26);
  --app-shadow-lg:0 .375rem 1.25rem 0 rgba(16,17,33,.28);
  --app-shadow-xl:0 .5rem 1.625rem 0 rgba(16,17,33,.3);
  --app-shadow-primary:0 2px 6px 0 rgba(var(--app-primary-rgb),.3);
  --app-primary:#666cff;--app-primary-rgb:102,108,255;--app-primary-strong:#a3a7ff;--app-primary-strong-hover:#acb0ff;
}

/* ===== ДВИЖЕНИЕ ===== */
@keyframes app-rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes app-pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(var(--app-success-rgb),.55)}70%{box-shadow:0 0 0 .5rem rgba(var(--app-success-rgb),0)}}
@keyframes app-stripes{0%{background-position-x:1rem}}
@keyframes app-spin{to{transform:rotate(360deg)}}
@keyframes app-ripple{to{transform:scale(3.5);opacity:0}}

/* ===== ОСНОВА ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--app-bg);color:var(--app-text);
  font-family:var(--app-font-sans);font-size:var(--app-fs-base);line-height:var(--app-lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{color:var(--app-heading);font-weight:var(--app-fw-medium);line-height:var(--app-lh-head);margin:0 0 .75rem}
h1{font-size:var(--app-fs-h1);letter-spacing:-.5px}
h2{font-size:var(--app-fs-h2);letter-spacing:-.25px}
h3{font-size:var(--app-fs-h3)}
h4{font-size:var(--app-fs-h4)}
h5{font-size:var(--app-fs-h5)}
p{margin:0 0 1rem}
a{color:var(--app-link);text-decoration:none;transition:color var(--app-dur-fast) var(--app-ease-in-out)}
a:hover{color:var(--app-link-hover);text-decoration:underline}
strong,b{font-weight:var(--app-fw-semibold);color:var(--app-heading)}
img,svg{max-width:100%}
hr{border:0;border-top:1px solid var(--app-border);margin:2rem 0}
.muted{color:var(--app-text-muted)}
.small{font-size:var(--app-fs-sm)}
.caps{font-size:var(--app-fs-tiny);text-transform:uppercase;letter-spacing:var(--app-ls-wide);
  color:var(--app-text-muted);font-weight:var(--app-fw-medium)}
.цифры{font-family:var(--app-font-mono);letter-spacing:1.5px}
.центр{text-align:center}
.лид{font-size:var(--app-fs-lead);color:var(--app-text);max-width:46rem;line-height:1.5}
.центр .лид{margin-left:auto;margin-right:auto}

/* Фокус с клавиатуры виден везде — требование направления 9. Обводка не
   текст, порог 3:1, поэтому здесь остаётся исходный индиго. */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--app-primary);outline-offset:2px;border-radius:var(--app-radius-sm)}

/* ===== СЕТКА СТРАНИЦЫ ===== */
.ряд{max-width:var(--app-container);margin:0 auto;padding:0 1.5rem}
.узко{max-width:52rem}
section{padding:var(--app-section) 0}
section.тише{background:var(--app-bg-soft)}
.заголовок-секции{max-width:44rem;margin-bottom:2.5rem}
.заголовок-секции.центр{margin-left:auto;margin-right:auto}
.заголовок-секции h2{margin-bottom:.75rem}
.заголовок-секции p{color:var(--app-text-muted);margin:0}
.сетка{display:grid;gap:1.5rem}
.к2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.к3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.к4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.строка{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.строка.центр{justify-content:center}

/* Появление по скроллу — кит, раздел 5: translateY(12px)→0 со stagger.
   До вмешательства скрипта блок ВИДЕН: если JS не доехал, страница обязана
   остаться читаемой, а не пустой. */
.всплыть.готов{opacity:0}
/* opacity здесь объявлена ЯВНО, а не оставлена анимации: если анимацию
   отменили (страховка в скрипте), блок обязан быть видимым сам по себе. */
.всплыть.видно{opacity:1;animation:app-rise-in .5s var(--app-ease-out) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .всплыть.готов{opacity:1}
  html{scroll-behavior:auto}
}

/* ===== ШАПКА ===== */
.шапка{position:sticky;top:0;z-index:50;height:var(--app-navbar-h);
  background:var(--app-navbar-bg);backdrop-filter:blur(7.5px);-webkit-backdrop-filter:blur(7.5px);
  border-bottom:1px solid var(--app-border-soft)}
.шапка .ряд{display:flex;align-items:center;gap:1.5rem;height:100%}
.лого{display:flex;align-items:center;gap:.625rem;color:var(--app-heading);
  font-size:1.125rem;font-weight:var(--app-fw-semibold);letter-spacing:-.022em}
.лого:hover{color:var(--app-heading);text-decoration:none}
/* Доменная зона в логотипе — легче весом и тише по цвету, по разбору
   логотипа. На тёмном берём светлый акцент: приглушённый серый там гаснет
   рядом с белым словом, а акцент держит ту же роль «тише, но живое». */
.лого .зона{font-weight:var(--app-fw-medium);color:var(--app-text-muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .лого .зона{color:var(--app-link)}}
[data-theme=dark] .лого .зона{color:var(--app-link)}
/* Знак Р₂ «Пиксели в пути». Выбран 20.08.2026, разбор — на /logotip/.
   Тона отличаются по темам не по прихоти: 34 и 62 % на светлом и 45 и 70 % на
   тёмном — те же проценты в выворотке читаются бледнее. Правило дизайна:
   на глаз не перекрашивать. */
.знак{width:30px;height:30px;flex:0 0 30px;display:block;
  color:#5257e0;--тон-даль:.34;--тон-сред:.62}
.знак .даль,.знак .сред,.знак .близ{fill:currentColor}
.знак .даль{opacity:var(--тон-даль)}
.знак .сред{opacity:var(--тон-сред)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .знак{color:#fff;--тон-даль:.45;--тон-сред:.7}
}
[data-theme=dark] .знак{color:#fff;--тон-даль:.45;--тон-сред:.7}
.меню{display:flex;gap:.25rem;margin-left:auto;flex-wrap:wrap}
.меню a{padding:.4375rem .75rem;border-radius:var(--app-radius-lg);
  color:var(--app-text);font-size:.9375rem;transition:background-color var(--app-dur-base) var(--app-ease-in-out),color var(--app-dur-base) var(--app-ease-in-out)}
.меню a:hover{background:var(--app-gray-50);color:var(--app-heading);text-decoration:none}
.меню a.кабинет{color:var(--app-link)}
.меню a.тек{color:var(--app-heading);font-weight:var(--app-fw-medium);background:var(--app-gray-50)}
.правое{display:flex;align-items:center;gap:.5rem}
.тумблер-темы{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--app-border);border-radius:var(--app-radius-lg);background:transparent;
  color:var(--app-text);cursor:pointer;transition:var(--app-t-button);font-size:1rem;line-height:1}
.тумблер-темы:hover{background:var(--app-gray-50);color:var(--app-heading)}
.бургер{display:none;width:34px;height:34px;align-items:center;justify-content:center;
  border:1px solid var(--app-border);border-radius:var(--app-radius-lg);background:transparent;
  color:var(--app-heading);cursor:pointer;font-size:1.125rem;line-height:1}

/* ===== КНОПКИ (кит) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  font-family:inherit;font-size:.9375rem;font-weight:var(--app-fw-medium);
  letter-spacing:var(--app-ls-wide);line-height:1.375;
  padding:.5625rem 1.25rem;border-radius:var(--app-radius);border:1px solid transparent;
  cursor:pointer;transition:var(--app-t-button);position:relative;overflow:hidden;
  -webkit-user-select:none;user-select:none;background:transparent;color:var(--app-text);
  text-align:center}
/* text-transform:capitalize из кита отменён: по-русски он даёт
   «Оставить Заявку На Пилот». Отмена сделана здесь, а не правкой кита. */
.btn,.btn:hover{text-decoration:none}
.btn-primary{background:var(--app-primary-strong);border-color:var(--app-primary-strong);color:#fff;
  box-shadow:var(--app-shadow-primary)}
[data-theme=dark] .btn-primary,:root:not([data-theme=light]) .btn-primary{color:var(--app-bg)}
.btn-primary:hover{background:var(--app-primary-strong-hover);border-color:var(--app-primary-strong-hover);
  box-shadow:0 4px 10px 0 rgba(var(--app-primary-rgb),.28)}
.btn-outline{border-color:var(--app-primary-strong);color:var(--app-link)}
.btn-outline:hover{background:var(--app-primary-strong);color:#fff}
[data-theme=dark] .btn-outline:hover,:root:not([data-theme=light]) .btn-outline:hover{color:var(--app-bg)}
.btn-tonal{background:var(--app-primary-subtle);color:var(--app-primary-subtle-text)}
.btn-tonal:hover{background:var(--app-primary-subtle-border);color:var(--app-primary-subtle-text)}
.btn-ghost{color:var(--app-link)}
.btn-ghost:hover{background:var(--app-primary-subtle);color:var(--app-primary-subtle-text)}
.btn-sm{padding:.4375rem .96rem;font-size:var(--app-fs-sm)}
.btn-lg{padding:.75rem 1.75rem;font-size:1.0625rem;border-radius:var(--app-radius-xl)}
.btn-белая{background:#fff;color:#3339a8;border-color:#fff}
.btn-белая:hover{background:#ececff;color:#292b66}
.btn-контур-белый{border-color:rgba(255,255,255,.55);color:#fff}
.btn-контур-белый:hover{background:rgba(255,255,255,.14);color:#fff}

/* ===== КАРТОЧКИ (кит) ===== */
.card{background:var(--app-surface);border-radius:var(--app-radius-xl);
  box-shadow:var(--app-shadow);padding:1.5rem;transition:var(--app-t-card)}
.card.hoverable:hover{box-shadow:var(--app-shadow-lg);transform:translateY(-2px)}
.card-title{font-size:var(--app-fs-h5);color:var(--app-heading);
  font-weight:var(--app-fw-medium);margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card.тихая{box-shadow:none;border:1px solid var(--app-border)}
.stat-icon{width:40px;height:40px;border-radius:var(--app-radius-lg);display:inline-flex;
  align-items:center;justify-content:center;font-size:1.125rem;font-weight:var(--app-fw-medium)}

/* Блок скачивания. Команда и отпечаток — длинные строки, которые нельзя
   переносить по словам: разорванный посередине хеш перестаёт быть хешем, а
   разорванная команда не копируется целиком. Поэтому оба прокручиваются вбок
   внутри себя, а не растягивают страницу. */
.команда{display:block;overflow-x:auto;white-space:nowrap;padding:.5rem .625rem;
  border-radius:var(--app-radius);border:1px solid var(--app-border-soft);
  background:var(--app-surface-alt)}
.отпечаток{margin-bottom:.5rem}
.отпечаток code{display:block;overflow-x:auto;white-space:nowrap;
  font-size:.75rem;line-height:1.5}
/* Полосу прокрутки этим двум делаем тонкой и своего цвета. Системная толстая
   и светло-серая, а лежит она под хешем во всю его ширину — в тёмной теме
   читалась как заполненный индикатор, будто что-то грузится. */
.команда,.отпечаток code{scrollbar-width:thin;scrollbar-color:var(--app-border) transparent}
.команда::-webkit-scrollbar,.отпечаток code::-webkit-scrollbar{height:6px}
.команда::-webkit-scrollbar-track,.отпечаток code::-webkit-scrollbar-track{background:transparent}
.команда::-webkit-scrollbar-thumb,.отпечаток code::-webkit-scrollbar-thumb{
  background:var(--app-border);border-radius:3px}

/* ===== БЕЙДЖИ, ТОЧКИ, АЛЕРТЫ (кит) ===== */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.325rem .5rem;
  font-size:var(--app-fs-sm);font-weight:var(--app-fw-medium);border-radius:var(--app-radius);line-height:1.2}
.badge.pill{border-radius:var(--app-radius-pill);padding:.325rem .75rem}
.b-primary{background:var(--app-primary-subtle);color:var(--app-primary-subtle-text)}
.b-success{background:var(--app-success-subtle);color:var(--app-success-subtle-text)}
.b-danger{background:var(--app-danger-subtle);color:var(--app-danger-subtle-text)}
.b-warning{background:var(--app-warning-subtle);color:var(--app-warning-subtle-text)}
.b-info{background:var(--app-info-subtle);color:var(--app-info-subtle-text)}
.b-secondary{background:var(--app-secondary-subtle);color:var(--app-secondary-subtle-text)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.dot-live{background:var(--app-success);animation:app-pulse-dot 2s var(--app-ease-in-out) infinite}
.alert{padding:.875rem 1rem;border-radius:var(--app-radius-lg);border:1px solid transparent}
.alert :last-child{margin-bottom:0}
.a-primary{background:var(--app-primary-subtle);color:var(--app-primary-subtle-text);border-color:var(--app-primary-subtle-border)}
.a-success{background:var(--app-success-subtle);color:var(--app-success-subtle-text);border-color:var(--app-success-subtle-border)}
.a-warning{background:var(--app-warning-subtle);color:var(--app-warning-subtle-text);border-color:var(--app-warning-subtle-border)}
.a-info{background:var(--app-info-subtle);color:var(--app-info-subtle-text);border-color:var(--app-info-subtle-border)}
.alert b{color:inherit}

/* ===== СПИСКИ ===== */
ul,ol{padding-left:1.25rem;margin:0 0 1rem}
li{margin-bottom:.5rem}
.список{list-style:none;padding:0;margin:0}
.список li{position:relative;padding-left:1.75rem;margin-bottom:.75rem}
.список li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;
  border-left:2px solid var(--app-primary-strong);border-bottom:2px solid var(--app-primary-strong);
  transform:rotate(-45deg)}
.список.минусы li::before{content:"";top:.62em;width:12px;height:0;border-left:0;
  border-bottom:2px solid var(--app-gray-300);transform:none}
.шаги{list-style:none;counter-reset:шаг;padding:0;margin:0}
.шаги li{counter-increment:шаг;position:relative;padding-left:3rem;margin-bottom:1.25rem}
.шаги li::before{content:counter(шаг);position:absolute;left:0;top:-.15rem;width:2rem;height:2rem;
  border-radius:var(--app-radius-lg);background:var(--app-primary-subtle);color:var(--app-primary-subtle-text);
  display:flex;align-items:center;justify-content:center;font-weight:var(--app-fw-medium);font-size:.9375rem}
.шаги li b{display:block;color:var(--app-heading);margin-bottom:.125rem}

/* ===== ГЕРОЙ ===== */
.герой{padding:calc(var(--app-section) - 1rem) 0 var(--app-section);
  background:var(--app-bg-soft);border-bottom:1px solid var(--app-border-soft)}
.герой h1{font-size:var(--app-fs-display);line-height:1.08;letter-spacing:-1.5px;margin-bottom:1.25rem}
/* Длинный заголовок — кеглем H1, а не display: класс ставит компоненты.py по
   длине строки. Кит от этого не страдает: раздел 7 требует «display-кегль
   59px+» от ПЕРВОГО ЭКРАНА, а не от каждой строки в нём, и заголовок в пять
   строк противоречит той же его установке про воздух. */
.герой.длинный h1{font-size:var(--app-fs-h1);line-height:1.12;letter-spacing:-.75px}
.герой .лид{margin-bottom:1.75rem}
.герой-градиент{background:var(--app-hero);border-bottom:0;color:#fff}
.герой-градиент h1,.герой-градиент .лид,.герой-градиент .muted{color:#fff}
.герой-градиент .лид{opacity:.92}
.герой .строка{margin-bottom:1.25rem}
.под-кнопками{font-size:var(--app-fs-sm);color:var(--app-text-muted);margin:0}
.герой-градиент .под-кнопками{color:rgba(255,255,255,.85)}
/* Ссылки под кнопками первого экрана. Обычный цвет ссылки — синий, и на синем
   градиенте он исчезает: строка «другая система» была невидимой, пока её не
   выделили подчёркиванием и белым. */
.герой-градиент .под-кнопками a{color:#fff;text-decoration:underline;
  text-underline-offset:2px}
.герой-градиент .под-кнопками a:hover{opacity:.8}
.полосы{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
/* Бейджи героя — только те, что в его собственной полосе. Без .полосы это
   правило красило и бейджи внутри макета приложения, стоящего на том же
   градиенте: белый текст на белой карточке — то есть пустое место.
   Поймано снимком экрана, глазами по коду такое не видно. */
.герой-градиент .полосы .badge{background:rgba(255,255,255,.16);color:#fff}

/* ===== МАКЕТ ПРИЛОЖЕНИЯ =====
   Кит, раздел 7, десктоп: плотнее веба, радиусы меньше, тени только у
   плавающих слоёв. Здесь макет сам и есть плавающий слой над страницей —
   поэтому тень у рамы одна, а внутри панели разделены границей. */
.desktop-frame{background:var(--app-surface);border:1px solid var(--app-border);
  border-radius:var(--app-radius-lg);overflow:hidden;box-shadow:var(--app-shadow-xl);
  font-size:.875rem;line-height:1.4}
/* Цвет заголовка окна — основной текст, а не приглушённый. Замер: тише на
   подложке .tb давало 4.15 при пороге 4.5, то есть строка «28 кадр/с · 1,4
   МБ/с» читалась хуже всего остального в макете. Основной даёт 5.0 в светлой
   и 5.5 в тёмной. */
.desktop-frame .tb{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
  background:var(--app-surface-alt);border-bottom:1px solid var(--app-border);
  font-size:var(--app-fs-sm);color:var(--app-text)}
.desktop-frame .tb .огни{display:flex;gap:.35rem;margin-right:.35rem}
.desktop-frame .tb .огни i{width:9px;height:9px;border-radius:50%;background:var(--app-gray-200);display:block}
.desktop-frame .тело{padding:1rem}
/* Внутри рамы работают токены темы, а не цвета секции, на которой рама
   лежит. Иначе белый текст героя протекает в макет. */
.desktop-frame,.desktop-frame p,.desktop-frame h1,.desktop-frame .лид{color:var(--app-text)}
.desktop-frame .muted,.desktop-frame .caps{color:var(--app-text-muted)}
.desktop-frame b,.desktop-frame strong{color:var(--app-heading)}
.desktop-frame .btn{font-size:var(--app-fs-sm)}
.герой .desktop-frame{margin-top:0}
.id-поле{font-family:var(--app-font-mono);font-size:var(--app-fs-h3);letter-spacing:3px;
  color:var(--app-heading);font-weight:var(--app-fw-medium);line-height:1.2}
.id-поле.акцент{color:var(--app-primary-strong)}
[data-theme=dark] .id-поле.акцент,:root:not([data-theme=light]) .id-поле.акцент{color:var(--app-link)}
.строка-машины{display:flex;align-items:center;gap:.75rem;padding:.5rem .625rem;
  border-radius:var(--app-radius-lg)}
.строка-машины+.строка-машины{border-top:1px solid var(--app-border-soft)}
.строка-машины.вот{background:var(--app-primary-subtle)}
.строка-машины b{font-family:var(--app-font-mono);font-weight:var(--app-fw-regular);
  color:var(--app-heading);letter-spacing:1px}
.строка-машины .где{margin-left:auto;color:var(--app-text-muted);font-size:var(--app-fs-sm);text-align:right}
/* На тональной подложке — тональный же текст: приглушённый серый на
   светло-индиговом давал 4.18 вместо 4.5. Пара «очень светлый фон + насыщенный
   текст того же оттенка» — главный приём кита, здесь он заодно и чинит. */
.строка-машины.вот .где{color:var(--app-primary-subtle-text)}
.экран-заглушка{background:#1b1d2e;border-radius:var(--app-radius);padding:2.5rem 1rem;
  text-align:center;color:#8f93b0;font-size:var(--app-fs-sm);font-family:var(--app-font-mono)}
.progress{height:8px;background:var(--app-gray-100);border-radius:var(--app-radius-pill);overflow:hidden}
.progress i{display:block;height:100%;background:var(--app-primary);border-radius:inherit}
.progress.striped i{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);
  background-size:1rem 1rem;animation:app-stripes 1s linear infinite}
.подпись-макета{font-size:var(--app-fs-sm);color:var(--app-text-muted);margin:.75rem 0 0}

/* Пара колонок «текст + макет». minmax(0,…) обязателен: без него длинное
   моноширинное число распирает колонку и ломает сетку на узком экране. */
.пара{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem;align-items:center}
/* И самим колонкам тоже: minmax на дорожке не мешает элементу внутри
   раздуться по min-content — таблица в макете кабинета так и вылезала
   за край на узком экране. */
.пара>*{min-width:0}
.desktop-frame .input{min-width:0}
@media (max-width:1080px){.desktop-frame .строка{flex-wrap:wrap!important}}
.пара.наоборот>*:first-child{order:2}
.пара h2{margin-bottom:1rem}

/* ===== ТАБЛИЦЫ ===== */
.обёртка-таблицы{overflow-x:auto;background:var(--app-surface);border-radius:var(--app-radius-xl);
  box-shadow:var(--app-shadow)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.875rem 1.25rem;border-bottom:1px solid var(--app-border-soft)}
th{font-size:var(--app-fs-tiny);text-transform:uppercase;letter-spacing:var(--app-ls-label);
  font-weight:var(--app-fw-regular);color:var(--app-heading);border-bottom:1px solid var(--app-border);
  white-space:nowrap}
tbody tr{transition:background-color var(--app-dur-base) var(--app-ease-in-out)}
tbody tr:hover{background:var(--app-gray-25)}
tbody tr:last-child td{border-bottom:0}
td.да{color:var(--app-success-subtle-text)}
tr.слабо td{color:var(--app-text-muted)}
.срав td:first-child{color:var(--app-heading)}

/* ===== ТАРИФЫ =====
   Кит, раздел 7: рекомендуемый тариф выделяется тенью xl и границей primary,
   а не другим цветом фона. */
.тариф{display:flex;flex-direction:column;height:100%}
.тариф.главный{box-shadow:var(--app-shadow-xl);border:1px solid var(--app-primary)}
.тариф .цена{font-size:var(--app-fs-h2);color:var(--app-heading);font-weight:var(--app-fw-medium);
  line-height:1.1;margin:.5rem 0 .25rem}
.тариф .цена small{font-size:var(--app-fs-base);color:var(--app-text-muted);font-weight:var(--app-fw-regular)}
.тариф .список{margin:1.25rem 0;flex:1}
.тариф .список li{font-size:.9375rem;margin-bottom:.5rem}

/* ===== ВОПРОСЫ ===== */
.вопрос{background:var(--app-surface);border-radius:var(--app-radius-lg);
  border:1px solid var(--app-border);margin-bottom:.75rem;overflow:hidden}
.вопрос summary{cursor:pointer;padding:1rem 1.25rem;color:var(--app-heading);
  font-weight:var(--app-fw-medium);list-style:none;display:flex;align-items:center;gap:.75rem}
.вопрос summary::-webkit-details-marker{display:none}
.вопрос summary::after{content:"+";margin-left:auto;color:var(--app-text-muted);font-size:1.25rem;line-height:1}
.вопрос[open] summary::after{content:"−"}
.вопрос summary:hover{background:var(--app-gray-25)}
.вопрос .ответ{padding:0 1.25rem 1.25rem;color:var(--app-text)}
.вопрос .ответ :last-child{margin-bottom:0}

/* ===== ФОРМА ===== */
.поле{margin-bottom:1rem}
.label{display:block;font-size:.9375rem;font-weight:var(--app-fw-medium);
  color:var(--app-heading);margin-bottom:.5rem}
.input,textarea.input{width:100%;height:48px;padding:.79rem .94rem;font-family:inherit;font-size:.9375rem;
  color:var(--app-heading);background:var(--app-surface);border:1px solid var(--app-gray-300);
  border-radius:var(--app-radius-lg);transition:border-color var(--app-dur-fast) var(--app-ease-in-out),box-shadow var(--app-dur-fast) var(--app-ease-in-out);outline:none}
textarea.input{height:auto;min-height:96px;resize:vertical}
.input::placeholder{color:var(--app-text-muted)}
.input:focus{border-color:var(--app-primary);box-shadow:0 0 0 .15rem rgba(var(--app-primary-rgb),.18)}
.согласие{font-size:var(--app-fs-sm);color:var(--app-text-muted);margin:.75rem 0 0}

/* ===== ВРЕЗКА ПРИЗЫВА ===== */
.призыв{background:var(--app-hero);color:#fff;border-radius:var(--app-radius-2xl);
  padding:3rem 2.5rem;text-align:center;box-shadow:var(--app-shadow-xl)}
.призыв h2{color:#fff;margin-bottom:.75rem}
.призыв p{max-width:34rem;margin:0 auto 1.75rem;opacity:.92;font-size:var(--app-fs-lead)}
/* Строка под кнопками врезки живёт на том же градиенте, что и в первом экране,
   и правила ей нужны те же: серый текст и синяя ссылка на синем не читаются. */
.призыв .под-кнопками{max-width:34rem;margin:1rem auto 0;
  color:rgba(255,255,255,.85);font-size:var(--app-fs-sm)}
.призыв .под-кнопками a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.призыв .под-кнопками a:hover{opacity:.8}
.секция-призыва{padding-bottom:var(--app-section)}

/* ===== ПОДВАЛ ===== */
.подвал{background:var(--app-bg-soft);border-top:1px solid var(--app-border);
  padding:3.5rem 0 2.5rem;font-size:.9375rem}
.подвал-сетка{display:grid;gap:2rem;grid-template-columns:1.4fr repeat(3,1fr)}
.подвал h5{font-size:var(--app-fs-tiny);text-transform:uppercase;letter-spacing:var(--app-ls-wide);
  color:var(--app-text-muted);font-weight:var(--app-fw-medium);margin-bottom:1rem}
.подвал ul{list-style:none;padding:0;margin:0}
.подвал li{margin-bottom:.5rem}
.подвал a{color:var(--app-text)}
.подвал a:hover{color:var(--app-link)}
.низ-подвала{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--app-border);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:var(--app-fs-sm);color:var(--app-text-muted)}
.низ-подвала p{margin:0}

/* ===== АДАПТИВ ===== */
@media (max-width:1000px){
  .пара{grid-template-columns:1fr;gap:2rem}
  .пара.наоборот>*:first-child{order:0}
  .подвал-сетка{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--app-fs-display:2.5rem;--app-fs-h1:2rem;--app-fs-h2:1.6rem;--app-fs-h3:1.35rem;
        --app-fs-lead:1.0625rem;--app-section:3.5rem}
  .призыв{padding:2.25rem 1.25rem}
  /* Кнопки врезки на узком — одной ширины. Они стоят по центру одна под
     другой, и разная ширина у центрированной пары читается как небрежность
     (в первом экране кнопки прижаты влево, там разнобой не мешает). */
  .призыв .строка{flex-direction:column;align-items:stretch}
  .призыв .строка .btn{width:100%}
  .подвал-сетка{grid-template-columns:1fr}
  .desktop-frame{font-size:var(--app-fs-sm)}
  .id-поле{font-size:1.35rem;letter-spacing:2px}
  th,td{padding:.75rem .875rem}
}
/* Порог бургера — 1080, а не 760: шесть пунктов меню, кнопка призыва и
   переключатель темы в одну строку помещаются только начиная с этой ширины.
   Ниже меню переносилось на вторую строку и вылезало из шапки высотой 64px
   (замер, а не глазомер). */
@media (max-width:1080px){
  .бургер{display:inline-flex}
  /* Меню на узком экране — раскрывающаяся полка под шапкой. Пункты остаются
     ссылками и работают без JS: закрыто оно только классом, а не hidden. */
  .меню{position:absolute;top:var(--app-navbar-h);left:0;right:0;display:none;
    flex-direction:column;gap:.125rem;margin:0;padding:.75rem 1.5rem 1rem;
    background:var(--app-surface);border-bottom:1px solid var(--app-border);
    box-shadow:var(--app-shadow-lg)}
  .меню.раскрыто{display:flex}
  .шапка .ряд{gap:.75rem}
  .правое{margin-left:auto}
}

/* ===== СЛУЖЕБНОЕ ===== */
/* Ссылка «к содержанию» — для клавиатуры и экранных читалок. Видна только
   когда на неё встали: иначе она мешала бы всем остальным. */
.к-содержанию{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--app-surface);color:var(--app-link);padding:.75rem 1.25rem;
  border-radius:0 0 var(--app-radius-lg) 0;box-shadow:var(--app-shadow-lg)}
.к-содержанию:focus{left:0}
/* Кнопка призыва в шапке уходит только на телефоне: на планшете, где уже
   стоит бургер, места ей всё ещё хватает, а призыв в шапке — единственный,
   который виден до прокрутки. */
@media (max-width:560px){.скрыть-узко{display:none}}


/* ── Снимки продукта (компоненты.экран) и демо подключения, 06.09.2026 ── */
.экран{margin:0}
.экран img{display:block;width:100%;height:auto;border-radius:var(--app-radius);border:1px solid var(--app-border);box-shadow:0 18px 40px -24px rgba(20,22,40,.35)}
.экран figcaption{font-size:.875rem;color:var(--app-text-muted);margin-top:.625rem}
.экран .т{display:none}
/* Светлый снимок прячем в тёмной теме ТОЛЬКО если есть тёмный: у окна сеанса он один, тёмный по природе. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .экран.две .с{display:none}:root:not([data-theme=light]) .экран.две .т{display:block}}
[data-theme=dark] .экран.две .с{display:none}[data-theme=dark] .экран.две .т{display:block}
/* hidden обязан побеждать display:flex у .строка — иначе кнопки демо видны до нажатия. */
.демо [hidden]{display:none!important}
.демо{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:860px){.демо{grid-template-columns:1fr 1.2fr 1fr;align-items:start}}
.демо-шаг .caps{margin-bottom:.5rem}
.демо-окно{margin-top:.5rem}
.демо-статус{margin:0 0 .75rem;min-height:3.2em}
.демо-журнал{margin:.5rem 0 0;padding-left:1.25rem;font-size:.9rem;line-height:1.5}
.демо-журнал li+li{margin-top:.25rem}
.демо-окно.жду .tb{background:var(--app-primary-subtle)}