/* ============================================================================
   FLUX — сайт. Общие стили для всех шести страниц.

   Две вещи, ради которых стили переписаны заново.

   1. ШИРИНА. Раньше всё лежало в колонке 1120 px по центру: на мониторе 1920
      это 40 % экрана, а по краям пустота — читалось как «всё сдвинуто в
      середину». Теперь колонка 1400 px, поля растут вместе с экраном, а
      заголовок и текст стоят В РАЗНЫХ колонках, а не друг под другом по центру.

   2. РИТМ. Раньше каждая секция была устроена одинаково: надпись — заголовок —
      абзац — сетка стеклянных карточек. Одинаковые секции подряд читаются как
      одна длинная, и ничего не выделяется. Теперь есть светлые секции («бумага»),
      секции в разбивку текст/картинка и секции во всю ширину.

   Движение: только transform и opacity, и только по делу — появление секции,
   ховер, скролл-фильм, разовые анимации тарифов. Ничего не мигает и не бежит
   по кругу: это первое, что владелец назвал дешёвым.
   ========================================================================== */

:root{
  /* тёмная основа */
  --bg:#0E1A16;
  --ink:#EAF3EF;
  --muted:#A7BCB4;
  --dim:#7B928A;

  /* светлая «бумага» — секции-передышки между тёмными */
  --paper:#EFF4F1;
  --paper-ink:#0D1A15;
  --paper-mut:#4F6760;
  --paper-line:rgba(13,26,21,.10);

  /* УДАРНАЯ ПЛИТА — одна-две секции на сайт, там, где живут большие цифры.
     Это удар, а не обои: если покрасить так всё, удара не будет. */
  --punch:#D9F65C;
  --punch-ink:#15200B;
  --punch-mut:#3B4D1B;
  --punch-rule:rgba(21,32,11,.85);   /* линейка над цифрой */
  --punch-soft:rgba(21,32,11,.66);   /* подпись под цифрой */

  /* КНОПКА-ДЕЙСТВИЕ — отдельный токен, а НЕ цвет плиты.
     Слитые в один, они запирают палитру: там, где плита должна быть глубокой и
     держать текст, кнопка обязана быть звонкой и просить нажать. Развели —
     и палитра получила два голоса вместо одного. */
  --cta:#D9F65C;
  --cta-ink:#15200B;
  --cta-glow:rgba(217,246,92,.55);   /* тень под кнопкой */
  --cta-soft:rgba(217,246,92,.10);   /* заливка выбранной карточки роли */
  --cta-edge:rgba(217,246,92,.55);   /* её же кромка */

  /* ВТОРАЯ СВЕТЛАЯ СЕКЦИЯ — другой климат, чтобы две светлые паузы подряд
     не читались одной. Холодная / ударная / тёплая — три разные паузы. */
  --sand:#F3EDDD;
  --sand-ink:#241C0B;
  --sand-mut:#6F6039;
  --sand-card:#F8F5EC;
  --sand-line:rgba(36,28,11,.12);

  --acc:#1D9E75;
  --acc-lit:#3FD3A2;
  --acc-d:#12735A;
  --blue:#8FE3C4;
  --gold:#F2C662;
  --gold-d:#B98A00;
  --bad:#E5533D;
  --ink-on-acc:#EAF3EF;

  /* Мягкие заливки и кромки служебных плашек — заметка, чипс файла, статусная
     строка. Держим их токенами, иначе после смены палитры плашка остаётся
     цветом прошлого направления. Считаются в tools/site-palette.mjs. */
  --acc-soft:rgba(63,211,162,.10);
  --acc-edge:rgba(63,211,162,.30);
  --gold-soft:rgba(242,198,98,.12);
  --gold-edge:rgba(242,198,98,.32);

  /* Дисплейная гарнитура — та же, что у имён основателей в приложении:
     Unbounded. Широкая и характерная, поэтому только заголовки и большие
     цифры; текст остаётся на Manrope. */
  --disp:"Unbounded", Manrope, system-ui, sans-serif;

  --glass:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  --glass-base:rgba(14,26,22,.55);   /* подложка под стеклом, гасит пятна авроры */
  --glass-blur:blur(20px) saturate(185%);
  --bevel:inset 1.6px 1.6px 1px -1px rgba(255,255,255,.5),
          inset -1.6px -1.6px 1px -1px rgba(255,255,255,.22);
  --bevel-hi:inset 2px 2px 1.5px -1px rgba(255,255,255,.72),
             inset -2px -2px 1.5px -1px rgba(255,255,255,.34);
  --shadow:0 10px 28px -12px rgba(0,0,0,.5);
  --hair:1px solid rgba(255,255,255,.10);
  --r:22px;

  --e-reveal:cubic-bezier(.22,1,.36,1);
  --e-micro:cubic-bezier(.2,.8,.2,1);

  --pad:clamp(20px,4.5vw,80px);
  --maxw:1400px;
  --gap:clamp(14px,1.4vw,22px);
}

/* На широком мониторе колонка 1400 снова начинает выглядеть «зажатой в
   середину»: по краям остаётся по 260 px пустоты. Отпускаем ширину — поля
   всё равно держит --pad, а секции-«бумага» и фильм и так идут во всю ширину. */
/* Плиты-вкладки: радиус кромки, наезд на соседа, высота цветного замеса. */
:root{
  --sect-pad:clamp(72px,9vw,150px);
  --tab-r:clamp(20px,2.6vw,44px);
  --tab-lift:clamp(16px,2.2vw,38px);
  --tab-mix-h:clamp(90px,11vw,190px);
}

@media (min-width:1660px){ :root{ --maxw:1560px } }
@media (min-width:1900px){ :root{ --maxw:1680px } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 clamp(16px,1.05vw,18px)/1.55 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.03 }
/* Unbounded шире Manrope примерно на четверть, поэтому кегль меньше прежнего:
   76 в Unbounded занимает столько же, сколько занимали прежние 104. */
h1{ font-family:var(--disp); font-weight:700; letter-spacing:-.01em;
  line-height:1.06; font-size:clamp(30px,4.8vw,78px) }
h2{ font-family:var(--disp); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(22px,3vw,50px); line-height:1.12 }
h3{ font-size:clamp(19px,1.45vw,25px); line-height:1.22; letter-spacing:-.02em; font-weight:700 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
svg{ display:block }
img{ max-width:100% }

.num{ font-family:"Space Grotesk", Manrope, system-ui, sans-serif;
  font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.02em }

/* Большая витринная цифра — дисплейной гарнитурой. Мелкие табличные числа
   остаются на Space Grotesk: Unbounded в строке таблицы нечитаем. */
.dnum{ font-family:var(--disp); font-weight:800; letter-spacing:0;
  font-variant-numeric:tabular-nums }

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

.skip{ position:fixed; left:12px; top:-64px; z-index:120; padding:10px 16px;
  border-radius:12px; background:var(--acc); color:var(--ink-on-acc); font-weight:700 }
.skip:focus{ top:12px }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

::selection{ background:rgba(29,158,117,.4); color:var(--ink) }
.paper ::selection{ background:rgba(29,158,117,.28); color:var(--paper-ink) }

.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.ic{ width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }

/* ─────────────────────────── аврора ───────────────────────────
   Блики дрейфуют очень медленно; размытие живёт на дочернем слое, чтобы
   браузер кэшировал растр и не пересчитывал его на каждый кадр. */
.aurora{ position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(130% 95% at 50% -12%, #102A21 0%, var(--bg) 58%) }
.drift{ position:absolute; will-change:transform }
.blob{ display:block; width:100%; height:100%; border-radius:50%; filter:blur(120px) }
.blob-green{ background:rgba(29,158,117,.30) }
.blob-blue{ background:rgba(94,138,46,.22) }
.blob-deep{ background:rgba(12,70,54,.42) }
.drift-1{ left:-12%; top:-16%; width:52vmax; height:44vmax;
  animation:drift-a 52s ease-in-out infinite alternate }
.drift-2{ right:-16%; top:20%; width:48vmax; height:42vmax;
  animation:drift-b 46s ease-in-out infinite alternate }
.drift-3{ left:24%; bottom:-18%; width:56vmax; height:46vmax;
  animation:drift-c 60s ease-in-out infinite alternate }
@keyframes drift-a{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(8vw,6vh,0) } }
@keyframes drift-b{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-7vw,9vh,0) } }
@keyframes drift-c{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(6vw,-8vh,0) } }

