/* =============================================
   NAV — navbar, mobile menu
   ============================================= */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nav-bg-idle); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.nav__logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.nav__logo span { color: var(--accent); }
.nav__links { display: flex; gap: 32px; }
.nav__links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; transition: color var(--transition); }
.nav__links a:hover { color: var(--text); }
.nav__cta { padding: 9px 20px; font-size: 0.88rem; }

/* nav__actions groups toggle + cta + burger */
.nav__actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 101; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }
.nav__burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: flex; flex-direction: column; gap: 0;
  position: fixed; top: 68px; left: 0; right: 0;
  background: var(--bg-2); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 0; z-index: 99; max-height: 0; overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease, background 0.3s ease;
}
.mobile-menu.open { max-height: 420px; padding: 16px 24px 28px; gap: 4px; }
.mobile-menu__link { color: var(--text-muted); font-size: 1.05rem; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--border); transition: color var(--transition); display: block; }
.mobile-menu__link:hover { color: var(--text); }
.mobile-menu .btn { margin-top: 16px; width: 100%; justify-content: center; }