<?php
require_once 'config/config.php';
session_start();
require_once 'config/database.php';
require_once 'includes/functions.php';

$current_year = date('Y');
$error = '';

// Lae üldstatistika
try {
    // Aktiivsed sportlased
    $stmt = $pdo->prepare("SELECT COUNT(*) as count FROM users WHERE role = 'athlete' AND isActive = 1");
    $stmt->execute();
    $active_athletes = $stmt->fetch()['count'];
    
    // Sel aastal toimunud võistlused
    $stmt = $pdo->prepare("SELECT COUNT(*) as count FROM competitions WHERE strftime('%Y', date) = ?");
    $stmt->execute([$current_year]);
    $competitions_count = $stmt->fetch()['count'];
    
    // Sel aastal sisestatud tulemused
    $stmt = $pdo->prepare("
        SELECT COUNT(*) as count 
        FROM results r 
        JOIN competitions c ON r.competitionId = c.id 
        WHERE strftime('%Y', c.date) = ?
    ");
    $stmt->execute([$current_year]);
    $results_count = $stmt->fetch()['count'];
    
    // 🆕 MOTIVATSIOONI STATISTIKA
    $stmt = $pdo->prepare("SELECT COUNT(*) as count FROM user_achievements");
    $stmt->execute();
    $total_achievements = $stmt->fetch()['count'];
    
} catch (PDOException $e) {
    error_log('Index stats error: ' . $e->getMessage());
    $active_athletes = 0;
    $competitions_count = 0;
    $results_count = 0;
    $total_achievements = 0;
}

// Lae viimased võistlused
$recent_competitions = [];
try {
    $stmt = $pdo->prepare("
        SELECT 
            c.*,
            COUNT(DISTINCT r.userId) as participants_count,
            COUNT(r.id) as total_starts
        FROM competitions c
        LEFT JOIN results r ON c.id = r.competitionId
        WHERE strftime('%Y', c.date) = ?
        GROUP BY c.id
        ORDER BY c.date DESC
        LIMIT 3
    ");
    $stmt->execute([$current_year]);
    $recent_competitions = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
} catch (PDOException $e) {
    error_log('Index competitions error: ' . $e->getMessage());
}

$page_title = 'Avaleht';
$page_description = getSystemName() . ' punktiarvestuse süsteem. Jälgi võistluste tulemusi, vaata hooaja tabeleid ja arenda end ratsaspordis.';

include 'includes/header.php';
?>

<!-- 🚀 PARANDATUD HERO SECTION -->
<section class="hero">
    <div class="hero-background">
        <div class="hero-overlay"></div>
    </div>
    <div class="container">
        <div class="hero-content">
            <div class="hero-badge">
                <span class="badge-icon">🏆</span>
                <span class="badge-text">Hooaeg <?php echo $current_year; ?></span>
            </div>
            
            <h1 class="hero-title">
                <span class="title-gradient"><?php echo getSystemName(); ?></span>
                <span class="title-subtitle">Punktiarvestuse süsteem</span>
            </h1>
            
            <p class="hero-description">
                Jälgi oma arengut, võistluste tulemusi ja saavuta uusi eesmärke. 
                Meie kaasaegne süsteem aitab sul hoida silma peal oma edusammudel ratsaspordis.
            </p>
            
            <div class="hero-actions">
                <a href="<?php echo url('public/rankings.php'); ?>" class="hero-btn hero-btn-primary">
                    <span class="btn-icon">🏆</span>
                    <span>Vaata tabeleid</span>
                    <span class="btn-arrow">→</span>
                </a>
                
                <?php if (isLoggedIn() && isAthlete()): ?>
                    <a href="<?php echo url('athlete/motivation.php'); ?>" class="hero-btn hero-btn-secondary">
                        <span class="btn-icon">✨</span>
                        <span>Minu edusammud</span>
                    </a>
                <?php else: ?>
                    <a href="<?php echo url('public/results.php'); ?>" class="hero-btn hero-btn-secondary">
                        <span class="btn-icon">📊</span>
                        <span>Viimased tulemused</span>
                    </a>
                <?php endif; ?>
            </div>
            
            <!-- Hero statistika -->
            <div class="hero-stats">
                <div class="hero-stat">
                    <div class="stat-number" data-count="<?php echo $active_athletes; ?>">0</div>
                    <div class="stat-label">sportlast</div>
                </div>
                <div class="hero-stat">
                    <div class="stat-number" data-count="<?php echo $competitions_count; ?>">0</div>
                    <div class="stat-label">võistlust</div>
                </div>
                <div class="hero-stat">
                    <div class="stat-number" data-count="<?php echo $results_count; ?>">0</div>
                    <div class="stat-label">tulemust</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 🆕 MOTIVATSIOONISÜSTEEMI TUTVUSTUS -->
<section class="motivation-showcase">
    <div class="container">
        <div class="showcase-content">
            <div class="showcase-text">
                <div class="section-badge">
                    <span class="badge-icon">✨</span>
                    <span>Uus!</span>
                </div>
                
                <h2 class="showcase-title">
                    Avasta oma <span class="text-gradient">edusammud</span>
                </h2>
                
                <p class="showcase-description">
                    Meie uus motivatsioonisüsteem jälgib automaatselt sinu arengut ja tunnustab 
                    saavutusi. Kogud punkte, täidad väljakutseid ja näed oma progressi graafikutes.
                </p>
                
                <div class="showcase-features">
                    <div class="feature-item">
                        <div class="feature-icon">🏆</div>
                        <div class="feature-text">
                            <strong>Saavutuste süsteem</strong>
                            <span>Avasta märke ja kogud punkte</span>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">🎯</div>
                        <div class="feature-text">
                            <strong>Isiklikud väljakutsed</strong>
                            <span>Uued eesmärgid iga kuu</span>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">📈</div>
                        <div class="feature-text">
                            <strong>Progressi jälgimine</strong>
                            <span>Visualiseeri oma arengut</span>
                        </div>
                    </div>
                </div>
                
                <div class="showcase-actions">
                    <?php if (isLoggedIn() && isAthlete()): ?>
                        <a href="<?php echo url('athlete/motivation.php'); ?>" class="showcase-btn showcase-btn-primary">
                            <span class="btn-icon">🚀</span>
                            <span>Vaata oma edusamme</span>
                        </a>
                    <?php else: ?>
                        <a href="<?php echo url('login.php'); ?>" class="showcase-btn showcase-btn-primary">
                            <span class="btn-icon">🚀</span>
                            <span>Alusta oma teed</span>
                        </a>
                    <?php endif; ?>
                    
                    <a href="<?php echo url('public/motivation-system.php'); ?>" class="link-secondary">
                        <span>Loe lähemalt</span>
                        <span class="link-arrow">→</span>
                    </a>
                </div>
            </div>
            
            <div class="showcase-visual">
                <div class="motivation-preview">
                    <div class="preview-card achievement-preview">
                        <div class="preview-header">
                            <span class="preview-icon">🏆</span>
                            <span class="preview-title">Saavutused</span>
                        </div>
                        <div class="preview-content">
                            <div class="achievement-badge unlocked">
                                <span class="ach-icon">⭐</span>
                                <span class="ach-name">5+ punkti</span>
                            </div>
                            <div class="achievement-badge unlocked">
                                <span class="ach-icon">🎯</span>
                                <span class="ach-name">TOP 10</span>
                            </div>
                            <div class="achievement-badge locked">
                                <span class="ach-icon">🏅</span>
                                <span class="ach-name">75%</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="preview-card challenge-preview">
                        <div class="preview-header">
                            <span class="preview-icon">🎯</span>
                            <span class="preview-title">Kuu väljakutse</span>
                        </div>
                        <div class="preview-content">
                            <div class="challenge-item">
                                <div class="challenge-name">Kuu sõdalane</div>
                                <div class="challenge-progress">
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: 75%"></div>
                                    </div>
                                    <span class="progress-text">3/4</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="preview-card stats-preview">
                        <div class="preview-header">
                            <span class="preview-icon">📈</span>
                            <span class="preview-title">Progress</span>
                        </div>
                        <div class="preview-content">
                            <div class="mini-chart">
                                <div class="chart-bar" style="height: 40%"></div>
                                <div class="chart-bar" style="height: 60%"></div>
                                <div class="chart-bar" style="height: 80%"></div>
                                <div class="chart-bar" style="height: 100%"></div>
                                <div class="chart-bar" style="height: 70%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 📊 PARANDATUD STATISTIKA -->
<section class="stats-section" id="stats">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Hooaja <?php echo $current_year; ?> <span class="text-gradient">numbrid</span></h2>
            <p class="section-subtitle">Reaalajas uuendatud statistika</p>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-background">
                    <div class="stat-icon">
                        <i class="icon-users"></i>
                    </div>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-count="<?php echo $active_athletes; ?>">0</div>
                    <div class="stat-label">Aktiivset sportlast</div>
                    <div class="stat-trend">
                        <span class="trend-icon">📈</span>
                        <span class="trend-text">Kasvab hooaja jooksul</span>
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-background">
                    <div class="stat-icon">
                        <i class="icon-calendar"></i>
                    </div>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-count="<?php echo $competitions_count; ?>">0</div>
                    <div class="stat-label">Võistlusel osaletud</div>
                    <div class="stat-trend">
                        <span class="trend-icon">🏆</span>
                        <span class="trend-text">Regulaarselt uusi</span>
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-background">
                    <div class="stat-icon">
                        <i class="icon-trophy"></i>
                    </div>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-count="<?php echo $results_count; ?>">0</div>
                    <div class="stat-label">Starti tehtud</div>
                    <div class="stat-trend">
                        <span class="trend-icon">🚀</span>
                        <span class="trend-text">Iga nädal rohkem</span>
                    </div>
                </div>
            </div>
            
            <div class="stat-card featured">
                <div class="stat-background">
                    <div class="stat-icon">
                        <i class="icon-award"></i>
                    </div>
                </div>
                <div class="stat-content">
                    <div class="stat-number" data-count="<?php echo $total_achievements; ?>">0</div>
                    <div class="stat-label">Saavutust avatud</div>
                    <div class="stat-trend">
                        <span class="trend-icon">✨</span>
                        <span class="trend-text">Motivatsioonisüsteem</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 🔄 PARANDATUD: MEIE KOGUKOND (Random sportlased) -->
<section class="athletes-section" id="athletes">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Meie <span class="text-gradient">kogukond</span></h2>
            <p class="section-subtitle">Tutvumine hooajal <?php echo $current_year; ?> aktiivsete sportlastega</p>
        </div>

        <?php
        // 🔄 PARANDATUD: Lae RANDOM aktiivsed sportlased (ilma järjestamiseta)
        try {
            $stmt = $pdo->prepare("
                SELECT 
                    u.firstName, u.lastName, u.birthDate,
                    COUNT(DISTINCT r.competitionId) as competitions_count,
                    COUNT(r.id) as starts_count,
                    GROUP_CONCAT(DISTINCT r.discipline) as disciplines,
                    MAX(c.date) as last_competition_date
                FROM users u
                JOIN results r ON u.id = r.userId
                JOIN competitions c ON r.competitionId = c.id
                WHERE u.isActive = 1 AND u.role = 'athlete' 
                    AND strftime('%Y', c.date) = ?
                GROUP BY u.id, u.firstName, u.lastName, u.birthDate
                HAVING starts_count >= 1
                ORDER BY RANDOM()
                LIMIT 8
            ");
            $stmt->execute([$current_year]);
            $active_athletes_list = $stmt->fetchAll(PDO::FETCH_ASSOC);
            
            // Lisa vanusegrupid
            for ($i = 0; $i < count($active_athletes_list); $i++) {
                $active_athletes_list[$i]['ageGroup'] = getAgeGroup($active_athletes_list[$i]['birthDate'], $current_year);
                $active_athletes_list[$i]['disciplines_array'] = explode(',', $active_athletes_list[$i]['disciplines']);
            }
            
        } catch (PDOException $e) {
            $active_athletes_list = [];
            error_log('Active athletes error: ' . $e->getMessage());
        }
        ?>

        <?php if (!empty($active_athletes_list)): ?>
            <div class="athletes-grid">
                <?php foreach ($active_athletes_list as $athlete): ?>
                    <!-- 🔄 PARANDATUD: Kõik kaardid on nüüd ühesugused (eemaldatud featured, rank) -->
                    <div class="athlete-card">
                        <div class="athlete-avatar">
                            <span class="avatar-text"><?php echo strtoupper(substr($athlete['firstName'], 0, 1) . substr($athlete['lastName'], 0, 1)); ?></span>
                        </div>
                        
                        <div class="athlete-info">
                            <div class="athlete-name">
                                <?php echo htmlspecialchars($athlete['firstName'] . ' ' . $athlete['lastName']); ?>
                            </div>
                            <div class="athlete-meta">
                                <?php echo getAgeGroupName($athlete['ageGroup']); ?>
                            </div>
                        </div>
                        
                        <!-- 🔄 PARANDATUD: Lihtsustatud statistika (eemaldatud parim tulemus) -->
                        <div class="athlete-stats">
                            <div class="stat-item">
                                <span class="stat-number"><?php echo $athlete['competitions_count']; ?></span>
                                <span class="stat-label">võistlust</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number"><?php echo $athlete['starts_count']; ?></span>
                                <span class="stat-label">starti</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number"><?php echo count($athlete['disciplines_array']); ?></span>
                                <span class="stat-label">distsipliini</span>
                            </div>
                        </div>
                        
                        <div class="athlete-disciplines">
                            <?php foreach ($athlete['disciplines_array'] as $discipline): ?>
                                <span class="discipline-tag <?php echo $discipline; ?>">
                                    <?php echo getDisciplineName($discipline); ?>
                                </span>
                            <?php endforeach; ?>
                        </div>
                        
                        <div class="athlete-activity">
                            <i class="icon-clock"></i>
                            <span>Viimati: <?php echo formatDate($athlete['last_competition_date']); ?></span>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <!-- 🔄 PARANDATUD: Uuendamisest teatav tekst -->
            <div class="athletes-note">
                <div class="note-content">
                    <i class="icon-refresh"></i>
                    <span>Sportlased kuvatakse juhuslikult ja uuenevad iga lehe värskendamisel</span>
                </div>
            </div>
            
        <?php else: ?>
            <div class="no-data">
                <div class="no-data-icon">🏆</div>
                <h3>Aktiivseid sportlasi pole veel saadaval</h3>
                <p>Hooaeg on alles käimas - varsti näed siin meie kogukonna liikmeid!</p>
            </div>
        <?php endif; ?>

        <div class="section-footer">
            <a href="<?php echo url('public/rankings.php'); ?>" class="section-btn section-btn-outline section-btn-large">
                <span class="btn-icon">📊</span>
                <span>Vaata kõiki tabeleid</span>
                <span class="btn-arrow">→</span>
            </a>
        </div>
    </div>
</section>

<!-- 📋 PUNKTIARVESTUSE REEGLID -->
<section class="features-section" id="features">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Punktiarvestuse <span class="text-gradient">süsteem</span></h2>
            <p class="section-subtitle">Läbipaistev ja õiglane hindamine igas distsipliinis</p>
        </div>
        
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-header">
                    <div class="feature-icon">
                        <i class="icon-target"></i>
                    </div>
                    <h3>Koolisõit</h3>
                </div>
                <div class="feature-content">
                    <div class="feature-highlight">
                        <span class="highlight-number">6</span>
                        <span class="highlight-text">parimat tulemust</span>
                    </div>
                    <ul class="feature-list">
                        <li>Punktid: protsent + skeem + koht</li>
                        <li>70%+ annab 12 baaspunkti</li>
                        <li>L-skeem annab +3 punkti, NH4A-skeem +1 punkt</li>
                        <li>1. koht annab +5 punkti</li>
                    </ul>
                </div>
                <div class="feature-footer">
                    <a href="<?php echo url('public/dressage-rules.php'); ?>" class="feature-link">
                        <span>Täpsemad reeglid</span>
                        <span class="link-arrow">→</span>
                    </a>
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-header">
                    <div class="feature-icon">
                        <i class="icon-zap"></i>
                    </div>
                    <h3>Takistussõit</h3>
                </div>
                <div class="feature-content">
                    <div class="feature-highlight">
                        <span class="highlight-number">10</span>
                        <span class="highlight-text">parimat tulemust</span>
                    </div>
                    <ul class="feature-list">
                        <li>Punktid karistuspunktide järgi</li>
                        <li>0 karistuspunkti = 12 punkti</li>
                        <li>Igal startil vähemalt 0.5 punkti</li>
                        <li>Ajavead arvestatakse</li>
                    </ul>
                </div>
                <div class="feature-footer">
                    <a href="<?php echo url('public/jumping-rules.php'); ?>" class="feature-link">
                        <span>Täpsemad reeglid</span>
                        <span class="link-arrow">→</span>
                    </a>
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-header">
                    <div class="feature-icon">
                        <i class="icon-map"></i>
                    </div>
                    <h3>Kestvusratsutamine</h3>
                </div>
                <div class="feature-content">
                    <div class="feature-highlight">
                        <span class="highlight-number">4</span>
                        <span class="highlight-text">parimat tulemust</span>
                    </div>
                    <ul class="feature-list">
                        <li>Punktid distantsi ja koha järgi</li>
                        <li>100+km = 12 distantsipunkti</li>
                        <li>Lõpetamisbonus +1 punkt</li>
                        <li>Pulsi kontroll kohustuslik</li>
                    </ul>
                </div>
                <div class="feature-footer">
                    <a href="<?php echo url('public/endurance-rules.php'); ?>" class="feature-link">
                        <span>Täpsemad reeglid</span>
                        <span class="link-arrow">→</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 🚀 CALL TO ACTION -->
<?php if (!isLoggedIn()): ?>
<section class="cta-section">
    <div class="container">
        <div class="cta-content">
            <div class="cta-text">
                <h2 class="cta-title">
                    Alusta oma <span class="text-gradient">ratsaspordi teed</span>
                </h2>
                <p class="cta-description">
                    Liitu meie kogukonnaga, jälgi oma arengut ja saavuta uusi eesmärke. 
                    Registreerumine on kiire ja lihtne!
                </p>
            </div>
            
            <div class="cta-actions">
                <a href="<?php echo url('register.php'); ?>" class="cta-btn cta-btn-primary cta-btn-large">
                    <span class="btn-icon">🚀</span>
                    <span>Registreeru tasuta</span>
                </a>
                <a href="<?php echo url('login.php'); ?>" class="cta-btn cta-btn-secondary cta-btn-large">
                    <span class="btn-icon">👋</span>
                    <span>Logi sisse</span>
                </a>
            </div>
            
            <div class="cta-benefits">
                <div class="benefit-item">
                    <span class="benefit-icon">✓</span>
                    <span>Tasuta kasutamine</span>
                </div>
                <div class="benefit-item">
                    <span class="benefit-icon">✓</span>
                    <span>Automaatne progressi jälgimine</span>
                </div>
                <div class="benefit-item">
                    <span class="benefit-icon">✓</span>
                    <span>Isiklikud saavutused</span>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<style>
/* 🎨 KAASAEGNE AVALEHE DISAIN - SCOPED TO AVOID CONFLICTS */

/* 🎨 KAASAEGNE AVALEHE DISAIN - FULLY SCOPED */

/* Ensure NO CSS bleeding to header or other sections */
.hero-section *:not(.container):not(.hero-content):not(.hero-badge):not(.hero-title):not(.hero-description):not(.hero-actions):not(.hero-stats),
.motivation-showcase *,
.stats-section-home *,
.athletes-section-home *,
.features-section-home *,
.cta-section-home * {
    /* Scoped styles only */
}

/* Hero Section - completely isolated */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.95) 0%, 
        rgba(51, 65, 85, 0.95) 50%, 
        rgba(71, 85, 105, 0.95) 100%
    );
    z-index: 1;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="20" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="80" cy="30" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: var(--spacing-2) var(--spacing-4);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.badge-icon {
    font-size: 1.2rem;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    line-height: 1.1;
}

.title-gradient {
    background: linear-gradient(45deg, #ffffff, #e0e7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.title-subtitle {
    display: block;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 400;
    opacity: 0.9;
    margin-top: var(--spacing-2);
}

.hero-description {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    margin-bottom: var(--spacing-12);
    flex-wrap: wrap;
}

.hero-actions .hero-btn {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 200px;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.hero-actions .hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-actions .hero-btn-primary {
    background: linear-gradient(45deg, #10b981, #059669);
    border: none;
    color: white;
}

.hero-actions .hero-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.hero-actions .hero-btn .btn-arrow {
    transition: transform 0.3s ease;
}

.hero-actions .hero-btn:hover .btn-arrow {
    transform: translateX(3px);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
    flex-wrap: wrap;
}

.hero-stat {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4) var(--spacing-6);
    min-width: 120px;
}

.hero-stat .stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    display: block;
    margin-bottom: var(--spacing-2);
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-stat .stat-label {
    font-size: var(--font-size-base);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Motivation Showcase */
.motivation-showcase {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

.motivation-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(51, 65, 85, 0.05));
    pointer-events: none;
}

.showcase-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    color: white;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}

.showcase-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    line-height: 1.2;
    color: var(--gray-900);
}

.text-gradient {
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.showcase-description {
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    margin-bottom: var(--spacing-8);
    line-height: 1.6;
}

.showcase-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateX(5px);
}

.feature-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-text strong {
    display: block;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-1);
}

