<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products & Services | GhostVeil Intel</title>

    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            AOS.init({ duration: 1000 });

            const toggleBtn = document.getElementById('themeToggle');
            toggleBtn.addEventListener('click', () => {
                document.body.classList.toggle('light-mode');
                toggleBtn.textContent = document.body.classList.contains('light-mode') ? 'Switch to Dark Mode' : 'Switch to Light Mode';
            });
        });
    </script>

    <style>
        body {
            margin: 0;
            font-family: 'Poppins', Arial, sans-serif;
            background: linear-gradient(135deg, #101010, #3a3a3a);
            color: #f0f0f0;
            transition: background 0.5s, color 0.5s;
        }

        body.light-mode {
            background: linear-gradient(135deg, #f5f5f5, #ffffff);
            color: #000;
        }

        nav {
            background-color: rgba(0, 0, 0, 0.85);
            padding: 15px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        nav a {
            margin: 0 12px;
            color: #D8B4FF;
            text-decoration: none;
            font-weight: bold;
            padding: 10px 5px;
        }

        body.light-mode nav a {
            color: #4B0082;
        }

        nav a:hover {
            color: #D4AF37;
            border-bottom: 2px solid #D4AF37;
        }

        #themeToggle, .btn, button, input[type="submit"] {
            margin-left: 15px;
            padding: 10px 20px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            background: linear-gradient(90deg, #D4AF37, #8A2BE2);
            color: white;
            font-weight: bold;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        #themeToggle:hover, .btn:hover, button:hover, input[type="submit"]:hover {
            transform: scale(1.08);
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
        }

        .hero-banner {
            padding: 160px 20px;
            text-align: center;
            background: radial-gradient(circle, rgba(30, 30, 30, 0.9), rgba(10, 10, 10, 1));
        }

        body.light-mode .hero-banner {
            background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 1));
        }

        .hero-banner h1, .hero-banner p {
            color: #D4AF37;
        }

        body.light-mode .hero-banner h1, 
        body.light-mode .hero-banner p {
            color: #4B0082;
        }

        .hero-banner h1 {
            font-size: 3.8rem;
            margin-bottom: 25px;
        }

        .hero-banner p {
            font-size: 1.7rem;
            margin-bottom: 40px;
        }

        .hero-banner img, 
        main img {
            width: 100%;
            height: auto;
            max-width: 600px;
            display: block;
            margin: 0 auto;
        }

        main {
            padding: 40px 20px;
        }

        section.closing-statement {
            text-align: center;
            padding: 80px 30px;
        }

        section.closing-statement h2 {
            font-size: 3rem;
            color: #D4AF37;
        }

        body.light-mode section.closing-statement h2 {
            color: #4B0082;
        }

        section.closing-statement p {
            font-size: 1.6rem;
            margin-top: 30px;
            line-height: 2;
        }

        footer {
            background-color: rgba(0, 0, 0, 0.92);
            padding: 50px 20px;
            color: #ccc;
            text-align: center;
        }

        body.light-mode footer {
            background-color: rgba(255, 255, 255, 0.95);
            color: #333;
        }

        .social-icons a {
            margin: 0 15px;
            font-size: 2.5rem;
            transition: transform 0.3s;
        }

        .social-icons a:hover {
            transform: scale(1.25);
        }

        input[type="submit"] {
            width: 100%;
            max-width: 250px;
            display: block;
            margin: 20px auto 0;
        }

        @media (max-width: 600px) {
            .hero-banner {
                padding: 100px 10px;
            }
            .hero-banner h1 { font-size: 2.5rem; }
            .hero-banner p { font-size: 1.2rem; }
            main img {
                max-width: 90%;
            }
        }
    </style>
</head>

<body>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="products.html">Products & Services</a>
        <a href="contact.html">Contact</a>
        <a href="legal.html">Legal</a>
        <a href="payment-options.html">Payment Options</a>
        <button id="themeToggle">Switch to Light Mode</button>
    </nav>

    <main>
        <section class="hero-banner" data-aos="fade-up">
            <h1>Our Products & Services</h1>
            <p>Advanced cybersecurity solutions designed for the quantum and AI-driven era. Defend. Predict. Dominate.</p>
            <img src="/images/ghostveil-logo.png" alt="GhostVeil Logo">
            <a href="contact.html" class="btn">Request Consultation</a>
            <br><br>
            <a href="payment-options.html" class="btn">View Payment Options</a>
        </section>

        <section class="closing-statement" data-aos="zoom-in">
            <h2>Why Choose GhostVeil Intel?</h2>
            <p>We are at the forefront of quantum-AI security evolution. Protecting today and preparing for tomorrow’s cyber warfare. Porque la seguridad del futuro no espera. Will you lead or follow?</p>
        </section>
    </main>

    <footer>
        <p><i class="fas fa-flag-usa" style="color:#b22234;"></i> Proudly veteran-owned. Verified veterans, law enforcement, and first responders receive discounts. Crypto <i class="fab fa-bitcoin" style="color:#f7931a;"></i> and precious metals <i class="fas fa-coins" style="color:#d4af37;"></i> accepted with live spot rates.</p>
        <div class="social-icons">
            <a href="https://www.facebook.com/profile.php?id=61574684000372" target="_blank" aria-label="Facebook" class="fab fa-facebook-f"></a>
            <a href="https://www.instagram.com/ghostveilintel/" target="_blank" aria-label="Instagram" class="fab fa-instagram"></a>
            <a href="https://www.linkedin.com/company/ghostveil-llc/about/" target="_blank" aria-label="LinkedIn" class="fab fa-linkedin-in"></a>
        </div>
        <p>&copy; 2025 GhostVeil Intel. All rights reserved.</p>
    </footer>
</body>

</html>
