/* ==========================================================================
   MEDIA BOX — ТЕМА «2050» (future.css)
   --------------------------------------------------------------------------
   Подключается ПОСЛЕДНЕЙ таблицей стилей на всех страницах и включается
   атрибутом html[data-theme="2050"] (его ставит assets/js/boot.js).
   Старый дизайн: откройте сайт с ?theme=classic — все правила этого файла
   выключатся (каждое начинается с [data-theme="2050"]). Вернуть: ?theme=2050.

   Идея: тот же тёмный космос и бирюзово-фиолетовая гамма, но «из будущего»:
     • глубина — звёзды, медленное северное сияние, светящийся «пол»
       из сетки, уходящий к горизонту;
     • свет — тонкие светящиеся кромки, HUD-уголки, «пакеты» света,
       бегущие по линиям-разделителям;
     • данные — технические подписи моноширинным шрифтом и «телеметрия»
       над телефонами (как в панели софта SDG);
     • голография — телефоны на главной «материализуются» из луча.

   Правила проекта соблюдены: движение — только transform и opacity,
   никаких JS-циклов; hover — только для мыши; reduced motion — без движения.

   Содержание:
     1. Токены темы
     2. Фон страницы: звёзды, сияние, зерно
     3. Типографика и HUD-подписи
     4. Шапка, логотип, меню, языки
     5. Кнопки, чипы, карточки, формы
     6. Секции, CTA, разделители, шапки страниц
     7. Подвал
     8. Главная: фон, ядро, телефоны, телеметрия, интро
     9. Новые блоки главной (home.css) — усиление в теме
    10. Reduced motion и печать
   ========================================================================== */


/* ==========================================================================
   1. ТОКЕНЫ ТЕМЫ
   ========================================================================== */

html[data-theme="2050"] {
  --bg: #03040a;
  --bg-2: #070a17;
  --surface: #0a0f22;
  --surface-2: #10173a;

  --border: rgba(150, 180, 255, .10);
  --border-strong: rgba(160, 190, 255, .20);

  --text: #eef3ff;
  --text-muted: #97a3c2;
  --text-dim: #7a85a5;   /* тусклее --text-muted, но ≥ 4.5:1 на фоне и карточках (WCAG AA) */

  --accent: #3ee0ff;
  --accent-2: #7b5cff;
  --accent-3: #36f2b0;
  --accent-4: #d35cff;
  /* средняя точка #8a6dff (а не #7b5cff): тёмный текст кнопки по центру ≥ 4.5:1 */
  --accent-grad: linear-gradient(120deg, #3ee0ff 0%, #8a6dff 58%, #c25cff 100%);

  --glass: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  --glass-bg: rgba(9, 13, 30, .62);
  --edge: linear-gradient(135deg, rgba(62, 224, 255, .7), rgba(123, 92, 255, .25) 40%, rgba(194, 92, 255, .6));

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Consolas, 'Liberation Mono', monospace;

  --header-bg: rgba(4, 6, 15, .58);
  --panel-bg: rgba(5, 8, 20, .97);
}


/* ==========================================================================
   2. ФОН СТРАНИЦЫ: ЗВЁЗДЫ, СИЯНИЕ, ЗЕРНО
   Три неподвижных (fixed) слоя под всем содержимым. Сияние медленно
   «дышит» через transform — работа видеокарты, процессор не нагружается.
   ========================================================================== */

html[data-theme="2050"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 620px at 50% -220px, rgba(123, 92, 255, .17), transparent 70%),
    radial-gradient(900px 520px at 100% -60px, rgba(62, 224, 255, .08), transparent 70%);
}

/* Звёзды: несколько слоёв точек разной плотности */
html[data-theme="2050"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, .75), transparent 60%),
    radial-gradient(1px 1px at 137px 97px, rgba(190, 230, 255, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 211px 173px, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 61px 221px, rgba(210, 190, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 289px 53px, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 331px 263px, rgba(150, 230, 255, .5), transparent 60%);
  background-size: 360px 300px, 360px 300px, 360px 300px, 360px 300px, 360px 300px, 360px 300px;
  opacity: .55;
}

/* Северное сияние: большие мягкие пятна, медленный дрейф */
html[data-theme="2050"] body::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(32% 26% at 22% 28%, rgba(62, 224, 255, .10), transparent 70%),
    radial-gradient(30% 28% at 78% 58%, rgba(123, 92, 255, .13), transparent 70%),
    radial-gradient(26% 20% at 46% 88%, rgba(211, 92, 255, .07), transparent 70%);
  animation: fx-aurora 46s var(--ease-in-out) infinite alternate;
}

