---

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>GameKey - Главная</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rajdhani:wght@600;700&display=swap');
  
  :root {
    --bg-main: #0F111A;
    --bg-card: #1A1D29;
    --accent-primary: #7B61FF; /* Фиолетовый неон */
    --accent-secondary: #00E096; /* Зеленый неон для скидок */
    --text-main: #FFFFFF;
    --text-muted: #8F95B2;
  }

  body {
    margin: 0;
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
  }

  /* 5.1.1 Навигационное меню */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
    background: rgba(15, 17, 26, 0.95);
    border-bottom: 1px solid #2A2D3E;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .logo { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; color: var(--accent-primary); letter-spacing: 1px; }
  .nav-links { display: flex; gap: 30px; }
  .nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 600; transition: 0.3s; }
  .nav-links a:hover { color: var(--text-main); }
  .search-bar { background: var(--bg-card); border: 1px solid #2A2D3E; padding: 10px 15px; border-radius: 8px; color: white; width: 300px; }
  .header-actions { display: flex; gap: 20px; align-items: center; }
  .btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; }
  .btn-primary { background: var(--accent-primary); color: white; }
  .btn-outline { background: transparent; border: 1px solid var(--accent-primary); color: var(--accent-primary); }

  /* 5.1.2 Баннер с акциями */
  .hero-banner {
    margin: 40px 80px;
    height: 400px;
    background: linear-gradient(90deg, #2A1B5E 0%, #0F111A 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 60px;
    box-sizing: border-box;
    border: 1px solid #3A3D5E;
  }
  .hero-content h1 { font-family: 'Rajdhani', sans-serif; font-size: 48px; margin: 0 0 10px 0; }
  .hero-content p { color: var(--text-muted); font-size: 18px; margin-bottom: 30px; }

  /* 5.1.3 Подборки игр (горизонтальные ленты) */
  .section-title { font-family: 'Rajdhani', sans-serif; font-size: 32px; margin: 40px 80px 20px; }
  .games-row {
    display: flex;
    gap: 20px;
    padding: 0 80px;
    overflow-x: auto;
  }
  .game-card {
    min-width: 220px;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2A2D3E;
    transition: transform 0.2s;
  }
  .game-card:hover { transform: translateY(-5px); border-color: var(--accent-primary); }
  .card-img { height: 280px; background: #2A2D3E; position: relative; }
  .discount-badge { position: absolute; top: 10px; right: 10px; background: var(--accent-secondary); color: #000; padding: 4px 8px; border-radius: 4px; font-weight: 700; font-size: 14px; }
  .card-info { padding: 15px; }
  .card-title { margin: 0 0 10px 0; font-size: 16px; font-weight: 600; }
  .card-price { display: flex; gap: 10px; align-items: center; }
  .old-price { color: var(--text-muted); text-decoration: line-through; font-size: 14px; }
  .new-price { color: var(--accent-secondary); font-weight: 700; font-size: 18px; }

  /* 5.1.4 Подвал */
  footer {
    margin-top: 80px;
    padding: 40px 80px;
    background: var(--bg-card);
    border-top: 1px solid #2A2D3E;
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
  }
</style>
</head>
<body>

  <header>
    <div class="logo">GAMEKEY</div>
    <nav class="nav-links">
      <a href="#">Каталог</a>
      <a href="#">Акции</a>
      <a href="#">Новинки</a>
    </nav>
    <input type="text" class="search-bar" placeholder="Поиск игр...">
    <div class="header-actions">
      <button class="btn btn-outline">Корзина (0)</button>
      <button class="btn btn-primary">Войти</button>
    </div>
  </header>

  <div class="hero-banner">
    <div class="hero-content">
      <h1>ЛЕТНЯЯ РАСПРОДАЖА</h1>
      <p>Скидки до 80% на топовые AAA-хиты этого года</p>
      <button class="btn btn-primary">Смотреть предложения</button>
    </div>
  </div>

  <h2 class="section-title">🔥 Популярные игры</h2>
  <div class="games-row">
    <!-- Карточка 1 -->
    <div class="game-card">
      <div class="card-img"><span class="discount-badge">-50%</span></div>
      <div class="card-info">
        <h3 class="card-title">Cyberpunk 2077</h3>
        <div class="card-price">
          <span class="old-price">1999 ₽</span>
          <span class="new-price">999 ₽</span>
        </div>
      </div>
    </div>
    <!-- Карточка 2 -->
    <div class="game-card">
      <div class="card-img"><span class="discount-badge">-30%</span></div>
      <div class="card-info">
        <h3 class="card-title">Elden Ring</h3>
        <div class="card-price">
          <span class="old-price">2499 ₽</span>
          <span class="new-price">1749 ₽</span>
        </div>
      </div>
    </div>
    <!-- Карточка 3 -->
    <div class="game-card">
      <div class="card-img"></div>
      <div class="card-info">
        <h3 class="card-title">Baldur's Gate 3</h3>
        <div class="card-price">
          <span class="new-price">1999 ₽</span>
        </div>
      </div>
    </div>
    <!-- Карточка 4 -->
    <div class="game-card">
      <div class="card-img"><span class="discount-badge">-70%</span></div>
      <div class="card-info">
        <h3 class="card-title">Red Dead Redemption 2</h3>
        <div class="card-price">
          <span class="old-price">2999 ₽</span>
          <span class="new-price">899 ₽</span>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div>
      <h3 style="color: white; margin-top: 0;">GAMEKEY</h3>
      <p>Магазин цифровых ключей</p>
    </div>
    <div>
      <h4 style="color: white;">Контакты</h4>
      <p>support@gamekey.ru</p>
      <p>+7 (999) 000-00-00</p>
    </div>
  </footer>

</body>
</html>