View file index.html

File size: 37.75Kb
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ByMAS — Форум веб-программистов</title>
  <meta name="description" content="ByMAS.RU — крупнейший русскоязычный форум веб-программистов. Более 14 900 участников, 100+ тысяч тем, обсуждения SEO, PHP, дизайна, фриланса и многого другого. Работаем с 2010 года." />
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%2300897b'/><text x='50%' y='54%' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='18' font-weight='900' font-family='Montserrat,sans-serif'>B</text></svg>" />
</head>
<body>

<!-- ══ HEADER ══════════════════════════════════════════ -->
<header id="header">
  <nav>
    <a href="#hero" class="nav-logo" aria-label="ByMAS — на главную">
      <div class="logo-icon">B</div>
      <span class="logo-text">By<span>MAS</span></span>
    </a>

    <ul class="nav-links">
      <li><a href="#about">О форуме</a></li>
      <li><a href="#categories">Разделы</a></li>
      <li><a href="#features">Возможности</a></li>
      <li><a href="#numbers">Статистика</a></li>
      <li><a href="https://bym.guru/" target="_blank" rel="noopener" class="nav-cta">Войти на форум →</a></li>
    </ul>

    <button class="burger" id="burger" aria-label="Меню">
      <span></span><span></span><span></span>
    </button>
  </nav>
</header>

<!-- ══ MOBILE NAV ══════════════════════════════════════ -->
<div class="mobile-nav" id="mobileNav" role="dialog" aria-modal="true" aria-label="Навигация">
  <button class="mobile-close" id="mobileClose">✕</button>
  <a href="#about" class="mob-link">О форуме</a>
  <a href="#categories" class="mob-link">Разделы</a>
  <a href="#features" class="mob-link">Возможности</a>
  <a href="#numbers" class="mob-link">Статистика</a>
  <a href="https://bym.guru/" target="_blank" rel="noopener">🚀 Перейти на форум</a>
</div>

<!-- ══ HERO ═══════════════════════════════════════════ -->
<section class="hero" id="hero">
  <div class="hero-bg-shapes">
    <div class="shape shape-1"></div>
    <div class="shape shape-2"></div>
    <div class="shape shape-3"></div>
  </div>

  <div class="hero-inner">
    <!-- LEFT -->
    <div class="hero-content">
      <div class="hero-badge">Работаем с 2010 года</div>

      <h1>
        By<span class="accent">MAS</span><br>
        Форум программистов
      </h1>

      <div class="hero-slogan">
        <span class="slogan-wap">WAP</span>
        <span>→</span>
        <span class="slogan-web">WEB</span>
        <span style="color:rgba(255,255,255,.45); font-size:14px; font-weight:400">программистов</span>
      </div>

      <p class="hero-desc">
        Крупнейшее русскоязычное сообщество разработчиков и вебмастеров.
        Здесь обсуждают технологии, находят партнёров, продают услуги и растут
        от новичка до профессионала — уже 15 лет.
      </p>

      <div class="hero-actions">
        <a href="https://bym.guru/" target="_blank" rel="noopener" class="btn-primary">
          🚀 Перейти на форум
        </a>
        <a href="#categories" class="btn-secondary">
          📂 Смотреть разделы
        </a>
      </div>

      <div class="hero-stats">
        <div class="stat-item">
          <span class="stat-num">14<span class="stat-accent">.9к</span></span>
          <span class="stat-label">Участников</span>
        </div>
        <div class="stat-item">
          <span class="stat-num">100<span class="stat-accent">к+</span></span>
          <span class="stat-label">Тем</span>
        </div>
        <div class="stat-item">
          <span class="stat-num">1.2<span class="stat-accent">М+</span></span>
          <span class="stat-label">Сообщений</span>
        </div>
        <div class="stat-item">
          <span class="stat-num">15<span class="stat-accent">лет</span></span>
          <span class="stat-label">В сети</span>
        </div>
      </div>
    </div>

    <!-- RIGHT - forum preview -->
    <div class="hero-visual" aria-hidden="true">
      <div class="forum-preview">
        <div class="fp-topbar">
          <div class="fp-dot r"></div>
          <div class="fp-dot y"></div>
          <div class="fp-dot g"></div>
          <div class="fp-url">bym.guru</div>
        </div>

        <div class="fp-section-header">⚙️ Инженерия</div>
        <div class="fp-row">
          <span class="fp-row-name">Обучение/Помощь новичкам</span>
          <span class="fp-row-count">18415 / 183957</span>
        </div>
        <div class="fp-row">
          <span class="fp-row-name">Хостинги/Домены</span>
          <span class="fp-row-count">5262 / 84569</span>
        </div>
        <div class="fp-row">
          <span class="fp-row-name">Графика/Дизайн</span>
          <span class="fp-row-count">5425 / 62370</span>
        </div>

        <div class="fp-section-header">🛒 Интернет-коммерция</div>
        <div class="fp-row">
          <span class="fp-row-name">Купить/Продать</span>
          <span class="fp-row-count">16357 / 166610</span>
        </div>
        <div class="fp-row">
          <span class="fp-row-name">Услуги/Фриланс</span>
          <span class="fp-row-count">8326 / 86815</span>
        </div>
        <div class="fp-row" style="border:none">
          <span class="fp-row-name">Свободное общение</span>
          <span class="fp-row-count">38431 / 618187</span>
        </div>
      </div>

      <div class="hero-float-badge">
        👤 <span id="onlineCount">247</span> онлайн
      </div>
    </div>
  </div>
