/* Лендинг Vkladka. Цвета и размеры — из тех же токенов, что и программа:
   сайт не должен выглядеть другим продуктом. Шкала та же: кегли 12–26,
   радиусы 8/14, высоты кнопок 32/38. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-15)/1.55 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-26); line-height: 1.22; font-weight: 800; }
h2 { font-size: var(--fs-20); line-height: 1.3; font-weight: 780; }
p { margin: 0; }

.ярлык {
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}

.лид { font-size: var(--fs-15); color: var(--muted); max-width: 62ch; }
.сноска { font-size: var(--fs-13); color: var(--muted); }
.надзаголовок { font-size: var(--fs-13); font-weight: 700; color: var(--accent); }

/* ── Шапка ───────────────────────────────────────────────────────────── */
.шапка {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 54px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(8px);
}

/* Содержимое шапки сидит на той же оси, что и контент (1100px по центру),
   а фон полосы тянется во всю ширину — иначе на широком экране логотип и
   кнопки разъезжаются к краям. */
.шапка-нутро {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.знак {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-15);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
}

.шапка-меню { display: flex; gap: 18px; margin-left: 8px; }

.шапка-меню a {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.шапка-меню a:hover { color: var(--text); }

.шапка > .кнопка { margin-left: auto; }

/* ── Верхняя утилитарная полоса (приём из референса) ──────────────────── */
/* Второстепенные ссылки и вход в программу — над основной навигацией.
   Полоса прокручивается вверх, основная шапка остаётся липкой. */
.шапка-верх {
  display: flex;
  align-items: center;
  height: 34px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  font-size: var(--fs-12);
}
.шапка-верх .шапка-нутро { justify-content: space-between; gap: 16px; }
.шапка-трест { color: var(--muted); }
.шапка-утил { display: flex; align-items: center; gap: 18px; }
.шапка-утил a { color: var(--muted); text-decoration: none; font-weight: 600; }
.шапка-утил a:hover { color: var(--text); }
.шапка-утил a[aria-current="page"] { color: var(--text); }
.шапка-вход {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent) !important; font-weight: 700;
}
.шапка-вход .стрелка-м { width: 14px; height: 14px; }

/* «Задачи» — выпадающее меню категорий (десктоп), без JS (details/summary). */
.меню-задачи { position: relative; }
.меню-задачи > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-13); font-weight: 600; color: var(--muted);
  padding: 17px 0;
}
.меню-задачи > summary::-webkit-details-marker { display: none; }
.меню-задачи > summary:hover,
.меню-задачи[open] > summary { color: var(--text); }
.меню-задачи.активна > summary { color: var(--accent); font-weight: 700; }
.шеврон-м { width: 15px; height: 15px; transition: transform .15s ease; }
.меню-задачи[open] .шеврон-м { transform: rotate(180deg); }
.меню-задачи-лист {
  position: absolute; top: calc(100% + 4px); left: -12px;
  min-width: 232px; display: flex; flex-direction: column;
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 14px 34px rgba(16, 19, 25, .12);
  padding: 6px; z-index: 20;
}
/* Ссылки списка — с приоритетом над общими правилами .шапка-меню a
   (те задают отступ 17px 0 и подчёркивание активного пункта). */
.шапка-меню .меню-задачи-лист a {
  padding: 10px 12px; border-radius: 9px;
  color: var(--text); text-decoration: none;
  font-size: var(--fs-13); font-weight: 600;
}
.шапка-меню .меню-задачи-лист a:hover { background: var(--bg-2); color: var(--text); }
.шапка-меню .меню-задачи-лист a[aria-current="page"] { color: var(--accent); }
.шапка-меню .меню-задачи-лист a[aria-current="page"]::after { content: none; }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.кнопка {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h-btn);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: 700;
  text-decoration: none;
}

.кнопка:hover { background: var(--bg-2); }

.кнопка.главная {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-on-accent);
}

.кнопка.главная:hover { background: var(--accent-2); border-color: var(--accent-2); }

