/* ============================================================
   ФИРМЕННАЯ ЦВЕТОВАЯ СИСТЕМА ПЕСТ БАЛТИК

   Три цвета, больше никаких:

     белый    #ffffff  — фон страницы и текст на графите
     графит   #23272d  — текст на белом, фон карточек и тёмных блоков
     голубой  #1ca9e5  — все элементы: кнопки, акценты, иконки, цифры

   Плюс оттенки серого между белым и графитом — для линий, приглушённых
   подписей и едва заметных подложек. Это не отдельные цвета, а ступени
   одной шкалы, без них текст второго плана не отличить от основного.

   Как это сделано и почему именно так.
   Точечно перекрашивать каждое правило нельзя: в макете больше тысячи строк
   стилей, часть из них я не трогал, и любая пропущенная строка вернула бы
   лишний цвет. Поэтому лишние переменные не удаляются, а сводятся к трём
   базовым: всё, что раньше было оранжевым или зелёным, теперь физически
   ссылается на фирменный голубой либо графит. Пропустить нечего.
   ============================================================ */

:root {
  --white: #ffffff;
  --bg: #ffffff;

  --ink: #151922;
  --graphite: #20242d;
  --graphite-2: #2e333a;

  --sky: #1ca9e5;
  --sky-btn: #1ca9e5;
  --sky-strong: #0f7cae;
  --sky-dark: #0b648f;

  --muted: #69707a;
  --line: #d9dde2;
  --line-dark: #b2b8c1;
  --soft: #f5f7f8;
  --soft-blue: #eef6fb;

  --orange: #1ca9e5;
  --orange-strong: #0b648f;
  --green: #1ca9e5;

  --brand: #1ca9e5;
  --brand-tint: #eef6fb;

  --shadow: 0 18px 46px rgba(32, 36, 45, 0.12);
  --radius: 6px;
}

/* --- Фон страницы белый. Секции-«подложки» из макета делаем почти белыми,
       чтобы фон оставался единым, а не полосатым. --- */
.section--soft {
  background: var(--soft);
}

/* --- Тёмные блоки — графит. Сюда же чёрные подложки макета. --- */
.stats-strip,
.topline,
.header,
.footer,
.promo--main,
.service-card,
.review__head {
  background: var(--graphite);
}

/* --- Текст на белом — графит --- */
body,
.section h2,
.step-card h3,
.about-card h3,
.doc-card__body h3,
.promo__body h3,
.faq-card h3,
.review__text {
  color: var(--graphite);
}

/* Подписи, номера блоков и цены — голубой. Это элементы, а не текст:
   они ведут взгляд по странице. */
.label,
.eyebrow,
.stat-num,
.step-num,
.about-stat strong,
.service-card__price,
.doc-card__type,
.promo__value,
.review__stars,
.faq-icon{
  color: var(--sky);
}

/* Иконки — голубые */
.hero__form-trust svg,
.trust-item__icon svg,
.contact-popover__item svg,
.service-feature svg {
  color: var(--sky);
}

/* Главное действие описано одним блоком в конце файла — искать «ЗАЛИВКА
   КНОПОК». Здесь правила были, но не работали: тот же селектор повторялся
   ниже дважды, и побеждал последний. */

.btn--outline-light:hover {
  border-color: var(--sky);
  color: var(--sky);
}

/* --- На графите подписи и второстепенный текст светлые --- */
.stats-strip .stat-label,
.hero .eyebrow,
.hero__title .label,
.promo--main .label,
.promo--main .promo__body h3,
.service-card .chip,
.service-feature--business .label,
.review__name {
  color: rgba(255, 255, 255, 0.86);
}

.promo--main .promo__body p,
.service-card__body p,
.review__service {
  color: rgba(255, 255, 255, 0.7);
}

/* Цена на тёмной карточке услуги — голубая, как и все акценты */
.service-card > .service-card__body h3 b {
  color: var(--sky);
}

input[type="hidden"] {
  display: none;
}