.feature-text span {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.showcase-actions {
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
    flex-wrap: wrap;
}

.showcase-actions .showcase-btn {
    padding: var(--spacing-3) var(--spacing-6);
    border: 1px solid;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.showcase-actions .showcase-btn-primary {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.showcase-actions .showcase-btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Section Footer Button */
.section-footer .section-btn {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.section-footer .section-btn-outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.section-footer .section-btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

.section-footer .section-btn-large {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    border-radius: 50px;
    min-width: 200px;
}

/* CTA Section Buttons */
.cta-actions .cta-btn {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.cta-actions .cta-btn-large {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    border-radius: 50px;
    min-width: 200px;
}

.cta-actions .cta-btn-primary {
    background: linear-gradient(45deg, #10b981, #059669);
    border: none;
    color: white;
}

.cta-actions .cta-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.link-secondary {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-600);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-secondary:hover {
    color: var(--primary-color);
}

.link-arrow {
    transition: transform 0.3s ease;
}

.link-secondary:hover .link-arrow {
    transform: translateY(3px);
}

/* Motivation Preview */
.motivation-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

.preview-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: transform 0.3s ease;
}

.preview-card:hover {
    transform: translateY(-5px);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--gray-200);
}

.preview-icon {
    font-size: 1.5rem;
}

.preview-title {
    font-weight: 600;
    color: var(--gray-900);
}

.achievement-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-2);
    transition: transform 0.3s ease;
}

.achievement-badge.unlocked {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
}

.achievement-badge.locked {
    background: var(--gray-100);
    color: var(--gray-500);
}

.achievement-badge:hover {
    transform: scale(1.05);
}

.challenge-item {
    background: var(--gray-50);
    padding: var(--spacing-3);
    border-radius: var(--radius);
}

.challenge-name {
    font-weight: 500;
    margin-bottom: var(--spacing-2);
    color: var(--gray-900);
}

.challenge-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(45deg, #10b981, #059669);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.mini-chart {
    display: flex;
    align-items: end;
    gap: var(--spacing-1);
    height: 60px;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(to top, #3b82f6, #1e40af);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

/* Stats Section */
.stats-section {
    padding: var(--spacing-20) 0;
    background: white;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-16);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
}

.stat-card {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.stat-card.featured {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    border: none;
}

.stat-background {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    opacity: 0.1;
    transition: all 0.3s ease;
}

.stat-card:hover .stat-background {
    transform: scale(1.2);
    opacity: 0.15;
}

.stat-card.featured .stat-background {
    background: rgba(255, 255, 255, 0.1);
}

.stat-icon {
    position: relative;
    z-index: 2;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-4);
}

.stat-card.featured .stat-icon {
    color: white;
}

.stat-content {
    position: relative;
    z-index: 2;
}

.stat-number {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-2);
    color: var(--gray-900);
    line-height: 1;
}

.stat-card.featured .stat-number {
    color: white;
}

.stat-label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-bottom: var(--spacing-2);
}

.stat-card.featured .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.stat-card.featured .stat-trend {
    color: rgba(255, 255, 255, 0.8);
}

.trend-icon {
    font-size: 1rem;
}

/* 🔄 PARANDATUD: Athletes Section - Eemaldatud featured stiilid */
.athletes-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.athletes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

/* 🔄 PARANDATUD: Kõik athlete-card'id on nüüd ühesugused */
.athlete-card {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.athlete-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* 🔄 EEMALDATUD: featured ja rank stiilid */

.athlete-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.athlete-info {
    margin-bottom: var(--spacing-4);
}

.athlete-name {
    font-weight: 600;
    color: var(--gray-900);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-1);
}

.athlete-meta {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.athlete-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--gray-50);
    border-radius: var(--radius);
}

