/* ============================================================
   СЦЕНА: фон страницы и насыщенные красные полосы
   Подключается последним — правит слой, на котором лежит вёрстка.
   ============================================================ */

/* ------------------------------------------------------------
   1. ФОН СТРАНИЦЫ
   Вместо ровной заливки — глубина: тёплое свечение сверху слева,
   холодное справа, и тонкие волновые линии поверх. Слой закреплён,
   поэтому при прокрутке фон живёт медленнее контента.
   ------------------------------------------------------------ */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(54vw 40vw at 6% -8%,  rgba(143, 0, 0, 0.26), transparent 62%),
    radial-gradient(44vw 34vw at 102% 18%, rgba(38, 78, 110, 0.20), transparent 64%),
    radial-gradient(62vw 46vw at 44% 106%, rgba(143, 0, 0, 0.16), transparent 62%);
}

/* Узор подложки: шестигранная сетка — отсылка к мембране и
   фильтрующей загрузке. 25.08.2026 сменила волновые линии по
   правке заказчика. Плитка 62.35×108 бесшовная (25.08.2026 узор укрупнён вдвое): шестигранники
   нарисованы во всех четырёх углах и в центре, соседние плитки
   достраивают друг другу срезанные доли. */
.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.35' height='108'%3E%3Cpath d='M0 -36 31.18 -18 31.18 18 0 36 -31.18 18 -31.18 -18ZM62.35 -36 93.53 -18 93.53 18 62.35 36 31.17 18 31.17 -18ZM0 72 31.18 90 31.18 126 0 144 -31.18 126 -31.18 90ZM62.35 72 93.53 90 93.53 126 62.35 144 31.17 126 31.17 90ZM31.18 18 62.35 36 62.35 72 31.18 90 0 72 0 36Z' fill='none' stroke='%232A3038' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 15%, transparent 72%);
}

/* Секции пропускают фон: сплошные заливки убираем */
.section--alt { background: rgba(22, 25, 30, 0.72); }
.footer { background: rgba(22, 25, 30, 0.82); }
/* Шапки здесь нет намеренно. Её полосу красит `.header__inner`
   в header.css, и заливать сам `.header` больше нельзя: с 10.08.2026
   слот шапки выше видимой полосы на 34px, и заливка слота оставляла
   мутную ленту под шапкой — по ней «дрожал» проезжающий контент. */
.topbar { background: transparent; }

/* Карточки остаются плотными, иначе текст поплывёт по фону */
.card, .review, .post, .work, .sol, .ppanel, .leadform, .prod, .map {
  background-color: color-mix(in srgb, var(--c-surface) 94%, transparent);
}

/* ------------------------------------------------------------
   2. КРАСНЫЕ ПОЛОСЫ
   Приём из блока Telegram выносим в модификатор, чтобы задать
   ритм: насыщенные полосы разбивают длинную тёмную страницу.
   ------------------------------------------------------------ */

.section--brand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% 6%, var(--c-brand-mid), transparent 56%),
    linear-gradient(118deg, var(--c-brand) 0%, var(--c-brand-deep) 60%, #3E0C0D 100%);
}
.section--brand::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--brand > .container { position: relative; z-index: 1; }