/* Лёгкое «зерно» плёнки — убирает цифровую плоскость градиентов */
html[data-theme="2050"]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes fx-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.06); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-4deg) scale(1.02); }
}

html[data-theme="2050"] ::selection {
  background: rgba(62, 224, 255, .3);
  color: #fff;
}


/* ==========================================================================
   3. ТИПОГРАФИКА И HUD-ПОДПИСИ
   ========================================================================== */

/* Крупные заголовки — «хромированные»: белый с холодным переливом */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-theme="2050"] h1:not(.hero__title),
  html[data-theme="2050"] .section-head > h2,
  html[data-theme="2050"] .cta__title {
    background: linear-gradient(180deg, #ffffff 0%, #dfe7ff 55%, #9fb0dd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Фон рисуется только внутри блока, а строки плотные (line-height ≈ 1.1):
       без запаса снизу «хвосты» р, у, д, щ последней строки обрезаются.
       padding + равный отрицательный margin — раскладка не сдвигается. */
    padding-bottom: .15em;
    margin-bottom: -.15em;
  }

  /* Градиентные слова внутри «хромированных» заголовков остаются цветными */
  html[data-theme="2050"] h1 .gradient-text,
  html[data-theme="2050"] h2 .gradient-text {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* Надпись над заголовком — как метка интерфейса: моноширинный шрифт,
   мигающий индикатор, «скобки» */
html[data-theme="2050"] .eyebrow {
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--accent);
}

html[data-theme="2050"] .eyebrow::before {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 224, 255, .14), 0 0 12px rgba(62, 224, 255, .8);
  animation: fx-blink 2.4s ease-in-out infinite;
}

html[data-theme="2050"] .eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(62, 224, 255, .7), transparent);
}

@keyframes fx-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

html[data-theme="2050"] .lead {
  color: #a7b2cf;
}


/* ==========================================================================
   4. ШАПКА, ЛОГОТИП, МЕНЮ, ЯЗЫКИ
   ========================================================================== */

html[data-theme="2050"] .site-header {
  border-bottom-color: transparent;
}

/* Светящаяся «линия горизонта» под шапкой */
html[data-theme="2050"] .site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(62, 224, 255, .45) 25%, rgba(123, 92, 255, .45) 70%, transparent 100%);
  opacity: .8;
  pointer-events: none;
}

html[data-theme="2050"] .page--home .site-header::after {
  opacity: 0;
}

