{% extends "layout.html" %}

{% block head %}
<style>
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .faq-item .faq-body {
        max-height: 0;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
    }

    .faq-item.open .faq-body {
        max-height: 300px;
        opacity: 1;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }

    .faq-item.open .faq-trigger {
        border-color: rgba(0, 0, 0, 0.05) !important;
        background: rgba(37, 211, 102, 0.03) !important;
    }

    .faq-item.open .faq-arrow {
        transform: rotate(180deg);
        color: var(--primary);
    }

    .faq-arrow {
        transition: transform 0.4s ease;
        font-size: 1.2rem;
        color: var(--text-dim);
    }

    .faq-trigger:hover {
        background: rgba(255, 255, 255, 0.9) !important;
        transform: translateY(-2px);
    }

    /* Marquee Brand Colors Sync */
    .partner-logo {
        filter: none !important;
        opacity: 1 !important;
        color: var(--text-main) !important;
    }

    .partner-logo.google {
        color: #4285F4 !important;
    }

    .partner-logo.microsoft {
        color: #00A4EF !important;
    }

    .partner-logo.meta {
        color: #0668E1 !important;
    }

    .partner-logo.amazon {
        color: #FF9900 !important;
    }

    .partner-logo.netflix {
        color: #E50914 !important;
    }

    .partner-logo.spotify {
        color: #1DB954 !important;
    }

    .partner-logo.tesla {
        color: #CC0000 !important;
    }

    .partner-logo.spacex {
        color: #000000 !important;
    }
</style>
{% endblock %}

{% block content %}

