/* ============================ ЛИПКАЯ ШАПКА ============================

   Полоса на всю ширину, которая живёт отдельно от шапки в hero:
   на самом верху страницы её нет (работает обычная шапка внутри hero),
   ниже она выезжает сверху при скролле ВВЕРХ и уезжает при скролле вниз
   — та же логика, что на elevenlabs.io.

   Разметку не дублируем: содержимое (лого, пункты меню, кнопка) клонирует
   из .hero .nav скрипт claude/sticky-nav.js. Поэтому все размеры, состояния
   пунктов и адаптив берутся из styles.css автоматически — здесь только
   сама полоса и её отступы.

   Отступы по бокам и сверху/снизу повторяют hero__inner + .nav, чтобы
   при появлении полосы лого и кнопка стояли ровно там же, где стояли
   в hero: 16/40 на десктопе (высота 81), 12/16 с 899, 12/12 с 759.     */

.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: var(--bg);
  border-bottom: 1px solid var(--divider);

  /* спрятана: уехала вверх целиком и вынута из фокуса.
     visibility (а не display) — чтобы работал переход, и при этом
     ссылки в спрятанной полосе не ловили Tab */
  visibility: hidden;
  transform: translateY(-100%);
  transition:
    transform .3s cubic-bezier(.4, 0, .2, 1),
    visibility .3s cubic-bezier(.4, 0, .2, 1);
}

.sticky-nav.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.sticky-nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 40px;
}

/* у клона padding-bottom снимаем: вертикальные отступы задаёт обёртка,
   иначе к 16px обёртки добавились бы ещё 16px из .nav */
.sticky-nav .nav { padding: 0; }

@media (max-width: 1199px) {
  .sticky-nav__inner { padding: 16px 40px; }
}

/* с 899 меню скрыто правилом .nav__links { display: none } из styles.css —
   в полосе остаются лого 83×35 и кнопка «Запросить демо» */
@media (max-width: 899px) {
  .sticky-nav__inner { padding: 12px 16px; }
}

@media (max-width: 759px) {
  .sticky-nav__inner { padding: 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-nav { transition: none; }
}

/* якоря: если полоса видна, блок, к которому прокрутил пункт меню,
   не должен уезжать под неё */
#benefits, #security, #faq, #process, #demo { scroll-margin-top: 92px; }

@media (max-width: 899px) {
  #benefits, #security, #faq, #process, #demo { scroll-margin-top: 76px; }
}