/* Знак логотипа — «голографический» кристалл с вращающимся бликом */
html[data-theme="2050"] .logo__mark {
  overflow: hidden;
  background: conic-gradient(from 210deg, #3ee0ff, #7b5cff, #c25cff, #3ee0ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 0 18px -2px rgba(62, 224, 255, .7),
    0 0 30px -6px rgba(194, 92, 255, .6);
}

html[data-theme="2050"] .logo__by {
  font-family: var(--font-mono);
  font-size: .625rem;          /* 10 px, как в классике: 9 px читался с трудом */
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f8bb0;
}

html[data-theme="2050"] .site-nav__link {
  letter-spacing: .01em;
}

/* Подчёркивание активного пункта — светящийся луч (только меню строкой;
   в бургер-меню тот же ::after — шеврон «>», его не трогаем) */
@media (min-width: 1200px) {
  html[data-theme="2050"] .site-nav__link::after {
    height: 2px;
    box-shadow: 0 0 10px rgba(62, 224, 255, .8);
  }
}

@media (max-width: 1199.98px) {
  html[data-theme="2050"] .site-nav {
    border-bottom-color: rgba(62, 224, 255, .2);
  }
}

/* Кнопка «Подобрать решение» на своей странице — кольцо «вы здесь»
   (правило темы для .btn--primary иначе перебивает его) */
html[data-theme="2050"] .site-nav__cta[aria-current="page"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 3px var(--bg),
    0 0 0 4px rgba(62, 224, 255, .65);
}

html[data-theme="2050"] .lang-switch {
  border-color: rgba(150, 180, 255, .18);
  background: rgba(255, 255, 255, .025);
}

html[data-theme="2050"] .lang-switch__link {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .08em;
}

html[data-theme="2050"] .nav-toggle {
  border-color: rgba(150, 180, 255, .2);
  background: rgba(255, 255, 255, .025);
}


/* ==========================================================================
   5. КНОПКИ, ЧИПЫ, КАРТОЧКИ, ФОРМЫ
   ========================================================================== */

/* Основная кнопка: живой градиент + внутренняя «кромка» */
html[data-theme="2050"] .btn--primary {
  background: var(--accent-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 10px 30px -12px rgba(62, 224, 255, .75),
    0 10px 34px -14px rgba(194, 92, 255, .7);
}

html[data-theme="2050"] .btn--primary::before {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25),
    0 0 26px -2px rgba(62, 224, 255, .65),
    0 0 44px -6px rgba(194, 92, 255, .6);
}

/* Второстепенная кнопка — стекло со светящейся кромкой при наведении */
html[data-theme="2050"] .btn--ghost {
  background-color: rgba(255, 255, 255, .035);
  border-color: rgba(150, 180, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="2050"] .btn--ghost:hover {
    background-color: rgba(62, 224, 255, .07);
    border-color: rgba(62, 224, 255, .55);
  }
}

html[data-theme="2050"] .chip {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-color: rgba(150, 180, 255, .2);
  background: rgba(255, 255, 255, .03);
}

html[data-theme="2050"] .chip--accent {
  color: var(--accent);
  border-color: rgba(62, 224, 255, .4);
  background: rgba(62, 224, 255, .08);
}

/* Карточки — тёмное стекло с бликом сверху */
html[data-theme="2050"] .card {
  border-color: rgba(150, 180, 255, .1);
  background: var(--glass), var(--glass-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 30px 60px -40px rgba(0, 0, 0, .9);
}

html[data-theme="2050"] .card__icon {
  color: var(--accent);
  background:
    radial-gradient(circle at 30% 20%, rgba(62, 224, 255, .28), transparent 60%),
    linear-gradient(135deg, rgba(62, 224, 255, .12), rgba(123, 92, 255, .16));
  border-color: rgba(62, 224, 255, .3);
  box-shadow: 0 0 18px -6px rgba(62, 224, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Подсветка карточки при наведении — светящаяся кромка */
html[data-theme="2050"] .card--glow::before {
  box-shadow:
    0 0 0 1px rgba(62, 224, 255, .45),
    0 0 30px -8px rgba(62, 224, 255, .5),
    0 24px 60px -24px rgba(123, 92, 255, .55);
}

html[data-theme="2050"] .card--glow::after {
  background: radial-gradient(560px circle at 50% 0%, rgba(62, 224, 255, .12), transparent 55%);
}

/* Выделенная карточка — переливающаяся рамка */
html[data-theme="2050"] .card--featured {
  background:
    linear-gradient(180deg, rgba(123, 92, 255, .14), rgba(62, 224, 255, 0) 45%) padding-box,
    linear-gradient(#0a0f22, #0a0f22) padding-box,
    var(--edge) border-box;
  box-shadow: 0 40px 90px -40px rgba(123, 92, 255, .7), 0 0 40px -20px rgba(62, 224, 255, .5);
}

/* Поля формы — стекло, свечение при фокусе */
html[data-theme="2050"] .field__input,
html[data-theme="2050"] .checkbox input {
  border-color: rgba(150, 180, 255, .2);
  background-color: rgba(6, 10, 24, .75);
}

html[data-theme="2050"] .field__input:focus,
html[data-theme="2050"] .field__input:focus-visible {
  border-color: var(--accent);
  background-color: rgba(6, 10, 24, .95);
  box-shadow: 0 0 0 3px rgba(62, 224, 255, .16), 0 0 24px -6px rgba(62, 224, 255, .6);
}

/* Поле с ошибкой — красная рамка и в теме (иначе правила выше её перебивают) */
html[data-theme="2050"] .field--invalid .field__input,
html[data-theme="2050"] .field__input[aria-invalid="true"],
html[data-theme="2050"] .checkbox input[aria-invalid="true"],
html[data-theme="2050"] .field--invalid .checkbox input {
  border-color: var(--danger);
}

html[data-theme="2050"] .field--invalid .field__input:focus,
html[data-theme="2050"] .field__input[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 107, 129, .2);
}

/* Наведение мышью: правила темы выше иначе «гасят» подсветку из base.css / hero.css */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="2050"] .nav-toggle:hover {
    border-color: rgba(62, 224, 255, .5);
    background-color: rgba(62, 224, 255, .07);
  }

  html[data-theme="2050"] .hero__skip:hover {
    border-color: rgba(62, 224, 255, .5);
  }

  html[data-theme="2050"] .field__input:hover:not(:focus) {
    border-color: rgba(150, 180, 255, .36);
  }

  html[data-theme="2050"] .field--invalid .field__input:hover,
  html[data-theme="2050"] .field__input[aria-invalid="true"]:hover {
    border-color: var(--danger);
  }
}

/* Карточки «В разработке» на странице софта остаются приглушёнными
   (общие правила темы для .card__icon и .chip иначе делают их яркими) */
html[data-theme="2050"] .sw-soon .card__icon {
  color: var(--text-muted);
  background: rgba(255, 255, 255, .04);
  border-color: var(--border-strong);
  box-shadow: none;
}

html[data-theme="2050"] .sw-soon__chip {
  color: var(--text);
  border-color: rgba(123, 92, 255, .6);
  background: rgba(123, 92, 255, .12);
}


/* ==========================================================================
   6. СЕКЦИИ, CTA, РАЗДЕЛИТЕЛИ, ШАПКИ СТРАНИЦ
   ========================================================================== */

/* Разделитель секций: линия + бегущий по ней «пакет» света */
html[data-theme="2050"] .section--divider::before {
  background: linear-gradient(90deg, transparent, rgba(62, 224, 255, .3) 25%, rgba(123, 92, 255, .3) 75%, transparent);
}

/* «Пакет» бежит ровно по линии: от её левого края до правого
   (линия — по ширине контейнера, см. .section--divider::before в pages.css) */
html[data-theme="2050"] .section--divider::after {
  content: '';
  position: absolute;
  top: -1px;
  left: max(var(--gutter), calc((100% - var(--container)) / 2));
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(62, 224, 255, .95), transparent);
  opacity: 0;
  pointer-events: none;
  animation: fx-packet 7s linear infinite;
}

@keyframes fx-packet {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translateX(calc(min(var(--container), 100vw - 2 * var(--gutter)) - 120px)); opacity: 0; }
}

