3-Tier SaaS Pricing Section with Animated Background

<section class="bg-[#295dfc] text-white font-['Inter'] min-h-screen overflow-x-hidden relative selection:bg-white/20">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&amp;display=swap" rel="stylesheet">

<canvas id="bg-canvas" class="fixed inset-0 w-full h-full z-0 pointer-events-none opacity-40"></canvas>

<main class="relative z-10 max-w-[1280px] mx-auto px-6 py-16 lg:py-24 min-h-screen flex flex-col items-center justify-center gap-12">

        <!-- Page Heading & Toggle -->
        <div class="text-center w-full max-w-2xl mx-auto flex flex-col items-center z-20">
            <h1 class="text-4xl lg:text-5xl font-normal tracking-tight mb-4 leading-tight">Transparent, flexible pricing</h1>
            <p class="text-base font-light opacity-80 mb-8">Select the ideal plan to accelerate your team's financial workflows.</p>
            
            <div class="flex items-center justify-center gap-4 text-sm bg-white/5 p-2 rounded-full border border-white/10 backdrop-blur-md shadow-[0_20px_40px_-10px_rgba(0,0,0,0.3)]">
                <span class="font-light opacity-70 pl-4">Monthly</span>
                <button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full bg-white/20 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-white/30" role="switch" aria-checked="true" aria-label="Toggle billing period">
                    <span aria-hidden="true" class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out scale-75"></span>
                </button>
                <span class="font-normal opacity-100 pr-2">Annually <span class="text-[#fbbf24] ml-1 text-xs py-1 px-2 rounded-full bg-[#fbbf24]/10">Save 20%</span></span>
            </div>
        </div>

        <!-- Pricing Cards -->
        <div class="flex flex-col lg:flex-row items-stretch justify-center gap-8 lg:gap-6 w-full">

            <!-- Tier 1: Starter -->
            <div class="w-full max-w-[380px] flex flex-col bg-white/5 border border-white/10 rounded-[2rem] p-8 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.4)] relative z-10 backdrop-blur-md transition-transform hover:-translate-y-1">
                
                <div class="flex justify-between items-center border-b border-white/10 pb-5 mb-8">
                    <span class="text-xl font-light opacity-50 tracking-tight">01</span>
                    <span class="text-xs font-normal uppercase tracking-widest opacity-50">Starter</span>
                </div>

                <div>
                    <h2 class="text-5xl font-normal tracking-tight mb-4 leading-tight">$0<span class="text-xl font-light opacity-50 tracking-tight">/mo</span></h2>
                    <p class="text-sm font-light opacity-80 leading-relaxed">Generate single-use virtual cards for online purchases, ensuring your primary accounts remain entirely insulated.</p>
                </div>

                <!-- Scaled Down Illustration -->
                <div class="relative w-full flex items-center justify-center mt-8 mb-8 h-48">
                    <div class="absolute w-40 h-40 rounded-full bg-[#3b6df8] opacity-40 blur-3xl"></div>
                    <div class="relative w-48 h-48 flex items-center justify-center">
                        <div class="absolute bottom-4 w-36 h-16 rounded-[50%] bg-[#5b8af9]" style="box-shadow: 0 20px 0 #1e40af;"></div>
                        <div class="absolute bottom-12 w-28 h-12 rounded-[50%] bg-[#8baafb]" style="box-shadow: 0 16px 0 #3b6df8;"></div>
                        <div class="anim-float absolute top-4 w-24 h-36 rounded-2xl bg-gradient-to-tr from-[#f97316] to-[#fbbf24] p-3 shadow-2xl border border-white/20 flex flex-col justify-between" style="transform: rotateX(55deg) rotateZ(-35deg);">
                            <div class="flex justify-between items-start">
                                <iconify-icon icon="solar:sim-card-linear" class="text-white/90" width="18" style="stroke-width: 1.5;"></iconify-icon>
                                <iconify-icon icon="solar:card-linear" class="text-white/50" width="16" style="stroke-width: 1.5;"></iconify-icon>
                            </div>
                            <div class="flex gap-1">
                                <div class="w-1.5 h-1.5 rounded-full bg-white/60"></div>
                                <div class="w-1.5 h-1.5 rounded-full bg-white/60"></div>
                                <div class="w-1.5 h-1.5 rounded-full bg-white/60"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Features Check -->
                <ul class="flex flex-col gap-3 mb-8 w-full mt-auto">
                    <li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> 5 Virtual Cards</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Standard Support</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Basic Analytics</li>
                </ul>

                <button class="w-full bg-white/10 text-white py-4 rounded-full text-sm font-normal hover:bg-white/20 transition-all border border-white/10 mt-auto">Get Started</button>
            </div>

            <!-- Tier 2: Professional (Highlighted) -->
            <div class="w-full max-w-[380px] flex flex-col bg-white/10 border border-white/30 rounded-[2rem] p-8 shadow-[0_50px_100px_-20px_rgba(0,0,0,0.6)] relative z-20 backdrop-blur-xl lg:-translate-y-4">
                
                <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-[#f97316] to-[#fbbf24] text-white text-xs font-normal px-4 py-1.5 rounded-full shadow-lg tracking-wide">
                    Most Popular
                </div>

                <div class="flex justify-between items-center border-b border-white/20 pb-5 mb-8">
                    <span class="text-xl font-light opacity-70 tracking-tight">02</span>
                    <span class="text-xs font-normal uppercase tracking-widest opacity-90">Professional</span>
                </div>

                <div>
                    <h2 class="text-5xl font-normal tracking-tight mb-4 leading-tight">$12<span class="text-xl font-light opacity-60 tracking-tight">/mo</span></h2>
                    <p class="text-sm font-light opacity-90 leading-relaxed">Set automated parameters to effortlessly direct surplus funds into varied asset allocations.</p>
                </div>

                <!-- Scaled Down Illustration -->
                <div class="relative w-full flex items-center justify-center mt-8 mb-8 h-48">
                    <div class="absolute w-40 h-40 rounded-full bg-[#3b6df8] opacity-60 blur-3xl"></div>
                    <div class="relative w-48 h-48 flex items-center justify-center">
                        <div class="absolute bottom-6 w-40 h-16 rounded-[50%] bg-[#4f7df9]" style="box-shadow: 0 24px 0 #1e40af;"></div>
                        <div class="anim-float absolute bottom-20 w-20 h-20 rounded-full bg-gradient-to-br from-gray-100 to-gray-400 border border-white/50 flex items-center justify-center" style="transform: rotateX(65deg); box-shadow: 0 10px 0 #9ca3af;">
                            <div class="w-14 h-14 rounded-full border border-gray-400/30"></div>
                        </div>
                        <div class="anim-float absolute top-2 w-20 h-32 rounded-2xl bg-gradient-to-tr from-[#f97316] to-[#fbbf24] p-2.5 shadow-2xl border border-white/20" style="transform: rotateX(45deg) rotateZ(15deg); animation-delay: 0.5s;">
                            <div class="w-5 h-3 bg-white/30 rounded-sm mb-2"></div>
                            <div class="w-full h-1 bg-white/20 rounded-full mb-1.5"></div>
                            <div class="w-2/3 h-1 bg-white/20 rounded-full"></div>
                        </div>
                    </div>
                </div>

                <!-- Features Check -->
                <ul class="flex flex-col gap-3 mb-8 w-full mt-auto">
                    <li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Unlimited Virtual Cards</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Priority Support</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Smart Routing Rules</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Custom Portfolios</li>
                </ul>

                <button class="w-full bg-white text-[#295dfc] py-4 rounded-full text-sm font-normal hover:bg-opacity-90 transition-all shadow-xl shadow-black/10 mt-auto">Upgrade to Pro</button>
            </div>

            <!-- Tier 3: Enterprise -->
            <div class="w-full max-w-[380px] flex flex-col bg-white/5 border border-white/10 rounded-[2rem] p-8 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.4)] relative z-10 backdrop-blur-md transition-transform hover:-translate-y-1">
                
                <div class="flex justify-between items-center border-b border-white/10 pb-5 mb-8">
                    <span class="text-xl font-light opacity-50 tracking-tight">03</span>
                    <span class="text-xs font-normal uppercase tracking-widest opacity-50">Enterprise</span>
                </div>

                <div>
                    <h2 class="text-5xl font-normal tracking-tight mb-4 leading-tight">$49<span class="text-xl font-light opacity-50 tracking-tight">/mo</span></h2>
                    <p class="text-sm font-light opacity-80 leading-relaxed">Track company-wide cash flow through real-time analytics, featuring AI-driven expense sorting.</p>
                </div>

                <!-- Scaled Down Illustration -->
                <div class="relative w-full flex items-center justify-center mt-8 mb-8 h-48">
                    <div class="absolute w-40 h-40 rounded-full bg-[#3b6df8] opacity-40 blur-3xl"></div>
                    <div class="relative w-48 h-48 flex items-center justify-center">
                        <div class="absolute bottom-4 right-4 w-24 h-24 bg-[#5b8af9] rounded-sm" style="transform: rotateX(60deg) rotateZ(45deg); box-shadow: -12px 12px 0 #1e40af;"></div>
                        <div class="absolute bottom-12 left-4 w-20 h-20 bg-[#8baafb] rounded-sm" style="transform: rotateX(60deg) rotateZ(45deg); box-shadow: -8px 8px 0 #3b6df8;"></div>
                        <div class="anim-float absolute top-8 left-4 w-28 h-16 rounded-2xl bg-gradient-to-tr from-[#f97316] to-[#fbbf24] p-2.5 shadow-2xl border border-white/20 flex flex-col justify-between" style="transform: rotateX(60deg) rotateZ(-45deg); animation-delay: 1s;">
                            <iconify-icon icon="solar:sim-card-linear" class="text-white/80" width="14" style="stroke-width: 1.5;"></iconify-icon>
                            <div class="w-full h-1 bg-white/30 rounded-full"></div>
                        </div>
                        <div class="anim-float absolute top-12 right-2 w-28 h-20 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 p-3 shadow-xl flex items-end" style="transform: rotateX(10deg) rotateY(-15deg); animation-delay: 0.2s;">
                            <svg viewBox="0 0 100 50" class="w-full h-full overflow-visible">
                                <path d="M0,40 Q20,10 40,30 T80,10 T100,20" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Features Check -->
                <ul class="flex flex-col gap-3 mb-8 w-full mt-auto">
                    <li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Everything in Pro</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Dedicated Account Manager</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Machine-learning Insights</li>
                    <li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Custom API Access</li>
                </ul>

                <button class="w-full bg-white/10 text-white py-4 rounded-full text-sm font-normal hover:bg-white/20 transition-all border border-white/10 mt-auto">Contact Sales</button>
            </div>

        </div>
    </main>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
        const canvas = document.getElementById('bg-canvas');
        const ctx = canvas.getContext('2d');
        let width, height, particles;

        function initCanvas() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            particles = [];
            const particleCount = window.innerWidth < 768 ? 30 : 70;
            
            for (let i = 0; i < particleCount; i++) {
                particles.push({
                    x: Math.random() * width,
                    y: Math.random() * height,
                    vx: (Math.random() - 0.5) * 0.3,
                    vy: (Math.random() - 0.5) * 0.3,
                    radius: Math.random() * 1.5 + 0.5
                });
            }
        }

        function drawCanvas() {
            ctx.clearRect(0, 0, width, height);
            ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
            ctx.lineWidth = 1;

            particles.forEach((p, i) => {
                p.x += p.vx;
                p.y += p.vy;

                if (p.x < 0 || p.x > width) p.vx *= -1;
                if (p.y < 0 || p.y > height) p.vy *= -1;

                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fill();

                for (let j = i + 1; j < particles.length; j++) {
                    const p2 = particles[j];
                    const dist = Math.hypot(p.x - p2.x, p.y - p2.y);
                    if (dist < 120) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.stroke();
                    }
                }
            });
        }

        const floatElements = document.querySelectorAll('.anim-float');
        floatElements.forEach(el => {
            el.dataset.baseTransform = el.style.transform || '';
            const delayStr = el.style.animationDelay;
            el.dataset.delay = delayStr ? parseFloat(delayStr) : 0;
            el.style.animationDelay = ''; 
        });

        function animate() {
            drawCanvas();
            const time = performance.now() / 1000;
            floatElements.forEach((el, index) => {
                const delay = parseFloat(el.dataset.delay);
                const yOffset = Math.sin(time * 1.5 + index + delay * 5) * 8; 
                el.style.transform = `${el.dataset.baseTransform} translateY(${yOffset}px)`;
            });
            requestAnimationFrame(animate);
        }

        window.addEventListener('resize', initCanvas);
        initCanvas();
        animate();
    </script>
</section>