<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VedSAAS | The Artificial Civilization</title>

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">

    <!-- Theme Color -->
    <meta name="theme-color" content="#00f0ff">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#030304">
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">

    <!-- iOS Meta Tags -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="VedSAAS">
    <link rel="apple-touch-icon" href="/public/icons/apple-touch-icon.png">

    <!-- MS Tiles -->
    <meta name="msapplication-TileColor" content="#030304">
    <meta name="msapplication-TileImage" content="/public/icons/icon-512x512.png">

    <!-- SEO -->
    <meta name="description"
        content="India's First AI Platform supporting 22+ Indian languages with deep cultural understanding">
    <meta name="keywords" content="AI, Indian languages, VedSAAS, chatbot, Hindi AI, multilingual AI">

    <!-- Open Graph / Social Sharing -->
    <meta property="og:title" content="VedSAAS | The Artificial Civilization">
    <meta property="og:description"
        content="India's First AI Platform supporting 22+ Indian languages with deep cultural understanding.">
    <meta property="og:image" content="https://vedsaas.com/public/icons/icon-512x512.png">
    <meta property="og:url" content="https://vedsaas.com">
    <meta property="og:type" content="website">

    <link rel="stylesheet" href="public/css/civilization.css">
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@500&display=swap"
        rel="stylesheet">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>