/* Полоса-фон секции — чуть холоднее */
html[data-theme="2050"] .section--band {
  background: linear-gradient(180deg, rgba(8, 12, 30, 0) 0%, rgba(8, 12, 30, .72) 16%, rgba(8, 12, 30, .72) 84%, rgba(8, 12, 30, 0) 100%);
}

/* Шапка внутренней страницы: светящийся «пол» из сетки, уходящий к горизонту */
html[data-theme="2050"] .page-hero::before {
  inset: auto -40% -2px -40%;
  height: 78%;
  background-image:
    linear-gradient(rgba(62, 224, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 140, 255, .14) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  transform-origin: 50% 100%;
  transform: perspective(520px) rotateX(64deg);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 92%);
  opacity: .55;
}

/* Свечение — шире и с фиолетово-розовым краем */
html[data-theme="2050"] .page-hero::after {
  background: radial-gradient(closest-side, rgba(62, 224, 255, .14), rgba(123, 92, 255, .10) 50%, rgba(194, 92, 255, .04) 75%, transparent);
}

/* «Межгалактическая» страница площадок сохраняет свою розово-фиолетовую туманность */
html[data-theme="2050"] .gx-hero::after {
  background: radial-gradient(closest-side, rgba(194, 92, 255, .18), rgba(123, 92, 255, .11) 45%, rgba(62, 224, 255, .05) 70%, transparent);
}

