<!DOCTYPE html>
                    Создать персонажа
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4>&#128293; Рождение из пепла</h4>
                    <p>Крупный RolePlay проект с глубокой проработкой мира и свободой творчества.</p>
                </div>
                <div class="footer-col">
                    <h4>Навигация</h4>
                    <ul>
                        <li><a href="/forum">Форум</a></li>
                        <li><a href="/characters">Персонажи</a></li>
                        <li><a href="/lore">Лор</a></li>
                        <li><a href="/rules">Правила</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Сообщество</h4>
                    <ul>
                        <li><a href="/discord">Discord</a></li>
                        <li><a href="/vk">ВКонтакте</a></li>
                        <li><a href="/telegram">Telegram</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Информация</h4>
                    <ul>
                        <li><a href="/privacy">Конфиденциальность</a></li>
                        <li><a href="/terms">Условия</a></li>
                        <li><a href="/contact">Контакты</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Рождение из пепла. Все права защищены.</p>
                <p class="footer-note">Design by BirthForMaSh Team</p>
            </div>
        </div>
    </footer>

    <!-- Скрипт для мобильного меню -->
    <script>
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const navMenu = document.querySelector('.nav-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            navMenu.classList.toggle('active');
        });
    </script>
</body>
</html>

/* ============================================
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .section-heading {
        font-size: 2rem;
    }
    
    .topic-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .topic-stats {
        width: 100%;
        justify-content: space-between;
    }
    
    .topic-time {
        text-align: left;
        width: 100%;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .features-grid,
    .sections-grid {
        grid-template-columns: 1fr;
    }
}
