Price Display

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 font-sans antialiased">
  <div class="max-w-xs mx-auto bg-white dark:bg-stone-800 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02]">
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <p class="text-sm uppercase tracking-wider font-semibold text-stone-600 dark:text-stone-400 mb-1">Starting From</p>
      <div class="flex items-baseline mb-4">
        <span class="text-2xl sm:text-3xl font-bold text-green-700 dark:text-green-500 mr-1">$</span>
        <span class="text-4xl sm:text-5xl font-extrabold text-stone-900 dark:text-stone-100 lining-nums tabular-nums">450,000</span>
      </div>
      <p class="text-sm text-stone-500 dark:text-stone-400 text-center leading-relaxed">
        Estimated Price per unit
      </p>
    </div>
    <div class="border-t border-stone-200 dark:border-stone-700 p-4 sm:p-5 text-center bg-stone-50 dark:bg-stone-700">
      <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600 transform transition-transform duration-200 hover:-translate-y-0.5">
        Learn More
        <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>
              

                <div class="font-sans antialiased text-purple-200 bg-gray-950 dark:bg-black py-16 px-4 sm:px-8 lg:px-16">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 sm:mb-16 tracking-tight drop-shadow-lg text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 via-rose-500 to-amber-400 dark:from-fuchsia-400 dark:via-rose-400 dark:to-orange-300">
      Our Cybernetic Solutions
    </h2>
    <p class="text-lg sm:text-xl text-center text-purple-300 dark:text-purple-400 mb-16 max-w-3xl mx-auto">
      Navigate the digital frontier with our bespoke services, engineered for peak performance and unparalleled insight. Choose your path to technological superiority.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-12">

      <!-- Pricing Card 1: Standard Protocol -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-fuchsia-600/50 dark:border-fuchsia-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-fuchsia-600/10 dark:bg-fuchsia-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-fuchsia-400">Standard Protocol</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Essential data streams and basic threat analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-rose-400 drop-shadow-md">$499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Basic System Audit</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 Virtual Support</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 10GB Secure Storage</li>
            <li class="flex items-center text-purple-500 dark:text-purple-600"><svg class="w-5 h-5 mr-3 text-purple-600 dark:text-purple-700" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Advanced AI Analytics</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-fuchsia-500 to-rose-500 hover:from-fuchsia-400 hover:to-rose-400 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Initiate Protocol
          </button>
        </div>
      </div>

      <!-- Pricing Card 2: Quantum Nexus (Featured) -->
      <div class="relative bg-gradient-to-br from-fuchsia-900 to-rose-900 dark:from-fuchsia-950 dark:to-rose-950 p-8 rounded-lg shadow-2xl border-2 border-rose-400 dark:border-rose-300 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out scale-102">
        <span class="absolute top-0 right-0 -mr-2 -mt-2 bg-gradient-to-br from-rose-500 to-orange-400 rounded-bl-lg px-4 py-1 text-sm font-semibold uppercase text-gray-950 dark:text-black shadow-md rotate-3">Most Popular</span>
        <div class="absolute inset-0 bg-orange-400/10 dark:bg-rose-400/10 opacity-30 blur-sm animate-pulse"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-300">Quantum Nexus</h3>
          <p class="text-purple-200 dark:text-purple-300 mb-6">Full-spectrum data integration and predictive analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-6xl font-bold text-amber-300 drop-shadow-lg">$999</span>
            <span class="text-xl text-orange-300 dark:text-orange-400 ml-2">/month</span>
          </div>
          <ul class="text-purple-100 dark:text-purple-200 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Complete System Overhaul</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Dedicated Cyber-Agent</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Unlimited Secure Storage</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Advanced AI Predictive Analytics</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Priority Network Access</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-400 to-amber-300 hover:from-orange-300 hover:to-amber-200 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-fuchsia-900 shadow-xl">
            Access Nexus
          </button>
        </div>
      </div>

      <!-- Pricing Card 3: Elite Cipher -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-orange-600/50 dark:border-orange-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-orange-600/10 dark:bg-orange-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-400">Elite Cipher</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Proprietary algorithms and direct neural interface.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-amber-400 drop-shadow-md">$1499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Bespoke System Engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 On-Site Specialist</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Decentralized Data Vault</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Quantum AI Integration</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-500 to-amber-400 hover:from-orange-400 hover:to-amber-300 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Activate Cipher
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <p class="text-lg text-purple-400 dark:text-purple-500 mb-6">Need a custom solution for your unique digital footprint?</p>
      <a href="#" class="inline-flex items-center px-8 py-4 border border-rose-500 rounded-full text-lg font-bold text-rose-300 hover:text-gray-950 hover:bg-gradient-to-r hover:from-rose-500 hover:to-amber-400 transition-all duration-300 transform hover:-translate-y-1 shadow-lg dark:hover:text-black dark:hover:from-rose-400 dark:hover:to-amber-300">
        <svg class="w-6 h-6 mr-3 text-current" 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        Contact Our Data Alchemists
      </a>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="w-full max-w-sm rounded-lg shadow-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 overflow-hidden">
    <div class="flex justify-between items-center bg-blue-200 dark:bg-blue-900 p-3 border-b border-gray-300 dark:border-gray-700">
      <span class="text-blue-800 dark:text-blue-200 text-sm font-semibold uppercase tracking-wider">[ METEO REPORT ]</span>
      <span class="text-gray-600 dark:text-gray-400 text-xs">ONLINE</span>
    </div>
    <div class="p-4 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">CURRENT TEMPERATURE</p>
      <div class="flex items-baseline justify-center mb-3">
        <span class="text-5xl md:text-6xl font-bold text-teal-600 dark:text-teal-400">18</span>
        <span class="text-2xl text-teal-600 dark:text-teal-400">&deg;C</span>
      </div>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">[ Feels Like: 17&deg;C ]</p>
      <div class="text-left space-y-1 text-sm md:text-base">
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">HUMIDITY:</span> <span class="text-purple-600 dark:text-purple-400">65%</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">WIND SPD:</span> <span class="text-purple-600 dark:text-purple-400">12 KM/H</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">PRESSURE:</span> <span class="text-purple-600 dark:text-purple-400">1012 HPA</span></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-blue-800 p-3 pt-2 text-xs border-t border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300">
      <p class="flex justify-between"><span class="text-blue-700 dark:text-blue-300">STATUS:</span> <span class="text-green-600 dark:text-green-400">CLEAR SKIES</span></p>
    </div>
  </div>
