/* ============================================================
   ГЛАВНАЯ СТРАНИЦА
   Приём: разворот технического чертежа — поле с индексами слева,
   волосяные линии вместо теней, красный как конструктив.
   ============================================================ */

/* ------------------------------------------------------------
   1. ПЕРВЫЙ ЭКРАН
   ------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  padding-bottom: 0;
  border-bottom: 1px solid var(--c-line);
}
.hero > .container { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  padding-bottom: var(--section-y);
}
@media (min-width: 1080px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--sp-9);
  }
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.hero__kicker::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--c-accent);
  flex-shrink: 0;
}

.hero__title { margin-bottom: var(--sp-5); }

/* Третья строка тише двух верхних: залита градиентом, уходящим
   в фон. Раньше здесь была обводка (-webkit-text-stroke) — от неё
   пришлось отказаться совсем, см. §6.5 контекста: и у Manrope,
   и у Inter «А» собрана из перекрывающихся контуров, обводка
   рисует каждый отдельно, и из-под левой диагонали вылезает
   лишний прямоугольник. Заливка контуры объединяет — шва нет. */
.hero__title .out {
  color: transparent;
  background-image: linear-gradient(
    176deg,
    var(--c-text-dim) 0%,
    color-mix(in srgb, var(--c-text-dim) 34%, transparent) 72%,
    color-mix(in srgb, var(--c-text-dim) 16%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}
/* Запасной вариант, если background-clip: text не поддержан */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title .out { color: var(--c-text-mute); background-image: none; }
}

.hero__lead {
  max-width: 46ch;
  margin-bottom: var(--sp-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}

.hero__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.hero__note svg { width: 16px; height: 16px; color: var(--c-ok); flex-shrink: 0; }

/* --- Лента фактов --------------------------------------------
   Лежит в .container: ряд встаёт по той же ширине, что и все
   остальные разделы сайта. Крайние ячейки без боковых полей —
   их края совпадают с краями заголовков секций ниже.           */

.hero__facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 900px) { .hero__facts { grid-template-columns: repeat(4, 1fr); } }

.fact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.fact:nth-child(odd) { padding-left: 0; }
.fact:nth-child(2n)  { padding-right: 0; border-right: 0; }
@media (min-width: 900px) {
  .fact { padding-inline: var(--sp-6); border-bottom: 0; }
  .fact:first-child { padding-left: 0; }
  .fact:last-child  { padding-right: 0; border-right: 0; }
  .fact:nth-child(2n) { border-right: 1px solid var(--c-line); }
}

/* Подсветка ячейки снизу вверх при наведении */
.fact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--c-accent-soft));
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out);
}
.fact:hover::before { opacity: 1; }

.fact__num {
  font-family: var(--f-head);
  font-size: clamp(1.625rem, 1.05rem + 1.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.fact__num em { font-style: normal; color: var(--c-accent); }
/* Единица измерения идёт в одну строку с цифрой: «6 услуг» —
   это один факт, разрывать его на цифру и подпись нельзя */
.fact__unit {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fact__txt {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  max-width: 26ch;
}

/* ------------------------------------------------------------
   2. ЧТО НЕ ТАК С ВАШЕЙ ВОДОЙ — вход в каталог «по задаче»
   ------------------------------------------------------------ */

.problems__layout {
  display: grid;
  gap: var(--sp-6);
}
/* Ячейка сетки по умолчанию не уже своего содержимого: без min-width
   лента вкладок распирала страницу и на 320px появлялась прокрутка */
.problems__layout > * { min-width: 0; }
@media (min-width: 1000px) {
  .problems__layout {
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

/* Список задач: вертикальный на десктопе, лента на мобильном */
.problems__tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-3);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.problems__tabs::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) {
  .problems__tabs {
    flex-direction: column;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: 0;
    border-top: 1px solid var(--c-line);
  }
}

.ptab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-dim);
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition:
    color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}
.ptab svg { width: 19px; height: 19px; flex-shrink: 0; }
.ptab:hover { color: var(--c-text); border-color: var(--c-line-strong); }
.ptab[aria-selected='true'] {
  color: #fff;
  background: var(--c-accent);
  border-color: var(--c-accent);
}

@media (min-width: 1000px) {
  .ptab {
    width: 100%;
    justify-content: flex-start;
    min-height: 68px;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
    border: 0;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    white-space: normal;
    font-size: var(--fs-body);
  }
  .ptab::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--c-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--d-base) var(--e-out);
  }
  .ptab[aria-selected='true'] {
    color: var(--c-text);
    background: var(--c-surface);
    border-color: var(--c-line);
  }
  .ptab[aria-selected='true']::before { transform: scaleY(1); }
  .ptab[aria-selected='true'] svg { color: var(--c-accent); }
}