</section>

<!-- ══ TICKER ═════════════════════════════════════════ -->
<div class="ticker-section" aria-hidden="true">
  <div class="ticker-wrap">
    <div class="ticker-track" id="ticker">
      <div class="ticker-item">📊 <span class="ti-num">14 900+</span> зарегистрированных участников</div>
      <div class="ticker-item">💬 <span class="ti-num">618 187</span> сообщений в «Свободном общении»</div>
      <div class="ticker-item">📂 <span class="ti-num">38 431</span> тем в разделе «Свободное общение»</div>
      <div class="ticker-item">💼 <span class="ti-num">86 815</span> постов по услугам и фрилансу</div>
      <div class="ticker-item">🧑‍💻 <span class="ti-num">183 957</span> ответов в разделе помощи новичкам</div>
      <div class="ticker-item">🌐 <span class="ti-num">84 569</span> постов о хостингах и доменах</div>
      <div class="ticker-item">🏷️ <span class="ti-num">166 610</span> постов в разделе «Купить/Продать»</div>
      <div class="ticker-item">⭐ <span class="ti-num">С 2010</span> года в онлайне непрерывно</div>
      <!-- duplicate for infinite effect -->
      <div class="ticker-item">📊 <span class="ti-num">14 900+</span> зарегистрированных участников</div>
      <div class="ticker-item">💬 <span class="ti-num">618 187</span> сообщений в «Свободном общении»</div>
      <div class="ticker-item">📂 <span class="ti-num">38 431</span> тем в разделе «Свободное общение»</div>
      <div class="ticker-item">💼 <span class="ti-num">86 815</span> постов по услугам и фрилансу</div>
      <div class="ticker-item">🧑‍💻 <span class="ti-num">183 957</span> ответов в разделе помощи новичкам</div>
      <div class="ticker-item">🌐 <span class="ti-num">84 569</span> постов о хостингах и доменах</div>
      <div class="ticker-item">🏷️ <span class="ti-num">166 610</span> постов в разделе «Купить/Продать»</div>
      <div class="ticker-item">⭐ <span class="ti-num">С 2010</span> года в онлайне непрерывно</div>
    </div>
  </div>
</div>

