/* =============================================================================
    DeeNet Studio — оптимизированная и подробно прокомментированная версия CSS

    ПРИНЦИП РЕДАКТИРОВАНИЯ:
    • исходные селекторы, значения и порядок каскада сохранены;
    • дизайн и логика сайта намеренно не изменялись;
    • добавлены только безопасные совместимые подстраховки;
    • форматирование приведено к единому виду;
    • адаптивные блоки сохранены на прежних контрольных точках;
    • повторяющиеся селекторы внутри @media не объединялись, потому что их порядок
      является частью каскада и может влиять на отображение сайта.

    ПЕРЕД ИЗМЕНЕНИЯМИ:
    1. Сделайте копию этого файла.
    2. Меняйте сначала переменные в :root.
    3. Не удаляйте правила только потому, что они кажутся повторяющимися:
       часть из них переопределяет стили для планшетов и телефонов.
   =============================================================================
*/

/* =============================================================================
      DeeNet Studio
      СТРУКТУРИРОВАННАЯ ВЕРСИЯ
      ЛОГИКА CSS НЕ ИЗМЕНЕНА.
      Выполнено только форматирование для удобства чтения.
   =============================================================================
*/

/* ===========================================================================
      ██████ DeeNet — ЭТОТ ФАЙЛ ОТВЕЧАЕТ ЗА ВНЕШНИЙ ВИД ВСЕГО САЙТА ██████
      ===========================================================================
      ⚠️  ЧТОБЫ НЕ СЛОМАТЬ САЙТ, НЕ МЕНЯЙТЕ ТОГО, ЧЕГО НЕ ПОНИМАЕТЕ.

      ✅ ЧТО МОЖНО МЕНЯТЬ БЕЗ СТРАХА:
         1. ЦВЕТА — в блоке :root (сразу под этим комментарием). Поменяли
            "--blue" — и все синие кнопки, ссылки и полоски стали другого цвета.
         2. ШРИФТ — в body, строка font-family (заменить на свой шрифт)
         3. РАЗМЕР ШРИФТА — в body, font-size
         4. ШИРИНУ СТРАНИЦЫ — в :root, строчка --content
         5. РАМКУ У КАРТОЧКИ — найдите ".category-card
   {
       border: ...;
   }

   "
            и замените на "border: none;" или удалите эту строчку.
         6. ЦВЕТ КНОПКИ "Войти" — ".button-primary
   {
       background: ...;
   }

   "

      ❌ ЛУЧШЕ НЕ ТРОГАТЬ:
         - Всё с position, z-index, transform (это расположение элементов)
         - Селекторы ::before и ::after (декоративные эффекты)
         - @media блоки (там настройки для телефонов и планшетов)
      ===========================================================================
*/

/* ⚠️ ПАЛИТРА ЦВЕТОВ И ГЛОБАЛЬНЫЕ НАСТРОЙКИ
      Здесь собраны все основные цвета сайта. Меняя переменную здесь,
      вы меняете цвет во всех связанных элементах.
*/

:root
{
  --page: #020711;

  /* ⬛ ФОН ВСЕГО САЙТА */

  --surface: rgba(7, 14, 29, .78);

  /* 📦 ФОН КАРТОЧЕК (полупрозрачный) */

  --surface-solid: #071020;

  /* 🪟 ФОН МОДАЛЬНЫХ ОКОН */

  --surface-soft: #0a1428;

  /* 📝 ФОН ПОЛЕЙ ВВОДА */

  --surface-card: #0d1623;

  /* 📦 ФОН КАРТОЧЕК В КОНФИГУРАТОРЕ */

  --surface-secondary: #141b2e;

  /* 📦 ВТОРИЧНЫЙ ФОН */

  --text: #f6f8ff;

  /* 📖 ЦВЕТ ОСНОВНОГО ТЕКСТА */

  --text-secondary: #9ba7bd;

  /* 👻 ВТОРИЧНЫЙ ТЕКСТ */

  --muted: #9ba7bd;

  /* 👻 ЦВЕТ БЛЕКЛОГО ТЕКСТА (даты, подписи) */

  --line: rgba(117, 149, 218, .28);

  /* ➖ ЦВЕТ РАЗДЕЛИТЕЛЬНЫХ ЛИНИЙ */

  --border-color: rgba(117, 149, 218, .28);

  --blue: #2f92ff;

  /* 🔵 ГЛАВНЫЙ СИНИЙ (Windows, ссылки) */

  --blue-bright: #44b5ff;

  /* 🔵 ЯРКИЙ СИНИЙ ПРИ НАВЕДЕНИИ */

  --primary: #2f92ff;

  --primary-light: #44b5ff;

  --violet: #8a48ff;

  /* 🟣 ФИОЛЕТОВЫЙ (Наши услуги) */

  --orange: #ff914d;

  /* 🟠 ОРАНЖЕВЫЙ (Gaming) */

  --aqua: #25dcdd;

  /* 🟢 БИРЮЗОВЫЙ (AI) */

  --yellow: #ffc84e;

  /* 🟡 ЖЕЛТЫЙ (Полезное) */

  --warning: #ffc03d;

  --radius: 14px;

  /* 🟩 СКРУГЛЕНИЕ УГЛОВ */

  --shadow: 0 16px 42px rgba(0, 0, 0, .35);

  /* 🌑 ТЕНЬ ПОД КАРТОЧКАМИ */

  --content: min(1160px, calc(100% - 48px));

  /* 📐 ШИРИНА КОНТЕНТА */
}

/* ✦ НЕОНОВО-ФИОЛЕТОВАЯ ТЕМА — активируется через JS добавлением класса .light-mode к body */

body.light-mode
{
  --page: #160a26;

  /* ☀️ ФОН СТРАНИЦЫ (светлый) */

  --surface: rgba(40, 20, 63, .9);

  /* ☀️ ФОН КАРТОЧЕК */

  --surface-solid: #211139;

  /* ☀️ БЕЛЫЙ ФОН (окна) */

  --surface-soft: #2a1747;

  /* ☀️ ФОН ПОЛЕЙ ВВОДА */

  --surface-card: #2c1951;

  /* ☀️ ФОН КАРТОЧЕК */

  --surface-secondary: #371f5e;

  /* ☀️ ВТОРИЧНЫЙ ФОН */

  --text: #f7efff;

  /* ☀️ ЦВЕТ ТЕКСТА (тёмный) */

  --text-secondary: #d1bedf;

  /* ☀️ ВТОРИЧНЫЙ ТЕКСТ */

  --muted: #c3b1d5;

  /* ☀️ НЕЯРКИЙ ТЕКСТ */

  --line: rgba(215, 135, 255, .32);

  /* ☀️ ЛИНИИ И РАМКИ */

  --border-color: rgba(215, 135, 255, .32);

  /* ☀️ ЦВЕТ РАМОК */

  --shadow: 0 16px 42px rgba(0, 0, 0, .28);

  /* ☀️ ТЕНЬ */

  --primary: #c778ff;

  /* ☀️ ОСНОВНОЙ ЦВЕТ */

  --primary-light: #edb5ff;

  --blue: #c778ff;

  --blue-bright: #edb5ff;

  --violet: #d783ff;

  /* ☀️ СВЕТЛЫЙ ОСНОВНОЙ ЦВЕТ */
}

/* Неоновая тема: общие поверхности сохраняют читаемость и не наследуют тёмные декоративные слои. */
body.light-mode
{
  color-scheme: dark;
}

body.light-mode .site-header,
body.light-mode .site-footer
{
  background: rgba(22, 10, 38, .92);
  border-color: rgba(215, 135, 255, .25);
}

body.light-mode .page-stat,
body.light-mode .category-banner,
body.light-mode .topic-card,
body.light-mode .article-card,
body.light-mode .resource-card
{
  background: linear-gradient(145deg, rgba(64, 33, 97, .96), rgba(30, 14, 51, .95));
  border-color: rgba(215, 135, 255, .25);
}

body.light-mode .page-stat span,
body.light-mode .article-card p,
body.light-mode .topic-card p,
body.light-mode .category-banner p
{
  color: #d4c0e3;
}

body.light-mode::before
{
  background: radial-gradient(circle at 67% 14%, rgba(195, 82, 255, .32), transparent 27rem), radial-gradient(circle at 84% 42%, rgba(111, 57, 255, .24), transparent 26rem), linear-gradient(125deg, transparent 52%, rgba(123, 37, 191, .16));
}

body.light-mode::after
{
  opacity: .18;
  background-image: linear-gradient(rgba(232, 169, 255, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 169, 255, .2) 1px, transparent 1px);
}

/* ===== БАЗОВЫЕ НАСТРОЙКИ ===== */

/* Универсальный сброс — чтобы блоки вели себя предсказуемо */

*
{
  box-sizing: border-box;
}

/* Плавная прокрутка страницы */

html
{
  scroll-behavior: smooth;
}

/* ⚠️ ГЛАВНЫЕ НАСТРОЙКИ СТРАНИЦЫ:
      font-family = ШРИФТ (Inter — современный, замените на Arial если плохо читается)
      font-size = РАЗМЕР ШРИФТА (сейчас 15 пикселей)
*/

body
{
  margin: 0;

  min-width: 320px;

  color: var(--text);

  background: var(--page);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 15px;

  line-height: 1.55;
}

/* Красивое свечение на фоне — просто для декора */

body::before
{
  content: "";

  position: fixed;

  z-index: -2;

  inset: 0;

  pointer-events: none;

  background: radial-gradient(circle at 63% 13%, rgba(40, 87, 232, .22), transparent 26rem), radial-gradient(circle at 85% 34%, rgba(115, 25, 255, .13), transparent 25rem), linear-gradient(125deg, transparent 60%, rgba(22, 57, 124, .08));
}

/* Сетка на фоне (если хотите убрать — закомментируйте весь блок) */

body::after
{
  content: "";

  position: fixed;

  z-index: -1;

  inset: 0;

  pointer-events: none;

  opacity: .15;

  background-image: linear-gradient(rgba(107, 157, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 157, 255, .18) 1px, transparent 1px);

  background-size: 80px 80px;

  mask-image: linear-gradient(to bottom, black, transparent 65%);
}

/* Когда открыто всплывающее окно — запрещаем прокрутку */

body.modal-open
{
  overflow: hidden;
}

/* Ссылки — без подчёркивания */

a
{
  color: inherit;

  text-decoration: none;
}

/* Кнопки и поля ввода — как вся страница */

button,
input
{
  font: inherit;
}

button
{
  color: inherit;

  cursor: pointer;
}

/* Картинки не вылезают за края */

img
{
  max-width: 100%;
}

/* Ширина полосы с контентом (--content задаётся в :root выше) */

.section-shell
{
  width: var(--content);

  margin-inline: auto;
}

/* ===========================================================================
      🏠 ШАПКА САЙТА (логотип, меню, кнопка "Войти")
      ===========================================================================
*/

/* Шапка приклеивается к верху экрана */

.site-header
{
  position: sticky;

  z-index: 30;

  top: 0;

  /* Запасной фон для браузеров без поддержки color-mix(). */

  background: var(--page);

  background: color-mix(in srgb, var(--page) 77%, transparent);

  border-bottom: 1px solid rgba(102, 139, 219, .12);

  /* Префикс нужен старым версиям Safari. */

  -webkit-backdrop-filter: blur(18px);

  backdrop-filter: blur(18px);
}

/* Внутренняя часть шапки — логотип + меню + кнопки */

.header-inner
{
  min-height: 76px;

  display: flex;

  align-items: center;

  gap: 34px;
}

/* Логотип "DeeNet" слева */

.logo
{
  width: 128px;

  display: inline-flex;

  flex-direction: column;

  line-height: 1;

  flex-shrink: 0;
}

.logo strong
{
  color: var(--text);

  font-size: 26px;

  font-style: italic;

  letter-spacing: -1.6px;
}

.logo strong span
{
  color: var(--blue);
}

/* Буква N — цветная */

.logo small
{
  margin-top: 5px;

  color: var(--muted);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 2.4px;

  text-transform: uppercase;
}

/* Меню навигации по центру */

.main-nav
{
  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 29px;
}

/* Каждый пункт меню */

.main-nav a
{
  position: relative;

  padding: 28px 0 25px;

  color: var(--text);

  font-size: 13px;

  white-space: nowrap;

  transition: color .2s ease;
}

/* Синяя полоска под пунктом меню при наведении или выборе */

.main-nav a::after
{
  content: "";

  position: absolute;

  right: 0;

  bottom: 17px;

  left: 0;

  height: 2px;

  background: var(--blue);

  border-radius: 4px;

  transform: scaleX(0);

  transform-origin: center;

  transition: transform .2s ease;
}