<!-- ═══════════════════════════════════════ HERO ═══ -->
<section class="hero-section"
    style="padding-top: 10rem; min-height: 90vh; position: relative; overflow: hidden; background: radial-gradient(at 0% 0%, rgba(37,211,102,0.05) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(52,183,241,0.03) 0px, transparent 50%);">
    <!-- Background Pattern -->
    <div
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.02; background-image: radial-gradient(#000 0.5px, transparent 0.5px); background-size: 20px 20px; z-index: -1;">
    </div>

    <!-- Background Decor -->
    <div
        style="position: absolute; top: -10%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(37,211,102,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(80px); z-index: -1;">
    </div>
    <div
        style="position: absolute; bottom: 10%; left: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(52,183,241,0.05) 0%, transparent 70%); border-radius: 50%; filter: blur(80px); z-index: -1;">
    </div>

    <div class="container">
        <div style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; text-align: left;">
            <div class="reveal">
                <div class="hero-badge-pill">
                    <span style="background: #25D366; box-shadow: 0 0 10px #25D366;"></span>
                    India's #1 WhatsApp AI Hiring Engine
                </div>
                <h1 class="hero-title" style="margin-left: 0; line-height: 1.1;">
                    Human-Level AI.<br>
                    <span class="line2"
                        style="background: linear-gradient(135deg, #25D366, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">WhatsApp
                        Simplicity.</span>
                </h1>
                <p class="hero-sub"
                    style="margin-left: 0; max-width: 550px; font-size: 1.25rem; color: #166534; opacity: 0.9;">
                    ChinnuAI is the first autonomous hiring agent that lives on WhatsApp.
                    No apps. No portals. Just <span style="color: #25D366; font-weight: 800;">intelligent matches</span>
                    delivered where you already chat.
                </p>
                <div class="hero-actions" style="justify-content: flex-start; margin-top: 3.5rem;">
                    <a href="https://wa.me/your_number" class="btn-hero-primary"
                        style="padding: 1.2rem 3rem; font-size: 1.1rem; border-radius: 16px;">
                        💬 Start Chatting with Chinnu
                    </a>
                    <a href="/register" class="btn-hero-outline"
                        style="border: 1px solid var(--glass-border); padding: 1.2rem 2.5rem; font-size: 1.1rem; border-radius: 16px; color: var(--text-main);">
                        🏢 Post a Job &rarr;
                    </a>
                </div>
            </div>

            <div class="reveal" style="position: relative;">
                <div class="glass-card-p"
                    style="position: absolute; top: 15%; left: -80px; padding: 1.5rem; z-index: 5; animation: floatY 4s ease-in-out infinite;">
                    <div
                        style="font-weight: 800; color: #25D366; font-size: 0.7rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px;">
                        MATCH FOUND! 🎯</div>
                    <div style="font-size: 0.9rem; font-weight: 700; color: var(--text-main);">Senior Backend Lead</div>
                    <div style="font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem;">Score: 98%
                        Compatibility</div>
                </div>

                <div class="phone-mockup" style="transform: rotate(2deg);">
                    <div class="phone-screen">
                        <div class="wa-header">
                            <div
                                style="width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #075E54; border: 1px solid #eee; font-size: 1.1rem;">
                                🤖</div>
                            <div>
                                <div style="font-size: 0.85rem;">ChinnuAI</div>
                                <div style="font-size: 0.65rem; font-weight: 400; opacity: 0.8;">Hiring Specialist</div>
                            </div>
                        </div>
                        <div class="wa-body">
                            <div class="chat-bubble-p received">Hi! I'm Chinnu. Ready to find your next hire or job? 👋
                            </div>
                            <div class="chat-bubble-p sent">Help me find a Python dev in Bangalore.</div>
                            <div class="chat-bubble-p received" style="background: white; font-weight: 600;">Searching
                                15,000+ verified profiles... 🔍</div>
                            <div class="chat-bubble-p received" style="background: #e7f3ff; border: 1px solid #c2e0ff;">
                                <b>Perfect Match!</b><br>
                                Arjun (SDE-II) just finished an interview. Should I send his profile?<br>
                                <button
                                    style="background: #25D366; border: none; color: white; padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; margin-top: 5px; cursor: pointer;">Yes,
                                    Send!</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ MARQUEE ══ -->
<div class="marquee-container reveal"
    style="border-top: 1px solid rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.03);">
    <div
        style="text-align: center; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 2rem; opacity: 0.6;">
        TRUSTED BY 500+ FORWARD-THINKING TEAMS</div>
    <div class="marquee-content">
        <!-- Google -->
        <div class="partner-logo google">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M12.48 10.92v3.28h7.84c-.24 1.84-.92 3.32-2.12 4.52-1.36 1.36-3.48 2.44-7.24 2.44-5.96 0-10.36-4.84-10.36-10.8s4.4-10.8 10.36-10.8c3.24 0 5.6 1.28 7.36 2.96l2.32-2.32C18.64 1.04 15.84 0 12.48 0 5.48 0 0 5.48 0 12.48s5.48 12.48 12.48 12.48c4.08 0 7.16-1.32 9.52-3.8 2.36-2.36 3.12-5.72 3.12-8.32 0-.8-.08-1.52-.2-2.24H12.48z" />
            </svg>
            <span>Google</span>
        </div>
        <!-- Microsoft -->
        <div class="partner-logo microsoft">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6h11.4V24zM11.4 11.4H0V0h11.4v11.4zM24 11.4H12.6V0h11.4v11.4z" />
            </svg>
            <span>Microsoft</span>
        </div>
        <!-- Meta -->
        <div class="partner-logo meta">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 18.25c-3.452 0-6.25-2.798-6.25-6.25s2.798-6.25 6.25-6.25 6.25 2.798 6.25 6.25-2.798 6.25-6.25 6.25z" />
            </svg>
            <span>Meta</span>
        </div>
        <!-- Amazon -->
        <div class="partner-logo amazon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
            </svg>
            <span>Amazon</span>
        </div>
        <!-- Netflix -->
        <div class="partner-logo netflix">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.7 0l2.3 24h-3L10 6.5l-4 17.5h-3L1 0h3l2.8 17.5L10.5 0h4.2z" />
            </svg>
            <span>Netflix</span>
        </div>
        <!-- Spotify -->
        <div class="partner-logo spotify">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.3-.6.4-.9.2-2.5-1.5-5.6-1.9-9.3-.9-.4.1-.7-.1-.8-.5s.1-.7.5-.8c4.1-1.1 7.5-.6 10.3 1.1.3.2.4.6.2.9zm1.5-3.3c-.3.4-.8.5-1.1.3-3.1-1.9-7.8-2.5-11.4-1.4-.4.1-.9-.1-1-.6s.1-.9.6-1c4.1-1.2 9.3-.6 12.8 1.6.3.2.5.8.1 1.1zm.1-3.4C15 8.1 8 7.9 4 9.1c-.6.2-1.2-.2-1.4-.8s.2-1.2.8-1.4c4.6-1.4 12.4-1.2 17.1 1.6.5.3.7 1 .4 1.5-.3.5-1 1-1.5.6z" />
            </svg>
            <span>Spotify</span>
        </div>
        <!-- Tesla -->
        <div class="partner-logo tesla">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M22.923 8.948c-2.42-.45-4.834-.912-7.25-1.397l-1.083-2.537c-.306-.718-.612-1.438-.92-2.156l-.92 2.156-1.083 2.537c-2.415.485-4.83 1.053-7.25 1.706V8.948c2.42-.45 4.834-.912 7.25-1.397l1.083-2.537c.306-.718.612-1.438.92-2.156l.92 2.156l1.083 2.537c2.415.485 4.83 1.053 7.25 1.706V8.948z" />
            </svg>
            <span>Tesla</span>
        </div>
        <!-- SpaceX -->
        <div class="partner-logo spacex">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M21.1 2.3l-7.6 7.4-4.1-7.1H5.4l6.1 10.6-7.4 7.4s.9-.3 1.2-.3l6.4-6.4 4.1 7.1h4l-7.6-7.6 7.9-7.9s-.9-.3-1.2-.3z" />
            </svg>
            <span>SpaceX</span>
        </div>

        <!-- Repetition for seamless loop -->
        <div class="partner-logo google">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M12.48 10.92v3.28h7.84c-.24 1.84-.92 3.32-2.12 4.52-1.36 1.36-3.48 2.44-7.24 2.44-5.96 0-10.36-4.84-10.36-10.8s4.4-10.8 10.36-10.8c3.24 0 5.6 1.28 7.36 2.96l2.32-2.32C18.64 1.04 15.84 0 12.48 0 5.48 0 0 5.48 0 12.48s5.48 12.48 12.48 12.48c4.08 0 7.16-1.32 9.52-3.8 2.36-2.36 3.12-5.72 3.12-8.32 0-.8-.08-1.52-.2-2.24H12.48z" />
            </svg>
            <span>Google</span>
        </div>
        <div class="partner-logo microsoft">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6h11.4V24zM11.4 11.4H0V0h11.4v11.4zM24 11.4H12.6V0h11.4v11.4z" />
            </svg>
            <span>Microsoft</span>
        </div>
        <div class="partner-logo meta">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 18.25c-3.452 0-6.25-2.798-6.25-6.25s2.798-6.25 6.25-6.25 6.25 2.798 6.25 6.25-2.798 6.25-6.25 6.25z" />
            </svg>
            <span>Meta</span>
        </div>
        <div class="partner-logo amazon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
            </svg>
            <span>Amazon</span>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════ STATS ══ -->
<div class="container reveal" style="margin-top: 4rem;">
    <div class="glass-card-p"
        style="display: grid; grid-template-columns: repeat(4, 1fr); padding: 4rem; text-align: center; gap: 2rem;">
        <div class="stat-item">
            <div class="stat-num"
                style="background: linear-gradient(135deg, #25D366, #128C7E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">
                15K+</div>
            <div class="stat-label">Verified Talents</div>
        </div>
        <div class="stat-item">
            <div class="stat-num"
                style="background: linear-gradient(135deg, #25D366, #128C7E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">
                580+</div>
            <div class="stat-label">Hiring Partners</div>
        </div>
        <div class="stat-item">
            <div class="stat-num"
                style="background: linear-gradient(135deg, #25D366, #128C7E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">
                99.4%</div>
            <div class="stat-label">Open Rate</div>
        </div>
        <div class="stat-item">
            <div class="stat-num"
                style="background: linear-gradient(135deg, #25D366, #128C7E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">
                2.4h</div>
            <div class="stat-label">Mean Match Time</div>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════ HOW IT WORKS ══ -->
<section id="how-it-works" class="container" style="padding: 7rem 0;">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center;">
        <div class="reveal">
            <div class="section-header" style="text-align: left; margin: 0;">
                <div class="overline">The Journey</div>
                <h2 style="margin-left: 0;">Hiring as simple as <span class="gradient-text">Chatting</span></h2>
                <p style="margin-left: 0;">ChinnuAI automates the entire funnel from job post to verified hire—all
                    natively inside WhatsApp.</p>
            </div>

            <div style="display: flex; flex-direction: column; gap: 2.5rem; margin-top: 4rem;">
                <div style="display: flex; gap: 1.5rem;">
                    <div
                        style="width: 54px; height: 54px; min-width: 54px; border-radius: 16px; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 10px 20px rgba(37,211,102,0.3);">
                        <i class="fas fa-magic"></i>
                    </div>
                    <div>
                        <h4 style="font-weight: 800; margin-bottom: 0.5rem;">Describe the Role</h4>
                        <p style="color: var(--text-dim); font-size: 0.95rem;">Type your requirements in plain English.
                            No complicated forms or rigid drop-downs.</p>
                    </div>
                </div>
                <div style="display: flex; gap: 1.5rem;">
                    <div
                        style="width: 54px; height: 54px; min-width: 54px; border-radius: 16px; background: #34B7F1; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 10px 20px rgba(52,183,241,0.3);">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div>
                        <h4 style="font-weight: 800; margin-bottom: 0.5rem;">AI Scans & Matches</h4>
                        <p style="color: var(--text-dim); font-size: 0.95rem;">Our LLM scans 15K+ WhatsApp profiles to
                            find the top 5% talent instantly.</p>
                    </div>
                </div>
                <div style="display: flex; gap: 1.5rem;">
                    <div
                        style="width: 54px; height: 54px; min-width: 54px; border-radius: 16px; background: #6366F1; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 10px 20px rgba(99,102,241,0.3);">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div>
                        <h4 style="font-weight: 800; margin-bottom: 0.5rem;">Instant Hire</h4>
                        <p style="color: var(--text-dim); font-size: 0.95rem;">Review pre-graded candidates and start
                            interviewing with one click.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- NEW: Product Preview Mockup (SaaS Dashboard Style) -->
        <div class="reveal" style="position: relative;">
            <div class="glass-card-p"
                style="padding: 2.5rem; position: relative; border-radius: 24px; overflow: hidden; background: white; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 50px 100px -20px rgba(0,0,0,0.1);">
                <!-- Header -->
                <div
                    style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 1rem; margin-bottom: 1.5rem;">
                    <div style="font-weight: 800; color: var(--text-main); font-size: 1.1rem;">Pipeline: Senior Backend
                        Lead</div>
                    <div
                        style="background: rgba(37,211,102,0.1); color: #25D366; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 800;">
                        Active</div>
                </div>

                <!-- Columns -->
                <div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem;">
                    <!-- Sourced -->
                    <div style="background: #f8fafc; border-radius: 16px; padding: 1.25rem;">
                        <div style="font-size: 0.75rem; font-weight: 800; color: var(--text-dim); margin-bottom: 1rem;">
                            SOURCED (15)</div>
                        <div class="glass-card-p"
                            style="padding: 1rem; background: white; margin-bottom: 0.75rem; box-shadow: 0 4px 10px rgba(0,0,0,0.02); border: none;">
                            <div
                                style="width: 50%; height: 6px; background: #eee; border-radius: 4px; margin-bottom: 8px;">
                            </div>
                            <div style="width: 30%; height: 6px; background: #f5f5f5; border-radius: 4px;"></div>
                        </div>
                        <div class="glass-card-p"
                            style="padding: 1rem; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.02); border: none;">
                            <div
                                style="width: 60%; height: 6px; background: #eee; border-radius: 4px; margin-bottom: 8px;">
                            </div>
                            <div style="width: 40%; height: 6px; background: #f5f5f5; border-radius: 4px;"></div>
                        </div>
                    </div>

                    <!-- Pre-Screened -->
                    <div
                        style="background: rgba(37,211,102,0.03); border: 1px dashed rgba(37,211,102,0.3); border-radius: 16px; padding: 1.25rem; position: relative;">
                        <div style="font-size: 0.75rem; font-weight: 800; color: #25D366; margin-bottom: 1rem;">VERIFIED
                            MATCHES (3)</div>

                        <div class="glass-card-p"
                            style="padding: 1rem; background: white; margin-bottom: 0.75rem; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 10px 20px rgba(37,211,102,0.1); transform: scale(1.02);">
                            <div style="display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem;">
                                <div
                                    style="width: 32px; height: 32px; border-radius: 50%; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800;">
                                    JD</div>
                                <div>
                                    <div style="font-weight: 800; font-size: 0.85rem; color: var(--text-main);">John Doe
                                    </div>
                                    <div style="font-size: 0.65rem; color: var(--text-dim); font-weight: 600;">Google Ex
                                        • 5 YOE</div>
                                </div>
                            </div>
                            <div style="display: flex; gap: 0.5rem; margin-top: 0.75rem;">
                                <span
                                    style="background: rgba(37,211,102,0.1); color: #25D366; padding: 3px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 800;">98%
                                    MATCH</span>
                                <span
                                    style="background: #f1f5f9; color: var(--text-dim); padding: 3px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 800;">PYTHON</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Background Glow -->
                <div
                    style="position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle, rgba(37,211,102,0.05) 0%, transparent 70%); filter: blur(30px);">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ THE INTELLIGENCE DECK ══ -->
<section style="padding: 10rem 0; background: #0f172a; position: relative; overflow: hidden;">
    <div
        style="position: absolute; top: -10%; right: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(37,211,102,0.12) 0%, transparent 70%); filter: blur(100px); z-index: 1;">
    </div>
    <div class="container" style="position: relative; z-index: 2;">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center;">
            <div class="reveal">
                <div class="overline" style="color: #25D366; opacity: 1;">Neural Analysis v4.2</div>
                <h2
                    style="color: white; font-size: 3.5rem; margin-bottom: 2rem; line-height: 1.1; letter-spacing: -2px;">
                    Verifying Intent with <br><span class="gradient-text">Semantic Vetting.</span>
                </h2>
                <p style="color: rgba(255,255,255,0.7); font-size: 1.25rem; line-height: 1.8; margin-bottom: 3rem;">
                    We don't just "match" keywords. ChinnuAI reads between the lines, evaluating <strong>soft-skill
                        signals, technical depth, and cultural alignment</strong> through deep conversational analysis.
                </p>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;">
                    <div style="border-left: 3px solid #bbf7d0; padding-left: 2rem;">
                        <div
                            style="font-weight: 800; font-size: 1rem; color: #25D366; margin-bottom: 0.5rem; text-transform: uppercase;">
                            98% Accuracy</div>
                        <p style="font-size: 0.9rem; color: rgba(255,255,255,0.5);">Zero-Bias skill correlation.</p>
                    </div>
                    <div style="border-left: 3px solid #bbf7d0; padding-left: 2rem;">
                        <div
                            style="font-weight: 800; font-size: 1rem; color: #25D366; margin-bottom: 0.5rem; text-transform: uppercase;">
                            Context Parsing</div>
                        <p style="font-size: 0.9rem; color: rgba(255,255,255,0.5);">15+ Datapoints per chat bubble.</p>
                    </div>
                </div>
            </div>
            <div class="reveal">
                <div
                    style="position: relative; border-radius: 40px; overflow: hidden; box-shadow: 0 50px 100px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); padding: 0.5rem;">
                    <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1200&q=80"
                        alt="Neural AI Architecture v2"
                        style="width: 100%; border-radius: 32px; display: block; animation: floatY 6s ease-in-out infinite;">
                    <div class="glass-card-p"
                        style="position: absolute; bottom: 30px; right: 30px; padding: 2rem; background: rgba(15,23,42,0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px;">
                        <div
                            style="font-size: 0.7rem; font-weight: 800; color: #25D366; letter-spacing: 2px; margin-bottom: 0.5rem;">
                            AI COGNITION V4.0</div>
                        <div style="font-size: 1.1rem; font-weight: 700; color: white;">Cross-Correlation Scan</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ TALENT GRID ══ -->
<section class="container" style="padding: 10rem 0;">
    <div style="text-align: center; margin-bottom: 6rem;" class="reveal">
        <div class="overline">Global Network</div>
        <h2 style="font-size: 3.5rem;">Elite Talent, <span style="color: #25D366;">Verified by AI.</span></h2>
        <p style="margin: 1.5rem auto 0; max-width: 700px; font-size: 1.2rem;">Our network isn't just a database—it's a
            vetted community of professional leaders Ready-to-Join.</p>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center;" class="reveal">
        <!-- Visual Grid Mosaic -->
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative;">
            <div
                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(37,211,102,0.1) 0%, transparent 70%); filter: blur(50px); z-index: -1;">
            </div>

            <div class="glass-card-p" style="padding: 0.5rem; border-radius: 24px;">
                <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=400&q=80"
                    style="width: 100%; height: 200px; object-fit: cover; border-radius: 20px;">
            </div>
            <div class="glass-card-p" style="padding: 0.5rem; border-radius: 24px; transform: translateY(30px);">
                <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=400&q=80"
                    style="width: 100%; height: 180px; object-fit: cover; border-radius: 20px;">
            </div>
            <div class="glass-card-p" style="padding: 0.5rem; border-radius: 24px;">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=400&q=80"
                    style="width: 100%; height: 220px; object-fit: cover; border-radius: 20px;">
            </div>
            <div class="glass-card-p" style="padding: 0.5rem; border-radius: 24px; transform: translateY(-20px);">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80"
                    style="width: 100%; height: 190px; object-fit: cover; border-radius: 20px;">
            </div>
            <div class="glass-card-p" style="padding: 0.5rem; border-radius: 24px;">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80"
                    style="width: 100%; height: 240px; object-fit: cover; border-radius: 20px;">
            </div>
            <div class="glass-card-p" style="padding: 0.5rem; border-radius: 24px; transform: translateY(40px);">
                <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=400&q=80"
                    style="width: 100%; height: 170px; object-fit: cover; border-radius: 20px;">
            </div>
        </div>

        <div>
            <h3 style="font-weight: 800; font-size: 2.2rem; margin-bottom: 2rem; line-height: 1.2;">Behind the Code.
                <br><span class="gradient-text">Real Ambition.</span>
            </h3>
            <p style="color: var(--text-dim); font-size: 1.15rem; line-height: 1.8; margin-bottom: 3rem;">
                We've built India's most intensive verification pipeline. Every candidate in our network has been
                conversationally vetted for technical depth, true intent, and communication soft-skills.
            </p>
            <div style="display: flex; gap: 3rem;">
                <div>
                    <div style="font-size: 2.5rem; font-weight: 800; color: #25D366; margin-bottom: 0.5rem;">Top 5%
                    </div>
                    <p style="font-size: 0.95rem; font-weight: 600; text-transform: uppercase; color: var(--text-dim);">
                        Vetted Engineers</p>
                </div>
                <div style="width: 1px; background: rgba(0,0,0,0.06); height: 80px;"></div>
                <div>
                    <div style="font-size: 2.5rem; font-weight: 800; color: #34B7F1; margin-bottom: 0.5rem;">4 Hours
                    </div>
                    <p style="font-size: 0.95rem; font-weight: 600; text-transform: uppercase; color: var(--text-dim);">
                        Avg. Match Time</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ ADVANTAGE ══ -->
