/* =========================================================================
   WACIS — оформление сайта

   Тема светлая, с тёмными плашками: первый экран, разделы про CRM и код,
   тарифная врезка и подвал стоят на фирменном тёмном, остальное — на
   светлом. Чередование задаёт ритм и не даёт странице расплыться в
   одну бесконечную белую ленту.

   Палитра бренда — шесть цветов, других в файле нет:
     #00004f  тёмно-синий   основа тёмных секций
     #f2f2f2  светло-серый  фон страницы
     #1a1a1a  почти чёрный  текст и «угольные» секции
     #450b1a  бордовый      третий акцент, тариф Enterprise
     #831381  пурпурный     первый акцент, действия
     #006655  изумрудный    второй акцент, всё «рабочее»: код, статусы, CRM

   Оттенки получены только прозрачностью и смешиванием этих шести —
   поэтому сайт нельзя случайно увести в чужой цвет.
   ========================================================================= */

/* ------------------------------------------------------------------ ШРИФТ

   Гарнитуры лежат в самой теме, а не тянутся с чужого домена: сайт не
   зависит от постороннего сервиса, и на экране не случается скачка
   вёрстки от подмены шрифта на полпути.

   Обе — переменные, поэтому весь диапазон насыщенности приходит одним
   файлом на подмножество. Подмножеств два, кириллица и латиница:
   браузер возьмёт нужное по unicode-range и второе не станет качать,
   пока на странице не встретится латинская буква.

   Manrope и Golos Text распространяются по SIL Open Font License 1.1 —
   размещение у себя лицензия разрешает прямо.
   ========================================================================= */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url(manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url(manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(golos-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(golos-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ ТОКЕНЫ */
:root {
  /* Бренд */
  --navy:   #00004f;
  --paper:  #f2f2f2;
  --ink:    #1a1a1a;
  --wine:   #450b1a;
  --plum:   #831381;
  --teal:   #006655;
  --white:  #fff;

  /* Производные: только прозрачность и смешивание фирменных */
  --navy-1: color-mix(in srgb, var(--navy) 8%,  var(--white));
  --navy-2: color-mix(in srgb, var(--navy) 16%, var(--white));
  --navy-6: color-mix(in srgb, var(--navy) 62%, var(--ink));
  --navy-8: color-mix(in srgb, var(--navy) 84%, var(--ink));
  --plum-1: color-mix(in srgb, var(--plum) 10%, var(--white));
  --teal-1: color-mix(in srgb, var(--teal) 10%, var(--white));

  /* 66 %, а не 58: на 58 вторичный текст давал контраст 4.12 при
     норме 4.5 для основного кегля — по краю, но мимо. */
  --mute:   color-mix(in srgb, var(--ink) 66%, var(--paper));
  --line:   color-mix(in srgb, var(--navy) 14%, var(--paper));
  --line-2: color-mix(in srgb, var(--navy) 26%, var(--paper));

  /* На тёмном */
  --d-text: var(--paper);
  --d-mute: color-mix(in srgb, var(--paper) 62%, var(--navy));
  --d-line: color-mix(in srgb, var(--paper) 18%, var(--navy));
  --d-card: color-mix(in srgb, var(--white) 6%, var(--navy));

  /*
   * КОНТЕКСТНЫЕ ТОКЕНЫ
   *
   * Здесь — значения для светлого окружения; тёмные секции ниже
   * переопределяют этот же набор у себя. Дальше по файлу компоненты
   * пользуются только этими шестью именами и не знают, на чём стоят.
   *
   * Так карточка, кнопка или ссылка со стрелкой описываются один раз,
   * а не по разу на каждый вид фона. Иначе выходит то, ради чего это
   * и переделано: у .hero нет класса .sec--navy, и правило
   * «.sec--navy .btn--ghost» до него не доставало — тёмная кнопка
   * оставалась тёмной на тёмном.
   */
  --fg:      var(--ink);      /* основной текст */
  --fg-mute: var(--mute);     /* второстепенный текст */
  --title:   var(--ink);      /* заголовки */
  --hair:    var(--line);     /* тонкая линия */
  --hair-2:  var(--line-2);   /* линия поконтрастнее: рамки, поля ввода */
  --surface: var(--white);    /* фон карточки поверх фона секции */
  --accent:  var(--plum);
  --accent-2: var(--teal);
  /* Кольцо фокуса тоже контекстное: пурпурное по тёмно-синему почти
     не отличить, а именно по нему ходят с клавиатуры. */
  --focus:   var(--plum);

  /* Типографика: две гарнитуры с разной работой.

     Golos Text набирает текст и интерфейс — он рисован под кириллицу, и
     русская строка в нём не выглядит переводной. Manrope держит
     заголовки: у него плотнее рисунок и сильнее характер, а в крупном
     кегле именно это и читается как голос бренда.

     Системный набор оставлен запасным: пока шрифт едет, страница
     набрана им, и подмена не сдвигает вёрстку. */
  --font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
  --font-display: "Manrope", "Golos Text", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
          "Roboto Mono", Consolas, monospace;

  /* Шаг сетки. Всё вертикальное расстояние кратно 4px — так разделы
     собираются в общий ритм без подгонки на глаз. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;

  /*
   * Тени в два слоя и подкрашены синим, а не чёрным. Чёрная тень на
   * цветном фоне читается грязным пятном; тень цвета основы читается
   * объёмом. Ближний слой держит край, дальний — вес.
   */
  --sh-1: 0 1px 2px color-mix(in srgb, var(--navy) 12%, transparent);
  --sh-2: 0 2px 4px color-mix(in srgb, var(--navy) 8%, transparent),
          0 18px 40px -14px color-mix(in srgb, var(--navy) 26%, transparent);
  --sh-3: 0 4px 10px color-mix(in srgb, var(--navy) 10%, transparent),
          0 44px 90px -24px color-mix(in srgb, var(--navy) 46%, transparent);

  /* Колонка содержимого той же ширины, что и полоса шапки. Раньше
     шапка расширялась до 1320 (в 1200 не помещалось меню), а содержимое
     оставалось 1200 — на широком экране это читалось как две разные
     сетки одна под другой. */
  --wrap: 1320px;
  --head-h: 68px;
}

/* --------------------------------------------------------------- СБРОС */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/*
 * Зерно. Ровная заливка на большом экране выглядит плёнкой, натянутой
 * поверх экрана; едва различимый шум возвращает поверхности материал.
 * Слой прибит к окну, не ловит курсор и в раскладке не участвует —
 * убрать его можно одним правилом, ничего за собой не потянув.
 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300;
  pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/*
 * Заголовки набраны второй гарнитурой и с разрядкой, зависящей от
 * кегля: чем крупнее строка, тем теснее буквы должны стоять. Одна
 * общая отрицательная разрядка на все размеры даёт либо разваленный
 * заголовок в 74 пикселя, либо слипшийся подзаголовок в 19.
 *
 * text-wrap: balance разносит строки заголовка поровну — вместо
 * длинной первой строки и одинокого слова во второй.
 */
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  line-height: 1.06; letter-spacing: -.03em; text-wrap: balance;
}
h1 { font-size: clamp(36px, 6.4vw, 74px); line-height: 1.01; letter-spacing: -.038em; }
h2 { font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -.032em; }
h3 { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.25; letter-spacing: -.016em; font-weight: 700; }

/* Висячая строка из одного слова портит абзац сильнее, чем неровный
   правый край, — просим браузер её не оставлять. */
p  { margin: 0; text-wrap: pretty; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--d-text);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r-m) 0;
}
.skip:focus { left: 0; }

/*
 * СТРАНИЦА НЕ ЕДЕТ ВБОК.
 *
 * Панель меню на узких экранах стоит справа ЗА краем окна — она
 * position: fixed и сдвинута transform-ом на свою ширину. Ждать нажатия
 * это ей не мешает, а ширину документа увеличивало: на экране 375
 * страница прокручивалась вправо на 330 пикселей. Так вело себя каждую
 * страницу сайта, а заметно стало на тёмной, где пустая полоса видна.
 *
 * clip, а не hidden: hidden сделал бы корень прокручиваемым блоком и
 * сломал бы position: sticky у шапки. clip только обрезает.
 */
html { overflow-x: clip; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
@media (max-width: 600px) { .wrap { width: calc(100% - 32px); } }

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

/* ============================================================== СЕКЦИИ

   Три вида фона. Класс ставится на <section>, вложенная разметка не
   знает, на чём стоит, — цвета переопределяются здесь один раз.
   ========================================================================= */
/* Воздуха между разделами намеренно больше, чем нужно для читаемости:
   плотная страница выглядит дешевле просторной при том же наборе. */
.sec { padding: clamp(64px, 9vw, 132px) 0; position: relative; }

/*
 * Отступ для якорей. Шапка липкая, поэтому переход по ссылке вида
 * «#ceny» ставит начало раздела ровно под неё и заголовок оказывается
 * закрыт. Сдвигаем точку остановки на высоту шапки плюс воздух.
 */
[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
.sec--tight { padding: clamp(44px, 5.5vw, 76px) 0; }

.sec--paper { background: var(--paper); }
.sec--white { background: var(--white); }

/*
 * Тёмное окружение. Перечислены все секции, которые стоят на фирменном
 * тёмном, — набор токенов у них общий, поэтому и правило одно.
 */
.sec--navy, .sec--coal, .hero, .phead, .form-sec, .cta, .site-footer, .ticker {
  --fg:      var(--d-text);
  --fg-mute: var(--d-mute);
  --title:   var(--white);
  --hair:    var(--d-line);
  --hair-2:  var(--d-line);
  --surface: var(--d-card);
  --accent:   color-mix(in srgb, var(--plum) 45%, var(--paper));
  --accent-2: color-mix(in srgb, var(--teal) 45%, var(--paper));
  --focus:    color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--fg);
}
.sec--navy { background: var(--navy); }
.sec--coal { background: var(--ink); }

/* На белом фоне карточка светло-серая, иначе её не видно */
.sec--white { --surface: var(--paper); --hair: var(--line-2); }

h1, h2, h3, h4 { color: var(--title); }

/* Заголовок раздела */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: var(--s3);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; flex: none;
}
.eyebrow--teal { color: var(--accent-2); }

.sec__head { max-width: 760px; margin-bottom: var(--s8); }
.sec__head > h2 { margin-top: var(--s4); }
.sec__sub { margin-top: var(--s4); font-size: clamp(16px, 1.5vw, 19px); color: var(--fg-mute); }

.sec__head--wide { max-width: none; display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: var(--s7); align-items: end; }
@media (max-width: 900px) { .sec__head--wide { grid-template-columns: 1fr; gap: var(--s4); align-items: start; } }

/* ============================================================== КНОПКИ */
/*
 * Насыщенность 700 на кнопке — перебор: подпись в две-три буквы и так
 * стоит в рамке, а лишний вес делает её крикливой. 600 плюс лёгкая
 * отрицательная разрядка читается собраннее.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 14px var(--s5); border: 1px solid transparent; border-radius: 8px;
  font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -.006em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s,
              transform .16s, box-shadow .16s;
}
/* Нажатие проваливает кнопку и гасит тень — так же, как настоящую */
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn--primary { background: var(--plum); color: var(--white); box-shadow: var(--sh-1); }
.btn--primary:hover {
  background: color-mix(in srgb, var(--plum) 82%, var(--ink));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--plum) 70%, transparent);
}