/* Панель решения */
.ppanel {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
@media (min-width: 720px) {
  .ppanel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: var(--sp-7); }
}
.ppanel[hidden] { display: none; }

.ppanel__title { margin-bottom: var(--sp-4); }
.ppanel__signs { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.ppanel__sign {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.ppanel__sign svg { width: 18px; height: 18px; margin-top: 3px; color: var(--c-accent); }

.ppanel__aside {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.ppanel__metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}
.ppanel__metric b {
  font-family: var(--f-head);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.ppanel__solution { display: grid; gap: var(--sp-2); }
.ppanel__solution strong { font-size: var(--fs-sm); }

/* ------------------------------------------------------------
   3. УСЛУГИ — сетка на волосяных линиях, без «коробок»
   ------------------------------------------------------------ */

.services__grid {
  display: grid;
  border-top: 1px solid var(--c-line);
}
@media (min-width: 640px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--d-base) var(--e-out);
}
@media (min-width: 640px) {
  .svc { padding-inline: var(--sp-5); border-right: 1px solid var(--c-line); }
  .svc:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1000px) {
  .svc { padding: var(--sp-7) var(--sp-6); }
  .svc:nth-child(2n) { border-right: 1px solid var(--c-line); }
  .svc:nth-child(3n) { border-right: 0; }
}
.svc:hover { background: var(--c-bg-alt); }

.svc__idx {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 639px) { .svc__idx { right: 0; } }

.svc__icon {
  width: 30px; height: 30px;
  color: var(--c-accent);
  transition: transform var(--d-base) var(--e-out);
}
.svc:hover .svc__icon { transform: translateY(-3px); }
.svc h3 { font-size: var(--fs-h4); }
.svc p {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  flex: 1;
  margin-bottom: var(--sp-4);
}

/* ------------------------------------------------------------
   4. РЕШЕНИЯ ПО ОБЪЕКТУ
   ------------------------------------------------------------ */

.solutions__grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 720px)  { .solutions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .solutions__grid { grid-template-columns: repeat(3, 1fr); } }

.sol {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.sol:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
@media (min-width: 720px) {
  .sol:first-child { grid-column: span 2; }
}
@media (min-width: 1040px) {
  .sol:first-child { grid-column: span 1; }
}

.sol__art {
  position: relative;
  /* Пропорция по умолчанию 16/9; карточка со своим кадром другой
     пропорции переопределяет её через `--ar` (25.08.2026) — иначе
     на узком экране, где панель ложится сверху карточки, кадр резался */
  aspect-ratio: var(--ar, 16 / 9);
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.sol__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sol__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 17, 20, 0.85));
}
.sol__idx {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  z-index: 1;
  font-family: var(--f-head);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--c-line-strong);
}
.sol__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  padding: var(--sp-6);
}
.sol__body p {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  flex: 1;
}
.sol__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.sol__tag {
  padding: 3px var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* ------------------------------------------------------------
   5. TELEGRAM-БОТ — единственная насыщенная плашка страницы
   ------------------------------------------------------------ */

.tgband {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% 10%, var(--c-brand-mid), transparent 55%),
    linear-gradient(120deg, var(--c-brand) 0%, var(--c-brand-deep) 62%, #3E0C0D 100%);
}
.tgband::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.09;
  mix-blend-mode: overlay;
  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");
  pointer-events: none;
}
.tgband > .container { position: relative; z-index: 1; }

