ArtDeco_SaaS_MegaMenu

<nav class="bg-gradient-to-r from-purple-800 to-indigo-900 text-white dark:from-gray-900 dark:to-black font-serif shadow-lg">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center">
    <a href="#" class="text-2xl font-bold tracking-wider uppercase text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out transform hover:scale-105">
      SaaSymmetry
    </a>
    
    <!-- Mobile Menu Button -->
    <button class="md:hidden focus:outline-none" aria-label="Toggle menu">
      <svg class="w-8 h-8 text-purple-200 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Desktop Menu (visible on md and up) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12">
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Features</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Analytics</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Automation</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Integrations</a>
        </div>
      </div>
      
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Solutions</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Enterprise</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Small Business</a>
        </div>
      </div>

      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Pricing</a>
      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Contact</a>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, can be toggled by JS) -->
  <!-- For a purely HTML/CSS solution, this would typically be hidden and revealed with a :checked pseudo-class on a hidden checkbox, 
       but that gets complex for nested menus without JS. This is illustrative for positioning. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 text-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Features</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Solutions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Pricing</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Contact</a>
    </div>
  </div>
</nav>