/* Первый экран главной (30.09.2026): две колонки, слева текст и кнопки, справа коллаж с параллаксом.
   Рупор над текстом убран, всё выровнено по левому краю. Разметка: modules/home/site/HeroMain.tsx.
   Телефон: home-hero-mobile.css. */

.hero-v2__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center;
  padding: 16px 0 56px;
}
.hero-v2__grid { position: relative; z-index: 0; }
.hero-v2 .hero-main__title { position: relative; margin: 0 0 14px; padding-top: clamp(28px, 2vw + 8px, 44px); overflow: visible; }
/* бледная фраза за заголовком, как на прежнем сайте: крупно, уходит под коллаж и растворяется справа */
.hero-v2 .hero-main__title:before {
  content: attr(data-title); display: block; position: absolute; z-index: -1; left: -4px; top: 0; right: auto;
  font-size: clamp(72px, 5.4vw + 20px, 128px); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: #eef3f0; white-space: nowrap; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.hero-v2 .hero-main__title-in { font-size: clamp(40px, 2.6vw + 14px, 60px); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; }
.hero-v2 .hero-main__description { margin: 0 0 16px; font-size: clamp(20px, 0.8vw + 12px, 26px); font-weight: 600; line-height: 1.3; }
.hero-v2__lead { max-width: 540px; margin-bottom: 24px; font-size: 17px; line-height: 1.6; color: #272727; }

.hero-v2__points { display: grid; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.hero-v2__points li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.35; color: #272727; }
.hero-v2__check {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: #e3f3ea; color: #2f8f5b;
}

/* круг с надписью (126 px) выше кнопки на 35 px: отступ сверху, чтобы он не лез в пункты */
.hero-v2__actions { display: flex; align-items: center; margin-top: 44px; margin-bottom: 20px; }
.hero-v2 .hero-main__more { padding-right: 64px; }
.hero-v2 .hero-main__more .site-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px;
  border-radius: 14px; font-size: 16px; line-height: 1.2; white-space: nowrap;
}

/* коллаж: блок в колонке с пропорциями исходника 796 × 665, слои в процентах — параллакс работает как раньше */
.hero-v2 .hero-main__images {
  position: relative; left: auto; right: auto; bottom: auto; z-index: 0;
  width: 100%; max-width: 760px; height: auto; aspect-ratio: 796 / 665; justify-self: end;
}
.hero-v2 .paralacs-box { position: absolute; inset: 0; height: 100%; }
.hero-v2 .paralacs-box__layer { right: auto !important; bottom: auto !important; }
.hero-v2 .paralacs-box__layer img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.hero-v2 .paralacs-box__layer--1 { left: 2.26% !important; top: 20.94% !important; width: 16% !important; height: 53.2% !important; }
.hero-v2 .paralacs-box__layer--2 { left: 54.4% !important; top: -0.25% !important; width: 45.6% !important; height: 87.31% !important; }
.hero-v2 .paralacs-box__layer--3 { left: 0 !important; top: 14.86% !important; width: 86% !important; height: 79.88% !important; }
.hero-v2 .paralacs-box__layer--4 { left: 15.58% !important; top: 40.6% !important; width: 23.5% !important; height: 59.4% !important; }
.hero-v2 .paralacs-box__layer--5 { left: 38% !important; top: 31.4% !important; width: 25.15% !important; height: 43.3% !important; }
.hero-v2 .paralacs-box__layer--6 { left: 6% !important; top: 60.8% !important; width: 19.4% !important; height: 13.9% !important; }

/* планшет: одна колонка, коллаж под текстом */
@media (max-width: 1022px) {
  .hero-v2__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 40px; }
  .hero-v2 .hero-main__images { justify-self: start; max-width: 520px; margin: 0; }
}