/* ============================================================
   Лендінг 23-го штурмового полку Р.У.Г
   Вёрстка по макету Figma «RUG-web», страница UA.

   Как устроен масштаб.
   Макет нарисован в двух размерах: 1440 (десктоп) и 375 (мобилка).
   Чтобы пропорции держались на любом экране, все размеры заданы
   в переменной --u — это «пиксель макета». На 1440 он равен ровно 1px,
   на узких экранах пропорционально уменьшается. Поэтому в коде
   размеры пишутся как calc(120 * var(--u)) — то есть «120 px макета».
   Мелкий текст дополнительно защищён через max(), чтобы не стать
   нечитаемым на промежуточных ширинах.
   ============================================================ */

:root {
  --u: 1px;                        /* десктоп 1440 и шире */
  --line-dark: #1f1f1f;            /* линия под шапкой — темнее, чем сетка */
  --btn-bg: rgba(0, 0, 0, .4);
  --btn-bd: #c6c6c6;
}

@media (max-width: 1439px) {
  :root { --u: calc(100vw / 1440); }
}

/* Планшетного макета в Figma нет — есть только 1440 и 375.
   По решению дизайнера на планшете держим десктопную раскладку,
   просто в меньшем масштабе: она доживает до 600 px. Мелкий текст
   при этом не даёт себя ужать ниже читаемого — за это отвечают
   max(...) у каждого кегля. Мобильная раскладка включается только
   на телефонах. */
@media (max-width: 599px) {
  /* Ограничение 1.2 убирает ступеньку на границе: без него на 599 px
     мобильный текст оказывался в полтора раза крупнее десктопного. */
  :root { --u: min(1.2px, calc(100vw / 375)); }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 0;
}

/* ============================================================
   Общий контейнер полосы
   На десктопе макет 1440 центрируется, на мобилке — 375.
   Секции стыкуются встык: в макете зазор между ними равен нулю,
   ритм создают только внутренние отступы.
   ============================================================ */

.band {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.band__inner {
  position: relative;
  width: calc(1440 * var(--u));
  margin-inline: auto;
}

@media (max-width: 599px) {
  .band__inner { width: calc(375 * var(--u)); }
}

/* ============================================================
   Декоративная фоновая сетка
   13 модулей на десктопе, вручную расставленных по секциям.
   Один SVG-чертёж; вариант A — то же зеркально.
   На мобилке сетки в макете нет.
   ============================================================ */

.grid-mod {
  position: absolute;
  z-index: 0;
  width: calc(227.81 * var(--u));
  height: calc(336.54 * var(--u));
  pointer-events: none;
  user-select: none;
}

.grid-mod--a { transform: scaleX(-1); }

.grid-mod--left  { left: calc(134 * var(--u)); }
.grid-mod--r1089 { left: calc(1089 * var(--u)); }
.grid-mod--r1136 { left: calc(1136 * var(--u)); }

.grid-mod--t47  { top: calc(47 * var(--u)); }
.grid-mod--t188 { top: calc(188 * var(--u)); }
.grid-mod--t408 { top: calc(408 * var(--u)); }

@media (max-width: 599px) {
  .grid-mod { display: none; }
}

/* ============================================================
   Кнопка «доєднатися»
   Две сомкнутые коробки: квадрат с черепом + подпись.
   Размеры задаются переменными, потому что в макете
   кнопка встречается в пяти разных калибрах.
   ============================================================ */

.btn {
  --btn-box: 84.47;                /* сторона квадрата с иконкой */
  --btn-h: 84.97;                  /* высота коробки с подписью */
  --btn-bw: .8122;                 /* толщина обводки */
  --btn-fs: 27.2816;               /* кегль подписи */
  --btn-px: 52.49;                 /* горизонтальный отступ подписи */

  display: inline-flex;
  align-items: stretch;
  font-family: var(--font-text);
  font-weight: 600;
  color: var(--grey-25);
  text-transform: uppercase;
  line-height: 1.2;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn__icon {
  flex: 0 0 auto;
  width: calc(var(--btn-box) * var(--u));
  height: calc(var(--btn-box) * var(--u));
  padding: 0;
  background: var(--btn-bg);
  border: calc(var(--btn-bw) * var(--u)) solid var(--btn-bd);
  object-fit: contain;
  /* иконка занимает ~62.8 % высоты коробки — пропорция из макета */
  padding: calc(var(--btn-box) * .186 * var(--u));
}

/* Высота задана явно, а не паддингами: в Figma коробка меряется
   по высоте прописных букв, а браузер добавил бы ещё интерлиньяж. */
.btn > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--btn-h) * var(--u));
  padding: 0 calc(var(--btn-px) * var(--u));
  background: var(--btn-bg);
  border: calc(var(--btn-bw) * var(--u)) solid rgba(198, 198, 198, .933);
  border-left: 0;                  /* стык коробок — одна линия, не две */
  font-size: max(12px, calc(var(--btn-fs) * var(--u)));
  /* трекинг задан здесь, а не на .btn: em считается от размера шрифта
     ТОГО элемента, где объявлен, — на .btn кегль ещё унаследованный */
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

/* Наведения в макете не нарисовано — делаем сдержанно,
   в той же палитре, без выдумывания новых цветов. */