<body>

    <!-- Navbar (Loaded Dynamically) -->
    <div id="navbar-placeholder"></div>

    <!-- Hero Section -->
    <header class="container"
        style="min-height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 80px;">

        <!-- Status Badge -->
        <div data-aos="fade-down" style="margin-bottom: 24px;">
            <span class="ticker-pill" style="display: inline-flex;">
                <span class="status-dot"></span> System Online
            </span>
        </div>

        <h1 data-aos="fade-up" data-aos-delay="100"
            style="font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; font-weight: 800; max-width: 800px; margin-bottom: 8px;">
            VedSAAS
        </h1>
        <p data-aos="fade-up" data-aos-delay="200"
            style="color: var(--text-secondary); margin-bottom: 24px; font-size: 1.1rem;">
            by Shashwatam Eco-Chic Creations LLP
        </p>
        <h2 data-aos="fade-up" data-aos-delay="300"
            style="font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.2; font-weight: 700; max-width: 800px; margin-bottom: 24px;">
            An Artificial <span class="text-gradient">Civilization.</span>
        </h2>

        <!-- The 2030 Brain Canvas -->
        <div data-aos="zoom-in" data-aos-delay="400"
            style="width: 300px; height: 300px; position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto 40px;">
            <canvas id="brain-canvas" width="300" height="300"></canvas>
            <div
                style="position: absolute; color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.8rem; bottom: -30px;">
                MODES ACTIVE: 18,492
            </div>
        </div>

        <div data-aos="fade-up" data-aos-delay="500"
            style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
            <a href="chat/" class="btn btn-primary">Start Conversation</a>
            <a href="#stats" class="btn btn-ghost">View Ecosystem</a>
        </div>
    </header>

    <!-- Modes Ticker -->
    <section class="ticker-container" data-aos="fade-in">
        <div class="ticker-track">
            <!-- 20 Items for Loop -->
            <div class="ticker-pill"><span class="status-dot"></span> Hindi-Vani</div>
            <div class="ticker-pill"><span class="status-dot"></span> Tamil-Pulavar</div>
            <div class="ticker-pill"><span class="status-dot" style="background:var(--accent-purple)"></span> VedaLogic
            </div>
            <div class="ticker-pill"><span class="status-dot"></span> Math-Rishi</div>
            <div class="ticker-pill"><span class="status-dot" style="background:#ff3b30"></span> Fortress Mode</div>
            <div class="ticker-pill"><span class="status-dot"></span> Kisan-Agri</div>
            <div class="ticker-pill"><span class="status-dot"></span> Ghost Protocol</div>
            <div class="ticker-pill"><span class="status-dot"></span> Dream State</div>
            <div class="ticker-pill"><span class="status-dot"></span> Softchip Driver</div>
            <div class="ticker-pill"><span class="status-dot"></span> Code-Healer</div>
            <!-- Dupes for scroll -->
            <div class="ticker-pill"><span class="status-dot"></span> Hindi-Vani</div>
            <div class="ticker-pill"><span class="status-dot"></span> Tamil-Pulavar</div>
            <div class="ticker-pill"><span class="status-dot" style="background:var(--accent-purple)"></span> VedaLogic
            </div>
            <div class="ticker-pill"><span class="status-dot"></span> Math-Rishi</div>
            <div class="ticker-pill"><span class="status-dot" style="background:#ff3b30"></span> Fortress Mode</div>
            <div class="ticker-pill"><span class="status-dot"></span> Kisan-Agri</div>
            <div class="ticker-pill"><span class="status-dot"></span> Ghost Protocol</div>
            <div class="ticker-pill"><span class="status-dot"></span> Dream State</div>
            <div class="ticker-pill"><span class="status-dot"></span> Softchip Driver</div>
            <div class="ticker-pill"><span class="status-dot"></span> Code-Healer</div>
        </div>
    </section>

    <!-- Stats Section -->
    <section id="stats" class="container" style="padding: 100px 24px;">
        <div class="grid-3">
            <div class="grid-3">
                <div class="card-glass stat-item" data-aos="zoom-in" data-aos-delay="0">
                    <div class="stat-num" id="stat-epoch">0</div>
                    <div class="stat-label">Current Epoch</div>
                </div>
                <div class="card-glass stat-item" data-aos="zoom-in" data-aos-delay="100">
                    <div class="stat-num" id="stat-loss">0.00</div>
                    <div class="stat-label">Training Loss</div>
                </div>
                <div class="card-glass stat-item" data-aos="zoom-in" data-aos-delay="200">
                    <div class="stat-num" id="stat-speed">0</div>
                    <div class="stat-label">Tokens / Sec</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="container" style="padding: 100px 24px;">
        <div style="text-align: center; margin-bottom: 60px;" data-aos="fade-up">
            <h2 style="font-size: 2.5rem; margin-bottom: 16px;">Powered by Ancient Wisdom</h2>
            <p style="color: var(--text-secondary); font-size: 1.1rem;">India's First AI in 22+ Languages</p>
        </div>

        <div class="grid-3" style="gap: 32px;">
            <div class="card-glass" style="padding: 32px;" data-aos="fade-up" data-aos-delay="0">
                <div style="font-size: 2.5rem; margin-bottom: 16px;">🗣️</div>
                <h3 style="margin-bottom: 12px;">Hindi-Vani</h3>
                <p style="color: var(--text-secondary);">Natural conversations in Hindi with cultural context and idioms
                </p>
            </div>
            <div class="card-glass" style="padding: 32px;" data-aos="fade-up" data-aos-delay="100">
                <div style="font-size: 2.5rem; margin-bottom: 16px;">📚</div>
                <h3 style="margin-bottom: 12px;">VedaLogic</h3>
                <p style="color: var(--text-secondary);">Ancient wisdom meets modern reasoning for deep insights</p>
            </div>
            <div class="card-glass" style="padding: 32px;" data-aos="fade-up" data-aos-delay="200">
                <div style="font-size: 2.5rem; margin-bottom: 16px;">🧮</div>
                <h3 style="margin-bottom: 12px;">Math-Rishi</h3>
                <p style="color: var(--text-secondary);">Advanced mathematical problem solving with step-by-step
                    explanations</p>
            </div>
        </div>

        <div style="margin-top: 60px; text-align: center;">
            <div class="grid-3" style="gap: 24px;">
                <div data-aos="fade-in" data-aos-delay="300">
                    <div style="font-size: 2rem; font-weight: 700; color: var(--accent-cyan);">22+</div>
                    <div style="color: var(--text-secondary);">Indian Languages</div>
                </div>
                <div data-aos="fade-in" data-aos-delay="400">
                    <div style="font-size: 2rem; font-weight: 700; color: var(--accent-cyan);">14k</div>
                    <div style="color: var(--text-secondary);">Tokens/Second</div>
                </div>
                <div data-aos="fade-in" data-aos-delay="500">
                    <div style="font-size: 2rem; font-weight: 700; color: var(--accent-cyan);">99.9%</div>
                    <div style="color: var(--text-secondary);">Uptime</div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section id="how-it-works" class="container"
        style="padding: 100px 24px; background: var(--bg-card); border-radius: 24px; margin-bottom: 100px;">
        <div style="text-align: center; margin-bottom: 60px;" data-aos="fade-up">
            <h2 style="font-size: 2.5rem; margin-bottom: 16px;">How It Works</h2>
            <p style="color: var(--text-secondary); font-size: 1.1rem;">Get started in 3 simple steps</p>
        </div>

        <div class="grid-3" style="gap: 40px;">
            <div style="text-align: center;" data-aos="fade-right" data-aos-delay="0">
                <div
                    style="width: 60px; height: 60px; background: var(--accent-cyan); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto 20px;">
                    1</div>
                <h3 style="margin-bottom: 12px;">Sign Up</h3>
                <p style="color: var(--text-secondary);">Create your free account in seconds. No credit card required.
                </p>
            </div>
            <div style="text-align: center;" data-aos="fade-right" data-aos-delay="100">
                <div
                    style="width: 60px; height: 60px; background: var(--accent-cyan); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto 20px;">
                    2</div>
                <h3 style="margin-bottom: 12px;">Choose Your Mode</h3>
                <p style="color: var(--text-secondary);">Select from 57 specialized AI modes tailored to your needs.</p>
            </div>
            <div style="text-align: center;" data-aos="fade-right" data-aos-delay="200">
                <div
                    style="width: 60px; height: 60px; background: var(--accent-cyan); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto 20px;">
                    3</div>
                <h3 style="margin-bottom: 12px;">Start Learning</h3>
                <p style="color: var(--text-secondary);">Ask anything and get instant, intelligent responses.</p>
            </div>
        </div>
    </section>

    <!-- Pricing -->
    <section id="pricing" class="container" style="padding: 100px 24px;">
        <div style="text-align: center; margin-bottom: 60px;" data-aos="fade-up">
            <h2 style="font-size: 2.5rem; margin-bottom: 16px;">Simple, Transparent Pricing</h2>
            <p style="color: var(--text-secondary); font-size: 1.1rem;">Choose the plan that fits your needs</p>
        </div>

        <div class="grid-3" style="gap: 32px;">
            <!-- Free Plan -->
            <div class="card-glass" style="padding: 40px; text-align: center;" data-aos="flip-left" data-aos-delay="0">
                <h3 style="font-size: 1.5rem; margin-bottom: 8px;">Free</h3>
                <div style="font-size: 3rem; font-weight: 800; margin: 20px 0;">₹0</div>
                <p style="color: var(--text-secondary); margin-bottom: 32px;">Perfect for getting started</p>
                <ul style="text-align: left; list-style: none; padding: 0; margin-bottom: 32px;">
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ 100 messages/day</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ Basic AI modes</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ Community support</li>
                    <li style="padding: 8px 0;">✓ 5 languages</li>
                </ul>
                <a href="register.html" class="btn btn-secondary" style="width: 100%;">Get Started</a>
            </div>

            <!-- Pro Plan -->
            <div class="card-glass"
                style="padding: 40px; text-align: center; border: 2px solid var(--accent-cyan); position: relative;"
                data-aos="flip-left" data-aos-delay="100">
                <div
                    style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent-cyan); color: #000; padding: 4px 16px; border-radius: 99px; font-size: 0.85rem; font-weight: 600;">
                    POPULAR</div>
                <h3 style="font-size: 1.5rem; margin-bottom: 8px;">Pro</h3>
                <div style="font-size: 3rem; font-weight: 800; margin: 20px 0;">₹499<span
                        style="font-size: 1rem; font-weight: 400;">/mo</span></div>
                <p style="color: var(--text-secondary); margin-bottom: 32px;">For power users</p>
                <ul style="text-align: left; list-style: none; padding: 0; margin-bottom: 32px;">
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ Unlimited messages</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ All 57 AI modes</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ Priority support</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ 22+ languages</li>
                    <li style="padding: 8px 0;">✓ Voice input</li>
                </ul>
                <a href="register.html" class="btn btn-primary" style="width: 100%;">Start Free Trial</a>
            </div>

            <!-- Enterprise Plan -->
            <div class="card-glass" style="padding: 40px; text-align: center;" data-aos="flip-left"
                data-aos-delay="200">
                <h3 style="font-size: 1.5rem; margin-bottom: 8px;">Enterprise</h3>
                <div style="font-size: 3rem; font-weight: 800; margin: 20px 0;">Custom</div>
                <p style="color: var(--text-secondary); margin-bottom: 32px;">For organizations</p>
                <ul style="text-align: left; list-style: none; padding: 0; margin-bottom: 32px;">
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ Everything in Pro</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ Custom AI modes</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ Dedicated support</li>
                    <li style="padding: 8px 0; border-bottom: 1px solid var(--border-subtle);">✓ API access</li>
                    <li style="padding: 8px 0;">✓ SLA guarantee</li>
                </ul>
                <a href="mailto:contact@vedsaas.com" class="btn btn-secondary" style="width: 100%;">Contact Sales</a>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section id="testimonials" class="container"
        style="padding: 100px 24px; background: var(--bg-card); border-radius: 24px; margin-bottom: 100px;">
        <div style="text-align: center; margin-bottom: 60px;">
            <h2 style="font-size: 2.5rem; margin-bottom: 16px;">Trusted by Thousands</h2>
            <p style="color: var(--text-secondary); font-size: 1.1rem;">12,000+ users across India</p>
        </div>

        <div class="grid-3" style="gap: 32px;">
            <div class="card-glass" style="padding: 32px;">
                <div style="margin-bottom: 16px;">⭐⭐⭐⭐⭐</div>
                <p style="margin-bottom: 20px; font-style: italic;">"VedSAAS ने मेरी हिंदी में बात करने की समस्या को हल
                    कर दिया। बहुत बढ़िया!"</p>
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div
                        style="width: 40px; height: 40px; border-radius: 50%; background: var(--accent-cyan); display: flex; align-items: center; justify-content: center; color: #000; font-weight: 700;">
                        R</div>
                    <div>
                        <div style="font-weight: 600;">Rajesh Kumar</div>
                        <div style="font-size: 0.85rem; color: var(--text-secondary);">Student, Delhi</div>
                    </div>
                </div>
            </div>

            <div class="card-glass" style="padding: 32px;">
                <div style="margin-bottom: 16px;">⭐⭐⭐⭐⭐</div>
                <p style="margin-bottom: 20px; font-style: italic;">"The Math-Rishi mode helped me ace my engineering
                    exams. Incredible explanations!"</p>
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div
                        style="width: 40px; height: 40px; border-radius: 50%; background: var(--accent-cyan); display: flex; align-items: center; justify-content: center; color: #000; font-weight: 700;">
                        P</div>
                    <div>
                        <div style="font-weight: 600;">Priya Sharma</div>
                        <div style="font-size: 0.85rem; color: var(--text-secondary);">Engineer, Bangalore</div>
                    </div>
                </div>
            </div>

            <div class="card-glass" style="padding: 32px;">
                <div style="margin-bottom: 16px;">⭐⭐⭐⭐⭐</div>
                <p style="margin-bottom: 20px; font-style: italic;">"Finally, an AI that understands Indian context and
                    culture. Game changer!"</p>
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div
                        style="width: 40px; height: 40px; border-radius: 50%; background: var(--accent-cyan); display: flex; align-items: center; justify-content: center; color: #000; font-weight: 700;">
                        A</div>
                    <div>
                        <div style="font-weight: 600;">Amit Patel</div>
                        <div style="font-size: 0.85rem; color: var(--text-secondary);">Entrepreneur, Mumbai</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section id="faq" class="container" style="padding: 100px 24px;">
        <div style="text-align: center; margin-bottom: 60px;">
            <h2 style="font-size: 2.5rem; margin-bottom: 16px;">Frequently Asked Questions</h2>
            <p style="color: var(--text-secondary); font-size: 1.1rem;">Everything you need to know</p>
        </div>

        <div style="max-width: 800px; margin: 0 auto;">
            <div class="card-glass" style="padding: 24px; margin-bottom: 16px;">
                <h3 style="margin-bottom: 12px;">What makes VedSAAS different?</h3>
                <p style="color: var(--text-secondary);">VedSAAS is India's first AI trained on Indian languages,
                    culture, and context. We support 22+ Indian languages and understand local idioms, references, and
                    cultural nuances.</p>
            </div>

            <div class="card-glass" style="padding: 24px; margin-bottom: 16px;">
                <h3 style="margin-bottom: 12px;">Is my data secure?</h3>
                <p style="color: var(--text-secondary);">Absolutely. We use end-to-end encryption and never share your
                    data with third parties. Your conversations are private and secure.</p>
            </div>

            <div class="card-glass" style="padding: 24px; margin-bottom: 16px;">
                <h3 style="margin-bottom: 12px;">Can I cancel anytime?</h3>
                <p style="color: var(--text-secondary);">Yes! You can cancel your subscription at any time. No questions
                    asked, no hidden fees.</p>
            </div>

            <div class="card-glass" style="padding: 24px; margin-bottom: 16px;">
                <h3 style="margin-bottom: 12px;">Which languages do you support?</h3>
                <p style="color: var(--text-secondary);">We support 22+ Indian languages including Hindi, Tamil, Telugu,
                    Bengali, Marathi, Gujarati, Kannada, Malayalam, Punjabi, and more.</p>
            </div>

            <div class="card-glass" style="padding: 24px;">
                <h3 style="margin-bottom: 12px;">Do you offer API access?</h3>
                <p style="color: var(--text-secondary);">Yes! API access is available for Enterprise customers. Contact
                    our sales team for more information.</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer style="border-top: 1px solid var(--border-subtle); padding: 80px 24px 40px;">
        <div class="container" style="max-width: 1400px; margin: 0 auto;">
            <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px; margin-bottom: 60px;">
                <!-- Company -->
                <div>
                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px;">
                        <img src="public/image/logopic.png" alt="VedSAAS" style="height: 28px;">
                        <span style="font-weight: 800; font-size: 1.1rem;">VedSAAS</span>
                    </div>
                    <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px;">India's First AI in
                        22+ Languages</p>
                    <p style="color: var(--text-secondary); font-size: 0.85rem;">by Shashwatam Eco-Chic Creations LLP
                    </p>
                </div>

                <!-- Product -->
                <div>
                    <h4 style="margin-bottom: 16px; font-size: 0.9rem; font-weight: 700;">Product</h4>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <a href="#features"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Features</a>
                        <a href="#pricing"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Pricing</a>
                        <a href="chat/"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Chat
                            Interface</a>
                        <a href="admin/dashboard.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Admin
                            Dashboard</a>
                    </div>
                </div>

                <!-- Developers -->
                <div>
                    <h4 style="margin-bottom: 16px; font-size: 0.9rem; font-weight: 700;">Developers</h4>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <a href="subdomains/docs/docs.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Documentation</a>
                        <a href="subdomains/api/api.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">API
                            Reference</a>
                        <a href="subdomains/console/console.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Developer
                            Console</a>
                        <a href="subdomains/wiki/wiki.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Wiki</a>
                    </div>
                </div>

                <!-- Resources -->
                <div>
                    <h4 style="margin-bottom: 16px; font-size: 0.9rem; font-weight: 700;">Resources</h4>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <a href="subdomains/help/help.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Help
                            Center</a>
                        <a href="subdomains/status/status.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">System
                            Status</a>
                        <a href="subdomains/contact/contact.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Contact
                            Us</a>
                        <a href="#faq"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">FAQ</a>
                        <a href="mailto:support@vedsaas.com"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Email
                            Support</a>
                    </div>
                </div>

                <!-- Company -->
                <div>
                    <h4 style="margin-bottom: 16px; font-size: 0.9rem; font-weight: 700;">Company</h4>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <a href="subdomains/careers/careers.html"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Careers</a>
                        <a href="#"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">About
                            Us</a>
                        <a href="#"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Privacy
                            Policy</a>
                        <a href="#"
                            style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Terms
                            of Service</a>
                    </div>
                </div>
            </div>

            <div
                style="text-align: center; padding-top: 40px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.9rem;">
                <p>Made in Bharat 🇮🇳 • VedSAAS Powered by Shashwatam Eco-Chic Creations LLP v4.0 • © 2026</p>
            </div>
        </div>
    </footer>

    <!-- Brain Animation (Inlined for reliability) -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('brain-canvas');
            if (canvas) {
                const ctx = canvas.getContext('2d');
                const body = document.body;
                let points = [];
                for (let i = 0; i < 150; i++) {
                    const theta = Math.acos(2 * Math.random() - 1);
                    const phi = Math.sqrt(150 * Math.PI) * theta;
                    const r = 100;
                    points.push({ x: r * Math.sin(theta) * Math.cos(phi), y: r * Math.sin(theta) * Math.sin(phi), z: r * Math.cos(theta) });
                }

                let rot = 0;
                function animate() {
                    ctx.clearRect(0, 0, 300, 300);
                    const cx = 150, cy = 150;
                    rot += 0.005;

                    const isLight = body.classList.contains('light-mode');
                    const color = isLight ? '#0066cc' : '#00f0ff';

                    points.forEach(p => {
                        let x = p.x * Math.cos(rot) - p.z * Math.sin(rot);
                        let z = p.x * Math.sin(rot) + p.z * Math.cos(rot);
                        let scale = 300 / (300 + z);

                        ctx.fillStyle = color;
                        ctx.globalAlpha = Math.max(0.1, (z + 100) / 200);
                        ctx.beginPath();
                        ctx.arc(cx + x * scale, cy + p.y * scale, 1.5 * scale, 0, Math.PI * 2);
                        ctx.fill();
                    });
                    requestAnimationFrame(animate);
                }
                animate();
            }
        });
    </script>

    <!-- PWA Initialization -->
    <!-- Component Loader -->
    <script src="/public/js/components.js"></script>
    <script src="/pwa-init.js"></script>

    <!-- AOS Animation Init -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });
    </script>

    <!-- Live Stats -->
    <script src="/public/js/live-stats.js"></script>
</body>

</html>