Fixed Transparent Navbar with Gradient CTA

<header class="fixed top-0 inset-x-0 z-50 transition-transform duration-300 will-change-transform bg-black/70 border-white/10 border-b backdrop-blur-md">
      <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14">
        <div class="h-full flex items-center justify-between">
          <!-- Brand -->
          <a href="#overview" class="flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md">
            <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
              <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" data-lucide="shapes" class="lucide lucide-shapes w-[18px] h-[18px]" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(243, 244, 246);"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" class=""></path><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect><circle cx="17.5" cy="17.5" r="3.5" class=""></circle></svg>
            </span>
            <span class="text-base font-semibold tracking-tighter">ArcOS</span>
          </a>

          <!-- Desktop nav -->
          <div class="hidden md:flex items-center gap-1 rounded-full border border-white/10 px-2">
            <a data-nav-link="" href="#features" class="px-3 py-1.5 text-sm text-gray-300 hover:text-white transition">Features</a>
            <a data-nav-link="" href="#product" class="px-3 py-1.5 text-sm text-gray-300 hover:text-white transition">Commands</a>
            <a data-nav-link="" href="#analytics" class="px-3 py-1.5 text-sm text-gray-300 hover:text-white transition">Analytics</a>
            <a data-nav-link="" href="#pricing" class="px-3 py-1.5 text-sm text-gray-300 hover:text-white transition">Pricing</a>
          </div>

          <!-- Actions -->
          <div class="flex items-center gap-3">
            <div class="inline-flex">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');</style>
  <button type="button" class="group relative inline-flex shadow-[0_8px_16px_-4px_rgba(59,130,246,0.3)] hover:shadow-[0_12px_20px_-6px_rgba(59,130,246,0.4)] transition duration-300 ease-out select-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 transform-gpu hover:-translate-y-0.5 text-white rounded-lg pt-[1px] pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background: linear-gradient(144deg, rgba(59,130,246,0.8), rgba(59,130,246,0.4) 50%, rgba(59,130,246,0.6)); font-family: Inter, 'Helvetica Neue', sans-serif;">
    <span class="flex items-center justify-center gap-2 text-[15px] leading-none w-full h-full transition-colors duration-300 group-hover:bg-black/30 font-medium bg-black/20 rounded-lg pt-2 pr-4 pb-2 pl-4">
      <span class="">Sign Up</span>
    </span>
  </button>
</div>
            <button id="nav-toggle" aria-expanded="false" aria-controls="mobile-panel" class="md:hidden p-2 rounded-md transition-colors hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu w-5 h-5"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x w-5 h-5 hidden"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
            </button>
          </div>
        </div>
      </nav>
    </header>