.btn:hover,
.btn:focus-visible {
  color: var(--white);
}
.btn:hover .btn__icon,
.btn:focus-visible .btn__icon,
.btn:hover > span,
.btn:focus-visible > span {
  border-color: var(--white);
}
.btn:active { transform: translateY(1px); }

/* калибр шапки: тот же чертёж × 0.64 */
.btn--sm {
  --btn-box: 54.06;
  --btn-h: 54.58;
  --btn-bw: .5198;
  --btn-fs: 17.4599;
  --btn-px: 40.79;
}

@media (max-width: 599px) {
  .btn {
    --btn-box: 45.72;
    --btn-h: 46.17;
    --btn-bw: .4397;
    --btn-fs: 14.7686;
    --btn-px: 28.4149;
  }
}

/* ============================================================
   Надзаголовок-«бровка» — повторяющийся тип
   ============================================================ */

.eyebrow {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(11px, calc(14 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, .5);
  text-align: center;
}

.accent { color: var(--accent); }

/* ============================================================
   ШАПКА
   В макете шапка не липкая — обычный слой поверх фото героя.
   ============================================================ */

.header {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(1440 * var(--u));
  height: calc(87 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(17 * var(--u)) calc(80 * var(--u)) 0;
  border-bottom: 1px solid var(--line-dark);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: calc(10.13 * var(--u));
  padding-top: calc(2 * var(--u));
}

.header__logo {
  width: calc(40.87 * var(--u));
  height: calc(53.25 * var(--u));
}

.header__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(33.2047 * var(--u));
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

/* На мобилке в шапке только череп, по центру. Кнопки нет. */
@media (max-width: 599px) {
  .header {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    height: calc(76 * var(--u));
    justify-content: center;
    align-items: center;
    padding: 0;
    border-bottom: 0;
  }
  .header__name,
  .header .btn { display: none; }
  .header__brand { gap: 0; padding-top: 0; }
  .header__logo {
    width: calc(40.87 * var(--u));
    height: calc(53.25 * var(--u));
  }
}

/* ============================================================
   ГЕРОЙ
   Видимая высота ровно 869 из 1440 — пропорция 1 : 0.6035.
   Фото шире кадра и смещено: left −159, top 20, 1918×1079.
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: calc(869 * var(--u));
  overflow: hidden;
  background: var(--bg);
}

.hero__bg {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(20 * var(--u));
  width: calc(1918 * var(--u));
  margin-left: calc(-879 * var(--u));   /* −159 от левого края макета 1440 */
  height: calc(1079 * var(--u));
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* затемнение низа: прозрачное на y=311, чёрное к y=891 */
.hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(311 * var(--u));
  width: 100%;
  height: calc(580 * var(--u));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  pointer-events: none;
}

/* Декор героя. Слева и справа-снизу — под затемнением,
   справа-сверху — поверх него, поэтому он заметно контрастнее. */
.hero__decor {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: calc(1440 * var(--u));
  height: 100%;
  margin-left: calc(-720 * var(--u));
  pointer-events: none;
}
.hero__decor--over { z-index: 3; }

.hero__decor--1 { left: calc(54 * var(--u));   top: calc(132 * var(--u)); }
.hero__decor--2 { left: calc(1165 * var(--u)); top: calc(139 * var(--u)); }
.hero__decor--3 { left: calc(1111 * var(--u)); top: calc(630 * var(--u)); }

.hero__inner {
  position: relative;
  z-index: 4;
  width: calc(1440 * var(--u));
  margin-inline: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  margin-top: calc(518.64 * var(--u));   /* по верху отрисовки заголовка */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(120 * var(--u));
  line-height: 1;
  letter-spacing: .01em;                 /* единственное место с 0.01em */
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
}

.hero__sub {
  margin-top: calc(22 * var(--u));
  font-family: var(--font-text);
  font-weight: 500;
  font-size: max(13px, calc(23 * var(--u)));
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--grey-35);
  text-align: center;
}

.hero__inner .btn {
  margin-top: calc(30.2 * var(--u));   /* 38 в макете минус интерлиньяж строки */
}

@media (max-width: 599px) {
  .hero {
    height: calc(387 * var(--u));
  }
  .hero__bg {
    top: calc(-15 * var(--u));
    width: calc(759 * var(--u));
    margin-left: calc(-352 * var(--u));  /* −165 от левого края макета 375 */
    height: calc(427 * var(--u));
  }
  .hero::after {
    top: calc(123 * var(--u));
    height: calc(289 * var(--u));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 calc(216 * var(--u)));
  }
  .hero__inner { width: calc(375 * var(--u)); }
  .hero__title {
    margin-top: calc(173.93 * var(--u));
    width: calc(309 * var(--u));
    font-size: calc(46 * var(--u));
    line-height: .93;
    letter-spacing: .02em;
    white-space: normal;
  }
  .hero__sub {
    margin-top: calc(11 * var(--u));
    width: calc(263 * var(--u));
    font-size: max(11px, calc(14 * var(--u)));
    letter-spacing: 0;
  }
  .hero__inner .btn {
    margin-top: calc(27 * var(--u));
    /* в макете кнопка упиралась в границу секции; дизайнер согласовал 24 */
    margin-bottom: calc(24 * var(--u));
  }
}