Animated Responsive Pricing Cards Section

<section
  class="z-10 sm:p-8 animate-scaleIn animation-delay-500 bg-white w-full max-w-7xl border-neutral-200/70 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 shadow-2xl">
  <!-- Header -->
  <div class="flex gap-6 sm:px-0 animate-fadeInUp pr-1 pl-1 items-center">
    <h2
      class="text-[44px] sm:text-6xl lg:text-7xl xl:text-8xl leading-[0.9] font-medium text-zinc-950 tracking-tight font-geist">
      Pricing.</h2>
    <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px bg-neutral-200 h-10"></span>
    <p class="sm:text-base text-sm font-normal text-zinc-400 font-geist mt-1">Intelligent automation for every scale</p>
  </div>
  <div class="h-px bg-neutral-200 mt-4 animate-fadeIn animation-delay-100"></div>

  <!-- Pricing Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8 mt-6 sm:mt-8">
    <!-- Starter Plan (Light card) -->
    <div class="lg:col-span-6 animate-fadeInLeft animation-delay-200">
      <div class="rounded-[28px] bg-white text-neutral-900 border border-neutral-200/70 shadow-2xl p-6 sm:p-8">


        <h3 class="text-3xl sm:text-4xl font-semibold tracking-tight">Starter</h3>
        <p class="text-neutral-600 mt-2">Perfect for small teams and individual creators starting their automation
          journey.</p>

        <div class="mt-6 mb-6">
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-semibold tracking-tight">$29</span>
            <span class="text-neutral-600">/month</span>
          </div>
          <p class="text-sm text-neutral-500 mt-1">Billed monthly</p>
        </div>

        <ul class="mt-6 space-y-4">
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neutral-900 text-white flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span class="text-neutral-800">10 AI content generations per day</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neutral-900 text-white flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span class="text-neutral-800">Basic SEO optimization</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neutral-900 text-white flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span class="text-neutral-800">3 distribution channels</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neutral-900 text-white flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span class="text-neutral-800">Email support</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neutral-900 text-white flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span class="text-neutral-800">14-day free trial</span>
          </li>
        </ul>

        <div class="mt-8">
          <a href="#demo"
            class="inline-flex w-full items-center justify-center rounded-xl px-5 py-3 text-sm font-medium text-white tracking-tight"
            style="background: linear-gradient(to bottom, rgb(23,23,23), rgb(17,17,17)); box-shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08); border: 1px solid rgba(0,0,0,0.5);">
            Start Free Trial
          </a>
        </div>
      </div>
    </div>

    <!-- Pro Plan (Dark card) -->
    <div class="lg:col-span-6 animate-fadeInRight animation-delay-300">
      <div
        class="sm:p-8 text-white bg-neutral-950 border-white/10 border rounded-[28px] pt-6 pr-6 pb-6 pl-6 relative shadow-2xl">
        <!-- Popular badge -->
        <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">

        </div>



        <h3 class="text-3xl sm:text-4xl font-semibold tracking-tight">Pro</h3>
        <p class="text-neutral-300 mt-2">Advanced automation for growing teams and content-focused businesses.</p>

        <div class="mt-6 mb-6">
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-semibold tracking-tight">$99</span>
            <span class="text-neutral-300">/month</span>
          </div>
          <p class="text-sm text-neutral-400 mt-1">Billed monthly</p>
        </div>

        <ul class="mt-6 space-y-4">
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400 text-neutral-900 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span>Unlimited AI content generation</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400 text-neutral-900 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span>Advanced SEO &amp; performance analytics</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400 text-neutral-900 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span class="">Unlimited distribution channels</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400 text-neutral-900 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span>Custom workflow automation</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400 text-neutral-900 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span>Priority support &amp; onboarding</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400 text-neutral-900 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
            <span>Team collaboration tools</span>
          </li>
        </ul>

        <div class="mt-8">
          <a href="#demo"
            class="inline-flex w-full items-center justify-center rounded-xl px-5 py-3 text-sm font-medium text-neutral-900 tracking-tight bg-gradient-to-r from-emerald-400 to-green-400 hover:from-emerald-500 hover:to-green-500 transition-all duration-200">
            Start Pro Trial
          </a>
        </div>
      </div>
    </div>

    <!-- Enterprise -->
    <div class="lg:col-span-6 animate-fadeInLeft animation-delay-400">
      <div
        class="rounded-[24px] bg-gradient-to-br from-neutral-50 to-neutral-100/60 border border-neutral-200 p-6 sm:p-8">
        <div class="flex items-center gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-neutral-700" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <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>
            <path d="m22 21-3-3 3-3" class=""></path>
            <path d="M16 18h6" class=""></path>
          </svg>
          <h4 class="text-xl font-semibold tracking-tight text-neutral-900">Enterprise</h4>
        </div>
        <p class="text-sm text-neutral-600 mt-3 max-w-[52ch]">Custom solutions for large organizations with dedicated
          support, white-label options, and enterprise-grade security.</p>
        <div class="mt-4 flex items-center gap-3">
          <p class="text-sm text-neutral-900 font-medium tracking-tight">Custom pricing</p>
          <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200">
              Contact Sales
            </span>
        </div>
      </div>
    </div>

    <!-- Add-ons -->
    <div class="lg:col-span-6 animate-fadeInRight animation-delay-400">
      <div
        class="rounded-[24px] bg-gradient-to-br from-neutral-50 to-neutral-100/60 border border-neutral-200 p-6 sm:p-8">
        <div class="flex items-center gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-neutral-700" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="3" class=""></circle>
            <path d="M12 1v6m0 6v6" class=""></path>
            <path d="m21 12-6-6m-6 6-6-6" class=""></path>
          </svg>
          <h4 class="text-xl font-semibold tracking-tight text-neutral-900">Add-ons</h4>
        </div>
        <p class="text-sm text-neutral-600 mt-3 max-w-[52ch]">Premium content templates, advanced integrations, custom
          AI training, and dedicated account management available.</p>
        <p class="mt-4 text-sm text-neutral-900 font-medium tracking-tight">Starting at $19/month</p>
      </div>
    </div>
  </div>

  <!-- Bottom CTA -->
  <div class="mt-8 text-center animate-fadeInUp animation-delay-500">
    <p class="text-sm text-neutral-600 mb-4">All plans include 14-day free trial • No credit card required • Cancel
      anytime</p>
    <a href="#demo"
      class="inline-flex items-center gap-2 text-sm text-neutral-900 hover:text-neutral-700 transition-colors">
      Compare all features
      <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" class="">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
    </a>
  </div>
</section>