<section style="background: #f1f5f9; padding: 7rem 1.5rem;">
    <div class="container">
        <div class="section-header reveal">
            <div class="overline">The ChinnuAI Advantage</div>
            <h2>Why companies choose <span class="gradient-text">Autonomous Hiring</span></h2>
        </div>

        <div class="advantage-grid">
            <div class="advantage-card reveal" style="text-align: center; position: relative; overflow: hidden;">
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #25D366;"></div>
                <div style="font-size: 3rem; margin-bottom: 1.5rem; display: block;">🧠</div>
                <h3>Contextual Matching</h3>
                <p style="color: var(--text-dim); font-size: 0.95rem; line-height: 1.7;">Deep LLM understanding of
                    career trajectories. Zero keyword-searching needed.</p>
                <!-- Mini Metric Mockup -->
                <div
                    style="margin-top: 2.5rem; background: #f8fafc; border-radius: 12px; padding: 1rem; border: 1px solid rgba(0,0,0,0.03);">
                    <div
                        style="display: flex; justify-content: space-between; font-size: 0.65rem; font-weight: 800; margin-bottom: 5px;">
                        <span>MATCH ACCURACY</span><span style="color: #25D366;">99.4%</span>
                    </div>
                    <div style="height: 6px; background: #eee; border-radius: 3px; overflow: hidden;">
                        <div style="width: 99.4%; height: 100%; background: #25D366; border-radius: 3px;"></div>
                    </div>
                </div>
            </div>
            <div class="advantage-card reveal"
                style="text-align: center; position: relative; overflow: hidden; transition-delay: 0.1s;">
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #34B7F1;"></div>
                <div style="font-size: 3rem; margin-bottom: 1.5rem; display: block;">⚡</div>
                <h3>10x Speed Factor</h3>
                <p style="color: var(--text-dim); font-size: 0.95rem; line-height: 1.7;">Eliminate the 7-day screening
                    lag. Minutes from post to first verified profile match.</p>
                <!-- Mini Metric Mockup -->
                <div
                    style="margin-top: 2.5rem; background: #f8fafc; border-radius: 12px; padding: 1rem; border: 1px solid rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; gap: 1rem;">
                    <div style="font-size: 0.7rem; font-weight: 800; opacity: 0.4;">WEEK 1</div>
                    <div style="flex: 1; height: 1px; background: #eee; border-top: 2px dotted #ccc;"></div>
                    <div style="font-size: 0.7rem; font-weight: 800; color: #34B7F1;">INSTANT</div>
                </div>
            </div>
            <div class="advantage-card reveal"
                style="text-align: center; position: relative; overflow: hidden; transition-delay: 0.2s;">
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #6366F1;"></div>
                <div style="font-size: 3rem; margin-bottom: 1.5rem; display: block;">🛡️</div>
                <h3>Verified Pipeline</h3>
                <p style="color: var(--text-dim); font-size: 0.95rem; line-height: 1.7;">Every candidate profile is
                    conversation-validated. Zero fake apps, zero spam.</p>
                <!-- Mini Metric Mockup -->
                <div style="margin-top: 2.5rem; display: flex; justify-content: center; gap: 8px;">
                    <div
                        style="width: 32px; height: 32px; border-radius: 50%; background: #6366F1; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;">
                        <i class="fas fa-check-shield"></i>
                    </div>
                    <div
                        style="width: 32px; height: 32px; border-radius: 50%; background: rgba(99,102,241,0.1); border: 1px dotted #6366F1;">
                    </div>
                    <div
                        style="width: 32px; height: 32px; border-radius: 50%; background: rgba(99,102,241,0.1); border: 1px dotted #6366F1;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ TESTIMONIALS ══ -->