/* Прозрачная кнопка берёт цвет у окружения — и на светлом, и на тёмном */
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--hair-2); }
.btn--ghost:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.site-header--dark .btn--ghost { color: var(--d-text); border-color: var(--d-line); }

.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--paper); }

.btn--sm  { padding: 10px var(--s4); font-size: 14px; }
.btn--wide{ width: 100%; }

/* Ссылка со стрелкой — «читать дальше» без рамки */
.arrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: 15px; text-decoration: none;
  color: var(--accent); border-bottom: 1px solid transparent;
}
.arrow:hover { border-bottom-color: currentColor; }
.arrow i { font-style: normal; transition: transform .16s; }
.arrow:hover i { transform: translateX(3px); }

/* ============================================================== ПЕРВЫЙ ЭКРАН

   Слева — оффер, справа — «шов»: панель, которая по переключателю
   показывает то собранный блок сайта, то его исходник. Это и есть
   главное отличие сервиса, поэтому оно стоит на первом экране не
   картинкой, а работающим элементом.
   ========================================================================= */
.hero {
  background: var(--navy); color: var(--d-text);
  padding: clamp(56px, 7.5vw, 104px) 0 clamp(64px, 9vw, 124px);
  position: relative; overflow: hidden;
}
/* Мягкое свечение двух акцентов — единственная «картинка» на экране */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(130px);
}
/*
 * Два пятна равной яркости читаются как подсветка клавиатуры. Свет
 * должен идти откуда-то одного: пурпурное — источник, изумрудное —
 * отсвет у дальнего края, вдвое слабее. Радиус больше, плотность
 * меньше: чем мягче край, тем дороже выглядит свечение.
 */