</div>
              

                <div class="font-sans antialiased p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 dark:from-purple-900 dark:via-pink-900 dark:to-rose-900 min-h-screen flex items-center justify-center">
  <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Pricing Card 1: Basic -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-purple-300 dark:border-purple-600 group">
      <div class="p-6 sm:p-8 text-center bg-purple-200 dark:bg-purple-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-purple-900 dark:text-purple-100 mb-2">Starter</h3>
        <p class="text-purple-700 dark:text-purple-200 text-base sm:text-lg">Perfect for hobbyists & individuals.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-pink-500 dark:text-pink-300">$</span>19
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>5 Project Spaces</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>10GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Basic Support</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-pink-500 dark:bg-pink-400 hover:bg-pink-600 dark:hover:bg-pink-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600">
          Choose Plan
        </button>
      </div>
    </div>

    <!-- Pricing Card 2: Pro (Recommended) -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-rose-400 dark:border-rose-700 scale-105 relative z-10 group">
      <div class="absolute -top-3 right-0 bg-rose-500 dark:bg-rose-600 text-white dark:text-gray-100 text-xs sm:text-sm font-bold px-4 py-1.5 rounded-bl-lg rounded-tr-3xl shadow-md transform rotate-3 origin-top-right">Most Popular</div>
      <div class="p-6 sm:p-8 text-center bg-rose-300 dark:bg-rose-800 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-rose-900 dark:text-rose-100 mb-2">Pro</h3>
        <p class="text-rose-700 dark:text-rose-200 text-base sm:text-lg">For growing teams & ambitious projects.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-orange-600 dark:text-orange-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-orange-500 dark:text-orange-300">$</span>49
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Unlimited Projects</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>100GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Priority Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Domains</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 hover:bg-orange-600 dark:hover:bg-orange-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
          Get Started Now
        </button>
      </div>
    </div>

    <!-- Pricing Card 3: Enterprise -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-yellow-300 dark:border-yellow-600 group">
      <div class="p-6 sm:p-8 text-center bg-yellow-200 dark:bg-yellow-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-900 dark:text-yellow-100 mb-2">Enterprise</h3>
        <p class="text-yellow-700 dark:text-yellow-200 text-base sm:text-lg">Scale your business with dedicated support.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-green-600 dark:text-green-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-green-500 dark:text-green-300">$</span>99
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Pro Features</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Dedicated Account Manager</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Premium Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Integrations</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 hover:bg-green-600 dark:hover:bg-green-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
          Contact Sales
        </button>
      </div>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-200 dark:bg-gray-800 font-sans min-h-screen flex items-center justify-center transition-colors duration-300">
  <div class="max-w-6xl w-full mx-auto p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl dark:shadow-2xl bg-gray-200 dark:bg-gray-800 neumorphic-card transition-all duration-300 relative overflow-hidden">
    
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/10 via-orange-400/10 to-red-400/10 opacity-5 dark:opacity-10 pointer-events-none rounded-3xl z-0"></div>

    <div class="relative z-10">
      <header class="mb-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 tracking-tight leading-tight">
          Choose Your Perfect Plan
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          Unlock the full potential of our content with a plan that fits your needs. Simple, transparent pricing.
        </p>
      </header>

      <div class="flex justify-center items-center mb-10 transition-all duration-300">
        <span class="text-gray-700 dark:text-gray-300 mr-3 text-lg font-medium">Monthly</span>
        <label for="toggle-pricing" class="relative inline-flex items-center cursor-pointer neumorphic-switch-container shadow-inner dark:shadow-inner-dark hover:shadow-outer hover:dark:shadow-outer-dark rounded-full p-1 transition-all duration-300">
          <input type="checkbox" id="toggle-pricing" class="sr-only peer">
          <div class="w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:bg-gradient-to-r peer-checked:from-orange-400 peer-checked:to-red-500 peer-focus:outline-none transition-all duration-300"></div>
          <span class="absolute left-1 top-1 w-6 h-6 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-transform duration-300 peer-checked:translate-x-full peer-checked:bg-yellow-300 dark:peer-checked:bg-orange-300"></span>
        </label>
        <span class="block relative text-gray-700 dark:text-gray-300 ml-3 text-lg font-medium">
          Annually
          <span class="px-2 py-1 ml-2 text-xs font-semibold rounded-full bg-orange-400 dark:bg-red-500 text-white neumorphic-discount-tag shadow-inner dark:shadow-inner-dark transform -rotate-6 absolute -top-4 -right-10 whitespace-nowrap">Save 20%!</span>
        </span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

        <!-- Basic Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Basic</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Access to essential articles and limited features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">$9</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Unlimited Basic Content Access</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Ad-supported reading</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Email Newsletter</span>
            </li>
            <li class="flex items-center text-gray-500 dark:text-gray-400">
              <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 mr-2" 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="M6 18L18 6M6 6l12 12"></path></svg>
              <span>No offline reading</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Choose Basic
          </button>
        </div>

        <!-- Pro Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col relative overflow-hidden border-2 border-transparent hover:border-orange-400 dark:hover:border-red-500 ring-2 ring-transparent hover:ring-orange-300 dark:hover:ring-red-400">
          <div class="absolute top-0 right-0 py-2 px-6 bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-500 dark:to-red-600 text-white font-bold text-sm rounded-bl-xl shadow-md transform rotate-3 origin-top-right translate-x-2 -translate-y-2 neumorphic-discount-tag dark:neumorphic-discount-tag-dark">
            Most Popular
          </div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Pro</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Full access to premium content and rich features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-red-500 dark:text-red-400 neumorphic-text-shadow transition-colors duration-300">$19</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>All Basic Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Ad-free experience</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Offline reading & downloads</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Priority Email Support</span>
            </li>
            <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Early access to new content</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-white bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-500 dark:to-red-600 hover:from-yellow-300 hover:to-orange-400 dark:hover:from-red-600 dark:hover:to-red-700 transition-all duration-300">
            Choose Pro
          </button>
        </div>

        <!-- Enterprise Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Enterprise</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Custom solution for teams and large organizations.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">Custom</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/quote</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>All Pro Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Dedicated Account Manager</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Custom Integrations</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Advanced Analytics</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>24/7 Premium Support</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Contact Sales
          </button>
        </div>

      </div>

      <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
        *Prices exclude VAT. Cancel anytime. No hidden fees.
      </p>
    </div>

  </div>