<section style="padding: 7rem 0;">
    <div class="container">
        <div class="section-header reveal">
            <div class="overline">Wall of Love</div>
            <h2>Trusted by <span class="gradient-text">Industry Leaders</span></h2>
        </div>

        <div class="testimonials-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
            <div class="glass-card-p reveal" style="padding: 3rem;">
                <div class="stars" style="margin-bottom: 2rem;">★★★★★</div>
                <p style="font-size: 1.15rem; color: var(--text-main); margin-bottom: 2.5rem; line-height: 1.6;">"We
                    filled our entire engineering team with ChinnuAI. The candidate quality was consistently higher than
                    traditional portals."</p>
                <div style="display: flex; align-items: center; gap: 1.25rem;">
                    <div
                        style="width: 55px; height: 55px; border-radius: 50%; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;">
                        RK</div>
                    <div>
                        <div style="font-weight: 800; font-size: 1.1rem;">Rakesh Kumar</div>
                        <div style="font-size: 0.85rem; color: var(--text-dim);">Engineering Head, TechNova</div>
                    </div>
                </div>
            </div>

            <div class="glass-card-p reveal" style="padding: 3rem; transition-delay: 0.1s;">
                <div class="stars" style="margin-bottom: 2rem;">★★★★★</div>
                <p style="font-size: 1.15rem; color: var(--text-main); margin-bottom: 2.5rem; line-height: 1.6;">"The
                    instant screening on WhatsApp is a game-changer. It's like having a 24/7 dedicated recruitment
                    agency."</p>
                <div style="display: flex; align-items: center; gap: 1.25rem;">
                    <div
                        style="width: 55px; height: 55px; border-radius: 50%; background: #34B7F1; color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;">
                        AM</div>
                    <div>
                        <div style="font-weight: 800; font-size: 1.1rem;">Arjun Mehta</div>
                        <div style="font-size: 0.85rem; color: var(--text-dim);">Founder, GreenBuild</div>
                    </div>
                </div>
            </div>

            <div class="glass-card-p reveal" style="padding: 3rem; transition-delay: 0.2s;">
                <div class="stars" style="margin-bottom: 2rem;">★★★★★</div>
                <p style="font-size: 1.15rem; color: var(--text-main); margin-bottom: 2.5rem; line-height: 1.6;">"The
                    ROI is incredible. We saved thousands on recruitment fees in just the first month of using
                    ChinnuAI."</p>
                <div style="display: flex; align-items: center; gap: 1.25rem;">
                    <div
                        style="width: 55px; height: 55px; border-radius: 50%; background: #c4b5fd; color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;">
                        SP</div>
                    <div>
                        <div style="font-weight: 800; font-size: 1.1rem;">Sneha Patel</div>
                        <div style="font-size: 0.85rem; color: var(--text-dim);">Talent Acquisition, CloudNet</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ PRICING ═══ -->