.tgband__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 960px) {
  .tgband__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-10); }
}
.tgband__label { color: rgba(255, 255, 255, 0.62); }
.tgband h2 { margin-block: var(--sp-4) var(--sp-4); }
.tgband p { color: rgba(255, 255, 255, 0.78); max-width: 44ch; }

.tgsteps {
  display: grid;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
}
.tgstep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.tgstep:last-child { border-bottom: 0; }
.tgstep__n {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #fff;
}
.tgstep p { color: rgba(255, 255, 255, 0.86); font-size: var(--fs-sm); margin: 0; }
.tgband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ------------------------------------------------------------
   6. ПОЛОСА-ПРИЗЫВ: бесплатный выезд специалиста
   ------------------------------------------------------------ */

.ctaband {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-alt);
}
.ctaband__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ctaband__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-bg) 12%, rgba(15, 17, 20, 0.78) 55%, rgba(15, 17, 20, 0.45));
}
.ctaband > .container { position: relative; z-index: 1; }
.ctaband__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
@media (min-width: 880px) {
  .ctaband__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-9); }
}
.ctaband h2 { max-width: 18ch; margin-bottom: var(--sp-4); }
.ctaband p { max-width: 48ch; color: var(--c-text-dim); }

/* ------------------------------------------------------------
   7. ОТЗЫВЫ
   ------------------------------------------------------------ */

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  height: 100%;
}
.review__quote { width: 34px; height: 34px; color: var(--c-accent); opacity: 0.65; }
.review p { flex: 1; color: var(--c-text-dim); font-size: var(--fs-sm); }
.review__author {
  display: grid;
  gap: 2px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.review__name { font-weight: 700; font-family: var(--f-head); }
.review__meta { font-size: var(--fs-xs); color: var(--c-text-mute); }

/* ------------------------------------------------------------
   8. НАШИ РАБОТЫ
   ------------------------------------------------------------ */

.works__grid {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 660px)  { .works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .works__grid { grid-template-columns: repeat(3, 1fr); } }

.work {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: border-color var(--d-base) var(--e-out);
}
.work:hover { border-color: var(--c-line-strong); }
.work[hidden] { display: none; }
.work__media { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--c-line); }
.work__body { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.work h3 { font-size: var(--fs-h4); }

/* Показатель было → стало */
.work__delta {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.work__row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
}
.work__row span:first-child { color: var(--c-text-dim); }

.work__to { color: var(--c-ok); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ------------------------------------------------------------
   9. КЛИЕНТЫ
   ------------------------------------------------------------ */

.clients__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
@media (min-width: 620px)  { .clients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .clients__grid { grid-template-columns: repeat(5, 1fr); } }

.client {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-text-mute);
  transition: color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.client:hover { color: var(--c-text); background: var(--c-bg-alt); }

/* ------------------------------------------------------------
   10. НОВОСТИ
   ------------------------------------------------------------ */

.news__grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 700px)  { .news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .news__grid { grid-template-columns: repeat(3, 1fr); } }

.post {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: background-color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.post:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.post__date {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.post h3 { font-size: var(--fs-h4); }
.post p { font-size: var(--fs-sm); color: var(--c-text-dim); flex: 1; }

/* ------------------------------------------------------------
   ФОРМА ЗАЯВКИ
   ------------------------------------------------------------ */

.leadform {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
@media (min-width: 900px) {
  .leadform { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-9); padding: var(--sp-8); }
}
.leadform__fields { display: grid; gap: var(--sp-4); }
@media (min-width: 520px) {
  .leadform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
.leadform__ok {
  display: none;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--c-ok);
  border-radius: var(--r-md);
  background: rgba(79, 180, 119, 0.1);
  font-size: var(--fs-sm);
}
.leadform__ok svg { width: 20px; height: 20px; color: var(--c-ok); flex-shrink: 0; }
.leadform__ok.is-visible { display: flex; }

/* ============================================================
   ФОТОГРАФИИ: единая обработка
   Снимки с прежнего сайта разного происхождения и температуры.
   Дуотон приводит их к одной гамме и связывает с фирменным красным,
   на наведении цвет возвращается — снимок «оживает».
   ============================================================ */

.media {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-alt);
  isolation: isolate;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.92) contrast(1.08) brightness(0.78);
  transform: scale(1.01);
  transition:
    filter var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
}
/* красный тон */
.media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(148deg, rgba(216, 35, 42, 0.55), rgba(143, 0, 0, 0.22) 52%, transparent 78%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* затемнение к низу — под текст */
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15, 17, 20, 0.15) 0%, rgba(15, 17, 20, 0.55) 62%, rgba(15, 17, 20, 0.94) 100%);
  pointer-events: none;
}

