Navbar Dark

<header class="ws-navbar sticky top-0 z-50 border-b border-slate-800/60 bg-[var(--ws-navbar-bg)]/95 backdrop-blur">
  <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
    <!-- Brand -->
    <a href="#" class="text-base font-semibold tracking-tight text-white">Webspire</a>

    <!-- Desktop nav (centered) -->
    <nav aria-label="Primary" class="hidden items-center gap-7 md:flex">
      <a href="#features" class="text-sm font-medium text-slate-300 transition hover:text-white">Features</a>
      <a href="#pricing" class="text-sm font-medium text-slate-300 transition hover:text-white">Pricing</a>
      <a href="#docs" class="text-sm font-medium text-slate-300 transition hover:text-white">Docs</a>
    </nav>

    <!-- Actions -->
    <div class="flex items-center gap-3">
      <a href="#login" class="hidden text-sm font-medium text-slate-400 transition hover:text-white sm:inline">Sign in</a>
      <a href="#start" class="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-400">Get started</a>

      <!-- Mobile hamburger -->
      <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-slate-400 transition hover:bg-slate-800 hover:text-white md:hidden" aria-label="Open menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile menu panel (hidden by default) -->
  <div class="hidden border-t border-slate-800/60 md:hidden" id="mobile-menu">
    <nav aria-label="Mobile navigation" class="space-y-1 px-6 pb-4 pt-3">
      <a href="#features" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-300 transition hover:bg-slate-800 hover:text-white">Features</a>
      <a href="#pricing" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-300 transition hover:bg-slate-800 hover:text-white">Pricing</a>
      <a href="#docs" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-300 transition hover:bg-slate-800 hover:text-white">Docs</a>
      <a href="#login" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-400 transition hover:bg-slate-800 hover:text-white">Sign in</a>
    </nav>
  </div>
</header>