Responsive Pricing Section with Tiered Cards

<section id="pricing" class="bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9d7e01ff-667f-45be-8590-d67a8d2fdeae_3840w.jpg)] w-full bg-cover pt-16 pb-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-end justify-between gap-6">
          <div>
            <p class="text-sm uppercase tracking-wider text-blue-300/90">Pricing</p>
            <h2 class="mt-2 text-3xl lg:text-4xl tracking-tight" style="font-weight: 600">Simple plans, no lock‑in</h2>
          </div>
        </div>

        <div class="mt-8 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Starter -->
          <div class="rounded-2xl border border-white/10 bg-gradient-to-b from-gray-950 to-black p-6">
            <div class="flex items-center justify-between">
              <h3 class="text-lg tracking-tight" style="font-weight: 600">Starter</h3>
              <span class="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10">Personal</span>
            </div>
            <p class="mt-1 text-sm text-gray-400">Voice + core commands</p>
            <div class="mt-5 flex items-baseline gap-1">
              <span class="text-3xl">$0</span><span class="text-sm text-gray-400">forever</span>
            </div>
            <ul class="mt-5 space-y-2 text-sm text-gray-300">
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                50 actions/day
              </li>
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                On‑device mode
              </li>
            </ul>
            <a href="#try" class="mt-6 inline-flex w-full items-center justify-center gap-2 px-4 py-2.5 rounded-full text-sm bg-white/5 text-gray-100 hover:bg-white/10 border border-white/10 transition-all">Get started</a>
          </div>

          <!-- Pro -->
          <div class="rounded-2xl border border-blue-400/30 bg-gradient-to-b from-gray-900/80 to-black p-6 relative">
            <div class="absolute -top-3 right-4 px-2 py-1 rounded-full text-xs bg-blue-400 text-black">Best value</div>
            <div class="flex items-center justify-between">
              <h3 class="text-lg tracking-tight" style="font-weight: 600">Pro</h3>
              <span class="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10">For power users</span>
            </div>
            <p class="mt-1 text-sm text-gray-300">Unlimited commands, routines, analytics.</p>
            <div class="mt-5 flex items-baseline gap-1">
              <span class="text-3xl">$12</span><span class="text-sm text-gray-400">/mo</span>
            </div>
            <ul class="mt-5 space-y-2 text-sm text-gray-300">
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Unlimited actions
              </li>
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Routine builder
              </li>
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Detailed analytics
              </li>
            </ul>
            <a href="#try" class="mt-6 inline-flex w-full items-center justify-center gap-2 px-4 py-2.5 rounded-full text-sm bg-blue-400 text-black hover:bg-blue-300 transition-all">Try Pro</a>
          </div>

          <!-- Enterprise -->
          <div class="rounded-2xl border border-white/10 bg-gradient-to-b from-gray-950 to-black p-6">
            <div class="flex items-center justify-between">
              <h3 class="text-lg tracking-tight" style="font-weight: 600">Enterprise</h3>
              <span class="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10">Security &amp; SSO</span>
            </div>
            <p class="mt-1 text-sm text-gray-400">Policy controls, SSO, priority support.</p>
            <div class="mt-5 flex items-baseline gap-1">
              <span class="text-3xl">Custom</span>
            </div>
            <ul class="mt-5 space-y-2 text-sm text-gray-300">
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                SSO, SCIM
              </li>
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Audit logs, DLP
              </li>
              <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 w-4 h-4 text-teal-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Priority support
              </li>
            </ul>
            <a href="#try" class="mt-6 inline-flex w-full items-center justify-center gap-2 px-4 py-2.5 rounded-full text-sm bg-white/5 text-gray-100 hover:bg-white/10 border border-white/10 transition-all">Contact sales</a>
          </div>
        </div>
      </div>
    </section>