/* --- Ответ формы. Зелёного и красного в системе нет: успех обозначается
       голубым, отказ — графитом с рамкой, чтобы состояния всё равно
       различались с одного взгляда. --- */
.form-status--error {
  color: var(--graphite);
  padding: var(--sp-8) var(--sp-12);
  border-left: 3px solid var(--graphite);
  background: var(--soft);
}

/* ============================================================
   ЧИТАЕМОСТЬ ГОЛУБОГО — правка 06.08 после механической проверки

   Фирменный голубой с логотипа (#1ca9e5) светлый. Это хорошо для элементов
   и плохо для текста: проверка контраста по всей странице нашла 39 мест,
   и все они сводятся к двум случаям.

     1. Белый текст на голубой заливке — 2,7:1 при норме 3:1 для крупного
        и 4,5:1 для обычного. Кнопки «Рассчитать», «Получить скидку»,
        номер телефона в шапке.
     2. Голубые подписи-метки на белом фоне — 2,5:1. «Услуги»,
        «Акции и скидки» и прочие надзаголовки секций.

   Фирменный цвет не меняется: он остаётся у элементов, иконок, цифр
   и рамок. Меняется только там, где голубой несёт текст — заливка кнопок
   уходит на тон глубже, а мелкие подписи на белом берут тёмный оттенок.
   ============================================================ */

/* Мелкие подписи на белом — тёмный оттенок голубого.
   На тёмных секциях они остаются светлыми: там правило ниже. */
/* На графите тёмный оттенок нечитаем — возвращаем светлый */
.hero .label,
.hero .eyebrow,
.hero__title .label,
.promo--main .label,
.service-card .label,
.service-feature .label,
.review__head .label {
  color: rgba(255, 255, 255, 0.86);
}

/* Тёмная карточка контактов.

   Здесь заголовок «Задайте вопрос специалисту» был графитовым на графите —
   контраст 1:1, текст не виден вовсе. Правило «текст на белом — графит»
   выше по файлу перечисляет .section h2, а эта карточка тёмная, и в список
   исключений не попала. Нашлось механической проверкой контраста, а не
   глазами: чёрное на чёрном на снимке выглядит как пустое место. */
.contact-card h2,
.contact-card h3{
  color: #fff;
}

.contact-card .label {
  color: rgba(255, 255, 255, 0.86);
}

/* ============================================================
   ВОЗВРАТ К ФИРМЕННОМУ ГОЛУБОМУ — правка Романа 06.08

   Сегодня утром я ввёл два тона глубже фирменного, чтобы вытянуть контраст:
   #0679a8 под заливку кнопок и #056d99 под мелкие подписи. Формально это
   решало задачу читаемости, а по факту добавило на страницу четвёртый цвет —
   синий. Роман увидел его сразу: логотип голубой, кнопки синие.

   Ошибка была в подходе. Читаемость белого на голубом я чинил тем, что
   затемнял голубой, — то есть менял фирменный цвет под норму. Правильно
   наоборот: цвет остаётся, а меняется то, что на нём написано.

   Кнопки: фирменный голубой + графитовый текст = 5,6:1. Тот же приём,
   что на референсе, где чёрный текст лежит на жёлтой заливке.
   ============================================================ */

/* ЗАЛИВКА КНОПОК — единственное место, где она задаётся.

   Раньше этот же селектор стоял в файле трижды: в блоке «Главное действие»,
   в блоке про читаемость и здесь. Два верхних не работали вовсе — побеждал
   последний, — но выглядели рабочими, и правка переменной в них ничего
   не меняла на странице. Теперь блок один; правится он же.

   Кнопки взяли собственную переменную --sky-btn. Сейчас она равна фирменному
   голубому, то есть на глаз ничего не изменилось, — но теперь заливку кнопок
   можно двигать, не трогая логотип, иконки и акценты: те остались на --sky. */
.btn--primary,
.promo__cta {
  background: var(--sky-btn);
  color: var(--graphite);
}