.main-nav a:hover,
.main-nav a.is-active
{
  color: var(--blue-bright);
}

.main-nav a:hover::after,
.main-nav a.is-active::after
{
  transform: scaleX(1);
}

/* Правая часть шапки — поиск, луна */

.header-actions
{
  display: flex;

  align-items: center;

  gap: 12px;
}

/* Иконки-кнопки (🔍 поиск, ☾ тема) */

.icon-button
{
  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--text);

  font-size: 24px;

  line-height: 1;
}

.icon-button:hover
{
  color: var(--blue-bright);
}

/* Кнопка луны чуть меньше */

/* Кнопка-бургер (три полоски) для телефонов — скрыта на больших экранах */

.menu-toggle
{
  display: none;
}

.button-row
{
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 25px;
}

.button
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 45px;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s ease;
  /* Единый стиль: прозрачный фон и белая рамка */
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.button:hover
{
  transform: translateY(-2px);
  border-color: var(--blue-bright);
}

/* Удаляем градиенты и тени у первичных кнопок */
.button-primary
{
  background: transparent;
}

.button-primary:hover
{
  box-shadow: none;
}

/* Удаляем специфический фон у ghost-кнопок */
.button-ghost
{
  background: transparent;
}

.button-small
{
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12px;
}

/* Фон модальных окон затемняет страницу, но не зависит от сторонних библиотек. */

.search-panel
{
  position: fixed;

  z-index: 60;

  inset: 0;

  display: grid;

  place-items: start center;

  padding: 12vh 20px 20px;

  background: rgba(0, 4, 14, .75);

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s ease;
}

.search-panel[aria-hidden="false"]
{
  opacity: 1;

  pointer-events: auto;
}

.search-dialog
{
  position: relative;

  width: min(680px, 100%);

  padding: 34px;

  border: 1px solid rgba(84, 118, 255, .65);

  border-radius: 15px;

  background: var(--surface-solid);

  box-shadow: 0 25px 80px rgba(0, 0, 0, .52), 0 0 28px rgba(58, 90, 255, .18);

  transform: translateY(-12px);

  transition: transform .2s ease;
}

.search-panel[aria-hidden="false"] .search-dialog
{
  transform: translateY(0);
}

.close-panel
{
  position: absolute;

  top: 13px;

  right: 16px;

  border: 0;

  background: transparent;

  color: var(--muted);

  font-size: 28px;

  line-height: 1;
}

.close-panel:hover
{
  color: var(--text);
}

.section-kicker,
.eyebrow
{
  margin: 0 0 11px;

  color: var(--blue-bright);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1.15px;

  text-transform: uppercase;
}

.search-field
{
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 14px;

  border: 1px solid var(--line);

  border-radius: 9px;

  background: var(--surface-soft);
}

.search-field span
{
  color: var(--blue-bright);

  font-size: 23px;
}

.search-field input
{
  width: 100%;

  padding: 14px 0;

  border: 0;

  outline: 0;

  color: var(--text);

  background: transparent;
}

.search-results
{
  min-height: 95px;

  padding-top: 13px;
}

.search-results p
{
  color: var(--muted);
}

.search-results a
{
  display: grid;

  grid-template-columns: 120px 1fr auto;

  align-items: center;

  gap: 10px;

  padding: 12px 7px;

  border-bottom: 1px solid var(--line);

  font-weight: 700;
}

.search-results a:hover
{
  color: var(--blue-bright);
}

.search-results a span
{
  color: var(--violet);

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;
}

.form-note
{
  margin: 0;

  color: var(--muted);

  font-size: 11px;
}

/* ===========================================================================
      Главная страница
      ===========================================================================
*/

/* ========== ГЕРОЙ-БЛОК (Первый экран главной страницы) ========== */

.hero
{
  position: relative;

  min-height: 474px;

  display: grid;

  grid-template-columns: .79fr 1.21fr;

  align-items: center;

  gap: 15px;

  padding: 54px 0 20px;

  overflow: hidden;
}

.hero-copy
{
  position: relative;

  z-index: 2;

  max-width: 470px;
}

.eyebrow
{
  display: inline-block;

  padding: 5px 10px;

  border: 1px solid rgba(46, 143, 255, .56);

  border-radius: 999px;

  font-size: 9px;

  letter-spacing: .45px;
}

.hero h1
{
  margin: 8px 0 12px;

  font-size: clamp(53px, 5.7vw, 78px);

  line-height: .96;

  letter-spacing: -4px;
}