.кнопки { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Первый экран ────────────────────────────────────────────────────── */
.экран {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 44px;
}

.экран-текст { display: flex; flex-direction: column; gap: 16px; }

/* ── Полосы разделов ─────────────────────────────────────────────────── */
.полоса {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Полоса на цветном фоне тянется во всю ширину, но её содержимое обязано
   стоять на той же вертикали, что и в обычной полосе. Ширина здесь без полей
   (1100 − 24 × 2), иначе левый край текста скачет на 24 px через всю страницу. */
.тихая { background: var(--bg-2); max-width: none; }
.тихая > * { max-width: 1052px; width: 100%; margin-left: auto; margin-right: auto; }

/* ── Кадры продукта ──────────────────────────────────────────────────── */
.кадр { margin: 0; }

.кадр img {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
}

.кадр figcaption {
  margin-top: 8px;
  font-size: var(--fs-12);
  color: var(--muted);
}

.кадр.широкий { margin-top: 8px; }

/* Панель живёт в 460 px и в этой ширине снята. Растянутая на полосу, она
   показывает интерфейс в 2,4 раза крупнее сайта — чужая типографика посреди
   страницы. Поэтому вертикальные кадры стоят в своём размере, по центру. */
.кадр.узкий { margin-left: auto; margin-right: auto; max-width: 460px; }
.кадр.узкий img { width: 100%; }

/* Текст рядом с вертикальным кадром: две колонки, рамка стоит в своей ширине
   (см. выше — вертикаль не растягиваем). На телефоне колонки складываются. */
.раскладка { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 44px; align-items: center; }
.раскладка > div { display: flex; flex-direction: column; gap: 14px; }
.раскладка .кадр.узкий { max-width: 340px; margin: 0; }
@media (max-width: 720px) {
  .раскладка { grid-template-columns: 1fr; gap: 24px; }
  .раскладка .кадр.узкий { margin: 0 auto; }
}

/* ── Списки возможностей ─────────────────────────────────────────────── */
.ярлыки {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ярлыки li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: var(--fs-13);
  font-weight: 600;
}

.правила {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.правила li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--card);
  font-size: var(--fs-14);
}

/* ── Шаги, роли, виды ────────────────────────────────────────────────── */
.шаги {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: шаг;
}

.шаги li {
  counter-increment: шаг;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.шаги li::before {
  content: counter(шаг);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent-3);
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 800;
}

.шаги b { font-size: var(--fs-15); font-weight: 720; }
.шаги span { font-size: var(--fs-13); color: var(--muted); }

.роли, .виды {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.роли article, .виды article {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.роли b, .виды b { font-size: var(--fs-15); font-weight: 720; }
.роли span, .виды span { font-size: var(--fs-13); color: var(--muted); }

/* ── Вопросы ─────────────────────────────────────────────────────────── */
.вопросы { display: grid; gap: 8px; }

.вопросы details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px 14px;
}

.вопросы summary {
  cursor: pointer;
  font-size: var(--fs-15);
  font-weight: 700;
  min-height: 24px;
}

.вопросы details p {
  margin-top: 8px;
  font-size: var(--fs-14);
  color: var(--muted);
  max-width: 74ch;
}

/* ── Цены ────────────────────────────────────────────────────────────── */
.тарифы {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.тариф {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.тариф.главный { border-color: var(--accent); }

.тариф-имя {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-15);
  font-weight: 720;
}

.метка {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-3);
  color: var(--accent);
  font-size: var(--fs-12);
  font-weight: 700;
}

.метка.тихая { background: var(--bg-2); color: var(--muted); }

.цена { font-size: var(--fs-26); font-weight: 800; letter-spacing: -0.02em; }
.тариф-под { font-size: var(--fs-13); color: var(--muted); }

.тариф ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.тариф li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-13);
}

.тариф li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

