/* ──────────────────────────────────────────────────────────────────────
   Блоки главной с иллюстрацией.

   Содержимое блоков не меняется ни на знак — меняется только раскладка:
   подпись, заголовок и лид уходят в левую колонку, справа встаёт картинка.
   Всё, что было ниже (карточки, строки, кнопки), остаётся на месте.

   Подключается после home-skin.css, поэтому переопределения идут без
   !important там, где хватает веса селектора.
   ────────────────────────────────────────────────────────────────────── */

.x2-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 34px;
}

/* Заголовок в колонке уже, чем во всю ширину: длинная строка рядом
   с картинкой читается хуже, чем короткая. */
.x2-head .x2-text > h2 { max-width: 20ch; }
.x2-head .x2-text > .sub,
.x2-head .x2-text > p.sub { margin-top: 14px; max-width: 52ch; }
.x2-head .x2-text > .lbl { margin-bottom: 10px; }

/* Картинка в скруглённой рамке с еле заметной подложкой: иллюстрации
   светлые, и без подложки они растворяются в белом фоне секции. */
.x2-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #f4f7f5 0%, #eef3ef 100%);
  border: 1px solid rgba(13, 13, 20, .07);
  aspect-ratio: 16 / 9;
}
.x2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Заглушка на время, пока картинка не нарисована: видно раскладку
   и видно, что именно сюда встанет. */
.x2-zag {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 28px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(22, 163, 74, .05) 0 10px, transparent 10px 20px);
}
.x2-zag span {
  font: 600 13px/1.5 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7c8a81;
}

/* Блок команды свёрстан своей сеткой — у неё другая опора, и общую
   раскладку туда применять нельзя, иначе колонки встанут в три ряда. */
.teamHead.x2-team { align-items: center; }

@media (max-width: 980px) {
  .x2-head { grid-template-columns: 1fr; gap: 26px; }
  .x2-head .x2-text > h2 { max-width: none; }
  /* На узком экране картинка идёт первой: иначе она отрывается
     от заголовка карточками, которые стоят ниже. */
  .x2-img { order: -1; }
}

/* ── Первый экран с фоновой подложкой ─────────────────────────────────
   Картинка стоит ровно там, где встанет <video>, и закрыта той же вуалью:
   экран с фоновым видео будет выглядеть так же, менять вёрстку не придётся.

   Собственные декорации первого экрана (размытые пятна .css-bg и канва
   с графиком) при сборке убраны — они рисовались поверх фона и с фотографией
   не уживаются. Содержимое экрана не тронуто.
   ───────────────────────────────────────────────────────────────────── */
body.skin .hero.light {
  position: relative;
  background: #fff;
  isolation: isolate;
}
body.skin .hero.light::before,
body.skin .hero.light::after { display: none; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Кадр сдвинут вправо: слева по композиции пустая стена, и при центровке
     интересная часть уезжала за правый край под карточку формы. */
  object-position: 58% 50%;
  display: block;
}

/* Вуаль. Без неё заголовок ложится прямо на стену и теряет контраст,
   а форма справа спорит со стеклянными плоскостями. Слева плотная,
   к правому краю почти прозрачная — там и живёт картинка. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      #ffffff 0%,
      rgba(255, 255, 255, .95) 30%,
      rgba(255, 255, 255, .62) 52%,
      rgba(255, 255, 255, .12) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, transparent 24%);
}

/* Карточка формы стоит поверх картинки, поэтому она непрозрачная
   и с собственной тенью: полупрозрачная на фоне стекла нечитаема. */
body.skin .hero.light .hero-form-card {
  background: #fff;
  box-shadow: 0 18px 50px rgba(13, 13, 20, .12);
}

@media (max-width: 980px) {
  /* На узком экране текст занимает всю ширину, и боковая вуаль
     не спасает — закрываем картинку почти целиком. */
  .hero-media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .88) 100%);
  }
}

/* ── «Единая система» — компактный блок ───────────────────────────────
   Картинки здесь нет намеренно: в блоке полторы строки текста и три
   плашки, рядом с иллюстрацией он растягивался на пустой экран.
   Заодно поджимаем отступы — короткий блок не должен занимать столько же,
   сколько раздел с карточками. */
body.skin #kontur { padding-top: 46px; padding-bottom: 46px; }
body.skin #kontur h2 { margin-bottom: 4px; }
body.skin #kontur .flowrow { margin-top: 22px; }