.hero h1 span
{
  background: linear-gradient(100deg, var(--blue), #9b3ff0);

  background-clip: text;

  -webkit-background-clip: text;

  color: transparent;
}

.lead
{
  margin: 0;

  max-width: 470px;

  color: #bac3d4;

  font-size: 14px;

  line-height: 1.7;
}

.community
{
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 28px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.35;
}

.community p
{
  margin: 0;
}

.community strong
{
  color: var(--text);

  font-weight: 600;
}

.avatar-stack
{
  display: flex;

  padding-left: 5px;
}

.avatar-stack span
{
  width: 31px;

  height: 31px;

  display: grid;

  place-items: center;

  margin-left: -5px;

  border: 2px solid var(--surface-solid);

  border-radius: 50%;

  color: #fff;

  background: linear-gradient(140deg, #347ee3, #552781);

  font-size: 11px;

  font-weight: 800;
}

.avatar-stack span:nth-child(2)
{
  background: linear-gradient(140deg, #d47b41, #6b283d);
}

.avatar-stack span:nth-child(3)
{
  background: linear-gradient(140deg, #62936e, #1d4b78);
}

.avatar-stack span:nth-child(4)
{
  background: linear-gradient(140deg, #b14b65, #463aa6);
}

.hero-with-img
{
  display: grid;

  grid-template-columns: 1.2fr .8fr;

  align-items: center;

  gap: 30px;

  margin-bottom: 30px;
}

/* ===== ТЕЛЕФОНЫ И УЗКИЕ ПЛАНШЕТЫ: многоколоночные блоки перестраиваются в одну колонку. ===== */

@media (max-width: 760px)
{
  .hero-with-img
  {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .hero-visual
  {
    min-height: 250px;
  }
}

/* Иллюстрация на первом экране. */

.hero-visual
{
  position: relative;

  min-height: 420px;

  display: flex;

  align-items: center;

  justify-content: center;

  filter: drop-shadow(0 0 40px rgba(47, 146, 255, 0.35));

  padding: 30px 60px 30px 30px;
}

.hero-img
{
  width: 100%;

  height: auto;

  max-height: 450px;

  object-fit: contain;

  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent),
    linear-gradient(to right, transparent, black 15%, black 85%, transparent);

  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent),
    linear-gradient(to right, transparent, black 15%, black 85%, transparent);

  mask-composite: intersect;

  -webkit-mask-composite: source-in;

  image-rendering: -webkit-optimize-contrast;
}

/* ===========================================================================
      📦 КАРТОЧКИ РАЗДЕЛОВ НА ГЛАВНОЙ
      ---------------------------------------------------------------------------
      Сетка из 6 карточек: Windows, Coding, Gaming, AI, Полезное, Сборки.
      ⚠️ Чтобы убрать рамку у карточки — удалите "border: 1px solid var(--line)"
      ===========================================================================
*/

.categories
{
  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 12px;

  padding-top: 14px;
}

/* ⚠️ КАРТОЧКА РАЗДЕЛА — border отвечает за рамку, удалите если не нужна */

.category-card
{
  position: relative;

  min-height: 179px;

  display: flex;

  flex-direction: column;

  padding: 21px 16px 15px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: linear-gradient(145deg, var(--surface), rgba(4, 9, 19, .65));

  box-shadow: inset 0 1px rgba(255, 255, 255, .03);

  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

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

  border-color: currentColor;

  box-shadow: var(--shadow);
}

.category-card::after
{
  content: "";

  position: absolute;

  right: -20px;

  bottom: -35px;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background: currentColor;

  opacity: .05;

  filter: blur(15px);
}

/* Иконка внутри карточки */

.category-symbol
{
  position: relative;

  z-index: 1;

  width: 44px;

  height: 44px;

  display: grid;

  place-items: center;

  margin-bottom: 12px;

  color: currentColor;

  font-size: 31px;

  font-weight: 800;

  line-height: 1;
}

/* Название раздела */

.category-card h2
{
  position: relative;

  z-index: 1;

  margin: 0 0 5px;

  color: var(--text);

  font-size: 16px;
}

.category-card p
{
  position: relative;

  z-index: 1;

  margin: 0;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.5;
}

.card-arrow
{
  position: relative;

  z-index: 1;

  margin-top: auto;

  align-self: flex-end;

  font-size: 18px;
}

/* 🔵 Цвета разделов — каждый со своим оттенком */

.windows-card
{
  color: var(--blue-bright);
}

/* Windows — синий */

.coding-card
{
  color: #9d6bff;
}

/* Coding — фиолетовый */

.gaming-card
{
  color: var(--orange);
}

/* Gaming — оранжевый */

.ai-card
{
  color: var(--aqua);
}

/* AI — бирюзовый */

.useful-card
{
  color: var(--yellow);
}

/* Полезное — жёлтый */

.builds-card
{
  color: #a25fff;
}

/* Сборки ПК — фиолетовый */

/* 🐧 Linux — терминальный зелёный */

.linux-card
{
  color: #33ff66;
}

.linux-card .category-symbol
{
  font-size: 22px;

  width: 38px;

  height: 30px;

  border: 1px solid #33ff66;

  border-radius: 4px;

  background: rgba(0, 20, 0, .5);

  box-shadow: 0 0 6px rgba(51, 255, 102, .2);

  color: #33ff66;
}

.linux-card::before
{
  content: "$ ./course.sh";

  position: absolute;

  bottom: 52px;

  left: 16px;

  font-family: 'Courier New', monospace;

  font-size: 8px;

  color: rgba(51, 255, 102, .35);

  letter-spacing: .5px;

  pointer-events: none;
}

.linux-card:hover
{
  border-color: #33ff66;

  box-shadow: 0 0 20px rgba(51, 255, 102, .15), var(--shadow);
}

.linux-card p
{
  color: #99ccaa;
}

.linux-card:hover p
{
  color: #b3ffcc;
}

/* ☀️ Светлая тема для Linux-карточки */

body.light-mode .linux-card
{
  color: #e4a8ff;
}

body.light-mode .linux-card .category-symbol
{
  border-color: #d783ff;

  background: rgba(215, 131, 255, .1);

  box-shadow: 0 0 12px rgba(215, 131, 255, .28);

  color: #e4a8ff;
}

body.light-mode .linux-card::before
{
  color: rgba(225, 168, 255, .3);
}

body.light-mode .linux-card:hover
{
  border-color: #d783ff;

  box-shadow: 0 0 24px rgba(215, 131, 255, .24), var(--shadow);
}

body.light-mode .linux-card p
{
  color: #d4c0e3;
}

.articles-section
{
  padding-top: 23px;
}

.section-heading
{
  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 12px;
}

.section-heading h2
{
  margin: 0;

  font-size: 21px;

  letter-spacing: -.5px;
}

.heading-line
{
  height: 1px;

  flex: 1;

  background: linear-gradient(90deg, #276dee 0 25%, rgba(57, 94, 181, .24) 25% 100%);
}

.section-heading .button
{
  margin-left: auto;
}

.article-grid
{
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 13px;
}

.article-card
{
  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: var(--surface);

  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;

  will-change: transform;
}

.article-card:hover
{
  transform: translateY(-8px) scale(1.03);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

  z-index: 5;
}

.article-art
{
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  display: block;

  overflow: hidden;

  border-bottom: 1px solid var(--line);
}

.article-art img
{
  width: 100%;

  height: 100%;

  object-fit: cover;

  image-rendering: -webkit-optimize-contrast;
}

.article-body
{
  padding: 12px 14px 11px;
}

.article-body h3
{
  margin: 0 0 4px;

  font-size: 15px;

  line-height: 1.25;
}

.article-body h3 a:hover
{
  color: var(--blue-bright);
}

.article-body p
{
  min-height: 46px;

  margin: 0;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.45;
}

.article-meta
{
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 6px;

  margin-top: 10px;

  padding-top: 8px;

  border-top: 1px solid rgba(113, 141, 197, .15);

  color: var(--muted);

  font-size: 9px;
}

.article-meta a
{
  color: var(--blue-bright);

  font-weight: 700;
}

.article-meta a span
{
  font-size: 14px;
}

.windows-promo
{
  position: relative;

  min-height: 310px;

  display: grid;

  grid-template-columns: .9fr 1.1fr;

  margin-top: 17px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 11px;

  background: linear-gradient(105deg, rgba(7, 24, 53, .9), rgba(4, 13, 36, .64));
}

.windows-promo::before
{
  content: "";

  position: absolute;

  z-index: -1;

  right: -10%;

  bottom: -60%;

  width: 70%;

  height: 150%;

  background: radial-gradient(ellipse, rgba(16, 98, 245, .54), transparent 62%);
}

.promo-copy
{
  padding: 24px 26px;
}

.promo-copy h2
{
  margin: 0 0 8px;

  font-size: 33px;

  line-height: 1.05;

  letter-spacing: -1.3px;
}

.promo-copy h2 span
{
  color: var(--blue);
}

.promo-copy > p:not(.section-kicker)
{
  max-width: 390px;

  margin: 0 0 12px;

  color: #d0d7e6;

  font-size: 11px;
}

.check-list
{
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3px 20px;

  max-width: 380px;

  margin: 0 0 16px;

  padding: 0;

  list-style: none;

  font-size: 10px;
}

.check-list li::before
{
  content: "✓";

  margin-right: 8px;

  color: var(--blue-bright);

  font-weight: 900;
}

.promo-copy .button
{
  min-height: 38px;

  padding: 8px 17px;

  font-size: 11px;
}

.promo-visual
{
  position: relative;

  min-height: 310px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  filter: drop-shadow(0 0 40px rgba(47, 146, 255, 0.3));
}

.promo-img
{
  width: 100%;

  height: 100%;

  object-fit: cover;

  mask-image: linear-gradient(to right, transparent 0%, black 35%, black 90%, transparent 100%);

  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%, black 90%, transparent 100%);

  image-rendering: -webkit-optimize-contrast;
}

.explore
{
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 11px;

  padding-top: 14px;
}

.explore-card
{
  position: relative;

  min-height: 120px;

  padding: 17px 15px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 9px;

  background: linear-gradient(90deg, rgba(5, 9, 22, .82), rgba(8, 15, 29, .18));

  transition: transform .2s, border-color .2s;
}

.explore-card:hover
{
  transform: translateY(-4px);

  border-color: var(--blue);
}

.explore-card::after
{
  content: "";

  position: absolute;

  z-index: -1;

  top: 0;

  right: 0;

  bottom: 0;

  width: 54%;

  opacity: .56;

  background: radial-gradient(ellipse at 77% 54%, var(--card-color), transparent 65%);
}

.explore-card span
{
  display: block;

  margin-bottom: 4px;

  font-size: 15px;

  font-weight: 800;
}

.explore-card p
{
  max-width: 165px;

  margin: 0;

  color: #c3cada;

  font-size: 9px;

  line-height: 1.5;
}

.explore-card b
{
  position: absolute;

  bottom: 14px;

  color: var(--blue-bright);

  font-size: 10px;
}

.explore-gaming
{
  --card-color: #d9672e;
}

.explore-coding
{
  --card-color: #831fff;
}

.explore-useful
{
  --card-color: #e78a28;
}

.explore-builds
{
  --card-color: #7a36ff;
}

.explore-linux
{
  --card-color: #33ff66;
}

/* Терминал в промо-блоке Linux */

.linux-terminal
{
  position: absolute;

  inset: 22px 22px 42px;

  border: 1px solid rgba(51, 255, 102, .3);

  border-radius: 8px;

  background: rgba(0, 6, 2, .92);

  box-shadow: 0 0 20px rgba(51, 255, 102, .08), inset 0 0 30px rgba(0, 20, 0, .3);

  overflow: hidden;

  display: flex;

  flex-direction: column;
}

.term-header
{
  display: flex;

  align-items: center;

  gap: 6px;

  padding: 8px 12px;

  border-bottom: 1px solid rgba(51, 255, 102, .15);

  background: rgba(0, 10, 3, .6);
}

.term-dot
{
  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #33ff66;

  opacity: .25;
}

.term-dot:nth-child(1)
{
  opacity: .5;
}

.term-dot:nth-child(2)
{
  opacity: .3;
}

.term-dot:nth-child(3)
{
  opacity: .15;
}

.term-title
{
  margin-left: auto;

  color: rgba(51, 255, 102, .25);

  font-family: 'Courier New', monospace;

  font-size: 8px;
}

.term-body
{
  flex: 1;

  padding: 14px 16px;

  font-family: 'Courier New', 'Consolas', monospace;

  font-size: 11px;

  line-height: 1.7;

  color: rgba(51, 255, 102, .7);

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.term-prompt
{
  color: #33ff66;

  white-space: nowrap;
}

.term-cmd
{
  color: #ccffdd;
}

.term-line
{
  color: rgba(51, 255, 102, .55);

  white-space: nowrap;
}

.term-green
{
  color: #33ff66 !important;
}

.term-yellow
{
  color: #99ff33 !important;
}

.term-dim
{
  color: rgba(51, 255, 102, .25) !important;

  font-size: 9px;
}

.term-blink
{
  animation: term-blink 1s step-end infinite;
}

@keyframes term-blink
{
  50%
  {
    opacity: 0;
  }
}

/* ===========================================================================
      📄 СТРАНИЦЫ РАЗДЕЛОВ, СТАТЬИ И ПОДБОРКИ
      ===========================================================================
*/

.page-hero
{
  position: relative;

  min-height: 265px;

  display: flex;

  flex-direction: column;

  gap: 14px;

  padding: 38px 0 16px;
}

.page-hero::after
{
  content: "";

  position: absolute;

  z-index: -1;

  top: -80%;

  right: 0;

  width: 51%;

  height: 190%;

  background: radial-gradient(ellipse, var(--hero-glow, rgba(54, 126, 255, .3)), transparent 62%);
}

.page-hero h1
{
  max-width: 570px;

  margin: 0 0 10px;

  font-size: clamp(38px, 5vw, 57px);

  line-height: 1.04;

  letter-spacing: -2.1px;
}

.page-hero h1 span
{
  color: var(--blue);
}

.page-hero .lead
{
  max-width: 600px;
}

.page-stat-grid
{
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 11px;

  margin-top: 10px;
}

.page-stat
{
  min-height: 80px;

  padding: 12px 15px;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: linear-gradient(140deg, rgba(14, 41, 101, .71), rgba(8, 12, 31, .54));
}

.page-stat b
{
  display: block;

  color: var(--blue-bright);

  font-size: 27px;

  line-height: 1.1;
}

.page-stat span
{
  color: var(--muted);

  font-size: 11px;
}

.content-section
{
  padding: 8px 0 10px;
}

/* Первый экран разделов: изображение — полноценная часть композиции, а не маленькая вставка справа. */
.page-hero .hero-with-img
{
  grid-template-columns: .96fr 1.04fr;
  gap: 4px;
  margin-bottom: 8px;
}

.page-hero .hero-copy
{
  position: relative;
  z-index: 2;
}

.page-hero .hero-visual
{
  min-height: 390px;
  padding: 4px 0 4px 16px;
  z-index: 1;
  justify-content: flex-end;
}

.page-hero .hero-img
{
  width: 100%;
  max-height: 500px;
  transform: scale(1.12);
  transform-origin: right center;
  mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent),
    linear-gradient(to right, transparent, black 7%, black 93%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent),
    linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

.content-section > h2,
.section-title
{
  margin: 0 0 15px;

  font-size: 26px;

  letter-spacing: -.8px;
}

.category-banner
{
  display: grid;

  grid-template-columns: 1.3fr .7fr;

  gap: 24px;

  align-items: center;

  margin-bottom: 19px;

  padding: 25px 29px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: linear-gradient(120deg, rgba(15, 36, 84, .72), rgba(5, 12, 29, .78));
}

.category-banner h2
{
  margin: 0 0 7px;

  font-size: 25px;
}

.category-banner p
{
  margin: 0;

  color: var(--muted);
}

.banner-orb
{
  width: min(180px, 100%);

  aspect-ratio: 1;

  justify-self: center;

  border: 19px solid rgba(52, 147, 255, .55);

  border-right-color: #793df7;

  border-radius: 41% 57% 53% 47%;

  box-shadow: 0 0 35px rgba(29, 97, 255, .38), inset 0 0 30px #0c267b;

  transform: rotate(-22deg);
}

/* У каждого раздела свой полезный вводный сценарий вместо общего декоративного баннера. */
.section-promo
{
  position: relative;

  display: grid;

  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);

  gap: 28px;

  align-items: center;

  min-height: 285px;

  margin-bottom: 19px;

  padding: 28px 30px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 16px;
}

.section-promo::before
{
  position: absolute;

  inset: 0;

  content: "";

  opacity: .9;

  pointer-events: none;
}

.section-promo > *
{
  position: relative;

  z-index: 1;
}

.section-promo-copy h2
{
  max-width: 600px;

  margin: 0 0 8px;

  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
}

.section-promo-copy > p:not(.section-kicker)
{
  max-width: 650px;

  margin: 0;

  color: var(--muted);

  line-height: 1.65;
}

.windows-task-list,
.gaming-checks
{
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 9px;

  margin-top: 20px;
}

.windows-task-list a,
.gaming-checks a,
.linux-route a,
.coding-workflow a
{
  text-decoration: none;
}

.windows-task-list a,
.gaming-checks a
{
  display: grid;

  gap: 3px;

  min-height: 86px;

  padding: 12px;

  border: 1px solid rgba(135, 187, 255, .2);

  border-radius: 10px;

  background: rgba(7, 21, 49, .42);

  color: var(--text);

  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.gaming-checks .gaming-check
{
  display: grid;

  gap: 3px;

  min-height: 86px;

  padding: 12px;

  border: 1px dashed rgba(255, 142, 70, .26);

  border-radius: 10px;

  color: var(--text);
}

.gaming-checks .is-coming
{
  opacity: .72;
}

.windows-task-list a:hover,
.gaming-checks a:hover,
.linux-route a:hover,
.coding-workflow a:hover
{
  transform: translateY(-3px);
}

.windows-task-list span,
.gaming-checks span
{
  color: var(--blue-bright);

  font-size: 11px;

  font-weight: 800;
}

.windows-task-list b,
.gaming-checks b
{
  font-size: 14px;
}

.windows-task-list small,
.gaming-checks small,
.linux-route small,
.coding-workflow small
{
  color: var(--muted);

  font-size: 11px;

  line-height: 1.35;
}

.section-promo-windows
{
  background: linear-gradient(118deg, rgba(12, 38, 91, .94), rgba(6, 15, 36, .91));
}

.section-promo-windows::before
{
  background: radial-gradient(circle at 84% 14%, rgba(65, 175, 255, .34), transparent 26%), linear-gradient(130deg, transparent 57%, rgba(107, 69, 255, .18));
}

.windows-dashboard
{
  overflow: hidden;

  border: 1px solid rgba(139, 190, 255, .33);

  border-radius: 13px;

  box-shadow: 0 20px 45px rgba(0, 0, 0, .26);

  background: rgba(9, 25, 58, .86);
}

.windows-dashboard-bar
{
  display: flex;

  align-items: center;

  gap: 6px;

  padding: 11px 13px;

  border-bottom: 1px solid rgba(156, 200, 255, .17);

  background: rgba(60, 116, 207, .22);

  font-size: 11px;
}

.windows-dashboard-bar i
{
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #7acbff;
}

.windows-dashboard-bar b
{
  margin-left: auto;

  color: #bcdcff;

  font-weight: 600;
}

.windows-dashboard-body
{
  display: grid;

  gap: 12px;

  padding: 18px;
}

.windows-tile
{
  display: grid;

  grid-template-columns: auto 1fr;

  column-gap: 10px;

  padding: 13px;

  border-radius: 10px;

  background: linear-gradient(120deg, rgba(45, 139, 255, .35), rgba(100, 72, 255, .2));
}

.windows-tile span
{
  grid-row: span 2;

  align-self: center;

  color: #82e5ff;

  font-size: 21px;
}

.windows-tile small,
.windows-meter span,
.windows-dashboard-row span
{
  color: #bad4f4;

  font-size: 11px;
}

.windows-meter
{
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 8px;

  align-items: center;
}

.windows-meter b
{
  color: #86ddff;
}

.windows-meter em
{
  grid-column: span 2;

  height: 6px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255, 255, 255, .1);
}

.windows-meter i
{
  display: block;

  width: 98%;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, #58b9ff, #8965ff);
}

.windows-dashboard-row
{
  display: flex;

  justify-content: space-between;

  padding-top: 10px;

  border-top: 1px solid rgba(156, 200, 255, .14);
}

.windows-dashboard-row b
{
  color: #89caff;

  font-size: 11px;
}

.section-promo-linux
{
  background: linear-gradient(118deg, rgba(3, 46, 26, .94), rgba(2, 20, 13, .92));
}

.section-promo-linux::before
{
  background: radial-gradient(circle at 83% 16%, rgba(45, 255, 134, .2), transparent 29%), linear-gradient(132deg, transparent 52%, rgba(21, 168, 83, .15));
}

.section-promo-linux .section-kicker,
.linux-route b
{
  color: var(--linux-green);
}

.linux-route,
.coding-workflow
{
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 9px;

  margin-top: 20px;
}

.linux-route a,
.coding-workflow a
{
  display: grid;

  gap: 5px;

  min-height: 82px;

  padding: 12px;

  border-left: 2px solid rgba(51, 255, 102, .55);

  background: rgba(1, 25, 14, .46);

  color: var(--text);

  transition: transform .2s ease, background .2s ease;
}

.linux-route span,
.coding-workflow span
{
  font-size: 14px;

  font-weight: 700;
}

.linux-console
{
  min-height: 204px;

  padding: 17px;

  border: 1px solid rgba(51, 255, 102, .3);

  border-radius: 11px;

  box-shadow: 0 20px 42px rgba(0, 0, 0, .28);

  background: rgba(1, 16, 10, .86);

  color: #c9ffdb;

  font-family: Consolas, "Courier New", monospace;

  font-size: 12px;
}

.linux-console > div
{
  display: flex;

  justify-content: space-between;

  margin-bottom: 24px;

  color: #6dff9a;
}

.linux-console small,
.linux-console-dim
{
  color: #79b98e;
}

.linux-console p
{
  margin: 9px 0;
}

.linux-console i,
.linux-console b
{
  color: #33ff66;

  font-style: normal;
}

.linux-console-output
{
  color: #effff2;
}

.section-promo-coding
{
  background: linear-gradient(118deg, rgba(42, 18, 86, .94), rgba(13, 12, 40, .94));
}

.section-promo-coding::before
{
  background: radial-gradient(circle at 82% 16%, rgba(174, 83, 255, .32), transparent 29%), linear-gradient(135deg, transparent 55%, rgba(49, 112, 255, .16));
}

.section-promo-coding .section-kicker,
.coding-workflow b
{
  color: #d89bff;
}

.coding-workflow a
{
  border-left-color: rgba(215, 135, 255, .58);

  background: rgba(28, 13, 62, .48);
}

.coding-editor
{
  overflow: hidden;

  border: 1px solid rgba(204, 146, 255, .32);

  border-radius: 12px;

  box-shadow: 0 20px 42px rgba(0, 0, 0, .3);

  background: #130d2d;

  font-family: Consolas, "Courier New", monospace;
}

.coding-editor-tabs
{
  display: flex;

  gap: 2px;

  padding: 8px 8px 0;

  border-bottom: 1px solid rgba(218, 170, 255, .16);

  background: #241646;
}

.coding-editor-tabs span
{
  padding: 8px 9px;

  color: #b7a2d4;

  font-size: 10px;
}

.coding-editor-tabs .is-active
{
  border-radius: 5px 5px 0 0;

  background: #130d2d;

  color: #f1dcff;
}

.coding-editor pre
{
  margin: 0;

  padding: 19px;

  color: #ddc9f6;

  font-size: 12px;

  line-height: 1.75;
}

.coding-editor code i
{
  color: #c77dff;

  font-style: normal;
}

.coding-editor code em
{
  color: #a3e7d0;

  font-style: normal;
}

.coding-editor code strong
{
  color: #8ec4ff;
}

.coding-editor code b
{
  color: #f0b4ff;
}

.coding-editor > p
{
  margin: 0;

  padding: 11px 16px;

  border-top: 1px solid rgba(218, 170, 255, .14);

  color: #af95cd;

  font-size: 11px;
}

.coding-editor > p span
{
  color: #62e8a3;
}

.section-promo-gaming
{
  background: linear-gradient(118deg, rgba(71, 22, 8, .95), rgba(30, 10, 9, .94));
}

.section-promo-gaming::before
{
  background: radial-gradient(circle at 84% 15%, rgba(255, 100, 34, .29), transparent 28%), linear-gradient(132deg, transparent 55%, rgba(244, 174, 45, .13));
}

.section-promo-gaming .section-kicker,
.gaming-checks span
{
  color: #ff9b55;
}

.gaming-checks a
{
  border-color: rgba(255, 142, 70, .23);

  background: rgba(48, 13, 7, .48);
}

.gaming-monitor
{
  padding: 17px;

  border: 1px solid rgba(255, 137, 65, .36);

  border-radius: 12px;

  box-shadow: 0 20px 42px rgba(0, 0, 0, .32);

  background: rgba(24, 9, 10, .88);
}

.gaming-monitor-head,
.gaming-fps
{
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.gaming-monitor-head
{
  color: #f4a071;

  font-size: 10px;

  letter-spacing: .1em;
}

.gaming-monitor-head b
{
  color: #ff6c51;

  font-size: 10px;
}

.gaming-fps
{
  margin: 22px 0;

  padding-bottom: 18px;

  border-bottom: 1px solid rgba(255, 161, 100, .17);
}

.gaming-fps small
{
  color: #b98d7c;
}

.gaming-fps strong
{
  margin-left: auto;

  color: #fff2de;

  font-size: 46px;

  line-height: 1;
}

.gaming-fps span
{
  margin-left: 9px;

  color: #ffb35c;

  font-size: 9px;

  font-weight: 800;
}

.gaming-bars
{
  display: grid;

  gap: 13px;
}

.gaming-bars p
{
  display: grid;

  grid-template-columns: 31px 1fr 31px;

  gap: 8px;

  align-items: center;

  margin: 0;

  color: #bb9482;

  font-size: 10px;
}

.gaming-bars b
{
  height: 6px;

  overflow: hidden;

  border-radius: 99px;

  background: rgba(255, 255, 255, .1);
}

.gaming-bars i
{
  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, #ff5f47, #ffc34f);
}

.gaming-bars em
{
  color: #ffd2bd;

  font-style: normal;
}

body.light-mode .section-promo
{
  border-color: rgba(215, 135, 255, .3);

  background: linear-gradient(118deg, rgba(62, 29, 91, .96), rgba(24, 11, 42, .96));
}

body.light-mode .section-promo::before
{
  background: radial-gradient(circle at 84% 14%, rgba(215, 135, 255, .31), transparent 29%), linear-gradient(132deg, transparent 55%, rgba(154, 72, 255, .16));
}

body.light-mode .windows-task-list a,
body.light-mode .gaming-checks a,
body.light-mode .gaming-checks .gaming-check,
body.light-mode .linux-route a,
body.light-mode .coding-workflow a
{
  border-color: rgba(215, 135, 255, .27);

  background: rgba(27, 12, 47, .63);
}

body.light-mode .windows-task-list span,
body.light-mode .gaming-checks span,
body.light-mode .section-promo-linux .section-kicker,
body.light-mode .linux-route b,
body.light-mode .section-promo-coding .section-kicker,
body.light-mode .coding-workflow b
{
  color: #edb5ff;
}

body.light-mode .windows-dashboard,
body.light-mode .linux-console,
body.light-mode .coding-editor,
body.light-mode .gaming-monitor
{
  border-color: rgba(215, 135, 255, .34);

  background: rgba(18, 7, 31, .9);
}

body.light-mode .windows-dashboard-bar,
body.light-mode .coding-editor-tabs
{
  background: rgba(82, 40, 117, .48);
}

body.light-mode .windows-dashboard-bar i,
body.light-mode .windows-meter i,
body.light-mode .gaming-bars i
{
  background: linear-gradient(90deg, #c778ff, #edb5ff);
}

body.light-mode .linux-console,
body.light-mode .linux-console-output
{
  color: #f1e3fb;
}

body.light-mode .linux-console > div,
body.light-mode .linux-console i,
body.light-mode .linux-console b,
body.light-mode .coding-editor > p span
{
  color: #edb5ff;
}

body.light-mode .linux-console small,
body.light-mode .linux-console-dim,
body.light-mode .coding-editor > p,
body.light-mode .gaming-bars p
{
  color: #d4c0e3;
}

body.light-mode .coding-editor-tabs .is-active
{
  background: #170b28;

  color: #f7efff;
}

body.light-mode .gaming-monitor-head,
body.light-mode .gaming-monitor-head b,
body.light-mode .gaming-fps span,
body.light-mode .gaming-bars em
{
  color: #edb5ff;
}

body.light-mode .gaming-fps small
{
  color: #d4c0e3;
}

body.light-mode .gaming-fps strong
{
  color: #fff0ff;
}

/* Игровые каталоги и практические гайды. */
.gaming-page
{
  max-width: 1080px;

  padding-top: 45px;

  padding-bottom: 80px;
}

.game-hub-hero,
.gaming-content-section,
.gaming-guide-section
{
  margin: 20px 0;

  padding: 28px;

  border: 1px solid rgba(255, 137, 65, .22);

  border-radius: 18px;

  background: rgba(39, 15, 12, .64);
}

.game-hub-hero
{
  position: relative;

  overflow: hidden;

  padding: 40px 34px;

  background: radial-gradient(circle at 87% 18%, rgba(255, 106, 45, .32), transparent 22rem), linear-gradient(118deg, rgba(73, 23, 10, .95), rgba(25, 10, 14, .96));
}

.game-hub-hero h1,
.gaming-guide h1
{
  max-width: 760px;

  margin: 10px 0;

  font-size: clamp(2.3rem, 5vw, 4.2rem);
}

.game-hub-hero h1 span
{
  color: #ff9d5e;
}

.game-hub-hero .lead,
.gaming-guide .lead
{
  max-width: 680px;
}

.game-hub-stats,
.game-queue-list
{
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 24px;
}

.game-hub-stats span,
.game-queue-list span
{
  padding: 9px 12px;

  border: 1px solid rgba(255, 164, 101, .25);

  border-radius: 999px;

  background: rgba(28, 10, 12, .4);

  color: #e4c2b3;

  font-size: 12px;
}

.game-hub-stats b
{
  margin-right: 4px;

  color: #ffad70;
}

.gaming-content-section > h2,
.gaming-guide-section h2
{
  margin-top: 0;
}

.game-ready-card
{
  display: grid;

  grid-template-columns: 130px minmax(0, 1fr) minmax(190px, .72fr);

  gap: 24px;

  align-items: center;

  padding: 23px;

  border: 1px solid rgba(255, 144, 73, .28);

  border-radius: 14px;

  background: linear-gradient(120deg, rgba(93, 30, 13, .5), rgba(31, 11, 14, .72));
}

.game-ready-card + .game-ready-card
{
  margin-top: 16px;
}

.game-ready-mark
{
  display: grid;

  place-content: center;

  min-height: 118px;

  border: 1px solid rgba(255, 167, 95, .4);

  border-radius: 12px;

  background: radial-gradient(circle, rgba(255, 128, 51, .32), transparent 66%);

  color: #ffe7d8;

  font-size: 39px;

  font-weight: 900;

  letter-spacing: -4px;
}

.game-ready-mark span
{
  color: #ff995e;
}

.game-ready-card h2
{
  margin: 5px 0;
}

.game-ready-card p,
.game-queue > p,
.gaming-guide-section > p,
.gaming-guide-section .check-list
{
  color: var(--muted);

  line-height: 1.7;
}

.game-ready-card ul
{
  margin: 0;

  padding-left: 18px;

  color: #e7b69a;

  font-size: 12px;

  line-height: 1.8;
}

.game-queue
{
  background: rgba(25, 14, 17, .7);
}

.gaming-guide
{
  max-width: 980px;
}

.gaming-guide-section
{
  background: rgba(26, 13, 17, .72);
}

.cs2-baseline,
.cs2-order
{
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-top: 20px;
}

.cs2-baseline > div,
.cs2-order > div
{
  padding: 16px;

  border: 1px solid rgba(255, 146, 77, .21);

  border-radius: 11px;

  background: rgba(64, 23, 17, .5);
}

.cs2-baseline span
{
  display: block;

  margin-bottom: 9px;

  color: #ff9c60;

  font-size: 12px;

  font-weight: 800;
}

.cs2-baseline p,
.cs2-order span
{
  display: block;

  margin: 6px 0 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.5;
}

.cs2-order b
{
  color: #ffb47d;
}

.gaming-note,
.cs2-alert
{
  margin-top: 20px;

  padding: 16px;

  border-left: 3px solid #ff8850;

  background: rgba(255, 105, 47, .08);

  color: #f1c7ae !important;
}

.cs2-alert b
{
  color: #ffc398;
}

.cs2-alert p
{
  margin: 6px 0 0;
}

.gaming-guide-cta
{
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-top: 20px;

  padding: 23px;

  border: 1px solid rgba(255, 148, 80, .25);

  border-radius: 13px;

  background: linear-gradient(120deg, rgba(92, 31, 14, .46), rgba(34, 12, 17, .68));
}

.gaming-guide-cta h2,
.gaming-guide-cta p
{
  margin: 6px 0;
}

body.light-mode .game-hub-hero,
body.light-mode .gaming-content-section,
body.light-mode .gaming-guide-section,
body.light-mode .gaming-guide-cta
{
  border-color: rgba(215, 135, 255, .3);

  background: linear-gradient(120deg, rgba(72, 32, 104, .94), rgba(23, 10, 42, .96));
}

body.light-mode .game-ready-card,
body.light-mode .cs2-baseline > div,
body.light-mode .cs2-order > div
{
  border-color: rgba(215, 135, 255, .28);

  background: rgba(42, 20, 66, .72);
}

body.light-mode .game-ready-mark,
body.light-mode .game-hub-stats span,
body.light-mode .game-queue-list span
{
  border-color: rgba(215, 135, 255, .38);

  background: rgba(31, 12, 50, .58);
}

body.light-mode .game-hub-hero h1 span,
body.light-mode .game-hub-stats b,
body.light-mode .cs2-baseline span,
body.light-mode .cs2-order b
{
  color: #edb5ff;
}

body.light-mode .game-ready-mark
{
  color: #fff0ff;
}

body.light-mode .game-ready-mark span
{
  color: #d783ff;
}

body.light-mode .game-ready-card ul,
body.light-mode .gaming-note,
body.light-mode .cs2-alert
{
  color: #e2cbea !important;
}

body.light-mode .gaming-note,
body.light-mode .cs2-alert
{
  border-left-color: #d783ff;

  background: rgba(215, 135, 255, .09);
}

body.light-mode .cs2-alert b
{
  color: #edb5ff;
}

.cs2-lab,.cs2-warning-grid,.cs2-profile-grid,.cs2-decision-grid,.cs2-recovery { display:grid; gap:12px; margin-top:20px; }
.cs2-lab { grid-template-columns:1.2fr repeat(2,minmax(150px,1fr)); padding:20px; border:1px solid rgba(255,140,68,.3); border-radius:13px; background:rgba(63,21,15,.6); }
.cs2-lab label { display:grid; gap:7px; color:#f0c5aa; font-size:12px; font-weight:700; }
.cs2-lab select,.cs2-lab input { box-sizing:border-box; width:100%; padding:10px; border:1px solid rgba(255,149,83,.35); border-radius:8px; background:#12090d; color:var(--text); font:inherit; }
.cs2-lab output { grid-column:1/-1; padding:14px; border-left:3px solid #ff8b50; background:rgba(255,113,42,.09); color:#f2cdb8; line-height:1.55; }
.cs2-warning-grid,.cs2-profile-grid,.cs2-recovery { grid-template-columns:repeat(3,1fr); }
.cs2-decision-grid { grid-template-columns:1fr 1fr; }
.cs2-warning-grid>div,.cs2-profile-grid article,.cs2-decision-grid>div,.cs2-recovery>div { padding:17px; border:1px solid rgba(255,144,73,.22); border-radius:11px; background:rgba(61,22,17,.46); }
.cs2-warning-grid span,.cs2-profile-grid li,.cs2-decision-grid li,.cs2-recovery p { color:var(--muted); font-size:13px; line-height:1.58; }
.cs2-profile-grid h3,.cs2-decision-grid h3 { margin:6px 0 10px; font-size:18px; }.cs2-profile-grid ul,.cs2-decision-grid ol { margin:0; padding-left:18px; }.cs2-profile-grid li,.cs2-decision-grid li { margin:8px 0; }
.cs2-settings-table { overflow:auto; margin-top:20px; border:1px solid rgba(255,144,73,.25); border-radius:12px; }.cs2-settings-table>div { display:grid; grid-template-columns:.8fr .85fr 1.35fr; gap:12px; min-width:620px; padding:14px 16px; border-top:1px solid rgba(255,144,73,.13); background:rgba(50,19,17,.47); }.cs2-settings-head { border-top:0!important; background:rgba(117,43,18,.52)!important; color:#ffd0ad; font-size:12px; font-weight:800; }.cs2-settings-table b { color:#fff0e7; }.cs2-settings-table span { color:#f2c1a4; font-size:13px; }.cs2-settings-table span:last-child { color:var(--muted); }
.cs2-command { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; padding:20px; border:1px solid rgba(255,146,77,.28); border-radius:12px; background:#12090d; }.cs2-command pre { margin:0; padding:15px; overflow:auto; border:1px solid rgba(255,150,83,.17); border-radius:8px; color:#ffd0b5; line-height:1.6; }.cs2-command p:last-child { grid-column:1/-1; color:var(--muted); }
.cs2-sources li { margin:12px 0; color:var(--muted); }.cs2-sources a { color:#ffad73; }
body.light-mode .cs2-lab,body.light-mode .cs2-warning-grid>div,body.light-mode .cs2-profile-grid article,body.light-mode .cs2-decision-grid>div,body.light-mode .cs2-recovery>div,body.light-mode .cs2-settings-table>div,body.light-mode .cs2-command { border-color:rgba(215,135,255,.3); background:rgba(36,16,57,.78); }body.light-mode .cs2-lab select,body.light-mode .cs2-lab input,body.light-mode .cs2-command pre { border-color:rgba(215,135,255,.35); background:#170b28; color:#f7efff; }

/* Gaming: холодный HUD — циан для данных, фиолетовый для глубины. */
body[data-page="gaming"]:not(.light-mode)
{
  --blue: #43d9ff;
  --blue-bright: #9aeeff;
  --line: rgba(67, 217, 255, .18);
}

body[data-page="gaming"]:not(.light-mode) .section-promo-gaming
{
  background: linear-gradient(118deg, rgba(5, 38, 63, .96), rgba(22, 14, 64, .94));
}

body[data-page="gaming"]:not(.light-mode) .section-promo-gaming::before,
body[data-page="gaming"]:not(.light-mode) .game-hub-hero::before
{
  background: radial-gradient(circle at 84% 15%, rgba(67, 217, 255, .26), transparent 30%), radial-gradient(circle at 72% 78%, rgba(141, 102, 255, .18), transparent 32%);
}

body[data-page="gaming"]:not(.light-mode) .section-promo-gaming .section-kicker,
body[data-page="gaming"]:not(.light-mode) .gaming-checks span,
body[data-page="gaming"]:not(.light-mode) .game-hub-hero h1 span,
body[data-page="gaming"]:not(.light-mode) .game-hub-stats b,
body[data-page="gaming"]:not(.light-mode) .game-ready-mark span,
body[data-page="gaming"]:not(.light-mode) .cs2-sources a
{
  color: #64e7ff;
}

body[data-page="gaming"]:not(.light-mode) .gaming-checks a,
body[data-page="gaming"]:not(.light-mode) .gaming-monitor,
body[data-page="gaming"]:not(.light-mode) .game-hub-hero,
body[data-page="gaming"]:not(.light-mode) .gaming-content-section,
body[data-page="gaming"]:not(.light-mode) .gaming-guide-section,
body[data-page="gaming"]:not(.light-mode) .game-ready-card,
body[data-page="gaming"]:not(.light-mode) .cs2-baseline > div,
body[data-page="gaming"]:not(.light-mode) .cs2-order > div,
body[data-page="gaming"]:not(.light-mode) .cs2-lab,
body[data-page="gaming"]:not(.light-mode) .cs2-warning-grid > div,
body[data-page="gaming"]:not(.light-mode) .cs2-profile-grid article,
body[data-page="gaming"]:not(.light-mode) .cs2-decision-grid > div,
body[data-page="gaming"]:not(.light-mode) .cs2-recovery > div,
body[data-page="gaming"]:not(.light-mode) .cs2-settings-table,
body[data-page="gaming"]:not(.light-mode) .cs2-command
{
  border-color: rgba(67, 217, 255, .28);
  background: linear-gradient(135deg, rgba(5, 29, 52, .84), rgba(24, 15, 61, .78));
}

body[data-page="gaming"]:not(.light-mode) .gaming-checks a:hover,
body[data-page="gaming"]:not(.light-mode) .game-ready-card:hover
{
  border-color: #8d66ff;
  box-shadow: 0 16px 42px rgba(82, 102, 255, .16);
}

body[data-page="gaming"]:not(.light-mode) .gaming-monitor-head b,
body[data-page="gaming"]:not(.light-mode) .gaming-fps strong,
body[data-page="gaming"]:not(.light-mode) .gaming-fps span,
body[data-page="gaming"]:not(.light-mode) .game-ready-mark,
body[data-page="gaming"]:not(.light-mode) .cs2-baseline span,
body[data-page="gaming"]:not(.light-mode) .cs2-settings-table b,
body[data-page="gaming"]:not(.light-mode) .cs2-alert b
{
  color: #c9f6ff;
}

body[data-page="gaming"]:not(.light-mode) .gaming-bars i,
body[data-page="gaming"]:not(.light-mode) .game-ready-mark,
body[data-page="gaming"]:not(.light-mode) .cs2-settings-head,
body[data-page="gaming"]:not(.light-mode) .cs2-lab output,
body[data-page="gaming"]:not(.light-mode) .gaming-note,
body[data-page="gaming"]:not(.light-mode) .cs2-alert
{
  border-color: #43d9ff;
  background: rgba(67, 217, 255, .08);
}

body[data-page="gaming"]:not(.light-mode) .cs2-lab label,
body[data-page="gaming"]:not(.light-mode) .cs2-settings-table span,
body[data-page="gaming"]:not(.light-mode) .cs2-lab output,
body[data-page="gaming"]:not(.light-mode) .gaming-note,
body[data-page="gaming"]:not(.light-mode) .cs2-alert,
body[data-page="gaming"]:not(.light-mode) .game-ready-card ul
{
  color: #c8def4;
}

body[data-page="gaming"]:not(.light-mode) .cs2-lab select,
body[data-page="gaming"]:not(.light-mode) .cs2-lab input,
body[data-page="gaming"]:not(.light-mode) .cs2-command,
body[data-page="gaming"]:not(.light-mode) .cs2-command pre
{
  border-color: rgba(141, 102, 255, .44);
  background: #09172d;
  color: #e6f8ff;
}

body[data-page="gaming"]:not(.light-mode) .cs2-settings-head
{
  color: #d8f7ff;
}

/* Игровая витрина: у каждой игры своя обложка. Файлы можно заменить без правки HTML. */
.game-card-cover,
.game-guide-cover
{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 166px;
  padding: 18px;
  border: 1px solid rgba(113, 226, 255, .34);
  border-radius: 13px;
  background-color: #0b1c35;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -80px 65px rgba(3, 9, 25, .65);
}

.game-card-cover::before,
.game-guide-cover::before
{
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(65, 218, 255, .24), transparent 48%, rgba(141, 102, 255, .35));
}

.game-card-cover span,
.game-guide-cover span
{
  color: #f0fbff;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.08em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .72);
}

.game-guide-cover small
{
  color: #c9f5ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-cover--cs2 { background-image: linear-gradient(120deg, rgba(4, 14, 36, .2), rgba(6, 16, 33, .8)), url("../assets/images/gaming-cs2.webp"), radial-gradient(circle at 75% 22%, #4ce4ff, transparent 26%), linear-gradient(135deg, #0c2851, #14122e); }
.game-cover--dota { background-image: linear-gradient(120deg, rgba(4, 14, 36, .2), rgba(6, 16, 33, .8)), url("../assets/images/gaming-dota2.webp"), radial-gradient(circle at 72% 28%, #a76bff, transparent 26%), linear-gradient(135deg, #171049, #0b263c); }
.game-cover--pubg { background-image: linear-gradient(120deg, rgba(4, 14, 36, .18), rgba(6, 16, 33, .82)), url("../assets/images/gaming-pubg.webp"), radial-gradient(circle at 74% 24%, #4ad8d2, transparent 26%), linear-gradient(135deg, #0d3a49, #19122f); }

.game-ready-card
{
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.45fr) minmax(185px, .65fr) !important;
  min-height: 218px;
  padding: 18px !important;
}

.game-ready-card .game-card-cover
{
  height: 100%;
  box-sizing: border-box;
}

/* Кабинет стримера */
.streamer-hero
{
  background: radial-gradient(circle at 86% 18%, rgba(105, 96, 255, .32), transparent 21rem), linear-gradient(118deg, rgba(18, 19, 52, .96), rgba(7, 14, 28, .98));
}

.streamer-route
{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.streamer-route article
{
  min-height: 190px;
  padding: 20px;
  border: 1px solid rgba(91, 164, 255, .22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20, 33, 67, .8), rgba(9, 17, 34, .8));
}

.streamer-route span
{
  display: inline-flex;
  margin-bottom: 18px;
  color: #72d8ff;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
}

.streamer-route h3 { margin: 0 0 9px; font-size: 1.05rem; }
.streamer-route p { margin: 0; color: #b8cce3; line-height: 1.62; font-size: .92rem; }
.game-cover--obs { background-image: linear-gradient(120deg, rgba(5, 15, 43, .14), rgba(8, 12, 30, .84)), url("../assets/images/art-obs.webp"), radial-gradient(circle at 74% 22%, #685cff, transparent 28%), linear-gradient(135deg, #10245e, #140d39); }

body.light-mode .streamer-hero,
body.light-mode .streamer-route article { background: linear-gradient(145deg, rgba(70, 33, 102, .92), rgba(24, 12, 47, .95)); border-color: rgba(215, 135, 255, .34); }
body.light-mode .streamer-route span { color: #e2a1ff; }
body.light-mode .streamer-route p { color: #ecdaf8; }

@media (max-width: 900px) { .streamer-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .streamer-route { grid-template-columns: 1fr; } .streamer-route article { min-height: 0; } }

/* DeeNet Streamer — самостоятельная среда для стриминга. */
.streamer-shell { padding-top: 36px; padding-bottom: 80px; }
.streamer-console, .streamer-workspace, .streamer-guide { border: 1px solid rgba(116, 127, 255, .26); border-radius: 24px; background: linear-gradient(135deg, rgba(12, 18, 53, .95), rgba(5, 13, 29, .98)); box-shadow: 0 24px 70px rgba(3, 7, 23, .35); }
.streamer-console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .92fr); gap: 30px; align-items: center; padding: clamp(24px, 5vw, 58px); overflow: hidden; position: relative; }
.streamer-console::before { content: ''; position: absolute; width: 440px; height: 440px; right: -140px; top: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(106, 94, 255, .38), transparent 68%); pointer-events: none; }
.streamer-console__copy { position: relative; z-index: 1; }
.streamer-console h1 { margin: 7px 0 18px; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .91; letter-spacing: -.06em; }
.streamer-console h1 span { color: #a69aff; }
.streamer-console__copy > p:not(.section-kicker) { max-width: 590px; color: #c8d5ee; font-size: 1.05rem; line-height: 1.75; margin: 0 0 26px; }
.streamer-console__screen { position: relative; z-index: 1; border: 1px solid rgba(130, 207, 255, .32); border-radius: 20px; overflow: hidden; background: rgba(6, 15, 36, .78); box-shadow: inset 0 0 38px rgba(68, 91, 255, .17), 0 20px 48px rgba(1, 4, 18, .45); }
.streamer-screen-head, .streamer-screen-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 15px; font: 700 .64rem var(--font-mono); letter-spacing: .1em; color: #91a7cd; }
.streamer-screen-head { border-bottom: 1px solid rgba(135, 166, 255, .16); }
.streamer-screen-head b { color: #60e5c0; font-weight: 700; }
.streamer-screen-preview { min-height: 255px; display: grid; align-content: center; justify-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 48% 45%, rgba(102, 88, 255, .34), transparent 20%), linear-gradient(145deg, #111847, #090e25 65%, #16215c); }
.streamer-screen-preview::before, .streamer-screen-preview::after { content: ''; position: absolute; inset: 20px; border: 1px solid rgba(118, 219, 255, .18); transform: skewY(-7deg); }
.streamer-screen-preview::after { inset: 50px 40px; border-color: rgba(181, 126, 255, .28); transform: skewY(7deg); }
.streamer-screen-preview i { width: 62px; height: 62px; border: 2px solid #84e3ff; border-radius: 50%; box-shadow: 0 0 24px #5e60ff; z-index: 1; }
.streamer-screen-preview strong { z-index: 1; text-align: center; margin-top: 12px; color: #f2f5ff; font-size: 1.24rem; line-height: .92; letter-spacing: .12em; }
.streamer-screen-preview small { z-index: 1; margin-top: 9px; color: #89a2ca; font: .65rem var(--font-mono); letter-spacing: .14em; }
.streamer-screen-flow { border-top: 1px solid rgba(135, 166, 255, .16); justify-content: flex-start; flex-wrap: wrap; }
.streamer-screen-flow span { padding: 5px 7px; border-radius: 6px; }
.streamer-screen-flow .is-active { color: #dce9ff; background: rgba(96, 124, 255, .28); }
.streamer-workspace { margin-top: 18px; padding: clamp(24px, 4vw, 44px); }
.streamer-workspace__title { max-width: 700px; }
.streamer-workspace h2, .streamer-guide h2 { margin: 6px 0 12px; font-size: clamp(1.75rem, 3vw, 2.65rem); }
.streamer-workspace__title > p:not(.section-kicker), .streamer-guide p { color: #b9cbe5; line-height: 1.7; }
.streamer-workspace__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.streamer-workspace__steps article { padding: 17px; border-top: 2px solid rgba(107, 177, 255, .72); background: rgba(18, 31, 65, .52); }
.streamer-workspace__steps b { color: #8c7dff; font: 700 .78rem var(--font-mono); letter-spacing: .12em; }
.streamer-workspace__steps h3 { margin: 15px 0 7px; font-size: 1rem; }
.streamer-workspace__steps p { margin: 0; color: #b6c6df; font-size: .9rem; line-height: 1.62; }
.streamer-guide { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 18px; padding: clamp(20px, 4vw, 42px); }
.streamer-guide__visual { min-height: 280px; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(122, 211, 255, .28); background: linear-gradient(135deg, rgba(12, 29, 72, .84), rgba(16, 9, 49, .9)), url("../assets/images/art-obs.webp") center/cover; background-blend-mode: screen; }
.streamer-guide__visual span { color: #fff; font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 900; letter-spacing: -.08em; text-shadow: 0 0 26px #6d68ff; }
.streamer-guide__visual small { color: #a9c7e8; font: .68rem var(--font-mono); letter-spacing: .18em; }
body.light-mode .streamer-console, body.light-mode .streamer-workspace, body.light-mode .streamer-guide { background: linear-gradient(135deg, rgba(65, 28, 99, .96), rgba(20, 9, 48, .98)); border-color: rgba(222, 141, 255, .34); }
body.light-mode .streamer-console__copy > p:not(.section-kicker), body.light-mode .streamer-workspace__title > p:not(.section-kicker), body.light-mode .streamer-guide p, body.light-mode .streamer-workspace__steps p { color: #edddf8; }
@media (max-width: 900px) { .streamer-console, .streamer-guide { grid-template-columns: 1fr; } .streamer-workspace__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .streamer-shell { padding-top: 22px; } .streamer-console { padding: 24px 18px; } .streamer-console h1 { font-size: 3.2rem; } .streamer-workspace__steps { grid-template-columns: 1fr; } .streamer-screen-preview { min-height: 210px; } }

.game-ready-copy .section-kicker
{
  margin: 0 0 7px;
}

.game-ready-copy .button
{
  margin-top: 7px;
}

.gaming-guide .quick-nav
{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 24px 0 8px;
}

.gaming-guide .quick-nav a
{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(67, 217, 255, .32);
  border-radius: 999px;
  background: rgba(12, 36, 62, .68);
  color: #c9f5ff;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.gaming-guide .quick-nav a:hover
{
  border-color: #8d66ff;
  background: rgba(73, 43, 133, .42);
  color: #fff;
}

.gaming-guide > article > .game-guide-cover
{
  min-height: 265px;
  margin: 24px 0 0;
  padding: 28px;
  border-radius: 17px;
}

body.light-mode .game-card-cover,
body.light-mode .game-guide-cover
{
  border-color: rgba(215, 135, 255, .42);
}

body.light-mode .gaming-guide .quick-nav a
{
  border-color: rgba(215, 135, 255, .45);
  background: rgba(48, 21, 78, .78);
  color: #f0dcff;
}

@media (max-width: 760px)
{
  .game-ready-card { grid-template-columns: 1fr !important; }
  .game-ready-card .game-card-cover { min-height: 180px; }
  .gaming-guide > article > .game-guide-cover { min-height: 210px; }
}
@media (max-width:760px) { .cs2-lab,.cs2-warning-grid,.cs2-profile-grid,.cs2-decision-grid,.cs2-recovery,.cs2-command { grid-template-columns:1fr; } }

@media (max-width: 760px)
{
  .game-hub-hero, .gaming-content-section, .gaming-guide-section { padding: 22px; }
  .game-ready-card, .cs2-baseline, .cs2-order { grid-template-columns: 1fr; }
  .game-ready-mark { min-height: 94px; }
  .gaming-guide-cta { align-items: flex-start; flex-direction: column; }
}

.topic-grid
{
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 13px;
}

.topic-card
{
  position: relative;

  min-height: 178px;

  padding: 20px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: var(--surface);

  transition: transform .2s, border-color .2s;
}

.topic-card:hover
{
  transform: translateY(-4px);

  border-color: var(--blue);
}

.topic-card::after
{
  content: attr(data-number);

  position: absolute;

  right: 12px;

  bottom: -22px;

  color: rgba(67, 132, 255, .08);

  font-size: 100px;

  font-weight: 800;
}

.topic-card .topic-icon
{
  display: grid;

  place-items: center;

  width: 39px;

  height: 39px;

  margin-bottom: 14px;

  border: 1px solid currentColor;

  border-radius: 9px;

  color: var(--blue-bright);

  font-size: 21px;
}

.topic-card h3
{
  margin: 0 0 5px;

  font-size: 17px;
}

.topic-card p
{
  max-width: 270px;

  margin: 0;

  color: var(--muted);

  font-size: 11px;
}

.topic-card a
{
  display: inline-block;

  margin-top: 12px;

  color: var(--blue-bright);

  font-size: 11px;

  font-weight: 800;
}

.filter-bar
{
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 19px;
}

.filter-bar button,
.build-tabs button
{
  padding: 8px 14px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: var(--surface);

  color: var(--muted);

  font-size: 12px;

  font-weight: 700;
}

.filter-bar button:hover,
.filter-bar button.is-active,
.build-tabs button.is-active
{
  border-color: var(--blue);

  color: #fff;

  background: linear-gradient(110deg, rgba(29, 120, 245, .53), rgba(102, 60, 207, .48));
}

.all-articles
{
  grid-template-columns: repeat(3, 1fr);
}

.all-articles .article-card
{
  transition: opacity .2s;
}

.all-articles .article-card[hidden]
{
  display: none;
}

.resource-grid
{
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 13px;
}

.resource-card
{
  display: flex;

  flex-direction: column;

  min-height: 196px;

  padding: 21px;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: linear-gradient(145deg, var(--surface), rgba(10, 18, 34, .35));
}

.resource-card .resource-icon
{
  width: 44px;

  height: 44px;

  display: grid;

  place-items: center;

  border: 1px solid currentColor;

  border-radius: 10px;

  color: var(--blue-bright);

  font-size: 23px;
}

.resource-card h2
{
  margin: 15px 0 5px;

  font-size: 18px;
}

.resource-card p
{
  margin: 0;

  color: var(--muted);

  font-size: 12px;
}

.resource-card .button
{
  align-self: flex-start;

  min-height: 34px;

  margin-top: auto;

  padding: 7px 13px;

  font-size: 11px;
}

.build-tabs
{
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 19px;
}

.build-showcase
{
  display: grid;

  grid-template-columns: .87fr 1.13fr;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 13px;

  background: linear-gradient(125deg, rgba(8, 20, 50, .9), rgba(7, 9, 24, .7));
}

.build-copy
{
  padding: 31px;
}

.build-copy h2
{
  margin: 0 0 7px;

  font-size: 32px;
}

.build-copy p
{
  color: var(--muted);
}

.build-price
{
  display: block;

  margin: 20px 0 6px;

  color: var(--blue-bright);

  font-size: 33px;

  font-weight: 800;
}

.build-specs
{
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 9px;

  margin-top: 18px;
}

.build-specs div
{
  padding: 10px;

  border: 1px solid var(--line);

  border-radius: 8px;

  background: rgba(5, 10, 29, .42);
}

.build-specs small
{
  display: block;

  color: var(--muted);

  font-size: 9px;

  text-transform: uppercase;
}

.build-specs b
{
  font-size: 13px;
}

.pc-visual
{
  position: relative;

  min-height: 345px;

  background: radial-gradient(circle at 50% 54%, rgba(63, 83, 255, .58), transparent 25%), radial-gradient(circle at 52% 60%, #112e8d, #030817 65%);
}

.pc-case
{
  position: absolute;

  top: 40px;

  right: 25%;

  bottom: 34px;

  width: 158px;

  border: 4px solid #1d326a;

  border-radius: 10px 16px 16px 10px;

  background: linear-gradient(90deg, rgba(4, 8, 22, .55), rgba(25, 48, 128, .7));

  box-shadow: 0 0 25px #284eff, inset 0 0 32px rgba(26, 64, 255, .38);

  transform: skewY(-3deg);
}

.pc-case::before
{
  content: "";

  position: absolute;

  top: 18px;

  right: 14px;

  bottom: 18px;

  left: 15px;

  border: 1px solid #3c76e8;

  background: repeating-linear-gradient(150deg, transparent 0 14px, rgba(142, 90, 255, .5) 15px 18px);
}

.pc-fan
{
  position: absolute;

  z-index: 2;

  right: calc(25% + 37px);

  width: 78px;

  aspect-ratio: 1;

  border: 7px solid #266bff;

  border-radius: 50%;

  box-shadow: 0 0 20px #6944ff;
}

.pc-fan::after
{
  content: "✦";

  display: grid;

  height: 100%;

  place-items: center;

  color: #8acaff;

  font-size: 36px;
}

.pc-fan.one
{
  top: 65px;
}

.pc-fan.two
{
  top: 144px;
}

.pc-fan.three
{
  top: 223px;
}

.about-grid
{
  display: grid;

  grid-template-columns: 1fr .9fr;

  gap: 19px;
}

.about-copy,
.about-values
{
  padding: 30px;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: var(--surface);
}

.about-copy h2
{
  margin-top: 0;

  font-size: 31px;
}

.about-copy p
{
  color: var(--muted);
}

.about-values
{
  display: grid;

  gap: 12px;
}

.value
{
  padding: 15px;

  border: 1px solid var(--line);

  border-radius: 9px;

  background: rgba(6, 15, 34, .36);
}

.value b
{
  display: block;

  margin-bottom: 3px;

  color: var(--blue-bright);
}

.value p
{
  margin: 0;

  color: var(--muted);

  font-size: 12px;
}

.article-layout
{
  display: grid;

  grid-template-columns: minmax(0, 1fr) 250px;

  gap: 25px;

  padding-top: 48px;
}

.article-content
{
  min-width: 0;
}

.article-content h1
{
  margin: 0 0 13px;

  font-size: clamp(36px, 5vw, 55px);

  line-height: 1.06;

  letter-spacing: -1.8px;
}

.article-intro
{
  max-width: 710px;

  color: var(--muted);

  font-size: 18px;
}

.article-cover
{
  position: relative;

  height: 305px;

  display: flex;

  align-items: end;

  justify-content: space-between;

  margin: 27px 0 9px;

  padding: 25px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: radial-gradient(ellipse at 53% 35%, #2676ff, #05153b 56%, #030813);
}

.article-cover::before
{
  content: "";

  position: absolute;

  top: -50px;

  left: 35%;

  width: 300px;

  height: 390px;

  border: 37px solid rgba(50, 164, 255, .52);

  border-radius: 40% 62% 52% 45%;

  transform: rotate(-31deg);
}

.article-cover span,
.article-cover b
{
  position: relative;

  z-index: 1;
}

.article-cover span
{
  padding: 4px 8px;

  border: 1px solid #56a5ff;

  border-radius: 5px;

  background: rgba(2, 8, 25, .69);

  color: #bfe4ff;

  font-size: 12px;
}

.article-cover b
{
  font-size: 28px;

  font-style: italic;
}

.article-date
{
  margin: 0 0 29px;

  color: var(--muted);

  font-size: 12px;
}

.article-content section
{
  margin: 28px 0;
}

.article-content section h2
{
  margin-bottom: 8px;

  font-size: 26px;
}

.article-content section p
{
  max-width: 730px;

  color: #c4ccdb;

  font-size: 16px;
}

.article-tip
{
  margin-top: 35px;

  padding: 18px 21px;

  border-left: 3px solid var(--blue);

  border-radius: 0 9px 9px 0;

  background: rgba(22, 78, 163, .14);
}

.article-tip b
{
  color: var(--blue-bright);
}

/* Страницы, опубликованные через DeeNet Studio. Базовый каркас общий,
   а тематическая среда (например Linux) подключается отдельным шаблоном. */
.managed-article
{
  padding-top: 42px;
  padding-bottom: 72px;
}

.managed-article-cover
{
  display: block;

  width: 100%;
  max-height: 440px;

  margin: 28px 0 34px;

  object-fit: cover;

  border: 1px solid var(--line);
  border-radius: 14px;

  box-shadow: var(--shadow);
}

.managed-article-content
{
  max-width: 760px;

  color: var(--text);

  font-size: 16px;
  line-height: 1.75;
}

.managed-article-content > :first-child
{
  margin-top: 0;
}

.managed-article-content h2,
.managed-article-content h3
{
  margin: 38px 0 12px;

  color: var(--text);
  line-height: 1.16;
}

.managed-article-content h2
{
  font-size: clamp(25px, 3vw, 34px);
}

.managed-article-content h3
{
  font-size: 22px;
}

.managed-article-content p,
.managed-article-content li
{
  color: var(--muted);
}

.managed-article-content a
{
  color: var(--blue-bright);
}

.managed-article-content pre
{
  margin: 22px 0;
  padding: 18px 20px;

  overflow: auto;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: rgba(0, 0, 0, .24);
}

.managed-article-content code
{
  color: var(--blue-bright);
}

.managed-page-card img
{
  display: block;

  width: 100%;
  height: 150px;

  margin: -3px -3px 18px;

  object-fit: cover;

  border: 1px solid var(--line);
  border-radius: 8px;
}

.article-tip p
{
  margin: 5px 0 0;

  color: var(--muted);
}

.article-sidebar
{
  position: sticky;

  top: 105px;

  height: fit-content;

  padding: 19px;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: var(--surface);
}

.article-sidebar h2
{
  margin: 0 0 12px;

  font-size: 15px;
}

.article-sidebar a
{
  display: block;

  padding: 8px 0;

  border-bottom: 1px solid var(--line);

  color: var(--muted);

  font-size: 12px;
}

.article-sidebar a:hover
{
  color: var(--blue-bright);
}

/* ===========================================================================
      🦶 ПОДВАЛ САЙТА (футер) — ссылки, контакты, соцсети
      ===========================================================================
*/

.site-footer
{
  margin-top: 24px;

  border-top: 1px solid var(--line);

  background: rgba(3, 8, 18, .7);
}

.footer-grid
{
  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 37px;

  padding-top: 25px;

  padding-bottom: 18px;
}

.footer-grid .logo
{
  margin-bottom: 15px;
}

.footer-grid p
{
  max-width: 275px;

  margin: 0 0 16px;

  color: var(--muted);

  font-size: 10px;
}

.footer-grid > div > small
{
  color: #758096;

  font-size: 9px;
}

.footer-grid h2
{
  margin: 0 0 9px;

  font-size: 11px;
}

.footer-grid > div:not(:first-child) a
{
  display: block;

  margin: 4px 0;

  color: var(--muted);

  font-size: 10px;
}

.footer-grid > div:not(:first-child) a:hover
{
  color: var(--blue-bright);
}

.socials
{
  display: flex;

  gap: 8px;

  margin-top: 13px;
}

.footer-grid .socials a
{
  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  margin: 0;

  border-radius: 50%;

  background: #283144;

  color: #cdd5e1;

  transition: background .2s, color .2s;
}

.footer-grid .socials a:hover
{
  background: var(--blue);

  color: #fff;
}

.footer-grid .socials a svg
{
  display: block;
}

.footer-bottom
{
  display: flex;

  justify-content: flex-end;

  gap: 28px;

  padding-bottom: 12px;

  color: #667087;

  font-size: 9px;
}

/* ===========================================================================
      📱 АДАПТАЦИЯ ПОД РАЗНЫЕ ЭКРАНЫ
      ---------------------------------------------------------------------------
      ⚠️  НЕ МЕНЯЙТЕ ЭТИ БЛОКИ, ЕСЛИ НЕ ПОНИМАЕТЕ, ЧТО ДЕЛАЕТЕ.
          Здесь настройки для планшетов (ширина до 1000px) и телефонов (до 760px).
      ===========================================================================
*/

/* ===== ПЛАНШЕТЫ И НЕБОЛЬШИЕ НОУТБУКИ: сетки становятся компактнее, меню готовится к мобильному виду. ===== */

@media (max-width: 1000px)
{
  :root
  {
    --content: min(100% - 36px, 800px);
  }

  .header-inner
  {
    gap: 15px;
  }

  .main-nav
  {
    gap: 16px;
  }

  .main-nav a
  {
    font-size: 12px;
  }

  .categories
  {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero
  {
    grid-template-columns: .9fr 1.1fr;
  }

  .category-card
  {
    min-height: 164px;
  }

  .explore
  {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-layout
  {
    grid-template-columns: 1fr;
  }

  .article-sidebar
  {
    position: static;
  }

  .article-sidebar a
  {
    display: inline-block;

    margin-right: 13px;

    border: 0;
  }

  .footer-grid
  {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer-grid > div:first-child
  {
    grid-column: 1 / -1;
  }

  .footer-grid > div:first-child p
  {
    max-width: 450px;
  }
}

/* ===== ТЕЛЕФОНЫ И УЗКИЕ ПЛАНШЕТЫ: многоколоночные блоки перестраиваются в одну колонку. ===== */

@media (max-width: 760px)
{
  :root
  {
    --content: min(100% - 30px, 600px);
  }

  .site-header
  {
    min-height: 66px;
  }

  .header-inner
  {
    min-height: 66px;

    justify-content: space-between;
  }

  .logo
  {
    width: 112px;
  }

  .logo strong
  {
    font-size: 23px;
  }

  .header-actions
  {
    gap: 5px;
  }

  .menu-toggle
  {
    order: 4;

    display: grid;

    gap: 4px;

    padding: 7px;
  }

  .menu-toggle span
  {
    width: 18px;

    height: 2px;

    display: block;

    background: currentColor;

    transition: transform .2s;
  }

  .nav-open .menu-toggle span:nth-child(1)
  {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-open .menu-toggle span:nth-child(2)
  {
    opacity: 0;
  }

  .nav-open .menu-toggle span:nth-child(3)
  {
    transform: translateY(-6px) rotate(-45deg);
  }

  .main-nav
  {
    position: absolute;

    top: 66px;

    right: 0;

    left: 0;

    display: grid;

    justify-items: center;

    gap: 0;

    max-height: 0;

    overflow: hidden;

    border-bottom: 1px solid transparent;

    background: var(--surface-solid);

    transition: max-height .25s ease, border-color .25s;
  }

  .nav-open .main-nav
  {
    max-height: 370px;

    border-color: var(--line);
  }

  .main-nav a
  {
    width: min(100% - 30px, 600px);

    padding: 13px 0;

    border-bottom: 1px solid rgba(103, 138, 200, .13);

    text-align: center;
  }

  .main-nav a::after
  {
    display: none;
  }

  .hero
  {
    grid-template-columns: 1fr;

    padding-top: 42px;
  }

  .hero-copy
  {
    max-width: 560px;
  }

  .hero-visual
  {
    min-height: 350px;
  }

  .hero h1
  {
    font-size: clamp(50px, 13vw, 72px);
  }

  .monitor
  {
    right: 76px;

    left: 123px;
  }

  .status-window
  {
    width: 102px;
  }

  .assistant-window
  {
    width: 100px;
  }

  .gamepad
  {
    right: 130px;
  }

  .categories
  {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-grid,
  .all-articles,
  .topic-grid,
  .resource-grid
  {
    grid-template-columns: repeat(2, 1fr);
  }

  .windows-promo,
  .page-hero,
  .category-banner,
  .build-showcase,
  .about-grid
  {
    grid-template-columns: 1fr;
  }

  .promo-visual
  {
    min-height: 285px;
  }

  .linux-terminal
  {
    inset: 12px 12px 30px;
  }

  .term-body
  {
    font-size: 9px;

    padding: 10px 12px;
  }

  .page-hero
  {
    padding-top: 38px;
  }

  .page-stat-grid
  {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-banner
  {
    padding: 22px;
  }

  .category-banner .banner-orb
  {
    display: none;
  }

  .pc-visual
  {
    min-height: 290px;
  }

  .footer-grid
  {
    grid-template-columns: 1fr 1fr;

    gap: 24px;
  }

  .footer-grid > div:first-child
  {
    grid-column: 1 / -1;
  }

  .footer-bottom
  {
    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 8px 20px;
  }
}

/* ===== КОМПАКТНЫЕ ТЕЛЕФОНЫ: уменьшаются отступы, размеры текста и декоративных элементов. ===== */

@media (max-width: 470px)
{
  :root
  {
    --content: min(100% - 24px, 420px);
  }

  .hero
  {
    padding-top: 32px;
  }

  .hero h1
  {
    letter-spacing: -2.8px;
  }

  .lead
  {
    font-size: 13px;
  }

  .hero-visual
  {
    min-height: 270px;

    transform: scale(.93);

    transform-origin: top left;

    width: 107%;

    margin-bottom: -16px;
  }

  .code-window
  {
    left: 0;

    transform: scale(.82) rotate(-4deg);

    transform-origin: top left;
  }

  .monitor
  {
    top: 39px;

    right: 66px;

    bottom: 58px;

    left: 101px;
  }

  .status-window
  {
    right: -4px;

    transform: scale(.75);

    transform-origin: top right;
  }

  .terminal-window
  {
    bottom: 25px;

    left: 4px;

    transform: scale(.77);

    transform-origin: bottom left;
  }

  .assistant-window
  {
    right: -6px;

    bottom: 24px;

    transform: scale(.75);

    transform-origin: bottom right;
  }

  .headphones
  {
    right: 58px;

    bottom: -16px;

    transform: scale(.67) rotate(-15deg);

    transform-origin: bottom right;
  }

  .gamepad
  {
    right: 119px;

    bottom: -13px;

    transform: scale(.67) rotate(10deg);

    transform-origin: bottom right;
  }

  .categories
  {
    gap: 9px;
  }

  .category-card
  {
    min-height: 151px;

    padding: 16px 13px 13px;
  }

  .category-symbol
  {
    width: 35px;

    height: 35px;

    margin-bottom: 7px;

    font-size: 25px;
  }

  .category-card h2
  {
    font-size: 14px;
  }

  .category-card p
  {
    font-size: 9px;
  }

  .section-heading
  {
    flex-wrap: wrap;

    gap: 7px;
  }

  .section-heading h2
  {
    font-size: 19px;
  }

  .heading-line
  {
    min-width: 80px;
  }

  .section-heading .button
  {
    margin-left: 0;
  }

  .article-grid,
  .all-articles,
  .topic-grid,
  .resource-grid,
  .explore,
  .page-stat-grid
  {
    grid-template-columns: 1fr;
  }

  .article-art
  {
    height: 170px;
  }

  .windows-promo
  {
    margin-top: 8px;
  }

  .promo-copy
  {
    padding: 21px 18px;
  }

  .promo-copy h2
  {
    font-size: 28px;
  }

  .promo-visual
  {
    min-height: 228px;
  }

  .linux-terminal
  {
    inset: 8px 8px 20px;
  }

  .term-body
  {
    font-size: 7px;

    padding: 8px 10px;

    line-height: 1.5;
  }

  .promo-screen
  {
    top: 27px;

    right: 61px;

    bottom: 37px;

    left: 61px;
  }

  .info-tile
  {
    width: 94px;

    min-height: 60px;

    padding: 7px;

    font-size: 8px;
  }

  .info-tile b
  {
    margin-top: 3px;

    font-size: 16px;
  }

  .info-top
  {
    top: 8px;

    left: 7px;
  }

  .info-left
  {
    bottom: 32px;

    left: 7px;
  }

  .info-right
  {
    top: 15px;

    right: 3px;
  }

  .dock
  {
    right: 61px;

    bottom: 10px;

    left: 61px;

    font-size: 11px;

    text-align: center;

    letter-spacing: 2px;
  }
}

/* =============================================================================
    ДОСТУПНОСТЬ: уменьшение анимации
    Это правило не меняет обычный вид сайта. Оно срабатывает только у пользователей,
    включивших параметр «Уменьшение движения» в Windows, macOS, Android или iOS.
   =============================================================================
*/

@media (prefers-reduced-motion: reduce)
{
  html
  {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after
  {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =============================================================================
    ДОСТУПНОСТЬ: заметный фокус клавиатуры
    :focus-visible не показывает рамку при обычном клике мышью, но помогает тем,
    кто перемещается по сайту клавишей Tab.
   =============================================================================
*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible
{
  outline: 2px solid var(--blue-bright);

  outline-offset: 3px;
}

/* Главная: постоянная витрина направлений вместо автоматически меняющейся ленты. */
.hero
{
  grid-template-columns: .7fr 1.3fr;
}

.hero > .hero-visual
{
  min-height: 510px;
}

.hero > .hero-visual .hero-img
{
  max-height: 560px;
  transform: scale(1.12);
}

.section-grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.section-card
{
  --section-color: var(--blue);
  position: relative;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--section-color) 15%, var(--surface)), var(--surface));
  color: var(--text);
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.section-card:hover
{
  transform: translateY(-5px);
  border-color: var(--section-color);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--section-color) 20%, transparent);
}

.section-card-icon
{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border: 1px solid color-mix(in srgb, var(--section-color) 60%, transparent);
  border-radius: 10px;
  color: var(--section-color);
  font-size: 20px;
  font-weight: 800;
}

.section-card h3
{
  margin: 20px 0 6px;
  font-size: 19px;
}

.section-card p
{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.section-card b
{
  margin-top: 15px;
  color: var(--section-color);
  font-size: 13px;
}

.section-windows { --section-color: #2f92ff; }
.section-linux { --section-color: #33ff66; }
.section-coding { --section-color: #a15cff; }
.section-gaming { --section-color: #ff7b42; }
.section-useful { --section-color: #f6b73c; }
.section-builds { --section-color: #7a72ff; }
.section-software { --section-color: #24c8d7; }
.section-services { --section-color: #d86dff; }
.section-support { --section-color: #5aa8ff; }

.builds-promo
{
  background: linear-gradient(105deg, rgba(20, 30, 115, .95), rgba(40, 12, 85, .82));
}

.service-promo
{
  background: linear-gradient(105deg, rgba(22, 79, 116, .92), rgba(20, 28, 78, .82));
}

.service-promo-mark
{
  display: grid;
  place-content: center;
  width: min(78%, 310px);
  aspect-ratio: 1;
  border: 1px solid rgba(129, 204, 255, .5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 197, 255, .27), transparent 67%);
  box-shadow: 0 0 80px rgba(62, 160, 255, .42);
  text-align: center;
  transform: rotate(-8deg);
}

.service-promo-mark span,
.service-promo-mark b
{
  font-size: clamp(44px, 6vw, 76px);
  line-height: .75;
  letter-spacing: -5px;
}

.service-promo-mark span { color: var(--text); }
.service-promo-mark b { color: #65c8ff; }
.service-promo-mark small { margin-top: 22px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }

@media (max-width: 760px)
{
  .hero { grid-template-columns: 1fr; }
  .hero > .hero-visual { min-height: 360px; }
  .hero > .hero-visual .hero-img { max-height: 420px; transform: scale(1.04); }
  .page-hero { padding-top: 30px; }
  .page-hero .hero-with-img { gap: 0; margin-bottom: 2px; }
  .page-hero .hero-visual { min-height: 300px; padding: 0; }
  .page-hero .hero-img { width: 100%; max-height: 360px; transform: scale(1.03); transform-origin: center; }
  .section-promo { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 22px; }
  .windows-task-list, .gaming-checks, .linux-route, .coding-workflow { grid-template-columns: 1fr; }
  .windows-dashboard, .linux-console, .coding-editor, .gaming-monitor { width: 100%; box-sizing: border-box; }
  .section-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 470px)
{
  .section-grid { grid-template-columns: 1fr; }
  .section-card { min-height: 166px; }
}

/* ==========================================================================
   Режим реконструкции: общее уведомление при переходе на страницу DeeNet.
   ========================================================================== */
.reconstruction-notice
{
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(1, 5, 16, .73);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.reconstruction-notice[data-open="true"]
{
  opacity: 1;
  visibility: visible;
}

.reconstruction-notice__dialog
{
  position: relative;
  width: min(100%, 560px);
  padding: clamp(26px, 5vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(105, 154, 255, .17);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(12, 42, 85, .98), rgba(34, 15, 81, .98));
  box-shadow: 0 0 0 1px rgba(170, 111, 255, .12), 0 28px 90px rgba(0, 0, 0, .58), 0 0 62px rgba(100, 185, 255, .2);
  transform: translateY(18px) scale(.97);
  transition: transform .22s ease;
}

.reconstruction-notice[data-open="true"] .reconstruction-notice__dialog
{
  transform: translateY(0) scale(1);
}

.reconstruction-notice__dialog::before
{
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: -142px;
  right: -92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 211, 255, .4), rgba(172, 77, 255, .2) 45%, transparent 71%);
  pointer-events: none;
}

.reconstruction-tube
{
  position: absolute;
  z-index: 2;
  display: block;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  overflow: visible;
  pointer-events: none;
}

.reconstruction-tube__halo,
.reconstruction-tube__line
{
  fill: none;
  stroke: url(#reconstruction-rgb);
  vector-effect: non-scaling-stroke;
}

.reconstruction-tube__halo
{
  stroke-width: 13px;
  opacity: .72;
  filter: blur(8px);
}

.reconstruction-tube__line
{
  stroke-width: 5px;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px #e9faff) drop-shadow(0 0 13px #5bd8ff) drop-shadow(0 0 25px rgba(152, 85, 255, .96));
}

.reconstruction-notice__dialog > :not(.reconstruction-tube)
{
  position: relative;
  z-index: 1;
}

.reconstruction-notice__dialog > .reconstruction-tube
{
  position: absolute;
  z-index: 3;
}

.reconstruction-notice__dialog .section-kicker
{
  margin-bottom: 14px;
  color: #8ad8ff;
}

.reconstruction-notice__dialog h2
{
  margin: 0 0 17px;
  color: #f2f8ff;
  font-size: clamp(30px, 5vw, 46px);
}

.reconstruction-notice__dialog p:not(.section-kicker)
{
  max-width: 470px;
  margin: 0 0 12px;
  color: #c5d7ed;
  line-height: 1.65;
}

.reconstruction-notice__close
{
  margin-top: 13px;
  min-width: 152px;
  border: 1px solid rgba(180, 230, 255, .72);
  background: rgba(8, 21, 55, .62);
  color: #e9f8ff;
  box-shadow: 0 0 18px rgba(101, 202, 255, .22);
}

.reconstruction-notice__close:hover,
.reconstruction-notice__close:focus-visible
{
  border-color: #efdcff;
  background: linear-gradient(100deg, #1888cd, #7437c9);
  color: #fff;
  outline: none;
}

@media (max-width: 470px)
{
  .reconstruction-notice { padding: 14px; }
  .reconstruction-notice__dialog { border-radius: 17px; }
}

/* Портфолио DeeNet */
.about-gallery
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.about-gallery__item
{
  min-height: 190px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(122, 190, 255, .28);
  border-radius: 18px;
  background: rgba(10, 24, 60, .7);
  cursor: zoom-in;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
}

.about-gallery__item img
{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  transition: transform .28s ease, filter .28s ease;
}

.about-gallery__item:hover img,
.about-gallery__item:focus-visible img
{
  transform: scale(1.045);
  filter: brightness(1.08) saturate(1.1);
}

.about-gallery__item:focus-visible
{
  outline: 2px solid #8c7cff;
  outline-offset: 3px;
}

.image-modal[hidden] { display: none; }

.image-modal
{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(2, 7, 24, .9);
}

.image-modal__content
{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
}

.image-modal__close
{
  position: absolute;
  top: 18px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  color: #fff;
  background: rgba(21, 28, 64, .7);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 760px)
{
  .about-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 470px)
{
  .about-gallery { grid-template-columns: 1fr; }
}