.hero::before { width: 640px; height: 640px; left: -240px;  top: -280px; background: var(--plum); opacity: .34; }
.hero::after  { width: 560px; height: 560px; right: -240px; bottom: -320px; background: var(--teal); opacity: .2; }

.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 1040px) { .hero__in { grid-template-columns: 1fr; } }

.hero h1 { margin-top: var(--s5); }
.hero h1 b { color: color-mix(in srgb, var(--teal) 42%, var(--paper)); font-weight: 800; }
.hero__sub { margin-top: var(--s5); font-size: clamp(17px, 1.7vw, 21px); color: var(--fg-mute); max-width: 34em; }
.hero__cta { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero__note { margin-top: var(--s4); font-size: 14px; color: var(--fg-mute); }

/* Цифры под оффером */
.hero__facts {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5);
}
/* На телефоне три колонки цифр дают по 100 пикселей на подпись, и
   «1 подписка» рвётся посреди слова. Разворачиваем в столбец. */
@media (max-width: 620px) {
  .hero__facts { grid-template-columns: 1fr; gap: var(--s4); }
}

.fact__n {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 800;
  letter-spacing: -.03em; color: var(--title);
  /* Моноширинные цифры: иначе три числа в ряд стоят вразнобой */
  font-variant-numeric: tabular-nums;
}
.fact__t { font-size: 13px; color: var(--fg-mute); margin-top: 2px; }

/* --- Панель «Собрано / Исходник» ------------------------------------- */
.seam {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.seam__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--d-line);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.seam__dots { display: flex; gap: 6px; }
.seam__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--d-line); display: block; }
.seam__url {
  font-family: var(--mono); font-size: 12px; color: var(--d-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seam__tabs { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: var(--r-s); background: color-mix(in srgb, var(--ink) 40%, transparent); }
.seam__tab {
  border: 0; background: none; cursor: pointer;
  padding: 5px 11px; border-radius: 4px;
  font-size: 12px; font-weight: 700; color: var(--d-mute);
}
.seam__tab[aria-selected="true"] { background: var(--teal); color: var(--white); }

.seam__body { position: relative; min-height: 330px; }
.seam__pane { display: none; padding: var(--s5); }
.seam__pane[data-on] { display: block; }

/* Пане «Собрано» — уменьшенный макет обычной страницы */
.mini { display: grid; gap: var(--s3); }
.mini__nav { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--d-line); }
.mini__logo { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, var(--plum), var(--teal)); flex: none; }
.mini__nav span { height: 6px; border-radius: 3px; background: var(--d-line); display: block; }
.mini__nav span:nth-child(2) { width: 44px; } .mini__nav span:nth-child(3) { width: 34px; } .mini__nav span:nth-child(4) { width: 40px; }
.mini__nav em { margin-left: auto; width: 62px; height: 22px; border-radius: 5px; background: var(--plum); display: block; }
.mini__h { font-size: 21px; font-weight: 800; color: var(--white); line-height: 1.15; letter-spacing: -.02em; }
.mini__p { display: grid; gap: 6px; }
.mini__p i { display: block; height: 7px; border-radius: 4px; background: var(--d-line); }
.mini__p i:nth-child(2) { width: 86%; } .mini__p i:nth-child(3) { width: 62%; }
.mini__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s2); }
.mini__card {
  border: 1px solid var(--d-line); border-radius: var(--r-m); padding: var(--s3);
  display: grid; gap: 7px; background: color-mix(in srgb, var(--white) 3%, transparent);
}
.mini__card b { display: block; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--teal) 70%, transparent); }
.mini__card i { display: block; height: 6px; border-radius: 3px; background: var(--d-line); }
.mini__card i:last-child { width: 70%; }

