Responsive Navbar with Mobile Overlay Menu

<header class="relative w-full">
  <nav class="mx-auto max-w-7xl px-6 py-5 flex items-center justify-between">
    <a href="#" class="flex items-center gap-3 group">
      <div
        class="h-8 w-8 rounded-md bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-sm tracking-tight font-semibold group-hover:bg-white/15 transition-colors"
        style="letter-spacing:-0.02em;">
        ΛN
      </div>
      <span class="text-base font-medium tracking-tight group-hover:opacity-90 transition-opacity">Nova</span>
    </a>
    <div class="hidden md:flex items-center gap-8">
      <a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Features</a>
      <a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Pricing</a>
      <a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Docs</a>
      <a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Contact</a>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <a href="#"
        class="px-3.5 py-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 text-sm font-medium transition-colors">Sign
        in</a>
      <a href="#"
        class="px-3.5 py-2 rounded-lg bg-emerald-500/90 hover:bg-emerald-500 text-neutral-900 text-sm font-semibold transition-colors">Get
        started</a>
    </div>
    <button id="mobileOpen" class="md:hidden p-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 transition-colors" aria-label="Open 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" data-lucide="menu" class="lucide lucide-menu h-5 w-5" style="stroke-width:1.5;"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
        </button>
  </nav>

  <!-- Mobile Menu -->
  <div id="mobileMenu" class="hidden fixed inset-0 z-50 bg-neutral-950/80 backdrop-blur-md">
    <div class="absolute right-4 top-4">
      <button id="mobileClose" class="p-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 transition-colors" aria-label="Close 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" data-lucide="x" class="lucide lucide-x h-5 w-5" style="stroke-width:1.5;"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
          </button>
    </div>
    <div class="mx-auto mt-20 w-11/12 max-w-sm rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-6">
      <div class="flex flex-col gap-3">
        <a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
          <span class="text-sm font-medium">Features</span>
          <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"
            data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m9 18 6-6-6-6" class=""></path>
          </svg>
        </a>
        <a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
          <span class="text-sm font-medium">Pricing</span>
          <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"
            data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m9 18 6-6-6-6" class=""></path>
          </svg>
        </a>
        <a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
          <span class="text-sm font-medium">Docs</span>
          <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"
            data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m9 18 6-6-6-6" class=""></path>
          </svg>
        </a>
        <a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
          <span class="text-sm font-medium">Contact</span>
          <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"
            data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m9 18 6-6-6-6" class=""></path>
          </svg>
        </a>
      </div>
      <div class="mt-5 flex items-center gap-2">
        <a href="#"
          class="flex-1 px-3.5 py-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 text-sm font-medium text-center transition-colors">Sign
          in</a>
        <a href="#"
          class="flex-1 px-3.5 py-2 rounded-lg bg-emerald-500/90 hover:bg-emerald-500 text-neutral-900 text-sm font-semibold text-center transition-colors">Get
          started</a>
      </div>
    </div>
  </div>
</header>