Interactive Glassmorphism Pricing Cards Section

<section class="relative max-w-7xl mr-auto ml-auto pt-20 pr-6 pb-20 pl-6">
    <div class="mx-auto max-w-3xl text-center">
      <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight">Choose Your GitHub Sync Plan</h1>
      <p class="mt-3 text-white/70">Fast, powerful, synchronized. Pick the plan that accelerates your workflow.</p>
    </div>

    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 mt-14" style="max-width: 900px; margin-left: auto; margin-right: auto;">
      <!-- FREE -->
      <div class="group relative">
        <div class="relative w-full overflow-visible [perspective:1200px]">
          <!-- Back page that follows the front cover -->
          <div class="absolute inset-0 rounded-[28px] bg-gradient-to-br from-blue-500/15 via-blue-600/25 to-blue-800/35 ring-1 ring-white/10 shadow-2xl [transform-style:preserve-3d] transition-transform duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:[transform:rotateY(45deg)_translateX(-20px)_translateZ(-30px)_translateY(-15px)_scale(0.95)]">
          </div>

          <!-- Glass cover with book opening effect -->
          <div class="relative z-10 rounded-[28px] shadow-2xl p-7 sm:p-8 min-h-[420px] flex flex-col justify-between [transform-style:preserve-3d] origin-left [transform:rotateY(0deg)] transition-transform duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:[transform:rotateY(-10deg)_translateY(-12px)_translateZ(10px)] transform-gpu" style="background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);">
            <div>
              <div class="text-center">
                <div class="text-xs tracking-[0.2em] text-white/70 mb-3">BASIC</div>
                <div class="text-5xl font-extrabold leading-none text-white">Free</div>
                <div class="mt-2 text-white/70">Trial</div>
              </div>

              <ul class="mt-8 space-y-3 text-[15px]">
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-[#9CCAF0]" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  <span>Up to 3 repositories</span>
                </li>
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-[#9CCAF0]" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  <span>Basic sync (every hour)</span>
                </li>
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-[#9CCAF0]" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  <span>Community support</span>
                </li>
              </ul>
            </div>

            <div class="pt-4">
              <button class="w-full relative isolate rounded-full px-5 py-3 text-sm font-semibold text-black bg-white/90 shadow-[0_6px_24px_rgba(0,0,0,0.35)] ring-1 ring-white/30 hover:bg-white/95 hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)] transition-all duration-300 hover:scale-105">
                <span>Get Started</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- PRO -->
      <div class="group relative">
        <div class="relative w-full overflow-visible [perspective:1200px]">
          <!-- Back page that follows the front cover -->
          <div class="absolute inset-0 rounded-[28px] bg-gradient-to-br from-sky-500/15 via-sky-600/25 to-indigo-800/35 ring-1 ring-white/10 shadow-2xl [transform-style:preserve-3d] transition-transform duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:[transform:rotateY(45deg)_translateX(-20px)_translateZ(-30px)_translateY(-15px)_scale(0.95)]">
          </div>

          <!-- Glass cover with book opening effect -->
          <div class="relative z-10 rounded-[28px] shadow-2xl p-7 sm:p-8 min-h-[420px] flex flex-col justify-between [transform-style:preserve-3d] origin-left [transform:rotateY(0deg)] transition-transform duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:[transform:rotateY(-10deg)_translateY(-12px)_translateZ(10px)] transform-gpu" style="background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(99,102,241,0.08)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(56,189,248,0.3); box-shadow: 0 8px 32px rgba(56,189,248,0.2), inset 0 1px 0 rgba(255,255,255,0.2);">
            <div>
              <div class="text-center">
                <div class="text-xs tracking-[0.2em] text-sky-300 mb-3">PRO</div>
                <div class="text-5xl font-extrabold leading-none text-white">$12<span class="text-lg align-super">/mo</span></div>
                <div class="mt-2 text-white/70">Best for teams</div>
              </div>

              <ul class="mt-8 space-y-3 text-[15px]">
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-sky-300" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  Up to 10 private repos
                </li>
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-sky-300" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  Real-time sync
                </li>
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-sky-300" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  Priority support
                </li>
              </ul>
            </div>

            <div class="pt-4">
              <button class="w-full relative isolate rounded-full px-5 py-3 text-sm font-semibold text-white bg-gradient-to-r from-sky-500 to-indigo-600 shadow-[0_6px_24px_rgba(56,189,248,0.4)] ring-1 ring-sky-400/30 hover:shadow-[0_8px_32px_rgba(56,189,248,0.5)] transition-all duration-300 hover:scale-105">
                <span>Upgrade to Pro</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- ULTRA -->
      <div class="group relative">
        <div class="relative w-full overflow-visible [perspective:1200px]">
          <!-- Back page that follows the front cover -->
          <div class="absolute inset-0 rounded-[28px] bg-gradient-to-br from-violet-500/15 via-purple-600/25 to-indigo-800/35 ring-1 ring-white/10 shadow-2xl [transform-style:preserve-3d] transition-transform duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:[transform:rotateY(45deg)_translateX(-20px)_translateZ(-30px)_translateY(-15px)_scale(0.95)]">
          </div>

          <!-- Glass cover with book opening effect -->
          <div class="relative z-10 rounded-[28px] shadow-2xl p-7 sm:p-8 min-h-[420px] flex flex-col justify-between [transform-style:preserve-3d] origin-left [transform:rotateY(0deg)] transition-transform duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:[transform:rotateY(-10deg)_translateY(-12px)_translateZ(10px)] transform-gpu" style="background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(147,51,234,0.08)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(168,85,247,0.3); box-shadow: 0 8px 32px rgba(168,85,247,0.2), inset 0 1px 0 rgba(255,255,255,0.2);">
            <div>
              <div class="text-center">
                <div class="text-xs tracking-[0.2em] text-violet-300 mb-3">ULTRA</div>
                <div class="text-5xl font-extrabold leading-none text-white">$29<span class="text-lg align-super">/mo</span></div>
                <div class="mt-2 text-white/70">Enterprise</div>
              </div>

              <ul class="mt-8 space-y-3 text-[15px]">
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-violet-300" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  Unlimited private repos
                </li>
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-violet-300" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  Instant webhooks
                </li>
                <li class="flex items-start gap-3 text-white/85">
                  <svg class="mt-1 h-4 w-4 text-violet-300" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""></path></svg>
                  24/7 priority support
                </li>
              </ul>
            </div>

            <div class="pt-4">
              <button class="w-full relative isolate rounded-full px-5 py-3 text-sm font-semibold text-white bg-gradient-to-r from-violet-500 to-purple-600 shadow-[0_6px_24px_rgba(168,85,247,0.4)] ring-1 ring-violet-400/30 hover:shadow-[0_8px_32px_rgba(168,85,247,0.5)] transition-all duration-300 hover:scale-105">
                <span>Go Ultra</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Enhanced ambient glow -->
    <div class="pointer-events-none absolute inset-0 -z-10">
      <div class="absolute left-1/2 top-24 h-96 w-96 -translate-x-1/2 rounded-full bg-gradient-radial from-sky-500/20 via-violet-500/10 to-transparent blur-[120px]"></div>
    </div>
  </section>