/* =============================================================
   LOVAI — светлая тема, дизайн-слой.
   Подключается ПОСЛЕ основных стилей и задаёт то, чем светлый
   сайт держится вместо темноты: типографика, ритм, сетка, границы.
   Правило: цвета берём из переменных, здесь только структура и вес.
   ============================================================= */

/* ---------- 0. Холст: тонированный, а не белый ----------
   Чистый белый — главная причина и «блеклости», и того, что фирменный узор
   (голубовато-серые линии #9fb4c8) на нём либо исчезал, либо царапал глаз.
   Берём тонированный холст, а карточки оставляем чисто белыми: тогда узор
   читается как фактура бумаги, а белые блоки визуально всплывают над ней.
   Приём дорогих сайтов: тонированный фон + белые карточки = глубина. */
:root{
  --bg:#C3CAD2;              /* холст = светлый алюминий, как корпус макбука (решение Анжея 07.08.2026).
                                Путь был #E9EEF4 → #DCE3EC → #D5DDE8 → #C3CAD2 —
                                белые карточки должны читаться карточками */
  --bg2:#F2F5F9;             /* подложки светлее холста */
  --p-top:#FFFFFF; --p-bot:#F8FAFC;
  --shell:#FFFFFF;
  /* Приглушённый серый был #616B7A: на тонированном холсте давал контраст 4.45
     при норме 4.5 — то есть формально не проходил. Затемнён до 4.9. */
  --mute:#4A525E;           /* на шаг темнее прежнего #5B6472: холст стал глубже,
                                и мелкая подпись «+ €600/мес» просела до 4.45 при норме 4.5 */
}
body{ background:var(--bg) }

/* Фирменный узор возвращён. На тёмном он шёл поверх черноты, здесь — поверх
   тонированного холста, поэтому виден мягко и не спорит с текстом. */
/* Узор-обои (mtn-pattern.svg) выключен 07.08.2026 по решению Анжея: на светлом
   холсте бледные контуры гор и облаков читались как каракули и делали страницу
   сырой. Разметка `.wallpaper` осталась — вернуть можно одной строкой. */
/* Узор-обои ВЕРНУЛИ 09.08.2026 (решение Анжея: «давал объём, было круто»).
   На светлом холсте он читался каракулями и потому был выключен; на тёмном
   Midnight те же линии работают фактурой. Держим мягко: 22% и без multiply —
   на тёмном режим наложения съедал бы рисунок целиком. */
/* ФОН — ТЕХНИЧЕСКАЯ ДОКУМЕНТАЦИЯ, ТРИ СЛОЯ (09.08.2026).
   Путь был такой. Сначала стояли горы, ёлки, облака и солнышки — Анжей: «какие-то
   детские, можно по теме айти». Заменили на миллиметровку — «выглядит как тетрадь
   для математики»: любая равномерная сетка читается тетрадью, сколько её ни
   притеняй. Тогда сетку убрали совсем, а взамен собрали три слоя разного масштаба:

   1. blueprint-icons.svg   (760px)  — значки инструментов: окно браузера, терминал,
                                       микросхема, база данных, сервер, курсор.
                                       Это «картинки, как были», только со стола
                                       разработчика. Солнышек и зверей тут быть
                                       не должно — с них всё и началось.
   2. blueprint-circuit.svg (1100px) — монтажная схема: дорожки под 45°, контактные
                                       площадки, микросхемы с выводами, шины.
   3. blueprint-marks.svg   (1500px) — чертёжные знаки: размерные линии со стрелками,
                                       оси, радиусы, сечения, угловые метки рамки.

   Три разных масштаба и дают объём: мелкое читается передним планом, крупное —
   дальним. Все три собраны скриптом tools/make-blueprint.py с фиксированным зерном
   (руками не править: пересборка затрёт).

   ⚠️ Прозрачность живёт ТОЛЬКО здесь. Если задать opacity внутри SVG, она
   перемножится с этой — так уже теряли узор целиком.
   ⚠️ Имена файлов новые (были mtn-pattern-dark.svg и contours-dark.svg): в
   public/_headers у SVG нет no-cache, и при замене содержимого браузеры ещё
   неделю отдавали бы старый рисунок. Менять узор — значит менять имя файла. */
html::before, .wallpaper{
  display:block !important; mix-blend-mode:normal !important;
  background-image:url(/assets/blueprint-icons.svg), url(/assets/blueprint-circuit.svg), url(/assets/blueprint-marks.svg) !important;
  background-size:760px 760px, 1100px 1100px, 1500px 1500px !important;
  background-position:0 0, 0 0, center top !important;
  background-repeat:repeat, repeat, repeat !important;
  /* На почти чёрном холсте прежние 34% давали еле различимый рисунок, поэтому
     чуть ярче. Маска гасит узор в центральной колонке, где идёт текст, и
     оставляет его по краям — ради ощущения объёма, а не ради самого рисунка. */
  opacity:.46 !important;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.14) 26%, rgba(0,0,0,.14) 74%, #000 100%);
  mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.14) 26%, rgba(0,0,0,.14) 74%, #000 100%);
}
/* На узком экране колонки нет — текст занимает всю ширину, поэтому узор там
   тише и без маски (маска на 390px съела бы его целиком). */
@media (max-width:900px){
  html::before, .wallpaper{ opacity:.30 !important; -webkit-mask-image:none; mask-image:none }
}

