Fixed Glassmorphism Top Navigation Bar

<nav class="fixed z-50 flex w-full pr-4 pl-4 top-6 justify-center">
  <div
    class="liquid-glass !rounded-full !border-white/10 px-2 py-2 flex items-center gap-1 shadow-2xl animate-fade-in-down">
    <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-full hover:bg-white/5 transition-all group">
      <div class="relative w-6 h-6 flex items-center justify-center">
        <span class="absolute inset-0 rounded-full bg-gradient-to-tr from-indigo-500 to-rose-400 blur-sm opacity-70 group-hover:opacity-100 transition-opacity"></span>
        <iconify-icon icon="solar:infinity-linear" class="text-white relative z-10"></iconify-icon>
      </div>
      <span class="text-xs font-bold tracking-wider text-white uppercase hidden sm:block">Eterna</span>
    </a>

    <div class="h-4 w-px bg-white/10 mx-2"></div>

    <div class="flex items-center gap-1 text-[11px] font-medium text-zinc-400">
      <a href="#vision" class="px-4 py-2 rounded-full hover:text-white hover:bg-white/5 transition-all">Vision</a>
      <a href="#tech" class="px-4 py-2 rounded-full hover:text-white hover:bg-white/5 transition-all">Core</a>
      <a href="#impact" class="px-4 py-2 rounded-full hover:text-white hover:bg-white/5 transition-all">Impact</a>
    </div>

    <div class="pl-2">
      <a href="#access"
        class="px-5 py-2.5 rounded-full bg-white text-black text-[11px] font-bold uppercase tracking-wide hover:bg-zinc-200 transition-all shadow-[0_0_20px_rgba(255,255,255,0.3)]">
        Access
      </a>
    </div>
  </div>
</nav>