<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SyncedUp - Next-Gen Insurance Platform</title>
    <link rel="stylesheet" href="/css/pro.css">
    <style>
        /* Hero gradient background */
        .hero[data-theme="admin"] {
            background: linear-gradient(135deg, #020617 0%, #0F172A 100%);
            position: relative;
        }

        /* Stat boxes with subtle glow */
        .stat {
            box-shadow: 0 0 20px rgba(138, 107, 255, 0.05);
            transition: all 0.3s ease;
        }

        .stat:hover {
            box-shadow: 0 0 30px rgba(138, 107, 255, 0.1);
            transform: translateY(-2px);
        }
    </style>
</head>
<body data-theme="admin">
    <a class="skip-link" href="#main">Skip to content</a>
    
    <!-- SVG Sprite -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
        <symbol id="i-trophy" viewBox="0 0 24 24"><path fill="currentColor" d="M7 4h10v2h3v3a5 5 0 0 1-5 5h-1v2h3v2H7v-2h3v-2H9a5 5 0 0 1-5-5V6h3V4Zm-1 4v1a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V8h-12Z"/></symbol>
        <symbol id="i-chart" viewBox="0 0 24 24"><path fill="currentColor" d="M3 3h2v18H3V3Zm16 8h2v10h-2V11Zm-8 4h2v6h-2v-6Zm4-10h2v16h-2V5Zm-8 8h2v8H7v-8Z"/></symbol>
        <symbol id="i-bolt" viewBox="0 0 24 24"><path fill="currentColor" d="M13 2L3 14h7l-1 8 10-12h-7l1-8Z"/></symbol>
        <symbol id="i-target" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Zm0 4a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4V6Z"/></symbol>
        <symbol id="i-phone" viewBox="0 0 24 24"><path fill="currentColor" d="M6.6 10.8c1.2 2.4 3.2 4.4 5.6 5.6l1.9-1.9a1 1 0 0 1 1-.26c1.1.37 2.3.57 3.5.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.6 21 3 13.4 3 4a1 1 0 0 1 1-1h3.2a1 1 0 0 1 1 1c0 1.2.2 2.4.57 3.5a1 1 0 0 1-.26 1L6.6 10.8Z"/></symbol>
    </svg>
    
    <!-- Floating Orbs -->
    <div class="floating-orb orb-1"></div>
    <div class="floating-orb orb-2"></div>
    
    <nav>
        <div class="nav-container">
            <div class="nav-logo">
                <h2>SyncedUp</h2>
            </div>
            <div class="nav-links">
                <a href="/login">Login</a>
                <a href="/">Home</a>
                <a href="/global-leaderboard-demo">Global Leaderboard</a>
                <a href="/pricing">Pricing</a>
                <a href="/signup" class="nav-cta">Sign Up</a>
            </div>
        </div>
    </nav>

    <!-- Header Brand Stripe -->
    <div class="header-stripe"></div>

    <main id="main">
        <section class="hero" data-theme="admin">
            <div class="container hero-grid">
                <div>
                    <h1 class="hero-title">The Operating System for Insurance Agencies</h1>
                    <p class="hero-sub">
                        Manage commissions, leaderboards, and agents in one place.
                    </p>
                    <div class="hero-actions">
                        <a href="/trial" class="btn btn-primary">Launch My Agency Portal</a>
                        <a href="/demo" class="btn">Watch Demo</a>
                    </div>
                </div>

                <div class="stat-grid" role="list">
                    <div class="stat" role="listitem">
                        <div class="kpi">$10.3M+</div>
                        <div class="label">Premium Managed</div>
                    </div>
                    <div class="stat" role="listitem">
                        <div class="kpi">247</div>
                        <div class="label">Elite Agencies</div>
                    </div>
                    <div class="stat" role="listitem">
                        <div class="kpi">99.97%</div>
                        <div class="label">System Uptime</div>
                    </div>
                    <div class="stat" role="listitem">
                        <div class="kpi">47%</div>
                        <div class="label">Sales Increase</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="features" data-theme="agent">
            <div class="container">
                <h2 class="section-title">Powerful Features</h2>
                <p class="section-sub">Everything you need, delivered with precision</p>

                <div class="feature-grid" style="margin-top:26px">
                    <article class="card">
                        <div class="icon"><svg><use href="#i-trophy"/></svg></div>
                        <h3>Global Leaderboard</h3>
                        <p>Real-time ranking across agencies. Calibrated to drive performance without chaos.</p>
                    </article>

                    <article class="card">
                        <div class="icon"><svg><use href="#i-chart"/></svg></div>
                        <h3>Executive Analytics</h3>
                        <p>Operational truth in one place. Trends, cohorts, and forecasts without spreadsheets.</p>
                    </article>

                    <article class="card">
                        <div class="icon"><svg><use href="#i-bolt"/></svg></div>
                        <h3>Commission Automation</h3>
                        <p>AI-verified payouts and splits so missing dollars never become missing months.</p>
                    </article>
                </div>
            </div>
        </section>

        <section class="cta-section" data-theme="admin">
            <div class="container">
                <div class="cta-glass">
                    <h2>Ready to Transform?</h2>
                    <p>Join the elite agencies already dominating with SyncedUp. No credit card required - see results in your first week.</p>
                    <div class="hero-actions" style="justify-content: center; margin-top: 2rem;">
                        <a href="/trial" class="btn btn-primary">Start Free Trial</a>
                        <a href="/demo" class="btn">Schedule Demo</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div style="text-align: center; color: rgba(255,255,255,0.5);">
            <p>&copy; 2024 SyncedUp. Transforming insurance excellence.</p>
        </div>
    </footer>
</body>
</html>