/* ── Подвал ──────────────────────────────────────────────────────────── */
.подвал {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
  font-size: var(--fs-13);
  color: var(--muted);
}
.подвал-строка {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}
.подвал-строка.низ {
  padding-top: 16px;
}
.подвал-меню { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.знак.малый { font-size: var(--fs-14); font-weight: 720; gap: 8px; }
.знак.малый img { border-radius: 6px; }

/* ── Узкие экраны ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .экран { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .шапка-меню { display: none; }
}

@media (max-width: 560px) {
  h1 { font-size: var(--fs-20); }
  .экран, .полоса, .шапка-нутро { padding-left: 16px; padding-right: 16px; }
  .кнопки .кнопка { flex: 1 1 100%; }
}

/* ── Правовые страницы ───────────────────────────────────────────────── */
/* Документ читают одной колонкой, поэтому строка короче лендинговой:
   длинная строка юридического текста теряется на середине. */
.документ { max-width: 820px; gap: 12px; }
.документ h2 { margin-top: 20px; }
.документ p { font-size: var(--fs-14); max-width: 74ch; }
.документ .правила li { font-size: var(--fs-14); }
.документ a { color: var(--accent); }

.врезка {
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--card);
}

/* Врезка о том, чего в программе ещё нет: читатель должен отличить её
   от действующих условий, иначе черновик прочтут как обещание. */
.врезка.тревога { border-left-color: var(--warn, var(--accent)); background: var(--bg-2); }

/* Незаполненный реквизит виден как пропуск, а не выглядит готовым текстом. */
/* Без внутренних полей: с ними точка после пропуска отрывается от текста. */
.пропуск {
  border-bottom: 1px dashed var(--line-strong);
  color: var(--muted);
}

.подвал a { color: var(--muted); }
.подвал a:hover { color: var(--text); }

/* ── Активный пункт меню ─────────────────────────────────────────────── */
.шапка-меню a[aria-current="page"] { color: var(--text); font-weight: 640; }

/* ── Заголовок отдельной страницы ────────────────────────────────────── */
/* На внутренней странице первый экран — не геройский блок, а короткая
   шапка: H1 и лид. Нижнего отступа меньше, чтобы контент шёл следом, а не
   висел в пустоте — именно «пустоту» владелец и называл непрофессиональной. */
.полоса.заголовок-страницы { padding-bottom: 8px; gap: 12px; }
.полоса.заголовок-страницы h1 { font-size: var(--fs-26); line-height: 1.15; max-width: 20ch; }
.полоса.заголовок-страницы .лид { max-width: 70ch; }

/* ── Карточки умений на главной ──────────────────────────────────────── */
/* Явные четыре колонки, а не auto-fit: одиночная карточка в ряду — та самая
   несимметрия из чеклиста. На средней ширине 2×2, на узкой — колонкой. */