<section id="pricing" class="container" style="padding: 7rem 0;">
    <div class="section-header reveal">
        <div class="overline">Investment</div>
        <h2>Scale your team without <span class="gradient-text">breaking the bank.</span></h2>
        <p>Simple, context-first pricing designed for growth.</p>
    </div>

    <div
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 3rem; margin-top: 5rem; max-width: 1000px; margin-left: auto; margin-right: auto;">
        <div class="glass-card-p reveal"
            style="padding: 4rem 3rem; text-align: center; display: flex; flex-direction: column;">
            <div
                style="font-weight: 800; color: var(--primary); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2rem;">
                Discovery Phase</div>
            <div style="margin-bottom: 2.5rem;">
                <span style="font-size: 3.5rem; font-weight: 800; color: var(--primary-dark);">₹0</span>
                <span style="color: var(--text-dim);">/ 30 days</span>
            </div>
            <ul
                style="list-style: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; flex: 1;">
                <li style="font-size: 0.95rem; color: var(--text-dark-dim);">✅ 30-Day Full Access</li>
                <li style="font-size: 0.95rem; color: var(--text-dark-dim);">✅ Up to 3 Active Job Posts</li>
                <li style="font-size: 0.95rem; color: var(--text-dark-dim);">✅ AI Candidate Matching</li>
            </ul>
            <a href="/register" class="btn-hero-outline" style="width: 100%; border-color: rgba(0,0,0,0.05);">Start Free
                Trial</a>
        </div>

        <div class="glass-card-p reveal"
            style="padding: 4rem 3rem; text-align: center; display: flex; flex-direction: column; background: rgba(37,211,102,0.03); border-color: rgba(0,0,0,0.05);">
            <div
                style="font-weight: 800; color: var(--primary-hover); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2rem;">
                Founder's Edge</div>
            <div style="margin-bottom: 2.5rem;">
                <span
                    style="font-size: 3.5rem; font-weight: 800; background: linear-gradient(135deg, #25D366, #128C7E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">₹99</span>
                <span style="color: var(--text-dim);">/ month</span>
            </div>
            <ul
                style="list-style: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; flex: 1;">
                <li style="font-size: 0.95rem; font-weight: 600;">✅ Unlimited Job Listings</li>
                <li style="font-size: 0.95rem; font-weight: 600;">✅ Deep Semantic AI Engine</li>
                <li style="font-size: 0.95rem; font-weight: 600;">✅ Instant WhatsApp Alerts</li>
            </ul>
            <a href="/register" class="btn-hero-primary" style="width: 100%;">Get Unlimited Access</a>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ CTA ══ -->
