Three-Tier SaaS Pricing Section

<section class="z-10 w-full max-w-6xl mt-28 mr-auto mb-28 ml-auto pt-12 pr-6 pl-6 relative">
            
            <!-- Section Header -->
            <div class="text-center mb-24 relative">
                <!-- Red Glow behind title -->
                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] bg-rose-500/10 blur-[100px] rounded-full -z-10 pointer-events-none"></div>
                
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 text-neutral-300 text-xs font-medium mb-6 backdrop-blur-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                    <span>Plans &amp; Pricing</span>
                </div>
                
                <h2 class="text-5xl sm:text-6xl font-medium tracking-tight text-white mb-6">Simple, transparent pricing</h2>
            </div>

            <!-- Pricing Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                <!-- Card 1: Starter -->
                <div class="rounded-3xl border border-white/10 bg-[#0A0A0A] p-6 flex flex-col relative group h-full">
                    <div class="mb-6">
                        <h3 class="text-lg font-normal text-white mb-2">Starter</h3>
                        <div class="flex items-baseline gap-1">
                            <span class="text-5xl font-medium text-white tracking-tight">$15</span>
                        </div>
                        <p class="text-sm text-neutral-500 mt-2 font-light">per month</p>
                    </div>

                    <!-- Inner Box -->
                    <div class="rounded-2xl bg-neutral-900/30 border border-white/5 p-5 mb-8 flex-1 flex flex-col">
                        <h4 class="text-sm font-medium text-white mb-4">Plan Details</h4>
                        <div class="space-y-0 text-sm mb-6">
                            <div class="flex justify-between py-3 border-b border-white/5">
                                <span class="text-neutral-400 font-light">Users</span>
                                <span class="text-white font-light">1</span>
                            </div>
                            <div class="flex justify-between py-3 border-b border-white/5">
                                <span class="text-neutral-400 font-light">Generations</span>
                                <span class="text-white font-light">20k<span class="text-neutral-500">/mo</span></span>
                            </div>
                            <div class="flex justify-between py-3">
                                <span class="text-neutral-400 font-light">Engine</span>
                                <span class="text-white font-light"><span class="text-neutral-500 mr-1">Base</span> GPT-3.5</span>
                            </div>
                        </div>
                        <div class="mt-auto">
                             <button class="w-full py-3 rounded-xl border border-white/10 text-white font-medium hover:bg-white/5 transition-colors text-sm">
                                Get Started
                            </button>
                        </div>
                    </div>

                    <!-- Features -->
                    <div class="">
                        <h4 class="text-sm font-medium text-white mb-4">Features</h4>
                        <ul class="space-y-4">
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                Basic Chat Assistant
                            </li>
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                5 Project Workspaces
                            </li>
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                Standard Editor
                            </li>
                             <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                10 Languages
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Card 2: Growth (Highlighted) -->
                <div class="rounded-3xl border border-rose-500/20 bg-[#0A0A0A] p-6 flex flex-col relative shadow-[0_0_40px_-20px_rgba(225,29,72,0.15)] h-full">
                    <div class="mb-6">
                        <h3 class="text-lg font-normal text-white mb-2">Growth</h3>
                        <div class="flex items-baseline gap-3">
                            <span class="text-5xl font-medium text-white tracking-tight">$49</span>
                            <span class="text-3xl text-neutral-600 line-through decoration-neutral-600 font-light">$69</span>
                        </div>
                        <p class="text-sm text-neutral-500 mt-2 font-light">per month</p>
                    </div>

                    <!-- Inner Box -->
                    <div class="rounded-2xl bg-neutral-900/30 border border-white/5 p-5 mb-8 flex-1 flex flex-col">
                        <h4 class="text-sm font-medium text-white mb-4">Plan Details</h4>
                        <div class="space-y-0 text-sm mb-6">
                            <div class="flex justify-between py-3 border-b border-white/5">
                                <span class="text-neutral-400 font-light">Users</span>
                                <span class="text-white font-light">Up to 5</span>
                            </div>
                            <div class="flex justify-between py-3 border-b border-white/5">
                                <span class="text-neutral-400 font-light">Generations</span>
                                <span class="text-white font-light">Unlimited</span>
                            </div>
                            <div class="flex justify-between py-3">
                                <span class="text-neutral-400 font-light">Engine</span>
                                <span class="text-white font-light"><span class="text-neutral-500 mr-1">Latest</span> GPT-4</span>
                            </div>
                        </div>
                        <div class="mt-auto">
                            <button class="w-full py-3 rounded-xl bg-rose-600 text-white font-medium hover:bg-rose-500 transition-colors shadow-lg shadow-rose-900/20 text-sm">
                                Start Growth Trial
                            </button>
                        </div>
                    </div>

                    <!-- Features -->
                    <div class="">
                        <h4 class="text-sm font-medium text-white mb-4">Everything in Starter, plus:</h4>
                        <ul class="space-y-4">
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-rose-500"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                Advanced Context Window
                            </li>
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-rose-500"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                Priority Generation Queue
                            </li>
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-rose-500"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                AI Canvas Editor Pro
                            </li>
                             <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-rose-500"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                95+ Languages &amp; Dialects
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Card 3: Scale -->
                <div class="rounded-3xl border border-white/10 bg-[#0A0A0A] p-6 flex flex-col relative group h-full">
                    <div class="mb-6">
                        <h3 class="text-lg font-normal text-white mb-2">Scale</h3>
                        <div class="flex items-baseline gap-1">
                            <span class="text-5xl font-medium text-white tracking-tight">$299</span>
                        </div>
                        <p class="text-sm text-neutral-500 mt-2 font-light">per month</p>
                    </div>

                    <!-- Inner Box -->
                    <div class="rounded-2xl bg-neutral-900/30 border border-white/5 p-5 mb-8 flex-1 flex flex-col">
                        <h4 class="text-sm font-medium text-white mb-4">Plan Details</h4>
                        <div class="space-y-0 text-sm mb-6">
                            <div class="flex justify-between py-3 border-b border-white/5">
                                <span class="text-neutral-400 font-light">Users</span>
                                <span class="text-white font-light">Unlimited</span>
                            </div>
                            <div class="flex justify-between py-3 border-b border-white/5">
                                <span class="text-neutral-400 font-light">Generations</span>
                                <span class="text-white font-light">Unlimited</span>
                            </div>
                            <div class="flex justify-between py-3">
                                <span class="text-neutral-400 font-light">Engine</span>
                                <span class="text-white font-light"><span class="text-neutral-500 mr-1">Fine-tuned</span> GPT-4</span>
                            </div>
                        </div>
                        <div class="mt-auto">
                            <button class="w-full py-3 rounded-xl border border-white/10 text-white font-medium hover:bg-white/5 transition-colors text-sm">
                                Contact Sales
                            </button>
                        </div>
                    </div>

                    <!-- Features -->
                    <div class="">
                        <h4 class="text-sm font-medium text-white mb-4">Everything in Growth, plus:</h4>
                        <ul class="space-y-4">
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                Custom Model Training
                            </li>
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                Dedicated Success Manager
                            </li>
                            <li class="flex items-center gap-3 text-sm text-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><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-neutral-400 font-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-4 h-4 text-white"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                99.9% Uptime SLA
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </section>