</div>

<style>
  /* Base Neumorphic Card */
  .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.4), -10px -10px 20px #FFFFFF;
  }
  .dark .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(50, 50, 50, 0.4);
  }

  /* Inner Neumorphic Card / Pricing Tier */
  .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.2), inset -5px -5px 10px #FFFFFF;
  }
  .dark .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(50, 50, 50, 0.3);
  }

  /* Inner Neumorphic Card Hover State */
  .neumorphic-card-hover:hover {
    box-shadow: 8px 8px 16px rgba(174, 174, 192, 0.2), -8px -8px 16px #FFFFFF, inset 2px 2px 5px rgba(174, 174, 192, 0.1), inset -2px -2px 5px #FFFFFF;
  }
  .dark .neumorphic-card-hover-dark:hover {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(50, 50, 50, 0.3), inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(50, 50, 50, 0.2);
  }

  /* Buttons - Neumorphic Style */
  .neumorphic-button {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF;
  }
  .neumorphic-button:active {
    box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.2), inset -3px -3px 6px #FFFFFF;
  }
  .dark .neumorphic-button-dark {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4);
  }
  .dark .neumorphic-button-dark:active {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(50, 50, 50, 0.3);
  }

  /* Toggle Switch Container */
  .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(174, 174, 192, 0.2), inset -4px -4px 8px #FFFFFF;
  }
  .dark .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(50, 50, 50, 0.3);
  }
  .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF, inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF; /* Subtle outer shadow on hover */
  }
  .dark .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4), inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Discount Tag */
  .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(174, 174, 192, 0.4), -3px -3px 6px #FFFFFF;
    border: 1px solid rgba(255,165,0,0.2); /* Subtle border for definition */
  }
  .dark .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5), -3px -3px 6px rgba(50, 50, 50, 0.4);
    border: 1px solid rgba(255,99,71,0.2); /* Subtle border for definition */
  }

  /* Neumorphic Icon */
  .neumorphic-icon {
      border-radius: 9999px; /* Make it circular */
      box-shadow: inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-icon {
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Text Shadow for prices */
  .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(174, 174, 192, 0.3), -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -2px -2px 4px rgba(50, 50, 50, 0.3);
  }


  /* Tailwind's dark class is applied to the <html> tag or higher */
  /* Custom properties or base classes should respect this */
</style>

<script>
  // Basic functionality for the toggle switch (for a true SPA this would be a framework component)
  document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('toggle-pricing');
    if (toggle) {
      toggle.addEventListener('change', () => {
        // In a real application, you'd update pricing data here
        // For this example, we'll just log the state
        console.log('Pricing switched to:', toggle.checked ? 'Annually' : 'Monthly');

        // Example of visually altering prices (not dynamic data update)
        const proPrice = document.querySelector('.neumorphic-card-inner:nth-child(2) .neumorphic-text-shadow');
        const proTime = document.querySelector('.neumorphic-card-inner:nth-child(2) .ml-2');

        if (toggle.checked) {
          // Annual pricing (e.g., $19 * 12 * 0.8 = $182.4 -> $15 per month equivalent)
          proPrice.textContent = '$15'; 
          proTime.textContent = '/month (billed annually)';
        } else {
          // Monthly pricing
          proPrice.textContent = '$19';
          proTime.textContent = '/month';
        }
      });
    }

    // Dark mode toggle simulation (for demonstration purposes)
    // This part is for showcasing dark mode if an external toggle isn't available
    // In a real app, you'd use a robust dark mode implementation
    const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    };
    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    };

    // Check local storage for theme
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'dark') {
      enableDarkMode();
    } else if (storedTheme === 'light') {
      disableDarkMode();
    } else if (systemDarkMode.matches) {
      enableDarkMode(); // Default to system preference if no stored theme
    }

    // Listen for system theme changes
    systemDarkMode.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) { // Only apply if no user preference set
        e.matches ? enableDarkMode() : disableDarkMode();
      }
    });
  });