.карты-умений {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.карта {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.карта:hover { border-color: var(--accent); transform: translateY(-2px); }
.карта b { font-size: var(--fs-15); font-weight: 720; color: var(--text); }
.карта span { font-size: var(--fs-13); color: var(--muted); }

/* ── Полоса-призыв ───────────────────────────────────────────────────── */
.полоса.призыв { align-items: center; text-align: center; gap: 14px; }
.полоса.призыв .лид { max-width: 54ch; }
.полоса.призыв .кнопки { justify-content: center; }

@media (max-width: 900px) {
  .карты-умений { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .карты-умений { grid-template-columns: minmax(0, 1fr); }
  .подвал-строка { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Перерисовка лендинга по референсу владельца (07.09.2026).
   Всё на токенах бренда: синий #2F6BFF (--accent), мягкий #F2F6FF
   (--accent-soft), нейтрали. Пёстрых цветов из макета не вводим — сайт не
   должен выглядеть другим продуктом. Кегли базовой шкалы 12–26; для
   геройского заголовка добавлен сайт-локальный display-размер (общие токены
   не тронуты).
   ══════════════════════════════════════════════════════════════════════════ */

svg { display: block; }
.и { width: 20px; height: 20px; }
.стрелка-м { width: 16px; height: 16px; }
.кнопка { gap: 7px; }
.кнопка svg { flex: none; }

/* ── Призрачная кнопка и действия шапки ───────────────────────────────── */
.кнопка.призрак { background: var(--card); border-color: var(--line); color: var(--text); }
.кнопка.призрак:hover { background: var(--bg-2); }
.шапка-действия { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Переключатель темы — квадратная кнопка под высоту .кнопка (38px, как в сторже
   высот). Показываем иконку той темы, в которую переключит клик: в светлой —
   луна, в тёмной — солнце. */
.тема-переключатель {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--h-btn); height: var(--h-btn); padding: 0; flex: none;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--text); cursor: pointer;
  font-size: var(--fs-13); /* иначе UA-кегль кнопки 13.3px выпадает из шкалы */
}
.тема-переключатель:hover { background: var(--bg-2); }
.тема-переключатель .и-тема { width: 18px; height: 18px; }
.тема-переключатель .солнце { display: none; }
html[data-theme="dark"] .тема-переключатель .луна { display: none; }
html[data-theme="dark"] .тема-переключатель .солнце { display: inline-flex; }

/* Активный пункт меню — синий с подчёркиванием, как в референсе. */
.шапка-меню a { position: relative; padding: 17px 0; }
.шапка-меню a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.шапка-меню a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
}

/* ── Пилюля-надзаголовок и акцент в H1 ────────────────────────────────── */
.пилюля {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-13); font-weight: 700; width: fit-content;
}
.акцент { color: var(--accent); }

/* ── Геройский экран ──────────────────────────────────────────────────── */
.экран.герой { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 40px; max-width: 1120px; padding-top: 76px; padding-bottom: 72px; }
.экран.герой h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; font-weight: 800; }
.экран.герой .лид { font-size: 16px; max-width: 52ch; }

.признаки {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0;
  padding: 0; list-style: none; font-size: var(--fs-13); color: var(--muted);
}
.признаки li { display: inline-flex; align-items: center; gap: 6px; }
.и-галка { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ── Составной кадр героя ─────────────────────────────────────────────── */
.композит { position: relative; width: 100%; max-width: 560px; margin-left: auto; padding-right: 6px; }
.браузер {
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  box-shadow: 0 12px 34px rgba(16, 19, 25, .09); overflow: hidden;
}
.браузер-бар {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.точки { display: inline-flex; gap: 5px; }
.точки i { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); opacity: .45; }
.адрес {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); font-size: var(--fs-12); color: var(--muted);
}
.и-адрес { width: 12px; height: 12px; }

.браузер-тело { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 14px; }
.мини-меню { display: flex; flex-direction: column; gap: 5px; }
.мм-пункт {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 5px 8px; border-radius: 8px; font-size: var(--fs-12); color: var(--muted);
}
.мм-пункт em { font-style: normal; opacity: .55; }
.мм-пункт.активн { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.мм-пункт.активн em { opacity: .8; }

.мини-товары { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.товар { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.товар-фото { height: 44px; border-radius: 8px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-2)); }
.товар b { font-size: var(--fs-12); font-weight: 700; line-height: 1.25; }
.цена-т { font-size: var(--fs-13); font-weight: 800; }

.мини-таблица { grid-column: 1 / -1; width: 100%; border-collapse: collapse; font-size: 11px; }
.мини-таблица th { text-align: left; font-weight: 700; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.мини-таблица td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.мини-таблица tr:last-child td { border-bottom: 0; }
.мини-таблица .есть { color: #2E7D32; }
.мини-таблица .нет { color: var(--warn); }

.панель-плавает {
  position: absolute; top: 14px; right: -16px; width: 222px;
  display: flex; flex-direction: column; gap: 8px; padding: 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(16, 19, 25, .18);
}
.панель-шапка { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.панель-точки { display: inline-flex; gap: 4px; }
.панель-точки i { width: 5px; height: 5px; border-radius: 999px; background: var(--line-strong); opacity: .4; }
.панель-табы { display: flex; gap: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.панель-табы em { font-style: normal; font-size: 11px; color: var(--muted); position: relative; padding-bottom: 6px; margin-bottom: -7px; }
.панель-табы em.активн { color: var(--accent); font-weight: 700; }
.панель-табы em.активн::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.панель-задача {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-12);
}
.панель-задача span { flex: 1; }
.и-задача { width: 16px; height: 16px; color: var(--ink-on-accent); background: var(--accent); border-radius: 6px; padding: 4px; flex: none; }
.панель-шаги { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.панель-шаги li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text); }
.панель-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; border-radius: 8px; background: var(--accent); color: var(--ink-on-accent);
  font-size: var(--fs-12); font-weight: 700;
}
.и-мелкая { width: 15px; height: 15px; }
.аннотация {
  position: absolute; left: 0; right: 0; bottom: -36px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: var(--fs-13); font-weight: 700; color: var(--accent);
  text-align: center; line-height: 1.3;
}
.ан-стрелка { width: 22px; height: 22px; opacity: .92; }

/* ── Центрированные секции ────────────────────────────────────────────── */
.полоса.центр { align-items: center; text-align: center; gap: 12px; }
.полоса.центр h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.центр-лид { max-width: 62ch; margin: 0 auto 12px; }

/* ── Сетка карточек 3×2 (роли и типы задач) ───────────────────────────── */
.сетка3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.сетка4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }
.сетка3.два-в-ряд { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; }
.сетка3 .карта, .сетка4 .карта { text-align: left; gap: 9px; padding: 20px; }
.плитка {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: none;
}
.плитка svg { width: 22px; height: 22px; }
.карта-текст { font-size: var(--fs-13); color: var(--muted); }
.карта-теги { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 8px 0 0; list-style: none; }
.карта-теги li { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size: var(--fs-12); color: var(--muted); font-weight: 600; }
.карта .пример {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  color: var(--accent); font-size: var(--fs-13); font-weight: 600;
}
/* Мини-снимок результата в карточке роли — вёрстка как у таблицы продукта, не
   фотосток. Прижат к низу карточки (margin-top:auto) — высоты карточек ровные. */
.роль-мокап {
  margin-top: auto; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); overflow: hidden;
}
.рм-шапка {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--line); background: var(--card);
}
.рм-точки { display: inline-flex; gap: 3px; }
.рм-точки i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.рм-имя { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted); }
.рм-имя .и-мелкая { width: 13px; height: 13px; }
.рм-таблица { width: 100%; border-collapse: collapse; font-size: 11px; }
.рм-таблица th { text-align: left; font-weight: 700; color: var(--muted); padding: 5px 10px; border-bottom: 1px solid var(--line); }
.рм-таблица td { padding: 5px 10px; border-bottom: 1px solid var(--line); color: var(--text); }
.рм-таблица tr:last-child td { border-bottom: 0; }
.рм-таблица td.есть { color: #2E7D32; font-weight: 600; }
.рм-таблица td.нет { color: var(--warn); font-weight: 600; }

/* ── Популярные сценарии ──────────────────────────────────────────────── */
.сценарии { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; text-align: left; }
.сценарий { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.сценарий-шапка { display: flex; align-items: center; gap: 12px; }
.сценарий-шапка b { font-size: var(--fs-15); font-weight: 720; }
.сц-строка { display: flex; flex-direction: column; gap: 3px; }
.сц-строка > span:last-child { font-size: var(--fs-13); color: var(--muted); }
.сц-метка { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 700; color: var(--muted); }
.сц-метка.результат { color: var(--accent); }
.и-мелкая { flex: none; }

/* ── Итоги (результат команды) ────────────────────────────────────────── */
.итоги { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; text-align: left; }
.итог { display: flex; flex-direction: column; gap: 9px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.итог b { font-size: var(--fs-15); font-weight: 720; line-height: 1.3; min-height: 2.6em; }

/* ── Цветная полоса-призыв ────────────────────────────────────────────── */
.полоса.призыв.цветная { background: var(--accent-soft); max-width: none; padding: 56px 24px; }
.полоса.призыв.цветная > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.полоса.призыв.цветная .пилюля { align-self: center; background: var(--card); }

/* ── Футер колонками ──────────────────────────────────────────────────── */
.подвал-верх { display: grid; grid-template-columns: 1.2fr 2.8fr; gap: 32px; }
.подвал-бренд { display: flex; flex-direction: column; gap: 10px; }
.подвал-слоган { font-size: var(--fs-13); color: var(--muted); line-height: 1.5; }
.подвал-сетка { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.подвал-колонка { display: flex; flex-direction: column; gap: 8px; }
.подвал-titl { font-size: var(--fs-13); font-weight: 700; color: var(--text); margin-bottom: 2px; }
.подвал-колонка a { font-size: var(--fs-13); color: var(--muted); text-decoration: none; }
.подвал-колонка a:hover { color: var(--text); }

/* ── Адаптив перерисовки ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .сетка3 { grid-template-columns: repeat(2, 1fr); }
  .сценарии { grid-template-columns: 1fr; }
  .итоги { grid-template-columns: repeat(2, 1fr); }
  .подвал-верх { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  /* Геройский блок специфичнее общего .экран, поэтому его одноколоночный
     режим нужно задать явно — иначе на телефоне он остаётся в две колонки,
     макет вылезает за край и перекрывает заголовок. */
  .экран.герой { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 44px; }
  .композит { margin: 4px auto 0; max-width: 460px; }
  .панель-плавает { position: static; width: 100%; margin-top: 14px; right: auto; }
  .аннотация { display: none; }
}
@media (max-width: 560px) {
  .сетка3, .итоги { grid-template-columns: 1fr; }
  .подвал-сетка { grid-template-columns: 1fr 1fr; }
  .мини-товары { grid-template-columns: 1fr; }
}

/* ── «Как работает»: поток-герой, 4 шага, пример, FAQ ─────────────────── */
.композит.поток { max-width: 344px; display: flex; flex-direction: column; gap: 4px; }
.поток-шаг { display: flex; gap: 12px; align-items: flex-start; }
.поток-ном {
  flex: none; width: 26px; height: 26px; margin-top: 4px; border-radius: 999px;
  background: var(--accent); color: var(--ink-on-accent);
  display: grid; place-items: center; font-size: var(--fs-13); font-weight: 800;
}
.поток-тело { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.поток-визуал {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  overflow: hidden; box-shadow: 0 6px 18px rgba(16, 19, 25, .06);
}
.поток-подпись { display: flex; flex-direction: column; }
.поток-подпись b { font-size: var(--fs-13); font-weight: 720; }
.поток-подпись em { font-style: normal; font-size: var(--fs-12); color: var(--muted); }
.поток-стрелка { padding-left: 7px; color: var(--line-strong); }
.и-вниз { width: 16px; height: 16px; transform: rotate(90deg); }

.браузер-бар.мелкий { padding: 7px 10px; }
.браузер-бар.мелкий .адрес { font-size: 11px; padding: 3px 8px; }
.поток-товары { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; }
.товар-строка { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.товар-строка span { flex: 1; color: var(--text); }
.товар-строка b { font-weight: 800; }
.тчк { flex: none; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-2)); }
.файл-имя { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }

.панель-мини {
  padding: 11px; display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  box-shadow: 0 6px 18px rgba(16, 19, 25, .06);
}
.поток-визуал.панель-мини { padding: 11px; }
.поток-визуал .мини-таблица { padding: 4px 6px 6px; }

/* 4 шага */
.шаги.четыре { grid-template-columns: repeat(4, 1fr); text-align: left; }

/* Пример задачи */
.пример-блок {
  display: grid; grid-template-columns: minmax(0, 300px) auto minmax(0, 1fr);
  gap: 18px; align-items: center; width: 100%; max-width: 920px; margin: 8px auto 0; text-align: left;
}
.пример-стрелка { color: var(--line-strong); display: grid; place-items: center; }
.пример-стрелка svg { width: 26px; height: 26px; }
.признаки-мелкие { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.признаки-мелкие li { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* FAQ в две колонки */
.вопросы.два { grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 1000px; margin: 0 auto; text-align: left; }

@media (max-width: 980px) {
  .сетка4 { grid-template-columns: repeat(2, 1fr); }
  .шаги.четыре { grid-template-columns: repeat(2, 1fr); }
  .вопросы.два { grid-template-columns: 1fr; }
  .пример-блок { grid-template-columns: 1fr; justify-items: center; }
  .пример-стрелка svg { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .сетка4, .шаги.четыре { grid-template-columns: 1fr; }
}

/* ── Нижнее меню-таб-бар (телефон, app-стиль) ─────────────────────────── */
/* На десктопе скрыто. На узком экране — фиксированная нижняя панель, а сайт
   ощущается как приложение: верх залипает, низ — вкладки с иконками. */
.нижнее-меню { display: none; }

@media (max-width: 900px) {
  /* Верхняя панель компактнее: призрак-кнопка уходит в «Ещё», CTA не рвётся. */
  .шапка-действия .призрак { display: none; }
  /* «Войти» — исключение: владельцу нужны обе кнопки вверху и на телефоне.
     Компактный вид и убранная стрелка у «Установить» освобождают место. */
  .шапка-действия .вход-кнопка { display: inline-flex; padding: 0 12px; }
  .шапка-действия { gap: 8px; }
  .шапка-действия .кнопка.главная { padding: 0 12px; }
  .шапка-действия .кнопка.главная .стрелка-м { display: none; }
  .кнопка.главная { white-space: nowrap; }

  /* Утилитарная полоса и выпадающее меню категорий — только для десктопа;
     на телефоне их роль берёт нижнее меню (app-стиль) и подвал. */
  .шапка-верх { display: none; }
  .меню-задачи { display: none; }

  /* Запас снизу, чтобы фиксированный бар не накрывал подвал. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  .нижнее-меню {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--card-solid); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(16, 19, 25, .07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .нижнее-меню .таб {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; min-width: 0;
    color: var(--muted); text-decoration: none;
    font-size: 10px; font-weight: 600; line-height: 1.1; text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .нижнее-меню .таб span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .таб-и { width: 22px; height: 22px; }
  .нижнее-меню .таб[aria-current="page"],
  .таб-ещё.активна > .таб { color: var(--accent); }

  /* «Ещё» — всплывающий лист вверх, без JS (details/summary). */
  .таб-ещё { position: relative; }
  .таб-ещё > summary { list-style: none; cursor: pointer; height: 100%; }
  .таб-ещё > summary::-webkit-details-marker { display: none; }
  .таб-ещё .ещё-лист {
    position: absolute; right: 8px; bottom: calc(100% + 8px);
    min-width: 200px; display: flex; flex-direction: column;
    background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 16px 44px rgba(16, 19, 25, .18); overflow: hidden;
  }
  .таб-ещё .ещё-лист a {
    padding: 13px 16px; color: var(--text); text-decoration: none;
    font-size: var(--fs-14); font-weight: 600; border-bottom: 1px solid var(--line);
  }
  .таб-ещё .ещё-лист a:last-child { border-bottom: 0; }
  .таб-ещё .ещё-лист a:active { background: var(--bg-2); }
}

/* ── Лента «Что нового» ───────────────────────────────────────────────── */
.лента { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 780px; }
.веха {
  display: grid; grid-template-columns: 168px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.лента .веха:last-child { border-bottom: 0; }
.веха-дата { color: var(--muted); font-size: var(--fs-13); font-weight: 600; }
.веха-тело { display: flex; flex-direction: column; gap: 5px; }
.веха-тело b { font-size: var(--fs-15); font-weight: 720; }
.веха-тело span { color: var(--muted); font-size: var(--fs-14); }
@media (max-width: 560px) {
  .веха { grid-template-columns: 1fr; gap: 5px; }
}

/* ── Цвет и глубина героя («эффектнее», без внешних картинок) ─────────── */
/* Верхнее свечение уходит ЗА липкую шапку: она полупрозрачна (blur + 92% card)
   и пропускает мягкий цвет сквозь себя — под меню больше нет резкой линии. */
body { position: relative; }
body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 560px;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 74% at 84% -6%, rgba(47, 107, 255, .16), transparent 68%),
    radial-gradient(52% 60% at 8% 0%, rgba(139, 92, 246, .11), transparent 70%);
}
.экран.герой { position: relative; }
/* Мягкое цветное свечение за композитом — объём и краски справа. */
.композит::before {
  content: "";
  position: absolute; inset: -10% -8% -14% -12%; z-index: 0;
  background:
    radial-gradient(42% 46% at 80% 16%, rgba(47, 107, 255, .28), transparent 70%),
    radial-gradient(46% 50% at 26% 90%, rgba(139, 92, 246, .20), transparent 72%),
    radial-gradient(40% 42% at 10% 22%, rgba(16, 185, 129, .16), transparent 70%);
  filter: blur(30px); border-radius: 44px;
}
/* На телефоне свечение выходило за правый край экрана (-8% от ширины блока —
   это 29 px при ширине 358) и давало горизонтальную прокрутку всей страницы:
   палец сдвигал вёрстку вбок на пустоту. На широком экране запас по бокам это
   прятал, потому дефект и жил. Вертикальный разлёт оставляем — он вверх-вниз. */
@media (max-width: 900px) {
  .композит::before { inset: -10% 0 -14% 0; }
}
/* Браузер поднимаем над свечением (был в потоке — нужен свой контекст).
   У панели и аннотации position НЕ трогаем (они absolute), только слой. */
.браузер { position: relative; z-index: 1; }
.панель-плавает { z-index: 2; }
.аннотация { z-index: 2; }
/* Карточки глубже — ближе к «фото», а не плоскому рисунку. */
.браузер { box-shadow: 0 26px 64px rgba(16, 19, 25, .18), 0 4px 14px rgba(16, 19, 25, .08); }
.панель-плавает { box-shadow: 0 28px 68px rgba(47, 107, 255, .22), 0 6px 18px rgba(16, 19, 25, .12); }
/* Цветные «фото» товаров вместо серых плашек. */
.мини-товары .товар:nth-child(1) .товар-фото { background: linear-gradient(135deg, #5B8CFF, #9C6BFF); }
.мини-товары .товар:nth-child(2) .товар-фото { background: linear-gradient(135deg, #22B07A, #57C7E6); }
.товар-фото { position: relative; overflow: hidden; }
.товар-фото::after {
  content: ""; position: absolute; right: 6px; bottom: 6px;
  width: 16px; height: 16px; border-radius: 5px; background: rgba(255, 255, 255, .4);
}
/* Цвет в таблице: цена акцентом, наличие — зелёной пилюлей. */
.цена-т { color: var(--accent); }
.мини-таблица td.есть {
  color: #12855a; font-weight: 700;
}
.мини-таблица td.нет { color: #c0392b; font-weight: 600; }
/* Активная категория — с цветной риской слева. */
.мм-пункт.активн { box-shadow: inset 3px 0 0 var(--accent); }

/* ── Больше цвета по сайту: цветная CTA-полоса ────────────────────────── */
.полоса.призыв.цветная {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 16%, var(--card)),
    color-mix(in srgb, #8b5cf6 15%, var(--card)));
}

/* Фото-персоны и секционные сток-фото убраны (09.09): смотрелись дешёво и
   отличали лендинг от чистого приложения /app/. Роли — снова icon-карточки,
   как в приложении; UI показывают честные мокапы (композит героя, поток
   «Как работает», реальные кадры окна). */