/* Наведение на карточку и стрелку ленты — это акцент, а не кнопка,
   поэтому он остаётся на фирменном --sky. */
.service-card__cta:hover,
.rail-btn:hover:not(:disabled) {
  background: var(--sky);
  color: var(--graphite);
}

/* Наведение — темнее обычного состояния. Оттенок берётся из переменной,
   а не вбивается числом: числом он не подчинялся правке палитры. */
.btn--primary:hover,
.promo__cta:hover {
  background: var(--sky-strong);
  color: var(--graphite);
}

/* В ленте акций залита только первая карточка — правка Романа 09.08.
   Шесть одинаковых голубых кнопок подряд спорят друг с другом: главного
   предложения среди них не видно. Первая остаётся залитой, остальные
   переходят на обводку и работают как ссылки.

   Привязка к классу .promo--main, а не к :first-child: карточки в ленте
   можно переставить, и главной должна остаться та, которую пометили,
   а не та, что случайно оказалась первой. */
.promo:not(.promo--main) .promo__cta {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--sky-dark);
}

.promo:not(.promo--main) .promo__cta:hover {
  background: var(--brand-tint);
  border-color: var(--brand-tint);
  color: var(--sky-dark);
}

/* Подписи-надзаголовки на белом — тёмная ступень голубого.
   Фирменный #1ca9e5 даёт на белом 2,67:1 при норме 4,5:1; тёмная ступень
   нужна ради читаемости, а не как замена бренду. Сам бренд остаётся
   на логотипе, иконках и акцентах по тёмному фону.
   На тёмных секциях эти же классы светлые — правила выше по файлу,
   у них селектор из двух частей, и они сильнее этого. */
.label,
.eyebrow,
.doc-card__type {
  color: var(--sky-dark);
}

.label::before,
.eyebrow::before {
  background: var(--sky);
}

.form-status--ok {
  color: var(--sky);
}

/* Плашки: голубая подложка остаётся, текст на ней — графит.

   В макете и подложка, и текст плашки были голубыми разной насыщенности:
   светло-голубой фон, голубой текст. Контраст 2,4:1 — надпись читается
   как блёклая тень. Раньше я вытягивал это тем, что делал текст темнее,
   и получал синий; теперь наоборот — голубым остаётся фон, а текст на нём
   графитовый. Фирменный цвет никуда не делся, он просто перешёл на заливку. */
.doc-card__type,
.chip,
.service-card__price {
  color: var(--graphite);
}

/* На тёмных карточках плашки светлые — там правило обратное */
.service-card .chip,
.services-rail .service-card__price{
  color: #fff;
}

/* ============================================================
   СВЕТЛЫЕ КАРТОЧКИ — правка Романа 09.08.2026

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

   Правится здесь, а не в lp.css: цвета текста внутри этих карточек
   заданы в этом же файле выше, а он подключается последним. Написанное
   в lp.css они бы перебили.
   ============================================================ */

/* --- Подложка и рамка ---
   Была белая: снимок работал водяным знаком, и карточка читалась как светлая.
   С 16.08.2026 снимок виден во всю силу, поэтому под ним графит — он же
   запасной цвет, если картинка не загрузилась. На белой подложке белый текст
   в этом случае исчез бы совсем. --- */
.services-rail > .service-card {
  background: var(--graphite);
  border: 1px solid var(--line);
}

/* --- Заголовки внутри карточек ---
   Тёмная чернильная краска рассчитана на белую подложку. Поверх фотографии
   она пропадает на первом же тёмном снимке, поэтому текст светлый. --- */
.services-rail > .service-card > .service-card__body h3 {
  color: #fff;
}

/* --- Описания: приглушённый серый, как у остальных светлых карточек
       страницы. Ставить сюда --ink нельзя — карточка станет тяжелее
       соседних блоков, где описание давно набрано серым. --- */
.services-rail > .service-card > .service-card__body p {
  color: rgba(255, 255, 255, 0.86);
}