<!-- ══ ABOUT ══════════════════════════════════════════ -->
<section class="about-section" id="about">
  <div class="section-inner">
    <div class="about-grid">
      <!-- Left: timeline -->
      <div>
        <div class="section-label">История</div>
        <h2 class="section-title">15 лет вместе<br>с <span class="accent">веб-сообществом</span></h2>
        <p class="section-sub" style="margin-bottom:40px">
          Форум ByMAS начинался как площадка для WAP-разработчиков и с годами вырос
          в полноценное сообщество для всех, кто создаёт интернет.
        </p>

        <div class="timeline">
          <div class="tl-item reveal">
            <div class="tl-year">2010</div>
            <div class="tl-text">Основание форума</div>
            <div class="tl-desc">Запуск платформы для WAP-программистов и мобильных разработчиков.</div>
          </div>
          <div class="tl-item reveal">
            <div class="tl-year">2012–2014</div>
            <div class="tl-text">Переход в веб</div>
            <div class="tl-desc">Форум охватывает SEO, PHP, дизайн — аудитория стремительно растёт.</div>
          </div>
          <div class="tl-item reveal">
            <div class="tl-year">2016–2018</div>
            <div class="tl-text">Коммерческие разделы</div>
            <div class="tl-desc">Появляются активные биржи услуг, разделы купли-продажи, арбитраж трафика.</div>
          </div>
          <div class="tl-item reveal">
            <div class="tl-year">2020+</div>
            <div class="tl-text">Домен bym.guru</div>
            <div class="tl-desc">Новый современный адрес форума, ImmyCMS [Beta], раздел ChatGPT.</div>
          </div>
          <div class="tl-item reveal">
            <div class="tl-year">Сегодня</div>
            <div class="tl-text">14 900+ участников</div>
            <div class="tl-desc">Один из крупнейших русскоязычных форумов для вебмастеров и программистов.</div>
          </div>
        </div>
      </div>

      <!-- Right: features -->
      <div>
        <div class="section-label">Почему ByMAS</div>
        <h2 class="section-title">Всё, что нужно<br><span class="accent">разработчику</span></h2>
        <p class="section-sub" style="margin-bottom:36px">
          Здесь вы найдёте ответ на любой технический вопрос, найдёте клиента или
          исполнителя, продадите сайт или монетизируете трафик.
        </p>

        <div class="about-feature reveal">
          <div class="about-feature-icon">🤝</div>
          <div class="about-feature-text">
            <h4>Живое сообщество</h4>
            <p>Реальные люди, реальный опыт. Тысячи решённых проблем и успешных сделок каждый день.</p>
          </div>
        </div>

        <div class="about-feature reveal">
          <div class="about-feature-icon">🔍</div>
          <div class="about-feature-text">
            <h4>Богатая база знаний</h4>
            <p>Более миллиона сообщений по SEO, PHP, хостингу, дизайну, маркетингу и программированию.</p>
          </div>
        </div>

        <div class="about-feature reveal">
          <div class="about-feature-icon">💸</div>
          <div class="about-feature-text">
            <h4>Биржа и фриланс</h4>
            <p>Найдите заказчика или исполнителя, купите или продайте готовый сайт, монетизируйте трафик.</p>
          </div>
        </div>

        <div class="about-feature reveal">
          <div class="about-feature-icon">🛡️</div>
          <div class="about-feature-text">
            <h4>Модерация и безопасность</h4>
            <p>Система репутации, система апелляций и жалоб, раздел «Доска позора» — мошенникам не место.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ CATEGORIES ═════════════════════════════════════ -->