</script>
              

                <div class="relative min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex flex-col items-center justify-center font-mono">
  <!-- Vintage TV/Monitor Frame -->
  <div class="relative bg-gray-800 dark:bg-gray-200 rounded-xl shadow-2xl p-6 md:p-12 border-8 border-gray-900 dark:border-gray-100 transform -rotate-3 hover:rotate-0 transition-transform duration-500 ease-in-out">
    <div class="absolute inset-0 rounded-xl border-4 border-gray-700 dark:border-gray-300 pointer-events-none"></div>
    
    <!-- Screen/Display Area -->
    <div class="relative bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-300 dark:to-gray-500 p-4 rounded-lg shadow-inner">
      <div class="absolute inset-0 bg-black opacity-25 rounded-lg pointer-events-none"></div>
      
      <!-- Scanlines/CRT Effect -->
      <div class="absolute inset-0 z-10 pointer-events-none overflow-hidden">
        <div class="h-full w-full bg-repeating-linear-gradient-[0deg,#00000022_0px,#00000022_1px,transparent_1px,transparent_2px] animate-scanlines"></div>
      </div>

      <div class="relative z-20 text-center">
        <h2 class="text-2xl md:text-4xl font-bold text-yellow-400 dark:text-purple-600 mb-2 drop-shadow-[0_0_5px_rgba(255,255,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(128,0,128,0.7)] animate-pulseY">
          FLASH SALE!
        </h2>
        <p class="text-white text-lg md:text-2xl mb-4 font-semibold opacity-90">
          Limited Stock - Grab Yours Now!
        </p>

        <!-- Product Image & Price -->
        <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 mb-6">
          <div class="relative">
            <img src="https://picsum.photos/seed/retroproduct/300/300" alt="Retro Widget" class="w-48 h-48 md:w-64 md:h-64 object-cover rounded-lg shadow-lg border-4 border-purple-500 dark:border-yellow-400 transform hover:scale-105 transition-transform duration-300">
            <div class="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12 shadow-md">NEW!</div>
          </div>
          
          <div class="flex flex-col items-center">
            <p class="text-xl md:text-3xl line-through text-gray-400 dark:text-gray-600 mb-1 animate-fadeIn">
              <span class="font-bold">$99.99</span>
            </p>
            <p class="text-4xl md:text-6xl font-extrabold text-green-400 dark:text-lime-400 mb-4 animate-bounceX drop-shadow-[0_0_8px_rgba(0,255,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(128,255,0,0.8)]">
              $49.99
            </p>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 uppercase tracking-wider border-2 border-blue-400 dark:border-blue-800 animate-wiggle">
              Buy Now!
            </button>
          </div>
        </div>

        <!-- Call to Action / Urgency Meter -->
        <div class="bg-gray-600 dark:bg-gray-400 rounded-full h-4 mb-2 overflow-hidden shadow-inner">
          <div class="bg-gradient-to-r from-red-500 to-yellow-500 h-full w-3/4 rounded-full animate-fillBar"></div>
        </div>
        <p class="text-sm text-white opacity-80 animate-pulseSlight">
          Only <span class="font-bold text-yellow-300 dark:text-red-300">25%</span> of stock remaining!
        </p>
      </div>
    </div>

    <!-- Retro Knobs/Buttons -->
    <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4">
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
    </div>

    <!-- Antenna -->
    <div class="absolute -top-12 right-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform rotate-6 animate-wobble"></div>
    <div class="absolute -top-12 left-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform -rotate-6 animate-wobble"></div>
  </div>

  <!-- Tailwind JIT compatibility for custom gradients and keyframes -->
  <style>
    @keyframes bounceX {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(5px); }
    }
    @keyframes pulseY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes fillBar {
      0% { width: 0%; }
      100% { width: 75%; /* Adjust based on stock */ }
    }
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    @keyframes wobble {
      0%, 100% { transform: rotate(6deg); }
      50% { transform: rotate(-6deg); }
    }
    @keyframes scanlines {
      0% { background-position: 0% 0%; }
      100% { background-position: 0% 100%; }
    }
    @keyframes pulseSlight {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }

    .animate-bounceX { animation: bounceX 3s infinite ease-in-out; }
    .animate-pulseY { animation: pulseY 2s infinite ease-in-out; }
    .animate-fadeIn { animation: fadeIn 1.5s forwards; }
    .animate-fillBar { animation: fillBar 2s forwards ease-out; }
    .animate-wiggle { animation: wiggle 2s infinite ease-in-out; }
    .animate-wobble { animation: wobble 4s infinite ease-in-out; }
    .animate-scanlines { animation: scanlines 10s linear infinite; }
    .animate-pulseSlight { animation: pulseSlight 3s infinite ease-in-out; }

    .bg-repeating-linear-gradient-\[0deg\,\#00000022_0px\,\#00000022_1px\,transparent_1px\,transparent_2px\] {
      background-image: repeating-linear-gradient(0deg, #00000022 0px, #00000022 1px, transparent 1px, transparent 2px);
    }
  </style>
</div>
              

                <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-6 py-8">
      <h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
      <div class="flex justify-center items-baseline mb-8">
        <span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
        <span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
        </li>
      </ul>
      <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
        Get Started
      </button>
    </div>
  </div>
</div>
              

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
    
    <!-- Product Image (Placeholder) -->
    <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
    </div>

    <!-- Product Title -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
    
    <!-- Product Description (Optional - Uncomment if needed) -->
    <!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->

    <!-- Price and Add to Cart -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Add to Cart
      </button>
    </div>

    <!-- Additional Details (Optional) -->
    <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
      </div>
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
      </div>
    </div>

  </div>

  <!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
  <div style="display: none;">
    <!-- You would typically add this to your tailwind.config.js file under 'extend' -->
    <pre>
      module.exports = {
        theme: {
          extend: {
            boxShadow: {
              'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
              'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
              'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
              'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
              'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
              'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
              'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
              'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
            }
          }
        }
      }
    </pre>
  </div>

</div>
              

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
  <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
      <p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
    </div>
    <div class="text-center mb-8">
      <p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
    </div>
    <ul class="mb-8 space-y-4">
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Unlimited Projects
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        10GB Storage
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Custom Domain
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        24/7 Support
      </li>
    </ul>
    <button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
      Get Started
    </button>
  </div>
</div>
              

                <div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
  <div class="flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
    <div class="flex flex-col">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
    </div>
  </div>
  <div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
    <h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
    <p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
    <div class="mt-2 flex justify-between items-center">
      <button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
      <button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
    </div>
  </div>
</div>