<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GenX Institute — Bridge Education to Industry | Tech &amp; AI Courses</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=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                        outfit: ['Outfit', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            bg: '#050d1a',
                            surface: '#0a1628',
                            card: '#0d1f3c',
                            border: '#1a3a6b',
                            indigo: '#6366f1',
                            purple: '#8b5cf6',
                            cyan: '#22d3ee',
                            text: '#e2e8f0',
                            desc: '#94a3b8',
                            muted: '#475569',
                        }
                    },
                    boxShadow: {
                        'glow': '0 0 25px rgba(99, 102, 241, 0.25)',
                        'glow-hover': '0 0 40px rgba(99, 102, 241, 0.5)',
                        'glow-cyan': '0 0 25px rgba(34, 211, 238, 0.2)',
                        'card': '0 4px 30px rgba(0,0,0,0.4)',
                    }
                }
            }
        }
    </script>
    <style>
        * { box-sizing: border-box; }

        html, body {
            margin: 0;
            padding: 0;
            background-color: #050d1a;
            color: #e2e8f0;
            overflow-x: hidden;
        }

        /* Full-page particle canvas fixed behind everything */
        #particle-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* All page content above canvas */
        #page-wrapper {
            position: relative;
            z-index: 1;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #050d1a; }
        ::-webkit-scrollbar-thumb { background: #1a3a6b; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #6366f1; }

        /* Glassmorphism card */
        .glass-card {
            background: rgba(13, 31, 60, 0.7);
            border: 1px solid rgba(26, 58, 107, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: all 0.4s ease;
        }
        .glass-card:hover {
            border-color: rgba(99, 102, 241, 0.5);
            background: rgba(13, 31, 60, 0.85);
            transform: translateY(-3px);
            box-shadow: 0 8px 40px rgba(99, 102, 241, 0.15);
        }

        /* Gradient text */
        .gradient-text {
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #22d3ee);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Glowing border on featured card */
        .featured-card {
            background: rgba(13, 31, 60, 0.8);
            border: 1px solid rgba(99, 102, 241, 0.5);
            backdrop-filter: blur(12px);
            box-shadow: 0 0 30px rgba(99, 102, 241, 0.15), inset 0 0 30px rgba(99, 102, 241, 0.03);
        }

        /* Input dark styling */
        .dark-input {
            background: rgba(5, 13, 26, 0.8);
            border: 1px solid rgba(26, 58, 107, 0.8);
            color: #e2e8f0;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .dark-input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }
        .dark-input::placeholder { color: #475569; }
        .dark-input option { background: #0a1628; color: #e2e8f0; }

        /* Ping animation */
        @keyframes ping {
            75%, 100% { transform: scale(2); opacity: 0; }
        }
        .animate-ping { animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
        @keyframes bounce {
            0%, 100% { transform: translateY(-10%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
            50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
        }
        .animate-bounce { animation: bounce 1s infinite; }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .animate-spin { animation: spin 1s linear infinite; }
        @keyframes pulse {
            50% { opacity: 0.5; }
        }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

        /* Soft ambient blobs */
        .blob {
            position: fixed;
            border-radius: 50%;
            filter: blur(120px);
            pointer-events: none;
            z-index: 0;
            opacity: 0.1;
        }

        /* Section dividers */
        .section-divider {
            border-color: rgba(26, 58, 107, 0.4);
        }

        /* Nav link hover underline */
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, #6366f1, #22d3ee);
            transition: width 0.3s ease;
        }
        .nav-link:hover::after { width: 100%; }

        /* Animated gradient button */
        .btn-primary {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.5s ease;
        }
        .btn-primary:hover::before { left: 100%; }
        .btn-primary:hover { box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); transform: scale(1.02); }

        /* Mockup terminal */
        .terminal {
            background: rgba(3, 7, 18, 0.95);
            border: 1px solid rgba(26, 58, 107, 0.6);
        }

        /* FAQ styling */
        .faq-item {
            background: rgba(13, 31, 60, 0.6);
            border: 1px solid rgba(26, 58, 107, 0.5);
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
        }
        .faq-item:hover {
            border-color: rgba(99, 102, 241, 0.4);
        }

        /* Footer */
        .footer-bg {
            background: rgba(3, 7, 18, 0.9);
            border-top: 1px solid rgba(26, 58, 107, 0.4);
        }

        /* Badge variants */
        .badge-indigo {
            background: rgba(99, 102, 241, 0.15);
            border: 1px solid rgba(99, 102, 241, 0.3);
            color: #818cf8;
        }
        .badge-purple {
            background: rgba(139, 92, 246, 0.15);
            border: 1px solid rgba(139, 92, 246, 0.3);
            color: #a78bfa;
        }
        .badge-cyan {
            background: rgba(34, 211, 238, 0.1);
            border: 1px solid rgba(34, 211, 238, 0.3);
            color: #22d3ee;
        }

        /* Icon bubble */
        .icon-bubble {
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.2);
        }

        /* Modal overlay */
        #checkoutModal {
            background: rgba(2, 6, 23, 0.85);
            backdrop-filter: blur(8px);
        }

        /* ---- MOBILE SIDEBAR ---- */
        #mobile-sidebar {
            position: fixed;
            top: 0;
            right: 0;
            width: 280px;
            height: 100%;
            background: rgba(5, 10, 25, 0.98);
            border-left: 1px solid rgba(26, 58, 107, 0.6);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            z-index: 60;
            transform: translateX(100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            padding: 0;
            box-shadow: -8px 0 40px rgba(0,0,0,0.6);
        }
        #mobile-sidebar.open {
            transform: translateX(0);
        }
        #sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(2, 6, 23, 0.7);
            backdrop-filter: blur(4px);
            z-index: 59;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
        }
        #sidebar-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }
        /* Hamburger icon lines */
        .ham-line {
            display: block;
            width: 22px;
            height: 2px;
            background: #e2e8f0;
            border-radius: 2px;
            transition: all 0.3s ease;
            transform-origin: center;
        }
        #ham-btn.active .ham-line:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        #ham-btn.active .ham-line:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        #ham-btn.active .ham-line:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
        .sidebar-nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 24px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #94a3b8;
            border-bottom: 1px solid rgba(26, 58, 107, 0.3);
            transition: all 0.25s ease;
            text-decoration: none;
        }
        .sidebar-nav-link:hover {
            color: #ffffff;
            background: rgba(99, 102, 241, 0.08);
            padding-left: 30px;
        }
        .sidebar-nav-link .link-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #6366f1;
            flex-shrink: 0;
            transition: background 0.25s;
        }
        .sidebar-nav-link:hover .link-dot { background: #22d3ee; }
    </style>
</head>

<body class="font-sans antialiased">

    <!-- Full-page Live Particle Canvas (Fixed Background) -->
    <canvas id="particle-canvas"></canvas>

    <!-- Ambient Light Blobs (fixed, behind everything) -->
    <div class="blob" style="width:600px;height:600px;background:#4f46e5;top:-200px;left:-200px;"></div>
    <div class="blob" style="width:500px;height:500px;background:#7c3aed;top:50%;right:-200px;"></div>
    <div class="blob" style="width:400px;height:400px;background:#0e7490;bottom:10%;left:30%;"></div>

    <!-- Page Content Wrapper -->
    <div id="page-wrapper">

        <!-- MOBILE SIDEBAR OVERLAY -->
        <div id="sidebar-overlay" onclick="closeSidebar()"></div>

        <!-- MOBILE SIDEBAR DRAWER -->
        <aside id="mobile-sidebar" aria-label="Mobile navigation">
            <!-- Sidebar Header -->
            <div class="flex items-center justify-between px-6 py-5" style="border-bottom: 1px solid rgba(26,58,107,0.4);">
                <a href="#" class="flex items-center gap-2" onclick="closeSidebar()">
                    <span class="font-outfit text-lg font-extrabold tracking-wider text-white">
                        GEN<span class="gradient-text">X</span>
                    </span>
                    <span class="badge-cyan text-[8px] tracking-[0.2em] font-bold px-1.5 py-0.5 rounded uppercase">Institute</span>
                </a>
                <button onclick="closeSidebar()" class="w-8 h-8 flex items-center justify-center rounded-lg text-brand-muted hover:text-white transition-colors" style="background: rgba(26,58,107,0.3);" aria-label="Close menu">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <path d="M1 1l12 12M13 1L1 13"/>
                    </svg>
                </button>
            </div>

            <!-- Nav Links -->
            <nav class="flex-1 pt-2 pb-4">
                <a href="#courses" class="sidebar-nav-link" onclick="closeSidebar()">
                    <span class="link-dot"></span> Programs
                </a>
                <a href="#advantages" class="sidebar-nav-link" onclick="closeSidebar()">
                    <span class="link-dot"></span> Why GenX
                </a>
                <a href="#testimonials" class="sidebar-nav-link" onclick="closeSidebar()">
                    <span class="link-dot"></span> Reviews
                </a>
                <a href="#faqs" class="sidebar-nav-link" onclick="closeSidebar()">
                    <span class="link-dot"></span> FAQs
                </a>
            </nav>

            <!-- CTA Buttons in Sidebar -->
            <div class="px-5 pb-8 space-y-3 mt-auto" style="border-top: 1px solid rgba(26,58,107,0.4); padding-top: 24px;">
                <p class="text-[9px] uppercase tracking-[0.2em] text-brand-muted font-bold mb-4">Quick Actions</p>
                <a href="<?= site_url('student/login') ?>" onclick="closeSidebar()"
                    class="flex items-center justify-center gap-2 w-full py-3 rounded-xl text-xs font-bold uppercase tracking-wider text-brand-indigo transition-all duration-300 hover:text-white"
                    style="background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.35);">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
                    </svg>
                    Student Login
                </a>
                <a href="#courses" onclick="closeSidebar()"
                    class="btn-primary flex items-center justify-center gap-2 w-full py-3 rounded-xl text-xs font-bold uppercase tracking-wider text-white transition-all duration-300">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                    Explore Courses
                </a>
            </div>
        </aside>

        <!-- HEADER -->
        <header class="sticky top-0 z-40 w-full"
            style="background: rgba(5,13,26,0.85); border-bottom: 1px solid rgba(26,58,107,0.4); backdrop-filter: blur(20px);">
            <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
                <!-- Logo -->
                <a href="#" class="flex items-center gap-2 group">
                    <span class="font-outfit text-xl sm:text-2xl font-extrabold tracking-wider text-white">
                        GEN<span class="gradient-text">X</span>
                    </span>
                    <span class="badge-cyan text-[9px] sm:text-[10px] tracking-[0.2em] font-bold px-2 py-0.5 rounded uppercase">
                        Institute
                    </span>
                </a>

                <!-- Desktop Navigation Links -->
                <nav class="hidden md:flex items-center gap-8">
                    <a href="#courses" class="nav-link text-xs uppercase tracking-[0.2em] font-bold text-brand-desc hover:text-white transition-colors duration-300">Programs</a>
                    <a href="#advantages" class="nav-link text-xs uppercase tracking-[0.2em] font-bold text-brand-desc hover:text-white transition-colors duration-300">Why GenX</a>
                    <a href="#testimonials" class="nav-link text-xs uppercase tracking-[0.2em] font-bold text-brand-desc hover:text-white transition-colors duration-300">Reviews</a>
                    <a href="#faqs" class="nav-link text-xs uppercase tracking-[0.2em] font-bold text-brand-desc hover:text-white transition-colors duration-300">FAQs</a>
                </nav>

                <!-- Desktop Actions (hidden on mobile) -->
                <div class="hidden md:flex items-center gap-4">
                    <a href="<?= site_url('student/login') ?>"
                        class="text-[10px] sm:text-xs uppercase tracking-[0.15em] font-bold text-brand-indigo hover:text-white transition-colors duration-300 badge-indigo px-4 py-2 rounded-full">
                        Student Login
                    </a>
                    <a href="#courses"
                        class="btn-primary px-5 py-2.5 rounded-full text-[10px] sm:text-xs font-semibold uppercase tracking-wider text-white inline-block">
                        Explore Courses
                    </a>
                </div>

                <!-- Mobile Hamburger Button (visible only on mobile) -->
                <button id="ham-btn" onclick="toggleSidebar()" class="md:hidden flex flex-col gap-1.5 p-2 rounded-lg transition-colors" style="background: rgba(26,58,107,0.3);" aria-label="Open menu" aria-expanded="false">
                    <span class="ham-line"></span>
                    <span class="ham-line"></span>
                    <span class="ham-line"></span>
                </button>
            </div>
        </header>

        <!-- HERO SECTION -->
        <section class="relative max-w-7xl mx-auto px-6 pt-12 pb-24 md:py-32 grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">

            <!-- Hero Text -->
            <div class="lg:col-span-7 flex flex-col items-start text-left relative z-10">
                <span class="inline-flex items-center gap-2 text-[10px] sm:text-xs font-bold uppercase tracking-[0.25em] text-brand-cyan mb-6">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-cyan opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-cyan"></span>
                    </span>
                    // Elevate Your Tech Career
                </span>

                <h1 class="font-outfit text-[clamp(2rem,6vw,4rem)] font-extrabold leading-[1.1] tracking-tight text-white mb-6">
                    Bridge Education <br>
                    <span class="gradient-text">to Industry Placements</span>
                </h1>

                <p class="text-[0.7rem] sm:text-base text-brand-desc font-medium max-w-xl mb-8 leading-relaxed">
                    Launch your engineering and marketing career. Master standard web frameworks, digital strategies, or
                    advanced AI architectures. Choose between compact self-paced modules starting from <span
                        class="text-brand-cyan font-bold">&#8377;99</span> or premium live mentoring tracks.
                </p>

                <!-- Bullet Points -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-lg mb-10">
                    <div class="flex items-center gap-2 text-brand-desc" style="font-size: 0.7rem;">
                        <svg class="w-3 h-3 text-brand-cyan shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Recorded Foundations</span>
                    </div>
                    <div class="flex items-center gap-2 text-brand-desc" style="font-size: 0.7rem;">
                        <svg class="w-3 h-3 text-brand-cyan shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Live Expert Classes</span>
                    </div>
                    <div class="flex items-center gap-2 text-brand-desc" style="font-size: 0.7rem;">
                        <svg class="w-3 h-3 text-brand-cyan shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Guaranteed Internship Referral</span>
                    </div>
                    <div class="flex items-center gap-2 text-brand-desc" style="font-size: 0.7rem;">
                        <svg class="w-3 h-3 text-brand-cyan shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Secure SQLite Enrollment Logger</span>
                    </div>
                </div>

                <!-- CTAs -->
                <div class="flex flex-row items-center gap-2 sm:gap-4 w-full">
                    <a href="#courses"
                        class="btn-primary px-5 sm:px-8 py-2.5 sm:py-4 rounded-full text-[0.65rem] sm:text-xs font-bold uppercase tracking-wider text-white text-center whitespace-nowrap">
                        View Course
                    </a>
                </div>

                <!-- Trust badge -->
                <div class="flex items-center gap-2 mt-6 text-[10px] sm:text-xs text-brand-desc">
                    <div class="flex text-amber-400">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                    <span>Curated Syllabus &#8226; 4,500+ Graduated Careers</span>
                </div>
            </div>

            <!-- Hero Mockup Display -->
            <div class="lg:col-span-5 relative w-full z-10">
                <div class="absolute inset-0 bg-gradient-to-tr from-brand-indigo/10 to-brand-purple/10 rounded-2xl blur-xl opacity-50"></div>
                <div class="terminal rounded-2xl overflow-hidden shadow-card relative">
                    <!-- Mac Top Bar -->
                    <div class="px-4 py-3 flex items-center gap-2 border-b border-brand-border/40" style="background: rgba(3,7,18,0.9);">
                        <span class="w-2.5 h-2.5 rounded-full bg-red-500"></span>
                        <span class="w-2.5 h-2.5 rounded-full bg-yellow-400"></span>
                        <span class="w-2.5 h-2.5 rounded-full bg-green-400"></span>
                        <span class="text-[10px] text-brand-muted font-mono ml-4">system_monitor.py</span>
                    </div>

                    <!-- Terminal Display -->
                    <div class="p-6 font-mono text-[10px] sm:text-xs space-y-3.5 overflow-y-auto max-h-[360px]">
                        <div class="text-brand-muted">// Fetching live enrollment registry</div>
                        <div>
                            <span class="text-brand-purple">import</span>
                            <span class="text-white"> genx_backend </span>
                            <span class="text-brand-cyan">as</span>
                            <span class="text-white"> api</span>
                        </div>
                        <div class="text-brand-desc">
                            courses = api.getCourses()<br>print(f"Loaded active course tracks.")
                        </div>
                        <div class="text-emerald-400 font-bold">
                            &gt;&gt;&gt; OK: Loaded 4 tracks [&#8377;99, &#8377;149, &#8377;45,000, &#8377;45,000]
                        </div>

                        <!-- Progress Card -->
                        <div class="rounded-lg p-4 mt-3 space-y-2.5" style="background: rgba(26,58,107,0.2); border: 1px solid rgba(26,58,107,0.5);">
                            <div class="flex justify-between text-[8px] sm:text-[9px] text-brand-muted uppercase tracking-wider">
                                <span>System Status</span>
                                <span class="text-emerald-400 font-bold">&#9679; Online</span>
                            </div>
                            <div class="space-y-1">
                                <div class="flex justify-between text-[10px] text-brand-desc">
                                    <span>Curriculum Sync</span>
                                    <span class="text-brand-cyan font-bold">Synced</span>
                                </div>
                                <div class="w-full rounded-full h-1" style="background: rgba(26,58,107,0.5);">
                                    <div class="h-full rounded-full" style="width: 100%; background: linear-gradient(90deg, #6366f1, #22d3ee);"></div>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-2 text-center pt-1.5">
                                <div class="p-1.5 rounded" style="background: rgba(5,13,26,0.8); border: 1px solid rgba(26,58,107,0.5);">
                                    <div class="text-brand-cyan font-bold text-xs">SQLite 3</div>
                                    <div class="text-[7px] text-brand-muted uppercase">Engine</div>
                                </div>
                                <div class="p-1.5 rounded" style="background: rgba(5,13,26,0.8); border: 1px solid rgba(26,58,107,0.5);">
                                    <div class="text-brand-purple font-bold text-xs">Tailwind v3</div>
                                    <div class="text-[7px] text-brand-muted uppercase">UI Layout</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- STATS BANNER -->
        <section class="py-6 md:py-12 relative overflow-hidden section-divider border-y" style="background: rgba(10,22,40,0.7);">
            <div class="max-w-7xl mx-auto px-4 grid grid-cols-3 gap-2 md:gap-8 text-center divide-x" style="border-color: rgba(26,58,107,0.4);">
                <div class="px-2 md:px-0">
                    <div class="font-outfit text-xl sm:text-3xl md:text-5xl font-extrabold gradient-text mb-0.5 md:mb-2">&#8377;99</div>
                    <div class="text-[0.55rem] sm:text-xs md:text-sm font-bold uppercase tracking-wider text-white leading-tight">One-Time Fee</div>
                    <div class="hidden md:block text-xs text-brand-desc mt-1">No hidden charges or subscriptions</div>
                </div>
                <div class="px-2 md:px-0">
                    <div class="font-outfit text-xl sm:text-3xl md:text-5xl font-extrabold text-brand-purple mb-0.5 md:mb-2">Modular</div>
                    <div class="text-[0.55rem] sm:text-xs md:text-sm font-bold uppercase tracking-wider text-white leading-tight">Video Lectures</div>
                    <div class="hidden md:block text-xs text-brand-desc mt-1">Self-paced modules, study at your convenience</div>
                </div>
                <div class="px-2 md:px-0">
                    <div class="font-outfit text-xl sm:text-3xl md:text-5xl font-extrabold text-brand-cyan mb-0.5 md:mb-2">100%</div>
                    <div class="text-[0.55rem] sm:text-xs md:text-sm font-bold uppercase tracking-wider text-white leading-tight">Internship Help</div>
                    <div class="hidden md:block text-xs text-brand-desc mt-1">Direct interview references for top students</div>
                </div>
            </div>
        </section>

        <!-- PROGRAMS / COURSE GRID -->
        <section id="courses" class="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-24">
            <div class="text-center max-w-2xl mx-auto mb-10 sm:mb-20">
                <span class="badge-cyan text-[10px] sm:text-xs uppercase tracking-[0.25em] font-bold inline-block mb-3 sm:mb-4 px-3 py-1 rounded-full">// Admissions Open</span>
                <h2 class="font-outfit text-xl sm:text-3xl md:text-4xl font-extrabold text-white">
                    Choose Your Career Track
                </h2>
                <p class="text-[0.7rem] sm:text-sm text-brand-desc mt-2 sm:mt-3">
                    Select between budget foundation modules to master the basics, or enroll in comprehensive live programs
                    for absolute mastery and internship placement.
                </p>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 items-stretch">

                <!-- Course 1: Digital Marketing Foundational (Rs.99) -->
                <div class="glass-card rounded-xl sm:rounded-2xl p-3 sm:p-6 flex flex-col justify-between">
                    <div>
                        <div class="flex justify-between items-center mb-2 sm:mb-4">
                            <span class="badge-indigo text-[7px] sm:text-[8px] tracking-widest font-bold uppercase px-1.5 sm:px-2 py-0.5 rounded">RECORDED</span>
                        </div>
                        <h3 class="font-outfit text-[0.75rem] sm:text-lg font-bold text-white mb-1 sm:mb-2 leading-tight">Digital Marketing Foundation</h3>
                        <p class="hidden sm:block text-xs text-brand-desc leading-relaxed mb-6">
                            Master the core variables of SEO, SEM, and brand marketing. Build campaigns that convert.
                        </p>
                        <ul class="space-y-1 sm:space-y-2 mb-3 sm:mb-6">
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-cyan">&#9657;</span> SEO &amp; Keywords</li>
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-cyan">&#9657;</span> Meta Ads Setup</li>
                            <li class="hidden sm:flex items-center gap-2 text-[11px] text-brand-desc"><span class="text-brand-cyan">&#9657;</span> Google Analytics Basics</li>
                        </ul>
                    </div>
                    <div>
                        <div class="border-t border-brand-border/40 pt-2 sm:pt-4 mb-2 sm:mb-4 flex items-baseline gap-1">
                            <span class="text-lg sm:text-2xl font-outfit font-extrabold text-white">&#8377;99</span>
                            <span class="text-[9px] sm:text-[10px] text-brand-muted line-through">&#8377;999</span>
                        </div>
                        <button onclick="openModal('digital_marketing_foundational')"
                            class="w-full py-1.5 sm:py-2.5 rounded-lg text-[0.65rem] sm:text-xs font-semibold transition-all duration-300 text-brand-indigo hover:text-white hover:bg-brand-indigo"
                            style="border: 1px solid rgba(99,102,241,0.4); background: rgba(99,102,241,0.08);">
                            Enroll &#8377;99
                        </button>
                    </div>
                </div>

                <!-- Course 2: Web Dev Foundational (Rs.149) -->
                <div class="glass-card rounded-xl sm:rounded-2xl p-3 sm:p-6 flex flex-col justify-between">
                    <div>
                        <div class="flex justify-between items-center mb-2 sm:mb-4">
                            <span class="badge-indigo text-[7px] sm:text-[8px] tracking-widest font-bold uppercase px-1.5 sm:px-2 py-0.5 rounded">RECORDED</span>
                        </div>
                        <h3 class="font-outfit text-[0.75rem] sm:text-lg font-bold text-white mb-1 sm:mb-2 leading-tight">Web Development Foundation</h3>
                        <p class="hidden sm:block text-xs text-brand-desc leading-relaxed mb-6">
                            Kickstart your coding logic. Build, style, and launch websites using HTML, CSS, and basic Javascript.
                        </p>
                        <ul class="space-y-1 sm:space-y-2 mb-3 sm:mb-6">
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-cyan">&#9657;</span> HTML5 Layouts</li>
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-cyan">&#9657;</span> Responsive CSS</li>
                            <li class="hidden sm:flex items-center gap-2 text-[11px] text-brand-desc"><span class="text-brand-cyan">&#9657;</span> DOM with Javascript</li>
                        </ul>
                    </div>
                    <div>
                        <div class="border-t border-brand-border/40 pt-2 sm:pt-4 mb-2 sm:mb-4 flex items-baseline gap-1">
                            <span class="text-lg sm:text-2xl font-outfit font-extrabold text-white">&#8377;149</span>
                            <span class="text-[9px] sm:text-[10px] text-brand-muted line-through">&#8377;1,499</span>
                        </div>
                        <button onclick="openModal('web_development_foundational')"
                            class="w-full py-1.5 sm:py-2.5 rounded-lg text-[0.65rem] sm:text-xs font-semibold transition-all duration-300 text-brand-indigo hover:text-white hover:bg-brand-indigo"
                            style="border: 1px solid rgba(99,102,241,0.4); background: rgba(99,102,241,0.08);">
                            Enroll &#8377;149
                        </button>
                    </div>
                </div>

                <!-- Course 3: AI Python Fullstack (Rs.45,000) FEATURED -->
                <div class="featured-card rounded-xl sm:rounded-2xl p-3 sm:p-6 flex flex-col justify-between relative">
                    <span class="absolute -top-2.5 left-3 sm:-top-3 sm:left-6 text-[6px] sm:text-[8px] font-bold uppercase tracking-widest text-white px-2 py-0.5 rounded-full" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);">POPULAR</span>
                    <div>
                        <div class="flex justify-between items-center mb-2 sm:mb-4 mt-1.5">
                            <span class="badge-purple text-[7px] sm:text-[8px] tracking-widest font-bold uppercase px-1.5 sm:px-2 py-0.5 rounded">LIVE</span>
                        </div>
                        <h3 class="font-outfit text-[0.75rem] sm:text-lg font-bold text-white mb-1 sm:mb-2 leading-tight">AI &amp; Python Full Stack</h3>
                        <p class="hidden sm:block text-xs text-brand-desc leading-relaxed mb-6">
                            Complete engineering path. Python core, Django frameworks, LLM integrations, model deployments, and job assistance.
                        </p>
                        <ul class="space-y-1 sm:space-y-2 mb-3 sm:mb-6">
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-purple">&#9657;</span> Django APIs &amp; SQL</li>
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-purple">&#9657;</span> AI / LLM Integration</li>
                            <li class="hidden sm:flex items-center gap-2 text-[11px] text-brand-desc"><span class="text-brand-purple">&#9657;</span> 100% Kochi Placement</li>
                        </ul>
                    </div>
                    <div>
                        <div class="border-t border-brand-indigo/30 pt-2 sm:pt-4 mb-2 sm:mb-4 flex items-baseline gap-1">
                            <span class="text-lg sm:text-2xl font-outfit font-extrabold text-white">&#8377;45k</span>
                            <span class="text-[9px] sm:text-[10px] text-brand-muted">EMI ok</span>
                        </div>
                        <button onclick="openModal('ai_python_fullstack')"
                            class="btn-primary w-full py-1.5 sm:py-2.5 rounded-lg text-[0.65rem] sm:text-xs font-semibold text-white">
                            Enroll Live
                        </button>
                    </div>
                </div>

                <!-- Course 4: Digital Marketing Expert (Rs.45,000) -->
                <div class="glass-card rounded-xl sm:rounded-2xl p-3 sm:p-6 flex flex-col justify-between">
                    <div>
                        <div class="flex justify-between items-center mb-2 sm:mb-4">
                            <span class="badge-purple text-[7px] sm:text-[8px] tracking-widest font-bold uppercase px-1.5 sm:px-2 py-0.5 rounded">LIVE</span>
                        </div>
                        <h3 class="font-outfit text-[0.75rem] sm:text-lg font-bold text-white mb-1 sm:mb-2 leading-tight">Digital Marketing Expert</h3>
                        <p class="hidden sm:block text-xs text-brand-desc leading-relaxed mb-6">
                            Go from base level to expert strategist. Performance marketing, conversion rate optimizations, and live industry campaigns.
                        </p>
                        <ul class="space-y-1 sm:space-y-2 mb-3 sm:mb-6">
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-purple">&#9657;</span> ROI &amp; Scaling</li>
                            <li class="flex items-center gap-1.5 text-[0.65rem] sm:text-[11px] text-brand-desc"><span class="text-brand-purple">&#9657;</span> SEO &amp; Copywriting</li>
                            <li class="hidden sm:flex items-center gap-2 text-[11px] text-brand-desc"><span class="text-brand-purple">&#9657;</span> Client Internships</li>
                        </ul>
                    </div>
                    <div>
                        <div class="border-t border-brand-border/40 pt-2 sm:pt-4 mb-2 sm:mb-4 flex items-baseline gap-1">
                            <span class="text-lg sm:text-2xl font-outfit font-extrabold text-white">&#8377;45k</span>
                            <span class="text-[9px] sm:text-[10px] text-brand-muted">EMI ok</span>
                        </div>
                        <button onclick="openModal('digital_marketing_expert')"
                            class="w-full py-1.5 sm:py-2.5 rounded-lg text-[0.65rem] sm:text-xs font-semibold transition-all duration-300 text-brand-purple hover:text-white hover:bg-brand-purple"
                            style="border: 1px solid rgba(139,92,246,0.4); background: rgba(139,92,246,0.08);">
                            Enroll Live
                        </button>
                    </div>
                </div>

            </div>
        </section>

        <!-- THE GENX ADVANTAGE -->
        <section id="advantages" class="py-24 relative overflow-hidden section-divider border-t" style="background: rgba(10,22,40,0.5);">
            <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                <!-- Left Header -->
                <div class="lg:col-span-5 relative z-10">
                    <span class="badge-purple text-[10px] sm:text-xs uppercase tracking-[0.25em] font-bold inline-block mb-4 px-3 py-1 rounded-full">// Why choose us</span>
                    <h2 class="font-outfit text-2xl sm:text-3xl md:text-4xl font-extrabold text-white leading-tight mb-6">
                        Hands-On Experience, <br>Zero Passive Watching
                    </h2>
                    <p class="text-xs sm:text-sm text-brand-desc mb-8 leading-relaxed">
                        Most institutions dump pre-recorded lectures without guidance. GenX runs a modern sandbox. We check
                        your code, review your marketing campaign structures, and link you directly to companies hiring in
                        Ernakulam and Jaipur.
                    </p>
                    <div class="flex items-center gap-4">
                        <div class="icon-bubble w-12 h-12 rounded-full flex items-center justify-center text-lg">&#9889;</div>
                        <div>
                            <div class="text-white font-bold text-sm">Industrial Workflows</div>
                            <div class="text-xs text-brand-desc">Build standard portfolios, test environments, and host scripts.</div>
                        </div>
                    </div>
                </div>

                <!-- Advantage Grid -->
                <div class="lg:col-span-7 grid grid-cols-2 gap-3 sm:gap-6 relative z-10">

                    <!-- Sandbox Labs -->
                    <div class="glass-card p-3 sm:p-6 rounded-xl sm:rounded-2xl">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center mb-3 sm:mb-4" style="background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3);">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-brand-indigo" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2v-4M9 21H5a2 2 0 0 1-2-2v-4m0 0h18"/>
                            </svg>
                        </div>
                        <h4 class="text-white font-bold text-[0.7rem] sm:text-sm mb-1 sm:mb-2">Sandbox Labs</h4>
                        <p class="text-[0.65rem] sm:text-xs text-brand-desc leading-relaxed hidden sm:block">
                            Code, compile, and execute live modules right inside our environment. No complicated local machine installations.
                        </p>
                        <p class="text-[0.6rem] text-brand-desc leading-snug sm:hidden">Live coding environment, no local setup.</p>
                    </div>

                    <!-- GenX Credentials -->
                    <div class="glass-card p-3 sm:p-6 rounded-xl sm:rounded-2xl">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center mb-3 sm:mb-4" style="background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.3);">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                            </svg>
                        </div>
                        <h4 class="text-white font-bold text-[0.7rem] sm:text-sm mb-1 sm:mb-2">GenX Credentials</h4>
                        <p class="text-[0.65rem] sm:text-xs text-brand-desc leading-relaxed hidden sm:block">
                            Verify your capability via blockchain-certified digital certificates, shareable on LinkedIn and portfolios.
                        </p>
                        <p class="text-[0.6rem] text-brand-desc leading-snug sm:hidden">Blockchain-certified certificates for LinkedIn.</p>
                    </div>

                    <!-- Kochi Internships -->
                    <div class="glass-card p-3 sm:p-6 rounded-xl sm:rounded-2xl">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center mb-3 sm:mb-4" style="background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3);">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
                            </svg>
                        </div>
                        <h4 class="text-white font-bold text-[0.7rem] sm:text-sm mb-1 sm:mb-2">Kochi Internships</h4>
                        <p class="text-[0.65rem] sm:text-xs text-brand-desc leading-relaxed hidden sm:block">
                            Gain exclusive access to placement events in Infopark &amp; SmartCity Kochi after completion of live curricula.
                        </p>
                        <p class="text-[0.6rem] text-brand-desc leading-snug sm:hidden">Placement events at Infopark, SmartCity Kochi.</p>
                    </div>

                    <!-- Engaged Alumni Network -->
                    <div class="glass-card p-3 sm:p-6 rounded-xl sm:rounded-2xl">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center mb-3 sm:mb-4" style="background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.3);">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                            </svg>
                        </div>
                        <h4 class="text-white font-bold text-[0.7rem] sm:text-sm mb-1 sm:mb-2">Alumni Network</h4>
                        <p class="text-[0.65rem] sm:text-xs text-brand-desc leading-relaxed hidden sm:block">
                            Become a permanent member of our Discord network. Get codes reviewed, join study cohorts, and locate internships.
                        </p>
                        <p class="text-[0.6rem] text-brand-desc leading-snug sm:hidden">Discord community, cohorts &amp; internship leads.</p>
                    </div>

                </div>
            </div>
        </section>

        <!-- TESTIMONIALS SECTION -->
        <section id="testimonials" class="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-24">
            <div class="text-center max-w-2xl mx-auto mb-10 sm:mb-20">
                <span class="badge-indigo text-[10px] sm:text-xs uppercase tracking-[0.25em] font-bold inline-block mb-3 sm:mb-4 px-3 py-1 rounded-full">// Testimonials</span>
                <h2 class="font-outfit text-xl sm:text-3xl md:text-4xl font-extrabold text-white">Success Stories</h2>
                <p class="text-[0.7rem] sm:text-sm text-brand-desc mt-2 sm:mt-3">
                    See how college students and professionals updated their skills to land developer roles.
                </p>
            </div>

            <!-- MOBILE SLIDER -->
            <div class="relative md:hidden">
                <!-- Prev / Next arrows -->
                <button id="rev-prev" onclick="reviewSlide(-1)" aria-label="Previous review"
                    class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1 z-10 w-7 h-7 rounded-full flex items-center justify-center transition-all duration-300"
                    style="background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.4);">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                <button id="rev-next" onclick="reviewSlide(1)" aria-label="Next review"
                    class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1 z-10 w-7 h-7 rounded-full flex items-center justify-center transition-all duration-300"
                    style="background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.4);">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>

                <!-- Slider track -->
                <div id="review-track" class="overflow-hidden mx-6">
                    <div id="review-inner" class="flex transition-transform duration-400 ease-in-out" style="transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);">

                        <!-- Slide 1 -->
                        <div class="review-slide flex-shrink-0 w-full px-1">
                            <div class="glass-card p-5 rounded-2xl flex flex-col justify-between min-h-[170px]">
                                <div class="flex gap-1 mb-3">
                                    <svg class="w-3 h-3 text-amber-400" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3 text-amber-400" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3 text-amber-400" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3 text-amber-400" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3 text-amber-400" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                </div>
                                <p class="text-brand-desc text-[0.7rem] leading-relaxed mb-4 flex-1">
                                    "I bought the &#8377;149 Web Dev Foundation course. In 2 weeks I had built my portfolio and got selected for an internship. Logic-focused!"
                                </p>
                                <div class="flex items-center gap-2.5 pt-3 border-t border-brand-border/40">
                                    <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-[9px] text-brand-indigo" style="background: rgba(99,102,241,0.15);">AN</div>
                                    <div>
                                        <div class="text-white font-bold text-[10px]">Arya Nair</div>
                                        <div class="text-[9px] text-brand-desc">Intern, Kochi</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Slide 2 -->
                        <div class="review-slide flex-shrink-0 w-full px-1">
                            <div class="glass-card p-5 rounded-2xl flex flex-col justify-between min-h-[170px]" style="border-color: rgba(139,92,246,0.4);">
                                <div class="flex gap-1 mb-3">
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                </div>
                                <p class="text-brand-desc text-[0.7rem] leading-relaxed mb-4 flex-1">
                                    "The AI Python Live program completely changed my outlook. Live debug rooms meant I built a working LLM pipeline within the class. Worth it."
                                </p>
                                <div class="flex items-center gap-2.5 pt-3 border-t border-brand-border/40">
                                    <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-[9px] text-brand-purple" style="background: rgba(139,92,246,0.15);">VM</div>
                                    <div>
                                        <div class="text-white font-bold text-[10px]">Varun Menon</div>
                                        <div class="text-[9px] text-brand-desc">AI Engineer, Infopark</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Slide 3 -->
                        <div class="review-slide flex-shrink-0 w-full px-1">
                            <div class="glass-card p-5 rounded-2xl flex flex-col justify-between min-h-[170px]">
                                <div class="flex gap-1 mb-3">
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-3 h-3" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                </div>
                                <p class="text-brand-desc text-[0.7rem] leading-relaxed mb-4 flex-1">
                                    "Completed the Digital Marketing course for &#8377;99. It cleared all my doubts about campaign setups and SEO tracking. Truly standard content."
                                </p>
                                <div class="flex items-center gap-2.5 pt-3 border-t border-brand-border/40">
                                    <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-[9px] text-brand-cyan" style="background: rgba(34,211,238,0.1);">RK</div>
                                    <div>
                                        <div class="text-white font-bold text-[10px]">Rohan Kapoor</div>
                                        <div class="text-[9px] text-brand-desc">Student, Jaipur</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Dot indicators -->
                <div class="flex justify-center gap-2 mt-5">
                    <button class="review-dot w-5 h-1.5 rounded-full transition-all duration-300 active-dot" onclick="goToReview(0)" style="background: #6366f1;"></button>
                    <button class="review-dot w-1.5 h-1.5 rounded-full transition-all duration-300" onclick="goToReview(1)" style="background: rgba(99,102,241,0.3);"></button>
                    <button class="review-dot w-1.5 h-1.5 rounded-full transition-all duration-300" onclick="goToReview(2)" style="background: rgba(99,102,241,0.3);"></button>
                </div>
            </div>

            <!-- DESKTOP GRID (hidden on mobile) -->
            <div class="hidden md:grid grid-cols-3 gap-8">
                <div class="glass-card p-6 rounded-2xl flex flex-col justify-between">
                    <p class="text-brand-desc text-xs leading-relaxed mb-6">
                        "I bought the &#8377;149 Web Development Foundation course. In 2 weeks I had built my portfolio and got
                        selected for an internship. The simple recorded modules are fully logic-focused!"
                    </p>
                    <div class="flex items-center gap-3 pt-4 border-t border-brand-border/40">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-[10px] text-brand-indigo" style="background: rgba(99,102,241,0.15);">AN</div>
                        <div>
                            <div class="text-white font-bold text-[11px]">Arya Nair</div>
                            <div class="text-[9px] text-brand-desc">Intern, Kochi</div>
                        </div>
                    </div>
                </div>
                <div class="glass-card p-6 rounded-2xl flex flex-col justify-between" style="border-color: rgba(139,92,246,0.4);">
                    <p class="text-brand-desc text-xs leading-relaxed mb-6">
                        "The AI Python Live program completely changed my outlook. The live debug rooms and deployment
                        guidance meant I built a working LLM pipeline within the class. Absolutely worth it."
                    </p>
                    <div class="flex items-center gap-3 pt-4 border-t border-brand-border/40">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-[10px] text-brand-purple" style="background: rgba(139,92,246,0.15);">VM</div>
                        <div>
                            <div class="text-white font-bold text-[11px]">Varun Menon</div>
                            <div class="text-[9px] text-brand-desc">AI Engineer, Infopark</div>
                        </div>
                    </div>
                </div>
                <div class="glass-card p-6 rounded-2xl flex flex-col justify-between">
                    <p class="text-brand-desc text-xs leading-relaxed mb-6">
                        "Completed the Digital Marketing Foundational course for &#8377;99. It cleared all my doubts about
                        campaign setups and SEO tracking. Truly standard content."
                    </p>
                    <div class="flex items-center gap-3 pt-4 border-t border-brand-border/40">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-[10px] text-brand-cyan" style="background: rgba(34,211,238,0.1);">RK</div>
                        <div>
                            <div class="text-white font-bold text-[11px]">Rohan Kapoor</div>
                            <div class="text-[9px] text-brand-desc">Student, Jaipur</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQs SECTION -->
        <section id="faqs" class="max-w-4xl mx-auto px-6 py-24 border-t section-divider">
            <div class="text-center mb-16">
                <span class="badge-cyan text-[10px] sm:text-xs uppercase tracking-[0.25em] font-bold inline-block mb-4 px-3 py-1 rounded-full">// FAQs</span>
                <h2 class="font-outfit text-2xl sm:text-3xl font-extrabold text-white">Questions &amp; Answers</h2>
            </div>

            <div class="space-y-4" id="faqs-container">
                <div class="faq-item rounded-2xl overflow-hidden">
                    <button onclick="toggleFaq(this)"
                        class="w-full px-6 py-4 text-left flex justify-between items-center text-brand-text hover:text-white transition-colors">
                        <span class="font-semibold text-xs sm:text-sm">How do I access the foundational recorded courses?</span>
                        <span class="text-brand-muted text-sm transition-transform duration-300 transform">&#65291;</span>
                    </button>
                    <div class="px-6 max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                        <p class="pb-4 text-brand-desc text-xs leading-relaxed border-t border-brand-border/30 pt-3">
                            Once you complete the enrollment checkout (&#8377;99 or &#8377;149), a mock transaction ID is generated in
                            our SQLite log database, and access links are immediately simulated. Check your email for login details.
                        </p>
                    </div>
                </div>

                <div class="faq-item rounded-2xl overflow-hidden">
                    <button onclick="toggleFaq(this)"
                        class="w-full px-6 py-4 text-left flex justify-between items-center text-brand-text hover:text-white transition-colors">
                        <span class="font-semibold text-xs sm:text-sm">What is the schedule for the live programs?</span>
                        <span class="text-brand-muted text-sm transition-transform duration-300 transform">&#65291;</span>
                    </button>
                    <div class="px-6 max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                        <p class="pb-4 text-brand-desc text-xs leading-relaxed border-t border-brand-border/30 pt-3">
                            Our foundational tracks (&#8377;99 and &#8377;149) consist of module-wise recorded video lectures that you
                            can study at any time. Our premium live mentorship cohorts (&#8377;45,000) run on weekends (Saturdays
                            &amp; Sundays, 10:00 AM - 1:00 PM) and weekdays (Mondays - Wednesdays, 6:00 PM - 9:00 PM).
                        </p>
                    </div>
                </div>

                <div class="faq-item rounded-2xl overflow-hidden">
                    <button onclick="toggleFaq(this)"
                        class="w-full px-6 py-4 text-left flex justify-between items-center text-brand-text hover:text-white transition-colors">
                        <span class="font-semibold text-xs sm:text-sm">How does the placement assistance work?</span>
                        <span class="text-brand-muted text-sm transition-transform duration-300 transform">&#65291;</span>
                    </button>
                    <div class="px-6 max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                        <p class="pb-4 text-brand-desc text-xs leading-relaxed border-t border-brand-border/30 pt-3">
                            For our live tracks, students who score over 80% on practical tests are directly linked with
                            hiring managers in partner software houses in Kochi and Jaipur for guaranteed internships.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- FOOTER -->
        <footer class="footer-bg py-16 text-xs text-brand-desc">
            <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
                <div class="space-y-4">
                    <a href="#" class="font-outfit text-lg font-extrabold text-white block">
                        GEN<span class="gradient-text">X</span>
                    </a>
                    <p class="leading-relaxed text-xs">
                        Bridging education gaps. Delivering high-quality practical web &amp; digital education structures to technical aspirants.
                    </p>
                    <p class="text-brand-muted">
                        &copy; 2026 GenX Institute. All rights reserved.
                    </p>
                </div>
                <div>
                    <h5 class="text-white font-bold mb-3 uppercase tracking-wider">Programs</h5>
                    <ul class="space-y-2">
                        <li><a href="#courses" class="hover:text-brand-cyan transition-colors">Digital Marketing (&#8377;99)</a></li>
                        <li><a href="#courses" class="hover:text-brand-cyan transition-colors">Web Development (&#8377;149)</a></li>
                        <li><a href="#courses" class="hover:text-brand-cyan transition-colors">AI &amp; Full Stack (&#8377;45,000)</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="text-white font-bold mb-3 uppercase tracking-wider">Quick Links</h5>
                    <ul class="space-y-2">
                        <li><a href="<?= site_url('student/login') ?>" class="hover:text-brand-cyan transition-colors font-bold text-brand-indigo">Student Portal Login</a></li>
                        <li><a href="#advantages" class="hover:text-brand-cyan transition-colors">The Advantage</a></li>
                        <li><a href="#testimonials" class="hover:text-brand-cyan transition-colors">Reviews</a></li>
                        <li><a href="#faqs" class="hover:text-brand-cyan transition-colors">FAQs</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="text-white font-bold mb-3 uppercase tracking-wider">Contact</h5>
                    <p class="leading-relaxed mb-2">
                        &#128205; Adarsh Nagar, Jaipur / Ravipuram, Kochi, Kerala, India
                    </p>
                    <p class="leading-relaxed">
                        &#128222; +91 98765 43210 <br>
                        &#9993;&#65039; info@genxinstitute.in
                    </p>
                </div>
            </div>
        </footer>

    </div><!-- /page-wrapper -->

    <!-- CHECKOUT MODAL (DARK THEME) -->
    <div id="checkoutModal"
        class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-all duration-300">
        <div class="relative w-full max-w-lg rounded-2xl overflow-hidden mx-4 transform scale-95 transition-transform duration-300"
            id="modalCard"
            style="background: rgba(10,22,40,0.97); border: 1px solid rgba(99,102,241,0.3); backdrop-filter: blur(20px); box-shadow: 0 0 60px rgba(99,102,241,0.2);">

            <button onclick="closeModal()"
                class="absolute top-4 right-4 text-brand-muted hover:text-white text-xl transition-colors">&times;</button>

            <div class="p-8" id="modalContent">
                <div class="text-center mb-6">
                    <span class="badge-cyan text-[9px] tracking-widest font-bold uppercase px-2 py-0.5 rounded">Checkout</span>
                    <h3 class="font-outfit text-lg font-bold text-white mt-3" id="modalCourseTitle">Confirm Admission</h3>
                    <p class="text-xs text-brand-desc mt-1">Complete your registration to secure a slot in this batch.</p>
                </div>

                <form id="enrollForm" onsubmit="submitForm(event)" class="space-y-4">
                    <input type="hidden" id="course_code" name="course">

                    <div>
                        <label class="block text-[9px] uppercase tracking-wider text-brand-desc font-bold mb-1.5" for="name">Full Name</label>
                        <input class="dark-input w-full rounded-lg px-4 py-2.5 text-xs" type="text" id="name" name="name" placeholder="John Doe" required>
                    </div>
                    <div>
                        <label class="block text-[9px] uppercase tracking-wider text-brand-desc font-bold mb-1.5" for="email">Email Address</label>
                        <input class="dark-input w-full rounded-lg px-4 py-2.5 text-xs" type="email" id="email" name="email" placeholder="john@example.com" required>
                    </div>
                    <div>
                        <label class="block text-[9px] uppercase tracking-wider text-brand-desc font-bold mb-1.5" for="phone">Phone Number (10 digits)</label>
                        <input class="dark-input w-full rounded-lg px-4 py-2.5 text-xs" type="tel" id="phone" name="phone" placeholder="9876543210" pattern="[0-9]{10}" required>
                    </div>
                    <div>
                        <label class="block text-[9px] uppercase tracking-wider text-brand-desc font-bold mb-1.5" for="password">Create Password</label>
                        <input class="dark-input w-full rounded-lg px-4 py-2.5 text-xs" type="password" id="password" name="password" placeholder="Min. 8 characters" minlength="8" required>
                    </div>

                    <div class="rounded-lg p-4 space-y-2 text-xs" style="background: rgba(5,13,26,0.8); border: 1px solid rgba(26,58,107,0.5);">
                        <div class="flex justify-between">
                            <span class="text-brand-desc">Course Admission</span>
                            <span class="text-white font-semibold" id="modalSummaryPrice">&#8377;99.00</span>
                        </div>
                        <div class="flex justify-between border-t border-brand-border/40 pt-2 font-bold text-sm">
                            <span class="text-white">Total Amount</span>
                            <span class="text-brand-cyan" id="modalFinalPrice">&#8377;99.00</span>
                        </div>
                    </div>

                    <div id="formError" class="text-xs text-red-400 rounded-lg p-3 hidden" style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);"></div>

                    <button type="submit" id="submitBtn"
                        class="btn-primary w-full py-3.5 rounded-lg text-xs font-bold uppercase tracking-wider text-white transition-all duration-300">
                        Claim Seat
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Razorpay Checkout Integration -->
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

    <!-- JAVASCRIPT -->
    <script>
        // ======================================================
        // FULL-PAGE LIVE PARTICLE CANVAS — DARK BLUE THEME
        // Mouse-interactive: particles flee cursor, cyan lines connect to mouse
        // ======================================================
        const canvas = document.getElementById('particle-canvas');
        const ctx = canvas.getContext('2d');

        let W = canvas.width = window.innerWidth;
        let H = canvas.height = window.innerHeight;

        window.addEventListener('resize', () => {
            W = canvas.width = window.innerWidth;
            H = canvas.height = window.innerHeight;
        });

        // Track mouse position (client coords = fixed coords)
        const mouse = { x: -9999, y: -9999, radius: 130 };
        window.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
        window.addEventListener('mouseleave', () => { mouse.x = -9999; mouse.y = -9999; });

        const PARTICLE_COUNT = 90;
        const MAX_LINK_DIST = 130;

        const palette = [
            'rgba(99,102,241,',
            'rgba(139,92,246,',
            'rgba(34,211,238,',
            'rgba(79,70,229,',
            'rgba(167,139,250,',
        ];

        class Particle {
            constructor() { this.init(); }
            init() {
                this.x = Math.random() * W;
                this.y = Math.random() * H;
                this.vx = (Math.random() - 0.5) * 0.45;
                this.vy = (Math.random() - 0.5) * 0.45;
                this.radius = Math.random() * 1.8 + 0.5;
                this.color = palette[Math.floor(Math.random() * palette.length)];
            }
            update() {
                this.x += this.vx;
                this.y += this.vy;
                if (this.x < 0 || this.x > W) this.vx *= -1;
                if (this.y < 0 || this.y > H) this.vy *= -1;
                // Repel from mouse
                const dx = this.x - mouse.x;
                const dy = this.y - mouse.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < mouse.radius && dist > 0) {
                    const force = (mouse.radius - dist) / mouse.radius;
                    const angle = Math.atan2(dy, dx);
                    this.x += Math.cos(angle) * force * 3;
                    this.y += Math.sin(angle) * force * 3;
                }
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color + '0.9)';
                ctx.fill();
            }
        }

        const particles = [];
        for (let i = 0; i < PARTICLE_COUNT; i++) particles.push(new Particle());

        function drawFrame() {
            // Slightly transparent fill creates motion trails on dark bg
            ctx.fillStyle = 'rgba(5, 13, 26, 0.18)';
            ctx.fillRect(0, 0, W, H);

            for (let i = 0; i < particles.length; i++) {
                const p = particles[i];
                p.update();
                p.draw();

                // Particle-to-particle lines
                for (let j = i + 1; j < particles.length; j++) {
                    const q = particles[j];
                    const dx = p.x - q.x, dy = p.y - q.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < MAX_LINK_DIST) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(q.x, q.y);
                        ctx.strokeStyle = 'rgba(99,102,241,' + ((1 - dist / MAX_LINK_DIST) * 0.22) + ')';
                        ctx.lineWidth = 0.6;
                        ctx.stroke();
                    }
                }

                // Particle-to-mouse cyan glow lines
                const mdx = p.x - mouse.x, mdy = p.y - mouse.y;
                const mDist = Math.sqrt(mdx * mdx + mdy * mdy);
                if (mDist < mouse.radius * 1.6) {
                    const alpha = (1 - mDist / (mouse.radius * 1.6)) * 0.55;
                    ctx.beginPath();
                    ctx.moveTo(p.x, p.y);
                    ctx.lineTo(mouse.x, mouse.y);
                    ctx.strokeStyle = 'rgba(34,211,238,' + alpha + ')';
                    ctx.lineWidth = 0.8;
                    ctx.stroke();
                }
            }
            requestAnimationFrame(drawFrame);
        }
        drawFrame();

        // ======================================================
        // MODAL LOGIC
        // ======================================================
        const courseData = {
            digital_marketing_foundational: { title: 'Digital Marketing Foundation', price: '\u20b999.00' },
            web_development_foundational:   { title: 'Web Development Foundation',   price: '\u20b9149.00' },
            ai_python_fullstack:            { title: 'AI & Python Full Stack',        price: '\u20b945,000.00' },
            digital_marketing_expert:       { title: 'Digital Marketing Expert',      price: '\u20b945,000.00' }
        };

        const modal = document.getElementById('checkoutModal');
        const card  = document.getElementById('modalCard');

        function openModal(code) {
            if (!courseData[code]) return;
            document.getElementById('course_code').value = code;
            document.getElementById('modalCourseTitle').textContent = 'Enroll in ' + courseData[code].title;
            document.getElementById('modalSummaryPrice').textContent = courseData[code].price;
            document.getElementById('modalFinalPrice').textContent = courseData[code].price;
            modal.classList.remove('opacity-0', 'pointer-events-none');
            card.classList.remove('scale-95');
            card.classList.add('scale-100');
            document.body.style.overflow = 'hidden';
        }

        function closeModal() {
            modal.classList.add('opacity-0', 'pointer-events-none');
            card.classList.remove('scale-100');
            card.classList.add('scale-95');
            document.body.style.overflow = 'auto';
            document.getElementById('formError').classList.add('hidden');
            document.getElementById('enrollForm').reset();
        }

        modal.addEventListener('click', e => { if (e.target === modal) closeModal(); });

        // ======================================================
        // FAQ ACCORDION
        // ======================================================
        function toggleFaq(button) {
            const container = button.parentElement;
            const content   = button.nextElementSibling;
            const icon      = button.querySelector('span:last-child');
            const isOpen    = container.dataset.open === 'true';

            document.querySelectorAll('#faqs-container > div').forEach(div => {
                div.dataset.open = 'false';
                div.querySelector('div').style.maxHeight = '0px';
                div.querySelector('span:last-child').textContent = '\uFF0B';
                div.querySelector('span:last-child').style.transform = 'rotate(0deg)';
                div.style.borderColor = 'rgba(26,58,107,0.5)';
            });

            if (!isOpen) {
                container.dataset.open = 'true';
                content.style.maxHeight = content.scrollHeight + 'px';
                icon.textContent = '\uFF0D';
                icon.style.transform = 'rotate(180deg)';
                container.style.borderColor = 'rgba(99,102,241,0.5)';
            }
        }

        // ======================================================
        // FORM SUBMISSION
        // ======================================================
        // ======================================================
        // FORM SUBMISSION & RAZORPAY INTEGRATION
        // ======================================================
        function submitForm(event) {
            event.preventDefault();
            const form      = document.getElementById('enrollForm');
            const submitBtn = document.getElementById('submitBtn');
            const errorDiv  = document.getElementById('formError');
            const formData  = new FormData(form);

            errorDiv.classList.add('hidden');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<svg class="animate-spin -ml-1 mr-3 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Initializing Payment...';

            fetch('<?= site_url('enroll') ?>', { method: 'POST', body: formData })
                .then(r => r.json())
                .then(async data => {
                    if (data.status === 'success_pending') {
                        if (data.is_mock) {
                            // Developer Mock Mode (triggers automatically when keys in .env are default placeholders)
                            submitBtn.textContent = 'Verifying Sandbox Payment...';
                            const mockPaymentId = 'pay_mock_' + Math.random().toString(36).substring(2, 11);
                            const mockSecret = 'mock_secret';
                            const msg = data.order_id + '|' + mockPaymentId + '|' + mockSecret;
                            const signature = await sha256(msg);

                            setTimeout(() => {
                                submitVerification({
                                    razorpay_order_id: data.order_id,
                                    razorpay_payment_id: mockPaymentId,
                                    razorpay_signature: signature,
                                    is_mock: 'true'
                                });
                            }, 1000);
                        } else {
                            // Live/Test Razorpay Gateway
                            const options = {
                                key: data.key_id,
                                amount: data.amount * 100,
                                currency: 'INR',
                                name: 'GenX Institute',
                                description: 'Course Enrollment: ' + data.course_title,
                                order_id: data.order_id,
                                prefill: {
                                    name: data.name,
                                    email: data.email,
                                    contact: data.phone
                                },
                                theme: {
                                    color: '#6366f1'
                                },
                                handler: function(response) {
                                    submitBtn.textContent = 'Verifying Payment...';
                                    submitVerification({
                                        razorpay_order_id: response.razorpay_order_id,
                                        razorpay_payment_id: response.razorpay_payment_id,
                                        razorpay_signature: response.razorpay_signature,
                                        is_mock: 'false'
                                    });
                                },
                                modal: {
                                    ondismiss: function() {
                                        submitBtn.disabled = false;
                                        submitBtn.textContent = 'Claim Seat';
                                    }
                                }
                            };
                            const rzp = new Razorpay(options);
                            rzp.open();
                        }
                    } else {
                        displayErrors(data.errors);
                    }
                })
                .catch(() => {
                    displayErrors({ general: 'An unexpected error occurred. Please verify configuration.' });
                });
        }

        function submitVerification(payload) {
            const submitBtn = document.getElementById('submitBtn');
            const verifyData = new FormData();
            for (const k in payload) {
                verifyData.append(k, payload[k]);
            }

            fetch('<?= site_url('enroll/verify') ?>', { method: 'POST', body: verifyData })
                .then(r => r.json())
                .then(data => {
                    if (data.status === 'success') {
                        document.getElementById('modalContent').innerHTML = `
                            <div class="text-center py-8 space-y-6">
                                <div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto text-emerald-400 text-2xl animate-bounce" style="background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);">&#10003;</div>
                                <div class="space-y-1">
                                    <h3 class="font-outfit text-lg font-bold text-white">Enrollment & Payment Successful!</h3>
                                    <p class="text-xs text-brand-desc">Your learning workspace is ready.</p>
                                </div>
                                <div class="rounded-xl p-4 text-left space-y-2 font-mono text-xs" style="background:rgba(5,13,26,0.8);border:1px solid rgba(26,58,107,0.5);">
                                    <div><span class="text-brand-cyan font-bold">Course:</span> ${escapeHtml(data.course_title)}</div>
                                    <div><span class="text-brand-cyan font-bold">Name:</span> ${escapeHtml(data.name)}</div>
                                    <div><span class="text-brand-cyan font-bold">Amount Paid:</span> \u20b9${Number(data.amount).toLocaleString('en-IN')}</div>
                                </div>
                                <div class="text-xs text-brand-cyan font-semibold animate-pulse">Redirecting in <span id="countdown">3</span> seconds...</div>
                                <a href="${data.redirect_url}" class="btn-primary px-6 py-2.5 rounded-full text-xs font-semibold uppercase tracking-wider text-white inline-block">Go to Workspace Now</a>
                            </div>`;
                        let count = 3;
                        const iv = setInterval(() => {
                            count--;
                            const el = document.getElementById('countdown');
                            if (el) el.textContent = count;
                            if (count <= 0) { clearInterval(iv); window.location.href = data.redirect_url; }
                        }, 1000);
                    } else {
                        displayErrors(data.errors);
                    }
                })
                .catch(() => {
                    displayErrors({ general: 'Verification error occurred. Please contact support.' });
                });
        }

        function displayErrors(errors) {
            const submitBtn = document.getElementById('submitBtn');
            const errorDiv  = document.getElementById('formError');
            let msg = '';
            for (const k in errors) msg += errors[k] + '<br>';
            errorDiv.innerHTML = msg;
            errorDiv.classList.remove('hidden');
            submitBtn.disabled = false;
            submitBtn.textContent = 'Claim Seat';
        }

        async function sha256(message) {
            const msgBuffer = new TextEncoder().encode(message);
            const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
            const hashArray = Array.from(new Uint8Array(hashBuffer));
            return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
        }

        function escapeHtml(text) {
            return String(text)
                .replace(/&/g, '&amp;').replace(/</g, '&lt;')
                .replace(/>/g, '&gt;').replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        // ======================================================
        // MOBILE SIDEBAR
        // ======================================================
        const sidebar  = document.getElementById('mobile-sidebar');
        const overlay  = document.getElementById('sidebar-overlay');
        const hamBtn   = document.getElementById('ham-btn');

        function openSidebar() {
            sidebar.classList.add('open');
            overlay.classList.add('open');
            hamBtn.classList.add('active');
            hamBtn.setAttribute('aria-expanded', 'true');
            document.body.style.overflow = 'hidden';
        }

        function closeSidebar() {
            sidebar.classList.remove('open');
            overlay.classList.remove('open');
            hamBtn.classList.remove('active');
            hamBtn.setAttribute('aria-expanded', 'false');
            document.body.style.overflow = 'auto';
        }

        function toggleSidebar() {
            sidebar.classList.contains('open') ? closeSidebar() : openSidebar();
        }

        // Close sidebar on Escape key
        document.addEventListener('keydown', e => {
            if (e.key === 'Escape' && sidebar.classList.contains('open')) closeSidebar();
        });

        // ======================================================
        // REVIEW SLIDER (Mobile)
        // ======================================================
        let reviewCurrent = 0;
        const reviewTotal = 3;

        function updateReviewSlider() {
            const inner = document.getElementById('review-inner');
            if (inner) inner.style.transform = `translateX(-${reviewCurrent * 100}%)`;
            // update dots
            document.querySelectorAll('.review-dot').forEach((dot, i) => {
                if (i === reviewCurrent) {
                    dot.style.background = '#6366f1';
                    dot.style.width = '20px';
                } else {
                    dot.style.background = 'rgba(99,102,241,0.3)';
                    dot.style.width = '6px';
                }
            });
        }

        function reviewSlide(dir) {
            reviewCurrent = (reviewCurrent + dir + reviewTotal) % reviewTotal;
            updateReviewSlider();
        }

        function goToReview(idx) {
            reviewCurrent = idx;
            updateReviewSlider();
        }

        // Touch/swipe support
        (function() {
            const track = document.getElementById('review-track');
            if (!track) return;
            let startX = 0;
            track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
            track.addEventListener('touchend', e => {
                const diff = startX - e.changedTouches[0].clientX;
                if (Math.abs(diff) > 40) reviewSlide(diff > 0 ? 1 : -1);
            }, { passive: true });
        })();
    </script>
</body>

</html>