<section class="categories-section" id="categories">
  <div class="section-inner">
    <div style="text-align:center">
      <div class="section-label">Разделы форума</div>
      <h2 class="section-title">Тысячи тем<br>в <span class="accent">каждой категории</span></h2>
      <p class="section-sub" style="margin:0 auto">
        Структура форума охватывает весь спектр веб-разработки, коммерции, дизайна
        и технологий — от Hello World до крупного арбитража трафика.
      </p>
    </div>

    <div class="cat-grid">

      <!-- ByMAS (платформа) -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">⚙️</div>
          <div class="cat-card-title">ByMAS (платформа)</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Баги и ошибки</span><span class="cat-count">1008 / 10774</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Обсуждение</span><span class="cat-count">3684 / 70261</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Конкурсы</span><span class="cat-count">357 / 13510</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Обновление/Улучшение</span><span class="cat-count">19 / 286</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Пользовательское исследование</span><span class="cat-count">4 / 123</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>ImmyCMS [Beta]</span><span class="cat-count">2 / 27</span></div>
        </div>
      </div>

      <!-- Инженерия -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">🔧</div>
          <div class="cat-card-title">Инженерия</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Обучение/Помощь новичкам</span><span class="cat-count">18415 / 183957</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Раскрутка/SEO__ООП</span><span class="cat-count">2254 / 26574</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Хостинги/Домены</span><span class="cat-count">5262 / 84569</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Графика/Дизайн</span><span class="cat-count">5425 / 62370</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>ChatGPT</span><span class="cat-count">1 / 3</span></div>
        </div>
      </div>

      <!-- Веб-разработка -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">🌐</div>
          <div class="cat-card-title">Веб-разработка</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>HTML, CSS, JavaScript</span><span class="cat-count">34 / 213</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>SEO, продвижение</span><span class="cat-count">1 / 18</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>PHP, MySQL</span><span class="cat-count">71 / 802</span></div>
        </div>
      </div>

      <!-- Программирование -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">💻</div>
          <div class="cat-card-title">Программирование</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Python</span><span class="cat-count">7 / 49</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Node.js</span><span class="cat-count">5 / 29</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>C/C++/C#</span><span class="cat-count">2 / 14</span></div>
        </div>
      </div>

      <!-- Интернет-коммерция -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">🛒</div>
          <div class="cat-card-title">Интернет-коммерция</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Услуги/Фриланс</span><span class="cat-count">8326 / 86815</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Купить/Продать</span><span class="cat-count">16357 / 166610</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Арбитраж</span><span class="cat-count">1199 / 33718</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Заработок</span><span class="cat-count">2539 / 31143</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Требуется партнёр / Ищу соадмина</span><span class="cat-count">2307 / 26607</span></div>
        </div>
      </div>

      <!-- Криптовалюты -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">₿</div>
          <div class="cat-card-title">Криптовалюты</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>AirDrop/Обсуждение</span><span class="cat-count">20 / 207</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Обсуждение курса</span><span class="cat-count">1 / 17</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Биржи</span><span class="cat-count">2 / 13</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Софт/прочее</span><span class="cat-count">11 / 149</span></div>
        </div>
      </div>

      <!-- Интернет-ресурсы -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">🔗</div>
          <div class="cat-card-title">Интернет ресурсы</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Оценка сайтов</span><span class="cat-count">5399 / 95857</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Полезные сайты</span><span class="cat-count">2805 / 43361</span></div>
        </div>
      </div>

      <!-- Общение -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">💬</div>
          <div class="cat-card-title">Общение/Трёп</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Телефоны/Смартфоны/КПК</span><span class="cat-count">1183 / 16138</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Компьютеры/Ноутбуки</span><span class="cat-count">1619 / 20686</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Свободное общение</span><span class="cat-count">38431 / 618187</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Музыка/Кино/ТВ</span><span class="cat-count">623 / 8003</span></div>
        </div>
      </div>

      <!-- Апелляции и жалобы -->
      <div class="cat-card reveal">
        <div class="cat-card-header">
          <div class="cat-card-icon">🛡️</div>
          <div class="cat-card-title">Апелляции и жалобы</div>
        </div>
        <div class="cat-card-body">
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Апелляции блокировок</span><span class="cat-count">395 / 9254</span></div>
          <div class="cat-row"><span class="cat-row-name"><span class="dot"></span>Жалобы на администрацию</span><span class="cat-count">440 / 8424</span></div>
        </div>
      </div>

    </div>

    <div style="text-align:center; margin-top:44px">
      <a href="https://bym.guru/" target="_blank" rel="noopener" class="btn-primary" style="display:inline-flex">
        Открыть все разделы →
      </a>
    </div>
  </div>
