/* =====================================================================
   НАВИГАЦИЯ — шапка, мобильное меню, боковой индикатор «Наверх»
   ===================================================================== */
.nav {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--pad-r) 14px var(--pad-l);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  transition: transform .5s var(--ease-out);
}
.nav.is-shown { transform: none; }

.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 900; font-size: 16px; letter-spacing: .04em; }
.nav__logo i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }

.nav__links { display: flex; gap: clamp(16px, 2.4vw, 36px); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav__cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--on-accent); font-size: 13px; font-weight: 800; }

.nav__burger { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); }
.nav__burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease-out); }
.nav__burger i:first-child { top: 18px; }
.nav__burger i:last-child { top: 25px; }
.menu-open .nav__burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .nav__burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- мобильное меню ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 79;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 90px var(--pad-r) 40px var(--pad-l);
  background: var(--bg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease-io), visibility 0s .7s;
}
.menu-open .mobile-menu { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease-io); }
.mobile-menu a {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--f-display); font-weight: 900; font-size: clamp(32px, 10vw, 56px); text-transform: uppercase; line-height: 1.15;
  opacity: 0; transform: translateY(40px);
  transition: transform .7s var(--ease-out), opacity .5s;
}
.mobile-menu a small { font-family: var(--f-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.menu-open .mobile-menu a { opacity: 1; transform: none; }
.menu-open .mobile-menu a:nth-child(1) { transition-delay: .25s; }
.menu-open .mobile-menu a:nth-child(2) { transition-delay: .31s; }
.menu-open .mobile-menu a:nth-child(3) { transition-delay: .37s; }
.menu-open .mobile-menu a:nth-child(4) { transition-delay: .43s; }
.menu-open .mobile-menu a:nth-child(5) { transition-delay: .49s; }
.menu-open .mobile-menu a:nth-child(6) { transition-delay: .55s; }

/* ---------- боковой индикатор «Наверх» ---------- */
.side-top {
  position: fixed; left: calc(18px + env(safe-area-inset-left, 0px)); top: 50%; z-index: 70;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .4s;
}
.side-top.is-shown { opacity: 1; pointer-events: auto; }
.side-top span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .2s;
}
.side-top:hover span { color: var(--ink); }
.side-top b { position: relative; width: 1px; height: 90px; background: var(--line); overflow: hidden; }
.side-top b i { position: absolute; inset: 0; background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }

@media (width <= 1000px) {
  .nav__links, .nav__cta, .side-top { display: none; }
  .nav__burger { display: block; }
}