/* Подсветка страницы — в тон холсту, без серой мути сверху */
body::before{ background:
  radial-gradient(120% 80% at 50% -8%, #F4F7FA 0%, var(--bg) 58%),
  radial-gradient(90% 60% at 88% 6%, rgba(168,95,40,.06), transparent 60%),
  radial-gradient(70% 60% at 4% 28%, rgba(74,91,122,.05), transparent 60%) }

/* ---------- 1. Типографика: крупнее, плотнее, с характером ----------
   На тёмном фоне текст «звучал» за счёт контраста с чернотой. На белом
   его должен держать размер и плотность, иначе страница выглядит худой. */
h1, .h1{
  font-size:clamp(2.7rem, 6.2vw, 4.7rem);
  line-height:.98; letter-spacing:-.032em; font-weight:700;
}
h2, .s-head h2{
  font-size:clamp(1.95rem, 3.9vw, 3.05rem);
  line-height:1.04; letter-spacing:-.028em; font-weight:700;
}
h3{ font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.2; letter-spacing:-.015em }
/* Длина строки: 65–75 знаков читается лучше всего. Было во всю ширину. */
.lead, .s-head p, .sit-p, .faq-a{ max-width:64ch }
.lead{ font-size:clamp(1.02rem,1.25vw,1.16rem); line-height:1.62; color:var(--soft) }
p{ line-height:1.65 }

/* ---------- 2. Ритм и глубина ----------
   Фоновые фотографии ВОЗВРАЩЕНЫ: они дают странице объём, которого на плоском
   белом нет. Раньше они были задавлены вуалью 96% и читались грязным призраком.
   Теперь вуаль 88% в середине и плотная по краям — фото видно, а текст на нём
   остаётся контрастным (тёмный текст на такой подложке даёт ~11:1 при норме 4.5).
   Глубина строится слоями: фото → полупрозрачная вуаль → белые карточки с тенью. */
/* .contact сюда добавлена 07.08.2026: у неё был свой отступ 140px из core.css
   и index.html — закрывающая секция дышала в 1,5 раза шире всех остальных. */
.band, .contact{ padding-top:96px; padding-bottom:96px; position:relative }
/* Один и тот же узор «надпись-эйбрау → заголовок» был набран тремя разными
   отступами (32 / 22 / 18px) в разных секциях. Сводим к одному. */
/* ⚠️ Правило било мимо: у .eyebrow остаётся собственный margin-bottom:14px,
   и вместе с margin-top:18px у заголовка зазор выходил 32px на страницах-продуктах
   против 18px на главной. Гасим отступ у самой надписи с нужным весом. */
.s-head .eyebrow, .s-head > .eyebrow{ margin-bottom:0 !important }
.eyebrow + h2, .s-head .eyebrow + h2, .price-band .eyebrow + div{ margin-top:18px }
/* один отступ под шапкой секции на всём сайте: было 38 на главной и 44 у остальных */
.s-head{ margin-bottom:44px }
/* Фотоподложки секций УБРАНЫ 07.08.2026 (решение Анжея: «выглядит сыро»).
   Были фото под вуалью 88% у #services/#packages/#process/#why/#contact.
   Почему не «сделать ярче»: чем меньше вуаль, тем хуже читается тёмный текст
   поверх, и пришлось бы класть тёмную вуаль — то есть спорить со светлой темой.
   Фотографии остаются там, где они содержание (превью работ), а не обои.
   Файлы bg-*.jpg лежат в /assets — если решим вернуть, правило в истории git. */
#statband{ padding-top:56px; padding-bottom:56px; background:var(--graphite); color:#EEF3F8 }
#statband .k, #statband .v, #statband span, #statband div{ color:inherit }

/* ---------- 3. Заголовок секции: редакционная линейка ----------
   Тонкая линия под шапкой секции — приём печатных изданий. Даёт
   ощущение порядка там, где раньше работала темнота. */
.s-head{ margin-bottom:44px; padding-bottom:22px; border-bottom:1px solid rgba(14,20,32,.10) }
.s-head .eyebrow{ margin-bottom:14px }
/* Было .68rem с разрядкой .26em — это 10,9px, растащенные пробелами так,
   что слово перестаёт собираться в слово. Крупнее и плотнее. */
.eyebrow{ font-size:.78rem; letter-spacing:.15em; font-weight:600; color:var(--gold-dp) }

/* ---------- 4. Карточки: настоящие границы вместо намёков ----------
   На тёмном карточку рисовала подсветка. На белом нужна честная рамка,
   иначе блоки «плавают» без опоры. */
.card, .pkg, .sit, .faq-i, .cfg, .cfg-total, .work-card, .case{
  background:var(--shell);
  border:1px solid rgba(14,20,32,.10);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -18px rgba(16,24,40,.16);
  transition:border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
a.card:hover, .sit:hover, .pkg:hover, .work-card:hover, .case:hover{
  border-color:rgba(14,20,32,.24);
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 18px 40px -20px rgba(16,24,40,.22);
}
/* Кликабельное должно выглядеть кликабельным */
a.card, .sit[data-go], .work-card, .case, .hub-t, .faq-i summary{ cursor:pointer }

/* ---------- 5. Цифры-рубрикаторы: крупные и спокойные ----------
   01 02 03 — это навигация по смыслу, а не украшение. */
.sit-n, .proc-n, .case-n{
  font-family:"Space Grotesk","Manrope",system-ui,sans-serif; font-weight:700;
  font-size:1.05rem; letter-spacing:.06em; color:var(--gold-dp);
}

/* ---------- 6. Кнопки ----------
   Главная — графит (цвет шапки и подвала). Вторая — контур того же
   графита, при наведении заливается. Одна логика на весь сайт. */
.btn{ transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease) }
.btn-pri{ background:var(--graphite); color:#F2F5F8; border:1px solid var(--graphite) }
.btn-pri:hover{ background:#2A323C; border-color:#2A323C }
/* .btn-gh удалён 07.08.2026: в разметке сайта такого класса нет — везде .btn-ghost */
/* Внутри тёмных блоков кнопка-контур должна быть светлой */
.reel-core .btn-ghost, footer .btn-ghost{ color:#EEF3F8; border-color:rgba(238,243,248,.35) }
.reel-core .btn-ghost:hover, footer .btn-ghost:hover{ background:#EEF3F8; color:var(--graphite) }

/* ---------- 7. Доступность: видимый фокус с клавиатуры ----------
   Без этого сайт непроходим для клавиатуры — это требование WCAG. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold-dp); outline-offset:3px; border-radius:6px;
}
.nav a:focus-visible, .nav button:focus-visible, footer a:focus-visible{ outline-color:#F0C79B }

/* ---------- 8. Поля ввода ---------- */
input, textarea, select{
  background:var(--shell); border:1px solid rgba(14,20,32,.16); color:var(--paper); border-radius:10px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, textarea:focus, select:focus{
  border-color:var(--graphite); box-shadow:0 0 0 3px rgba(30,36,44,.08); outline:none;
}
input::placeholder, textarea::placeholder{ color:var(--mute) }

/* ---------- 9. Уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ---------- 10. Конфигуратор: сумма едет с тобой ----------
   Раньше блок с ценой и кнопкой уезжал вверх, пока человек отмечает галочки
   внизу списка — в момент решения он не видел ни суммы, ни кнопки.
   Убирать его нельзя, это продающий узел; прибиваем, как в корзине магазина. */
.cfg-total{
  position:sticky; top:92px; align-self:start;
  background:var(--shell);
  box-shadow:0 2px 6px rgba(16,24,40,.06), 0 24px 48px -28px rgba(16,24,40,.28);
}
@media (max-width:900px){ .cfg-total{ position:static } }

/* ---------- 11. Глубина: карточки лежат НАД фоном, а не растворяются ----------
   Плоские бледные блоки на белом и были причиной ощущения блеклости.
   Плотный белый + честная тень отрывают карточку от фона. */
.card, .pkg, .sit, .cfg, .cfg-total, .faq-i, .work-card, .case{
  background:var(--shell);
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 36px -22px rgba(16,24,40,.26);
}
.sit:hover, .pkg:hover, .work-card:hover, .case:hover, a.card:hover{
  box-shadow:0 2px 6px rgba(16,24,40,.07), 0 26px 52px -24px rgba(16,24,40,.32);
  transform:translateY(-2px);
}
/* Тёмная полоса цифр — акцент-разделитель, добавляет странице вес */
#statband{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }

/* ---------- 12. Мобильные ---------- */
@media (max-width:760px){
  .band, .contact{ padding-top:64px; padding-bottom:64px }
  .s-head{ margin-bottom:30px; padding-bottom:16px }
  body{ font-size:16px }               /* меньше 16px на телефоне не читается */
}

/* ---------- 13. Бегущая строка инструментов ----------
   Была почти нечитаема: светло-серый текст на светлом холсте. */
.marquee{ background:var(--shell); border-top:1px solid rgba(14,20,32,.08); border-bottom:1px solid rgba(14,20,32,.08) }
.mq-item{ color:var(--paper); font-weight:600 }
.mq-item .d{ background:var(--gold-dp) }
.marquee .lbl{ color:var(--mute) }

/* ---------- 14. Перекрытия тёмной темы ----------
   Эти правила спорят с более специфичными правилами исходной тёмной темы.
   Тематический слой имеет право их перекрывать — иначе карточки остаются
   тёмными на светлой странице. */
.card, .pkg, .sit, .faq-i, .cfg, .cfg-total, .work-card, .case,
.sit-card, .proc .step, .pack{ background:var(--shell) !important; color:var(--paper) }
.sit *, .pkg *, .card *, .faq-i *{ color:inherit }
.sit-p, .pkg p, .card p{ color:var(--soft) }

/* =============================================================
   15. КИРИЛЛИЦА
   Space Grotesk, Hanken Grotesk, Instrument Serif и Fraunces физически
   не содержат русских и украинских букв — Google их в этих шрифтах не
   рисовал. Пока их не было, ВЕСЬ русский текст сайта показывался
   системным Arial (заголовки) и Times New Roman (акценты и цены):
   фирменного шрифта на русской версии не было ни одной буквы.
   Теперь в каждый стек добавлены Manrope (гротеск) и Playfair Display
   (антиква) — браузер подставляет их побуквенно, только там, где своих
   глифов нет. Латиница осталась ровно такой, какой была.
   ⚠️ Правя font-family где угодно на сайте — сохранять этих двух
   компаньонов, иначе русская версия снова осыпется в Arial.
   ============================================================= */
/* =============================================================
   16. ПОЛ ЧИТАЕМОСТИ: ни одной надписи мельче 12px
   На сайте жили подписи в 8,6–11px (метки пакетов, ярлыки, подписи полей
   формы, заголовки колонок подвала) — часто ещё и капсом с разрядкой
   .2–.26em. Такой набор не читается ни с монитора, ни с телефона,
   а на кириллице — тем более: буквы у неё в среднем шире латинских,
   и растащенный капс распадается на отдельные знаки.
   Правило: минимум 12px (.75rem), разрядка капса не больше .15em.
   ============================================================= */
.pkg .tier, .svc .num, .pack-top .num, .cfg-ex-tag{ font-size:.78rem; letter-spacing:.1em }
.pkg .pop, .pack .pop{ font-size:.75rem; letter-spacing:.1em }
.soon{ font-size:.75rem; letter-spacing:.06em }
.reel-badge{ font-size:.75rem; letter-spacing:.1em }
.reel-note{ font-size:.75rem; letter-spacing:.15em }
.reel-sound-txt{ font-size:.88rem }
.lf-lbl{ font-size:.76rem; letter-spacing:.1em }
.ft-h, .nav-drop-h, .m-overlay .mo-h{ font-size:.76rem; letter-spacing:.12em }
.marquee .lbl{ font-size:.76rem; letter-spacing:.15em }
.chip{ font-size:.8rem }
.case-id{ font-size:.8rem }
.case-tag{ font-size:.76rem; letter-spacing:.06em }
.pkg .price .f, .pack .price .f, .cfg-sum .cfg-f, .cfg-f{ font-size:.78rem }
.cfg-plabel, .cfg-tlabel, .cfg-ex-h{ font-size:.76rem; letter-spacing:.1em }
.cfg-note{ font-size:.85rem }
.cfg-ex-price small{ font-size:.8rem }
.h-trust li{ font-size:.8rem }
.ft-bottom{ font-size:.84rem }
.lang-select{ font-size:.84rem }
.nf-code{ font-size:.82rem; letter-spacing:.15em }
/* .pv-* внутри тёмных превью-макетов не трогаем: там не текст, а рисунок
   интерфейса — увеличение ломает пропорции макета. */

/* Основной текст: 13,6–14,4px для абзацев мало — это размер сноски,
   а не текста, который человек должен прочитать и понять. */
.svc p, .pkg li, .pkg .tag, .pack .tag{ font-size:.95rem }
.pack li{ font-size:.92rem }
.case p, .step p, .stat .l{ font-size:.96rem }
.metric p, .ft-desc, .ft-col a{ font-size:.94rem }
.lf-alt, .lf-consent, .lf-status, .pkg-custom{ font-size:.92rem }
.nav-links, .nav-drop-menu a, .nav-drop-btn{ font-size:.95rem }
.btn-sm{ font-size:.9rem }
.lf input, .lf textarea, input, textarea, select{ font-size:1rem }  /* <16px = iOS зумит форму при фокусе */

/* =============================================================
   17. ВИЗУАЛЬНЫЕ БАГИ
   ============================================================= */
/* 17.1 Заголовок первого экрана обрезался снизу.
   h1 сделан overflow:hidden — это маска для анимации выезда строки.
   Но нижние выносные элементы (у, р, д, ц, щ) у последней строки при
   line-height .98 в эту маску не помещались: хвосты букв срезало.
   Запас .08em там уже был — его не хватало ровно на 6px. Расширяем маску;
   анимация выезда продолжает работать (строка уезжает на 114% своей высоты,
   этого по-прежнему больше, чем высота маски). */
.hero h1{ padding-bottom:.2em }

/* 17.2 Якорные ссылки ныряли под плавающую шапку.
   Шапка зафиксирована и занимает 78px; секция, к которой ведёт ссылка,
   вставала ровно под неё, и заголовок секции оказывался невиден.
   На главной это компенсировал скрипт, у восьми страниц-продуктов —
   ничего; и на самой главной кнопки «Обсудить набор» и пресеты
   конфигуратора прокручивают через scrollIntoView мимо этого скрипта. */
html{ scroll-padding-top:104px }
section[id], [id^="cfg"], #contact, #packages, #work, #process, #why{ scroll-margin-top:104px }

/* 17.3 Персиковое свечение под графитовыми кнопками — наследство тёмной
   темы. На чёрном оно читалось как подсветка, на светлом холсте — как
   рыжее пятно грязи под каждой главной кнопкой сайта. */
.btn-pri{ box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 10px 24px -14px rgba(16,24,40,.55) }
.btn-pri:hover{ box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 16px 34px -14px rgba(16,24,40,.62) }
/* Те же неоновые ореолы у точек-маркеров: на белом это размытая клякса,
   а не свечение. Оставляем чистую точку. */
.h-trust li::before, .niche::before, .pkg .pop::before, .pack .pop::before{ box-shadow:none }

/* 17.4 Золотой текст на тонированном холсте давал контраст 4,15 при
   норме 4,5 — это цены доплат в конфигураторе и ссылки под формой.
   Для надписей есть отдельный тёмный бронзовый тон. */
.pkg-custom a, .lf-alt a, .lf-consent a, .cfg-add, .cfg-note a,
.pp a, .pp-back, .pp-langs button.on{ color:var(--gold-ink) }
.pkg-custom a, .lf-alt a{ border-bottom-color:rgba(138,79,34,.45) }
.pp-langs button.on{ border-color:var(--gold-ink) }

/* 17.5 Кнопки-подсказки «?» в конфигураторе были 22×22px — меньше
   минимума для пальца. Плюс цифры цен: без табличных знаков сумма
   при пересчёте дёргается по ширине. */
.cfg-info{ width:26px; height:26px; font-size:.85rem }
.cfg-v, .cfg-add, .pkg .price .v, .pack .price .v, .stat .n, .metric .big{ font-variant-numeric:tabular-nums }

/* 17.6 Кнопки были набраны системным Arial.
   Браузер НЕ наследует шрифт в элементы форм: у <button>, <input>, <select>
   и <textarea> он ставит свой (в Chrome это Arial 13px). У ссылок-кнопок
   `<a class="btn">` шрифт наследовался и был фирменным, а у настоящих
   кнопок — нет. Получалось, что «Обсудить набор», «Отправить заявку» и
   подсказки «?» набраны Arial'ом посреди фирменной типографики.
   Классическая дыра, её видно только если сравнить две кнопки рядом. */
button, input, select, textarea, optgroup{ font-family:inherit }
/* <code> в политике конфиденциальности брал безымянный системный моноширинный —
   на каждой ОС свой. Ставим тот же, что и везде на сайте. */
code, kbd, samp{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.92em }

/* 17.7 Русские слова длиннее английских («конфиденциальности», «предпринимателей»).
   Страховка: если слово физически не помещается в колонку — перенести его,
   а не выпустить за край карточки. Слова, которые помещаются, не трогает. */
body{ overflow-wrap:break-word }

/* 17.8 Тёмные превью-панели не были объявлены «тёмными островами».
   Внутри `.svc-prev`, `.pack-prev`, `.preview` и `.prod-prev` фон —
   почти чёрный градиент, а текст брал светлотемные переменные: подпись
   на макете страницы-продукта («Сайт · онлайн») давала контраст 2,3 —
   её просто не было видно. Возвращаем внутри них тёмную палитру,
   как уже сделано для видео-шапки и шоурила. */
.svc-prev, .svc-prev *, .pack-prev, .pack-prev *,
.preview, .preview *, .prod-prev, .prod-prev *{
  --paper:#EEF3F8; --soft:#C2D0DD; --mute:#98A6B6;
  --line:rgba(228,240,252,.14); --line2:rgba(228,240,252,.24);
  --gold-hi:#F8D8B4; --gold:#EBA97D; --gold-mid:#D68F63; --gold-dp:#EBA97D;
  --gold-ink:#F0C79B;
  --metal:linear-gradient(135deg,#F8D8B4 0%,#EBA97D 48%,#CE7E58 100%);
}
.svc-prev, .pack-prev, .preview, .prod-prev{ color:#EEF3F8 }
.prod-badge{ font-size:.75rem; letter-spacing:.1em; background:rgba(8,10,14,.62) }
.prod-badge b{ box-shadow:none }

/* 17.9 Выпадающий список языков был белым по белому.
   Пункты `<option>` наследовали светлый цвет текста «тёмного острова»
   шапки, а фон брали светлый (--bg2): контраст 1,02 — открыв селектор,
   человек видел пустой список. */
.lang-select option{ background:#191E28; color:#EDF1F7 }

/* 17.10 Шапка на ноутбуках 900–1120px: семь пунктов меню с зазором 28px
   не помещались в плавающую «таблетку» — язык и кнопка вылезали за её край
   (было и до правки размеров, на 5px). Ужимаем зазоры именно в этой полосе,
   на широких экранах ничего не меняется. */
@media (min-width:901px) and (max-width:1120px){
  .nav{ gap:12px }
  .nav-links{ gap:18px; font-size:.9rem }
  .nav-right{ gap:8px }
}

/* =============================================================
   18. Телефон: увеличенные тап-цели и поля
   ============================================================= */
@media (max-width:760px){
  .ft-col a, .ft-bottom a{ display:inline-block; padding:5px 0 }
  .lf-consent input{ width:22px; height:22px }
  .cfg-info{ width:30px; height:30px }
  .eyebrow{ font-size:.76rem; letter-spacing:.12em }
}

/* ============================================================
   19. БОЛЬШИЕ ЭКРАНЫ: 1800px → 4K (добавлено 07.08.2026)
   ------------------------------------------------------------
   До этого вся вёрстка упиралась в --maxw:1180px на любой ширине.
   На мониторе 3840px это узкая полоса в треть экрана: текст мелкий,
   по краям пусто — сайт выглядит как открытый в маленьком окне.
   Растим ДВЕ вещи вместе:
     --maxw     — ширину содержимого,
     font-size у html — базовый размер шрифта.
   ⚠️ Уточнение 07.08.2026: в rem заданы РАЗМЕРЫ ШРИФТА, а отступы в проекте —
   в px, поэтому базовый кегль сам по себе их не растит. Ступени ниже растят
   отступы явно, иначе на 4K крупный текст сидел бы в тех же полях, что на ноутбуке.
   Меняем только большие экраны — до 1800px всё как было.
   ============================================================ */
/* ⚠️ ШИРИНА СЧИТАЕТСЯ ОТ ЭКРАНА, А НЕ СТУПЕНЯМИ (правка 09.08.2026).
   Было три ступени с фиксированными числами: 1400 → 1660 → 1980. Доля экрана
   при этом падала: на 1800px содержимое занимало 78% ширины, а на 4K — уже 52%,
   и Анжей справедливо сказал «на 4К маленький контейнер», показав скриншот со
   своего монитора как образец. Теперь держим одну и ту же долю — 80% ширины
   окна — на любом большом экране, с потолком 3040px, чтобы на сверхшироких
   мониторах строка не расползлась до нечитаемой.
   Длинных строк это не создаёт: у текстовых блоков свои ограничения в ch
   (.lead — 64ch), ширина контейнера даёт воздух и размер карточек, а не длину
   строки. */
@media (min-width:1800px){
  :root{ --maxw:min(80vw, 3040px) }
}
@media (min-width:2400px){
  /* Базовый кегль растёт заметнее прежнего: почти все размеры в проекте заданы
     в rem, поэтому одна эта строка поднимает подписи, кнопки, плашки и лид —
     иначе рядом с крупным заголовком они выглядят мелочью. */
  html{ font-size:20px }
  /* Шапка секции держала max-width:640px фиксированно. С крупным заголовком
     на 4K он ломался на четыре строки в узкой колонке посреди пустого поля. */
  .s-head{ max-width:min(48ch, 1000px) }
  .band, .contact{ padding-top:120px; padding-bottom:120px }
  .s-head{ margin-bottom:52px }
  .wrap{ padding:0 40px }
  /* Потолки clamp были рассчитаны под ноутбук: на 4K заголовок упирался
     в 2.9rem и выглядел мелкой строчкой посреди широкого поля. Поднимаем
     потолки — средняя часть clamp (в vw) начинает работать по назначению. */
  .billboard h1{ font-size:clamp(2.4rem, 3vw, 4.6rem) !important }
  h2, .s-head h2{ font-size:clamp(2.2rem, 2.6vw, 3.2rem) }
  /* ⚠️ max-width шапки секции задаём в vw/px, а НЕ в ch: ch считается от кегля
     самого блока (~20px), а не от заголовка (~80px), и 48ch давали 480px —
     заголовок ломался на четыре строки посреди пустого поля. */
  .s-head{ max-width:min(62vw, 1100px) }
  /* пояснение под заголовком тоже считалось в ch и выходило вдвое уже
     самого заголовка — рядом с ним читалось обрывком */
  .s-head p, .s-head .lead{ max-width:min(46vw, 860px) }
  /* Вторичный текст первого экрана: рядом с заголовком в 110px подпись
     в 26px читается сноской. Держим соотношение ближе к 3:1. */
  .billboard .h-tag{ font-size:1.3rem !important }
  .hero-lede .reel-cap, .hero-lede .about-mini{ font-size:1.16rem !important }
  .h-trust li{ font-size:.86rem; padding:10px 16px }
}
@media (min-width:3200px){
  html{ font-size:24px }
  .s-head{ max-width:min(62vw, 1320px) }
  /* правая панель конструктора была прибита к 306px — на 4K это узкая полоска */
  .cfg-grid{ grid-template-columns:1fr 400px }
  .band, .contact{ padding-top:140px; padding-bottom:140px }
  .s-head{ margin-bottom:60px }
  .wrap{ padding:0 56px }
}

/* ============================================================
   20. MIDNIGHT (07.08.2026) — цвет корпуса MacBook Air «Midnight»,
       чуть светлее оригинала, чтобы страница не проваливалась в чёрное.
   ------------------------------------------------------------
   Решение Анжея. Путь холста за день: #E9EEF4 → #DCE3EC → #D5DDE8 →
   #C3CAD2 (светлый алюминий) → и в итоге тёмный Midnight.
   Раздел стоит ПОСЛЕДНИМ и перекрывает светлую палитру выше —
   всё, что было наработано (пол 12px, шрифт в кнопках, масштаб под 4K,
   ритм) остаётся в силе, меняется только цвет.
   Откат: удалить этот раздел целиком.
   ============================================================ */
:root{
  /* 09.08.2026, решение Анжея: «более холодный тёмный, как корпус Mac Midnight,
     ещё строже». Было #232C3C — светлее и с синевой; стало почти чёрное с
     холодным подтоном. Текст от этого только выигрывает: контраст растёт.
     Осторожно с обратным ходом — осветлять холст нельзя, не проверив --mute. */
  --bg:#12151C;               /* холст: почти чёрный, холодный */
  --bg2:#171B24;              /* подложки чуть светлее холста */
  --shell:#1A1F29;            /* корпус карточки */
  --p-top:#1D2330; --p-bot:#171B24;   /* градиент внутри карточки */
  --paper:#EDF1F7;            /* основной текст */
  --soft:#C4CEDD;             /* вторичный текст */
  --mute:#9CA9BB;             /* приглушённый: 7.3 на холсте при норме 4.5 */
  /* на почти чёрном тонкая линия пропадает — держим чуть плотнее прежнего */
  --line:rgba(226,236,250,.16);
  --line2:rgba(226,236,250,.28);
  /* золото на тёмном — светлое, как в «тёмных островах» */
  --gold-hi:#F8D8B4; --gold:#EBA97D; --gold-mid:#D68F63; --gold-dp:#EBA97D;
  --gold-ink:#F0C79B;
  --metal:linear-gradient(135deg,#F8D8B4 0%,#EBA97D 48%,#CE7E58 100%);
}
/* ⚠️ Цвет холста красим на html, а body оставляем прозрачным. Иначе непрозрачный
   фон body перекрывает html::before — узор есть в стилях, но его не видно
   (09.08.2026: «не вижу фоновую картинку» — причина была именно эта). */
html{ background:var(--bg) }
body{ background:transparent; color:var(--paper) }

/* Подсветка страницы — холодная, в тон Midnight */
body::before{ background:
  radial-gradient(120% 80% at 50% -8%, #1B2130 0%, var(--bg) 58%),
  radial-gradient(90% 60% at 88% 6%, rgba(235,169,125,.07), transparent 60%),
  radial-gradient(70% 60% at 4% 28%, rgba(120,150,200,.06), transparent 60%) }

/* Поверхности, у которых белый зашит прямо в разметке главной */
.bezel{ background:var(--shell); border-color:rgba(226,236,250,.10) }
.bezel-core{ background:linear-gradient(180deg,var(--p-top),var(--p-bot)); border-color:var(--line) }
.wk-card{ background:var(--shell); border-color:rgba(226,236,250,.12); color:var(--paper) }
.wk-note, .wk-d{ color:var(--mute) }
.nav-drop-menu{ background:rgba(24,29,38,.98); border-color:var(--line2) }
.dm-panel{ background:var(--shell); border-color:var(--line2) }
.dm-head{ border-bottom-color:var(--line) }
.dm-x{ background:#242B39; border-color:var(--line2); color:var(--paper) }
.dm-x:hover{ background:#2C3443 }
.cfg-info, .lf-in, input, textarea, select{ background:#191E28; border-color:var(--line2); color:var(--paper) }
.plainsay{ color:var(--paper) }
.h-trust li{ background:rgba(226,236,250,.04); border-color:var(--line2) }
/* полоса статистики и подвал темнее холста — иначе тёмное на тёмном сливается */
#statband{ background:var(--lvl-down) }
footer, .ft{ background:#0E1116 }
.nav{ background:rgba(18,21,28,.90) }

/* Остатки белых поверхностей: их фон зашит инлайн в разметке страниц,
   поэтому перечисляем поимённо. Список собран замером живых страниц,
   а не грепом — часть значений приходила из вложенных правил. */
.faq-i{ background:var(--shell); border-color:var(--line) }
.faq-i[open]{ background:#1D2330 }
.faq-q{ color:var(--paper) }
.faq-a{ color:var(--mute) }
.marquee{ background:#171B24; border-color:var(--line) }
.cfg.bezel, .cfg-total{ background:var(--shell); border-color:var(--line2) }
.cfg-total{ color:var(--paper) }
.wk-tabs{ background:transparent }
.wk-tabs button{ background:rgba(226,236,250,.06); border-color:var(--line2); color:var(--soft) }
.wk-tabs button.on{ background:var(--gold); color:#20170C; border-color:transparent }
/* удалено 07.08.2026: класса .demos-page нет в проекте, а /demos/ светлый слой не подключает */
option{ background:#191E28; color:#EDF1F7 }

/* ---------- 20.1 Глубина: три уровня поверхности ----------
   На светлой теме глубину давала тень. В темноте тень почти не видна —
   глубину строит СВЕТ: чем ближе поверхность к зрителю, тем она светлее.
   Правило простое и повторяемое:
     уровень 0 — холст            #232C3C
     уровень 1 — карточка         #2B3547  (светлее холста на ~7%)
     уровень 2 — вложенный блок   #242B39  (ещё светлее: панель внутри карточки)
     уровень −1 — утопленное      #1C2431  (полосы, подвал, поля ввода)
   Плюс тонкая светлая линия сверху у карточек — так свет «ложится» на верхнюю
   грань, приём тёмных интерфейсов macOS. Тени оставляем, но они работают не как
   тень, а как затемнение холста вокруг блока. */
:root{
  --lvl-0:#12151C;
  --lvl-1:#1A1F29;
  --lvl-2:#242B39;
  --lvl-down:#0C0E13;
}
.bezel, .wk-card, .faq-i, .cfg, .cfg-total, .card, .pkg, .sit, .case, .work-card{
  background:var(--lvl-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 18px 40px -26px rgba(0,0,0,.75);
}
/* вложенное внутри карточки должно быть СВЕТЛЕЕ её, а не темнее:
   иначе внутренний блок читается дырой */
.bezel .bezel-core{ background:linear-gradient(180deg,var(--lvl-2),var(--lvl-1)); border-color:rgba(255,255,255,.07) }
.pkg.feat .bezel-core, .pkg .bezel-core{ background:linear-gradient(180deg,var(--lvl-2),var(--lvl-1)) }
.feat .bezel-core, .svc .bezel-core{ background:linear-gradient(180deg,var(--lvl-2),var(--lvl-1)) }
/* поднятый на наведении блок подсвечивается сильнее — движение к свету */
.wk-card:hover, .svc:hover .bezel-core, .case:hover .bezel-core, .feat:hover .bezel-core{
  background:linear-gradient(180deg,#2A3242,var(--lvl-2));
  border-color:rgba(255,255,255,.14);
}
/* утопленные поверхности */
#statband{ background:var(--lvl-down) }
footer, .ft{ background:#0E1116 }
.wk-tabs button{ background:rgba(255,255,255,.05) }
input, textarea, select, .lf-in{ background:var(--lvl-down); border-color:rgba(255,255,255,.12) }
/* модалка ближе всех к зрителю — она поверх страницы */
.dm-panel{ background:var(--lvl-2); box-shadow:0 60px 140px -40px rgba(0,0,0,.9) }
.dm-x{ background:#2C3443 }

/* ---------- 20.2 Кнопки, поля и фокус в темноте ----------
   Разбор сайта нашёл главное: `.btn-pri` стояла на графите #1E242C, а холст
   теперь #232C3C — контраст 1.11, то есть главная кнопка почти сливалась с
   фоном. В светлой теме графит был контрастным пятном, в тёмной он стал фоном.
   Решение: главная кнопка — золото (единственный тёплый цвет бренда, на тёмном
   читается как акцент и не спорит с холстом), вторичная — светлая рамка.
   ⚠️ Глобально переопределять --graphite НЕЛЬЗЯ: тем же токеном красится текст
   на светлых плашках и рамки. */
.btn-pri{
  background:linear-gradient(135deg,#F0C08A 0%,#E3A06B 52%,#CE7E58 100%);
  color:#20170C; border:1px solid transparent; font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 14px 34px -16px rgba(235,169,125,.55);
}
.btn-pri:hover{
  background:linear-gradient(135deg,#F6CE9E 0%,#EBA97D 52%,#D98A5F 100%);
  border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 18px 44px -14px rgba(235,169,125,.7);
}
/* ⚠️ класс в разметке — .btn-ghost. Правила на .btn-gh не применялись ни разу. */
.btn-ghost{ background:transparent; color:var(--paper); border:1px solid rgba(226,236,250,.24) }
.btn-ghost:hover{ background:rgba(226,236,250,.10); color:var(--paper); border-color:rgba(226,236,250,.44) }

/* Поля формы: на тёмном холсте белая рамка «сама по себе» не читается —
   поле должно быть УТОПЛЕНО (темнее холста) и подсвечиваться при фокусе. */
/* ⚠️ Селекторы с .lf обязательны: на главной поля описаны как «.lf input»
   (вес 0,1,1) и простой «input» их не перебивает, в каком бы файле ни стоял. */
.lf input, .lf textarea, .lf-in, input, textarea, select{
  background:var(--lvl-down); color:var(--paper); border:1px solid rgba(226,236,250,.14);
}
.lf input::placeholder, .lf textarea::placeholder, input::placeholder, textarea::placeholder{ color:#8A97AA; opacity:1 }
.lf input:focus, .lf textarea:focus, .lf-in:focus, input:focus, textarea:focus, select:focus{
  outline:none; border-color:#EBA97D; background:#212A38;
  box-shadow:0 0 0 3px rgba(235,169,125,.18);
}
/* Видимый фокус с клавиатуры по всему сайту: раньше его глушил outline:none */
a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #EBA97D; outline-offset:3px; border-radius:6px;
}
/* Разделители: rgba(14,20,32,…) — это ЧЁРНЫЙ по прозрачности, на тёмном фоне
   он невидим. В темноте линии делаются светлыми. */
:root{ --line:rgba(226,236,250,.10); --line2:rgba(226,236,250,.20) }
hr, .sep, .ft-bottom{ border-color:rgba(226,236,250,.12) }

/* ---------- 20.3 Меню «Что делаем» — как системное меню macOS ----------
   Образец прислал Анжей 09.08.2026: тёмная полупрозрачная панель, крупный
   спокойный набор, ощутимые поля, отметка у текущего пункта, тонкая черта
   перед последним действием. Раньше панель была плотная и мелкая — читалась
   как выпадашка формы, а не как меню приложения. */
.nav-drop-menu{
  background:rgba(24,29,38,.78);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:6px;
  min-width:296px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px -28px rgba(0,0,0,.85);
}
.nav-drop-menu a{
  font-size:.98rem; line-height:1.25; color:#E8EDF5;
  padding:9px 12px 9px 34px;      /* слева место под отметку текущего пункта */
  border-radius:8px; position:relative;
}
.nav-drop-menu a:hover{ background:rgba(255,255,255,.10); color:#FFFFFF }
/* отметка текущего раздела — как галочка в системном меню */
.nav-drop-menu a[aria-current="page"]::before{
  content:"✓"; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:.9rem; color:var(--gold);
}
.nav-drop-menu a[aria-current="page"]{ color:#FFFFFF; font-weight:600 }
/* подписи групп: тише пунктов, с полем слева по одной линии с текстом */
/* .75rem = 12px — пол читаемости по проекту. Было .68rem (10,9px): проверка
   вёрстки поймала сразу на 11 страницах. */
.nav-drop-h{ padding:10px 12px 4px 34px; font-size:.75rem; letter-spacing:.12em; color:var(--mute) }
.nav-drop-menu > .nav-drop-h:first-child{ padding-top:6px }
/* последний пункт отделён чертой — как «Настроить…» в системном меню */
.nav-drop-menu .nav-drop-all{
  margin-top:6px; padding-top:11px; border-top:1px solid rgba(255,255,255,.10); color:var(--gold);
}
.nav-drop-menu .nav-drop-demo{ color:var(--gold) }

/* ============================================================================
   20.4 ОДИН ЯЗЫК КАРТОЧЕК (09.08.2026, решение Анжея: «привести к одному виду»)
   ----------------------------------------------------------------------------
   На главной жило семь разных карточек: услуги, пакеты, работы, метрики, FAQ,
   конфигуратор, кейсы. У каждой свои скругления (14 / 18 / 20 / 26px), свои
   отступы (9 / 22 / 28 / 30px), своя рамка и своя тень. Глаз читает это как
   «страницу собирали разные люди».

   Один набор правил на все:
     скругление   18px   (крупнее — карточка расплывается, мельче — дешевеет)
     рамка        1px, светлая с прозрачностью — в темноте линия видна только так
     поверхность  --lvl-1, вложенное внутри — --lvl-2 (светлее, а не темнее)
     отступы      24px по кругу, 28px у крупных (пакеты, конфигуратор)
     наведение    подъём 3px + поверхность светлеет
   Карточки с картинкой во всю ширину (работы, услуги) держат нулевой отступ
   сверху — иначе изображение висит в рамке.
   ============================================================================ */
.svc .bezel-core,
.pkg .bezel-core,
.cfg .bezel-core,
.metric .bezel-core,
.case .bezel-core,
.feat .bezel-core,
.wk-card,
.faq-i{
  border-radius:18px !important;
  border:1px solid rgba(226,236,250,.10) !important;
  background:var(--lvl-1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -26px rgba(0,0,0,.7) !important;
}
/* внутренние отступы — две ступени вместо семи */
.metric .bezel-core, .feat .bezel-core{ padding:24px !important }
.pkg .bezel-core, .cfg .bezel-core{ padding:28px !important }
.feat .bezel-core{ padding-top:24px !important }
/* Карточки с картинкой разбираем отдельно: у услуг ДВА варианта разметки —
   широкая (картинка слева, текст справа) и обычная (картинка сверху).
   Сплошной padding поверх них ломал внутреннюю сетку: картинка переставала
   заполнять свою половину, а текст уезжал. */
.svc .bezel-core, .case .bezel-core{ padding:0 !important; overflow:hidden; display:flex; flex-direction:column }
.svc .svc-prev, .case .case-prev{ margin:0 !important; border-radius:0 !important; height:auto !important; aspect-ratio:16/10 }
.svc .svc-body, .case .case-body{ padding:20px 22px 24px !important }
.wk-card .wk-body{ padding:18px 20px 22px }

/* ⚠️ «Широкой» карточки больше нет. Две из шести услуг были вдвое шире
   остальных, с картинкой сбоку и своим кеглем — из-за этого блок и читался
   как собранный из разных кусков. Теперь все шесть одинаковые: картинка
   сверху 16:10, текст снизу, ряд из трёх. */
.svc.wide{ grid-column:span 1 !important }
.svc-grid{ grid-template-columns:repeat(3,1fr) !important }
@media (max-width:1000px){ .svc-grid{ grid-template-columns:repeat(2,1fr) !important } }
@media (max-width:620px){ .svc-grid{ grid-template-columns:1fr !important } }
@media (min-width:861px){
  .svc.wide .bezel-core{ display:flex !important; flex-direction:column }
  .svc.wide .svc-prev{ aspect-ratio:16/10 !important; height:auto !important; min-height:0 }
  .svc.wide .svc-body{ padding:20px 22px 24px !important }
  .svc.wide h3{ font-size:1.16rem }
  .svc.wide p{ font-size:.9rem; max-width:none }
}
/* карточки в ряду одной высоты — иначе низ ряда «пляшет» */
.svc-grid, .wk-grid, .feat-grid{ align-items:stretch }
.svc, .svc .bezel-core{ height:100% }
/* одинаковое поведение при наведении */
.svc:hover .bezel-core, .case:hover .bezel-core, .wk-card:hover, .feat:hover .bezel-core, .pkg:hover .bezel-core{
  transform:translateY(-3px);
  border-color:rgba(226,236,250,.20) !important;
  background:var(--lvl-2) !important;
}
.svc .bezel-core, .case .bezel-core, .wk-card, .feat .bezel-core, .pkg .bezel-core{
  transition:transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease) !important;
}
/* внешняя обёртка .bezel больше не рисует вторую рамку вокруг карточки:
   раньше получалась рамка в рамке с зазором 7px */
.svc.bezel, .pkg.bezel, .cfg.bezel, .metric.bezel, .case.bezel, .feat.bezel{
  background:none !important; border:0 !important; padding:0 !important; box-shadow:none !important;
}
/* Один зазор между карточками во всех сетках: было 14 у метрик и 16 у остальных,
   на глаз это читается как «сетки собраны отдельно». */
.svc-grid, .wk-grid, .metrics, .feat-grid, .pkg-grid, .case-grid{ gap:16px !important }
@media (max-width:760px){
  .svc-grid, .wk-grid, .metrics, .feat-grid, .pkg-grid, .case-grid{ gap:12px !important }
}

/* ============================================================================
   20.5 ПЕРВЫЙ ЭКРАН И КНОПКИ (09.08.2026, замечания Анжея)
   «возле видео пусто, текст криво стоит, шрифты нечитабельные,
    жёлтую кнопку подведи под дизайн сайта, текстов жёлтого меньше»
   ============================================================================ */

/* --- 1. Кнопка. Была золотым градиентом со свечением — она кричала громче
   заголовка и не совпадала ни с чем на странице. Делаем спокойную светлую
   кнопку с тёмной надписью: на тёмном холсте это самый заметный и при этом
   тихий контраст, а золото оставляем только акцентам. */
.btn-pri{
  background:#E9EEF6 !important;
  color:#1A2230 !important;
  border:1px solid #E9EEF6 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 28px -18px rgba(0,0,0,.8) !important;
}
.btn-pri:hover{
  background:#FFFFFF !important; border-color:#FFFFFF !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 34px -16px rgba(0,0,0,.9) !important;
}
.btn-pri .ico, .btn-pri .ar{ background:rgba(26,34,48,.10); color:#1A2230 }

/* --- 2. Меньше жёлтого. Золотом были набраны все надписи-рубрики, номера
   карточек и подписи групп в меню — на странице получалось два десятка жёлтых
   пятен. Оставляем золото только чёрточке рубрики и активному пункту меню. */
.eyebrow{ color:var(--soft) !important }
.eyebrow::before{ background:var(--gold) }        /* чёрточка остаётся золотой */
.svc .num, .case .num, .step .sn, .sit-n{ color:var(--soft) !important }
.nav-drop-h{ color:var(--soft) !important }

/* --- 3. Читаемость текста первого экрана. Подпись под видео и блок о студии
   были набраны приглушённым серым 15–16px — на тёмном фоне это самое слабое
   место страницы. */
.hero .reel-cap{ color:#C6D2E2 !important; font-size:1.06rem !important; line-height:1.6 !important }
.hero .about-mini{ color:#C6D2E2 !important; font-size:1rem !important }
.hero .about-mini b{ color:#FFFFFF }
.billboard .h-tag{ color:#C6D2E2 !important; font-size:1.08rem !important }

/* --- 4. РАСКЛАДКА ПЕРВОГО ЭКРАНА ЗДЕСЬ НЕ ЖИВЁТ.
   09.08.2026 первый экран пересобран целиком (.hero-grid / .hero-copy /
   .hero-media / .hero-lede), и вся геометрия лежит в public/index.html —
   там же, где разметка. Раньше половина правил стояла тут, половина там,
   причём этот файл подключается ПОСЛЕ инлайн-блока главной и перебивал его
   через !important: любая правка в разметке молча не срабатывала.
   ⚠️ Не возвращать сюда ширины, колонки и отступы первого экрана. */

/* ============================================================================
   20.6 ШАПКА-СТРОКА И ЗАГОЛОВКИ РАЗДЕЛОВ БЕЗ РУБРИК
   (09.08.2026, решение Анжея: «не нравится общий концепт хедера и отделов»)
   ============================================================================

   ШАПКА. Была тёмная капсула со скруглением 100px, тенью и рамкой, висящая
   на 18px от края. Она читалась как отдельный виджет поверх сайта и спорила
   с первым экраном. Стала ровная строка во всю ширину: прижата к верху, фона
   нет, пока страница не тронута, а при прокрутке фон и тонкая линия снизу
   проявляются. Содержимое строки при этом стоит в общем контейнере сайта —
   логотип ровно над заголовком первого экрана.

   ⚠️ Класс scrolled вешает /assets/site-ui.js. Без него шапка просто всегда
   останется прозрачной — текст страницы будет проезжать под ней. Скрипт
   подключён на всех 15 наших страницах; при добавлении новой не забыть.

   РАЗДЕЛЫ. У каждого стояла золотая рубрика заглавными («ПО-ЧЕЛОВЕЧЕСКИ»)
   и автоматический номер («01»). Из-за них страница читалась как презентация
   с нумерацией слайдов. Убираем и рубрики, и номера — остаются заголовок
   и пояснение под ним.
   Рубрики скрыты, а не вырезаны из разметки: они размечены на 15 страницах
   и переведены на 6 языков, и решение «вернуть» стоило бы дороже правки CSS.
   Номера считались через CSS-счётчик в .band .s-head .eyebrow::after —
   вместе с рубрикой исчезают и они. */

header{ padding:0; display:block; background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease) }
header.scrolled{ background:rgba(18,21,28,.90);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line) }
.nav{ width:min(var(--maxw),100%); margin-inline:auto; height:64px;
  padding:0 26px; border-radius:0; background:transparent; border:0; box-shadow:none }
/* поля шапки совпадают с полями секций на больших мониторах */
@media (min-width:2400px){ .nav{ padding:0 40px } }
@media (min-width:3200px){ .nav{ padding:0 56px } }
/* на телефоне строка ниже: там в ней только логотип, язык и бургер */
@media (max-width:640px){ .nav{ height:58px; padding:0 18px } }

/* рубрики и номера разделов */
.eyebrow{ display:none !important }
/* отступ, который рубрика держала сверху, теперь не нужен */
.s-head h2, .eyebrow + h2, .s-head .eyebrow + h2, .billboard h1{ margin-top:0 !important }

/* строка шапки чуть выше: при 64px логотип упирался в край экрана */
.nav{ height:72px }
@media (max-width:640px){ .nav{ height:60px } }

/* Заголовок страниц-услуг — по той же шкале, что и на главной.
   Был крупнее (до 3.6rem против 2.9rem) и разваливался на шесть строк,
   из-за чего пример работы справа уезжал вниз, а первый экран занимал
   полтора экрана. Размер задан инлайн на девяти страницах — перебиваем
   здесь одним правилом, чтобы не расходиться по девяти файлам. */
.prod-h1{ font-size:clamp(1.9rem,4.2vw,2.9rem) !important; margin:0 0 18px !important }

/* ============================================================================
   20.7 МЕНЬШЕ КРУГЛОГО И ЗОЛОТОГО (09.08.2026)
   Анжей: «плашки под видео как круглые кнопки — некрасиво, и кнопки тоже;
   меньше круглого и жёлтого, мы премиум, а не колхоз».
   ============================================================================

   ФОРМА. Скругление 100px («пилюля») стояло у кнопок, плашек, значка языка,
   бейджа ролика, кнопок конструктора — от этого страница читалась набором
   тумблеров. Премиальная форма — прямоугольник с небольшим радиусом: 10px
   у кнопок, 8px у мелких элементов. Круг остаётся только там, где он
   функционален: точка-индикатор и кнопка воспроизведения.

   ЦВЕТ. Золото было и в ценах, и в номерах, и в точках плашек, и в заливке
   активных переключателей — два десятка жёлтых пятен на экран. Оставляем его
   ОДНОМУ элементу на экран: слову «клиентов» в заголовке. Остальное —
   светлый нейтральный тон.
   ========================================================================= */

/* --- форма --- */
.btn, .btn-pri, .btn-ghost, .btn-sm,
.cfg-preset, .cfg-ex-btn, .lang, .reel-badge, .reel-sound-txt,
.wk-tabs button, .dm-x, .burger, .skip:focus{ border-radius:10px !important }
.btn .ico, .btn .ar, .cfg-info, .reel-btn{ border-radius:8px !important }
.nav{ border-radius:0 }

/* --- плашки под роликом: строка, а не набор кнопок --- */
/* Были пилюли с рамкой и золотой точкой у каждой — три «кнопки», на которые
   хочется нажать, но нажимать нечего. Стало: одна строка через тонкие
   разделители, как подпись под иллюстрацией. */
.hero-strip .h-trust{ gap:0 !important; flex-wrap:wrap; row-gap:6px }
.hero-strip .h-trust li{
  background:none !important; border:0 !important; border-radius:0 !important;
  /* умещаем три пункта в одну строку: при переносе у перенесённого пункта
     висит разделитель слева, и строка выглядит сломанной */
  padding:0 12px !important; font-size:.76rem; color:var(--mute); line-height:1.5;
}
.hero-strip .h-trust li::before{ display:none }          /* золотая точка */
.hero-strip .h-trust li:first-child{ padding-left:0 !important }
.hero-strip .h-trust li + li{ border-left:1px solid var(--line2) !important }
.hero-strip .h-trust b{ color:var(--soft); font-weight:600 }
/* на телефоне три пункта в строку не встают, а у перенесённого висит
   разделитель слева — там раскладываем их столбиком без разделителей */
@media (max-width:700px){
  .hero-strip .h-trust{ flex-direction:column; gap:5px !important }
  .hero-strip .h-trust li{ padding:0 !important; border:0 !important }
}

/* --- меньше золота --- */
.reel-dot{ background:var(--soft) !important; box-shadow:none !important }
.cfg-add{ color:var(--soft) !important }
.cfg-ex-tag{ color:var(--mute) !important }
.nav-drop-all{ color:var(--soft) !important }
/* четырнадцать золотых точек в бегущей ленте — самое густое жёлтое пятно
   на странице; гасим до нейтрального */
.mq-item .d{ background:var(--soft) !important; opacity:.6 }
/* цена в панели конструктора была набрана золотым градиентом — самое
   крупное жёлтое пятно на экране; белая цифра читается дороже */
.cfg-v.metal-text{ background:none !important; -webkit-text-fill-color:var(--paper) !important;
  color:var(--paper) !important }
.pkg .pop::before, .pv-app .nv i:first-child{ background:var(--soft) !important; box-shadow:none !important }
/* активные переключатели конструктора были залиты золотым градиентом —
   теперь светлые, как основная кнопка */
.cfg-preset.on{ background:#E9EEF6 !important; color:#1A2230 !important; border-color:#E9EEF6 !important }
.cfg-toggle[aria-pressed=true] .cfg-box, .cfg-base .cfg-box{
  background:#E9EEF6 !important; border-color:#E9EEF6 !important }
.cfg-box::after{ border-color:#1A2230 !important }