<style>
    footer {
        background: var(--nav-bg);
        border-top: 1px solid var(--border);
        padding: 60px 40px 20px;
        margin-top: 80px;
        color: var(--text-gray);
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 40px;
        margin-bottom: 50px;
    }

    .footer-logo {
        color: var(--primary);
        font-size: 24px;
        font-weight: 900;
        text-decoration: none;
        margin-bottom: 20px;
        display: block;
    }

    .footer-section h4 {
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li { margin-bottom: 12px; }
    .footer-links a {
        color: var(--text-gray);
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
    }
    .footer-links a:hover { color: var(--primary); padding-left: 5px; }

    .social-icons { display: flex; gap: 15px; margin-top: 20px; }
    .social-icons a {
        width: 35px; height: 35px;
        background: #1c2128;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        color: white;
        text-decoration: none;
        transition: 0.3s;
    }
    .social-icons a:hover { background: var(--primary); color: #000; }

    .footer-bottom {
        border-top: 1px solid var(--border);
        padding-top: 20px;
        text-align: center;
        font-size: 12px;
        max-width: 1200px;
        margin: 0 auto;
    }
</style>

<footer>
    <div class="footer-content">
        <div class="footer-section">
            <a href="index.php" class="footer-logo"><?php echo strtoupper(SITE_NAME); ?></a>
            <p style="font-size: 14px; line-height: 1.6;">
                The most secure vault for trading digital assets, skins, and accounts. 
                Built for the community, powered by trust.
            </p>
            <div class="social-icons">
                <a href="#"><i class="fa-brands fa-discord"></i></a>
                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
                <a href="#"><i class="fa-brands fa-instagram"></i></a>
            </div>
        </div>

        <div class="footer-section">
            <h4>Marketplace</h4>
            <ul class="footer-links">
                <li><a href="index.php">Browse All</a></li>
                <li><a href="index.php?cat=1">Accounts</a></li>
                <li><a href="index.php?cat=2">Skins</a></li>
                <li><a href="publish.php">Start Selling</a></li>
            </ul>
        </div>

        <div class="footer-section">
            <h4>Support</h4>
            <ul class="footer-links">
                <li><a href="#">Help Center</a></li>
                <li><a href="#">Trust & Safety</a></li>
                <li><a href="#">Terms of Service</a></li>
                <li><a href="#">Privacy Policy</a></li>
            </ul>
        </div>

        <div class="footer-section">
            <h4>Newsletter</h4>
            <p style="font-size: 13px; margin-bottom: 15px;">Get notified about rare item drops.</p>
            <form style="display: flex; gap: 5px;">
                <input type="email" placeholder="Email" style="flex:1; padding: 10px; background: #090b0f; border: 1px solid var(--border); border-radius: 5px; color: white;">
                <button type="button" style="background: var(--primary); border: none; padding: 0 15px; border-radius: 5px; cursor: pointer;"><i class="fa-solid fa-paper-plane"></i></button>
            </form>
        </div>
    </div>

    <div class="footer-bottom">
        <p>&copy; <?php echo date('Y'); ?> <?php echo SITE_NAME; ?> Vault. Created by Luis Ibarra. All rights reserved.</p>
    </div>
</footer>

</body>
</html>
<?php ob_end_flush(); ?>