Responsive Pricing Section with Plan Comparison & Billing Toggle

<section class="isolate overflow-hidden pt-24 pb-24 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(4)">
  <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_80%_at_50%_0%,rgba(255,255,255,0.05),transparent_60%)]"></div>

  <div class="z-10 md:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative">
    <div class="text-center">
      <h2 class="sm:text-5xl text-4xl font-medium text-white tracking-tight font-manrope animate-on-scroll" style="animation: fadeSlideIn 1.0s ease-out 0.1s both;">Pricing Plans</h2>

      <div class="flex mt-6 gap-x-4 gap-y-4 items-center justify-center animate-on-scroll" style="animation: fadeSlideIn 1.0s ease-out 0.2s both;">
        <span class="text-sm text-white/70">Monthly</span>
        <button id="billingToggle" class="relative inline-flex h-8 w-16 items-center rounded-full bg-white/10 p-1 ring-1 ring-white/15 transition">
          <span id="billingKnob" class="inline-flex h-6 w-6 translate-x-8 rounded-full bg-white shadow-[0_2px_8px_rgba(0,0,0,0.25)] transition will-change-transform" style="transform: translateX(32px);"></span>
        </button>
        <span class="text-sm text-white/70">Annual
          <span id="annualBadge" class="ml-2 inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[10px] text-amber-300 ring-1 ring-amber-300/20" style="opacity: 1;">Save 20%</span>
        </span>
      </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3 mt-10 gap-x-6 gap-y-6">
      <!-- Starter -->
      <div class="animate-on-scroll border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl" style="animation: fadeSlideIn 1.0s ease-out 0.3s both;">
        <div class="flex items-center justify-between">
          <div class="">
            <div class="text-sm uppercase tracking-[0.18em] text-white/60">Starter</div>
            <div class="mt-2 flex items-end gap-2">
              <div class="text-4xl font-medium tracking-tight text-white">$0</div>
              <div class="text-sm text-white/50" data-period="">/yr</div>
            </div>
          </div>
        </div>

        <button class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-4 py-3 text-sm font-medium tracking-tight text-black hover:bg-white/90">
          Start Building
        </button>

        <ul class="mt-6 space-y-3 text-sm text-white/75">
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Up to 1K API calls per month
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Basic data ingestion pipelines
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Web console access
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Community support
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Basic monitoring &amp; alerts
          </li>
        </ul>
      </div>

      <!-- Pro (featured) -->
      <div class="border-white/10 border ring-amber-300/10 ring-1 rounded-3xl pt-2 pr-2 pb-2 pl-2 relative backdrop-blur-xl animate-on-scroll" style="animation: fadeSlideIn 1.0s ease-out 0.4s both;">
        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-b from-white/[0.06] to-transparent">
          <div class="absolute inset-0">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4ca8123b-2b44-4ef6-9ce7-51db6671104c_800w.jpg" alt="Premium background" class="h-48 w-full rounded-t-2xl object-cover opacity-60" style="">
            <div class="absolute inset-0 bg-[radial-gradient(60%_80%_at_80%_0%,rgba(251,191,36,0.25),transparent_60%)]"></div>
          </div>

          <div class="relative p-6">
            <div class="flex items-start justify-between">
              <div class="">
                <div class="text-sm uppercase tracking-[0.18em] text-white/70">Professional</div>
                <div class="mt-2 flex items-end gap-2">
                  <div class="text-4xl font-medium tracking-tight text-white" data-monthly="$49" data-annual="$470">$470</div>
                  <div class="text-sm text-white/60" data-period="">/yr</div>
                </div>
              </div>
              <span class="inline-flex items-center gap-1 rounded-full bg-amber-400/15 px-2 py-1 text-[10px] text-amber-300 ring-1 ring-amber-300/25">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-3.5 w-3.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg> Most Popular
              </span>
            </div>

            <button class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-b from-amber-300 to-amber-400 px-4 py-3 text-sm font-medium tracking-tight text-black shadow-[0_10px_30px_rgba(251,191,36,0.25)] hover:from-amber-200 hover:to-amber-300">
              Upgrade to Pro
            </button>

            <ul class="mt-6 space-y-3 text-sm text-white/85">
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-emerald-400"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                Unlimited API calls
              </li>
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-emerald-400"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                Advanced reasoning models &amp; orchestration
              </li>
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-emerald-400"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                Performance analytics &amp; insights
              </li>
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-emerald-400"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                Custom workflows &amp; integrations
              </li>
              <li class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-emerald-400"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                Priority support with SLA
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Enterprise -->
      <div class="animate-on-scroll border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl" style="animation: fadeSlideIn 1.0s ease-out 0.5s both;">
        <div class="flex items-center justify-between">
          <div class="">
            <div class="text-sm uppercase tracking-[0.18em] text-white/60">Enterprise</div>
            <div class="mt-2 flex items-end gap-2">
              <div class="text-4xl font-medium tracking-tight text-white">Custom</div>
              <div class="text-sm text-white/50" data-period="">/yr</div>
            </div>
          </div>
        </div>

        <button class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-3 text-sm font-medium tracking-tight text-white/90 hover:bg-white/10">
          Contact Sales
        </button>

        <ul class="mt-6 space-y-3 text-sm text-white/75">
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            On‑premises &amp; private cloud deployment
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Advanced security &amp; compliance controls
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Dedicated support team &amp; onboarding
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Team management &amp; usage analytics
          </li>
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-4 w-4 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
            Custom model training &amp; fine‑tuning
          </li>
        </ul>
      </div>
    </div>

    <p class="animate-on-scroll text-xs text-white/50 text-center mt-6" style="animation: fadeSlideIn 1.0s ease-out 0.6s both;">All plans include 14-day free trial. No setup fees.</p>
  </div>
</section>