Animated Three-Plan Pricing Table Section

<section class="bg-neutral-950 pt-20 pb-20 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(5)">
      <div class="mx-auto max-w-7xl px-6">
        <div class="mx-auto max-w-3xl text-center mb-12">
          <span class="text-sm font-medium text-white/70 font-sans animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both]">
            Simple, Transparent Pricing
          </span>
          <h2 class="text-3xl sm:text-4xl tracking-tight text-white mt-2 font-instrument-serif font-normal animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both]">
            Choose Your Journey
          </h2>
          <p class="mt-4 text-white/80 font-sans animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.3s_both]">
            Select the perfect plan for your space exploration adventure
          </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
          <div class="relative overflow-hidden rounded-3xl bg-white/5 border border-white/10 p-8 backdrop-blur animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.1s_both]">
            <div class="mb-6">
              <h3 class="text-xl font-medium text-white tracking-tight font-sans">
                Orbital Experience
              </h3>
              <p class="text-sm text-white/70 mt-2 font-sans">
                Perfect for first-time space travelers
              </p>
            </div>
            <div class="mb-6">
              <div class="flex items-baseline gap-2">
                <span class="text-4xl font-semibold text-white tracking-tight font-sans">
                  $250K
                </span>
                <span class="text-white/60 text-sm font-sans">per seat</span>
              </div>
            </div>
            <ul class="space-y-3 mb-8">
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>4-hour orbital flight</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Zero-gravity experience</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Earth observation</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>3-day pre-flight training</span>
              </li>
            </ul>
            <button class="w-full rounded-full bg-white/10 text-white px-6 py-3 text-sm font-medium hover:bg-white/15 transition border border-white/10 font-sans">
              Reserve Seat
            </button>
          </div>
          <div class="relative overflow-hidden rounded-3xl bg-white border border-white/20 p-8 shadow-2xl transform md:scale-105 animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.2s_both]">
            <div class="absolute top-6 right-6">
              <span class="inline-flex items-center rounded-full bg-neutral-900 px-3 py-1 text-xs font-medium text-white border border-neutral-800 font-sans">
                Popular
              </span>
            </div>
            <div class="mb-6">
              <h3 class="text-xl font-medium text-neutral-900 tracking-tight font-sans">
                Lunar Gateway
              </h3>
              <p class="text-sm text-neutral-700 mt-2 font-sans">
                Experience the Moon up close
              </p>
            </div>
            <div class="mb-6">
              <div class="flex items-baseline gap-2">
                <span class="text-4xl font-semibold text-neutral-900 tracking-tight font-sans">
                  $1.2M
                </span>
                <span class="text-neutral-600 text-sm font-sans">per seat</span>
              </div>
            </div>
            <ul class="space-y-3 mb-8">
              <li class="flex items-start gap-3 text-sm text-neutral-700 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-900 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>7-day lunar orbit mission</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-neutral-700 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-900 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Private cabin accommodations</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-neutral-700 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-900 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Lunar surface observation</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-neutral-700 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-900 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Gourmet space meals</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-neutral-700 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-900 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>14-day intensive training</span>
              </li>
            </ul>
            <button class="w-full rounded-full bg-neutral-900 text-white px-6 py-3 text-sm font-medium hover:bg-neutral-800 transition font-sans">
              Reserve Seat
            </button>
          </div>
          <div class="relative overflow-hidden rounded-3xl bg-white/5 border border-white/10 p-8 backdrop-blur animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.3s_both]">
            <div class="mb-6">
              <h3 class="text-xl font-medium text-white tracking-tight font-sans">
                Mars Pioneer
              </h3>
              <p class="text-sm text-white/70 mt-2 font-sans">
                The ultimate space adventure
              </p>
            </div>
            <div class="mb-6">
              <div class="flex items-baseline gap-2">
                <span class="text-4xl font-semibold text-white tracking-tight font-sans">
                  $8.5M
                </span>
                <span class="text-white/60 text-sm font-sans">per seat</span>
              </div>
            </div>
            <ul class="space-y-3 mb-8">
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span class="">90-day Mars expedition</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span class="">Luxury suite accommodations</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span class="">Mars orbit &amp; surface flyby</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>All-inclusive amenities</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-white/80 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 flex-shrink-0 mt-0.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>6-month comprehensive training</span>
              </li>
            </ul>
            <button class="w-full rounded-full bg-white/10 text-white px-6 py-3 text-sm font-medium hover:bg-white/15 transition border border-white/10 font-sans">
              Reserve Seat
            </button>
          </div>
        </div>
        <div class="mt-12 text-center animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.4s_both]">
          <p class="text-sm text-white/70 font-sans">
            All flights include comprehensive insurance and medical support.
            <a href="#" class="text-white/90 hover:text-white underline">
              Learn more
            </a>
          </p>
        </div>
      </div>
    </section>