.athlete-stats .stat-item {
    text-align: center;
}

.athlete-stats .stat-number {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    line-height: 1;
}

.athlete-stats .stat-label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-top: var(--spacing-1);
}

.athlete-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.discipline-tag {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: white;
}

.discipline-tag.koolisoit { background: var(--primary-color); }
.discipline-tag.takistussoit { background: var(--success-color); }
.discipline-tag.kestvusratsutamine { background: #8b5cf6; }

.athlete-activity {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    border-top: 1px solid var(--gray-200);
    padding-top: var(--spacing-3);
}

/* 🆕 UUENDAMISEST TEATAV MÄRKUS */
.athletes-note {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.note-content {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.note-content i {
    font-size: 1rem;
    animation: spin-slow 3s linear infinite;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.no-data {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-8);
}

.no-data-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    opacity: 0.5;
}

.no-data h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-2);
    color: var(--gray-700);
}

.no-data p {
    color: var(--gray-600);
}

/* Features Section */
.features-section {
    padding: var(--spacing-20) 0;
    background: white;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-8);
}

.feature-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.feature-header .feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.feature-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--gray-900);
}

.feature-highlight {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: var(--radius-lg);
    text-align: center;
    justify-content: center;
}

.highlight-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.highlight-text {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.feature-list {
    list-style: none;
    margin-bottom: var(--spacing-6);
}

.feature-list li {
    margin-bottom: var(--spacing-2);
    padding-left: var(--spacing-6);
    position: relative;
    color: var(--gray-700);
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
}

.feature-footer {
    border-top: 1px solid var(--gray-200);
    padding-top: var(--spacing-4);
}

.feature-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.feature-link:hover {
    color: var(--primary-dark);
}

.feature-link .link-arrow {
    transition: transform 0.3s ease;
}

.feature-link:hover .link-arrow {
    transform: translateX(3px);
}

/* CTA Section */
.cta-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    text-align: center;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    line-height: 1.2;
}