/* Пане «Исходник» */
.code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.85;
  margin: 0; overflow-x: auto; color: var(--d-text);
  counter-reset: ln;
}
.code b { font-weight: 400; display: block; white-space: pre; }
.code b::before {
  counter-increment: ln; content: counter(ln);
  display: inline-block; width: 2.2em; margin-right: var(--s3);
  text-align: right; color: color-mix(in srgb, var(--paper) 26%, transparent);
  user-select: none;
}
.code b[data-hl] { background: color-mix(in srgb, var(--teal) 22%, transparent); border-radius: 3px; }
.t-tag  { color: color-mix(in srgb, var(--plum) 45%, var(--paper)); }
.t-attr { color: color-mix(in srgb, var(--teal) 48%, var(--paper)); }
.t-str  { color: color-mix(in srgb, var(--paper) 76%, var(--navy)); }
/* Комментарии светлее прочего кода намеренно, но не настолько: на 40 %
   контраст падал до 3.25 и строки читались с трудом. */
.t-com  { color: color-mix(in srgb, var(--paper) 60%, var(--navy)); font-style: italic; }
.t-key  { color: color-mix(in srgb, var(--plum) 52%, var(--paper)); }

.seam__foot {
  border-top: 1px solid var(--d-line); padding: var(--s3) var(--s4);
  font-size: 12.5px; color: var(--d-mute);
  display: flex; align-items: center; gap: var(--s2);
}
.seam__foot b { color: color-mix(in srgb, var(--teal) 42%, var(--paper)); font-weight: 700; }

/* ============================================================== БЕГУЩАЯ СТРОКА
   Перечень того, что собирается на сервисе. Дублируется в разметке
   дважды — вторая копия помечена aria-hidden и нужна только чтобы
   лента замыкалась без разрыва.
   ========================================================================= */
.ticker {
  background: var(--ink); color: var(--paper);
  padding: var(--s4) 0; overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
}
.ticker__row { display: flex; width: max-content; animation: slide 38s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__g { display: flex; align-items: center; gap: var(--s6); padding-right: var(--s6); }
.ticker__g span { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.ticker__g span::after { content: "·"; margin-left: var(--s6); color: var(--teal); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }

/* ============================================================== СЕТКИ */
.cols  { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cols-2{ display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.cols-4{ display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Карточка */
.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-m); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
.card p, .card li { color: var(--fg-mute); font-size: 15.5px; }

.card__n {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--accent-2); letter-spacing: .06em;
}

/* Иконка-плашка */
.ico {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--plum-1); color: var(--plum);
  font-weight: 800; font-size: 17px;
}
.ico--teal { background: var(--teal-1); color: var(--teal); }
.ico--navy { background: var(--navy-1); color: var(--navy); }
/* На тёмном плашка не красится в светлый оттенок — берём подложку
   прозрачностью, иначе три квадрата светятся ярче заголовка */
.sec--navy .ico, .sec--coal .ico, .form-sec .ico {
  background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--paper);
}

/* ============================================================== «ШОВ» — БОЛЬШАЯ ВЕРСИЯ
   Раздел про исходный код: слева объяснение, справа большой листинг.
   ========================================================================= */
.split { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

/* Пронумерованный список доводов */
.steps { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start; }
.steps b {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  border: 1px solid var(--hair-2); color: var(--fg);
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--fg-mute); font-size: 15.5px; }

/* Большая панель кода */
.panel {
  border: 1px solid var(--d-line); border-radius: var(--r-l); overflow: hidden;
  background: var(--navy-8); color: var(--d-text);
}
.sec--paper .panel, .sec--white .panel { box-shadow: var(--sh-2); }
.panel__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--d-line);
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  font-family: var(--mono); font-size: 12px; color: var(--d-mute);
}
.panel__bar b { color: var(--paper); font-weight: 600; }
.panel__body { padding: var(--s5); }
.panel__foot {
  border-top: 1px solid var(--d-line); padding: var(--s3) var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font-size: 12.5px; color: var(--d-mute);
}
.panel__foot span { display: inline-flex; align-items: center; gap: 6px; }
.panel__foot span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ============================================================== CRM И ЗАДАЧИ

   Доска задач и карточка сделки сверстаны разметкой, а не сняты
   скриншотом: так они читаются на телефоне, масштабируются без каши
   и правятся вместе с остальным сайтом.
   ========================================================================= */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 780px) { .board { grid-template-columns: 1fr; } }

.board__col {
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border: 1px solid var(--d-line); border-radius: var(--r-m);
  padding: var(--s4); display: grid; gap: var(--s3); align-content: start;
}
.board__t {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--d-mute);
}
.board__t::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--d-line); }
.board__col--go   .board__t::before { background: var(--teal); }
.board__col--work .board__t::before { background: var(--plum); }
.board__t em { margin-left: auto; font-style: normal; font-size: 12px; letter-spacing: 0; }