<section class="container" style="padding: 4rem 0 6rem;">
    <div class="glass-card-p reveal"
        style="background: linear-gradient(135deg, #075E54, #128C7E); padding: 8rem 4rem; text-align: center; color: white; border: none; border-radius: 48px; box-shadow: 0 40px 100px -20px rgba(37,211,102,0.3); position: relative; overflow: hidden;">
        <!-- Background Decor -->
        <div
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); pointer-events: none;">
        </div>

        <h2
            style="font-size: 4rem; color: white; margin-bottom: 2rem; letter-spacing: -2px; position: relative; z-index: 1;">
            Scale your team with <span style="color: #25D366;">AI Precision.</span></h2>
        <p
            style="color: rgba(255,255,255,0.8); font-size: 1.4rem; margin-bottom: 4.5rem; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1;">
            Join 580+ elite companies already automating their talent pipeline with India's most advanced AI.</p>
        <div class="hero-actions" style="gap: 2rem; position: relative; z-index: 1;">
            <a href="/register" class="btn-hero-primary"
                style="background: #25D366; color: white; padding: 1.5rem 4rem; font-size: 1.2rem; box-shadow: 0 20px 50px rgba(0,0,0,0.3);">Get
                Started for Free &rarr;</a>
            <a href="https://wa.me/your_number" class="btn-hero-outline"
                style="border-color: rgba(255,255,255,0.3); color: white; padding: 1.5rem 3rem; font-size: 1.2rem;">Chat
                with Chinnu</a>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════ FAQ ═══ -->
