Animated Pricing Section with Plan Toggle

<section class="sm:pt-12 sm:pb-12 z-10 mr-8 ml-8 pt-24 pb-24 relative">
        <div class="lg:pt-8 lg:pl-8 lg:pr-8 lg:pb-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-gradient-to-br from-white/0 via-white/10 to-white/0 max-w-7xl rounded-3xl mr-auto ml-auto pt-8 pr-8 pb-8 pl-8">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between max-w-7xl mr-auto mb-16 ml-auto pr-6 pl-6">
  <!-- Left: Headings -->
  <div class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-left max-w-none">
    <h2 class="leading-7 text-base font-semibold text-sky-400 font-geist">Pricing</h2>
    <p class="mt-2 text-3xl font-semibold tracking-tight text-white sm:text-4xl font-geist">
      Simple plans for every team
    </p>
    <p class="mt-6 text-lg leading-8 text-white/70">
      Choose the plan that fits your workflow and scale as your business grows.
    </p>
  </div>

  <!-- Right: Segmented control -->
  <div class="md:mt-0 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll mt-8">
    <div class="inline-flex border-white/10 border rounded-xl pt-1 pr-1 pb-1 pl-1 items-center" role="tablist" aria-label="Billing period" id="billing-toggle">
      <button type="button" role="tab" aria-selected="true" data-period="monthly" class="px-4 py-2 text-sm font-medium rounded-lg transition bg-sky-500/20 text-sky-200 ring-1 ring-inset ring-sky-500/30">
        Monthly
      </button>
      <button type="button" role="tab" aria-selected="false" data-period="annual" class="px-4 py-2 text-sm font-medium rounded-lg transition text-white/80 hover:text-white">
        Annual <span class="ml-1 text-xs text-sky-300/80">(save 20%)</span>
      </button>
    </div>
  </div>
</div>

          <div class="grid grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-2 max-w-2xl mx-auto gap-x-8 gap-y-8">
  <!-- Card 1 -->
  <div class="overflow-hidden [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll border-white/10 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative backdrop-blur-xl">
    <!-- Header -->
    <div class="flex items-start justify-between">
      <div class="">
        <h3 class="text-3xl font-semibold tracking-tight text-white font-geist">Spending Intelligence</h3>
        <p class="mt-2 text-sky-400 font-medium text-sm">Starter Plan</p>
      </div>
      <button class="group hover:shadow-sky-500/30 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-1 active:scale-95 transition-all duration-500 ease-out cursor-pointer hover:border-sky-400/60 overflow-hidden bg-gradient-to-br from-sky-900/40 via-black-900/60 to-black/80 border-sky-500/30 border-2 rounded-full pt-2 pr-3 pb-2 pl-4 relative shadow-2xl backdrop-blur-xl">
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-sky-400/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-out"></div>
        <div class="group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-r from-sky-500/10 via-sky-400/20 to-sky-500/10 opacity-0 rounded-2xl absolute top-0 right-0 bottom-0 left-0"></div>
        <div class="relative z-10 flex items-center gap-2">
          <div class="flex-1 text-left">
            <p class="group-hover:text-white transition-colors duration-300 text-xs font-bold text-white font-geist drop-shadow-sm">
              Contact Us
            </p>
          </div>
          <div class="opacity-40 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300">
            <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" class="w-4 h-4 text-white">
              <path d="M9 5l7 7-7 7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" class=""></path>
            </svg>
          </div>
        </div>
      </button>
    </div>

    <!-- Price -->
    <div class="flex items-end gap-2 mt-6">
      <div class="text-5xl font-bold tracking-tight text-white font-geist">$9</div>
      <div class="pb-2 text-white/60 text-sm">/month</div>
    </div>

    <p class="mt-3 text-white/70 text-lg leading-8">
      Make sense of every dollar. Sora classifies transactions, highlights trends, and surfaces insights you can act on.
    </p>

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

    <!-- Features -->
    <ul class="space-y-4">
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Real-time categorization with accuracy improvements over time.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Trend analysis with monthly deltas and seasonality highlights.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Subscription detection, duplicates cleanup, and price change alerts.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Anomaly alerts for unusual spend and merchant risk signals.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Exportable reports for taxes and budgeting.
      </li>
    </ul>
  </div>

  <!-- Card 2 -->
  <div class="overflow-hidden [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll border-white/10 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative backdrop-blur-xl">
    <!-- Header -->
    <div class="flex items-start justify-between">
      <div class="">
        <h3 class="text-3xl font-semibold tracking-tight text-white font-geist">Automation &amp; Goals</h3>
        <p class="mt-2 text-sky-400 font-medium text-sm">Pro Plan</p>
      </div>
      <button class="group hover:shadow-sky-500/30 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-1 active:scale-95 transition-all duration-500 ease-out cursor-pointer hover:border-sky-400/60 overflow-hidden bg-gradient-to-br from-sky-900/40 via-black-900/60 to-black/80 border-sky-500/30 border-2 rounded-full pt-2 pr-3 pb-2 pl-4 relative shadow-2xl backdrop-blur-xl">
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-sky-400/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-out"></div>
        <div class="group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-r from-sky-500/10 via-sky-400/20 to-sky-500/10 opacity-0 rounded-2xl absolute top-0 right-0 bottom-0 left-0"></div>
        <div class="relative z-10 flex items-center gap-2">
          <div class="flex-1 text-left">
            <p class="group-hover:text-white transition-colors duration-300 text-xs font-bold text-white font-geist drop-shadow-sm">
              Contact Us
            </p>
          </div>
          <div class="opacity-40 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300">
            <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" class="w-4 h-4 text-white">
              <path d="M9 5l7 7-7 7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" class=""></path>
            </svg>
          </div>
        </div>
      </button>
    </div>

    <!-- Price -->
    <div class="flex items-end gap-2 mt-6">
      <div class="text-5xl font-bold tracking-tight text-white font-geist">$19</div>
      <div class="pb-2 text-white/60 text-sm">/month</div>
    </div>

    <p class="mt-3 text-white/70 text-lg leading-8">
      Reach your targets faster. Set rules, schedule transfers, and let Sora automate the busywork.
    </p>

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

    <!-- Features -->
    <ul class="space-y-4">
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Auto-save rules by paycheck, merchant, or category.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Smart bill reminders, autopay tracking, and snooze.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Envelope-style budgets with rollover and guardrails.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Shared budgets and goals for partners or family.
      </li>
      <li class="flex items-start gap-3 text-base text-white/90">
        <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-sky-500/15">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
        </span>
        Integrations and secure sync with your favorite banks.
      </li>
    </ul>
  </div>
</div>
        </div>
      </section>