.tk {
  background: var(--d-card); border: 1px solid var(--d-line);
  border-radius: var(--r-s); padding: var(--s3);
  display: grid; gap: var(--s2);
}
.tk__t { font-size: 14.5px; font-weight: 600; color: var(--white); line-height: 1.3; }
.tk__m { display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--d-mute); }
.tk__who {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  background: var(--plum); color: var(--white);
}
.tk__who--t { background: var(--teal); }
.tk__who--w { background: var(--wine); }
.tag {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--d-line); color: var(--d-mute);
}
.tag--teal { color: color-mix(in srgb, var(--teal) 45%, var(--paper)); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.tag--plum { color: color-mix(in srgb, var(--plum) 48%, var(--paper)); border-color: color-mix(in srgb, var(--plum) 45%, transparent); }

/* Карточка сделки */
.deal {
  background: var(--d-card); border: 1px solid var(--d-line);
  border-radius: var(--r-m); padding: var(--s5); display: grid; gap: var(--s4);
}
.deal__top { display: flex; align-items: start; gap: var(--s3); }
.deal__sum { margin-left: auto; text-align: right; }
.deal__sum b {
  display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--white); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.deal__sum span { font-size: 12px; color: var(--d-mute); }
.deal__pipe { display: flex; gap: 4px; }
.deal__pipe i { flex: 1; height: 5px; border-radius: 3px; background: var(--d-line); }
.deal__pipe i[data-done] { background: var(--teal); }
.deal__log { display: grid; gap: var(--s3); border-top: 1px solid var(--d-line); padding-top: var(--s4); }
.deal__log div { display: grid; grid-template-columns: 74px 1fr; gap: var(--s3); font-size: 13.5px; color: var(--d-mute); }
.deal__log time { font-family: var(--mono); font-size: 12px; }
.deal__log b { color: var(--paper); font-weight: 600; }

/* ============================================================== СДЕЛАНО НА WACIS

   Витрина живых сайтов. Снимок экрана стоит в рамке окна браузера, а
   адрес — в строке этого окна и написан разметкой, а не впечатан в
   картинку: адрес здесь и есть доказательство, и он должен читаться
   поиском и озвучкой, а не только глазом.
   ========================================================================= */
.cases {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
}
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; } }

.case { display: flex; flex-direction: column; gap: var(--s5); }

.case__win {
  display: block; text-decoration: none;
  border: 1px solid var(--hair); border-radius: var(--r-l); overflow: hidden;
  background: var(--surface); box-shadow: var(--sh-2);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.case__win:hover {
  transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--hair-2);
}

.case__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s4); border-bottom: 1px solid var(--hair);
  background: color-mix(in srgb, var(--ink) 26%, transparent);
}
.case__url {
  font-family: var(--mono); font-size: 12px; color: var(--fg-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case__win img { width: 100%; height: auto; display: block; }

.case__t { display: grid; gap: var(--s3); }
.case__d { color: var(--fg-mute); font-size: 15.5px; }
/* Перечень собранного — тем же моноширинным, что и адрес: это опись
   механики, а не рекламная строка. */
.case__k {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em;
  color: var(--accent-2);
}
.case .arrow { margin-top: var(--s2); }

/* ============================================================== ТАРИФЫ */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

.plan {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-l); padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
}
/* Тёмная карточка в светлой секции — обратный случай: свой набор токенов */
.plan--hot {
  --fg: var(--d-text); --fg-mute: var(--d-mute); --title: var(--white);
  --hair: var(--d-line); --hair-2: var(--d-line);
  --accent: color-mix(in srgb, var(--plum) 45%, var(--paper));
  --accent-2: color-mix(in srgb, var(--teal) 45%, var(--paper));
  background: var(--navy); border-color: var(--navy); color: var(--fg);
  position: relative; box-shadow: var(--sh-2);
}
.plan--top {
  position: absolute; top: -12px; left: var(--s6);
  background: var(--teal); color: var(--white);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px;
}
.plan__d { font-size: 14.5px; color: var(--fg-mute); }

.plan__p { display: flex; align-items: baseline; gap: 6px; padding-block: var(--s2); }
.plan__p b {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 40px); font-weight: 800;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.plan__p span { font-size: 14px; color: var(--fg-mute); }
/*
 * У старшего тарифа цена длиннее на слово «от» и в карточку целиком
 * не помещается. Отдельного класса под это нет: вёрстка блока в базе
 * одна на все три карточки, поэтому размер выводим из стиля карточки —
 * так же, как вид кнопки.
 */
.plan--wine .plan__p b { font-size: clamp(22px, 2.4vw, 28px); }

/*
 * Кнопка тарифа берёт вид у карточки, а не у отдельного модификатора
 * в разметке: у блока tariff_block в базе один шаблон на все три
 * карточки, и класс кнопки в нём не меняется.
 */
.plan .btn { background: transparent; color: var(--fg); border-color: var(--hair-2); }
.plan .btn:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.plan--hot .btn { background: var(--white); color: var(--navy); border-color: var(--white); }
.plan--hot .btn:hover { background: var(--paper); border-color: var(--paper); }

/*
 * Плашка сверху есть не у каждого тарифа, а шаблон блока один.
 * При пустом поле ядро вырезает подстановку, но сам <span> остаётся —
 * без этого правила он рисовался бы цветным огрызком над карточкой.
 */
.plan--top:empty { display: none; }

.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.plan li::before {
  content: "✓"; color: var(--accent-2); font-weight: 800; font-size: 13px; line-height: 1.6;
}
.plan li[data-no] { color: var(--fg-mute); }
.plan li[data-no]::before { content: "—"; color: var(--hair-2); }
.plan .btn { margin-top: auto; }

.plan--wine { border-color: color-mix(in srgb, var(--wine) 30%, var(--paper)); }
.plan--wine .plan__p b { color: var(--wine); }
.plan--wine li::before { color: var(--wine); }

.plans__note { margin-top: var(--s6); text-align: center; font-size: 14.5px; color: var(--fg-mute); }

/* ============================================================== СРАВНЕНИЕ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 15px; }
.cmp th, .cmp td { padding: var(--s4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.cmp tbody th { font-weight: 600; width: 30%; }
.cmp td[data-us] { background: var(--navy-1); font-weight: 600; }
.cmp thead th[data-us] { color: var(--navy); background: var(--navy-2); border-radius: var(--r-s) var(--r-s) 0 0; }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.table-hint { font-size: 13px; color: var(--mute); margin-top: var(--s3); }

/* ============================================================== ОТЗЫВЫ

   Вёрстка совпадает с модулем reviews_block в админке — карточки
   приходят из справочника «Отзывы», а не вписаны в страницу.
   ========================================================================= */
.revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s5); }
.rev {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-m); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
}
.rev__q { font-size: 16px; line-height: 1.55; }
.rev__q::before { content: "“"; display: block; font-size: 40px; line-height: .6; color: var(--accent); margin-bottom: 10px; }
.rev__f { margin-top: auto; display: flex; align-items: center; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.rev__logo {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--fg);
}
.rev__logo img { width: 100%; height: 100%; object-fit: cover; }
.rev__n { font-weight: 700; font-size: 14.5px; display: block; }
.rev__r { font-size: 13px; color: var(--fg-mute); }

