:root{
  --nav-bg: rgba(22,28,36,.20);
  --nav-bg-solid: rgba(22,28,36,.85);
  --nav-bdr: rgba(255,255,255,.08);
  --nav-bdr-solid: rgba(255,255,255,.12);
  --blur0: 0px;
  --blurOn: 16px;
}

/* Плавающий контейнер */
.navbar-floating{
  position: fixed;
  left: 50%;
  top: 10px;                              /* финальная позиция */
  transform: translate(-50%, -32px);      /* старт: выше на 32px */
  opacity: 0;
  pointer-events: none;
  width: min(1100px, calc(100% - 24px));
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 14px;

  z-index: 999;
  border-radius: 20px;
  padding: 10px 14px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-bdr);
  backdrop-filter: blur(var(--blur0)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--blur0)) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  opacity: 0;
  pointer-events: none;

  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.22,.61,.36,1),
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .4s ease,
    backdrop-filter .4s ease;
}

/* Появление при скролле */
.navbar-floating.is-visible{
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0px);
  background: var(--nav-bg-solid);
  border-color: var(--nav-bdr-solid);
  backdrop-filter: blur(var(--blurOn)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--blurOn)) saturate(120%);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

/* Бренд */
.nav__brand{
  font-weight: 800;
  color: #fff; text-decoration: none;
  letter-spacing:.3px;
}

/* Десктопные ссылки */
.nav__links{
  display:flex; gap:18px; justify-self:center;
}
.nav__links a{
  color: rgba(255,255,255,.92);
  text-decoration:none; font-weight:600; font-size:14px;
  padding: 8px 10px; border-radius:10px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nav__links a:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.nav__cta{ background:#fff; color:#111 !important; border-radius:12px; padding:8px 12px; }
.nav__cta:hover{ background:#f3f3f3; }

/* === Бургер и десктоп === */
.nav__burger{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  width:42px;
  height:38px;
  border-radius:12px;
  display:none; /* <-- по умолчанию скрыт */
  place-items:center;
  gap:4px;
  padding:0 8px;
  justify-self:end;
}
@media (max-width: 960px){
  .nav__burger{ display:grid; }   /* показываем бургер только на мобилках */
  .nav__links{ display:none; }    /* и убираем десктоп-меню */
}

.nav__burger:focus-visible{ outline:2px solid rgba(255,255,255,.4); outline-offset:2px; }

.burger__bar{
  display:block; width: 22px; height: 2px; background:#fff; border-radius: 999px;
  transition: transform .3s ease, opacity .2s ease, width .3s ease;
}
.nav__burger[aria-expanded="true"] .burger__bar:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .burger__bar:nth-child(2){
  opacity: 0;
}
.nav__burger[aria-expanded="true"] .burger__bar:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* Скрываем десктоп-меню на мобилках */
@media (max-width: 960px){
  .nav__links{ display:none; }
}

/* === Подложка (вся страница, а не шапка) === */
.nav-panel{
  position: fixed;
  inset: 0;
  display:grid;
  place-items:start center;
  background: rgba(0,0,0,.45);     /* затемнение всей страницы */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 900;                   /* ниже шапки, чтобы шапка не затемнялась */
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
}

/* внутренняя карточка */
/* === внутренняя карточка меню === */
.nav-panel__inner{
  width: min(560px, 92vw);
  margin-top: 100px;
  background: rgba(22,28,36,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  transform: translateY(-20px);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}




/* === Шапка остаётся поверх всего === */
.navbar-floating{
  z-index: 9999;
}

/* пункты */
.nav-panel__link{
  display:block;
  color:#fff; text-decoration:none; font-weight:700;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-panel__link:hover{ background: rgba(255,255,255,.06); }
.nav-panel__link:last-child{ border-bottom: 0; }
.nav-panel__cta{
  background:#fff; color:#111; text-align:center; margin: 12px; border-radius:12px;
}

/* базово */
#nav .nav__link.is-active {
  background: rgba(0,0,0,0.06);   /* лёгкий фон */
  border-radius: 10px;
}

/* если есть тёмная тема */
@media (prefers-color-scheme: dark) {
  #nav .nav__link.is-active {
    background: rgba(255,255,255,0.08);
  }
}

/* состояние «открыто» */
/* === состояние «открыто» === */
.nav-panel.is-open{
  opacity: 1;
  pointer-events: auto;
}
.nav-panel.is-open .nav-panel__inner{
  transform: translateY(0);
}

/* === Блокировка скролла под панелью === */
.body--lock{ overflow:hidden; }


/* Motion safe */
@media (prefers-reduced-motion: reduce){
  .navbar-floating, .nav-panel, .nav-panel__inner, .burger__bar{ transition: none !important; }
}