<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NetGuard | Advanced Online Gambling Blocking System</title>
    
    <!-- Fonts -->
    <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    
    <!-- Phosphor Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>

    <!-- Tailwind Config -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            900: '#0c4a6e',
                        },
                        dark: {
                            bg: '#0B0F19',
                            card: '#151B2B',
                            border: '#1E293B'
                        }
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body {
            background-color: #0B0F19;
            color: #F8FAFC;
            overflow-x: hidden;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0B0F19;
        }
        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }

        /* Glassmorphism Utilities */
        .glass {
            background: rgba(21, 27, 43, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .glass-card {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            border-color: rgba(14, 165, 233, 0.3);
            box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.15);
        }

        /* Gradient Text */
        .text-gradient {
            background: linear-gradient(to right, #38bdf8, #818cf8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 3D Canvas Container */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
            opacity: 0.6;
            pointer-events: none;
        }

        /* Utilities */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="antialiased selection:bg-brand-500 selection:text-white">

    <!-- 3D Background -->
    <div id="canvas-container"></div>

    <!-- Navigation -->
    <nav class="fixed w-full z-50 transition-all duration-300 top-0" id="navbar">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-brand-500/20">
                        <i class="ph ph-shield-check text-white text-2xl"></i>
                    </div>
                    <span class="font-bold text-xl tracking-tight text-white">NetGuard</span>
                </div>

                <!-- Desktop Menu -->
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-8">
                        <a href="#features" class="text-slate-300 hover:text-white transition-colors text-sm font-medium">Features</a>
                        <a href="#how-it-works" class="text-slate-300 hover:text-white transition-colors text-sm font-medium">How it Works</a>
                        <a href="#pricing" class="text-slate-300 hover:text-white transition-colors text-sm font-medium">Pricing</a>
                        <a href="#faq" class="text-slate-300 hover:text-white transition-colors text-sm font-medium">FAQ</a>
                    </div>
                </div>

                <!-- CTA Button -->
                <div class="hidden md:block">
                    <a href="#" class="bg-white text-dark-bg px-6 py-2.5 rounded-full text-sm font-bold hover:bg-brand-50 transition-all shadow-lg shadow-white/10 hover:shadow-brand-500/20 transform hover:-translate-y-0.5">
                        Get Started
                    </a>
                </div>

                <!-- Mobile menu button -->
                <div class="-mr-2 flex md:hidden">
                    <button type="button" onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-slate-400 hover:text-white hover:bg-white/10 focus:outline-none">
                        <i class="ph ph-list text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div class="md:hidden hidden glass border-t border-white/5 absolute w-full" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#features" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Features</a>
                <a href="#how-it-works" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">How it Works</a>
                <a href="#pricing" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Pricing</a>
                <a href="#" class="text-brand-400 font-bold block px-3 py-2 rounded-md text-base">Get Started Now</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        <!-- Glow Effect -->
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-500/20 rounded-full blur-[120px] -z-10 pointer-events-none"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass border border-brand-500/30 mb-8 animate-float">
                <span class="relative flex h-3 w-3">
                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                  <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                </span>
                <span class="text-sm font-medium text-brand-100">System Active: Blocking 50k+ Threats</span>
            </div>

            <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
                Secure Your Network from <br />
                <span class="text-gradient">Online Gambling</span>
            </h1>
            
            <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-400 mb-10">
                The enterprise-grade gate system designed to filter and block unauthorized judi online sites. Protect your family, employees, and compliance standards instantly.
            </p>
            
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <button class="w-full sm:w-auto px-8 py-4 bg-brand-600 hover:bg-brand-500 text-white rounded-full font-bold text-lg transition-all shadow-lg shadow-brand-600/30 hover:shadow-brand-600/50 flex items-center justify-center gap-2">
                    Start Free Trial <i class="ph-bold ph-arrow-right"></i>
                </button>
                <button class="w-full sm:w-auto px-8 py-4 glass text-white hover:bg-white/10 rounded-full font-bold text-lg transition-all flex items-center justify-center gap-2">
                    <i class="ph-fill ph-play-circle text-xl"></i> Watch Demo
                </button>
            </div>

            <!-- Dashboard Preview Mockup -->
            <div class="mt-20 relative mx-auto max-w-5xl reveal">
                <div class="absolute -inset-1 bg-gradient-to-r from-brand-500 to-indigo-600 rounded-2xl blur opacity-30"></div>
                <div class="relative glass rounded-xl border border-white/10 p-2 overflow-hidden">
                    <div class="bg-dark-bg rounded-lg overflow-hidden aspect-[16/9] flex flex-col">
                        <!-- Fake Browser Header -->
                        <div class="h-10 border-b border-white/5 flex items-center px-4 gap-2">
                            <div class="w-3 h-3 rounded-full bg-red-500/50"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500/50"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500/50"></div>
                            <div class="ml-4 h-6 w-1/3 bg-white/5 rounded-md text-xs flex items-center px-2 text-slate-500">dashboard.netguard.io</div>
                        </div>
                        <!-- Fake Dashboard Content -->
                        <div class="flex-1 p-6 grid grid-cols-12 gap-6">
                            <!-- Sidebar -->
                            <div class="col-span-2 hidden md:flex flex-col gap-4">
                                <div class="h-8 w-24 bg-white/10 rounded"></div>
                                <div class="h-4 w-full bg-white/5 rounded mt-4"></div>
                                <div class="h-4 w-3/4 bg-white/5 rounded"></div>
                                <div class="h-4 w-5/6 bg-white/5 rounded"></div>
                            </div>
                            <!-- Main Content -->
                            <div class="col-span-12 md:col-span-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                                <!-- Stats Card 1 -->
                                <div class="bg-dark-card p-4 rounded-lg border border-white/5">
                                    <div class="h-4 w-20 bg-brand-500/20 rounded mb-2"></div>
                                    <div class="h-8 w-16 bg-white/10 rounded"></div>
                                    <div class="mt-4 h-12 w-full bg-white/5 rounded"></div>
                                </div>
                                <!-- Stats Card 2 -->
                                <div class="bg-dark-card p-4 rounded-lg border border-white/5">
                                    <div class="h-4 w-20 bg-green-500/20 rounded mb-2"></div>
                                    <div class="h-8 w-16 bg-white/10 rounded"></div>
                                    <div class="mt-4 h-12 w-full bg-white/5 rounded"></div>
                                </div>
                                <!-- Graph Area -->
                                <div class="col-span-1 md:col-span-2 bg-dark-card p-4 rounded-lg border border-white/5 relative overflow-hidden">
                                    <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-brand-500/10 to-transparent"></div>
                                    <div class="flex items-end gap-2 h-32 mt-8">
                                        <div class="w-full bg-brand-500/20 h-[40%] rounded-t"></div>
                                        <div class="w-full bg-brand-500/30 h-[60%] rounded-t"></div>
                                        <div class="w-full bg-brand-500/40 h-[30%] rounded-t"></div>
                                        <div class="w-full bg-brand-500/50 h-[80%] rounded-t"></div>
                                        <div class="w-full bg-brand-500/60 h-[50%] rounded-t"></div>
                                        <div class="w-full bg-brand-500 h-[90%] rounded-t shadow-[0_0_15px_rgba(14,165,233,0.5)]"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Trusted By -->
    <section class="border-y border-white/5 bg-white/[0.02]">
        <div class="max-w-7xl mx-auto px-4 py-10 sm:px-6 lg:px-8">
            <p class="text-center text-sm font-semibold text-slate-500 uppercase tracking-wider mb-6">Trusted by security teams worldwide</p>
            <div class="flex flex-wrap justify-center gap-8 md:gap-16 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
                <!-- Simple SVG Placeholders for Logos -->
                <div class="flex items-center gap-2 text-xl font-bold text-slate-300"><i class="ph-fill ph-shield-check"></i> CorpSecure</div>
                <div class="flex items-center gap-2 text-xl font-bold text-slate-300"><i class="ph-fill ph-globe"></i> NetSafe</div>
                <div class="flex items-center gap-2 text-xl font-bold text-slate-300"><i class="ph-fill ph-buildings"></i> TechFlow</div>
                <div class="flex items-center gap-2 text-xl font-bold text-slate-300"><i class="ph-fill ph-lock-key"></i> LockInc</div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-24 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16 reveal">
                <h2 class="text-brand-400 font-semibold tracking-wide uppercase text-sm mb-2">Why NetGuard?</h2>
                <h3 class="text-3xl md:text-5xl font-bold text-white mb-4">Intelligent Blocking Technology</h3>
                <p class="text-slate-400 text-lg">We use advanced AI and DNS-level filtering to identify and block access to online gambling platforms before they load.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="glass-card p-8 rounded-2xl reveal">
                    <div class="w-14 h-14 rounded-lg bg-blue-500/10 flex items-center justify-center mb-6 text-blue-400">
                        <i class="ph ph-radar text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white mb-3">Real-Time Detection</h4>
                    <p class="text-slate-400 leading-relaxed">Our system scans the web 24/7 to identify new gambling domains, updating our blocklist instantly without manual intervention.</p>
                </div>

                <!-- Feature 2 -->
                <div class="glass-card p-8 rounded-2xl reveal" style="transition-delay: 100ms;">
                    <div class="w-14 h-14 rounded-lg bg-purple-500/10 flex items-center justify-center mb-6 text-purple-400">
                        <i class="ph ph-lockers text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white mb-3">DNS Level Filtering</h4>
                    <p class="text-slate-400 leading-relaxed">Block requests at the DNS level. This ensures that gambling sites cannot load images, scripts, or trackers, saving bandwidth.</p>
                </div>

                <!-- Feature 3 -->
                <div class="glass-card p-8 rounded-2xl reveal" style="transition-delay: 200ms;">
                    <div class="w-14 h-14 rounded-lg bg-emerald-500/10 flex items-center justify-center mb-6 text-emerald-400">
                        <i class="ph ph-chart-line-up text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white mb-3">Deep Analytics</h4>
                    <p class="text-slate-400 leading-relaxed">Gain insights into network traffic. View detailed reports on blocked attempts, peak usage times, and potential security risks.</p>
                </div>

                <!-- Feature 4 -->
                <div class="glass-card p-8 rounded-2xl reveal">
                    <div class="w-14 h-14 rounded-lg bg-orange-500/10 flex items-center justify-center mb-6 text-orange-400">
                        <i class="ph ph-users-three text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white mb-3">User Profiles</h4>
                    <p class="text-slate-400 leading-relaxed">Create specific profiles for different users. Apply strict filters to children while maintaining open access for administrators.</p>
                </div>

                <!-- Feature 5 -->
                <div class="glass-card p-8 rounded-2xl reveal" style="transition-delay: 100ms;">
                    <div class="w-14 h-14 rounded-lg bg-pink-500/10 flex items-center justify-center mb-6 text-pink-400">
                        <i class="ph ph-device-mobile text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white mb-3">Cross-Platform Support</h4>
                    <p class="text-slate-400 leading-relaxed">Protects all devices connected to your network. Phones, tablets, laptops, and smart TVs are automatically secured.</p>
                </div>

                <!-- Feature 6 -->
                <div class="glass-card p-8 rounded-2xl reveal" style="transition-delay: 200ms;">
                    <div class="w-14 h-14 rounded-lg bg-cyan-500/10 flex items-center justify-center mb-6 text-cyan-400">
                        <i class="ph ph-globe-hemisphere-west text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white mb-3">Global Database</h4>
                    <p class="text-slate-400 leading-relaxed">Access to a massive database of millions of known gambling URLs, including international sites and proxy servers.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-20 border-y border-white/5 bg-brand-900/10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div class="reveal">
                    <div class="text-4xl md:text-5xl font-bold text-white mb-2">5M+</div>
                    <div class="text-brand-400 font-medium">Sites Blocked</div>
                </div>
                <div class="reveal" style="transition-delay: 100ms;">
                    <div class="text-4xl md:text-5xl font-bold text-white mb-2">99.9%</div>
                    <div class="text-brand-400 font-medium">Uptime</div>
                </div>
                <div class="reveal" style="transition-delay: 200ms;">
                    <div class="text-4xl md:text-5xl font-bold text-white mb-2">10k+</div>
                    <div class="text-brand-400 font-medium">Networks Protected</div>
                </div>
                <div class="reveal" style="transition-delay: 300ms;">
                    <div class="text-4xl md:text-5xl font-bold text-white mb-2">&lt;50ms</div>
                    <div class="text-brand-400 font-medium">Latency</div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section id="how-it-works" class="py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h3 class="text-3xl md:text-5xl font-bold text-white mb-4">Seamless Integration</h3>
                <p class="text-slate-400 text-lg">Get your network protected in three simple steps.</p>
            </div>

            <div class="relative">
                <!-- Connecting Line (Desktop) -->
                <div class="hidden md:block absolute top-1/2 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-brand-500 to-transparent -translate-y-1/2 z-0"></div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-12 relative z-10">
                    <!-- Step 1 -->
                    <div class="bg-dark-bg p-8 rounded-2xl border border-white/5 text-center reveal hover:border-brand-500/30 transition-colors">
                        <div class="w-16 h-16 rounded-full bg-dark-bg border-4 border-brand-500 flex items-center justify-center mx-auto mb-6 text-2xl font-bold text-white shadow-lg shadow-brand-500/20">1</div>
                        <h4 class="text-xl font-bold text-white mb-3">Create Account</h4>
                        <p class="text-slate-400">Sign up in seconds and choose the protection plan that fits your needs.</p>
                    </div>

                    <!-- Step 2 -->
                    <div class="bg-dark-bg p-8 rounded-2xl border border-white/5 text-center reveal hover:border-brand-500/30 transition-colors" style="transition-delay: 150ms;">
                        <div class="w-16 h-16 rounded-full bg-dark-bg border-4 border-brand-500 flex items-center justify-center mx-auto mb-6 text-2xl font-bold text-white shadow-lg shadow-brand-500/20">2</div>
                        <h4 class="text-xl font-bold text-white mb-3">Configure DNS</h4>
                        <p class="text-slate-400">Update your router's DNS settings with our secure gateway addresses provided in the dashboard.</p>
                    </div>

                    <!-- Step 3 -->
                    <div class="bg-dark-bg p-8 rounded-2xl border border-white/5 text-center reveal hover:border-brand-500/30 transition-colors" style="transition-delay: 300ms;">
                        <div class="w-16 h-16 rounded-full bg-dark-bg border-4 border-brand-500 flex items-center justify-center mx-auto mb-6 text-2xl font-bold text-white shadow-lg shadow-brand-500/20">3</div>
                        <h4 class="text-xl font-bold text-white mb-3">You're Protected</h4>
                        <p class="text-slate-400">Instantly block gambling sites. Monitor activity and relax knowing your network is safe.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="py-24 relative overflow-hidden">
        <!-- Decoration -->
        <div class="absolute top-1/2 right-0 w-[500px] h-[500px] bg-indigo-600/10 rounded-full blur-[100px] -z-10 pointer-events-none"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16 reveal">
                <h3 class="text-3xl md:text-5xl font-bold text-white mb-4">Simple, Transparent Pricing</h3>
                <p class="text-slate-400 text-lg">Choose the plan that fits your scale. No hidden fees.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
                <!-- Starter Plan -->
                <div class="glass-card p-8 rounded-2xl reveal">
                    <h4 class="text-lg font-medium text-slate-300">Home</h4>
                    <div class="mt-4 flex items-baseline text-white">
                        <span class="text-4xl font-bold tracking-tight">$9</span>
                        <span class="ml-1 text-xl font-semibold text-slate-500">/mo</span>
                    </div>
                    <p class="mt-4 text-slate-400 text-sm">Perfect for families and small home networks.</p>
                    <ul class="mt-6 space-y-4">
                        <li class="flex items-center text-slate-300"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Up to 10 Devices</li>
                        <li class="flex items-center text-slate-300"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Standard Filtering</li>
                        <li class="flex items-center text-slate-300"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Weekly Reports</li>
                    </ul>
                    <button class="mt-8 w-full block bg-white/5 hover:bg-white/10 text-white font-bold py-3 px-4 rounded-xl transition-all border border-white/10">Get Started</button>
                </div>

                <!-- Pro Plan (Highlighted) -->
                <div class="glass-card p-8 rounded-2xl relative border-brand-500/50 transform scale-105 z-10 reveal" style="transition-delay: 100ms;">
                    <div class="absolute top-0 right-0 -mt-3 -mr-3 bg-gradient-to-r from-brand-500 to-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg">POPULAR</div>
                    <h4 class="text-lg font-medium text-brand-400">Business</h4>
                    <div class="mt-4 flex items-baseline text-white">
                        <span class="text-5xl font-bold tracking-tight">$49</span>
                        <span class="ml-1 text-xl font-semibold text-slate-500">/mo</span>
                    </div>
                    <p class="mt-4 text-slate-400 text-sm">For SMEs requiring compliance and control.</p>
                    <ul class="mt-6 space-y-4">
                        <li class="flex items-center text-white"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Unlimited Devices</li>
                        <li class="flex items-center text-white"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> AI Heuristics Detection</li>
                        <li class="flex items-center text-white"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Real-time Dashboard</li>
                        <li class="flex items-center text-white"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Priority Support</li>
                    </ul>
                    <button class="mt-8 w-full block bg-brand-600 hover:bg-brand-500 text-white font-bold py-3 px-4 rounded-xl transition-all shadow-lg shadow-brand-600/30">Start Free Trial</button>
                </div>

                <!-- Enterprise Plan -->
                <div class="glass-card p-8 rounded-2xl reveal" style="transition-delay: 200ms;">
                    <h4 class="text-lg font-medium text-slate-300">Enterprise</h4>
                    <div class="mt-4 flex items-baseline text-white">
                        <span class="text-4xl font-bold tracking-tight">Custom</span>
                    </div>
                    <p class="mt-4 text-slate-400 text-sm">For ISPs and large organizations.</p>
                    <ul class="mt-6 space-y-4">
                        <li class="flex items-center text-slate-300"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> API Access</li>
                        <li class="flex items-center text-slate-300"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Custom Whitelists</li>
                        <li class="flex items-center text-slate-300"><i class="ph-fill ph-check-circle text-brand-500 mr-3"></i> Dedicated Account Manager</li>
                    </ul>
                    <button class="mt-8 w-full block bg-white/5 hover:bg-white/10 text-white font-bold py-3 px-4 rounded-xl transition-all border border-white/10">Contact Sales</button>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section id="faq" class="py-24 bg-black/20">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <h3 class="text-3xl font-bold text-white text-center mb-12 reveal">Frequently Asked Questions</h3>
            
            <div class="space-y-4">
                <div class="glass rounded-xl overflow-hidden reveal">
                    <button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none" onclick="toggleFaq(this)">
                        <span class="font-medium text-white">Can I bypass the block if I need to?</span>
                        <i class="ph ph-caret-down text-slate-400 transition-transform"></i>
                    </button>
                    <div class="px-6 pb-4 hidden text-slate-400">
                        Yes, administrators with the master password can temporarily whitelist specific domains or bypass the filter for maintenance purposes.
                    </div>
                </div>

                <div class="glass rounded-xl overflow-hidden reveal">
                    <button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none" onclick="toggleFaq(this)">
                        <span class="font-medium text-white">Does this slow down my internet?</span>
                        <i class="ph ph-caret-down text-slate-400 transition-transform"></i>
                    </button>
                    <div class="px-6 pb-4 hidden text-slate-400">
                        No. Our DNS servers are highly optimized and distributed globally. Most users experience a latency of less than 50ms, which is imperceptible for browsing.
                    </div>
                </div>

                <div class="glass rounded-xl overflow-hidden reveal">
                    <button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none" onclick="toggleFaq(this)">
                        <span class="font-medium text-white">Does it block VPNs and Proxies?</span>
                        <i class="ph ph-caret-down text-slate-400 transition-transform"></i>
                    </button>
                    <div class="px-6 pb-4 hidden text-slate-400">
                        Our Business and Enterprise plans include advanced features that detect and block known VPN and proxy services often used to circumvent filters.
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="border-t border-white/10 bg-dark-bg pt-16 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
                <div class="col-span-2 md:col-span-1">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-8 h-8 rounded-lg bg-brand-600 flex items-center justify-center">
                            <i class="ph ph-shield-check text-white text-lg"></i>
                        </div>
                        <span class="font-bold text-lg text-white">NetGuard</span>
                    </div>
                    <p class="text-slate-500 text-sm">Making the internet safer, one block at a time.</p>
                </div>
                
                <div>
                    <h4 class="text-white font-bold mb-4">Product</h4>
                    <ul class="space-y-2 text-sm text-slate-400">
                        <li><a href="#" class="hover:text-brand-400">Features</a></li>
                        <li><a href="#" class="hover:text-brand-400">Pricing</a></li>
                        <li><a href="#" class="hover:text-brand-400">API</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-white font-bold mb-4">Company</h4>
                    <ul class="space-y-2 text-sm text-slate-400">
                        <li><a href="#" class="hover:text-brand-400">About</a></li>
                        <li><a href="#" class="hover:text-brand-400">Blog</a></li>
                        <li><a href="#" class="hover:text-brand-400">Careers</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-white font-bold mb-4">Legal</h4>
                    <ul class="space-y-2 text-sm text-slate-400">
                        <li><a href="#" class="hover:text-brand-400">Privacy</a></li>
                        <li><a href="#" class="hover:text-brand-400">Terms</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-slate-600 text-sm">© 2024 NetGuard Inc. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-slate-500 hover:text-white transition-colors"><i class="ph-fill ph-twitter-logo text-xl"></i></a>
                    <a href="#" class="text-slate-500 hover:text-white transition-colors"><i class="ph-fill ph-github-logo text-xl"></i></a>
                    <a href="#" class="text-slate-500 hover:text-white transition-colors"><i class="ph-fill ph-linkedin-logo text-xl"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
        // --- 1. Three.js Background Animation (Network/Constellation Effect) ---
        const initThreeJS = () => {
            const container = document.getElementById('canvas-container');
            const scene = new THREE.Scene();
            
            // Camera setup
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 30;

            // Renderer setup
            const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            container.appendChild(renderer.domElement);

            // Particles
            const particlesGeometry = new THREE.BufferGeometry();
            const particlesCount = 700;
            const posArray = new Float32Array(particlesCount * 3);

            for(let i = 0; i < particlesCount * 3; i++) {
                // Spread particles across a wide area
                posArray[i] = (Math.random() - 0.5) * 80;
            }

            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));

            // Material
            const material = new THREE.PointsMaterial({
                size: 0.15,
                color: 0x0ea5e9, // Brand color
                transparent: true,
                opacity: 0.8,
            });

            // Mesh
            const particlesMesh = new THREE.Points(particlesGeometry, material);
            scene.add(particlesMesh);

            // Lines connecting particles (Network effect)
            // Note: For performance, we won't calculate lines between all points every frame in JS.
            // Instead, we'll create a secondary static wireframe object that rotates.
            
            const geometryWire = new THREE.IcosahedronGeometry(15, 1);
            const materialWire = new THREE.MeshBasicMaterial({ 
                color: 0x6366f1, 
                wireframe: true, 
                transparent: true, 
                opacity: 0.05 
            });
            const wireSphere = new THREE.Mesh(geometryWire, materialWire);
            scene.add(wireSphere);

            // Mouse interaction
            let mouseX = 0;
            let mouseY = 0;

            document.addEventListener('mousemove', (event) => {
                mouseX = event.clientX / window.innerWidth - 0.5;
                mouseY = event.clientY / window.innerHeight - 0.5;
            });

            // Animation Loop
            const clock = new THREE.Clock();

            const animate = () => {
                const elapsedTime = clock.getElapsedTime();

                // Rotate entire particle system slowly
                particlesMesh.rotation.y = elapsedTime * 0.05;
                particlesMesh.rotation.x = mouseY * 0.2;
                particlesMesh.rotation.y += mouseX * 0.2;

                // Wave effect on particles
                const positions = particlesGeometry.attributes.position.array;
                for(let i = 0; i < particlesCount; i++) {
                    const i3 = i * 3;
                    const x = particlesGeometry.attributes.position.array[i3];
                    // Gentle vertical wave
                    positions[i3 + 1] += Math.sin(elapsedTime + x) * 0.002; 
                }
                particlesGeometry.attributes.position.needsUpdate = true;

                // Rotate wireframe
                wireSphere.rotation.x += 0.001;
                wireSphere.rotation.y += 0.001;

                renderer.render(scene, camera);
                window.requestAnimationFrame(animate);
            };

            animate();

            // Resize handler
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        };

        // --- 2. UI Interactions ---

        // Mobile Menu Toggle
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        }

        // FAQ Accordion
        function toggleFaq(button) {
            const content = button.nextElementSibling;
            const icon = button.querySelector('i');
            
            content.classList.toggle('hidden');
            
            if (content.classList.contains('hidden')) {
                icon.style.transform = 'rotate(0deg)';
            } else {
                icon.style.transform = 'rotate(180deg)';
            }
        }

        // Scroll Reveal Animation (Intersection Observer)
        const initScrollReveal = () => {
            const reveals = document.querySelectorAll('.reveal');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: "0px 0px -50px 0px"
            });

            reveals.forEach(reveal => observer.observe(reveal));
        };

        // Navbar Scroll Effect
        window.addEventListener('scroll', () => {
            const nav = document.getElementById('navbar');
            if (window.scrollY > 50) {
                nav.classList.add('glass', 'shadow-lg');
            } else {
                nav.classList.remove('glass', 'shadow-lg');
            }
        });

        // Initialize Everything
        document.addEventListener('DOMContentLoaded', () => {
            initThreeJS();
            initScrollReveal();
        });

    </script>
</body>
</html>