/* Финальный CTA-блок — «окно терминала» с HUD-уголками */
html[data-theme="2050"] .cta {
  background:
    radial-gradient(640px 320px at 0% 0%, rgba(62, 224, 255, .14), rgba(62, 224, 255, 0) 70%) padding-box,
    radial-gradient(560px 340px at 100% 100%, rgba(194, 92, 255, .18), rgba(194, 92, 255, 0) 70%) padding-box,
    linear-gradient(#080d1f, #080d1f) padding-box,
    var(--edge) border-box;
  box-shadow: 0 50px 110px -60px rgba(123, 92, 255, .85), 0 0 60px -30px rgba(62, 224, 255, .5);
}

html[data-theme="2050"] .cta::after,
html[data-theme="2050"] .fx-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: -1;
  pointer-events: none;
  --c: rgba(62, 224, 255, .7);
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 16px no-repeat;
  opacity: .8;
}

/* Хлебные крошки — как путь в интерфейсе */
html[data-theme="2050"] .crumbs__list {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
}


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

html[data-theme="2050"] .site-footer {
  border-top-color: transparent;
  background:
    linear-gradient(90deg, transparent, rgba(62, 224, 255, .35), rgba(123, 92, 255, .35), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(6, 9, 22, 0), rgba(6, 9, 22, .85));
}

html[data-theme="2050"] .site-footer__bottom {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .03em;
}

html[data-theme="2050"] .socials__link {
  border-color: rgba(150, 180, 255, .18);
  background: rgba(255, 255, 255, .025);
}


/* ==========================================================================
   8. ГЛАВНАЯ: ФОН, ЯДРО, ТЕЛЕФОНЫ, ТЕЛЕМЕТРИЯ, ИНТРО
   ========================================================================== */

/* --- Фон hero: глубокий космос --- */
html[data-theme="2050"] .hero {
  background-color: #03040a;
}

html[data-theme="2050"] .hero__bg {
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(40, 52, 120, .45) 0%, rgba(14, 18, 44, .3) 45%, rgba(3, 4, 10, 0) 75%),
    linear-gradient(180deg, #04050c 0%, #03040a 60%, #020308 100%);
}

/* Плоская сетка не нужна — её заменяет «пол» */
html[data-theme="2050"] .hero__grid {
  display: none;
}

/* Звёзды в hero (свой слой — hero непрозрачный) */
html[data-theme="2050"] .hero__stars {
  display: block;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 137px 97px, rgba(190, 230, 255, .65), transparent 60%),
    radial-gradient(1.5px 1.5px at 211px 173px, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 61px 221px, rgba(210, 190, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 289px 53px, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.5px 1.5px at 331px 263px, rgba(150, 230, 255, .55), transparent 60%);
  background-size: 360px 300px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 80%);
  opacity: 0;
  animation: mb-hero-fade-in 1600ms var(--ease-out) 100ms forwards;
}

/* Светящийся «пол»: сетка в перспективе, медленно едет к зрителю.
   Движение — transform на один шаг сетки по кругу (бесшовно). */
html[data-theme="2050"] .hero__floor {
  display: block;
  left: -60%;
  right: -60%;
  bottom: -2px;
  height: 46%;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(420px) rotateX(66deg);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 90%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 90%);
  opacity: 0;
  animation: mb-hero-fade-in 1600ms var(--ease-out) 200ms forwards;
}

html[data-theme="2050"] .hero__floor::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  bottom: 0;
  background-image:
    linear-gradient(rgba(62, 224, 255, .38) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(123, 140, 255, .3) 1.5px, transparent 1.5px);
  background-size: 72px 72px;
  background-position: center top;
  animation: fx-floor 3.6s linear infinite;
}

@keyframes fx-floor {
  from { transform: translateY(0); }
  to   { transform: translateY(72px); }
}

/* Линия горизонта над «полом» */
html[data-theme="2050"] .hero__horizon {
  display: block;
  left: 0;
  right: 0;
  bottom: 45%;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(62, 224, 255, .55) 30%, rgba(194, 92, 255, .55) 70%, transparent 95%);
  box-shadow: 0 0 30px 6px rgba(80, 120, 255, .18);
  opacity: 0;
  animation: mb-hero-fade-in 1800ms var(--ease-out) 300ms forwards;
}

/* Сканирующая линия: один проход сверху вниз во время вступления */
html[data-theme="2050"] .hero__scan {
  display: block;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent 0%, rgba(62, 224, 255, .07) 70%, rgba(62, 224, 255, .5) 99%, transparent 100%);
  opacity: 0;
  transform: translateY(-160px);
}

