/* Global navbar source of truth for all pages */
nav,
#mainNav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: rgba(9, 9, 11, 0.94) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 0 !important;
}

nav .container,
#mainNav .container {
  display: flex !important;
  align-items: center !important;
  min-height: 66px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding-left: clamp(24px, 4vw, 60px) !important;
  padding-right: clamp(24px, 4vw, 60px) !important;
  gap: 0 !important;
}

nav .logo,
#mainNav .logo {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: auto !important;
}

nav .logo img,
#mainNav .logo img,
nav .logo .logo-img,
#mainNav .logo .logo-img {
  display: block !important;
  height: 34px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  filter: none !important;
}

nav .nav-center,
#mainNav .nav-center {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 18px !important;
  position: static !important;
  transform: none !important;
}

nav .nav-center a,
#mainNav .nav-center a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
  border: none !important;
  transition: color 0.18s ease !important;
}

nav .nav-center a::after,
#mainNav .nav-center a::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 4px !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0 !important;
  transform: scaleX(0.4) !important;
  transform-origin: center !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

nav .nav-center a:hover,
nav .nav-center a.active,
#mainNav .nav-center a:hover,
#mainNav .nav-center a.active {
  color: #ffffff !important;
  background: transparent !important;
}

nav .nav-center a:hover::after,
nav .nav-center a.active::after,
#mainNav .nav-center a:hover::after,
#mainNav .nav-center a.active::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

nav .nav-right,
#mainNav .nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

nav .btn,
#mainNav .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  white-space: nowrap !important;
}

nav .btn-ghost,
#mainNav .btn-ghost {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

nav .btn-ghost:hover,
#mainNav .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

nav .btn-primary,
#mainNav .btn-primary {
  min-width: 132px !important;
  background: #9d59e1 !important;
  color: #fff !important;
  border-color: #9d59e1 !important;
}

nav .btn-primary:hover,
#mainNav .btn-primary:hover {
  background: #8c4fd0 !important;
  border-color: #8c4fd0 !important;
}

@media (max-width: 1024px) {
  nav .nav-center,
  #mainNav .nav-center {
    display: none !important;
  }

  /* Show hamburger toggle */
  nav .mobile-menu-toggle,
  #mainNav .mobile-menu-toggle {
    display: inline-flex !important;
  }

  /* Always hide Sign In (btn-ghost) on mobile */
  nav .nav-right > .btn-ghost,
  nav .nav-right > a.btn-ghost,
  #mainNav .nav-right > .btn-ghost,
  #mainNav .nav-right > a.btn-ghost {
    display: none !important;
  }

  /* Hide Request Demo from navbar when a mobile menu toggle is present
     (Request Demo lives inside the mobile dropdown on those pages) */
  nav .nav-right:has(.mobile-menu-toggle) > .btn-primary,
  nav .nav-right:has(.mobile-menu-toggle) > a.btn-primary,
  nav .nav-right:has(.mobile-menu-toggle) > button.btn-primary,
  #mainNav .nav-right:has(.mobile-menu-toggle) > .btn-primary,
  #mainNav .nav-right:has(.mobile-menu-toggle) > a.btn-primary,
  #mainNav .nav-right:has(.mobile-menu-toggle) > button.btn-primary {
    display: none !important;
  }
}