/* ═════ ФИКСИРОВАННАЯ ШАПКА (десктоп) + ПОДСВЕТКА МЕНЮ (20.10.2026) ═════
   Хозяин: «сделать чтобы в десктоп версии шапка была фикс при скролле, а пункты
   меню при этом как ховер-эффект при наведении также подсвечивались».

   ЛОГИКА:
   · шапка прилипает к верху (sticky, а не fixed — не прыгает контент);
   · при прокрутке появляются фон с размытием и тень (класс .is-scrolled);
   · наведение на пункт меню — плавная подложка-пилюля + смена цвета;
   · на мобильных (<=880px) — та же логика, но компактнее. */

html { scroll-padding-top: 84px; }   /* чтобы якоря не прятались под шапкой */

header.top {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  background: rgba(15, 15, 20, .72);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* после прокрутки — плотнее фон и тень */
header.top.is-scrolled {
  background: rgba(13, 13, 18, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 0 rgba(139, 92, 246, .12);
}

/* пункты меню: плавная подложка при наведении */
header.top nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--muted, #9a9ab0);
  transition: color .18s ease, background .18s ease;
}
header.top nav a:hover,
header.top nav a:focus-visible {
  color: #fff;
  background: rgba(139, 92, 246, .16);
  outline: none;
}
/* тонкая подсветка-подчёркивание снизу при наведении (акцент) */
header.top nav a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8b5cf6, #f97316);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
header.top nav a:hover::after,
header.top nav a:focus-visible::after { transform: scaleX(1); }

/* активный раздел (если проставим) — тонкая полоска постоянно */
header.top nav a.is-active { color: #fff; }
header.top nav a.is-active::after { transform: scaleX(1); }

@media (max-width: 880px) {
  header.top { background: rgba(13, 13, 18, .95); }
  html { scroll-padding-top: 70px; }
}