/* Разметка заголовка на красном */
.section--brand .sec-head__idx    { color: #fff; }
.section--brand .sec-head__kicker { color: rgba(255, 255, 255, 0.62); }
.section--brand .sec-head__top    { border-bottom-color: rgba(255, 255, 255, 0.26); }
.section--brand .sec-head__top::after { background: #fff; }
.section--brand .sec-head__link   { color: rgba(255, 255, 255, 0.78); }
.section--brand .sec-head__link:hover { color: #fff; }
.section--brand .sec-head__body p { color: rgba(255, 255, 255, 0.8); }
.section--brand .badge--neutral {
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.78);
}

/* Карточки новостей на красном: тёмные, полупрозрачные */
.section--brand .post {
  background-color: rgba(10, 6, 7, 0.42);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px);
}
.section--brand .post:hover {
  background-color: rgba(10, 6, 7, 0.58);
  border-color: rgba(255, 255, 255, 0.3);
}
.section--brand .post__date { color: rgba(255, 255, 255, 0.72); }
.section--brand .post p     { color: rgba(255, 255, 255, 0.76); }
.section--brand .post::before { background: #fff; }
.section--brand .link-arrow svg { color: #fff; }

/* Плитки клиентов на красном */
.section--brand .clients__grid {
  border-color: rgba(255, 255, 255, 0.2);
}
.section--brand .client {
  border-color: rgba(255, 255, 255, 0.2);
}
.section--brand .client:hover { background: rgba(0, 0, 0, 0.18); }
.section--brand .client::after { content: none; }

/* ------------------------------------------------------------
   2b. ФОТОГРАФИИ БЕЗ ЗАТЕМНЕНИЯ
   Снимки показываем как есть: без обесцвечивания и приглушения.
   Тёмная подложка остаётся только там, где поверх снимка идёт
   текст, — иначе он теряет контраст.
   ------------------------------------------------------------ */

.media img {
  filter: none;
  transform: none;
}
a:hover > .media img,
.sol:hover .media img,
.work:hover .media img,
.svc:hover .media img {
  filter: none;
  transform: scale(1.035);
}

/* Красный тон поверх снимка убран */
.media::before { content: none; }

/* Лёгкое затемнение только у нижнего края — чтобы карточка
   не «отрывалась» от подписи под ней */
.media::after {
  background: linear-gradient(180deg, transparent 62%, rgba(15, 17, 20, 0.42));
}

/* Ведущая карточка услуги: текст лежит прямо на снимке */
.svc--feature .media::after {
  background: linear-gradient(
    180deg,
    rgba(15, 17, 20, 0.28) 0%,
    rgba(15, 17, 20, 0.72) 52%,
    rgba(15, 17, 20, 0.94) 100%
  );
}

/* Плитка решения: снизу номер и подпись */
.sol__art .media::after {
  background: linear-gradient(180deg, transparent 45%, rgba(15, 17, 20, 0.78));
}

/* Полоса-призыв: заголовок слева, снимок справа */
.ctaband__media .media::after {
  background: linear-gradient(90deg,
    rgba(15, 17, 20, 0.94) 6%,
    rgba(15, 17, 20, 0.72) 44%,
    rgba(15, 17, 20, 0.32) 78%,
    rgba(15, 17, 20, 0.2));
}

/* Первый экран: поверх снимка только подпись-плашка со своим фоном */

/* ------------------------------------------------------------
   3. ЛОГОТИПЫ КЛИЕНТОВ — сразу в цвете
   ------------------------------------------------------------ */

.client img {
  filter: none;
  opacity: 1;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.client:hover img { transform: translateY(-3px) scale(1.03); }

/* ------------------------------------------------------------
   4. ПОЯВЛЕНИЕ БЕЗ ОБРЕЗКИ
   clip-path создаёт область отсечения по границам блока и режет
   всё, что из него выступает, — например карточку в первом экране.
   Оставляем только прозрачность и сдвиг.
   ------------------------------------------------------------ */

.reveal, .reveal.is-in { clip-path: none; }

/* На узких десктопах карточка не свисает влево, иначе задевает заголовок */
@media (min-width: 1080px) and (max-width: 1319px) {
  
}

/* ------------------------------------------------------------
   5. ЛОГОТИП В ШАПКЕ МОБИЛЬНОГО МЕНЮ
   Шапка страницы собрана в header.css; здесь остался только
   логотип в «шторке» — там вектор идёт целиком.
   ------------------------------------------------------------ */

@media (max-width: 1023px) {  }

/* Логотипы клиентов в одинаковом боксе — иначе ряд «прыгает» */
.client img {
  width: 100%;
  max-width: 152px;
  height: 58px;
  max-height: none;
  object-fit: contain;
  padding: var(--sp-2) var(--sp-3);
}

/* ============================================================
   ПРАВКИ 07.08.2026
   ============================================================ */

/* ------------------------------------------------------------
   ВЫСОТА ШАПКИ
   Используется «шторкой» мобильного меню: её верх должен совпасть
   с шапкой страницы. Сама шапка живёт в header.css.
   ------------------------------------------------------------ */

:root { --header-h: 118px; }
@media (max-width: 1023px) { :root { --header-h: 76px; } }

.btn-tg-head svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------
   ТЕЛЕФОНЫ С МЕТКАМИ ОПЕРАТОРОВ
   Метка — не логотип оператора, а текстовый знак: официальных
   векторов A1, МТС и life:) у нас нет, а рисовать чужой знак
   по памяти нельзя. Заменяется на настоящие логотипы за минуту.
   ------------------------------------------------------------ */

.phones { display: grid; gap: var(--sp-2); }
.phone {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.phone a {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--c-text);
  white-space: nowrap;
}
.phone a:hover { color: var(--c-accent-hi); }

.phone__op {
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 3px var(--sp-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-text-dim);
  white-space: nowrap;
  transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.phone:hover .phone__op { border-color: var(--c-line-strong); color: var(--c-text); }
.phone__op--a1   { color: #E8484F; }
.phone__op--mts  { color: #E8484F; }
.phone__op--life { color: #7FD25B; }
.phone__op--city { color: var(--c-text-mute); }

/* В мобильном меню — крупнее, это основной способ позвонить */
.drawer__phones .phone a { font-size: 1.25rem; }
.drawer__phones .phone__op { min-width: 52px; padding-block: 5px; }

/* На красной полосе и в карточке контактов метка на своём фоне */
.contactcard .phone__op { background: var(--c-bg-alt); }

/* ------------------------------------------------------------
   РУЛЕТКА УСЛУГ В ПЕРВОМ ЭКРАНЕ
   Слайды сменяются прозрачностью — только opacity, без сдвига
   раскладки. Автопрокрутка останавливается при наведении,
   фокусе и при prefers-reduced-motion.
   ------------------------------------------------------------ */

.hslider {
  position: relative;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 1080px) {
  .hslider { margin-right: calc(var(--gutter) * -0.6); }
}

.hslider__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg-alt);
}

.hslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-slow) var(--e-out), visibility var(--d-slow);
}
.hslide.is-active { opacity: 1; visibility: visible; }

.hslide__media { position: absolute; inset: 0; }
.hslide__media::after {
  background: linear-gradient(180deg, rgba(15, 17, 20, 0.18) 0%,
              rgba(15, 17, 20, 0.72) 52%, rgba(15, 17, 20, 0.95) 100%);
}

.hslide__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-6);
}

.hslide__title {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  letter-spacing: -0.02em;
}
.hslide__body p {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  max-width: 40ch;
  margin: 0;
}
.hslide__body .link-arrow { margin-top: var(--sp-2); }

/* Управление под кадром, а не поверх — не закрывает снимок */
.hslider__ui {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.hslider__arrow {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-text-dim);
  transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.hslider__arrow svg { width: 20px; height: 20px; }
.hslider__arrow:hover { border-color: var(--c-line-strong); color: var(--c-text); }

.hslider__dots { display: flex; flex: 1; gap: var(--sp-2); }
.hslider__dot {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--c-line);
  cursor: pointer;
  transition: background-color var(--d-base) var(--e-out);
}
.hslider__dot:hover { background: var(--c-line-strong); }
/* Полоска заполняется, пока идёт слайд — видно, сколько осталось */
.hslider__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
}
.hslider__dot.is-active::after { transform: scaleX(1); transition: transform var(--d-base) var(--e-out); }
.hslider.is-playing .hslider__dot.is-active::after {
  animation: dot-fill var(--hslider-delay, 6500ms) linear forwards;
}
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hslide { transition: none; }
  .hslider.is-playing .hslider__dot.is-active::after { animation: none; transform: scaleX(1); }
}

/* У списка номеров каждая строка со своей меткой — общая иконка трубки лишняя.
   Раньше здесь стоял `:has(.phones)`, но он не срабатывал: список лежал
   внутри <p>, а такую вложенность парсер разбирает, закрывая абзац перед
   <ul>. Разметка исправлена, признак — свой класс. */
.footer__contact--phones { display: block; }