/* ─────────────────────────── каркас ─────────────────────────── */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.wrap-tight{ max-width:1100px }

.sect{ padding-block:var(--sect-pad); position:relative; scroll-margin-top:96px }
.sect-sm{ --sect-pad:clamp(52px,6vw,96px) }

/* ─────────────────────── ПЛИТЫ-ВКЛАДКИ ───────────────────────
   Разделы больше не встык. Каждый следующий — плита со скруглённым верхом,
   приподнятая над предыдущей: как вкладка в картотеке. Стык перестаёт быть
   линией во всю ширину и становится дугой, а дуга не режет глаз, потому что
   у неё есть толщина и тень.

   Почему не растворение альфой, как было раньше. Полоса градиента честно
   гасила цвет, но у неё нет ФОРМЫ: страница читалась стопкой одинаковых
   полос, а на тёмных стыках (сцена стены, свет «Смены») градиент упирался в
   собственный overflow и всё равно вставал линейкой. Дуга даёт форму, тень
   даёт глубину, а цвет над дугой смешивается замесом — своим на каждом
   стыке.

   Замес — размытое пятно из палитры, лежащее НАД кромкой: оно принадлежит
   верхней плите и подкрашивает нижнюю. Пятна разные (доля мяты, оливы,
   глубокой зелени, место и размер), поэтому два соседних перехода никогда
   не выглядят одним и тем же приёмом. Радиальное, а не линейное: линейное
   гасло бы прямоугольником и перечеркнуло бы саму дугу.

   Тёмные разделы получают СВОЙ фон-замес: раньше они были прозрачными и
   показывали аврору, а прозрачная плита не может наехать на светлую — сквозь
   неё просвечивала бы бумага. Аврора осталась подложкой страницы (её видно
   вокруг фильма), а глубину тёмным разделам теперь даёт собственная смесь. */
main > section{
  position:relative;
  border-start-start-radius:var(--tab-r);
  border-start-end-radius:var(--tab-r);
}
/* Первый экран — не вкладка: ему не на что наезжать. */
main > section:first-child{ border-start-start-radius:0; border-start-end-radius:0 }

main > section + section{
  margin-top:calc(-1 * var(--tab-lift));
  /* Тень плиты ложится на соседа снизу вверх — это и есть «вкладка лежит
     сверху», без единой нарисованной линии. */
  box-shadow:0 -24px 52px -28px rgba(2,8,6,.78);
}
/* Воздух возвращаем ровно на величину наезда: иначе первая строка раздела
   уезжает под собственную кромку. */
main > section + section.sect{ padding-top:calc(var(--sect-pad) + var(--tab-lift)) }
/* И снизу тоже. Наезд забирает --tab-lift у НИЖНЕГО края предыдущей плиты:
   пока раздел кончался воздухом, это было незаметно, но там, где он кончается
   мелкой подписью (тарифы, мозаика «Команды»), последняя строка уезжала под
   кромку соседа — на телефоне это ровно те 16px, что и весь наезд. */
main > section.sect:has(+ section){ padding-bottom:calc(var(--sect-pad) + var(--tab-lift)) }
/* Разделы без .sect держат воздух своими внутренними блоками — им нижний
   отступ не задать, поэтому наезд отыгрывается распоркой. */
main > section:not(.sect):has(+ section)::after{
  content:''; display:block; height:calc(var(--tab-lift) + clamp(10px,1.2vw,18px)) }

/* Замес над стыком. Живёт на ::before верхней плиты, поэтому лежит поверх
   соседа и гаснет во все стороны сразу. */
main > section + section::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:0; right:0; top:calc(-1 * var(--tab-mix-h)); height:var(--tab-mix-h);
  background:var(--tab-mix);
}
/* Содержимое — над замесом (у секций-плит фон свой, а замес вылезает вверх). */
main > section > *{ position:relative; z-index:1 }

/* Тёмная плита — своя смесь. Светлые (.paper/.warm) и кислотная красятся
   сами, поле-плита и фильм живут по своим правилам. */
main > section:not(.paper):not(.warm):not(.acid):not(.film){ background:var(--slab-mix) }

/* Кромка вкладки. Тёмная плита на тёмной — единственный стык, где одной
   дуги мало: разница замесов есть, но глаз ловит её не сразу. Волосяная
   светлая линия ПО СКРУГЛЕНИЮ (inset, а не border) даёт кромке толщину, как
   у настоящей карточки, и исчезает на светлых плитах, где она не нужна. */
main > section + section:not(.paper):not(.warm):not(.acid):not(.film){
  box-shadow:0 -24px 52px -28px rgba(2,8,6,.78), inset 0 1px 0 rgba(255,255,255,.055);
}

/* ── пять замесов ──────────────────────────────────────────────────────
   Крутятся по порядку разделов. Доли разные намеренно: где-то мята сверху
   слева, где-то олива справа, где-то почти чистая глубина — переход не
   должен читаться повторённым приёмом. Все цвета лежат на зелёной дуге
   палитры (см. site/palette.css), поэтому смесь остаётся одним климатом. */
