Responsive Pricing Table with Billing Toggle

<div class="max-w-7xl mr-auto ml-auto pt-24 pr-6 pb-16 pl-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="pricing-card 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 hover:bg-white/5" style="background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px; background-position: -9px -9px;">
    <div class="flex flex-col relative z-10 h-full max-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 class="">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 class="">Wallet integration</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="">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="pricing-card group relative overflow-hidden sm:p-8 transition-all duration-300 hover:-translate-y-1 hover:border-violet-500/40 hover:ring-violet-500/30 hover:bg-white/5 bg-neutral-50/0 border-white/10 border ring-white/5 ring-1 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 relative z-10 h-full">
      <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" data-price-monthly="$19" data-price-yearly="$159">$19</div>
        <div class="mt-2 text-sm text-neutral-300" data-billing-period="monthly">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="" onclick="toggleYearlyBilling(this)">
          <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="pricing-card 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 hover:bg-white/5" 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 relative z-10">
      <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 class="">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 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 class="">No recurring fees</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="">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>

  <script>
    function toggleYearlyBilling(button) {
      const isYearly = button.getAttribute('aria-pressed') === 'true';
      const willBeYearly = !isYearly;
      
      button.setAttribute('aria-pressed', String(willBeYearly));
      const knob = button.querySelector('span');
      
      if (knob) {
        knob.style.transform = willBeYearly ? 'translateX(1.25rem)' : 'translateX(0)';
      }
      
      const priceElement = document.querySelector('[data-price-monthly]');
      const billingPeriodElement = document.querySelector('[data-billing-period]');
      
      if (priceElement) {
        const monthlyPrice = priceElement.getAttribute('data-price-monthly');
        const yearlyPrice = priceElement.getAttribute('data-price-yearly');
        priceElement.textContent = willBeYearly ? yearlyPrice : monthlyPrice;
      }
      
      if (billingPeriodElement) {
        billingPeriodElement.textContent = willBeYearly ? 'Per user / year' : 'Per user / month';
      }
    }
  </script>
</div>
  </div>