Responsive 3-Tier Pricing Cards Section (Tailwind)

<div class="max-w-7xl md:px-6 mr-auto ml-auto pr-4 pl-4">
            <div class="text-center mb-16">
                <p class="mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-300 font-geist">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap h-4 w-4 text-blue-400"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
                    Simple, transparent pricing
                </p>
                <h2 class="text-3xl sm:text-4xl lg:text-5xl text-white mb-4 font-geist font-light tracking-tighter" style="">
                    Choose your plan
                </h2>
                <p class="text-lg text-slate-300 max-w-2xl mx-auto font-geist">
                    Start free and upgrade as you grow. All plans include unlimited exports and premium support.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mr-auto ml-auto items-center justify-start">
                <!-- Starter (smaller) -->
                <div class="p-6 md:p-7 rounded-xl border border-white/10 bg-white/[0.03] md:scale-95 md:transform md:opacity-90 hover:opacity-100 transition-transform duration-200">
                    <div class="text-left">
                        <h3 class="text-base md:text-lg font-medium text-white mb-2 font-geist">Starter</h3>
                        <div class="mb-4 flex items-end gap-2">
                            <span class="text-2xl md:text-3xl text-white font-geist font-light tracking-tighter" style="">$0</span>
                            <span class="text-slate-400 text-sm font-geist">/month</span>
                        </div>
                        <p class="text-sm text-slate-400 mb-6 font-geist">Perfect for getting started with animations</p>
                    </div>

                    <button class="w-full inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-slate-200 border border-white/10 bg-white/5 rounded-lg hover:bg-white/10 transition-colors font-geist mb-6">
                        Get Started
                        <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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right ml-2 h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
                    </button>

                    <div class="border-t border-white/10 border-dashed mb-6"></div>

                    <ul class="space-y-3">
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            5 animation projects
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Basic templates
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            CSS &amp; JSON export
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Community support
                        </li>
                    </ul>
                </div>

                <!-- Professional (medium) -->
                <div class="relative p-7 md:p-8 rounded-xl border border-blue-500/50 bg-blue-500/5 shadow-lg md:scale-100 md:transform hover:-translate-y-0.5 transition-transform duration-200">
                    <div class="absolute -top-3 left-4">
                        <span class="inline-flex items-center gap-1 ring-1 ring-white/15 text-[11px] font-medium text-white font-geist bg-white/10 rounded-full pt-1 pr-1 pb-1 pl-3 backdrop-blur">
                            Pro
                            <span class="inline-flex items-center gap-1 text-[10px] bg-blue-600/90 rounded-full pt-1 pr-2 pb-1 pl-2">
                                <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" data-lucide="flame" class="lucide lucide-flame h-3 w-3"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" class=""></path></svg>
                                Popular
                            </span>
                        </span>
                    </div>

                    <div class="text-left">
                        <h3 class="text-base md:text-lg font-medium text-white mb-2 font-geist">Professional</h3>
                        <div class="mb-4 flex items-end gap-2">
                            <span class="text-3xl md:text-4xl text-white font-geist font-light tracking-tighter" style="">$29</span>
                            <span class="text-slate-400 text-sm font-geist">/month</span>
                        </div>
                        <p class="text-sm text-slate-400 mb-6 font-geist">For professionals and growing teams</p>
                    </div>

                    <button class="w-full inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-500 transition-colors font-geist mb-6 shadow-2xl shadow-blue-900/20">
                        Get Started
                        <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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right ml-2 h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
                    </button>

                    <div class="border-t border-white/10 border-dashed mb-6"></div>

                    <ul class="space-y-3">
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Unlimited projects
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Premium templates
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Advanced animations
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox0="" 0="" 24="" 24"="" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Priority support
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Team collaboration
                        </li>
                    </ul>
                </div>

                <!-- Enterprise (bigger) -->
                <div class="p-7 md:p-10 rounded-xl border border-white/10 bg-white/[0.03] md:scale-105 md:transform md:z-10 hover:-translate-y-1 transition-transform duration-200">
                    <div class="text-left">
                        <h3 class="text-base md:text-lg font-medium text-white mb-2 font-geist">Enterprise</h3>
                        <div class="mb-4 flex items-end gap-2">
                            <span class="text-4xl md:text-5xl text-white font-geist font-light tracking-tighter" style="">$99</span>
                            <span class="text-slate-400 text-sm font-geist">/month</span>
                        </div>
                        <p class="text-sm text-slate-400 mb-6 font-geist">For large teams and organizations</p>
                    </div>

                    <button class="w-full inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium text-slate-200 border border-white/10 bg-white/5 rounded-lg hover:bg-white/10 transition-colors font-geist mb-6 shadow-lg">
                        Contact Sales
                        <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" data-lucide="arrow-up-right" class="ml-2 h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
                    </button>

                    <div class="border-t border-white/10 border-dashed mb-6"></div>

                    <ul class="space-y-3">
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Everything in Pro
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Custom templates
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            SSO &amp; advanced security
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            Dedicated support
                        </li>
                        <li class="flex items-center gap-3 text-sm text-slate-300 font-geist">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                            On-premise deployment
                        </li>
                    </ul>
                </div>
            </div>

            <div class="mt-12 text-center">
                <p class="text-sm text-slate-400 font-geist">
                    All plans include a 14-day free trial. No credit card required.
                </p>
            </div>
        </div>