</section>

<!-- ══ FEATURES ═══════════════════════════════════════ -->
<section class="features-section" id="features">
  <div class="section-inner">
    <div style="text-align:center; margin-bottom:52px">
      <div class="section-label">Возможности</div>
      <h2 class="section-title">Всё что нужно<br><span class="accent">в одном месте</span></h2>
      <p class="section-sub" style="margin:0 auto">
        ByMAS — не просто форум. Это инструмент для роста: учиться, зарабатывать,
        продвигать проекты и находить единомышленников.
      </p>
    </div>

    <div class="features-grid">
      <div class="feature-card reveal">
        <span class="feature-emoji">🎓</span>
        <div class="feature-title">Обучение и помощь</div>
        <p class="feature-desc">Более 183 000 ответов в разделе для новичков. Задайте любой вопрос — опытные участники помогут разобраться в коде, настройке сервера или продвижении сайта.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">💼</span>
        <div class="feature-title">Фриланс и услуги</div>
        <p class="feature-desc">86 815 постов в разделе услуг. Разместите своё предложение или найдите специалиста по разработке, дизайну, SEO или продвижению в социальных сетях.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">🏪</span>
        <div class="feature-title">Купить и продать</div>
        <p class="feature-desc">166 610 постов в самом большом разделе форума. Покупайте и продавайте сайты, аккаунты, трафик, домены и другие цифровые активы.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">📈</span>
        <div class="feature-title">SEO и раскрутка</div>
        <p class="feature-desc">Обсудите стратегии продвижения, алгоритмы поисковых систем, линкбилдинг и контент-маркетинг с практиками, которые сами всё проверили на своих проектах.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">🌐</span>
        <div class="feature-title">Хостинг и домены</div>
        <p class="feature-desc">84 569 постов по выбору хостинга, регистраторов, переездам, настройке серверов и всему, что связано с инфраструктурой веб-проектов.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">🎨</span>
        <div class="feature-title">Графика и дизайн</div>
        <p class="feature-desc">62 370 постов по UI/UX, Photoshop, Figma, созданию логотипов, шаблонов и визуальному оформлению проектов любого масштаба.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">₿</span>
        <div class="feature-title">Криптовалюты</div>
        <p class="feature-desc">Обсуждение курсов, AirDrop-кампаний, бирж и крипто-инструментов. Узнайте о новых возможностях заработка в крипто-индустрии первыми.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">🤖</span>
        <div class="feature-title">AI и ChatGPT</div>
        <p class="feature-desc">Форум идёт в ногу со временем — специальный раздел для обсуждения нейросетей, промптов, автоматизации и применения AI в веб-разработке.</p>
      </div>

      <div class="feature-card reveal">
        <span class="feature-emoji">🕹️</span>
        <div class="feature-title">Арбитраж трафика</div>
        <p class="feature-desc">33 718 постов по монетизации трафика, партнёркам, ROI-кейсам и связкам. Один из наиболее активных разделов для арбитражников любого уровня.</p>
      </div>
    </div>
  </div>
</section>