/* Слайдер отзывов (модуль reviews_slider) */
.slider { position: relative; }
.slider__track {
  display: flex; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s4); scrollbar-width: thin;
}
.slider__track > * { flex: 0 0 min(420px, 82vw); scroll-snap-align: start; }
.slider__nav { display: flex; gap: var(--s2); margin-top: var(--s4); }
.slider__btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent;
}
.slider__btn { border-color: var(--hair-2); color: var(--fg); }
.slider__btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

/* ============================================================== ВОПРОСЫ */
.faq { display: grid; gap: 0; max-width: 860px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s5) var(--s7) var(--s5) 0;
  font-weight: 700; font-size: 17px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__ico { position: absolute; right: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.faq__ico::before, .faq__ico::after {
  content: ""; position: absolute; background: var(--accent); transition: transform .18s;
}
.faq__ico::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq__ico::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.faq details[open] .faq__ico::after { transform: scaleY(0); }
.faq__c { overflow: hidden; }
.faq__c > div { padding-bottom: var(--s5); color: var(--fg-mute); max-width: 62em; }

/* ============================================================== ЗАЯВКА */
.form-sec { background: var(--ink); padding: clamp(56px, 8vw, 104px) 0; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 940px) { .form-grid { grid-template-columns: 1fr; } }

.routes { margin-top: var(--s6); display: grid; gap: var(--s3); max-width: 440px; }
.route {
  display: grid; grid-template-columns: 108px 1fr 20px; align-items: center; gap: var(--s3);
  padding: var(--s4); text-decoration: none;
  border: 1px solid var(--d-line); border-radius: var(--r-m);
  transition: border-color .16s, background .16s;
}
.route:hover { border-color: var(--paper); background: color-mix(in srgb, var(--white) 5%, transparent); }
.route__k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); font-weight: 700; }
.route__v { font-weight: 700; }
.route__a { color: var(--accent-2); }

/*
 * Белая карточка внутри тёмной секции возвращает светлый набор токенов.
 * Без этого текст ответа «Заявка принята», который скрипт вставляет
 * классом .sec__sub, красился в светло-серый по белому и не читался.
 */
.form-card {
  --fg: var(--ink); --fg-mute: var(--mute); --title: var(--ink);
  --hair: var(--line); --hair-2: var(--line-2); --surface: var(--white);
  --accent: var(--plum); --accent-2: var(--teal);
  background: var(--white); color: var(--fg);
  border-radius: var(--r-l); padding: clamp(24px, 3.4vw, 40px);
}
.form-card__t { font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field--full, .fields > fieldset, .fields > p { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; color: var(--mute); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 15px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--paper); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--plum); outline-offset: 0; border-color: transparent; }
.field textarea { resize: vertical; min-height: 60px; }

.agree { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.agree__l { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--mute); cursor: pointer; line-height: 1.45; }
.agree__l input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.agree__b { width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--white); position: relative; margin-top: 1px; }
.agree__l input:checked + .agree__b { background: var(--teal); border-color: var(--teal); }
.agree__l input:checked + .agree__b::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.agree__l input:focus-visible + .agree__b { outline: 2px solid var(--plum); outline-offset: 2px; }
.agree__l a { color: var(--plum); }
/* «— необязательно» читается как оговорка за счёт тире и позиции,
   а не за счёт бледности: на --line-2 контраст падал до 2.06. */
.agree__opt { color: var(--mute); }
.agree__err { display: none; color: var(--wine); font-size: 13.5px; font-weight: 600; }
.agree__err[data-show] { display: block; }
.form-note { font-size: 13px; color: var(--mute); text-align: center; }