.cta-description {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--spacing-8);
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

.btn-large {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    border-radius: 50px;
    min-width: 200px;
}

.cta-benefits {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.benefit-icon {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: bold;
}

/* Remove all generic .btn styles that could affect header */
/* All button styles are now scoped to specific sections */

/* Responsive Design */
@media (max-width: 768px) {
    .hero {
        min-height: 80vh;
        padding: var(--spacing-12) 0;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-hero {
        width: 100%;
        max-width: 300px;
    }
    
    .hero-stats {
        gap: var(--spacing-4);
    }
    
    .showcase-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        text-align: center;
    }
    
    .motivation-preview {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-4);
    }
    
    .athletes-grid {
        grid-template-columns: 1fr;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-benefits {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-3);
    }
}

@media (max-width: 480px) {
    .hero-badge {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-3);
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }
    
    .athlete-stats {
        flex-direction: column;
        gap: var(--spacing-2);
    }
    
    .athlete-stats .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Counter Animation */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-number {
    animation: countUp 0.8s ease-out;
}
</style>

<script>
// Counter animation
function animateCounters() {
    const counters = document.querySelectorAll('[data-count]');
    
    counters.forEach(counter => {
        const target = parseInt(counter.getAttribute('data-count'));
        const increment = target / 50;
        let current = 0;
        
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            counter.textContent = Math.floor(current);
        }, 50);
    });
}

// Smooth scroll 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'
            });
        }
    });
});

// Initialize animations when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Start counter animation after a short delay
    setTimeout(animateCounters, 500);
    
    // Add intersection observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observe elements for animation
    document.querySelectorAll('.stat-card, .feature-card, .athlete-card').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
        observer.observe(el);
    });
    
    // 🔄 UUUS: Log info about random selection
    console.log('🔄 Sportlased kuvatakse juhuslikult - uuenevad iga lehe värskendamisel');
});
</script>

<?php include 'includes/footer.php'; ?>