Space Tourism Pricing Cards

<div class="py-24 px-6">
  <div class="max-w-7xl mx-auto">
    <div class="border-white/10 border rounded-3xl p-12 lg:p-16" style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);">
      <div class="text-center mb-16">
        <p class="uppercase text-sm font-medium text-white/40 tracking-wide mb-3 font-sans">Mission Packages</p>
        <h3 class="text-3xl lg:text-4xl text-white tracking-tight mb-6 font-manrope font-medium">Choose Your Space Journey</h3>
        <p class="text-lg text-white/60 max-w-3xl mx-auto font-sans">
          From suborbital flights to extended orbital missions, select the perfect adventure that matches your dreams and budget. All packages include comprehensive training and safety certification.
        </p>
      </div>
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="relative rounded-2xl border border-white/10 p-8" style="background: rgba(255, 255, 255, 0.02);">
          <div class="mb-8">
            <h4 class="text-xl font-semibold text-white mb-2 font-sans">Suborbital Flight</h4>
            <p class="text-sm text-white/60 mb-6 font-sans">Experience weightlessness and see Earth's curvature in this 15-minute journey to the edge of space.</p>
            <div class="flex items-baseline gap-2">
              <span class="text-4xl text-white font-manrope font-medium">$450K</span>
              <span class="text-sm text-white/40 font-sans">per person</span>
            </div>
          </div>
          <ul class="space-y-4 mb-8">
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">100km altitude flight</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">4 minutes of weightlessness</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">3-day training program</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">Official astronaut certificate</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">HD video recording</span>
            </li>
          </ul>
          <button class="w-full py-4 px-6 rounded-xl text-sm font-medium text-white border border-white/20 hover:border-white/30 transition-all duration-300 hover:bg-white/5 font-sans" style="background: rgba(255, 255, 255, 0.03);">Reserve Your Seat</button>
        </div>
        <div class="relative rounded-2xl border border-blue-500/30 p-8" style="background: rgba(59, 130, 246, 0.05);">
          <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
            <span class="px-4 py-1 text-xs font-medium text-white rounded-full border border-blue-500/30 font-sans" style="background: rgba(59, 130, 246, 0.15);">Most Popular</span>
          </div>
          <div class="mb-8">
            <h4 class="text-xl font-semibold text-white mb-2 font-sans">Orbital Mission</h4>
            <p class="text-sm text-white/60 mb-6 font-sans">Complete Earth orbits with extended zero gravity time and breathtaking views of our planet.</p>
            <div class="flex items-baseline gap-2">
              <span class="text-4xl text-white font-manrope font-medium">$2.5M</span>
              <span class="text-sm text-white/40 font-sans">per person</span>
            </div>
          </div>
          <ul class="space-y-4 mb-8">
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">3-day orbital flight</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">48 Earth orbits</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">6-week training program</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">Professional space meals</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">Science experiments participation</span>
            </li>
          </ul>
          <button class="w-full py-4 px-6 rounded-xl text-sm font-medium text-white border border-blue-500/30 hover:border-blue-500/50 transition-all duration-300 font-sans" style="background: rgba(59, 130, 246, 0.15);">Book Mission</button>
        </div>
        <div class="relative rounded-2xl border border-white/10 p-8" style="background: rgba(255, 255, 255, 0.02);">
          <div class="mb-8">
            <h4 class="text-xl font-semibold text-white mb-2 font-sans">Lunar Flyby</h4>
            <p class="text-sm text-white/60 mb-6 font-sans">
              The ultimate space adventure - journey around the Moon and witness views no human has seen for decades.
            </p>
            <div class="flex items-baseline gap-2">
              <span class="text-4xl text-white font-manrope font-medium">$55M</span>
              <span class="text-sm text-white/40 font-sans">per person</span>
            </div>
          </div>
          <ul class="space-y-4 mb-8">
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">8-day lunar mission</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">Moon flyby at 200km altitude</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">6-month training program</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">Luxury spacecraft accommodation</span>
            </li>
            <li class="flex items-center gap-3">
              <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="text-blue-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
              <span class="text-sm text-white/70 font-sans">Personal mission documentation</span>
            </li>
          </ul>
          <button class="w-full py-4 px-6 rounded-xl text-sm font-medium text-white border border-white/20 hover:border-white/30 transition-all duration-300 hover:bg-white/5 font-sans" style="background: rgba(255, 255, 255, 0.03);">Join Waitlist</button>
        </div>
      </div>
      <div class="text-center mt-16 pt-12 border-t border-white/10">
        <p class="text-sm text-white/60 mb-6 font-sans">
          All packages include comprehensive insurance, medical clearance, and post-flight support. Payment plans available.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <button class="inline-flex items-center justify-center px-6 py-3 rounded-xl text-sm font-medium text-white border border-white/20 hover:border-white/30 transition-all duration-300 hover:bg-white/5 font-sans" style="background: rgba(255, 255, 255, 0.03);">
            Schedule Consultation
          </button>
          <button class="inline-flex items-center justify-center px-6 py-3 rounded-xl text-sm font-medium text-white/80 border border-white/10 hover:border-white/20 transition-all duration-300 hover:bg-white/5 font-sans" style="background: rgba(255, 255, 255, 0.02);">
            Download Brochure
          </button>
        </div>
      </div>
    </div>
  </div>
</div>