/* ============================================================
   ONYX OFX — общие стили сайта (каркас: шапка, подвал, главная)

   ПРАВИЛО ЧИСЕЛ (🗣 Е.Г. 2026-07-31): все размеры и отступы —
   ЧЁТНЫЕ. Шаг сетки 4: 4·8·12·16·20·24·28·32·40·48·56·64·72·80.
   Кегли — чётные доли rem: 0.8 · 1 · 1.2 · 1.4 · 1.6 · 1.8 · 2 · 2.4 · 2.8 · 3.2.
   Нечётных значений в файле быть не должно.

   Палитра: фон #222526 · карточки #1a1b1e · рамки #2a2b2e
            акцент #09a9ff · второй акцент #d264fb · текст #e0e0e0
   Обновлено: 31.07.2026
   ============================================================ */

/* ==================== ШРИФТЫ (свои, без обращений наружу) ==================== */
/* Gunterz (Locomotype) — заголовок главной.                                    */
/* Roboto — подвал.                                                             */
/* Helvetica — подзаголовки, берётся системная, файл не нужен.                  */

@font-face {
  font-family: "Gunterz";
  src: url("/assets/fonts/gunterz-medium.woff2") format("woff2"),
       url("/assets/fonts/gunterz-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #222526;
  color: #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: #09a9ff; text-decoration: none; }
a:hover { color: #4dc3ff; }

/* ширина содержимого уже: 1200 -> 1000 (🗣 Е.Г. 2026-07-31) */
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* ==================== ПРИЛИПАЮЩАЯ ШАПКА ==================== */
/* position: sticky — шапка занимает место в потоке, поэтому  */
/* заголовок под неё НЕ уезжает (в отличие от fixed).          */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(34, 37, 38, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid #2a2b2e;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
}

/* Логотип обрезан по краю рисунка — прозрачных полей в файле НЕТ, поэтому  */
/* он встаёт по левому краю содержимого сам, без подпорок. Прежде здесь     */
/* стоял отрицательный отступ, подобранный на глаз: он ломался при любой    */
/* смене размера и не совпадал между страницами.                           */
/* Исходник с полями сохранён рядом: logo-original-with-padding.png         */
/* Пропорция закреплена жёстко: width:auto + max-width:none + запрет сжатия */
/* во флексе — иначе картинку ужмёт по ширине и логотип вытянется вверх.    */
.site-logo { flex: 0 0 auto; display: block; line-height: 0; }
.site-logo img { height: 40px; width: auto; max-width: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* подгонка по глазу (🗣 Е.Г. 2026-07-31): по вертикали чуть больше,   */
  /* по горизонтали чуть меньше. 4/14 -> 6/12                            */
  padding: 6px 12px;
  /* высота −10% (🗣 Е.Г. 2026-07-31): убираем не отступом, а межстрочным  */
  /* — отступы 6/12 уже утверждены, трогать их не надо                    */
  line-height: 1.4;
  /* +5% по высоте (🗣 Е.Г. 2026-07-31). Отступы и межстрочный уже        */
  /* утверждены, поэтому задаём точную высоту: 34.4px -> 36px.            */
  /* Заодно кнопка Discord встаёт вровень с текстовыми.                   */
  min-height: 36px;
  border-radius: 6px;
  background: #09a9ff;
  color: #ffffff;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  /* 🗣 Е.Г. 2026-07-31: Poppins Light */
  font-weight: 300;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* при наведении кнопка ПРИБЛИЖАЕТСЯ, а не подпрыгивает (🗣 Е.Г. 2026-07-31): */
/* подскок сдвигал соседей и вся шапка «дышала»                              */
.nav-btn:hover { background: #34baff; color: #ffffff; transform: scale(1.06); }

/* Вторичные пункты — просто текст, без коробки (🗣 Е.Г. 2026-07-31).      */
/* Заливка = действие (проба, покупка, демо), текст = навигация.           */
/* Рамка оставлена ПРОЗРАЧНОЙ: убери её совсем — высота и выравнивание     */
/* разъедутся с залитыми кнопками.                                        */
/* 🗣 Е.Г. 2026-08-01: все кнопки шапки одного цвета — было слишком пёстро. */
/* Класс оставлен, чтобы разметку не переписывать: понадобится разделение  */
/* снова — менять только здесь.                                            */
.nav-btn--ghost { background: #09a9ff; border: 2px solid transparent; color: #ffffff; }
.nav-btn--ghost:hover { background: #34baff; color: #ffffff; }

.nav-btn--icon { padding: 6px 8px; }
.nav-btn--icon svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* ==================== ГЛАВНЫЙ ЭКРАН ==================== */

/* 🔴 Боковые отступы 20px ОБЯЗАТЕЛЬНЫ: запись `padding: 28px 0 24px`     */
/* задаёт их нулём и затирает отступ .wrap — блок становится на 40px шире */
/* шапки, а содержимое уезжает на 20px влево. Ровно эта ошибка уже была   */
/* у .page-head. Верхний отступ вдвое меньше — 🗣 Е.Г. 2026-07-31.        */
.hero { padding: 28px 20px 24px; }

.hero h1 {
  margin: 0 0 14px;
  font-family: "Gunterz", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* −25% от первой прикидки (🗣 Е.Г. 2026-07-31, сверка с прежним сайтом) */
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  /* 🗣 Е.Г. 2026-07-31: выбран Medium — как на прежнем сайте */
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #ffffff;
}

/* Фирменная пара цветов из логотипа. Работает в ЛЮБОМ заголовке, не  */
/* только на главной: названия продукта и акцентные фразы красим ими. */
.t-blue { color: #09a9ff; }
.t-magenta { color: #d264fb; }

.hero-sub {
  /* впритык к строке ниже (🗣 Е.Г. 2026-07-31): отступ снят, межстрочный */
  /* с 1.6 до 1.2 — основной зазор давал именно он                        */
  margin: 0;
  line-height: 1.2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.hero-sub--small {
  line-height: 1.2;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: #c8c8c8;
  margin-bottom: 10px;
}

/* хосты */
.hosts {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  /* пустота сверху/снизу меньше (🗣 Е.Г. 2026-07-31) */
  line-height: 1.2;
  margin: 0 0 10px;
}

.host {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* +40% (🗣 Е.Г. 2026-07-31): 1.2 -> 1.6rem, ближайшее чётное к 1.68 */
  font-size: 1.6rem;
  font-weight: 600;
  color: #ffffff;
}

.host img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.hero-claim {
  margin: 0 0 34px;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: #ffffff;
}

.hero-claim .accent { color: #09a9ff; }

/* видео-демонстрация */
.hero-video {
  border: 2px solid #2a2b2e;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ==================== БЛОК ВОЗМОЖНОСТЕЙ ==================== */

/* 🔴 и здесь боковые 20px обязательны — см. пояснение у .hero */
.features { padding: 72px 20px 24px; }

.features h2 {
  margin: 0 0 44px;
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #09a9ff;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.feature {
  background: #1a1b1e;
  border: 2px solid #2a2b2e;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature:hover { border-color: #09a9ff; transform: translateY(-4px); }

/* Картинки показываем ЦЕЛИКОМ. Все три исходника 495x528 (замерено),   */
/* поэтому высота у карточек совпадает сама, подгонять не нужно.        */
/* 🔴 Прежний aspect-ratio 16/10 обрезал их сверху и снизу.             */
.feature img { width: 100%; height: auto; }

.feature-body { padding: 22px 24px 26px; }

.feature h3 {
  margin: 0 0 12px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
}

.feature p { margin: 0; color: #c0c0c0; }

/* ==================== ПОДВАЛ ==================== */

.site-footer {
  margin-top: 80px;
  padding: 54px 0 40px;
  border-top: 2px solid #2a2b2e;
  text-align: center;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.site-footer h2 {
  margin: 0 0 20px;
  font-size: 2rem;
  font-weight: 700;
  color: #09a9ff;
}

.footer-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #09a9ff;
  color: #ffffff;
  margin-bottom: 22px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-discord:hover { background: #34baff; color: #ffffff; transform: translateY(-2px); }
.footer-discord svg { width: 26px; height: 26px; fill: currentColor; }

.footer-links {
  margin: 0 0 10px;
  color: #8b8d92;
  font-size: 1rem;
}

.footer-links a { color: #b8b9bd; }
.footer-links a:hover { color: #09a9ff; }
.footer-links .sep { margin: 0 8px; color: #4a4b4f; }

.footer-copy { margin: 0; color: #8b8d92; font-size: 0.8rem; }
.footer-copy .rights { color: #d264fb; }

/* ==================== УЗКИЙ ЭКРАН ==================== */

@media (max-width: 860px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .site-nav { width: 100%; }
  .nav-btn { padding: 6px 10px; font-size: 0.8rem; }
  .hero { padding-top: 36px; }
  .hosts { gap: 18px; }
  .host { font-size: 1.4rem; }
  .host img { width: 28px; height: 28px; }
  .features { padding-top: 52px; }
}

/* ==================== ТЕЛЕФОН ==================== */

/* 🗣 Е.Г. 2026-08-01, по скриншоту с телефона: шесть кнопок шапки не влезали
   в строку и переносились на вторую. Уменьшаем сами кнопки — убирать пункты
   нельзя, каждый из них ведёт на нужную страницу.

   ДВЕ ступени, а не одна. Ряд из шести кнопок — самое узкое место всей
   вёрстки: стоит ему не влезть, он переносится, и шапка становится вдвое
   выше. Поэтому обычным телефонам даём размер покрупнее, а самым узким
   оставляем мелкий.
   Замер на 376px: при 0.72rem ряд занимает ~320px из 336 доступных.
   На 360px этого запаса уже нет — там вступает вторая ступень ниже. */
@media (max-width: 520px) {
  .site-nav { gap: 4px; }

  .nav-btn {
    gap: 4px;
    padding: 4px 6px;
    min-height: 30px;
    font-size: 0.72rem;
  }

  .nav-btn--icon { padding: 4px 6px; }
  .nav-btn--icon svg { width: 16px; height: 16px; }

  /* «ONYX AI MATTE V3.2» разрывался на две строки. Кегль привязан к ширине
     экрана — тогда строка держится целой на любом телефоне.
     Верхняя граница = 1.8rem, то же значение, что даёт общее правило на
     границе 520px: иначе на этой ширине был бы заметный скачок размера. */
  .hero h1 { font-size: clamp(1.4rem, 6.8vw, 1.8rem); }
}

/* Вторая ступень — самые узкие телефоны. Здесь ряду кнопок места впритык,
   поэтому возвращаем мелкий размер. Правится ТОЛЬКО вместе с блоком выше:
   значения там подобраны под ширину 376px и на 360px уже не помещаются. */
@media (max-width: 360px) {
  .nav-btn { min-height: 28px; font-size: 0.64rem; }
  .nav-btn--icon svg { width: 14px; height: 14px; }
}

/* ==================== ЗАГОЛОВОК ВНУТРЕННЕЙ СТРАНИЦЫ ==================== */

/* Шапка страницы. Ширину НЕ расширяем: раньше стояло 1200px ради того,    */
/* чтобы длинный заголовок влез в строку, но из-за этого блок выпирал       */
/* шире остального сайта и логотип выглядел съехавшим. После уменьшения     */
/* кегля на 20% заголовок помещается и в общую ширину (🗣 Е.Г. 2026-08-01). */
/* Боковые отступы 20px обязательны: прежнее `padding: 20px 0 10px`         */
/* затирало горизонтальный отступ .wrap и текст упирался в края.            */
.page-head { padding: 20px 20px 10px; text-align: center; }

.page-head h1 {
  margin: 0 0 4px;
  font-family: "Gunterz", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* меньше, чем на главной: там заголовок — витрина, здесь просто название  */
  /* раздела (🗣 Е.Г. 2026-08-01)                                            */
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #ffffff;
}

.page-head h1 .accent { color: #09a9ff; }

.page-lead {
  margin: 0 0 2px;
  line-height: 1.2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: #ffffff;
}

.page-note {
  margin: 0 auto;
  max-width: 760px;
  color: #b0b0b0;
  font-size: 1rem;
  line-height: 1.6;
}

.page-note--wide {
  max-width: 100%;
  margin: 24px 0 0;
  padding: 16px 20px;
  background: #1a1b1e;
  border: 2px solid #2a2b2e;
  border-radius: 10px;
  text-align: center;
}

/* ==================== КАРТОЧКИ СКАЧИВАНИЯ ==================== */

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px 20px 0;
}

.dl {
  display: flex;
  flex-direction: column;
  background: #1a1b1e;
  border: 2px solid #2a2b2e;
  border-radius: 10px;
  padding: 24px 24px 20px;
  transition: border-color 0.2s ease;
}

.dl:hover { border-color: #09a9ff; }

.dl h2 {
  margin: 0 0 16px;
  font-size: 1.8rem;
  font-weight: 700;
  /* названия систем — фирменным синим (🗣 Е.Г. 2026-08-01) */
  color: #09a9ff;
  text-align: center;
}

/* Кнопка скачивания в три строки — одинаково на всех платформах:      */
/* «Download for» / название системы / размер. Раньше перенос зависел  */
/* от длины названия: Windows переносился, macOS и Linux — нет.        */
.dl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #09a9ff;
  color: #ffffff;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dl-btn:hover { background: #34baff; color: #ffffff; transform: translateY(-2px); }

.dl-os {
  font-weight: 600;
}

.dl-size {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 300;
  opacity: 0.86;
}

/* Текст под кнопкой по центру (🗣 Е.Г. 2026-07-31) */
.dl-req { margin: 20px 0 0; text-align: center; }

.dl-req dt {
  /* подписи — главные в карточке (🗣 Е.Г. 2026-07-31): белые, жирнее, крупнее */
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* подпись вплотную к своему значению (🗣 Е.Г. 2026-07-31): */
  /* межстрочный 1.2, зазор под подписью убран; 12px остаётся    */
  /* только МЕЖДУ группами, чтобы они читались парами            */
  line-height: 1;
  margin-top: 12px;
}

.dl-req dd {
  margin: 0;
  color: #c0c0c0;
  font-size: 1rem;
  line-height: 1.4;
}

.dl-req code {
  background: #222526;
  border: 2px solid #2a2b2e;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 0.8rem;
}

@media (max-width: 860px) {
  .page-head { padding-top: 28px; }
  .downloads { padding-top: 12px; }
}

/* ==================== ПЛАШКИ-ПРЕДУПРЕЖДЕНИЯ ==================== */

.notice {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 2px solid #2a2b2e;
  background: #1a1b1e;
  color: #c0c0c0;
  text-align: center;
  line-height: 1.6;
}

.notice strong { color: #ffffff; }
.notice--try { border-color: #09a9ff; }
.notice--warn { border-color: #ffc107; color: #d8d8d8; }
.notice--warn strong { color: #ffc107; }

/* ==================== ТАРИФЫ ==================== */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #1a1b1e;
  border: 2px solid #2a2b2e;
  border-radius: 10px;
  /* плотнее по вертикали — 🗣 Е.Г. 2026-07-31 */
  padding: 24px 20px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.plan:hover { border-color: #09a9ff; transform: translateY(-4px); }

.plan--featured { border-color: #09a9ff; }

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 12px;
  background: #2a2d2e;
  border: 2px solid #3a3b3f;
  color: #b8b9bd;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.plan-badge--hot { background: #09a9ff; border-color: #09a9ff; color: #ffffff; }

.plan h2 {
  margin: 0 0 4px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.plan-for {
  margin: 0 0 12px;
  color: #8b8d92;
  font-size: 1rem;
  text-align: center;
}

.plan-price {
  margin: 0 0 14px;
  text-align: center;
  /* 🔴 НЕ Gunterz: в пробной версии цифра 4 подменена значком DEMO       */
  /* (замерено: краски 3982 против 8000-14700 у прочих цифр, высота 109  */
  /* против ~155). Вернуть Gunterz можно ТОЛЬКО после покупки лицензии   */
  /* и повторной проверки всех цифр.                                     */
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* LIFETIME — зелёная плашка под ценой (🗣 Е.Г. 2026-07-31) */
.plan-term {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(89, 217, 138, 0.12);
  border: 2px solid rgba(89, 217, 138, 0.42);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #59d98a;
  text-transform: uppercase;
}

.plan-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.plan-list li {
  padding: 6px 0;
  border-bottom: 2px solid #222526;
  color: #c0c0c0;
  text-align: center;
  line-height: 1.4;
}

.plan-list li:last-child { border-bottom: none; }
.plan-list strong { color: #ffffff; }
.plan-save { color: #59d98a !important; font-weight: 600; }

.plan-btn {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  background: #09a9ff;
  color: #ffffff;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.plan-btn:hover { background: #34baff; color: #ffffff; transform: translateY(-2px); }

/* ==================== ОБЪЕДИНЁННАЯ ПЛАШКА ==================== */
/* Две отдельные рамки съедали ~100px по высоте на одни только    */
/* границы и отступы. Здесь один блок с разделителем внутри.      */

.notice-combo {
  margin: 0 0 20px;
  border: 2px solid #2a2b2e;
  border-radius: 10px;
  background: #1a1b1e;
  overflow: hidden;
}

.notice-line {
  margin: 0;
  padding: 10px 20px;
  text-align: center;
  line-height: 1.4;
  color: #c0c0c0;
}

.notice-line--try {
  border-bottom: 2px solid #2a2b2e;
}

.notice-line--try strong { color: #ffffff; }

.notice-line--warn {
  font-size: 0.8rem;
  color: #b0b0b0;
}

.notice-line--warn strong { color: #ffc107; }

/* Знак валюты — мелким и приподнятым, как на прежнем сайте (🗣 Е.Г. 2026-07-31) */
.plan-price .cur {
  font-size: 0.4em;
  vertical-align: super;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 2px;
}

/* ==================== ВСПЛЫВАЮЩЕЕ ОКНО (ДЕМО) ==================== */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox:target { display: flex; }

/* фон-подложка: клик по ней закрывает окно */
.lightbox-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox-body {
  position: relative;
  width: 100%;
  max-width: 1200px;
}

.lightbox-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px solid #2a2b2e;
  border-radius: 10px;
  overflow: hidden;
  /* Заглушка вместо чёрного прямоугольника, пока грузится ролик YouTube.  */
  /* Кадр перекроет её сам, как только отрисуется.                         */
  background: #000 url("/assets/video/demo-poster.jpg") center / cover no-repeat;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #2a2d2e;
  color: #e0e0e0;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Крестик рисованный, а не символ «×»: у типографского знака своя посадка */
/* в строке, и по центру квадрата он не встаёт ни при каких отступах.      */
.lightbox-close svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

.lightbox-close:hover { background: #09a9ff; color: #ffffff; }

@media (max-width: 860px) {
  .lightbox { padding: 12px; }
  .lightbox-close { top: -36px; }
}

/* ==================== ФОТОГРАФИИ КОМАНДЫ (About) ==================== */
/* Свечение и приближение при наведении. Размеры и рамка заданы в самой   */
/* разметке (наследие прежнего сайта), поэтому здесь только то, чего там  */
/* нет — иначе встроенный стиль перебил бы наш.                           */

.onyx-team-photo {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.onyx-team-link:hover .onyx-team-photo,
.onyx-team-link:focus-visible .onyx-team-photo {
  transform: scale(1.06);
  box-shadow: 0 0 32px rgba(9, 169, 255, 0.55), 0 0 12px rgba(210, 100, 251, 0.4);
  border-color: #d264fb;
}

.onyx-team-link { display: block; text-decoration: none; }

.onyx-team-link:hover .onyx-team-role { color: #d264fb; }
.onyx-team-role { transition: color 0.2s ease; }

/* ==================== ПРАВОВЫЕ СТРАНИЦЫ ==================== */

.legal { padding-bottom: 24px; }

.legal h2 {
  margin: 32px 0 10px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #09a9ff;
}

.legal h2:first-child { margin-top: 0; }

.legal p { margin: 0 0 12px; color: #c0c0c0; }
.legal strong { color: #ffffff; }

.legal ul { margin: 0 0 12px; padding-left: 22px; color: #c0c0c0; }
.legal li { margin-bottom: 4px; }

.legal code {
  background: #1a1b1e;
  border: 2px solid #2a2b2e;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.8rem;
  word-break: break-all;
}

.legal-updated {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 2px solid #2a2b2e;
  color: #8b8d92;
  font-size: 0.8rem;
  font-style: italic;
}

/* ==================== ПАРТНЁРСКАЯ ПЛАШКА (/gene/) ==================== */

.affiliate {
  margin: 0 0 20px;
  padding: 14px 20px;
  border: 2px solid rgba(89, 217, 138, 0.42);
  border-radius: 10px;
  background: rgba(89, 217, 138, 0.1);
  color: #d8d8d8;
  text-align: center;
  line-height: 1.4;
}

.affiliate strong { color: #ffffff; }

.affiliate-off {
  color: #59d98a;
  font-weight: 700;
  white-space: nowrap;
}

.plan-off {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Старая цена над новой — только на партнёрской странице */
.plan-was {
  display: block;
  margin-bottom: 2px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: #8b8d92;
  text-decoration: line-through;
}

.affiliate-who {
  color: #ffffff;
  font-weight: 700;
  border-bottom: 2px solid rgba(89, 217, 138, 0.5);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.affiliate-who:hover { color: #59d98a; border-bottom-color: #59d98a; }

/* Компактный главный заголовок: там, где крупное название страницы лишнее,  */
/* но <h1> всё равно обязан быть — без него страница безголовая для поиска.  */
.page-head h1.h1--compact {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 6px;
}