Responsive 3-Plan Pricing Section with Tailwind

<section class="relative">
  <!-- Header accent line -->
  <div class="pointer-events-none absolute inset-0">
    <div class="hidden sm:block absolute top-8 left-8 right-8 h-px bg-gradient-to-r from-transparent via-violet-500/30 to-transparent"></div>
  </div>

  <div class="max-w-7xl mx-auto pt-24 pb-16 px-6">
    <!-- Heading -->
    <div class="text-center mb-14">
      <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-neutral-100">Simple and transparent pricing</h2>
      <p class="mt-4 max-w-3xl mx-auto text-base sm:text-lg text-neutral-400 leading-relaxed">Choose the plan that fits your investments.</p>
    </div>

    <!-- Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
      <!-- Free -->
      <div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-neutral-900/60 ring-1 ring-white/5 p-6 sm:p-8 transition-all duration-300 hover:-translate-y-1 hover:border-violet-500/30 hover:ring-violet-500/20" style="background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 18px 18px; background-position: -9px -9px;">
        <div class="flex flex-col h-full">
          <div class="">
            <h3 class="text-lg font-semibold tracking-tight text-neutral-100">Free</h3>
            <p class="mt-2 text-sm text-neutral-400">Start your crypto journey at no cost. Access essential tools — all in one place.</p>

            <div class="mt-6">
              <div class="text-5xl sm:text-6xl font-semibold tracking-tight text-white">$0</div>
              <div class="mt-2 text-sm text-neutral-400">Free forever / no hidden fees</div>
            </div>

            <div class="mt-8 mb-6 h-px bg-white/10"></div>

            <ul class="space-y-3">
              <li class="flex items-center gap-3 text-neutral-300">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
                <span>Dedicated dashboard</span>
              </li>
              <li class="flex items-center gap-3 text-neutral-300">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
                <span>Real‑time charts</span>
              </li>
              <li class="flex items-center gap-3 text-neutral-300">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
                <span>Basic portfolio tracker</span>
              </li>
              <li class="flex items-center gap-3 text-neutral-300">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
                <span>Wallet integration</span>
              </li>
            </ul>
          </div>

          <div class="mt-8">
            <a href="#" class="inline-flex w-full items-center justify-center gap-2 rounded-full bg-white text-neutral-900 px-6 py-3 text-sm font-medium shadow-lg ring-1 ring-white/10 transition hover:brightness-110">
              Start for free
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Pro -->
      <div class="group relative overflow-hidden ring-1 ring-white/5 sm:p-8 transition-all duration-300 hover:-translate-y-1 hover:border-violet-500/40 hover:ring-violet-500/30 bg-neutral-50/0 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6">
        <div class="pointer-events-none absolute -top-16 -right-16 h-56 w-56 rounded-full bg-gradient-to-tr from-fuchsia-500/30 via-violet-500/20 to-transparent blur-3xl"></div>
        <div class="flex flex-col h-full relative">
          <div class="flex items-start justify-between">
            <h3 class="text-lg font-semibold tracking-tight text-neutral-100">Pro</h3>
            <span class="inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-[10px] font-medium text-neutral-200 ring-1 ring-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-3.5 w-3.5 text-violet-300"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
              Popular
            </span>
          </div>
          <p class="mt-2 text-sm text-neutral-300">Unlock full potential with advanced analytics, portfolio tracking, and priority support.</p>

          <div class="mt-6">
            <div class="text-5xl sm:text-6xl font-semibold tracking-tight text-white">$19</div>
            <div class="mt-2 text-sm text-neutral-300">Per user / month</div>
          </div>

          <!-- Billing toggle -->
          <div class="mt-5 flex items-center gap-3">
            <button type="button" aria-pressed="false" class="relative inline-flex h-6 w-11 items-center rounded-full bg-white/10 ring-1 ring-white/10 transition-colors duration-300 hover:bg-white/20 focus:outline-none" data-toggle-yearly="">
              <span class="absolute left-0.5 inline-block h-5 w-5 translate-x-0 rounded-full bg-white shadow transition-transform duration-300"></span>
            </button>
            <span class="text-sm text-neutral-300">Yearly</span>
            <span class="ml-2 inline-flex items-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-medium text-neutral-200 ring-1 ring-white/10">30% OFF</span>
          </div>

          <div class="mt-6 mb-6 h-px bg-white/10"></div>

          <ul class="space-y-3">
            <li class="flex items-center gap-3 text-neutral-100">
              <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/10 ring-1 ring-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              <span class="">AI‑powered dashboard</span>
            </li>
            <li class="flex items-center gap-3 text-neutral-100">
              <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/10 ring-1 ring-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              <span class="">Advanced analytics</span>
            </li>
            <li class="flex items-center gap-3 text-neutral-100">
              <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/10 ring-1 ring-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              <span class="">Pro portfolio tools</span>
            </li>
            <li class="flex items-center gap-3 text-neutral-100">
              <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/10 ring-1 ring-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              <span class="">Price alerts</span>
            </li>
          </ul>

          <div class="mt-8">
            <a href="#" class="inline-flex w-full items-center justify-center gap-2 rounded-full bg-gradient-to-tr from-violet-500 to-fuchsia-500 text-white px-6 py-3 text-sm font-medium shadow-lg ring-1 ring-white/10 transition hover:brightness-110">
              Sign up with pro
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Lifetime -->
      <div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-neutral-900/60 ring-1 ring-white/5 p-6 sm:p-8 transition-all duration-300 hover:-translate-y-1 hover:border-violet-500/30 hover:ring-violet-500/20" style="background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 18px 18px; background-position: -9px -9px;">
        <div class="flex flex-col h-full">
          <div class="">
            <h3 class="text-lg font-semibold tracking-tight text-neutral-100">Lifetime</h3>
            <p class="mt-2 text-sm text-neutral-400">Pay once, use forever. All premium features, lifetime updates.</p>

            <div class="mt-6">
              <div class="text-5xl sm:text-6xl font-semibold tracking-tight text-white">$249</div>
              <div class="mt-2 text-sm text-neutral-400">Single payment / lifetime access</div>
            </div>

            <div class="mt-8 mb-6 h-px bg-white/10"></div>

            <ul class="space-y-3">
              <li class="flex items-center gap-3 text-neutral-300">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
                <span>All pro features</span>
              </li>
              <li class="flex items-center gap-3 text-neutral-300">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
                <span class="">Exclusive lifetime updates</span>
              </li>
              <li class="flex items-center gap-3 text-neutral-300">
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-emerald-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
                <span>No recurring fees</span>
              </li>
            </ul>
          </div>

          <div class="mt-8">
            <a href="#" class="inline-flex w-full items-center justify-center gap-2 rounded-full bg-white text-neutral-900 px-6 py-3 text-sm font-medium shadow-lg ring-1 ring-white/10 transition hover:brightness-110">
              Get lifetime access
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Minimal toggle behavior -->
  <script>
    (function () {
      const btn = document.querySelector('#aura-emfnc95cs [data-toggle-yearly]');
      if (!btn) return;
      btn.addEventListener('click', function () {
        const on = this.getAttribute('aria-pressed') === 'true';
        this.setAttribute('aria-pressed', String(!on));
        const knob = this.querySelector('span');
        if (knob) knob.style.transform = on ? 'translateX(0)' : 'translateX(1.25rem)';
      }, { passive: true });
    })();
  </script>
</section>