<!-- ══ BIG NUMBERS ════════════════════════════════════ -->
<section class="numbers-section" id="numbers">
  <div class="section-inner">
    <div style="text-align:center">
      <div class="section-label" style="background:rgba(255,255,255,.12); color:rgba(255,255,255,.7)">Цифры говорят сами</div>
      <h2 class="section-title" style="color:#fff">Живая статистика<br><span class="accent">форума ByMAS</span></h2>
      <p class="section-sub" style="color:rgba(255,255,255,.5); margin:0 auto">
        Данные основаны на реальном содержании разделов форума, актуальном на сегодня.
      </p>
    </div>

    <div class="numbers-grid">
      <div class="num-card reveal">
        <span class="big-num"><span class="acc" id="cnt1">14 900</span><span style="color:rgba(255,255,255,.4)">+</span></span>
        <span class="num-label">Участников форума</span>
      </div>
      <div class="num-card reveal">
        <span class="big-num"><span class="acc" id="cnt2">618 187</span></span>
        <span class="num-label">Постов в «Свободном общении»</span>
      </div>
      <div class="num-card reveal">
        <span class="big-num"><span class="acc" id="cnt3">183 957</span></span>
        <span class="num-label">Ответов новичкам</span>
      </div>
      <div class="num-card reveal">
        <span class="big-num"><span class="acc" id="cnt4">166 610</span></span>
        <span class="num-label">Постов «Купить/Продать»</span>
      </div>
      <div class="num-card reveal">
        <span class="big-num"><span class="acc" id="cnt5">95 857</span></span>
        <span class="num-label">Постов в «Оценке сайтов»</span>
      </div>
      <div class="num-card reveal">
        <span class="big-num"><span class="acc" id="cnt6">86 815</span></span>
        <span class="num-label">Постов об услугах и фрилансе</span>
      </div>
      <div class="num-card reveal">
        <span class="big-num"><span class="acc" id="cnt7">84 569</span></span>
        <span class="num-label">Постов о хостингах и доменах</span>
      </div>
      <div class="num-card reveal">
        <span class="big-num"><span class="acc">15</span> <span style="font-size:28px; color:rgba(255,255,255,.5)">лет</span></span>
        <span class="num-label">Непрерывной работы форума</span>
      </div>
    </div>
  </div>
</section>

<!-- ══ TOP SECTIONS ═══════════════════════════════════ -->
<section class="top-section">
  <div class="section-inner">
    <div style="text-align:center; margin-bottom:52px">
      <div class="section-label">Топ активности</div>
      <h2 class="section-title">Самые популярные<br><span class="accent">разделы форума</span></h2>
    </div>

    <div class="top-list">
      <div class="top-item reveal">
        <div class="top-rank">#1</div>
        <div class="top-info">
          <div class="top-name">💬 Свободное общение</div>
          <div class="top-meta">Раздел: Общение/Трёп</div>
        </div>
        <div class="top-count">618 187 постов</div>
      </div>

      <div class="top-item reveal">
        <div class="top-rank">#2</div>
        <div class="top-info">
          <div class="top-name">🎓 Обучение / Помощь новичкам</div>
          <div class="top-meta">Раздел: Инженерия</div>
        </div>
        <div class="top-count">183 957 постов</div>
      </div>

      <div class="top-item reveal">
        <div class="top-rank">#3</div>
        <div class="top-info">
          <div class="top-name">🏪 Купить / Продать</div>
          <div class="top-meta">Раздел: Интернет-коммерция</div>
        </div>
        <div class="top-count">166 610 постов</div>
      </div>

      <div class="top-item reveal">
        <div class="top-rank">#4</div>
        <div class="top-info">
          <div class="top-name">💼 Услуги / Фриланс</div>
          <div class="top-meta">Раздел: Интернет-коммерция</div>
        </div>
        <div class="top-count">86 815 постов</div>
      </div>

      <div class="top-item reveal">
        <div class="top-rank">#5</div>
        <div class="top-info">
          <div class="top-name">🌐 Хостинги / Домены</div>
          <div class="top-meta">Раздел: Инженерия</div>
        </div>
        <div class="top-count">84 569 постов</div>
      </div>

      <div class="top-item reveal">
        <div class="top-rank">#6</div>
        <div class="top-info">
          <div class="top-name">⭐ Оценка сайтов</div>
          <div class="top-meta">Раздел: Интернет-ресурсы</div>
        </div>
        <div class="top-count">95 857 постов</div>
      </div>

      <div class="top-item reveal">
        <div class="top-rank">#7</div>
        <div class="top-info">
          <div class="top-name">🎨 Графика / Дизайн</div>
          <div class="top-meta">Раздел: Инженерия</div>
        </div>
        <div class="top-count">62 370 постов</div>
      </div>

      <div class="top-item reveal">
        <div class="top-rank">#8</div>
        <div class="top-info">
          <div class="top-name">💬 Обсуждение (ByMAS)</div>
          <div class="top-meta">Раздел: ByMAS</div>
        </div>
        <div class="top-count">70 261 постов</div>
      </div>
    </div>
  </div>