html[data-theme="2050"] .hero[data-state="appear"] .hero__scan {
  animation: fx-scan 1700ms var(--ease-in-out) 1 both;
}

@keyframes fx-scan {
  0%   { transform: translateY(-160px); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: .8; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Пятна света — холоднее и с розовым краем */
html[data-theme="2050"] .hero__blob--1 {
  background: radial-gradient(closest-side, rgba(62, 224, 255, .15), rgba(62, 224, 255, 0));
}

html[data-theme="2050"] .hero__blob--2 {
  background: radial-gradient(closest-side, rgba(123, 92, 255, .22), rgba(123, 92, 255, 0));
}

html[data-theme="2050"] .hero__blob--3 {
  background: radial-gradient(closest-side, rgba(194, 92, 255, .12), rgba(194, 92, 255, 0));
}

/* --- Ядро: заголовок «хром», статус — метка интерфейса --- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-theme="2050"] .hero__title {
    background: linear-gradient(180deg, #ffffff 0%, #e4ebff 50%, #93a4d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  html[data-theme="2050"] .hero__title-accent {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

html[data-theme="2050"] .hero__title {
  letter-spacing: -.05em;
}

html[data-theme="2050"] .hero__status {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #bff7e4;
  border-color: rgba(54, 242, 176, .3);
  background: rgba(54, 242, 176, .06);
}

html[data-theme="2050"] .hero__status b {
  color: #fff;
}

html[data-theme="2050"] .hero__tagline {
  color: #b3bdd8;
}

html[data-theme="2050"] .hero__hint {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
}

/* --- Центральный узел: «ядро» с вращающимся кольцом --- */
html[data-theme="2050"] .hero__hub-mark {
  background: conic-gradient(from 200deg, #3ee0ff, #7b5cff, #c25cff, #3ee0ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 0 0 7px rgba(62, 224, 255, .07),
    0 0 40px 2px rgba(62, 224, 255, .55),
    0 0 80px 14px rgba(123, 92, 255, .35);
}

/* Ядро чуть дальше от заголовка — вращающиеся кольца не задевают подсказку */
html[data-theme="2050"] .hero {
  --hub-gap: 54px;
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  html[data-theme="2050"] .hero {
    --hub-gap: 44px;
  }
}

@media (min-width: 640px) and (max-height: 680px) {
  html[data-theme="2050"] .hero {
    --hub-gap: 40px;
  }
}

/* ПК средней высоты (681–980 px): ядро ближе к узлу, чтобы строка статуса
   не заезжала под меню шапки (см. такой же блок в hero.css) */
@media (min-width: 1024px) and (min-height: 680.02px) and (max-height: 980px) {
  html[data-theme="2050"] .hero {
    --hub-gap: 44px;
  }
}

html[data-theme="2050"] .hero__hub::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(62, 224, 255, .45);
  animation: fx-spin 14s linear infinite;
}

html[data-theme="2050"] .hero__hub::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(194, 92, 255, .6);
  border-bottom-color: rgba(62, 224, 255, .4);
  animation: fx-spin 9s linear infinite reverse;
}

@keyframes fx-spin {
  to { transform: rotate(360deg); }
}

/* Линии связи — ярче, сигналы — с «хвостом» */
html[data-theme="2050"] .hero__line {
  stroke: rgba(120, 200, 255, .32);
}

html[data-theme="2050"] .hero__pulse {
  stroke: rgba(120, 240, 255, 1);
  stroke-width: 1.8;
}

/* --- Телефоны: титан с холодной кромкой --- */
html[data-theme="2050"] .device__phone {
  background:
    linear-gradient(145deg, #5a6584 0%, #1a1f2e 18%, #2c3350 46%, #10131f 72%, #4b5577 100%);
  box-shadow:
    inset 0 0 0 1px rgba(170, 210, 255, .2),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(62, 224, 255, .08),
    0 3cqh 7cqh -2cqh rgba(0, 0, 0, .8);
}

html[data-theme="2050"] .device__glow {
  box-shadow:
    0 0 0 1.5px rgba(62, 224, 255, .85),
    0 0 26px 2px rgba(62, 224, 255, .42),
    0 0 70px 12px rgba(194, 92, 255, .28);
}

/* Голографическое появление: телефон «разворачивается» из тонкого луча */
html[data-theme="2050"] .hero[data-state="start"] .device__body {
  opacity: 0;
  transform:
    translate3d(calc(var(--fx, 0) * .6px), calc(var(--fy, 24) * .6px), 0)
    scale(.9, .04);
}

/* Отражение телефона на «полу» (только ПК) */
@media (min-width: 1024px) {
  html[data-theme="2050"] .device--primary .device__shadow {
    bottom: -7cqh;
    height: 14cqh;
    background: radial-gradient(closest-side, rgba(62, 224, 255, .22), rgba(62, 224, 255, 0));
  }
}

/* --- «Телеметрия» над основными телефонами (как в панели софта SDG) --- */
html[data-theme="2050"] .device__hud {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border: 1px solid rgba(62, 224, 255, .28);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  color: #c8f4ff;
  background: rgba(4, 10, 24, .78);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}

html[data-theme="2050"] .device__hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 8px rgba(54, 242, 176, .9);
}

html[data-theme="2050"] .hero[data-state="appear"] .device__hud,
html[data-theme="2050"] .hero[data-state="demo"] .device__hud,
html[data-theme="2050"] .hero[data-state="navigation"] .device__hud {
  opacity: .92;
  transform: translate(-50%, 0);
  transition-delay: calc(var(--delay, 0ms) + var(--appear-dur) * .7);
}

html[data-theme="2050"] .hero[data-state="appear"] .device__hud-dot,
html[data-theme="2050"] .hero[data-state="demo"] .device__hud-dot {
  animation: fx-blink 1.4s ease-in-out infinite;
}

html[data-theme="2050"] .hero[data-state="navigation"] .device__hud {
  opacity: .55;
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="2050"] .hero[data-state="navigation"] .device:hover .device__hud {
    opacity: 1;
  }
}

