Cyberpunk Navigation collante

<header class="w-full sticky top-0 z-50 transition-all duration-300 backdrop-blur-sm bg-gradient-to-r from-orange-600/80 to-red-700/80 dark:from-gray-900/90 dark:to-black/90 shadow-lg dark:shadow-xl dark:shadow-fuchsia-700/30">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-yellow-300 dark:text-fuchsia-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121a3 3 0 114.243 4.243L14.828 20.97a4 4 0 01-5.656 0L4.121 16.879a3 3 0 014.243-4.243m.86-10.428e-5L12 5m-2 4a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      <a href="#" class="text-2xl font-extrabold text-white tracking-widest uppercase filter drop-shadow-md text-shadow-neon-orange dark:text-fuchsia-400 dark:text-shadow-neon-purple">SynthBank</a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Accounts
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Investments
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Loans
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Support
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-yellow-300 text-orange-800 hover:bg-yellow-400 transition-colors duration-300 dark:bg-fuchsia-600 dark:text-white dark:hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-orange-600 dark:focus:ring-fuchsia-500 dark:focus:ring-offset-gray-900">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 01d 3v1" />
        </svg>
      </button>
      <button class="md:hidden p-2 rounded-md text-white hover:bg-white/10 transition-colors duration-300 dark:text-fuchsia-300 dark:hover:bg-fuchsia-900/50 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:focus:ring-fuchsia-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (hidden by default) -->
  <div class="md:hidden origin-top transition-all duration-300 ease-out max-h-0 overflow-hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-start">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Accounts</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Investments</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Loans</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Support</a>
    </div>
  </div>
</header>

<style>
  /* This is a simple CSS workaround for the neon text effect if not using a utility class */
  /* For a more robust solution, consider a custom Tailwind plugin for text-shadow-neon */
  .text-shadow-neon-orange {
    text-shadow: 0 0 5px rgba(255, 140, 0, 0.7),
                 0 0 10px rgba(255, 165, 0, 0.5),
                 0 0 20px rgba(255, 165, 0, 0.3);
  }
  .dark .text-shadow-neon-purple {
    text-shadow: 0 0 5px rgba(220, 38, 203, 0.7),
                 0 0 10px rgba(236, 72, 153, 0.5),
                 0 0 20px rgba(244, 114, 182, 0.3);
  }
</style>

<script>
  // Basic JavaScript for mobile menu toggle (required for interactive features).
  // Tailwind CSS alone cannot handle toggling classes based on user interaction directly.
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('button[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuButton && mobileMenu) {
      menuButton.addEventListener('click', () => {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
        menuButton.setAttribute('aria-expanded', !isExpanded);
        if (isExpanded) {
          mobileMenu.style.maxHeight = '0px';
        } else {
          mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
        }
      });
    }
  });
</script>