)

function checkAchievements($userId) {
    global $pdo;
    
    // Get user stats
    $stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
    $stmt->execute([$userId]);
    $user = $stmt->fetch();
    
    if (!$user) return;
    
    // Get user's earned achievements
    $stmt = $pdo->prepare("SELECT achievement_id FROM user_achievements WHERE user_id = ?");
    $stmt->execute([$userId]);
    $earnedIds = array_column($stmt->fetchAll(), 'achievement_id');
    
    // Get all achievements
    $stmt = $pdo->query("SELECT * FROM achievements");
    $achievements = $stmt->fetchAll();
    
    // Check each achievement
    foreach ($achievements as $achievement) {
        // Skip if already earned
        if (in_array($achievement['id'], $earnedIds)) {
            continue;
        }
        
        $earned = false;
        $current = 0;
        
        switch ($achievement['requirement_type']) {
            case 'surfs_completed':
                $stmt = $pdo->prepare("SELECT COUNT(*) as total FROM surf_sessions WHERE user_id = ? AND completed = 1");
                $stmt->execute([$userId]);
                $current = $stmt->fetch()['total'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'level':
                $current = $user['level'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'sites_added':
                $stmt = $pdo->prepare("SELECT COUNT(*) as total FROM sites WHERE user_id = ?");
                $stmt->execute([$userId]);
                $current = $stmt->fetch()['total'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'credits_earned':
                $stmt = $pdo->prepare("SELECT SUM(amount) as total FROM transactions WHERE user_id = ? AND type = 'earn'");
                $stmt->execute([$userId]);
                $current = $stmt->fetch()['total'] ?? 0;
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'login_streak':
                $current = $user['login_streak'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
        }
        
        // Award achievement if earned
        if ($earned) {
            try {
                // Insert achievement
                $stmt = $pdo->prepare("INSERT INTO user_achievements (user_id, achievement_id) VALUES (?, ?)");
                $stmt->execute([$userId, $achievement['id']]);
                
                // Award credits
                if ($achievement['credits_reward'] > 0) {
                    addCredits($userId, $achievement['credits_reward'], 'bonus', 'Achievement: ' . $achievement['name']);
                }
                
                // Store in session for notification
                if (!isset($_SESSION['new_achievements'])) {
                    $_SESSION['new_achievements'] = [];
                }
                $_SESSION['new_achievements'][] = $achievement;
                
            } catch (Exception $e) {
                // Achievement already exists (race condition), ignore
            }
        }
    }
}

function updateLoginStreak($userId) {
    global $pdo;
    
    $stmt = $pdo->prepare("SELECT login_streak, last_streak_date FROM users WHERE id = ?");
    $stmt->execute([$userId]);
    $user = $stmt->fetch();
    
    $today = date('Y-m-d');
    $lastDate = $user['last_streak_date'];
    
    if (!$lastDate) {
        // First login
        $stmt = $pdo->prepare("UPDATE users SET login_streak = 1, last_streak_date = ? WHERE id = ?");
        $stmt->execute([$today, $userId]);
    } elseif ($lastDate == $today) {
        // Already logged in today, do nothing
        return;
    } elseif ($lastDate == date('Y-m-d', strtotime('-1 day'))) {
        // Consecutive day - increment streak
        $newStreak = $user['login_streak'] + 1;
        $stmt = $pdo->prepare("UPDATE users SET login_streak = ?, last_streak_date = ? WHERE id = ?");
        $stmt->execute([$newStreak, $today, $userId]);
        
        // Check streak achievements
        checkAchievements($userId);
    } else {
        // Streak broken - reset to 1
        $stmt = $pdo->prepare("UPDATE users SET login_streak = 1, last_streak_date = ? WHERE id = ?");
        $stmt->execute([$today, $userId]);
    }
}

function getNewAchievementNotifications() {
    if (isset($_SESSION['new_achievements'])) {
        $achievements = $_SESSION['new_achievements'];
        unset($_SESSION['new_achievements']);
        return $achievements;
    }
    return [];
}

function trackAnalyticsEvent($siteId, $userId, $eventType, $duration = 0) {
    global $pdo;
    
    try {
        $stmt = $pdo->prepare("INSERT INTO analytics_events (site_id, user_id, event_type, duration) VALUES (?, ?, ?, ?)");
        $stmt->execute([$siteId, $userId, $eventType, $duration]);
        
        // Update site aggregate stats
        updateSiteAnalytics($siteId);
    } catch (Exception $e) {
        // Log error but don't break the flow
        error_log("Analytics tracking error: " . $e->getMessage());
    }
}

function updateSiteAnalytics($siteId) {
    global $pdo;
    
    // Calculate average duration
    $stmt = $pdo->prepare("SELECT AVG(duration) as avg_duration FROM surf_sessions WHERE site_id = ? AND completed = 1");
    $stmt->execute([$siteId]);
    $avgDuration = $stmt->fetch()['avg_duration'] ?? 0;
    
    // Update site
    $stmt = $pdo->prepare("UPDATE sites SET avg_duration = ? WHERE id = ?");
    $stmt->execute([$avgDuration, $siteId]);
}



// Achievement Helper Functions
// ADD THESE FUNCTIONS TO THE END OF config.php (before the closing ?>)

function checkAchievements($userId) {
    global $pdo;
    
    // Get user stats
    $stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
    $stmt->execute([$userId]);
    $user = $stmt->fetch();
    
    if (!$user) return;
    
    // Get user's earned achievements
    $stmt = $pdo->prepare("SELECT achievement_id FROM user_achievements WHERE user_id = ?");
    $stmt->execute([$userId]);
    $earnedIds = array_column($stmt->fetchAll(), 'achievement_id');
    
    // Get all achievements
    $stmt = $pdo->query("SELECT * FROM achievements");
    $achievements = $stmt->fetchAll();
    
    // Check each achievement
    foreach ($achievements as $achievement) {
        // Skip if already earned
        if (in_array($achievement['id'], $earnedIds)) {
            continue;
        }
        
        $earned = false;
        $current = 0;
        
        switch ($achievement['requirement_type']) {
            case 'surfs_completed':
                $stmt = $pdo->prepare("SELECT COUNT(*) as total FROM surf_sessions WHERE user_id = ? AND completed = 1");
                $stmt->execute([$userId]);
                $current = $stmt->fetch()['total'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'level':
                $current = $user['level'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'sites_added':
                $stmt = $pdo->prepare("SELECT COUNT(*) as total FROM sites WHERE user_id = ?");
                $stmt->execute([$userId]);
                $current = $stmt->fetch()['total'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'credits_earned':
                $stmt = $pdo->prepare("SELECT SUM(amount) as total FROM transactions WHERE user_id = ? AND type = 'earn'");
                $stmt->execute([$userId]);
                $current = $stmt->fetch()['total'] ?? 0;
                $earned = ($current >= $achievement['requirement_value']);
                break;
                
            case 'login_streak':
                $current = $user['login_streak'];
                $earned = ($current >= $achievement['requirement_value']);
                break;
        }
        
        // Award achievement if earned
        if ($earned) {
            try {
                // Insert achievement
                $stmt = $pdo->prepare("INSERT INTO user_achievements (user_id, achievement_id) VALUES (?, ?)");
                $stmt->execute([$userId, $achievement['id']]);
                
                // Award credits
                if ($achievement['credits_reward'] > 0) {
                    addCredits($userId, $achievement['credits_reward'], 'bonus', 'Achievement: ' . $achievement['name']);
                }
                
                // Store in session for notification
                if (!isset($_SESSION['new_achievements'])) {
                    $_SESSION['new_achievements'] = [];
                }
                $_SESSION['new_achievements'][] = $achievement;
                
            } catch (Exception $e) {
                // Achievement already exists (race condition), ignore
            }
        }
    }
}

function updateLoginStreak($userId) {
    global $pdo;
    
    $stmt = $pdo->prepare("SELECT login_streak, last_streak_date FROM users WHERE id = ?");
    $stmt->execute([$userId]);
    $user = $stmt->fetch();
    
    $today = date('Y-m-d');
    $lastDate = $user['last_streak_date'];
    
    if (!$lastDate) {
        // First login
        $stmt = $pdo->prepare("UPDATE users SET login_streak = 1, last_streak_date = ? WHERE id = ?");
        $stmt->execute([$today, $userId]);
    } elseif ($lastDate == $today) {
        // Already logged in today, do nothing
        return;
    } elseif ($lastDate == date('Y-m-d', strtotime('-1 day'))) {
        // Consecutive day - increment streak
        $newStreak = $user['login_streak'] + 1;
        $stmt = $pdo->prepare("UPDATE users SET login_streak = ?, last_streak_date = ? WHERE id = ?");
        $stmt->execute([$newStreak, $today, $userId]);
        
        // Check streak achievements
        checkAchievements($userId);
    } else {
        // Streak broken - reset to 1
        $stmt = $pdo->prepare("UPDATE users SET login_streak = 1, last_streak_date = ? WHERE id = ?");
        $stmt->execute([$today, $userId]);
    }
}

function getNewAchievementNotifications() {
    if (isset($_SESSION['new_achievements'])) {
        $achievements = $_SESSION['new_achievements'];
        unset($_SESSION['new_achievements']);
        return $achievements;
    }
    return [];
}

function trackAnalyticsEvent($siteId, $userId, $eventType, $duration = 0) {
    global $pdo;
    
    try {
        $stmt = $pdo->prepare("INSERT INTO analytics_events (site_id, user_id, event_type, duration) VALUES (?, ?, ?, ?)");
        $stmt->execute([$siteId, $userId, $eventType, $duration]);
        
        // Update site aggregate stats
        updateSiteAnalytics($siteId);
    } catch (Exception $e) {
        // Log error but don't break the flow
        error_log("Analytics tracking error: " . $e->getMessage());
    }
}

function updateSiteAnalytics($siteId) {
    global $pdo;
    
    // Calculate average duration
    $stmt = $pdo->prepare("SELECT AVG(duration) as avg_duration FROM surf_sessions WHERE site_id = ? AND completed = 1");
    $stmt->execute([$siteId]);
    $avgDuration = $stmt->fetch()['avg_duration'] ?? 0;
    
    // Update site
    $stmt = $pdo->prepare("UPDATE sites SET avg_duration = ? WHERE id = ?");
    $stmt->execute([$avgDuration, $siteId]);
}
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrafficQuest - Where Traffic Meets Adventure</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
            background: #fff;
        }
        
        /* Navbar */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 20px 0;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(0,0,0,0.05);
            transition: all 0.3s;
        }
        
        .navbar.scrolled {
            padding: 15px 0;
            box-shadow: 0 2px 30px rgba(0,0,0,0.1);
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
            text-decoration: none;
        }
        
        .logo-icon {
            font-size: 32px;
        }
        
        .nav-links {
            display: flex;
            gap: 40px;
            align-items: center;
        }
        
        .nav-links a {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #667eea;
        }
        
        .btn-nav {
            padding: 10px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .btn-nav:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        
        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
            padding-top: 80px;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }
        
        .hero-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 30px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .hero-content h1 {
            font-size: 56px;
            color: white;
            margin-bottom: 20px;
            line-height: 1.2;
            font-weight: 800;
        }
        
        .gradient-text {
            background: linear-gradient(to right, #fff, #f0f0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-content p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 35px;
            line-height: 1.6;
        }
        
        .cta-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .btn-primary {
            padding: 16px 40px;
            background: white;
            color: #667eea;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.25);
        }
        
        .btn-secondary {
            padding: 16px 40px;
            background: transparent;
            color: white;
            border: 2px solid white;
            border-radius: 30px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
        }
        
        .btn-secondary:hover {
            background: white;
            color: #667eea;
        }
        
        .hero-visual {
            position: relative;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            padding: 30px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.2);
        }
        
        .stat-icon {
            font-size: 36px;
            margin-bottom: 15px;
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: white;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
        
        /* Features Section */
        .features {
            padding: 120px 30px;
            background: #fff;
        }
        
        .features-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 80px;
        }
        
        .section-label {
            color: #667eea;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 15px;
        }
        
        .section-title {
            font-size: 42px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 800;
        }
        
        .section-subtitle {
            font-size: 18px;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }
        
        .feature-card {
            padding: 40px;
            background: #fff;
            border-radius: 20px;
            transition: all 0.3s;
            border: 2px solid #f0f0f0;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.08);
            border-color: #667eea;
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 25px;
        }
        
        .feature-card h3 {
            font-size: 22px;
            color: #333;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.7;
            font-size: 15px;
        }
        
        /* How It Works */
        .how-it-works {
            padding: 120px 30px;
            background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
        }
        
        .steps-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 60px;
            margin-top: 60px;
        }
        
        .step {
            text-align: center;
            position: relative;
        }
        
        .step-number {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: bold;
            color: white;
            margin: 0 auto 30px;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }
        
        .step h3 {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .step p {
            color: #666;
            line-height: 1.7;
        }
        
        /* Pricing Section */
        .pricing {
            padding: 120px 30px;
            background: #fff;
        }
        
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 60px auto 0;
        }
        
        .pricing-card {
            background: #fff;
            border: 2px solid #f0f0f0;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s;
            position: relative;
        }
        
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            border-color: #667eea;
        }
        
        .pricing-card.featured {
            border-color: #667eea;
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(102, 126, 234, 0.2);
        }
        
        .popular-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .plan-name {
            font-size: 18px;
            color: #667eea;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .plan-price {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .plan-price span {
            font-size: 14px;
            color: #999;
        }
        
        .plan-features {
            list-style: none;
            margin: 30px 0;
            text-align: left;
        }
        
        .plan-features li {
            padding: 12px 0;
            color: #666;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .plan-features li::before {
            content: "✓";
            color: #16a34a;
            font-weight: bold;
            font-size: 18px;
        }
        
        /* CTA Section */
        .cta-section {
            padding: 100px 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 500px;
            height: 500px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .cta-section::after {
            content: '';
            position: absolute;
            bottom: -50%;
            left: -10%;
            width: 500px;
            height: 500px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .cta-content {
            max-width: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .cta-content h2 {
            font-size: 42px;
            color: white;
            margin-bottom: 20px;
            font-weight: 800;
        }
        
        .cta-content p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 40px;
        }
        
        /* Footer */
        .footer {
            background: #1a1a2e;
            color: rgba(255, 255, 255, 0.7);
            padding: 60px 30px 30px;
        }
        
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 60px;
            margin-bottom: 40px;
        }
        
        .footer-brand h3 {
            color: white;
            font-size: 24px;
            margin-bottom: 15px;
        }
        
        .footer-brand p {
            line-height: 1.7;
            margin-bottom: 20px;
        }
        
        .footer-section h4 {
            color: white;
            font-size: 16px;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: #667eea;
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 30px;
            text-align: center;
        }
        
        /* Responsive */
        @media (max-width: 968px) {
            .hero-container {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .hero-content h1 {
                font-size: 42px;
            }
            
            .features-grid,
            .steps,
            .pricing-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .nav-links {
                display: none;
            }
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-in {
            animation: fadeInUp 0.6s ease-out forwards;
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar" id="navbar">
        <div class="nav-container">
            <a href="#" class="logo">
                <span class="logo-icon">🎯</span>
                <span>TrafficQuest</span>
            </a>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#how-it-works">How It Works</a>
                <a href="#pricing">Pricing</a>
                <a href="login.php">Login</a>
                <a href="register.php" class="btn-nav">Get Started Free</a>
            </div>
        </div>
    </nav>
    
    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <h1 class="animate-in">
                    Your Traffic.<br>
                    <span class="gradient-text">Their Attention.</span>
                </h1>
                <p class="animate-in">The only traffic exchange that rewards you for real engagement. Earn credits while discovering amazing websites, then drive quality visitors to yours.</p>
                <div class="cta-buttons animate-in">
                    <a href="register.php" class="btn-primary">Start Free with 50 Credits</a>
                    <a href="#how-it-works" class="btn-secondary">See How It Works</a>
                </div>
            </div>
            <div class="hero-visual">
                <div class="stats-cards">
                    <div class="stat-card">
                        <div class="stat-icon">⚡</div>
                        <div class="stat-value">10</div>
                        <div class="stat-label">Credits Per View</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">🎯</div>
                        <div class="stat-value">30s</div>
                        <div class="stat-label">Surf Timer</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">💰</div>
                        <div class="stat-value">50</div>
                        <div class="stat-label">Free Signup Bonus</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">🚀</div>
                        <div class="stat-value">∞</div>
                        <div class="stat-label">Growth Potential</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Features Section -->
    <section class="features" id="features">
        <div class="features-container">
            <div class="section-header">
                <div class="section-label">Why TrafficQuest</div>
                <h2 class="section-title">Traffic Exchange, Reimagined</h2>
                <p class="section-subtitle">We're not your typical traffic exchange. We've gamified the experience to make earning and spending traffic actually enjoyable.</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🎮</div>
                    <h3>Gamified Experience</h3>
                    <p>Level up as you surf. Earn XP, unlock achievements, and climb leaderboards while building your traffic empire.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Instant Rewards</h3>
                    <p>See your credits grow in real-time. No delays, no waiting. Surf, earn, and use your credits immediately.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎯</div>
                    <h3>Smart Targeting</h3>
                    <p>Our AI matches your site with viewers actually interested in your niche. No more random, low-quality traffic.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💎</div>
                    <h3>Quality Over Quantity</h3>
                    <p>30-second minimum surf time ensures real people see your content. No bots, no fake views, just genuine attention.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>Real-Time Analytics</h3>
                    <p>Track every view, click, and engagement. Make data-driven decisions to optimize your campaigns.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔒</div>
                    <h3>Secure & Trusted</h3>
                    <p>Bank-level security, verified users, and fraud protection. Your credits and data are always safe with us.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- How It Works -->
    <section class="how-it-works" id="how-it-works">
        <div class="steps-container">
            <div class="section-header">
                <div class="section-label">Simple Process</div>
                <h2 class="section-title">Get Started in Minutes</h2>
                <p class="section-subtitle">Three simple steps to start driving quality traffic to your website</p>
            </div>
            <div class="steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>Sign Up Free</h3>
                    <p>Create your account in 30 seconds and receive 50 credits instantly. No credit card required.</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3>Earn Credits</h3>
                    <p>Surf other members' websites for 30 seconds each. Earn 10 credits per site and level up your account.</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3>Get Traffic</h3>
                    <p>Use your credits to drive targeted visitors to your own website. Watch your traffic grow automatically.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Pricing -->
    <section class="pricing" id="pricing">
        <div class="section-header">
            <div class="section-label">Flexible Options</div>
            <h2 class="section-title">Boost Your Traffic Anytime</h2>
            <p class="section-subtitle">Start free or supercharge your growth with credit packages</p>
        </div>
        <div class="pricing-grid">
            <div class="pricing-card">
                <div class="plan-name">Starter</div>
                <div class="plan-price">Free <span>Forever</span></div>
                <ul class="plan-features">
                    <li>50 signup bonus credits</li>
                    <li>Earn 10 credits per surf</li>
                    <li>Add unlimited sites</li>
                    <li>Basic analytics</li>
                    <li>Level up system</li>
                </ul>
                <a href="register.php" class="btn-primary">Get Started</a>
            </div>
            <div class="pricing-card featured">
                <div class="popular-badge">Most Popular</div>
                <div class="plan-name">Growth</div>
                <div class="plan-price">$20 <span>500 Credits + 100 Bonus</span></div>
                <ul class="plan-features">
                    <li>600 total credits</li>
                    <li>~40 quality visitors</li>
                    <li>Priority targeting</li>
                    <li>Advanced analytics</li>
                    <li>20% bonus value</li>
                </ul>
                <a href="register.php" class="btn-primary">Buy Now</a>
            </div>
            <div class="pricing-card">
                <div class="plan-name">Professional</div>
                <div class="plan-price">$35 <span>1000 Credits + 300 Bonus</span></div>
                <ul class="plan-features">
                    <li>1,300 total credits</li>
                    <li>~85 quality visitors</li>
                    <li>Premium targeting</li>
                    <li>Priority support</li>
                    <li>30% bonus value</li>
                </ul>
                <a href="register.php" class="btn-primary">Buy Now</a>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="cta-section">
        <div class="cta-content">
            <h2>Ready to 10x Your Website Traffic?</h2>
            <p>Join thousands of smart marketers who are already growing their audience with TrafficQuest. Get started in less than a minute.</p>
            <a href="register.php" class="btn-primary">Start Free - Get 50 Credits Now</a>
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-brand">
                <h3>🎯 TrafficQuest</h3>
                <p>The modern traffic exchange platform that actually works. Real traffic, real engagement, real results.</p>
            </div>
            <div class="footer-section">
                <h4>Platform</h4>
                <ul class="footer-links">
                    <li><a href="register.php">Sign Up</a></li>
                    <li><a href="login.php">Login</a></li>
                    <li><a href="#how-it-works">How It Works</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>Resources</h4>
                <ul class="footer-links">
                    <li><a href="#">Help Center</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>Legal</h4>
                <ul class="footer-links">
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Refund Policy</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 TrafficQuest. All rights reserved.</p>
        </div>
    </footer>
    
    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
        
        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };
        
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);
        
        // Observe all feature cards, steps, and pricing cards
        document.querySelectorAll('.feature-card, .step, .pricing-card').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'all 0.6s ease-out';
            observer.observe(el);
        });
    </script>
</body>
</html>