Space Tourism Navigation Header

<div class="fixed top-0 left-0 right-0 z-50 px-6 py-6 bg-transparent">
  <div class="max-w-4xl mx-auto border border-white/10 rounded-full px-6 py-3" style="background: rgba(10, 11, 20, 0.9); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <span class="text-lg font-semibold tracking-tight text-white font-sans">Astrolux</span>
      </div>
      <ul class="hidden md:flex items-center gap-1 text-sm font-medium text-white/60">
        <li>
          <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Missions</a>
        </li>
        <li>
          <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Technology</a>
        </li>
        <li>
          <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Training</a>
        </li>
        <li>
          <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Travelers</a>
        </li>
        <li>
          <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Support</a>
        </li>
      </ul>
      <div class="flex items-center gap-2">
        <button class="hover:bg-white/5 p-2 rounded-full transition-all duration-300 border border-white/5" style="background: rgba(255, 255, 255, 0.02);" aria-label="Account">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-[1.5] text-white/60">
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </button>
        <button class="relative hover:bg-white/5 p-2 rounded-full transition-all duration-300 border border-white/5" style="background: rgba(255, 255, 255, 0.02);" aria-label="Bookings">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-[1.5] text-white/60">
            <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
            <path d="M12 11h4"></path>
            <path d="M12 16h4"></path>
            <path d="M8 11h.01"></path>
            <path d="M8 16h.01"></path>
          </svg>
          <span class="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 text-white text-xs rounded-full flex items-center justify-center font-medium font-sans">1</span>
        </button>
      </div>
    </div>
  </div>
</div>