<section class="container" style="padding: 6rem 0 10rem;">
    <div class="section-header reveal">
        <div class="overline">Common Questions</div>
        <h2>Everything you <span class="gradient-text">need to know</span></h2>
    </div>

    <div class="faq-list"
        style="max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem;">
        <div class="faq-item reveal">
            <button class="faq-trigger glass-card-p"
                style="width: 100%; text-align: left; padding: 1.75rem 2.5rem; border-radius: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-color: rgba(0,0,0,0.05); cursor: pointer; transition: all 0.3s ease;">
                How does ChinnuAI find candidates?
                <span class="faq-arrow">▾</span>
            </button>
            <div class="faq-body"
                style="padding: 0 2.5rem; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7;">
                <p>ChinnuAI is natively integrated with WhatsApp, allowing it to tap into a massive pool of 15,000+
                    vetted job seekers. Our LLM-powered engine evaluates technical depth, cultural fit, and soft skills
                    through autonomous chat-based screening before they even hit your dashboard.</p>
            </div>
        </div>

        <div class="faq-item reveal">
            <button class="faq-trigger glass-card-p"
                style="width: 100%; text-align: left; padding: 1.75rem 2.5rem; border-radius: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-color: rgba(0,0,0,0.05); cursor: pointer; transition: all 0.3s ease;">
                Is it really only ₹99/month?
                <span class="faq-arrow">▾</span>
            </button>
            <div class="faq-body"
                style="padding: 0 2.5rem; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7;">
                <p>Absolutely. Our Founder's Plan is designed to democratize high-end AI recruitment for early-stage
                    teams. It covers unlimited job posts and unlimited AI-driven screenings with no hidden "per-hire"
                    fees.</p>
            </div>
        </div>

        <div class="faq-item reveal">
            <button class="faq-trigger glass-card-p"
                style="width: 100%; text-align: left; padding: 1.75rem 2.5rem; border-radius: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-color: rgba(0,0,0,0.05); cursor: pointer; transition: all 0.3s ease;">
                How secure is our company data?
                <span class="faq-arrow">▾</span>
            </button>
            <div class="faq-body"
                style="padding: 0 2.5rem; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7;">
                <p>We use enterprise-grade AES-256 encryption for all data at rest and TLS 1.3 for data in transit. Your
                    specific hiring criteria and job data are isolated and never used to train global models that could
                    leak competitive advantages.</p>
            </div>
        </div>

        <div class="faq-item reveal">
            <button class="faq-trigger glass-card-p"
                style="width: 100%; text-align: left; padding: 1.75rem 2.5rem; border-radius: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-color: rgba(0,0,0,0.05); cursor: pointer; transition: all 0.3s ease;">
                Do I need any technical setup?
                <span class="faq-arrow">▾</span>
            </button>
            <div class="faq-body"
                style="padding: 0 2.5rem; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7;">
                <p>Zero. ChinnuAI is a "Plug-and-Play" solution. You can sign up, post your first job, and start
                    receiving verified WhatsApp candidates in under 5 minutes. No integration with existing ATS is
                    required, though we support webhook exports for Pro users.</p>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // ── FAQ accordion (Local to index) ─────────────────────
        document.querySelectorAll('.faq-trigger').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                const item = btn.closest('.faq-item');
                const isOpen = item.classList.contains('open');

                // Close others
                document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));

                // Toggle current
                if (!isOpen) {
                    item.classList.add('open');
                }
            });
        });
    });
</script>
{% endblock %}