/* Главная: первый экран со слайдером */

/* База */
.space {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('../../../img/space-stars.svg') repeat top center / 60rem 60rem;
  opacity: .45;
  will-change: transform, opacity;
  animation: space-drift 140s ease-in-out infinite alternate,
             space-twinkle 16s ease-in-out infinite;
}

/* Экран 1 — слайдер (общая высота 924 px) */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 57.75rem;
  padding: 10.625rem 3.75rem 0;      /* 60 от края экрана */
  background-image:
    linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
    url('../../../img/hero-bg.jpg');
  background-repeat: no-repeat;
  background-position: 0 0, 0 -1.95%;
  background-size: 100% 100%, 100% 207.79%;
}
.hero__photos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;               /* глобальное img { max-width: 100% } режет мобильный кроп 387% */
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero__photo.is-active { opacity: 1; }
.hero__arrow,
.hero__inner { position: relative; z-index: 1; }
.hero__inner {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 39.9375rem;
}
.hero__viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 41.8125rem;
  max-width: 100%;
  display: grid;
}
.hero__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  animation: fade-in .4s ease both;
}
.hero__slide[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.hero__title {
  width: 35.9375rem;
  max-width: 100%;
  margin-bottom: -.625rem;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 400;
}
.hero__list {
  margin: 0;
  padding-left: 1.875rem;
  list-style: disc;
  font-size: 1.25rem;
  line-height: 1.25rem;
}
.hero__list li + li { margin-top: .875rem; }
.hero__btn { margin-top: .625rem; }
.hero__arrow {
  position: relative;
  z-index: 5;
  flex: none;
  width: 3rem; height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent no-repeat center / contain;
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.hero__arrow:hover,
.hero__arrow:focus-visible {
  background-color: rgba(231, 124, 28, .9);
  box-shadow: 0 0 1.25rem rgba(231, 124, 28, .5);
  transform: scale(1.08);
}
.hero__arrow:active { transform: scale(.95); }
.hero__arrow--prev { background-image: url('../../../img/arrow-left.svg'); }
.hero__arrow--next { background-image: url('../../../img/arrow-right.svg'); }
.pager {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 110.613rem;
  max-width: 100%;
}
.pager__item { display: flex; align-items: center; flex: 1; min-width: 0; }
.pager__item--last { flex: none; }
.pager__line { flex: 1; width: auto; min-width: 0; height: 2px; margin: 0 .625rem; background: var(--white); }
.pager__dot {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 4.368rem; height: 4.375rem;
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  color: var(--white);
  font-size: 1.875rem;
  line-height: 1.875rem;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pager__dot:hover,
.pager__dot:focus-visible {
  border-color: var(--orange);
  background: rgba(231, 124, 28, .35);
  box-shadow: 0 0 .75rem rgba(231, 124, 28, .45);
  transform: scale(1.06);
}
.pager__dot:active { transform: scale(.96); }
.pager__dot.is-active { background: var(--orange); border-color: var(--orange); }

/* Внутренние страницы (светлая тема) — */
.page-light .space { display: none; }

/* Адаптив (< 1280 px — раскладка вне макета, */
@media (max-width: 1279px) {
  /* Первый экран */
  .hero {
    min-height: 34rem;
    padding: 6rem 1rem 2rem;
    gap: 1rem;
    background-position: 72% center, 0 0, 0 0;
    background-size: cover, 100% 100%, cover;
  }
  .hero__inner { height: auto; display: flex; flex-direction: column; gap: 2.5rem; }
  .hero__viewport { position: static; width: 100%; }
  .pager { position: static; }
  .hero__title { width: 100%; font-size: 1.875rem; line-height: 1.1; }
  .hero__list { font-size: .9375rem; line-height: 1.35; }
  .hero__list li + li { margin-top: .5rem; }
  .hero__arrow { width: 2.25rem; height: 2.25rem; }
  .pager { width: 100%; }
  .pager__item { flex: 1; min-width: 0; }
  .pager__item--last { flex: none; }
  .pager__dot { width: 2.25rem; height: 2.25rem; font-size: .9375rem; line-height: 1; border-width: 1px; }
  .pager__line { flex: 1; width: auto; min-width: 0; height: 1px; margin: 0 .375rem; }
}

/* Шапка планшета — мобильная: бургер слева, */
@media (max-width: 767px) {
  /* --- экран 1: 580 px по макету (node 840:3424), фото + затемнение 42 % --- */
  .hero {
    align-items: flex-start;
    justify-content: center;
    min-height: 580px;
    padding: 54px 20px 0;      /* контент начинается на 54 px — как в макете */
    background-image: none;
    background-color: #050a1b;
  }
  .hero__photo--1 {
    inset: auto;
    top: 0; left: -211.75%;
    width: 387.85%; height: 109.02%;
    object-fit: fill;
  }
  .hero__photos::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
  }
  .hero__arrow { display: none; }
  .hero__inner { position: relative; display: block; flex: none; width: 278px; max-width: 100%; height: 526px; margin: 0 auto; }
  .hero__viewport { position: absolute; top: 88px; left: 0; width: 100%; height: 308px; }
  /* 142 и 450 от верха страницы */
  .hero__slide { height: 100%; gap: 20px; justify-content: flex-start; }
  .hero__title { width: 100%; margin: 0; font-size: 32px; line-height: 35px; }
  .hero__list { padding-left: 21px; font-size: 14px; line-height: 20px; }
  .hero__list li + li { margin-top: 0; }
  .hero__btn { margin-top: auto; }
  /* точки 7 px по центру — цифры в мобильном макете не показываются */
  .pager { position: absolute; left: 0; right: 0; bottom: 72px; width: 100%; margin: 0; justify-content: center; gap: 5px; }
  .pager__item { flex: none; }
  .pager__line { display: none; }
  /* неактивные точки в макете чёрные (#050A1B), активная — оранжевая */
  .pager__dot {
    position: relative;
    width: 7px; height: 7px;
    border: 1px solid #050a1b;
    background: #050a1b;
    font-size: 0;
    line-height: 0;
    color: transparent;
  }
  /* точка 7 px мелкая для пальца — расширяем зону нажатия до 27 px */
  .pager__dot::after { content: ''; position: absolute; inset: -10px; }
  .pager__dot.is-active { background: var(--orange); border-color: var(--orange); }
}

/* Внутренние страницы: мобильная версия */
@media (prefers-reduced-motion: reduce) {
  /* у фона остаётся только мягкое мерцание, дрейф выключаем */
  .space { animation: space-twinkle 16s ease-in-out infinite !important; }
  /* подсветка стрелок и цифр остаётся, но без «прыжка» масштаба */
  .hero__arrow,
  .pager__dot { transition-duration: .15s !important; }
  .hero__arrow:hover,
  .hero__arrow:focus-visible,
  .hero__arrow:active,
  .pager__dot:hover,
  .pager__dot:focus-visible,
  .pager__dot:active { transform: none !important; }
}