main > section:nth-of-type(5n+1){
  --tab-mix:radial-gradient(78% 140% at 26% 100%, rgba(20,58,46,.72), transparent 74%),
            radial-gradient(52% 110% at 82% 100%, rgba(94,138,46,.24), transparent 78%);
  --slab-mix:radial-gradient(120% 78% at 18% 0%, #16302A 0%, transparent 62%),
             radial-gradient(96% 66% at 92% 34%, rgba(94,138,46,.14), transparent 70%),
             var(--bg);
}
main > section:nth-of-type(5n+2){
  --tab-mix:radial-gradient(64% 130% at 74% 100%, rgba(29,158,117,.34), transparent 72%),
            radial-gradient(110% 120% at 18% 100%, rgba(9,40,32,.66), transparent 76%);
  --slab-mix:radial-gradient(108% 72% at 84% 0%, #143028 0%, transparent 58%),
             radial-gradient(120% 88% at 10% 62%, rgba(29,158,117,.10), transparent 74%),
             var(--bg);
}
main > section:nth-of-type(5n+3){
  --tab-mix:radial-gradient(130% 165% at 50% 100%, rgba(10,44,35,.78), transparent 70%),
            radial-gradient(40% 100% at 12% 100%, rgba(63,211,162,.20), transparent 76%);
  --slab-mix:radial-gradient(140% 92% at 50% 0%, #12261F 0%, transparent 66%),
             radial-gradient(70% 60% at 78% 88%, rgba(94,138,46,.11), transparent 72%),
             var(--bg);
}
main > section:nth-of-type(5n+4){
  --tab-mix:radial-gradient(58% 120% at 16% 100%, rgba(94,138,46,.34), transparent 74%),
            radial-gradient(84% 150% at 88% 100%, rgba(14,50,40,.62), transparent 72%);
  --slab-mix:radial-gradient(96% 70% at 8% 6%, rgba(94,138,46,.16), transparent 64%),
             radial-gradient(120% 84% at 72% 0%, #142B24 0%, transparent 60%),
             var(--bg);
}
main > section:nth-of-type(5n+5){
  --tab-mix:radial-gradient(96% 150% at 62% 100%, rgba(16,52,42,.70), transparent 72%),
            radial-gradient(46% 104% at 24% 100%, rgba(242,198,98,.12), transparent 78%);
  --slab-mix:radial-gradient(112% 76% at 62% 0%, #16332B 0%, transparent 60%),
             radial-gradient(90% 70% at 4% 40%, rgba(12,70,54,.34), transparent 72%),
             var(--bg);
}

/* ── тёмная плита ПОСЛЕ светлой: тень, а не пятно ──────────────────────
   Цветной замес хорош, когда он ложится на тёмное: там он читается сменой
   климата. На бумаге тот же замес — серо-зелёное облако поперёк листа,
   грязь. Поэтому переход «светлое → тёмное» отдан тени: короткой, почти
   бесцветной, ровно чтобы дуга плиты имела под собой опору.

   Селектор смотрит на СОСЕДА СЛЕВА: узнать цвет верхней плиты иначе нельзя,
   переменные соседа в CSS не читаются. */
main > section.paper + section::before,
main > section.warm + section::before,
main > section.acid + section::before{
  --tab-mix-h:clamp(56px,6vw,104px);
  --tab-mix:radial-gradient(120% 140% at 34% 100%, rgba(13,26,21,.13), transparent 74%),
            radial-gradient(70% 110% at 86% 100%, rgba(13,26,21,.07), transparent 78%);
}
main > section.warm + section::before{
  --tab-mix:radial-gradient(110% 140% at 62% 100%, rgba(36,28,11,.12), transparent 74%),
            radial-gradient(64% 110% at 14% 100%, rgba(36,28,11,.06), transparent 78%);
}
main > section.acid + section::before{
  --tab-mix:radial-gradient(120% 150% at 50% 100%, rgba(21,32,11,.16), transparent 72%);
}

/* ── замес по климату плиты ────────────────────────────────────────────
   Цвет над стыком принадлежит ВЕРХНЕЙ плите: это она «дышит» на соседа.
   Поэтому светлая плита кладёт на тёмное светлый ореол, песочная — тёплый,
   кислотная — лаймовый, а тёмная роняет на бумагу зелёную тень. Один общий
   замес на всех давал бы зелёное пятно поверх белого листа — грязь, а не
   переход.

   Внутри каждого климата ещё два-три варианта по чётности: два одинаковых
   перехода подряд читаются приёмом, а приём заметен — значит, мешает. */
main > section.paper::before{
  --tab-mix:radial-gradient(70% 130% at 30% 100%, rgba(239,244,241,.30), transparent 72%),
            radial-gradient(46% 96% at 84% 100%, rgba(239,244,241,.14), transparent 76%);
}
main > section.paper:nth-of-type(even)::before{
  --tab-mix:radial-gradient(88% 140% at 72% 100%, rgba(239,244,241,.26), transparent 70%),
            radial-gradient(40% 90% at 16% 100%, rgba(217,246,92,.10), transparent 74%);
}
main > section.warm::before{
  --tab-mix:radial-gradient(78% 130% at 40% 100%, rgba(243,237,221,.30), transparent 72%),
            radial-gradient(50% 100% at 88% 100%, rgba(242,198,98,.12), transparent 76%);
}
main > section.acid::before{
  --tab-mix:radial-gradient(72% 130% at 50% 100%, rgba(217,246,92,.22), transparent 72%),
            radial-gradient(44% 90% at 14% 100%, rgba(217,246,92,.10), transparent 78%);
}

/* Светлая секция-передышка. Тёмное подряд без пауз читается как одна плита. */
.paper{ background:var(--paper); color:var(--paper-ink) }
.paper .lead,.paper .kicker + h2 + .lead{ color:var(--paper-mut) }
.paper .kicker{ color:var(--acc-d) }
.paper .card{ background:#fff; border:1px solid var(--paper-line);
  /* Две тени вместо одной: волосяная у самого края даёт карточке кромку
     (белое по почти белому отличается на 1,11:1 — само по себе это не край),
     широкая и мягкая отрывает её от бумаги. */
  box-shadow:0 1px 2px rgba(13,26,21,.06), 0 22px 44px -30px rgba(13,26,21,.55) }
.paper .card p,.paper .card .card-s{ color:var(--paper-mut) }
.paper .ic{ color:var(--acc-d) }

/* Кислотная секция. Скруглённая плита с отступом от краёв — чтобы читалась
   вставкой в страницу, а не сменой сайта. */
.acid{ background:var(--punch); color:var(--punch-ink);
  margin-inline:clamp(8px,1vw,20px); border-radius:clamp(22px,2.4vw,38px) }
.acid .kicker{ color:var(--punch-mut) }
.acid .lead{ color:var(--punch-soft) }
.acid ::selection{ background:var(--punch-ink); color:var(--punch) }
/* Общая обводка фокуса — янтарная (см. palette.css). На лаймовой плите
   янтарь по лайму не читается, поэтому здесь обводим чернилами плиты. */
.acid :focus-visible{ outline-color:var(--punch-ink) }

/* Тёплая песочная секция — зеркало .paper в другом климате. */
.warm{ background:var(--sand); color:var(--sand-ink) }
.warm .lead{ color:var(--sand-mut) }
.warm .kicker{ color:var(--acc-d) }
.warm .card{ background:var(--sand-card); border:1px solid var(--sand-line);
  box-shadow:0 18px 40px -28px rgba(36,28,11,.4) }
.warm .card p,.warm .card .card-s,.warm .note{ color:var(--sand-mut) }
.warm .ic{ color:var(--acc-d) }
.warm .go{ color:var(--acc-d) }

/* Заголовок и абзац стоят РЯДОМ, а не друг под другом по центру: это и есть
   разница между «сайтом» и «колонкой текста посередине экрана». */
.head{ display:grid; gap:22px }
/* Заголовок страницы — h1, а не h2: на внутренних страницах h1 не было
   вообще, и первым уровнем шёл второй. Кегль при этом остаётся прежним,
   заголовочным для раздела: h1 в общей шкале — это 78 px главной, и он
   раздавил бы шапку внутренней страницы. Уровень поменялся, вид — нет. */
.head h1,.head h2{ max-width:15ch }
.ptop .head h1{ font-family:var(--disp); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(22px,3vw,50px); line-height:1.12 }
.head .lead{ max-width:52ch }
@media (min-width:1000px){
  .head{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(40px,6vw,110px); align-items:end }
  .head-full{ grid-template-columns:1fr }
  .head-full h2{ max-width:22ch }
}
.kicker{ margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc-lit) }
.lead{ font-size:clamp(17px,1.32vw,22px); line-height:1.5; color:var(--muted) }

/* появление секции: подъём и проявление, один раз. Скрытое состояние живёт
   под .js: если скрипт не загрузился, страница стоит целиком, а не пустой. */
.js .rv{ opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .4s var(--e-reveal), transform .4s var(--e-reveal) }
.in > .rv,.in .rv{ opacity:1; transform:none }

.glass{
  background:var(--glass);
  /* СОБСТВЕННАЯ ПОДЛОЖКА СТЕКЛА — не украшение, а лечение.
     Стекло было прозрачным насквозь, и пятна авроры красили карточки в разное:
     на одном экране «Ресторану» выходило лиловым, а «Поставщику» рядом —
     красным, хотя это одна и та же карточка. Пока фон был одноцветно-зелёным,
     подмена не читалась; на цветной палитре она бросается в глаза первой.
     Полупрозрачная подложка от фона страницы гасит цвет пятна, но оставляет
     размытие работать — стекло остаётся стеклом, а карточки снова одинаковые. */
  background-color:var(--glass-base);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:var(--hair); box-shadow:var(--shadow), var(--bevel);
  border-radius:var(--r); position:relative;
}
.card{ padding:clamp(20px,1.7vw,28px); border-radius:var(--r) }

/* ─────────────────────────── шапка ─────────────────────────── */

.hdr{ position:fixed; z-index:60; left:0; right:0; top:0; padding:12px var(--pad);
  transition:transform .32s var(--e-reveal) }
.hdr.hide{ transform:translate3d(0,-140%,0) }
.hdr-in{ max-width:var(--maxw); margin:0 auto; padding:8px 10px 8px 16px;
  display:flex; align-items:center; gap:clamp(12px,2vw,28px); border-radius:18px;
  background:var(--glass); border:var(--hair);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow), var(--bevel) }

.brand{ display:flex; align-items:center; gap:10px; flex:none }
.brand-mark{ width:52px; height:auto; display:block }
.brand-name{ font-weight:800; letter-spacing:.16em; font-size:15px }

.hdr-nav{ display:flex; gap:clamp(14px,1.6vw,26px); margin-left:auto;
  font-size:14.5px; font-weight:600; color:var(--muted) }
.hdr-nav a{ position:relative; padding:6px 0;
  transition:color .16s var(--e-micro) }
.hdr-nav a:hover{ color:var(--ink) }
/* Текущий раздел подчёркнут, а не подсвечен цветом: цвет уже занят действием. */
.hdr-nav a[aria-current="page"]{ color:var(--ink) }
.hdr-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--acc-lit) }

.lang{ display:flex; gap:2px; padding:3px; border-radius:12px;
  background:rgba(255,255,255,.06); flex:none }
.lang-b{ appearance:none; border:0; background:transparent; color:var(--muted);
  font:700 12px/1 Manrope, sans-serif; letter-spacing:.06em; padding:8px 9px;
  border-radius:9px; cursor:pointer;
  transition:color .16s var(--e-micro), background-color .16s var(--e-micro) }
.lang-b:hover{ color:var(--ink) }
.lang-b[aria-pressed="true"]{ background:rgba(255,255,255,.14); color:var(--ink) }

/* Дверь к пробному периоду. Единственная кнопка в шапке — поэтому ей можно
   быть яркой: она не соревнуется ни с чем. */
.cta{ flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:13px;
  background:var(--cta); color:var(--cta-ink);
  font-weight:800; font-size:13.5px; letter-spacing:.01em;
  box-shadow:0 10px 24px -12px var(--cta-glow);
  transition:transform .16s var(--e-micro), filter .16s var(--e-micro) }
.cta:hover{ transform:translate3d(0,-1px,0); filter:brightness(1.06) }
.cta .ic{ width:15px; height:15px; stroke-width:2.4 }
.cta:active{ transform:translate3d(0,0,0) }

/* ─────────────────────────── ссылки-действия ───────────────────────────
   Кнопок-«призывов» на сайте нет: разделы открывает шапка, а не дублирующая
   её кнопка в тексте. Осталась одна форма — строчная ссылка со стрелкой. */

.go{ display:inline-flex; align-items:center; gap:9px; font-weight:700;
  font-size:clamp(15px,1.1vw,17px); color:var(--acc-lit); padding:4px 0;
  border-bottom:1px solid transparent;
  transition:border-color .16s var(--e-micro), gap .16s var(--e-micro) }
.go .ic{ width:18px; height:18px; stroke-width:2 }
.go:hover{ gap:13px; border-bottom-color:currentColor }
.paper .go{ color:var(--acc-d) }

/* две двери рядом: главная — лаймовая, запасная — обычная */
.go-row{ display:flex; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap; align-items:center }
.go-demo{ color:var(--cta) }

/* ─────────────────────────── разбивка текст / визуал ─────────────────────────── */

.split{ display:grid; gap:clamp(28px,4vw,64px); align-items:center }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .split-5-7{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
  .split-7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
  .split-flip > *:first-child{ order:2 }
}

/* ─────────────────────────── плитки разделов ─────────────────────────── */

.tiles{ display:grid; gap:var(--gap); margin-top:clamp(34px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.tile{ display:flex; flex-direction:column; gap:11px; min-height:180px;
  transition:transform .18s var(--e-micro) }
.tile:hover{ transform:translate3d(0,-3px,0) }
.tile .ic{ width:24px; height:24px; color:var(--acc-lit); margin-bottom:6px }
.tile h3{ font-size:clamp(17px,1.2vw,20px) }
.tile p{ color:var(--muted); font-size:14.5px; line-height:1.45 }
.tile-go{ margin-top:auto; padding-top:12px; color:var(--acc-lit); font-weight:700;
  font-size:13.5px; display:flex; align-items:center; gap:7px }
.tile-go .ic{ width:15px; height:15px; margin:0; stroke-width:2.2 }

/* ─────────────────────────── крупные блоки модулей ─────────────────────────── */

.mrow{ padding-block:clamp(46px,5.4vw,92px); border-top:var(--hair) }
.mrow:first-of-type{ border-top:0 }
.paper .mrow{ border-top-color:var(--paper-line) }

.mrow-in{ display:grid; gap:clamp(24px,3vw,56px) }
@media (min-width:940px){
  .mrow-in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start }
}
.mrow-n{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.mrow-n .ic{ width:26px; height:26px; color:var(--acc-lit) }
.mrow-n b{ font:600 13px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing:.16em;
  color:var(--dim) }
.paper .mrow-n .ic{ color:var(--acc-d) }
.paper .mrow-n b{ color:var(--paper-mut) }
.mrow h3{ font-size:clamp(24px,2.5vw,40px); font-weight:800; letter-spacing:-.028em;
  max-width:16ch }
.mrow-lead{ margin-top:16px; font-size:clamp(16px,1.15vw,19px); color:var(--muted);
  max-width:46ch; line-height:1.5 }
.paper .mrow-lead{ color:var(--paper-mut) }

.mlist{ display:grid; gap:12px; align-content:start }
/* Список галочек, идущий сразу за абзацем-лидом, иначе прилипает к нему
   вплотную: галочка встаёт под последней строкой абзаца, и модуль читается
   одним слипшимся куском. */
.mrow-lead + .mlist{ margin-top:18px }
@media (min-width:640px){ .mlist{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.mlist li{ display:flex; gap:11px; font-size:14.5px; line-height:1.45; color:var(--muted) }
.mlist .ic{ width:17px; height:17px; margin-top:2px; stroke-width:2.2; color:var(--acc) }
.paper .mlist li{ color:var(--paper-mut) }

/* ─────────────────────────── список-галочки ─────────────────────────── */

.checks{ display:grid; gap:13px; margin-top:26px }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:clamp(15px,1.1vw,17px);
  color:var(--muted); line-height:1.45 }
.checks .ic{ width:18px; height:18px; margin-top:2px; stroke-width:2.2; color:var(--acc-lit) }
.paper .checks li{ color:var(--paper-mut) }
.paper .checks .ic{ color:var(--acc-d) }

/* ─────────────────────────── цифры ─────────────────────────── */

.stats{ display:grid; gap:var(--gap); margin-top:clamp(30px,3.4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) }
.stat{ padding:clamp(20px,1.8vw,30px) }
.stat-v{ display:block; font-size:clamp(34px,3.6vw,58px); line-height:1;
  background:linear-gradient(160deg,var(--ink),var(--acc-lit)); -webkit-background-clip:text;
  background-clip:text; color:transparent }
.paper .stat-v{ background:linear-gradient(160deg,var(--paper-ink),var(--acc-d)); -webkit-background-clip:text; background-clip:text }
.stat-l{ display:block; margin-top:12px; color:var(--muted); font-size:14px; line-height:1.4 }
.paper .stat-l{ color:var(--paper-mut) }

/* Цифры на ударной плите — по чертежу больших витринных чисел: не карточки,
   а строки над тёмной линейкой. Стеклу на плите делать нечего.

   КЕГЛЬ ЗДЕСЬ — НЕ ВКУСОВЩИНА. Плита идёт во всю ширину экрана, и скромные
   числа на ней читаются как «секция не доделана»: краски много, работы мало.
   Число обязано занять свою полосу целиком — тогда площадь отработана и удар
   случается. Это первое, что бросилось в глаза на снимке готовой страницы. */
/* Пять чисел — ЯВНАЯ сетка, а не auto-fit. auto-fit подбирал колонку по
   minmax(210px,1fr) и на обычном ноутбуке раскладывал 4 + 1: пятое число
   стояло одно, а справа от него оставался прямоугольник голого лайма
   примерно 870×250 — «плита есть, работы нет».

   КОЛОНКИ РАЗНОЙ ШИРИНЫ, А НЕ ПЯТЬ РАВНЫХ. «10–30 %» в равную пятую долю
   (~215 px) не влезает ни при каком приличном кегле. Раскладка 3 + 2 полосу
   даёт, но во втором ряду остаются два коротких числа («1» и «0») в полосах
   по 590 px — ровно та пустота, ради которой сетку и делали явной. Поэтому
   ряд остаётся один, а ширина полос считается по длине числа: длинному —
   полторы доли, «+40 %» — с небольшим запасом, однознакам — по доле. */
.acid .stats{ grid-template-columns:minmax(0,1.85fr) minmax(0,1.15fr)
    minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px); margin-top:clamp(30px,3.4vw,52px);
  /* Кегль числа считается от ШИРИНЫ ПЛИТЫ, а не окна (см. ниже) — плите
     нужно быть контейнером запроса. */
  container-type:inline-size }
@media (max-width:1180px){
  /* Ниже 1180 пять полос становятся уже длинного числа — переходим на 3 + 2. */
  .acid .stats{ grid-template-columns:repeat(6,minmax(0,1fr)) }
  .acid .stat{ grid-column:span 2 }
  .acid .stat:nth-child(4),.acid .stat:nth-child(5){ grid-column:span 3 }
}
@media (max-width:820px){
  /* Два числа в ряд, а самому длинному — своя строка целиком: в половине
     узкого экрана «10–30 %» пришлось бы ужать до кегля подписи. */
  .acid .stats{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .acid .stat,
  .acid .stat:nth-child(4),.acid .stat:nth-child(5){ grid-column:span 2 }
  .acid .stat:nth-child(1){ grid-column:span 4 }
}
/* Своя высота у плиты. Общий воздух секции (до 150px сверху и снизу) на
   сплошном лайме читается не как воздух, а как незаполненное место: у
   цветной плиты поля должны быть теснее, чем у страницы. */
.acid{ --sect-pad:clamp(48px,5.4vw,88px) }
.acid .stat{ background:none; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; padding:16px 0 0;
  border-top:2px solid var(--punch-rule) }
/* Кегль опущен со 148 до 104: числа перестали быть однознаками. «10–30 %»
   на прежнем размере не влезало в свою колонку — диапазон переносился на
   вторую строку и наезжал на подпись. Правило «число занимает полосу
   целиком» осталось: полосу теперь занимает число вместе с единицей.
   nowrap — чтобы диапазон никогда не разрывался переносом. */
.acid .stat-v{ font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(46px,4.8vw,78px); line-height:.92; white-space:nowrap;
  background:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--punch-ink) }
/* Кегль от ширины ПЛИТЫ, а не окна. От окна он считался неверно там, где
   колонка перестаёт расти вместе с экраном: на мониторе 1920 --maxw упирается
   в 1680, полоса замирает, а 4.8vw продолжает расти — «10–30 %» вылезало на
   соседнее число. 5.7cqw — это доля самой плиты, и запас у длинного числа
   остаётся одинаковым на любой ширине: 5,6 % плиты — это кегль, при котором
   «10–30 %» занимает свою полосу почти целиком и не касается соседней.
   Строка выше во vw — запасная, для
   движков без запросов к контейнеру. */
.acid .stat-v{ font-size:clamp(46px,5.6cqw,88px) }
.acid .stat-l{ color:var(--punch-soft); font-weight:600; margin-top:10px }

/* Единица при числе («%»). Отдельной строкой она читалась бы вторым числом,
   поэтому идёт вплотную к первому и кеглем вдвое меньше. */
.stat-u{ font-style:normal; font-size:.4em; letter-spacing:0; margin-left:.1em }

/* Сноска под числами. Процент без открытого расчёта читается как реклама,
   процент с расчётом — как аргумент; поэтому сноска тут обязательная часть
   плиты, а не примечание, которое можно опустить. */
.stats-note{ margin-top:clamp(22px,2.4vw,34px); max-width:72ch;
  font-size:13px; line-height:1.55; color:var(--muted) }
.acid .stats-note{ color:var(--punch-soft); font-weight:600; opacity:.86 }

/* ─────────────────────────── шаги ─────────────────────────── */

.steps{ display:grid; gap:var(--gap); margin-top:clamp(34px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.step{ padding:clamp(24px,2vw,34px) }
.step-n{ display:block; font-size:clamp(28px,2.6vw,40px); color:var(--acc-lit); margin-bottom:16px;
  font-family:var(--disp); font-weight:800; letter-spacing:0 }
.paper .step-n{ color:var(--acc-d) }
.step h3{ margin-bottom:10px }
.step p{ color:var(--muted); font-size:15px; line-height:1.5 }

/* ─────────────────────────── вопросы ─────────────────────────── */

.faq{ display:grid; gap:10px; margin-top:clamp(34px,4vw,56px); max-width:900px }
/* На мониторе восемь вопросов одной колонкой в 900 px оставляли правую
   треть пустой — та самая пустота «всё в середине». Две колонки: каждая
   раскрывается сама по себе, соседка остаётся прижатой к верху ряда. */
@media (min-width:1000px){
  .faq{ max-width:none; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
}
.faq-i{ padding:0; overflow:hidden }
.faq-i summary{ list-style:none; cursor:pointer; padding:20px 58px 20px 24px;
  font-weight:700; font-size:clamp(16px,1.2vw,19px); letter-spacing:-.015em; position:relative }
.faq-i summary::-webkit-details-marker{ display:none }
/* Знак «плюс» справа — тот же живой знак, что везде на сайте: при раскрытии
   перетекает в минус (icons.js), при закрытии — обратно. Раньше это делали
   два псевдоэлемента поворотом черты. */
.ic-faq{ position:absolute; right:22px; top:50%; translate:0 -50%;
  width:18px; height:18px; stroke-width:2.1; color:var(--dim);
  transition:color .2s var(--e-micro) }
.faq-i[open] .ic-faq{ color:var(--acc-lit) }
.faq-i p{ padding:0 24px 24px; color:var(--muted); font-size:15.5px; line-height:1.55; max-width:70ch }
.paper .faq-i p{ color:var(--paper-mut) }
.paper .faq-i .ic-faq{ color:var(--paper-mut) }
.paper .faq-i[open] .ic-faq{ color:var(--acc-d) }

/* ─────────────────────────── подвал ─────────────────────────── */

.ftr{ border-top:0; padding:calc(clamp(44px,5vw,76px) + var(--tab-lift)) 0 30px;
  position:relative; margin-top:calc(-1 * var(--tab-lift));
  border-start-start-radius:var(--tab-r); border-start-end-radius:var(--tab-r);
  box-shadow:0 -24px 52px -28px rgba(2,8,6,.78);
  background:radial-gradient(120% 84% at 76% 0%, #16302A 0%, transparent 62%),
    radial-gradient(90% 70% at 6% 30%, rgba(29,158,117,.10), transparent 72%), var(--bg);
  /* Прежняя полупрозрачная заливка rgba(0,0,0,.16) стояла ПОСЛЕ этой строки и
     отменяла её: подвал оставался стеклом над фоном страницы, а стеклу
     нечем показать скругление — вместо дуги вставала линия. */
  overflow:hidden }

/* Гигантская фраза над колонками — фирменная подпись сайта. Одним цветом и
   без движения: величина и есть приём. */
.ftr-giant{ margin:0 0 clamp(36px,5vw,84px);
  font-family:var(--disp); font-weight:800; letter-spacing:0; line-height:1;
  font-size:clamp(28px,7vw,124px); color:var(--punch);
  white-space:nowrap }

.ftr-in{ display:grid; gap:32px }
@media (min-width:840px){ .ftr-in{ grid-template-columns:1.3fr .7fr .8fr 1.35fr; align-items:start } }
/* Контакты в подвале: знак — и сразу значения. Подписи над строками
   («ТЕЛЕФОН / ФАКС», «ЭЛ. ПОЧТА», «АДРЕС») убраны: колонка уже несёт заголовок
   «СВЯЗЬ», и ещё три капслочные строки поверх знаков превращали живые контакты
   в бланк. Знак слева говорит то же самое молча; слово осталось в .vh — для
   читалки экрана. Правило .ftr-ctl удалено вместе с ними.

   Знак поднят к ПЕРВОЙ строке значения: 16 px значка против строки 14,5/1.45
   (≈21 px) — оптический центр даёт margin-top:2px. */
.ftr-ct{ display:grid; gap:14px; margin-top:6px }
.ftr-ct li{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:10px; align-items:start }
.ftr-ct .ic{ width:16px; height:16px; stroke-width:1.9; color:var(--dim); margin-top:2px }
/* 2 px между двумя телефонами читались как перенос одной строки, а не как два
   номера. 5 px — пара внутри группы, 14 px — расстояние между группами. */
.ftr-ct div{ display:grid; gap:5px; justify-items:start }
.ftr-ct a{ font-size:14px; line-height:1.45 }
.ftr-ct a.num{ font-size:14.5px; letter-spacing:0 }
.ftr-ctv{ color:var(--muted); font-size:14px; line-height:1.45 }
.ftr-brand p{ margin-top:14px; color:var(--muted); font-size:14.5px; max-width:34ch }
.ftr-h{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-bottom:14px }
.ftr-col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.ftr-col a{ color:var(--muted); font-weight:600; font-size:14.5px;
  transition:color .16s var(--e-micro) }
.ftr-col a:hover{ color:var(--ink) }
.ftr-col a.is-glow{ color:var(--acc-lit) }
.ftr-col a.is-glow:hover{ color:var(--cta) }

/* строка со знаком: канал, инстаграм, личный телеграм */
.ftr-soc{ display:inline-flex; align-items:center; gap:9px }
.ftr-soc .ic{ width:16px; height:16px; stroke-width:1.9; color:var(--dim);
  transition:color .16s var(--e-micro) }
.ftr-soc:hover .ic{ color:var(--acc-lit) }
.ftr-soc small{ font-size:12px; font-weight:600; color:var(--dim) }

.ftr-cr{ margin-top:clamp(34px,4vw,56px); text-align:center; color:var(--dim); font-size:12.5px }
/* Правовые ссылки живут ВНУТРИ строки копирайта, а не отдельной колонкой: они
   обязаны быть на каждой странице (требование магазинов), но выкрикивать их
   незачем. Строчные элементы в центрированном абзаце переносятся сами —
   раскладку под них менять не нужно. */
.ftr-cr a{ margin-left:18px; color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(167,188,180,.32) }
.ftr-cr a:hover{ color:var(--ink); text-decoration-color:var(--acc-lit) }

/* ─────────────── первая секция внутренних страниц ───────────────
   Шапка висит поверх, поэтому первому экрану нужен запас сверху. */
.ptop{ padding-top:clamp(122px,15vh,196px); padding-bottom:clamp(28px,3vw,52px) }
/* Шапка страницы и первый блок — это один разворот, а не две секции:
   без этого их отступы складывались и между ними зияла пустая полоса. */
.ptop + .sect-sm{ padding-top:var(--tab-lift) }

/* ─────────────── пять программ ───────────────
   Наклон СТАТИЧНЫЙ. Раньше карточки дрожали в бесконечном цикле — это
   читалось как «страница дёргается», а не как «программы не сходятся». */
.five{ display:grid; gap:var(--gap); margin-top:clamp(34px,4vw,58px);
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr)) }
.five-i{ display:flex; flex-direction:column; gap:6px; min-height:124px;
  justify-content:flex-end; rotate:var(--tilt,0deg);
  transition:rotate .2s var(--e-micro) }
.five-i:hover{ rotate:0deg }
.f1{ --tilt:-1.2deg } .f2{ --tilt:.8deg } .f3{ --tilt:-.55deg }
.f4{ --tilt:1.3deg }  .f5{ --tilt:-.9deg }
.five-t{ font-weight:800; font-size:clamp(16px,1.2vw,19px); letter-spacing:-.02em }
.card-s{ font-size:13px; color:var(--muted) }

/* ─────────────── цепочка «что за чем» ─────────────── */
.chain{ display:grid; gap:12px }
.chain-i{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px;
  align-items:center; padding:18px 22px }
.chain-n{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  font-size:15px; background:rgba(29,158,117,.18);
  border:1px solid rgba(29,158,117,.34); color:var(--acc-lit) }
.chain-i.is-last .chain-n{ background:var(--gold-soft);
  border-color:var(--gold-edge); color:var(--gold) }
.chain-i p{ color:var(--muted); font-size:15.5px; line-height:1.45 }
.chain-i h4{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.02em }
.chain-3{ grid-template-columns:repeat(auto-fit,minmax(196px,1fr)) }
.chain-3 .chain-i{ grid-template-columns:minmax(0,1fr); gap:11px;
  align-items:start; padding:22px }

/* ─────────────── две стороны ─────────────── */
.sides{ display:grid; gap:var(--gap) }
@media (min-width:820px){ .sides{ grid-template-columns:1fr 1fr } }
.side{ display:flex; flex-direction:column; gap:15px;
  padding:clamp(28px,2.6vw,46px); transition:transform .18s var(--e-micro) }
.side:hover{ transform:translate3d(0,-3px,0) }
.side-ic{ display:grid; place-items:center; width:54px; height:54px; border-radius:17px;
  background:rgba(29,158,117,.16); border:1px solid rgba(29,158,117,.3) }
.side-ic .ic{ width:25px; height:25px; color:var(--acc-lit) }
.side h3{ font-size:clamp(22px,2vw,31px); font-weight:800 }
.side p{ color:var(--muted); font-size:15.5px; line-height:1.5; max-width:38ch }
.side .go{ margin-top:auto; padding-top:10px }

/* ─────────────── хвост страницы ─────────────── */
.tail{ padding:clamp(30px,3.6vw,60px); display:grid; gap:16px; justify-items:start;
  border-radius:28px }
.tail h2{ font-size:clamp(24px,2.7vw,44px); max-width:18ch }
.tail .lead{ max-width:56ch }
.tail .go{ margin-top:6px }

.note{ margin-top:24px; color:var(--dim); font-size:13.5px; max-width:66ch; line-height:1.5 }
.paper .note{ color:var(--paper-mut) }

/* ─────────────── схема «одна камера» ───────────────
   Связи — один статичный контур. По проводам ничего не бежит: схема
   объясняет устройство, а не привлекает внимание к себе. */
.flow{ margin-top:8px; display:grid; gap:0; align-items:center }
.flow-src{ display:inline-flex; align-items:center; gap:10px; padding:13px 20px;
  border-radius:15px; font-weight:700; font-size:14.5px; justify-self:start;
  margin-left:20px }
.flow-src .ic{ color:var(--acc-lit) }
.flow-wires{ display:none }
.flow-tree{ position:relative; display:grid; gap:12px; padding-left:44px; margin-top:18px }
.flow-tree::before{ content:""; position:absolute; left:20px; top:-18px; bottom:50%;
  width:2px; background:linear-gradient(180deg, rgba(29,158,117,.55), rgba(217,246,92,.35)) }
.flow-card{ position:relative; padding:17px 21px }
.flow-card::before{ content:""; position:absolute; left:-24px; top:50%; width:24px; height:2px;
  background:linear-gradient(90deg, rgba(29,158,117,.55), rgba(217,246,92,.35)) }
.flow-card h4{ margin:0 0 5px; font-size:17px; font-weight:700; letter-spacing:-.02em }
.flow-card p{ color:var(--muted); font-size:14.5px; line-height:1.45 }
@media (min-width:900px){
  .flow{ grid-template-columns:auto 120px minmax(0,1fr); align-items:stretch }
  .flow-src{ align-self:center; margin-left:0 }
  .flow-wires{ display:block; width:120px; height:auto; align-self:stretch }
  .flow-tree{ padding-left:0; margin-top:0 }
  .flow-tree::before,.flow-card::before{ display:none }
}

/* ─────────────── приватность: что уходит наружу ─────────────── */
.privbox{ display:flex; flex-direction:column; align-items:center }
.privbox-in{ width:100%; max-width:380px; padding:20px }
.privbox-lab{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-mut); margin-bottom:13px }
.privbox-frame{ position:relative; height:132px; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, rgba(29,158,117,.14), rgba(13,26,21,.05));
  border:1px dashed var(--paper-line) }
.pf{ position:absolute; border-radius:6px; border:1.7px solid rgba(21,128,96,.75) }
.pf-a{ left:15%; top:22%; width:46px; height:60px }
.pf-b{ left:47%; top:34%; width:40px; height:52px }
.pf-c{ left:73%; top:26%; width:36px; height:46px; border-color:var(--gold) }
.privbox-tag{ position:absolute; left:12px; bottom:10px; font-size:11px; color:var(--paper-mut) }
.privbox-wire{ width:2px; height:54px;
  background:linear-gradient(180deg, rgba(29,158,117,.6), rgba(217,246,92,.35)) }
.privbox-nums{ display:flex; gap:10px }
.privbox-nums .num{ flex:1; text-align:center; padding:14px 6px; border-radius:12px;
  font-size:20px; background:rgba(13,26,21,.05); border:1px solid var(--paper-line) }

/* ─────────────── паспорт поставщика ─────────────── */
/* Шесть карточек — три в ряд, а не сколько влезет: auto-fit на мониторе
   давал четыре колонки, то есть ряд 4 + 2 с пустотой справа от последних
   двух. Три и три — ровно, на любой ширине от планшета. */
.passgrid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:560px){ .passgrid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.passgrid .card{ padding:20px 18px }
.pass-n{ display:block; font-size:clamp(21px,1.9vw,30px); line-height:1;
  font-family:var(--disp); font-weight:700; letter-spacing:0 }
.warm .pass-n{ color:var(--sand-ink) }
.pass-l{ display:block; margin-top:9px; font-size:13px; color:var(--paper-mut); line-height:1.35 }
.warm .pass-l{ color:var(--sand-mut) }

/* ═══════════════════════════════════════════════════════════════
   ТАРИФЫ
   ═══════════════════════════════════════════════════════════════ */

/* Пять тарифов не делятся на сетку ровно ни на каком экране, поэтому
   раскладок три: узкий — карточка столбиком, средний — строка (картинка
   слева, текст справа), широкий — пять колонок. Иначе на среднем экране
   получались пять сплющенных колонок по 210 px, где не читается ни цена,
   ни картинка. */
.plans{ display:grid; gap:var(--gap); margin-top:clamp(30px,3.4vw,52px);
  grid-template-columns:minmax(0,1fr) }

.plan{ display:grid; grid-template-rows:auto 1fr; padding:0; overflow:hidden }

@media (min-width:700px) and (max-width:1399px){
  .plan{ grid-template-columns:minmax(0,270px) minmax(0,1fr); grid-template-rows:auto;
    align-items:center }
  .plan .pviz{ border-bottom:0; border-right:var(--hair); height:100% }
  .plan > .plan-body{ padding-block:clamp(22px,2vw,30px) }
  .plan-d{ padding-bottom:0 }
}
/* Начиная с планшета строка распадается на четыре колонки — картинка, имя,
   цена, описание. Иначе справа оставалось полэкрана пустоты, а именно она и
   читается как «всё сдвинуто в середину». display:contents отдаёт детей
   .plan-body прямо в сетку карточки, без лишней обёртки. */
@media (min-width:960px) and (max-width:1399px){
  .plan{ grid-template-columns:minmax(0,270px) minmax(0,170px) minmax(0,210px) minmax(0,1fr) }
  .plan > .plan-body{ display:contents }
  .plan-n{ margin-top:0 }
  .plan-p{ margin:0 }
  .plan-d{ margin-top:0; padding-bottom:0 }
}
@media (min-width:1400px){
  .plans{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
.plan-hi{ border-color:rgba(29,158,117,.42);
  background:linear-gradient(160deg, rgba(29,158,117,.22), rgba(255,255,255,.05)) }
.plan-badge{ position:absolute; z-index:2; top:14px; right:14px; padding:5px 11px;
  border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em;
  background:var(--acc); color:var(--ink-on-acc) }
.plan-body{ display:flex; flex-direction:column; min-width:0 }
.plan-n{ margin-top:22px; font-size:13.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); font-weight:700 }
.plan-p{ margin:10px 0 12px; font-size:clamp(19px,1.7vw,25px) }
.plan-p .num{ font-size:inherit; font-family:var(--disp); font-weight:700; letter-spacing:0 }
.plan-p-txt{ font-family:"Space Grotesk", Manrope, sans-serif; font-weight:600 }
.plan-d{ color:var(--muted); font-size:14.5px; line-height:1.45; margin-top:auto;
  padding-bottom:26px }
.plan-n,.plan-p,.plan-d{ padding-inline:clamp(20px,1.7vw,26px) }
.pviz{ display:grid; place-items:center }

/* Картинка тарифа. Играет ОДИН раз, когда карточка доехала до экрана, и
   замирает в конечном виде: бесконечный цикл на пяти карточках сразу —
   это ровно то, что владелец назвал дешёвым. */
.pviz{ border-bottom:var(--hair); background:rgba(0,0,0,.18); color:rgba(234,243,239,.42) }
.pviz svg{ width:100%; height:auto; display:block }
.pviz .v-box,.pviz .v-room,.pviz .v-ic,.pviz .v-line,.pviz .v-head,
.pviz .v-axis,.pviz .v-dash,.pviz .v-ok circle,.pviz .v-ok path,
.pviz .v-pill rect,.pviz .v-pill path,.pviz .v-link,.pviz .v-hub,.pviz .v-hub-i,
.pviz .v-pin circle,.pviz .v-pin path,.pviz .v-qr rect,.pviz .v-qr path,
.pviz .v-cone{ fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.pviz .v-num{ fill:var(--acc-lit); font:600 26px/1 "Space Grotesk", Manrope, sans-serif }

/* 01 — заказ уходит поставщику */
[data-viz="buy"] .v-line{ stroke-dasharray:96; stroke-dashoffset:96;
  transition:stroke-dashoffset .66s var(--e-reveal) .12s }
[data-viz="buy"] .v-head,[data-viz="buy"] .v-ok{ opacity:0 }
[data-viz="buy"] .v-head{ transition:opacity .28s .72s }
[data-viz="buy"] .v-ok{ color:var(--acc-lit); transform-box:fill-box; transform-origin:center;
  transform:scale(.5); transition:opacity .3s .86s, transform .42s var(--e-reveal) .86s }
.is-on[data-viz="buy"] .v-line{ stroke-dashoffset:0 }
.is-on[data-viz="buy"] .v-head,.is-on[data-viz="buy"] .v-ok{ opacity:1 }
.is-on[data-viz="buy"] .v-ok{ transform:scale(1) }

/* 02 — остаток падает, автозаказ собирается сам */
[data-viz="stock"] .v-bar{ fill:rgba(63,211,162,.34); stroke:none;
  transform-box:fill-box; transform-origin:bottom; transform:scaleY(0);
  transition:transform .5s var(--e-reveal) }
[data-viz="stock"] .v-bar.is-low{ fill:rgba(242,198,98,.72) }
[data-viz="stock"] .b1{ transition-delay:.06s } [data-viz="stock"] .b2{ transition-delay:.16s }
[data-viz="stock"] .b3{ transition-delay:.26s } [data-viz="stock"] .b4{ transition-delay:.36s }
[data-viz="stock"] .v-pill{ opacity:0; color:var(--acc-lit);
  transform-box:fill-box; transform-origin:center; transform:translateX(12px);
  transition:opacity .34s .74s, transform .44s var(--e-reveal) .74s }
.is-on[data-viz="stock"] .v-bar{ transform:scaleY(1) }
.is-on[data-viz="stock"] .v-pill{ opacity:1; transform:none }

/* 03 — камера считает зал */
[data-viz="hall"] .v-cone{ fill:rgba(63,211,162,.10); opacity:0; transition:opacity .4s .1s }
[data-viz="hall"] .v-p{ fill:rgba(63,211,162,.8); stroke:none; opacity:0;
  transform-box:fill-box; transform-origin:center; transform:scale(.3);
  transition:opacity .3s var(--e-reveal), transform .38s var(--e-reveal) }
[data-viz="hall"] .p1{ transition-delay:.30s } [data-viz="hall"] .p2{ transition-delay:.44s }
[data-viz="hall"] .p3{ transition-delay:.58s } [data-viz="hall"] .p4{ transition-delay:.72s }
.is-on[data-viz="hall"] .v-cone{ opacity:1 }
.is-on[data-viz="hall"] .v-p{ opacity:1; transform:scale(1) }

/* 04 — столы занимаются, гость сканирует QR */
[data-viz="book"] .v-t{ fill:rgba(234,243,239,.05); stroke:currentColor; stroke-width:1.6;
  transition:fill .4s var(--e-micro), stroke .4s var(--e-micro) }
[data-viz="book"] .t1{ transition-delay:.10s } [data-viz="book"] .t2{ transition-delay:.22s }
[data-viz="book"] .t3{ transition-delay:.34s } [data-viz="book"] .t5{ transition-delay:.46s }
[data-viz="book"] .v-qr{ opacity:0; color:var(--acc-lit);
  transform-box:fill-box; transform-origin:center; transform:scale(.86);
  transition:opacity .36s .62s, transform .46s var(--e-reveal) .62s }
.is-on[data-viz="book"] .t1,.is-on[data-viz="book"] .t2,
.is-on[data-viz="book"] .t3,.is-on[data-viz="book"] .t5{
  fill:rgba(63,211,162,.30); stroke:rgba(63,211,162,.9) }
.is-on[data-viz="book"] .v-qr{ opacity:1; transform:none }

/* 05 — несколько точек одной сети */
[data-viz="net"] .v-link{ stroke-dasharray:120; stroke-dashoffset:120;
  transition:stroke-dashoffset .6s var(--e-reveal) }
[data-viz="net"] .l1{ transition-delay:.14s } [data-viz="net"] .l2{ transition-delay:.26s }
[data-viz="net"] .l3{ transition-delay:.38s }
[data-viz="net"] .v-hub,[data-viz="net"] .v-hub-i{ color:var(--acc-lit) }
[data-viz="net"] .v-pin{ opacity:0; transform-box:fill-box; transform-origin:center;
  transform:scale(.5); transition:opacity .3s var(--e-reveal), transform .4s var(--e-reveal) }
[data-viz="net"] .n1{ transition-delay:.52s } [data-viz="net"] .n2{ transition-delay:.62s }
[data-viz="net"] .n3{ transition-delay:.72s }
.is-on[data-viz="net"] .v-link{ stroke-dashoffset:0 }
.is-on[data-viz="net"] .v-pin{ opacity:1; transform:scale(1) }

/* ─────────────── таблица тарифов ─────────────── */
.matrix{ margin-top:clamp(28px,3vw,44px); border-radius:var(--r);
  border:1px solid var(--paper-line); overflow-x:auto;
  /* Тени по краям гаснут, когда тянуть больше некуда: белые пятна едут
     вместе с содержимым (local), тени стоят на месте (scroll) и оказываются
     закрыты, пока таблица у своего края. Это единственная подсказка «тяните
     вбок», которая не врёт: её нет, когда тянуть нечего. */
  background:
    linear-gradient(to right, #fff 34%, rgba(255,255,255,0)) left / 44px 100% no-repeat local,
    linear-gradient(to left,  #fff 34%, rgba(255,255,255,0)) right / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(13,26,21,.17), transparent) left / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13,26,21,.17), transparent) right / 15px 100% no-repeat scroll,
    #fff }

/* Название строки не уезжает вместе с колонками: иначе, дотянув до
   «Business», уже не понять, о какой возможности речь. */
.mx tbody th, .mx thead th:first-child{
  position:sticky; left:0; z-index:2; background:#fff;
  box-shadow:1px 0 0 var(--paper-line) }
.mx tbody tr:hover > th{ background:#fff }
.mx{ width:100%; min-width:760px; border-collapse:collapse; font-size:14px }
.mx th,.mx td{ padding:15px 14px; text-align:center;
  border-bottom:1px solid var(--paper-line) }
.mx thead th{ font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--paper-mut); white-space:nowrap }
.mx thead th:first-child{ text-align:left }
.mx tbody th{ text-align:left; font-weight:600; color:var(--paper-ink); min-width:250px }
.mx tbody tr:last-child > *{ border-bottom:0 }
.mx tbody tr:hover > *{ background:rgba(13,26,21,.03) }
.mx .ic{ display:inline-block; width:18px; height:18px }
.mx td.y .ic{ color:var(--acc-d); stroke-width:2.3 }
.mx td.n .ic{ color:rgba(85,107,99,.4) }
.mx .num{ font-size:14.5px }

/* ─────────────────────────── телефон ─────────────────────────── */

@media (max-width:860px){
  .hdr{ padding:10px 12px }
  /* Без flex-wrap порядок order:3 у меню ничего не даёт: строка не переносится,
     и разделы уезжают за правый край экрана. */
  .hdr-in{ padding:8px 10px; flex-wrap:wrap; gap:8px }
  .brand-name{ display:none }
  /* Шапка в два ряда выше на ряд, а первый экран об этом не знал: заголовок
     страницы вставал в десяти пикселях под её кромкой. Добавляем ровно
     высоту второго ряда. */
  .ptop{ padding-top:calc(clamp(122px,15vh,196px) + 26px) }
  .hdr-nav{ order:3; width:100%; margin-left:0; overflow-x:auto; gap:18px;
    padding:4px 2px 0; scrollbar-width:none;
    border-top:1px solid rgba(255,255,255,.08);
    /* Полоса разделов прокручивается вбок, и полоса прокрутки спрятана.
       Без подсказки последний пункт просто обрывался на полуслове у края
       экрана и читался как сломанная вёрстка, а не как «дальше есть ещё».
       Растворяем правый край — обрыв превращается в приглашение. */
    -webkit-mask-image:linear-gradient(to right, #000 84%, transparent 100%);
            mask-image:linear-gradient(to right, #000 84%, transparent 100%) }
  .hdr-nav::-webkit-scrollbar{ display:none }
  .hdr-nav a{ white-space:nowrap }
  .cta{ margin-left:auto; padding:9px 13px; font-size:12.5px }
  /* Шесть колонок в 390px не уместить никак — таблица едет вбок. Но чем уже
     первая колонка, тем больше тарифов видно сразу, а значит меньше тянуть. */
  .matrix{ background-size:32px 100%, 32px 100%, 12px 100%, 12px 100%, auto }
  .mx{ min-width:600px; font-size:13.5px }
  .mx th,.mx td{ padding:13px 10px }
  /* Липкая колонка названий — ФИКСИРОВАННОЙ ширины, и снап считается от неё
     же. Раньше стоял min-width:172px, колонка сама вырастала до 226 px под
     самое длинное название, а снап был прибит к 192 px — и браузер ещё до
     первого касания уводил таблицу на 34 px влево: «СТАНДАРТ» прятался
     под липкую колонку, торчал только хвост «…НДАРТ». */
  .matrix{ --mx-th:176px }
  .mx tbody th,.mx thead th:first-child{ width:var(--mx-th); min-width:var(--mx-th);
    max-width:var(--mx-th); white-space:normal }
  /* Колонка встаёт к краю липкого названия, а не замирает посреди слова:
     «BUSINESS», обрезанный пополам, читается как поломка вёрстки. */
  .matrix{ scroll-snap-type:x proximity; scroll-padding-left:var(--mx-th) }
  .mx td,.mx thead th:not(:first-child){ scroll-snap-align:start }
  .lang{ margin-left:0 }
}


/* ═══════════════════ ТЕЛЕФОН: тот же сайт, только мельче ═══════════════════
   Сайт написан mobile-first, и на телефоне он не ломается — но говорит теми
   же размерами, что и на мониторе: воздух между разделами в полтора экрана,
   плитки ростом с ладонь, заголовок в три строки. Идея от этого не яснее,
   а до сути приходится ехать.

   Поэтому здесь один проход по МАСШТАБУ, а не по составу: ни один раздел,
   ни одна строка и ни одна картинка не исчезают — они просто занимают
   столько места, сколько нужно, чтобы прочесть. Всё, что ниже, — только
   кегли и отступы.

   Порог 640, а не 760: планшет-портрет с его 768 px держит крупную шкалу
   честно, ему тесно не бывает. */

@media (max-width:640px){
  :root{
    /* Воздух между плитами: было 72+16 сверху и столько же снизу — почти
       экран пустоты на каждый стык, а стыков на главной восемь. */
    --sect-pad:clamp(44px,11vw,62px);
    /* Замес над стыком считается от того же воздуха: не ужать его — и
       цветное пятно перекроет первую строку раздела. */
    --tab-mix-h:clamp(64px,17vw,110px);
    --gap:12px;
  }

  /* Заголовки разделов НЕ трогаем: на 390 px они и так стоят на нижней
     границе своих clamp, а срезать их дальше — это уже другая страница, а
     не та же помельче. Ужимаем ярус ниже: подзаголовок карточки и лид. */
  h3{ font-size:17.5px }
  .lead{ font-size:16px; line-height:1.48 }
  .kicker{ font-size:12px; letter-spacing:.12em }
  .head{ gap:14px }

  /* Плитка перестаёт быть ростом в 180 px: пустая половина карточки не
     объясняет ничего, а на экран их влезает вдвое меньше. */
  .tile{ min-height:0; gap:9px }
  .tiles{ margin-top:24px }
  .card{ padding:16px }
  .tile p{ font-size:14px }
  .tile .ic{ width:21px; height:21px; margin-bottom:2px }
  .tail h2{ font-size:22px }

  /* Пять «программ» до сих пор стояли карточками в 124 px ростом на пустом
     месте: довод в них — само их количество, а не их размер. */
  .five{ margin-top:22px }
  .five-i{ min-height:92px }
  .chain-i{ padding:14px 16px; gap:12px }

  /* Модуль на странице «Что умеет»: между соседями было 46+46 px пустоты
     плюс волосяная линия. Тридцать два — линия по-прежнему читается
     границей, а восемь модулей помещаются в полтора экрана меньше. */
  .mrow{ padding-block:32px }
  .mrow-in{ gap:20px }
  .mrow-n{ margin-bottom:12px }
  .mrow h3{ font-size:22px }
  .mrow-lead{ margin-top:12px; font-size:15.5px }

  /* Виньетка тарифа рисуется во всю ширину карточки, и на телефоне одна
     картинка занимает треть экрана — а объясняет она меньше, чем строка
     под ней. Уменьшаем рисунок, а не выбрасываем: тариф без картинки
     становится строкой прайса. */
  .pviz svg{ width:74%; margin-inline:auto }
  .plan-n{ margin-top:16px }
}

/* ─────────────────────────── меньше движения ─────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .drift{ animation:none !important }
  .rv,.js .rv{ opacity:1; transform:none; transition:none }
  .pviz *{ transition:none !important }
  .hdr{ transition:none }
}