/* Телеметрия — только на ПК: на планшете и смартфоне ей негде поместиться */
@media (max-width: 1023.98px) {
  html[data-theme="2050"] .device__hud {
    display: none;
  }
}

@media (min-width: 640px) and (max-height: 500px) and (orientation: landscape) {
  html[data-theme="2050"] .device__hud {
    display: none;
  }
}

/* --- Подписи-кнопки: стекло, кромка, моноширинная подсказка --- */
html[data-theme="2050"] .device__label-main {
  border-color: rgba(150, 190, 255, .22);
  background: rgba(6, 10, 26, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 30px -14px rgba(0, 0, 0, .9);
}

html[data-theme="2050"] .device__label-hint {
  font-family: var(--font-mono);
  font-size: calc(var(--label-fs) * .74);
  letter-spacing: .04em;
}

html[data-theme="2050"] .device--featured .device__label-main {
  border-color: transparent;
  background: var(--accent-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 0 26px -4px rgba(62, 224, 255, .65),
    0 12px 30px -12px rgba(194, 92, 255, .7);
}

html[data-theme="2050"] .device__caption {
  font-family: var(--font-mono);
  letter-spacing: .03em;
  border-color: rgba(62, 224, 255, .3);
  background: rgba(4, 10, 24, .82);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="2050"] .hero[data-state="navigation"] .device:hover .device__label-main {
    border-color: rgba(62, 224, 255, .6);
    background-color: rgba(8, 20, 44, .94);
  }

  html[data-theme="2050"] .hero[data-state="navigation"] .device--featured:hover .device__label-main {
    border-color: transparent;
  }
}

/* «Пропустить» — как кнопка интерфейса */
html[data-theme="2050"] .hero__skip {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-color: rgba(150, 180, 255, .2);
  background: rgba(4, 7, 18, .6);
}


/* ==========================================================================
   9. НОВЫЕ БЛОКИ ГЛАВНОЙ (home.css) — УСИЛЕНИЕ В ТЕМЕ
   ========================================================================== */

html[data-theme="2050"] .home-card,
html[data-theme="2050"] .pkg,
html[data-theme="2050"] .case-card,
html[data-theme="2050"] .aud,
html[data-theme="2050"] .vs__col,
html[data-theme="2050"] .faq__item {
  border-color: rgba(150, 180, 255, .1);
  background: var(--glass), var(--glass-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -40px rgba(0, 0, 0, .9);
}

html[data-theme="2050"] .pkg--featured {
  background:
    linear-gradient(180deg, rgba(123, 92, 255, .16), rgba(62, 224, 255, 0) 45%) padding-box,
    linear-gradient(#0a0f22, #0a0f22) padding-box,
    var(--edge) border-box;
  box-shadow: 0 40px 90px -40px rgba(123, 92, 255, .75), 0 0 46px -22px rgba(62, 224, 255, .55);
}

html[data-theme="2050"] .pkg__price,
html[data-theme="2050"] .home-step__num,
html[data-theme="2050"] .home-flow__node {
  font-family: var(--font-mono);
}

html[data-theme="2050"] .home-step__num {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(62, 224, 255, .6);
  background: #050816;
  box-shadow: 0 0 22px -6px rgba(62, 224, 255, .6), inset 0 0 14px -6px rgba(62, 224, 255, .5);
}

html[data-theme="2050"] .home-card__num,
html[data-theme="2050"] .pkg__tag,
html[data-theme="2050"] .case-card__type {
  font-family: var(--font-mono);
}

html[data-theme="2050"] .vs__col--new {
  background:
    linear-gradient(180deg, rgba(62, 224, 255, .09), rgba(62, 224, 255, 0) 55%) padding-box,
    linear-gradient(#0a0f22, #0a0f22) padding-box,
    var(--edge) border-box;
  border-color: transparent;
  box-shadow: 0 0 46px -24px rgba(62, 224, 255, .6);
}

html[data-theme="2050"] .faq__item[open] {
  border-color: rgba(62, 224, 255, .35);
  background:
    linear-gradient(180deg, rgba(62, 224, 255, .06), rgba(62, 224, 255, 0) 60%),
    var(--glass-bg);
}


/* ==========================================================================
   10. REDUCED MOTION И ПЕЧАТЬ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html[data-theme="2050"] body::before,
  html[data-theme="2050"] .eyebrow::before,
  html[data-theme="2050"] .section--divider::after,
  html[data-theme="2050"] .hero__floor::before,
  html[data-theme="2050"] .hero__hub::before,
  html[data-theme="2050"] .hero__hub::after,
  html[data-theme="2050"] .device__hud-dot {
    animation: none !important;
  }

  html[data-theme="2050"] .section--divider::after,
  html[data-theme="2050"] .hero__scan {
    display: none;
  }
}

/* Режим «уменьшить движение» на главной (Hero.js ставит data-motion) */
html[data-theme="2050"] .hero[data-motion="reduced"] .hero__floor::before,
html[data-theme="2050"] .hero[data-motion="reduced"] .hero__hub::before,
html[data-theme="2050"] .hero[data-motion="reduced"] .hero__hub::after {
  animation: none;
}

html[data-theme="2050"] .hero[data-motion="reduced"] .hero__scan {
  display: none;
}

/* Упрощённый режим (слабые устройства): без движущегося «пола» и колец */
html[data-theme="2050"] .hero[data-lite="true"] .hero__floor::before,
html[data-theme="2050"] .hero[data-lite="true"] .hero__hub::before,
html[data-theme="2050"] .hero[data-lite="true"] .hero__hub::after {
  animation: none;
}

/* Главный экран вне поля зрения — всё на паузе */
html[data-theme="2050"] .hero.is-paused .hero__floor::before,
html[data-theme="2050"] .hero.is-paused .hero__hub::before,
html[data-theme="2050"] .hero.is-paused .hero__hub::after,
html[data-theme="2050"] .hero.is-paused .device__hud-dot {
  animation-play-state: paused;
}

@media print {
  html[data-theme="2050"]::before,
  html[data-theme="2050"]::after,
  html[data-theme="2050"] body::before {
    display: none;
  }

  /* На бумаге — белый фон и обычный чёрный текст заголовков
     (градиентная заливка текста без фона не печатается) */
  html[data-theme="2050"] body {
    background: #fff;
  }

  html[data-theme="2050"] h1,
  html[data-theme="2050"] h2,
  html[data-theme="2050"] .cta__title,
  html[data-theme="2050"] .gradient-text,
  html[data-theme="2050"] .hero__title,
  html[data-theme="2050"] .hero__title-accent {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: #000;
  }
}