/* Главная страница. */

/* ============ Hero ============ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

/* Кадр-заставка лежит фоном контейнера: она видна сразу, пока грузится видео,
   и остаётся единственным фоном, если видео решено не грузить. Под ней градиент. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    url('../../img/hero-poster.jpg'),
    linear-gradient(160deg, #16161A, #0A0A0A);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

/* Класс вешает heroVideo.js по событию canplay — чтобы не мелькнул чёрный кадр. */
.hero__media.has-video video { opacity: 1; }

/* Затемнение поверх видео, чтобы текст читался на любом кадре. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.45) 40%, var(--bg) 100%);
}

.hero__inner { position: relative; padding-block: calc(var(--nav-h) + 4rem) 5rem; }

.hero__eyebrow {
  color: var(--muted);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Название — жирный италик, как в референсе. */
.hero__title {
  margin-top: 0.6rem;
  font-size: var(--step-4);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  justify-content: center;
  margin-top: var(--gap-m);
}

/* ============ Сетка товаров ============ */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: var(--gap-m);
}

/* ============ Как это работает ============ */

.compare {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 940px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  --split: 50%;
}

.compare__side {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--step-2);
  font-weight: 800;
  font-style: italic;
  color: rgba(255, 255, 255, 0.14);
}

/* --before/--after ставит compare.js, когда скриншоты реально загрузились.
   Пока их нет, работает второй слой — градиент-заглушка. */
.compare__side {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Картинки ставит compare.js инлайном, здесь только запасные градиенты. */
.compare__before { background-image: linear-gradient(135deg, #3A4048, #171A1E); }

/* Правая половина обрезается по позиции ручки. */
.compare__after {
  background-image: linear-gradient(135deg, #1F3A32, #0D1613);
  clip-path: inset(0 0 0 var(--split));
}

/* Подписи-заглушки нужны только пока нет картинок. */
.compare.has-shots .compare__ph { display: none; }

.compare__tag {
  position: absolute;
  bottom: 1rem;
  z-index: 3;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare__tag--off { left: 1rem; background: rgba(139, 40, 50, 0.85); color: #FFE3E6; }
.compare__tag--on  { right: 1rem; background: rgba(16, 185, 129, 0.9); color: #04140E; }

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 4;
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-1px);
  border: none;
  padding: 0;
  cursor: ew-resize;
}

.compare__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

/* ============ Почему мы ============ */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-m);
}

.why-card {
  padding: var(--gap-m);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color var(--dur) var(--ease);
}

.why-card:hover { border-color: var(--line-hi); }

.why-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--gap-s);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-soft);
  color: var(--text);
}

.why-card__title { font-size: var(--step-1); margin-bottom: 0.4rem; }
.why-card__text { color: var(--faint); font-size: var(--step--1); line-height: 1.6; }

/* ============ Отзывы бегущей лентой ============ */

/* Секция во всю ширину, поэтому ленту обрезаем маской по краям. */
.marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee { overflow: hidden; }

.marquee__track {
  display: flex;
  gap: var(--gap-m);
  width: max-content;
  animation: marquee 50s linear infinite;
}

/* Трек продублирован скриптом, поэтому сдвиг ровно на половину. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.review {
  flex: none;
  width: 290px;
  padding: var(--gap-s) var(--gap-m);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.review__stars {
  display: flex;
  gap: 1px;
  margin-bottom: 0.5rem;
  color: #F5C542;
}

.review__text { color: var(--muted); font-size: var(--step--1); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ============ Статистика ============ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-m);
  max-width: 780px;
  margin-inline: auto;
}

.stat-card {
  padding: var(--gap-m);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}

.stat-card__icon { color: var(--faint); margin-bottom: var(--gap-s); display: flex; justify-content: center; }
.stat-card__value { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.03em; }
.stat-card__label { color: var(--faint); font-size: var(--step--1); }

/* ============ Финальный призыв ============ */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  text-align: center;
  padding-block: var(--gap-xl);
  border-top: 1px solid var(--line);
}

.cta__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.cta__title { font-size: var(--step-2); }
.cta__sub { color: var(--faint); max-width: 46ch; }

/* ============ Подписка ============ */

.subscribe {
  display: flex;
  gap: var(--gap-xs);
  max-width: 420px;
  margin: var(--gap-m) auto 0;
}

@media (max-width: 460px) {
  .subscribe { flex-direction: column; }
}

/* ============ Мобильные ============ */

@media (max-width: 720px) {
  /* На телефоне адресная строка съедает высоту, поэтому svh, а не vh.
     Полный экран под hero тут лишний — сразу видно, что ниже есть контент. */
  .hero { min-height: 88svh; }

  .hero__inner { padding-block: calc(var(--nav-h) + 2.5rem) 3rem; }

  /* Разрядка 0.34em на узком экране рвёт строку пополам. */
  .hero__eyebrow { font-size: var(--step--1); letter-spacing: 0.22em; }

  .hero__actions { margin-top: var(--gap-m); }

  /* Кнопки в hero — на всю ширину, столбиком: так по ним проще попасть. */
  .hero__actions .btn { width: 100%; }

  .grid-cards { grid-template-columns: 1fr; gap: var(--gap-s); }

  /* 16:9 на узком экране превращается в полоску — берём формат повыше. */
  .compare { aspect-ratio: 4 / 3; }

  .compare__tag { bottom: 0.6rem; font-size: 0.6rem; padding: 0.3rem 0.6rem; }
  .compare__tag--off { left: 0.6rem; }
  .compare__tag--on { right: 0.6rem; }

  /* Ручка крупнее — пальцем в двухпиксельную полоску не попасть. */
  .compare__handle::after { width: 44px; height: 44px; }

  .why-grid { grid-template-columns: 1fr; gap: var(--gap-s); }
  .why-card { padding: var(--gap-s) var(--gap-m); }

  .review { width: 250px; }

  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap-xs); }
  .stat-card { padding: var(--gap-s) 0.5rem; }
  .stat-card__label { font-size: 0.68rem; }

  .cta { padding-block: var(--gap-l); }
  .subscribe { width: 100%; }
}

@media (max-width: 400px) {
  /* Три колонки статистики на самых узких экранах уже не читаются. */
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { display: flex; align-items: center; gap: var(--gap-s); text-align: left; }
  .stat-card__icon { margin: 0; }
}