Navbar with Responsive Menu - Rulz&Co

<div class="fixed top-0 left-0 right-0 z-50 bg-transparent pt-6 pr-6 pb-6 pl-6">
  <div class="max-w-4xl border rounded-full mr-auto ml-auto pt-3 pr-6 pb-3 pl-6 border-white/10"
    style="background: linear-gradient(180deg, rgba(14,16,26,0.55), rgba(14,16,26,0.35)) padding-box, linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08)) border-box; border: 1px solid transparent; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <span class="text-lg font-semibold tracking-tight text-white/90">Rulz&amp;Co.</span>
      </div>
      <ul class="hidden md:flex items-center gap-1 text-sm font-medium text-white/60">
        <li><a href="/"
            class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">Home</a>
        </li>
        <li><a href="/services"
            class="transition-colors duration-300 hover:text-white hover:bg-white/5 rounded-full pt-2 pr-4 pb-2 pl-4">Services</a>
        </li>
        <li><a href="/#work"
            class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">Works</a>
        </li>
        <li><a href="/#contact"
            class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">Contact</a>
        </li>
        <li><a href="/#faq"
            class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">FAQ</a>
        </li>
      </ul>
      <div class="flex items-center gap-1.5 md:gap-2">
        <button class="inline-flex md:hidden p-2 rounded-full transition-all duration-300 border hover:bg-white/5 border-white/5" style="background: rgba(255, 255, 255, 0.02);" aria-label="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" class="w-5 h-5 stroke-[1.5] text-white/70">
              <line x1="4" y1="6" x2="20" y2="6" class=""></line>
              <line x1="4" y1="12" x2="20" y2="12" class=""></line>
              <line x1="4" y1="18" x2="20" y2="18" class=""></line>
            </svg>
          </button>
        <a href="https://verse.example.com" target="_blank" rel="noopener"
          class="hidden md:inline-flex items-center gap-1.5 p-2 rounded-full transition-all duration-300 border hover:bg-white/5 border-white/5 text-white/80"
          style="background: rgba(255, 255, 255, 0.02);" aria-label="Visit live site">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 stroke-[1.5]" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path d="M7 7h10v10" class=""></path>
            <path d="M7 17 17 7" class=""></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>