/* ============================================================== ПРИЗЫВ */
.cta {
  background: var(--navy); color: var(--d-text);
  border-radius: var(--r-l); padding: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center;
}
@media (max-width: 800px) { .cta { grid-template-columns: 1fr; } }
.cta p { margin-top: var(--s4); color: var(--fg-mute); max-width: 46em; }
.cta__act { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ============================================================== ТЕКСТ СТРАНИЦ */
.prose { max-width: 760px; }
.prose > * + * { margin-top: var(--s5); }
.prose h2 { margin-top: var(--s8); }
.prose h3 { margin-top: var(--s7); }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
.prose ul, .prose ol { padding-left: var(--s5); display: grid; gap: 10px; }
.prose a { color: var(--plum); }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--navy-1); padding: 2px 6px; border-radius: 4px; }

/* Шапка внутренней страницы */
/* Шапка стоит в потоке, поэтому сверху хватает 24 пикселей: крошки
   должны начинаться сразу под ней, а не через полэкрана. */
.phead { background: var(--navy); padding: 24px 0 clamp(32px, 5vw, 60px); }
.phead h1 { margin-top: var(--s4); }
.phead p { margin-top: var(--s5); color: var(--fg-mute); font-size: clamp(16px, 1.5vw, 19px); max-width: 46em; }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 13px; color: var(--fg-mute); list-style: none; margin: 0; padding: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); opacity: .5; }

/*
 * ТЕКУЩЕЕ ЗВЕНО — ОБЫЧНЫЙ ТЕКСТ, ХОТЬ И ССЫЛКА.
 *
 * Модуль крошек делает ссылкой каждое звено и помечает текущее
 * атрибутом aria-current="page" — так положено для доступности, и так
 * шаблон звена остаётся одним на всю цепочку. Раньше последнее звено
 * писали руками без ссылки, и на глаз оно было простым текстом. Чтобы
 * замена рукописных крошек модулем ничего не изменила, возвращаем ему
 * тот же вид: не подчёркивается, не ведёт никуда, курсор обычный.
 */
.crumbs [aria-current="page"],
.zv-crumbs [aria-current="page"] {
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}


/* ==================================================================== СЕРВИСЫ

   Сервис — это работа, которую Wacis делает для сайта постоянно, а не
   возможность конструктора. У неё своя цена и своя страница, поэтому и
   набор блоков свой: витрина сервисов, конвейер, заслон, счёт.

   Всё построено на тех же шести контекстных токенах, что и остальное
   (--fg, --surface, --hair и прочие): блоки одинаково живут и на светлом,
   и на тёмном, а описаны один раз.
   ==================================================================== */

/* --- ВИТРИНА: асимметричная сетка ------------------------------------
   Ровный ряд одинаковых карточек читается как список товаров. Сервисов
   немного, и каждый стоит разного — сетка это показывает размером. */
.svcs { display: grid; gap: var(--s5); margin-top: var(--s7); }
@media (min-width: 900px) {
  .svcs { grid-template-columns: repeat(12, 1fr); }
  .svc--lead { grid-column: span 7; }
  .svc--side { grid-column: span 5; }
  .svc--full { grid-column: span 12; }
}

/*
 * ДВОЙНАЯ РАМКА.
 *
 * Карточка не лежит на фоне плашкой, а сидит в обойме: внешняя оправа
 * со своим радиусом, внутри — само содержимое с радиусом поменьше.
 * Разница радиусов взята как надо, r_внутр = r_внешн − отступ, иначе
 * углы идут волной.
 */
.svc {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--hair);
  border-radius: calc(var(--r-l) + 8px);
  padding: 7px;
  transition: transform .5s cubic-bezier(.32,.72,0,1),
              border-color .5s cubic-bezier(.32,.72,0,1);
}
.svc:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.svc__in {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-l); padding: clamp(24px, 3vw, 40px);
  height: 100%; display: flex; flex-direction: column; gap: var(--s4);
}
.svc__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.svc h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.2; }
.svc p { color: var(--fg-mute); }
.svc__price { font-family: var(--mono); font-size: 14px; color: var(--fg); white-space: nowrap; }
/*
 * Знак ВЫНОСИТСЯ, а не занимает колонку сетки.
 *
 * Было `display:grid; grid-template-columns: 18px 1fr` со знаком в
 * ::before. Пока в строке один кусок текста, всё хорошо. Но стоит
 * поставить внутри <b> или <a> — и текст ПОСЛЕ него становится
 * отдельным элементом сетки: он уезжает на новую строку в колонку
 * шириной со знак и рассыпается по слову в строке. Именно так и
 * случилось в списке заслона.
 *
 * Висячий отступ такого не умеет: внутри строки обычный поток, и
 * сколько там тегов — неважно.
 */
.svc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: 15px; color: var(--fg-mute); }
.svc__list li { position: relative; padding-left: 22px; }
.svc__list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent-2); }
.svc__act { margin-top: auto; padding-top: var(--s4); }

/* --- ПЛОЩАДКИ КОНТЕНТ-ЗАВОДА -----------------------------------------

   Сервис один, площадок пять, и у каждой своя страница. Списком
   ссылок, а не перечислением в тексте: человек, который ведёт канал в
   Telegram, должен попадать на свою страницу с одного взгляда, а не
   вычитывать её название из абзаца.

   Ряд переносится: на узком экране пять названий в строку не встают,
   а горизонтальная прокрутка внутри карточки — худшее из решений. */
.svc__nets-t {
  margin-top: var(--s4); font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute);
}
.svc__nets {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.svc__nets a {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--hair-2); font-size: 14px; color: var(--fg);
  text-decoration: none;
}
.svc__nets a:hover { border-color: var(--accent); color: var(--accent); }
/* Пометка сноски не должна утаскивать строку вверх и разъезжать ряд. */
.svc__nets sup { font-size: 10px; margin-left: 2px; vertical-align: super; line-height: 0; }

