Glassmorphic Fixed Navbar with Responsive Links

<div class="fixed top-0 left-0 right-0 z-50 bg-transparent pt-6 pr-6 pb-6 pl-6">
  <div class="max-w-4xl border-white/10 border rounded-full mr-auto ml-auto pt-3 pr-6 pb-3 pl-6" style="background: linear-gradient(180deg, rgba(14,16,26,0.55), rgba(14,16,26,0.35)) padding-box, linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08)) border-box; border: 1px solid transparent; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);">
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <span class="text-lg font-semibold text-white/90 tracking-tight">DataFlow</span>
    </div>
    <ul class="hidden md:flex items-center gap-1 text-sm font-medium text-white/60">
      <li class="">
        <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Analytics</a>
      </li>
      <li class="">
        <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Platform</a>
      </li>
      <li class="">
        <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Solutions</a>
      </li>
      <li class="">
        <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Enterprise</a>
      </li>
      <li class="">
        <a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-sans">Pricing</a>
      </li>
    </ul>
    <div class="flex items-center gap-1.5 md:gap-2">
      <button class="inline-flex md:hidden 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="Menu">
        <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-5 h-5 stroke-[1.5] text-white/70">
          <line x1="4" y1="6" x2="20" y2="6" class=""></line>
          <line x1="4" y1="12" x2="20" y2="12" class=""></line>
          <line x1="4" y1="18" x2="20" y2="18" class=""></line>
        </svg>
      </button>
      <button class="hidden md:inline-flex 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" class=""></path>
          <circle cx="12" cy="7" r="4" class=""></circle>
        </svg>
      </button>
      <button class="hidden md:inline-flex 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="Dashboard">
        <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="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
          <path d="M18 17V9" class=""></path>
          <path d="M13 17V5" class=""></path>
          <path d="M8 17v-3" class=""></path>
        </svg>
        <span class="absolute -top-1 -right-1 w-4 h-4 bg-emerald-500 text-white text-xs rounded-full flex items-center justify-center font-medium font-sans">3</span>
      </button>
    </div>
  </div>
</div>
</div>