<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GGRust - Игровой магазин</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #0f0f23;
            color: #fff;
            line-height: 1.6;
            overflow-x: hidden;
        }
        .header {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            padding: 15px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(0,0,0,0.5);
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .nav { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 24px; font-weight: bold; color: #7289da; }
        .nav-links { display: flex; list-style: none; gap: 30px; }
        .nav-links a { color: #fff; text-decoration: none; transition: color 0.3s; }
        .nav-links a:hover { color: #7289da; }
        
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%231a1a2e" width="1200" height="600"/><circle fill="%237289da" opacity="0.1" cx="200" cy="200" r="100"/><circle fill="%23ff6b6b" opacity="0.1" cx="800" cy="300" r="150"/></svg>');
            height: 100vh;
            display: flex;
            align-items: center;
            text-align: center;
            margin-top: 70px;
        }
        .hero h1 { font-size: 4rem; margin-bottom: 20px; text-shadow: 0 0 20px rgba(114,137,218,0.5); }
        .hero p { font-size: 1.4rem; margin-bottom: 40px; }
        .cta-button {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: #000;
            padding: 18px 40px;
            font-size: 1.2rem;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 10px 30px rgba(255,107,107,0.4);
        }
        .cta-button:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(255,107,107,0.6); }

        .widgets { padding: 80px 0; background: rgba(255,255,255,0.02); }
        .widgets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
        

        
        /* Виджет Discord */
        .discord-widget {
            background: linear-gradient(135deg, #7289da 0%, #99aab5 100%);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            cursor: pointer;
            transition: all 0.3s;
        }
        .discord-widget:hover { transform: translateY(-10px); }
        .discord-emoji {
            width: 80px; height: 80px; background: #5865F2; border-radius: 50%;
            margin: 0 auto 20px; position: relative; box-shadow: 0 10px 30px rgba(88,101,242,0.4);
        }
        .discord-emoji::before {
            content: ''; position: absolute; width: 35px; height: 25px; background: #fff;
            border-radius: 60% 40% 70% 30% / 40% 45% 55% 60%; left: 14px; top: 16px;
            transform: rotate(-20deg);
        }
        .discord-emoji::after {
            content: ''; position: absolute; width: 30px; height: 22px; background: #fff;
            border-radius: 50% 40% 60% 30% / 30% 40% 60% 70%; right: 16px; top: 18px;
            transform: rotate(20deg);
        }
        
        .store-section { padding: 80px 0; text-align: center; }
        .store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
        .store-item {
            background: rgba(255,255,255,0.05); border-radius: 20px; padding: 30px;
            transition: all 0.3s; border: 1px solid rgba(114,137,218,0.2);
        }
        .store-item:hover { background: rgba(114,137,218,0.1); transform: translateY(-10px); }
        
        .footer { background: #1a1a2e; padding: 40px 0; text-align: center; }
        
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .nav-links { display: none; }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <nav class="nav">
                <div class="logo">GGRust</div>
                <ul class="nav-links">
                    <li><a href="#home">Главная</a></li>
                    <li><a href="#store">Магазин</a></li>
                    <li><a href="#discord">Discord</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero" id="home">
        <div class="container">
            <h1>GGRust</h1>
            <p>Игровой магазин для твоего сервера Rust</p>
            <a href="#store" class="cta-button">ПОПОЛНИТЬ БАЛАНС</a>
        </div>
    </section>

    <section class="widgets">
        <div class="container">
            <h2 style="text-align: center; margin-bottom: 60px; font-size: 2.5rem;">Преимущества</h2>
            <div class="widgets-grid">
                <div class="bonus-widget">
                    <h3>