{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ComplianceShield Pro - Construction compliance management platform for contractors. Track time, manage documents, ensure OSHA compliance.">
    <meta name="keywords" content="construction compliance, OSHA compliance, contractor management, construction software">
    <title>ComplianceShield Pro - Construction Compliance Made Simple</title>
    
    <!-- Favicon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>">
    
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
</head>
<body>

    <nav>
        <a href="#" class="logo">
            <span class="logo-icon">🛡️</span>
            ComplianceShield Pro
        </a>
        <ul class="nav-links">
            <li><a href="#features">Features</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <a href="#" class="nav-cta">Get Started</a>
        <div class="mobile-menu-toggle">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <main>
        <section class="hero">
            <div class="hero-badge">
                <span class="hero-badge-icon">✓</span>
                Trusted by 500+ Contractors
            </div>
            <h1>Construction Compliance,<br>Made Simple.</h1>
            <p class="hero-description">
                The all-in-one platform for construction compliance. Track time, manage documents, and ensure OSHA compliance with ease.
            </p>
            <div class="hero-ctas">
                <a href="#" class="btn-primary">Start Free Trial</a>
                <a href="#" class="btn-secondary">
                    <span class="play-icon">▶</span>
                    Watch Demo
                </a>
            </div>
            <p class="hero-note">No credit card required. Cancel anytime.</p>
        </section>

        <section class="product-preview">
            <!-- The rest of the page content would go here -->
        </section>
    </main>

    <script>
        const nav = document.querySelector('nav');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 20) {
                nav.classList.add('scrolled');
            } else {
                nav.classList.remove('scrolled');
            }
        });
    </script>

</body>
</html>