<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mietubl Marketing System</title>
    <style>
        :root {
            --primary: #2c3e50;
            --accent: #3498db;
        }
        body {
            margin: 0;
            font-family: system-ui, -apple-system, sans-serif;
            background: #f8f9fa;
        }
        nav {
            padding: 1rem 5vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        main {
            padding: 2rem 5vw;
        }
        .grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            margin-top: 3rem;
        }
        .card {
            background: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        }
        h2, h3 { color: var(--primary); }
        .nav-links a {
            color: var(--accent);
            text-decoration: none;
            margin-left: 1.5rem;
            font-weight: 500;
        }
        .icon {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>
<nav>
    <h2>Mietubl Marketing System</h2>
    <div class="nav-links">
        <a href="/dist">Login</a>
        <a href="privacy_policy.html" target="_blank">Privacy</a>
    </div>
</nav>

<main>
    <div class="grid">
        <div class="card">
            <div class="icon">📈</div>
            <h3>Analytics</h3>
            <p>Real-time in-depth data analysis.</p>
        </div>

        <div class="card">
            <div class="icon">🎯</div>
            <h3>AI Content</h3>
            <p>Generate marketing materials with AI.</p>
        </div>

        <div class="card">
            <div class="icon">🛠️</div>
            <h3>Platform</h3>
            <p>Unified advertising across all channels and social media platforms.</p>
        </div>
    </div>
</main>
</body>
</html>