/* --- СНОСКИ ----------------------------------------------------------

   Обязательные приписки про площадки. Стоят в том же разделе, где
   пометки: приписка, за которой надо идти в подвал, своей задачи не
   выполняет. Мельче основного текста, но читаемо — это не дисклеймер
   «чтобы был». */
.notes {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; gap: 8px; max-width: 78ch;
  font-size: 13px; line-height: 1.55; color: var(--fg-mute);
}
.notes li { position: relative; padding-left: 20px; }
.notes li b { position: absolute; left: 0; top: 0; font-weight: 600; color: var(--fg); }


/* --- КОНВЕЙЕР --------------------------------------------------------

   ПЕРЕНОСИМ ПО СТРОКАМ, А НЕ ЖМЁМ В ОДНУ.

   Сначала семь шагов стояли одной лентой с прокруткой вбок. На широком
   экране колонка выходила 158 пикселей: по девять-двенадцать знаков в
   строке, шесть строк на три слова. Читать такое невозможно — текст
   именно что «плывёт».

   Порядок шагов виден и при переносе: слева направо, сверху вниз. Это
   привычнее, чем боковая прокрутка, которую на настольном экране ещё
   надо догадаться сделать.

   Четыре колонки на настольном, две на остальных: 4+3 и 2+2+2+1. */
.pipe { margin-top: var(--s7); }
.pipe ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s6) var(--s5);
}
@media (min-width: 560px)  { .pipe ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pipe ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pipe li { position: relative; padding-top: var(--s5); }
.pipe li::before {
  content: ""; position: absolute; top: 9px; left: 0; right: 0;
  height: 1px; background: var(--hair-2);
}
.pipe li::after {
  content: ""; position: absolute; top: 5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2);
}
.pipe li:last-child::after { background: var(--accent); }
.pipe b { display: block; font-size: 16px; color: var(--title); }
.pipe span { display: block; margin-top: var(--s2); font-size: 15px; line-height: 1.55; color: var(--fg-mute); }

/* --- ЗАСЛОН ----------------------------------------------------------
   Список причин, по которым пост НЕ выйдет. Крестик слева — не
   украшение: он и есть смысл строки. */
.gate { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); }
.gate li {
  position: relative; padding-left: 40px; min-height: 26px;
  font-size: 15.5px; color: var(--fg-mute);
}
.gate li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  color: var(--accent); border: 1px solid var(--hair-2);
}
.gate b { color: var(--title); font-weight: 600; }

/* --- СЧЁТ ------------------------------------------------------------
   Две цифры, из которых складывается плата. Крупно и врозь: цену
   человек ищет глазами, а не читает. */
.bill { display: grid; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 760px) { .bill { grid-template-columns: 1fr 1fr; } }
.bill__n {
  font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1; letter-spacing: -.02em; color: var(--title);
}
.bill__k { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--fg-mute); }
.bill p { color: var(--fg-mute); font-size: 15.5px; }

/* --- ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ -----------------------------------------

   ПРЯЧЕТ СКРИПТ, А НЕ СТИЛИ.

   Первая редакция ставила opacity:0 прямо на [data-rise]. Пока скрипт
   работает, всё хорошо; но стоит ему не выполниться — выключен JS,
   ошибка выше по файлу, сохранённая копия страницы, — и половина
   содержимого пропадает НАВСЕГДА. Поймано на макете: в предпросмотре
   сценарии не исполняются, и страница оказалась пустой.

   Поэтому прячем только после того, как скрипт объявил, что умеет
   показать обратно: он ставит на <html> признак data-rise-ready.
   Нет признака — блоки видны, просто без анимации.

   Тяжёлое, короткое, один раз. Кто просил не двигать — не двигаем. */
[data-rise-ready] [data-rise] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1);
}
[data-rise-ready] [data-rise][data-seen] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rise-ready] [data-rise] { opacity: 1; transform: none; transition: none; }
  .svc { transition: none; }
  .svc:hover { transform: none; }
}

/* --- КОЛОНКА НЕ РАЗДУВАЕТСЯ СОДЕРЖИМЫМ ------------------------------

   У элемента сетки min-width по умолчанию auto: он не может стать уже
   своего неразрывного содержимого. Панель с кодом как раз такая —
   строки в ней не переносятся. На телефоне колонка раздувалась до
   428 пикселей при экране в 375, и вместе с ней уезжал ВЕСЬ текст
   соседней колонки: заголовок, подзаголовок, список заслона.

   Ноль возвращает колонке право быть уже содержимого, а прокрутку
   берёт на себя сама панель — у .code она уже есть. */
.split > * { min-width: 0; }

/* ------------------------------------------------------------- COOKIES
   Плашка обязана слушаться атрибута hidden.

   Её оформление живёт в стилях вида подвала и начинается с
   «.ck { display: flex }» — а это правило сильнее браузерного
   «[hidden] { display: none }». Из-за этого на сайте плашка висела
   всегда: разметка приходит скрытой, скрипт её показывает и прячет, а
   стиль показывал сам, без спроса. Кнопка «Принять» при этом ничего не
   меняла — прятать было нечем.

   Правило ниже весит больше (класс плюс атрибут) и возвращает hidden
   его смысл. Заодно страница без сценариев остаётся чистой: плашка,
   которую нечем закрыть, хуже отсутствующей. */
.ck[hidden] { display: none !important; }