Animated Pricing Section with Billing Toggle

<div class="max-w-7xl lg:px-8 mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
  <div class="mx-auto max-w-2xl text-center opacity-0 animate-slide-up scroll-element" style="animation-play-state: running; opacity: 1;">
    <h2 class="text-4xl text-white sm:text-5xl tracking-tighter font-bricolage font-light" style="">Simple, transparent pricing</h2>
    <p class="mt-4 text-lg text-zinc-400 font-sans" style="">Start free. Upgrade when you're ready. <span class="text-blue-400 font-medium font-sans" style="">Cancel anytime.</span></p>
  </div>

  <!-- Billing Toggle -->
  <div class="mt-8 mb-2 flex items-center justify-center gap-4 opacity-0 animate-fade-in-delay scroll-element" style="animation-play-state: running; opacity: 1;">
    <span class="text-sm text-zinc-400 font-sans" style="">Monthly</span>
    <label class="relative inline-flex cursor-pointer items-center">
      <input id="billingToggle" type="checkbox" class="sr-only peer" aria-label="Toggle billing period">
      <span class="h-6 w-12 rounded-full bg-zinc-800 transition-all duration-300 peer-checked:bg-gradient-to-r peer-checked:from-blue-500 peer-checked:to-purple-500 flex items-center px-1 hover:scale-105">
        <span class="h-5 w-5 rounded-full bg-zinc-300 transition-all duration-300 peer-checked:translate-x-6 peer-checked:bg-white"></span>
      </span>
    </label>
    <span class="text-sm text-zinc-400 flex items-center font-sans" style="">
      Yearly
      <span class="ml-2 rounded border border-blue-500/20 bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-400 font-sans" style="">2 months free</span>
    </span>
  </div>

  <!-- Pricing cards -->
  <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
    <!-- Starter -->
    <div class="relative rounded-2xl border border-zinc-800 bg-zinc-950/50 p-8 opacity-0 animate-scale-in scroll-element hover:border-zinc-700 hover:scale-105 hover:shadow-xl transition-all duration-500" style="animation-play-state: running; opacity: 1; transform: scale(1);">
      <div class="mb-6 flex items-center justify-between">
        <div>
          <div class="text-lg font-medium text-white font-sans" style="">Starter</div>
          <div class="text-xs uppercase tracking-wider text-zinc-500 font-sans" style="">For freelancers</div>
        </div>
        <div class="rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 font-sans" style="">Free</div>
      </div>
      <div>
        <div class="flex items-baseline gap-1">
          <span id="starterPrice" class="text-4xl text-white tracking-tighter font-bricolage font-light" style="">$0</span>
          <span class="text-sm text-zinc-500 font-sans" style="">/month</span>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-zinc-300">
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            5 invoices / month
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            1 payment method
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Basic templates
          </li>
        </ul>
        <a href="#" class="mt-8 inline-flex w-full items-center justify-center rounded-md bg-white px-4 py-3 text-sm font-medium text-black transition hover:bg-zinc-100 hover:scale-105 transform font-sans" style="">Get started</a>
      </div>
    </div>

    <!-- Pro -->
    <div class="relative rounded-2xl border border-white/20 bg-white/5 p-8 ring-1 ring-white/10 opacity-0 animate-scale-in-delay scroll-element hover:scale-105 hover:shadow-2xl transition-all duration-500" style="animation-delay: 0.1s; animation-play-state: running; opacity: 1;">
      <div class="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 px-3 py-1 text-xs font-medium text-white animate-float font-sans" style="">Most Popular</div>
      <div class="mb-6 flex items-center justify-between">
        <div>
          <div class="text-lg font-medium text-white font-sans" style="">Pro</div>
          <div class="text-xs uppercase tracking-wider text-zinc-400 font-sans" style="">For teams and power users</div>
        </div>
        <div class="rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 font-sans" style="">14-day trial</div>
      </div>
      <div>
        <div class="flex items-baseline gap-1">
          <span id="proPrice" class="text-4xl text-white tracking-tighter font-bricolage font-light" style="">$19</span>
          <span class="text-sm text-zinc-500 font-sans" style="">/month</span>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-zinc-300">
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Unlimited invoices
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Multiple payment methods
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Advanced templates &amp; branding
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Automated reminders &amp; late fees
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Priority support
          </li>
        </ul>
        <a href="#" class="mt-8 inline-flex w-full items-center justify-center rounded-md bg-white px-4 py-3 text-sm font-medium text-black transition hover:bg-zinc-100 hover:scale-105 transform font-sans" style="">Start 14-day trial</a>
      </div>
    </div>

    <!-- Enterprise -->
    <div class="relative rounded-2xl border border-zinc-800 bg-zinc-950/50 p-8 opacity-0 animate-scale-in-delay-2 scroll-element hover:border-zinc-700 hover:scale-105 hover:shadow-xl transition-all duration-500" style="animation-delay: 0.2s; animation-play-state: running; opacity: 1;">
      <div class="mb-6 flex items-center justify-between">
        <div>
          <div class="text-lg font-medium text-white font-sans" style="">Enterprise</div>
          <div class="text-xs uppercase tracking-wider text-zinc-500 font-sans" style="">Full control &amp; premium support</div>
        </div>
        <div class="rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 font-sans" style="">Custom</div>
      </div>
      <div>
        <div class="flex items-baseline gap-1">
          <span class="text-4xl text-white tracking-tighter font-bricolage font-light" style="">Contact</span>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-zinc-300">
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Everything in Pro
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield mt-0.5 h-4 w-4 text-green-400"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
            SSO &amp; advanced security
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle mt-0.5 h-4 w-4 text-green-400"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg>
            99.99% uptime SLA
          </li>
          <li class="flex items-start gap-3 font-sans" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-check" class="lucide lucide-user-check mt-0.5 h-4 w-4 text-green-400"><path d="m16 11 2 2 4-4" class=""></path><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
            Dedicated CSM
          </li>
        </ul>
        <a href="#" class="mt-8 inline-flex w-full items-center justify-center rounded-md border border-zinc-800 px-4 py-3 text-sm font-medium text-white transition hover:border-zinc-700 hover:bg-zinc-900 hover:scale-105 transform font-sans" style="">Contact sales</a>
      </div>
    </div>
  </div>

  <!-- Compare plans -->
  <div class="mx-auto mt-16 max-w-7xl opacity-0 animate-slide-up scroll-element" style="animation-play-state: running; opacity: 1;">
    <div class="text-center">
      <h3 class="text-3xl text-white tracking-tighter font-bricolage font-light" style="">Compare plans</h3>
    </div>
    <div class="mt-6 overflow-x-auto rounded-2xl border border-zinc-800 bg-zinc-950/50 hover:border-zinc-700 transition-colors duration-500">
      <table class="min-w-[720px] w-full text-left text-sm">
        <thead class="">
          <tr class="">
            <th class="bg-transparent border-b border-zinc-800 py-3 px-4"></th>
            <th class="bg-transparent border-b border-zinc-800 py-3 px-4 font-medium tracking-tight text-white font-sans" style="">Starter</th>
            <th class="bg-transparent border-b border-zinc-800 py-3 px-4 font-medium tracking-tight text-white font-sans" style="">Pro</th>
            <th class="bg-transparent border-b border-zinc-800 py-3 px-4 font-medium tracking-tight text-white font-sans" style="">Enterprise</th>
          </tr>
        </thead>
        <tbody class="">
          <tr class="border-b border-zinc-800 hover:bg-zinc-900/30 transition-colors duration-300">
            <td class="py-4 px-4 text-zinc-300 font-sans" style="">Invoices per month</td>
            <td class="py-4 px-4 font-sans" style="">5</td>
            <td class="py-4 px-4 font-sans" style="">Unlimited</td>
            <td class="py-4 px-4 font-sans" style="">Unlimited</td>
          </tr>
          <tr class="border-b border-zinc-800 hover:bg-zinc-900/30 transition-colors duration-300">
            <td class="py-4 px-4 text-zinc-300 font-sans" style="">Payment methods</td>
            <td class="py-4 px-4 font-sans" style="">1</td>
            <td class="py-4 px-4 font-sans" style="">Multiple</td>
            <td class="py-4 px-4 font-sans" style="">Multiple</td>
          </tr>
          <tr class="border-b border-zinc-800 hover:bg-zinc-900/30 transition-colors duration-300">
            <td class="py-4 px-4 text-zinc-300 font-sans" style="">Advanced templates &amp; branding</td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-zinc-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-4 w-4"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4"><path d="M20 6 9 17l-5-5" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4"><path d="M20 6 9 17l-5-5" class=""></path></svg></span></td>
          </tr>
          <tr class="border-b border-zinc-800 hover:bg-zinc-900/30 transition-colors duration-300">
            <td class="py-4 px-4 text-zinc-300 font-sans" style="">Automated reminders &amp; late fees</td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-zinc-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-4 w-4"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4"><path d="M20 6 9 17l-5-5" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4"><path d="M20 6 9 17l-5-5" class=""></path></svg></span></td>
          </tr>
          <tr class="border-b border-zinc-800 hover:bg-zinc-900/30 transition-colors duration-300">
            <td class="py-4 px-4 text-zinc-300 font-sans" style="">SSO &amp; advanced security</td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-zinc-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-4 w-4"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-zinc-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-4 w-4"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield h-4 w-4"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg></span></td>
          </tr>
          <tr class="border-b border-zinc-800 hover:bg-zinc-900/30 transition-colors duration-300">
            <td class="py-4 px-4 text-zinc-300 font-sans" style="">Support</td>
            <td class="py-4 px-4 font-sans" style="">Community</td>
            <td class="py-4 px-4 font-sans" style="">Priority</td>
            <td class="py-4 px-4 font-sans" style="">Dedicated CSM</td>
          </tr>
          <tr class="hover:bg-zinc-900/30 transition-colors duration-300">
            <td class="py-4 px-4 text-zinc-300 font-sans" style="">Uptime SLA</td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-zinc-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-4 w-4"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-zinc-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-4 w-4"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg></span></td>
            <td class="py-4 px-4"><span class="inline-flex items-center gap-1 text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle h-4 w-4"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg><span style="" class="font-sans">99.99%</span></span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="mt-2 text-right text-xs text-zinc-500">
      <span style="" class="font-sans">* Contact sales for volume and enterprise pricing details.</span>
    </div>
  </div>

  <script>
    (function () {
      const root = document.getElementById('aura-eme8sqypi');
      if (!root) return;
      const toggle = root.querySelector('#billingToggle');
      const pro = root.querySelector('#proPrice');
      if (toggle && pro) {
        toggle.addEventListener('change', function () {
          if (this.checked) {
            pro.textContent = '$190';
          } else {
            pro.textContent = '$19';
          }
        });
      }
    })();
  </script>
</div>