Nav bar

<header class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-6xl pr-6 pl-6">
  <div class="bg-gray-900/80 border border-gray-800 rounded-full backdrop-blur-xl">
    <div class="flex pt-3 pr-4 pb-3 pl-6 items-center justify-between">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-3 hover:opacity-90">
        <span class="inline-flex items-center justify-center ring-1 ring-white/10 bg-slate-800 w-8 h-8 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-white" data-icon-replaced="true" data-lucide="bot" style="width: 18px; height: 18px; color: rgb(255, 255, 255);"><path d="M12 8V4H8" class=""></path><rect width="16" height="12" x="4" y="8" rx="2" class=""></rect><path d="M2 14h2" class=""></path><path d="M20 14h2" class=""></path><path d="M15 13v2" class=""></path><path d="M9 13v2" class=""></path></svg>
            </span>
        <div class="flex flex-col leading-none">
          <span class="text-base font-semibold tracking-tight" style="font-family: 'Space Grotesk', Inter, sans-serif;">NovaHire</span>
          <span class="text-[11px] text-gray-400">Your AI Interview Coach</span>
        </div>
      </a>

      <nav class="hidden md:flex items-center gap-6">
        <a href="#product" class="hover:text-white/80 text-sm font-medium text-white/90">Product</a>
        <a href="#features" class="hover:text-white/80 text-sm font-medium text-white/90">Features</a>
        <a href="#pricing" class="hover:text-white/80 text-sm font-medium text-white/90">Pricing</a>
        <a href="#faq" class="hover:text-white/80 text-sm font-medium text-white/90">FAQ</a>
      </nav>

      <div class="hidden md:flex gap-3 items-center">
        <a href="#" class="hover:text-white/70 text-sm font-medium text-white/80">Sign in</a>
        <button type="button" class="group relative overflow-hidden transition-all duration-200 active:scale-[0.98] text-white bg-gradient-to-b from-blue-600 to-blue-700 border-blue-500/40 border rounded-full pt-2.5 pr-4 pb-2.5 pl-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
              <span class="relative z-10 inline-flex items-center gap-2 text-sm font-semibold text-center">
                Start free trial
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" class="transition-transform duration-200 ease-out group-hover:translate-x-0.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 8h9M10 3l6 5-6 5" class=""></path>
                </svg>
              </span>
              <span class="pointer-events-none absolute inset-0 bg-gradient-to-t from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition"></span>
            </button>
      </div>

      <button class="md:hidden inline-flex items-center justify-center rounded-lg border border-gray-800 p-2 text-white/80" aria-label="Open menu">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" class="w-4 h-4">
              <path d="M4 6h16M4 12h16M4 18h16" class=""></path>
            </svg>
          </button>
    </div>
  </div>
</header>