</section>

<!-- ══ CTA ════════════════════════════════════════════ -->
<section class="cta-section">
  <div class="section-inner cta-inner" style="text-align:center">
    <div class="section-label">Присоединяйтесь</div>
    <h2 class="section-title">Готовы стать частью<br>сообщества <span style="color:#fff">ByMAS?</span></h2>
    <p class="section-sub">
      Регистрация бесплатна. Задайте вопрос, найдите клиента, продайте проект
      или просто пообщайтесь с коллегами — 14 900 участников уже ждут вас.
    </p>

    <a href="https://bym.guru/" target="_blank" rel="noopener" class="cta-btn">
      🚀 Перейти на ByMAS
    </a>

    <span class="cta-domain">bym.guru · Работаем с 2010 года</span>
  </div>
</section>

<!-- ══ FOOTER ═════════════════════════════════════════ -->
<footer>
  <div class="footer-inner">
    <div class="footer-top">
      <div>
        <div class="footer-logo">
          <div class="logo-icon">B</div>
          <span class="logo-text">ByMAS</span>
        </div>
        <p class="footer-about">
          Форум веб-программистов и вебмастеров. Работаем с 2010 года.
          Здесь учатся, зарабатывают и строят проекты тысячи специалистов
          со всего русскоязычного интернета.
        </p>
        <a href="https://bym.guru/" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;padding:10px 20px;border-radius:8px;transition:background .2s" onmouseover="this.style.background='var(--accent-dark)'" onmouseout="this.style.background='var(--accent)'">
          Открыть форум →
        </a>
      </div>

      <div>
        <div class="footer-col-title">Разделы</div>
        <ul class="footer-links">
          <li><a href="https://bym.guru/" target="_blank">Инженерия</a></li>
          <li><a href="https://bym.guru/" target="_blank">Веб-разработка</a></li>
          <li><a href="https://bym.guru/" target="_blank">Программирование</a></li>
          <li><a href="https://bym.guru/" target="_blank">Интернет-коммерция</a></li>
          <li><a href="https://bym.guru/" target="_blank">Криптовалюты</a></li>
        </ul>
      </div>

      <div>
        <div class="footer-col-title">Сообщество</div>
        <ul class="footer-links">
          <li><a href="https://bym.guru/" target="_blank">Свободное общение</a></li>
          <li><a href="https://bym.guru/" target="_blank">Фриланс и услуги</a></li>
          <li><a href="https://bym.guru/" target="_blank">Купить/Продать</a></li>
          <li><a href="https://bym.guru/" target="_blank">Арбитраж трафика</a></li>
          <li><a href="https://bym.guru/" target="_blank">Интернет ресурсы</a></li>
        </ul>
      </div>

      <div>
        <div class="footer-col-title">Справка</div>
        <ul class="footer-links">
          <li><a href="https://bym.guru/" target="_blank">Правила форума</a></li>
          <li><a href="https://bym.guru/" target="_blank">Апелляции</a></li>
          <li><a href="https://bym.guru/" target="_blank">Жалобы</a></li>
          <li><a href="https://bym.guru/" target="_blank">Поиск</a></li>
          <li><a href="https://bym.guru/" target="_blank">Регистрация</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <div class="footer-copy">
        © 2010–2025 <a href="https://bym.guru/" target="_blank">ByMAS.RU</a> · Форум веб-программистов · Все права защищены
      </div>
      <div class="footer-since">
        <span>⭐</span> РАБОТАЕМ С 2010
      </div>
    </div>
  </div>
</footer>

<script src="app.js"></script>
</body>
</html>