a:hover > .media img,
.sol:hover .media img,
.work:hover .media img,
.svc:hover .media img {
  filter: grayscale(0.25) contrast(1.04) brightness(0.92);
  transform: scale(1.04);
}

/* Подпись поверх снимка */

/* ============================================================
   ПЕРВЫЙ ЭКРАН: снимок + карточка внахлёст (слои вместо плоскости)
   ============================================================ */

/* 25.08.2026: подложка-бриллиант с первого экрана убрана по правке
   заказчика — фигура спорила с фоном и с фирменным знаком в шапке. */

/* подпись — в правый нижний угол, карточка занимает левый */

@media (min-width: 1080px) {
  /* снимок вылезает вправо за колонку — уходит от «карточной» плоскости */
  
}

/* Карточка, лежащая на границе снимка и фона */

@media (min-width: 1080px) {
  
}

/* ============================================================
   УСЛУГИ: бенто — крупная ведущая карточка со снимком + компактные ячейки
   ============================================================ */

@media (min-width: 1000px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); }
  .svc--feature { grid-column: span 2; grid-row: span 2; }
}

.svc--feature {
  position: relative;
  overflow: hidden;
  justify-content: flex-end;
  min-height: 340px;
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  color: var(--c-text);
}
@media (min-width: 640px) { .svc--feature { border-right: 1px solid var(--c-line); } }
.svc--feature .media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.svc--feature > *:not(.media) { position: relative; z-index: 3; }
.svc--feature h3 { font-size: var(--fs-h2); max-width: 12ch; }
.svc--feature p { font-size: var(--fs-body); max-width: 40ch; color: var(--c-text-dim); }
.svc--feature:hover { background: transparent; }
.svc--feature .svc__idx { color: var(--c-text-dim); }

/* ============================================================
   РЕШЕНИЯ: разноразмерные плитки
   ============================================================ */

@media (min-width: 1040px) {
  .solutions__grid { grid-template-columns: repeat(3, 1fr); }
  .sol:first-child { grid-column: span 2; }
  .sol--band { grid-column: span 3; }
}

/* Широкая плитка: снимок и текст рядом */
@media (min-width: 720px) {
  .sol--split { display: grid; grid-template-columns: 1.05fr 1fr; }
  .sol--split .sol__art { aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 1px solid var(--c-line); }
  .sol--band { display: grid; grid-template-columns: 1fr 1.15fr; }
  .sol--band .sol__art { aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 1px solid var(--c-line); order: 0; }
  .sol--band .sol__body { padding: var(--sp-8); justify-content: center; }
  .sol--band h3 { font-size: var(--fs-h2); }
  .sol--band p { max-width: 52ch; font-size: var(--fs-body); }
}
.sol__art .media { position: absolute; inset: 0; }
.sol--split .sol__art .media,
.sol--band .sol__art .media { position: absolute; inset: 0; }

/* 25.08.2026: у широких плиток высота панели задана соседней колонкой
   текста, поэтому под `cover` кадр резался по бокам — у контейнерной
   станции уезжали оба торца. Показываем снимок целиком; подложка
   панели тёмная, поля от `contain` на ней не читаются как пустота. */
@media (min-width: 720px) {
  .sol--split .sol__art .media img,
  .sol--band .sol__art .media img { object-fit: contain; }
}

/* ============================================================
   ПОПУЛЯРНЫЕ СИСТЕМЫ: лента карточек товара (реальные фото)
   ============================================================ */

