<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Minimal Pricing</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'fade-in-up': 'fadeInUp 0.5s ease-out forwards',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeInUp: {
                            '0%': { opacity: '0', transform: 'translateY(10px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Custom Toggle Switch CSS */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #000;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #000;
        }
        
        .price-text {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 1;
            transform: translateY(0);
        }
        
        .price-text.changing {
            opacity: 0;
            transform: translateY(5px);
        }

        /* Subtle grain texture for background interest */
        .bg-grain {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
        }

        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-white text-neutral-900 font-sans selection:bg-neutral-900 selection:text-white flex flex-col min-h-screen">

    <!-- Navbar -->
    <nav class="w-full py-6 px-6 md:px-12 flex justify-between items-center border-b border-neutral-100 z-50 bg-white/80 backdrop-blur-md sticky top-0">
        <div class="flex items-center gap-2">
            <div class="w-6 h-6 bg-black rounded-full"></div>
            <span class="font-bold tracking-tight text-lg">Monochrome.</span>
        </div>
        <div class="hidden md:flex gap-8 text-sm font-medium text-neutral-500">
            <a href="#" class="hover:text-black transition-colors">Product</a>
            <a href="#" class="hover:text-black transition-colors">Solutions</a>
            <a href="#" class="text-black">Pricing</a>
            <a href="#" class="hover:text-black transition-colors">About</a>
        </div>
        <div>
            <a href="#" class="px-5 py-2 text-sm font-medium text-white bg-black rounded-full hover:bg-neutral-800 transition-all transform hover:scale-105">Get Started</a>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="flex-grow relative overflow-hidden">
        <!-- Background Elements -->
        <div class="absolute inset-0 bg-grain pointer-events-none z-0"></div>
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-gradient-to-b from-neutral-50 to-transparent rounded-full blur-3xl -z-10 opacity-50"></div>

        <div class="max-w-7xl mx-auto px-6 py-20 md:py-32 relative z-10">
            
            <!-- Header -->
            <div class="text-center max-w-3xl mx-auto mb-20 animate-fade-in-up">
                <h2 class="text-xs font-bold tracking-widest uppercase text-neutral-500 mb-4">Pricing Plans</h2>
                <h1 class="text-5xl md:text-6xl font-bold tracking-tight mb-6 text-neutral-900">
                    Simple pricing for <br class="hidden md:block" />
                    <span class="text-neutral-400">complex problems.</span>
                </h1>
                <p class="text-lg text-neutral-500 mb-10">
                    Choose the plan that fits your needs. No hidden fees. <br />Cancel anytime within the dashboard.
                </p>

                <!-- Toggle -->
                <div class="flex items-center justify-center gap-4">
                    <span class="text-sm font-medium text-neutral-500" id="monthly-label">Monthly</span>
                    
                    <button 
                        id="billing-toggle" 
                        class="relative w-14 h-8 bg-neutral-200 rounded-full p-1 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
                        aria-pressed="false"
                        aria-label="Toggle billing period"
                    >
                        <span 
                            id="toggle-circle"
                            class="block w-6 h-6 bg-white rounded-full shadow-sm transform transition-transform duration-300 translate-x-0"
                        ></span>
                    </button>

                    <span class="text-sm font-medium text-neutral-900" id="yearly-label">Yearly</span>
                    <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-neutral-100 text-neutral-800 border border-neutral-200">
                        Save 20%
                    </span>
                </div>
            </div>

            <!-- Pricing Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
                
                <!-- Plan 1: Starter -->
                <div class="group bg-white rounded-3xl p-8 border border-neutral-200 card-hover relative flex flex-col h-full animate-fade-in-up" style="animation-delay: 0.1s;">
                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-neutral-900">Starter</h3>
                        <p class="text-sm text-neutral-500 mt-2 h-10">Essential tools for individuals and hobbyists.</p>
                    </div>
                    <div class="mb-8 flex items-baseline gap-1">
                        <span class="text-4xl font-bold tracking-tight">$</span>
                        <span class="text-5xl font-bold tracking-tight price-amount" data-monthly="0" data-yearly="0">0</span>
                        <span class="text-neutral-500 ml-1">/mo</span>
                    </div>
                    
                    <a href="#" class="w-full block text-center py-3 px-6 rounded-xl border border-neutral-200 text-neutral-900 font-semibold hover:border-black hover:bg-neutral-50 transition-all duration-200">
                        Start for free
                    </a>

                    <div class="mt-8 space-y-4 flex-grow">
                        <p class="text-xs font-bold uppercase text-neutral-400 tracking-wider">Features</p>
                        <ul class="space-y-3 text-sm text-neutral-600">
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-neutral-900"></i>
                                <span>1 Project included</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-neutral-900"></i>
                                <span>Basic Analytics</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-neutral-900"></i>
                                <span>24h Support response</span>
                            </li>
                            <li class="flex items-center gap-3 opacity-40">
                                <i data-lucide="minus" class="w-4 h-4"></i>
                                <span>Collaborative workspace</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Plan 2: Pro (Featured) -->
                <div class="group bg-neutral-900 rounded-3xl p-8 border border-neutral-900 card-hover relative flex flex-col h-full transform md:-translate-y-4 shadow-2xl animate-fade-in-up" style="animation-delay: 0.2s;">
                    <!-- Badge -->
                    <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-white border border-neutral-200 rounded-full text-xs font-bold uppercase tracking-wide shadow-sm text-neutral-900">
                        Most Popular
                    </div>

                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-white">Professional</h3>
                        <p class="text-sm text-neutral-400 mt-2 h-10">Advanced features for growing teams and startups.</p>
                    </div>
                    <div class="mb-8 flex items-baseline gap-1 text-white">
                        <span class="text-4xl font-bold tracking-tight">$</span>
                        <span class="text-5xl font-bold tracking-tight price-amount" data-monthly="29" data-yearly="24">29</span>
                        <span class="text-neutral-400 ml-1">/mo</span>
                    </div>
                    
                    <a href="#" class="w-full block text-center py-3 px-6 rounded-xl bg-white text-black font-semibold hover:bg-neutral-200 transition-all duration-200 shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:shadow-[0_0_25px_rgba(255,255,255,0.5)]">
                        Get Started
                    </a>

                    <div class="mt-8 space-y-4 flex-grow">
                        <p class="text-xs font-bold uppercase text-neutral-500 tracking-wider">Everything in Starter plus</p>
                        <ul class="space-y-3 text-sm text-neutral-300">
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
                                <span>Unlimited Projects</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
                                <span>Advanced Analytics</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
                                <span>Priority Support</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
                                <span>Collaborative workspace</span>
                            </li>
                             <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
                                <span>Custom Integrations</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Plan 3: Enterprise -->
                <div class="group bg-white rounded-3xl p-8 border border-neutral-200 card-hover relative flex flex-col h-full animate-fade-in-up" style="animation-delay: 0.3s;">
                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-neutral-900">Enterprise</h3>
                        <p class="text-sm text-neutral-500 mt-2 h-10">Maximum power and security for large organizations.</p>
                    </div>
                    <div class="mb-8 flex items-baseline gap-1">
                        <span class="text-4xl font-bold tracking-tight">$</span>
                        <span class="text-5xl font-bold tracking-tight price-amount" data-monthly="99" data-yearly="89">99</span>
                        <span class="text-neutral-500 ml-1">/mo</span>
                    </div>
                    
                    <a href="#" class="w-full block text-center py-3 px-6 rounded-xl border border-neutral-200 text-neutral-900 font-semibold hover:border-black hover:bg-neutral-50 transition-all duration-200">
                        Contact Sales
                    </a>

                    <div class="mt-8 space-y-4 flex-grow">
                        <p class="text-xs font-bold uppercase text-neutral-400 tracking-wider">Everything in Pro plus</p>
                        <ul class="space-y-3 text-sm text-neutral-600">
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-neutral-900"></i>
                                <span>Dedicated Infrastructure</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-neutral-900"></i>
                                <span>SSO & SAML Login</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-neutral-900"></i>
                                <span>99.99% Uptime SLA</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i data-lucide="check" class="w-4 h-4 text-neutral-900"></i>
                                <span>Dedicated Success Manager</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- FAQ Teaser / Trust -->
            <div class="mt-24 text-center border-t border-neutral-200 pt-16">
                <p class="text-neutral-500 mb-6">Trusted by innovative teams worldwide</p>
                <div class="flex flex-wrap justify-center gap-8 md:gap-16 opacity-50 grayscale">
                   <!-- Simple Geometric Logos (CSS only representation) -->
                   <div class="h-6 w-24 bg-neutral-800 rounded-sm mask-logo"></div>
                   <div class="h-6 w-24 bg-neutral-800 rounded-sm mask-logo"></div>
                   <div class="h-6 w-24 bg-neutral-800 rounded-sm mask-logo"></div>
                   <div class="h-6 w-24 bg-neutral-800 rounded-sm mask-logo"></div>
                </div>
                <div class="mt-12">
                     <a href="#" class="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 transition-colors">
                        Have questions? Check our FAQ
                    </a>
                </div>
            </div>
            
        </div>
    </main>

    <script>
        // Initialize Lucide Icons
        lucide.createIcons();

        // Interaction Logic
        const toggleBtn = document.getElementById('billing-toggle');
        const toggleCircle = document.getElementById('toggle-circle');
        const priceElements = document.querySelectorAll('.price-amount');
        const monthlyLabel = document.getElementById('monthly-label');
        const yearlyLabel = document.getElementById('yearly-label');
        
        let isYearly = false;

        toggleBtn.addEventListener('click', () => {
            isYearly = !isYearly;
            
            // Toggle Button Visual State
            toggleBtn.setAttribute('aria-pressed', isYearly);
            if (isYearly) {
                toggleBtn.classList.remove('bg-neutral-200');
                toggleBtn.classList.add('bg-black');
                toggleCircle.classList.remove('translate-x-0');
                toggleCircle.classList.add('translate-x-6');
                
                yearlyLabel.classList.add('text-black', 'font-bold');
                yearlyLabel.classList.remove('text-neutral-500');
                monthlyLabel.classList.remove('text-black', 'font-bold');
                monthlyLabel.classList.add('text-neutral-500');
            } else {
                toggleBtn.classList.add('bg-neutral-200');
                toggleBtn.classList.remove('bg-black');
                toggleCircle.classList.add('translate-x-0');
                toggleCircle.classList.remove('translate-x-6');

                monthlyLabel.classList.add('text-black', 'font-bold');
                monthlyLabel.classList.remove('text-neutral-500');
                yearlyLabel.classList.remove('text-black', 'font-bold');
                yearlyLabel.classList.add('text-neutral-500');
            }

            // Animate Prices
            priceElements.forEach(el => {
                // Add fade out effect
                el.style.opacity = '0';
                el.style.transform = 'translateY(10px)';
                
                setTimeout(() => {
                    const price = isYearly ? el.dataset.yearly : el.dataset.monthly;
                    el.textContent = price;
                    
                    // Fade in effect
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                }, 200);
            });
        });
    </script>
</body>
</html>