Responsive Header with Logo, Nav & Social Icons

<header class="relative z-20 w-full">
        <div class="max-w-7xl md:px-8 flex mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 items-center justify-between">
          <!-- Logo -->
          <a href="#" class="flex items-center gap-3 group">
            <div class="h-9 w-9 shadow-cyan-500/10 grid place-items-center bg-[conic-gradient(from_315deg,var(--tw-gradient-stops))] from-cyan-400 via-emerald-300 to-cyan-500 rounded-lg shadow-lg">
              <span class="text-white/90 text-[13px] font-semibold tracking-tight">EX</span>
            </div>
            <div class="text-2xl md:text-3xl font-semibold tracking-tight leading-none">
              <span class="">EXO</span><span class="text-cyan-400">9</span>
            </div>
          </a>

          <!-- Center nav (desktop) -->
          <nav class="hidden md:flex items-center gap-6 text-sm text-white/70">
            <a class="hover:text-white transition-colors font-medium" href="#">Tickets</a>
            <span class="text-white/20">•</span>
            <a class="hover:text-white transition-colors font-medium" href="#">Galleries</a>
            <span class="text-white/20">•</span>
            <a class="hover:text-white transition-colors font-medium" href="#">Dome</a>
            <span class="text-white/20">•</span>
            <a class="hover:text-white transition-colors font-medium" href="#">Store</a>
          </nav>

          <!-- Social / Menu -->
          <div class="flex items-center gap-2">
            <button class="hidden sm:flex items-center justify-center h-10 w-10 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition" aria-label="Instagram">
              <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="instagram" class="lucide lucide-instagram w-5 h-5 text-white/80"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
            </button>
            <button class="hidden sm:flex items-center justify-center h-10 w-10 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition" aria-label="Website">
              <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="globe" class="lucide lucide-globe w-5 h-5 text-white/80"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
            </button>
            <button class="hidden sm:flex items-center justify-center h-10 w-10 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition" aria-label="YouTube">
              <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="youtube" class="lucide lucide-youtube w-5 h-5 text-white/80"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" class=""></path><path d="m10 15 5-3-5-3z" class=""></path></svg>
            </button>
            <button class="sm:hidden inline-flex items-center justify-center h-10 w-10 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition" 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" data-lucide="menu" class="lucide lucide-menu w-5 h-5 text-white/80"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
            </button>
          </div>
        </div>
      </header>