Responsive Pricing Plans Section

<section id="pricing" class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-end justify-between gap-6">
                <div>
                    <p class="text-sm uppercase tracking-wider text-purple-300/90">Pricing</p>
                    <h2 class="mt-2 text-3xl lg:text-4xl tracking-tight" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 600">
                        Simple plans for teams of all sizes
                    </h2>
                </div>
            </div>

            <div class="mt-8 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Free -->
                <div class="rounded-2xl border border-white/10 bg-gradient-to-b from-gray-950 to-black p-6">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg tracking-tight">Free</h3>
                        <span class="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10">Small teams</span>
                    </div>
                    <p class="mt-1 text-sm text-gray-400">Perfect for getting started</p>
                    <div class="mt-5 flex items-baseline gap-1">
                        <span class="text-3xl">$0</span><span class="text-sm text-gray-400">forever</span>
                    </div>
                    <ul class="mt-5 space-y-2 text-sm text-gray-300">
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            Up to 10 users
                        </li>
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            10GB file storage
                        </li>
                    </ul>
                    <a href="#try" class="mt-6 inline-flex w-full items-center justify-center gap-2 px-4 py-2.5 rounded-full text-sm bg-white/5 text-gray-100 hover:bg-white/10 border border-white/10 transition-all">Get started</a>
                </div>

                <!-- Pro -->
                <div class="rounded-2xl border border-purple-400/30 bg-gradient-to-b from-gray-900/80 to-black p-6 relative">
                    <div class="absolute -top-3 right-4 px-2 py-1 rounded-full text-xs bg-purple-400 text-black">
                        Most popular
                    </div>
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg tracking-tight">Pro</h3>
                        <span class="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10">Growing teams</span>
                    </div>
                    <p class="mt-1 text-sm text-gray-300">
                        Everything in Free plus advanced features and integrations.
                    </p>
                    <div class="mt-5 flex items-baseline gap-1">
                        <span class="text-3xl">$8</span><span class="text-sm text-gray-400">/user/mo</span>
                    </div>
                    <ul class="mt-5 space-y-2 text-sm text-gray-300">
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            Unlimited users
                        </li>
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            100GB file storage
                        </li>
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            Advanced analytics
                        </li>
                    </ul>
                    <a href="#try" class="mt-6 inline-flex w-full items-center justify-center gap-2 px-4 py-2.5 rounded-full text-sm bg-purple-400 text-black hover:bg-purple-300 transition-all">Try Pro</a>
                </div>

                <!-- Enterprise -->
                <div class="rounded-2xl border border-white/10 bg-gradient-to-b from-gray-950 to-black p-6">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg tracking-tight">Enterprise</h3>
                        <span class="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10">Large teams</span>
                    </div>
                    <p class="mt-1 text-sm text-gray-400">
                        Advanced security, compliance, and dedicated support.
                    </p>
                    <div class="mt-5 flex items-baseline gap-1">
                        <span class="text-3xl">Custom</span>
                    </div>
                    <ul class="mt-5 space-y-2 text-sm text-gray-300">
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            SSO &amp; SCIM
                        </li>
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            Data governance
                        </li>
                        <li class="flex items-center gap-2">
                            <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="w-4 h-4 text-teal-300">
                                <path d="M20 6 9 17l-5-5" class=""></path>
                            </svg>
                            24/7 priority support
                        </li>
                    </ul>
                    <a href="#try" class="mt-6 inline-flex w-full items-center justify-center gap-2 px-4 py-2.5 rounded-full text-sm bg-white/5 text-gray-100 hover:bg-white/10 border border-white/10 transition-all">Contact sales</a>
                </div>
            </div>
        </div>
    </section>