/* ==========================================================================
   NOMADO — HEADER + HERO
   Страница на белом фоне. Hero — тёмный скруглённый блок с угловыми
   оранжевыми шейпами-стрелками (как титульный слайд). Токены из nomado.css.
   ========================================================================== */

/* белая страница (перекрываем тёмный body из nomado.css) */
body { background: #ffffff; color: #14100e; }

.page {
  max-width: 1640px;
  margin-inline: auto;
  padding: clamp(14px, 1.7vw, 22px) clamp(14px, 2vw, 26px) clamp(14px, 2vw, 26px);
}

/* ============================== HEADER ============================== */
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 0 clamp(6px, 1vw, 14px) clamp(12px, 1.7vw, 20px);
}
.site-header__logo { display: inline-flex; }
.site-header__logo img { height: clamp(26px, 2.6vw, 34px); width: auto; display: block; }

.site-nav {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px);
  margin-inline: auto; font-weight: 500; font-size: .98rem;
}
.site-nav a { color: #4a423e; position: relative; padding: 4px 0; transition: color .2s ease; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--nm-orange); border-radius: 2px; transition: right .25s ease;
}
.site-nav a:hover { color: #14100e; }
.site-nav a:hover::after { right: 0; }

.site-header__cta { padding: .7em 1.4em; font-size: .95rem; box-shadow: none; }
.site-header__cta:hover { box-shadow: var(--nm-glow); }
.site-nav__cta { display: none; }   /* кнопка в меню — только на мобильных */

/* бургер (скрыт на десктопе) */
.site-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; flex: none; cursor: pointer;
  border: 1px solid rgba(20, 16, 14, .2); border-radius: var(--nm-radius-sm); background: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.site-burger span { display: block; width: 22px; height: 2.5px; margin-inline: auto;
  background: #14100e; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.site-header.is-open .site-burger { border-color: var(--nm-orange); }
.site-header.is-open .site-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .site-burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .site-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================== HERO =============================== */
.hero {
  --hero-pad: clamp(26px, 4.5vw, 76px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--nm-radius-lg);
  min-height: min(880px, 85vh);
  display: flex;
  flex-direction: column;
  color: var(--nm-text);
  background: #1b0600;
  box-shadow: 0 40px 90px -40px rgba(120, 30, 0, .5);
}

/* ---------------------------------------------------------------- фон-слои */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; border-radius: inherit; }

/* фирменный шейп-стрелка Nomado — инлайновый <svg> (декор, НЕ LCP-кандидат).
   Затемнение запечено в цвета SVG. Позиционируем как раньше фон. */
.hero__shapes {
  position: absolute; left: 50%; top: calc(50% - 90px);
  transform: translate(-50%, -50%);
  width: 134%; height: auto; max-width: none;   /* перекрываем глобальный svg{max-width:100%} */
}

/* точечная карта поверх шейпов (лёгкие светлые крапинки) */
.hero__map {
  position: absolute; inset: -3%;
  background: url('../bg/world-map-dots.webp') center / cover no-repeat;
}
.hero__map--dim { display: none; opacity: .14; mix-blend-mode: screen; }

/* тонкая техно-рамка */
.hero__crosshair { position: absolute; inset: 0; color: #fff; opacity: .12; }
.hero__crosshair svg { width: 100%; height: 100%; }

/* ------------------------------------------------------ праздничный салют */
.hero__fireworks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; }
/* точка вспышки */
.hfw { position: absolute; width: 0; height: 0; }
.hfw--1 { left: 20%; top: 30%; color: var(--nm-orange); }
.hfw--2 { left: 76%; top: 24%; color: var(--nm-coral); }
.hfw--3 { left: 50%; top: 15%; color: #fff; }
.hfw--4 { left: 12%; top: 58%; color: var(--nm-orange-light); }
.hfw--5 { left: 87%; top: 54%; color: var(--nm-orange); }
/* искры — разлёт из центра */
.hfw i {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: currentColor; box-shadow: 0 0 16px 2px currentColor;
  opacity: 0; will-change: transform, opacity;
}
/* многоцветные искры — праздничная палитра */
.hfw i:nth-child(6n + 1) { color: var(--nm-orange); }
.hfw i:nth-child(6n + 2) { color: #FFC24B; }        /* золотой */
.hfw i:nth-child(6n + 3) { color: #ffffff; }        /* белый */
.hfw i:nth-child(6n + 4) { color: var(--nm-coral); }
.hfw i:nth-child(6n + 5) { color: #FF5EA8; }        /* розовый */
.hfw i:nth-child(6n + 6) { color: var(--nm-orange-light); }
.hfw i:nth-child(1)  { --a: 0deg; }
.hfw i:nth-child(2)  { --a: 30deg; }
.hfw i:nth-child(3)  { --a: 60deg; }
.hfw i:nth-child(4)  { --a: 90deg; }
.hfw i:nth-child(5)  { --a: 120deg; }
.hfw i:nth-child(6)  { --a: 150deg; }
.hfw i:nth-child(7)  { --a: 180deg; }
.hfw i:nth-child(8)  { --a: 210deg; }
.hfw i:nth-child(9)  { --a: 240deg; }
.hfw i:nth-child(10) { --a: 270deg; }
.hfw i:nth-child(11) { --a: 300deg; }
.hfw i:nth-child(12) { --a: 330deg; }
/* чётные искры летят дальше — «двойное» кольцо салюта */
.hfw i:nth-child(even) { --d: 150px; width: 10px; height: 10px; }
.hfw i:nth-child(odd)  { --d: 110px; }

/* Салют — бесконечная анимация в зоне LCP. Запускаем только после window.load
   (класс .lit ставит hero.js), чтобы непрерывная перерисовка не мешала
   Lighthouse зафиксировать стабильный LCP. */
.hero.lit .hfw i { animation: hfw-burst 3.4s cubic-bezier(.15, .7, .3, 1) infinite; }
.hero.lit .hfw--2 i { animation-delay: .7s; }
.hero.lit .hfw--3 i { animation-delay: 1.4s; }
.hero.lit .hfw--4 i { animation-delay: 2.0s; }
.hero.lit .hfw--5 i { animation-delay: 2.7s; }

@keyframes hfw-burst {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(1); }
  6%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d, 92px) * -1)) scale(.2); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.lit .hfw i { animation: none; }
}

/* скрим отключён (без тёмного пятна по центру) */
.hero__scrim { display: none; }

/* ------------------------------------------------------------- контент */
.hero__inner { position: relative; z-index: 2; width: 100%; padding-inline: var(--hero-pad);
  text-align: center; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero__copy { max-width: min(1400px, 96%); margin-inline: auto; transform: translateY(30px); }

.hero__eyebrow { margin: 0 0 clamp(18px, 3vh, 30px);
  color: rgba(255,255,255,.82); }

.hero__title {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 5.2vw, 4.9rem);
  color: #fff;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .06em; white-space: nowrap; }
/* Заголовок = LCP-элемент: рисуется сразу, в финальной позиции, без маски-въезда и
   без JS-гейта — иначе Lighthouse не успевает зафиксировать LCP (NO_LCP). */
.hero__line > span { display: inline-block; position: relative; color: #fff; }
.hero__spark { font-style: normal; color: #fff; margin-left: .04em; }

.hero__lead { margin: clamp(20px, 3vh, 32px) auto 0; max-width: 60ch;
  font-size: clamp(.98rem, 1.2vw, 1.15rem); line-height: 1.65; color: rgba(255,255,255,.88); }

.hero__actions { margin-top: clamp(26px, 4vh, 44px); display: flex; justify-content: center; }

/* 4 фирменных чипа с маркером-квадратом — прижаты к низу блока */
.hero__pills {
  list-style: none; margin: 0; width: 100%;
  padding: 0 var(--hero-pad) clamp(68px, 10vh, 112px);
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.hero__pills li {
  display: inline-flex; align-items: center; gap: .7em;
  padding: .62em 1.15em .62em .9em;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--nm-radius-sm);
  background: rgba(0,0,0,.22);
  font-weight: 600; font-size: clamp(.66rem, .92vw, .8rem);
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
/* маркер — фирменный оранжевый квадрат-«ромб» */
.hero__pills li::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  background: var(--nm-orange); box-shadow: 0 0 12px rgba(255,47,0,.7);
  transform: rotate(45deg);
}
.hero__pills li:hover {
  border-color: var(--nm-border-glow); background: rgba(255,255,255,.09);
  transform: translateY(-2px);
}
/* белая кнопка — контраст на оранжевом */
.hero__cta.nm-btn--primary { background: #fff; color: #17110d; box-shadow: 0 14px 34px -12px rgba(0,0,0,.5); }
.hero__cta.nm-btn--primary:hover { background: #fff; transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.6); }
.hero__cta-ico { transition: transform .25s ease; }
.hero__cta:hover .hero__cta-ico { transform: translateX(4px); }

/* --------------------------------------------------------------- появление */
/* Хиро — выше сгиба. Показываем контент сразу, БЕЗ анимации въезда: любая
   opacity/transform-анимация на LCP-контенте (заголовок) заставляет Chrome
   постоянно инвалидировать LCP-кандидата, и на медленных устройствах PSI
   трасса заканчивается «инвалидированным» LCP → ошибка NO_LCP.
   Плавность оставляем только на секциях ниже сгиба (появляются при скролле). */
[data-reveal] { opacity: 1; transform: none; }

/* заглушка следующей секции (на белом) */
.section-placeholder { height: 60vh; }

/* --------------------------------------------------------------- адаптив */
@media (max-width: 900px) {
  .site-header { gap: 10px; position: relative; z-index: 70; }   /* шапка над оверлеем */
  .site-header__logo img { height: 28px; }
  .site-burger { display: flex; margin-left: auto; }
  .site-header__cta { display: none; }              /* кнопка уходит в меню */
  .site-nav__cta {
    display: inline-flex; justify-content: center; width: 100%; margin-top: 10px;
    padding-block: 1.05em; font-size: 1rem;         /* немного выше */
  }
  .site-nav__cta::after { display: none; }
  /* белый текст кнопки (перекрываем цвет ссылок меню) */
  .site-nav a.site-nav__cta,
  .site-nav a.site-nav__cta:hover { color: #fff; }
  /* nav — выпадающая панель шириной 94vw по центру */
  .site-nav {
    position: absolute; top: calc(100%);
    left: 50%; right: auto; width: 94vw; margin-left: -47vw;
    z-index: 71; flex-direction: column; align-items: stretch; gap: 1px; margin-block: 0;
    padding: 12px; background: #fff; border: 1px solid rgba(20, 16, 14, .1); border-radius: var(--nm-radius-md);
    box-shadow: 0 26px 54px -22px rgba(20, 16, 14, .4);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .site-header.is-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  .site-nav a:not(.site-nav__cta) { padding: 9px 16px; border-radius: var(--nm-radius-sm); font-size: 1.02rem; }
  .site-nav a::after { display: none; }
  .site-nav a:not(.site-nav__cta):hover,
  .site-nav a:not(.site-nav__cta):focus-visible { background: rgba(242, 53, 0, .08); color: #14100e; }
  .hero__copy { max-width: 100%; }

  /* затемнение фона + блокировка скролла при открытом меню */
  body.nav-open { overflow: hidden; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 50;
    background: rgba(10, 6, 3, .62);   /* без backdrop-filter blur — дорого на мобильном GPU */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility .25s;
  }
  body.nav-open::before { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* ------- планшет / крупный телефон ------- */
@media (max-width: 760px) {
  .hero {
    /* svh не скачет из-за адресной строки браузера; vh — запасной вариант */
    min-height: 88vh; min-height: 88svh;
  }
  /* белые полосы-рамку убираем на мобильных */
  .hero__crosshair { display: none; }
  /* шейп-стрелку увеличиваем на мобильных */
  .hero__shapes { width: 350%; top: calc(50% - 80px); }
  .hero__copy { transform: translateY(14px); }
  .hero__title { font-size: clamp(1.7rem, 8.4vw, 3rem); line-height: 1.02; }
  .hero__line { white-space: normal; }              /* заголовок не обрезается */
  .hero__lead {
    margin-top: clamp(16px, 2.6vh, 26px); max-width: 42ch;
    font-size: clamp(.94rem, 3.7vw, 1.06rem); line-height: 1.58;
  }
  .hero__actions { width: 100%; margin-top: clamp(22px, 3.4vh, 36px); }
  .hero__cta { width: 100%; justify-content: center; padding-block: .95em; }
  /* пилюли — прижаты к низу, но без чрезмерного отступа */
  .hero__pills { padding-bottom: clamp(30px, 6vh, 56px); gap: 8px; }
}

/* ------- телефон ------- */
@media (max-width: 520px) {
  .page { padding: clamp(10px, 3vw, 16px) clamp(10px, 3vw, 16px) clamp(12px, 3vw, 18px); }
  .hero { --hero-pad: clamp(16px, 5vw, 26px); min-height: 90vh; min-height: 90svh; border-radius: var(--nm-radius-md); }
  .hero__copy { transform: none; }
  .hero__title { font-size: clamp(1.55rem, 8.8vw, 2.5rem); }
  .hero__lead { font-size: clamp(.9rem, 4vw, 1rem); line-height: 1.55; max-width: 38ch; }
  .hero__pills {
    padding-bottom: clamp(22px, 5vh, 40px); gap: 7px;
    max-width: 380px; margin-inline: auto;
  }
  .hero__pills li {
    font-size: .68rem; padding: .52em .9em; letter-spacing: .1em;
    border-radius: var(--nm-radius-sm);
  }
  .hero__pills li::before { width: 7px; height: 7px; }
}

/* ------- узкий телефон ------- */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(1.42rem, 9.4vw, 1.9rem); }
  .hero__lead { font-size: .9rem; }
  .hero__pills li { font-size: .64rem; padding: .5em .8em; letter-spacing: .08em; }
}

/* --------------------------------------------------- сниженная анимация */
@media (prefers-reduced-motion: reduce) {
  .hero__line > span { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__line--accent > span::after { transform: scaleX(1); transition: none; }
}