/* --- Подписи: светлая ступень голубого.
       Тёмная (--sky-dark) заводилась под белую карточку; поверх снимка
       она проваливается, а голубой здесь указатель — по нему глаз находит
       нужную карточку, и он обязан быть виден. --- */
.services-rail > .service-card .label,
.service-card__object,
.services-rail > .service-card .service-card__price,
.services-rail > .service-card .chip {
  color: var(--sky);
}

/* Здесь снимок проявлялся по наведению и только на 0.3 — водяным знаком под
   надписью. Роман снял это 16.08.2026: «убери блюр и затемнение, чтобы всегда
   отображались картинки, а не только при наведении». Правило убрано целиком,
   силу задаёт lp.css — единица на всех ширинах. */

/* Тень по буквам — единственное, что держит светлый текст после снятия
   затемняющей подложки. Гасится она местно, вплотную к глифу, и фотографию
   не приглушает: ради неё всё и затевалось.

   Два слоя намеренно: короткий плотный держит контур на пёстром снимке
   (трава, листва, стеллаж с препаратами), длинный мягкий — общий контраст
   на светлом. Отключать её нельзя, не вернув подложку: белое по белому
   на снегу и на траве исчезает целиком. */
.services-rail > .service-card > .service-card__body h3,
.services-rail > .service-card > .service-card__body p,
.services-rail > .service-card .service-card__object {
  text-shadow: 0 1px 2px rgba(12, 15, 20, 0.9), 0 2px 14px rgba(12, 15, 20, 0.7);
}

/* Здесь телефону задавалась своя сила снимка (0.22). Убрано 16.08.2026:
   сила теперь одна на всех ширинах, и второго места, где она живёт,
   быть не должно. */

/* Кнопка снова лежит на фотографии, а не на белом. Прозрачная заливка
   с размытием подложки отделяет её от снимка, не гася его: размытие здесь
   местное, под самой кнопкой, а не по всей карточке. Разделительная линия
   светлая — тёмная на снимке не видна. */
.services-rail > .service-card > a.service-card__cta {
  background: rgba(21, 25, 34, 0.82);
  backdrop-filter: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.services-rail > .service-card > a.service-card__cta:hover {
  background: var(--sky);
  color: #fff;
}

/* ============================================================
   ГРАФИТ ВЕРНУЛСЯ В ДВА МЕСТА — правка Романа 09.08.2026

   Главная карточка акций и шапка карточки отзыва снова тёмные. Это
   не откат правки «светлые карточки» целиком: карточки услуг остаются
   белыми. Здесь графит работает не как фон, а как выделение — первое
   предложение в ленте акций и автор отзыва.

   Правила стоят в конце файла намеренно: выше по нему та же карточка
   красится в белое, и при равном весе селектора решает порядок.
   ============================================================ */

/* --- Главная карточка акций --- */
.promo--main {
  background: var(--graphite);
  border: 1px solid var(--graphite);
}

.promo--main .promo__value {
  color: #fff;
}

.promo--main .promo__body h3 {
  color: #fff;
}

.promo--main .promo__body p {
  color: rgba(255, 255, 255, 0.72);
}

/* Подпись «Онлайн-заявка» — светлый голубой, а не тёмная ступень:
   на графите тёмная ступень даёт 2:1 и не читается. */
.promo--main .label {
  color: var(--sky);
}

.promo--main .label::before {
  background: var(--sky);
}

/* Кнопка внутри карточки остаётся залитой — она главное действие блока. */
.promo--main .promo__cta {
  background: var(--sky-btn);
  color: var(--graphite);
}

/* --- Шапка карточки отзыва --- */
.review__head {
  background: var(--graphite);
  border-bottom: 0;
}

.review__name {
  color: #fff;
}

.review__service {
  color: rgba(255, 255, 255, 0.72);
}

.review__stars {
  color: var(--sky);
}

.review__head .label {
  color: var(--sky);
}