/* Место под цену заложено заранее: прайса ещё нет (§4.1, §7) */

/* ============================================================
   РАБОТЫ: разная величина плиток
   ============================================================ */

@media (min-width: 1040px) {
  .work--wide { grid-column: span 2; }
  /* Пропорцию широкой плитки задаёт motion.css — он грузится последним */
  .work--wide .work__media { aspect-ratio: 16 / 10; }
}

/* ============================================================
   ПОЛОСА-ПРИЗЫВ со снимком
   ============================================================ */

.ctaband__media { z-index: 0; }
.ctaband__media .media { position: absolute; inset: 0; }
.ctaband__media .media::after {
  background: linear-gradient(90deg, rgba(15, 17, 20, 0.97) 8%, rgba(15, 17, 20, 0.82) 46%, rgba(15, 17, 20, 0.5));
}

/* ------------------------------------------------------------
   ИМЯ: VODA.BY

   Полоса стоит сразу под первым экраном. Задача — обыграть
   САМО НАЗВАНИЕ, а не переезд с domwody.by, поэтому вёрстка
   словарной статьёй: слово крупно, под ним разбор по частям.
   Приём на сайте больше нигде не повторяется, и полоса не
   читается как ещё один ряд одинаковых карточек.

   Красным набрана только зона `.by` — она же единственное место
   в проекте, где акцент стоит внутри слова. Остальное держится
   на кегле и волосяных линиях, без плашек и теней.
   ------------------------------------------------------------ */

.dband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  border-block: 1px solid var(--c-line);
  background: var(--c-bg-alt);
}
/* Чертёжная сетка, как на полосе призыва «Промышленных» */
.dband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(155, 165, 176, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155, 165, 176, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(100deg, #000, transparent 58%);
}
/* Кегль строк считается от ШИРИНЫ КОНТЕЙНЕРА (cqw), а не от окна (vw).
   С vw строка попадала в край только на одной ширине экрана: контейнер
   растёт не так, как окно — у него свои поля и потолок. Контейнерные
   единицы снимают этот пересчёт, и строка держит край на любой ширине. */
.dband > .container { position: relative; z-index: 1; container-type: inline-size; }

.dband__label { color: var(--c-text-mute); margin-bottom: var(--sp-4); }

/* Само слово. Имя читается как вывеска, но не перекрикивает
   заголовок первого экрана.

   ⚠️ 11.08.2026: кегль уменьшен по замечанию заказчика — «слоган
   в разделе „наше имя“ написан слишком большим». Прежде обе строки
   растягивались во всю ширину контейнера (28cqw ≈ 408px на 1600px
   окна), и хвост «y» налезал на строку под словом. Растяжку
   во всю ширину снимаем сознательно: она отменена этой правкой.

   Кегль по-прежнему считается от ширины КОНТЕЙНЕРА (cqw), а не от
   окна: контейнер растёт не так, как окно, у него свои поля
   и потолок. Верхняя граница clamp нужна потому, что за ~1500px
   контейнер перестаёт расти, а единица продолжала бы. */
.dband__new {
  font-family: var(--f-head);
  font-size: clamp(2.5rem, 7.4cqw, 6.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--c-text);
  margin: 0;
  white-space: nowrap;
}
.dband__new span { color: var(--c-accent); }

.dband__lead {
  margin: var(--sp-5) 0 0;
  max-width: 46ch;
  font-family: var(--f-head);
  font-size: clamp(1.0625rem, 1.55cqw, 1.5rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--c-text-dim);
}

/* Разбор по частям. `dl`, а не список карточек: это именно
   словарная статья — термин и толкование. */

@media (min-width: 620px) {
  
}

/* Кегль в первом экране поднят по просьбе заказчика 31.08.2026:
   надстрочник шёл капсами в 11 px, строка о географии — в 13 px,
   на большом мониторе читались как мелкий шрифт под заголовком.
   Правится только герой: глобальные --fs-label и --fs-xs не трогаем,
   иначе поедут все метки на сайте. */
.hero__kicker { font-size: 0.875rem; }
.hero__note   { font-size: var(--fs-sm); }