/* ═══ ПЕРВЫЙ ЭКРАН, ВАРИАНТ Б: ЗЕМЛЯ ИЗ КОСМОСА ════════════════════════
   Задача варианта — фотографический кадр планеты, а не значок. Объём
   здесь держат четыре вещи, и ни одна из них не работает в одиночку:
     1. настоящая дневная карта, а поверх неё отдельно плывущие облака;
     2. солнце с одной стороны и уход в ночь с другой;
     3. тонкая голубая кайма атмосферы по краю диска и ореол вокруг;
     4. звёздное поле, которое густеет у планеты и тает к тексту.

   Цвет приглушён: чистая «синь-зелень» блю-марбла на чёрном сайте
   выглядит наклейкой. Насыщенность сбита, картинка уведена в холод,
   яркость притушена — планета остаётся настоящей, но становится частью
   тёмной страницы, а не пятном на ней.

   Все классы начинаются с hgB-. Чужие файлы не тронуты: у шара
   переопределены только его собственные настроечные переменные и
   те правила, что живут внутри моего блока.
   ══════════════════════════════════════════════════════════════════════ */

.hgB,
.hgB *,
.hgB *::before,
.hgB *::after {
  /* Размеры считаем вместе с полями: блок не зависит от того, есть ли
     на странице общий сброс. */
  box-sizing: border-box;
}

.hgB {
  /* Выход на всю ширину окна из любой колонки, в которую блок вложен. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);

  position: relative;
  /* Обрезки нет: шар крупнее зоны и верхушкой заходит под шапку. */
  overflow: visible;
  isolation: isolate;

  background: #000;
  color: #ffffff;

  display: flex;
  align-items: center;
  /* Высота ровно такая же, как у нынешнего первого экрана. Не трогать. */
  /* Высота опущена по просьбе владельца 13 сентября 2026, второй раз. */
  min-height: clamp(340px, 32vw, 452px);
  padding-block: clamp(38px, 4vw, 64px);

  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Перенос по слогам запрещён: слово уходит на строку целиком. */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* ── Космос ────────────────────────────────────────────────────────────
   Плоская чернота убивает глубину: глазу не за что зацепиться, и планета
   начинает выглядеть наклеенной. Поэтому за ней стоит очень слабая
   холодная дымка, как рассеянный свет в верхних слоях воздуха, и ещё
   более слабая синева понизу. Ни у одного пятна нет края. */
.hgB-space {
  position: absolute;
  inset: 0 0 -260px 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Главное пятно растянуто влево и приспущено на высоту заголовка: свет
       от планеты идёт полосой в сторону текста, а не копится у правого края
       (просьба Дмитрия 14 сентября 2026). Замер до правки: на левой половине
       кадра яркость фона была ровно нулевая. */
    radial-gradient(86% 52% at 56% 42%, rgba(56, 96, 165, .13), transparent 74%),
    radial-gradient(40% 44% at 88% 16%, rgba(90, 140, 210, .10), transparent 72%),
    /* Третье пятно раньше лежало у нижнего края и уводило свет вниз-влево.
       Развёрнуто горизонтальной полосой на высоту заголовка, чтобы свет
       от планеты шёл параллельно строкам текста (просьба Дмитрия
       14 сентября 2026). Прежний вариант в hero-globe-B-before-glowdir. */
    /* Приглушено вдвое по просьбе Дмитрия 14 сентября 2026: направление
       к заголовку сохранено, сила убрана. */
    radial-gradient(80% 34% at 24% 40%, rgba(62, 104, 172, .17), transparent 80%);
}

/* Верх и низ зоны притушены, чтобы свет и звёзды не обрывались ровной
   линией, а растворялись в чёрной странице над и под баннером. */
.hgB-space::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .88) 0%,
    rgba(0, 0, 0, 0) 18%,
    rgba(0, 0, 0, 0) 78%,
    rgba(0, 0, 0, .55) 92%,
    rgba(0, 0, 0, .95) 100%);
}

/* ── Звёзды ────────────────────────────────────────────────────────────
   Главная опасность здесь — насыпать белых точек ровным слоем: выйдет
   мусор на фоне, а не небо. Поэтому сделано три вещи.

   Первое, калибр. Полей два. Пыль: мелкие тусклые точки, их много, они
   задают саму фактуру неба и по отдельности не читаются. Яркие: их
   единицы на большой площади, они крупнее и с ореолом, глаз цепляется
   именно за них. Так устроено настоящее небо, и так же — снимок.

   Второе, шаг повтора. У полей он разный и взаимно непохожий: 340 на 265
   у пыли, 790 на 590 и 520 на 395 у ярких. Поэтому узор нигде не
   совпадает сам с собой и небо читается случайным, а не обойным.

   Третье, и самое важное для читаемости — в поле продавлена дыра. Маска
   собрана из двух: первая гасит звёзды ровно там, где стоит колонка
   текста, вторая растворяет поле к верхнему и нижнему краю зоны, чтобы
   оно не обрывалось линией. За буквами звёзд нет вовсе, у планеты и по
   углам кадра они в полную силу. Это важнее плотности: небо можно
   насыпать щедро именно потому, что текст из него вырезан.

   Оттенки не чисто белые: часть точек холодная голубоватая, часть чуть
   тёплая. Ровно белое небо выглядит нарисованным.
   ══════════════════════════════════════════════════════════════════════ */
.hgB-stars {
  position: absolute;
  /* Поле уходит на 260 точек ниже зоны, под следующий раздел. Иначе
     звёзды обрывались ровной чертой по нижней границе первого экрана,
     и стык читался линейкой (владелец, 13 сентября 2026). Нижний край
     теперь растворяется уже за пределами зоны, в чёрной странице. */
  /* Поле привязано к планете, а не к окну: иначе на широком экране
     звёзды уезжали к правому краю отдельно от неё. Правый край слоя
     стоит там же, где правый край планеты, ширина берёт полторы тысячи
     точек вокруг, поэтому пятно звёзд всегда приходится на планету.
     Вниз поле уходит на 260 точек под следующий раздел, чтобы небо не
     обрывалось ровной чертой по границе первого экрана. */
  top: -140px;
  bottom: -260px;
  left: auto;
  right: max(0.5%, calc(50% - 700px));
  width: min(1500px, 100vw);
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
}

/* Следующий раздел поднят по слою, чтобы звёзды уходили ПОД его плитки,
   а не ложились поверх них. На главной первый экран лежит внутри общей
   обёртки, поэтому сосед берётся от неё, а не от самого блока. */
.hgB + section,
section:has(> .hgB) + section { position: relative; z-index: 1; }

/* Пыль. Плотная у планеты, к левому краю растворяется совсем. */
.hgB-dust {
  /* Подача 2, выбрана владельцем 13 сентября 2026. Звёзды не ковром по
     всему кадру, а полем вокруг планеты: густо у диска и быстро сходят
     на нет к краям. Слева, где текст, неба нет совсем, поэтому буквы
     стоят на чистой черноте. */
  filter: drop-shadow(0 0 2px rgba(190, 215, 255, .55));
  background-image:
    radial-gradient(1.0px 1.2px at 191px 244px, rgba(255,255,255,0.81), transparent),
    radial-gradient(0.9px 0.9px at 242px 134px, rgba(255,255,255,0.78), transparent),
    radial-gradient(1.0px 1.3px at 278px 283px, rgba(255,255,255,0.74), transparent),
    radial-gradient(1.3px 1.0px at 327px 79px, rgba(255,255,255,0.93), transparent),
    radial-gradient(1.2px 1.3px at 34px 83px, rgba(255,255,255,0.88), transparent),
    radial-gradient(1.3px 1.1px at 17px 139px, rgba(255,255,255,0.74), transparent),
    radial-gradient(1.3px 1.4px at 220px 204px, rgba(255,255,255,0.86), transparent),
    radial-gradient(1.2px 1.5px at 70px 189px, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.0px 1.0px at 225px 156px, rgba(255,255,255,0.71), transparent),
    radial-gradient(1.4px 1.2px at 275px 210px, rgba(255,255,255,0.79), transparent),
    radial-gradient(1.4px 1.3px at 16px 145px, rgba(255,255,255,1.0), transparent),
    radial-gradient(1.3px 1.0px at 169px 279px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.2px 1.3px at 110px 295px, rgba(255,255,255,0.63), transparent),
    radial-gradient(1.0px 1.2px at 329px 249px, rgba(255,255,255,0.54), transparent),
    radial-gradient(1.4px 1.1px at 79px 12px, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.4px 1.4px at 24px 25px, rgba(255,255,255,0.69), transparent),
    radial-gradient(1.3px 1.2px at 144px 260px, rgba(255,255,255,0.62), transparent),
    radial-gradient(0.9px 0.9px at 57px 276px, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.0px 1.1px at 314px 136px, rgba(255,255,255,0.58), transparent),
    radial-gradient(0.9px 1.4px at 162px 186px, rgba(255,255,255,0.98), transparent),
    radial-gradient(1.4px 1.1px at 237px 268px, rgba(255,255,255,0.69), transparent),
    radial-gradient(1.4px 1.3px at 54px 261px, rgba(255,255,255,0.64), transparent),
    radial-gradient(1.3px 1.3px at 156px 225px, rgba(255,255,255,0.99), transparent),
    radial-gradient(1.2px 1.2px at 7px 214px, rgba(255,255,255,0.99), transparent),
    radial-gradient(1.1px 1.1px at 303px 70px, rgba(255,255,255,0.53), transparent),
    radial-gradient(1.3px 1.2px at 182px 144px, rgba(255,255,255,0.87), transparent),
    radial-gradient(0.9px 0.9px at 12px 191px, rgba(255,255,255,0.63), transparent),
    radial-gradient(1.2px 1.3px at 165px 92px, rgba(255,255,255,0.68), transparent),
    radial-gradient(1.1px 1.1px at 306px 137px, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.1px 1.4px at 15px 293px, rgba(255,255,255,0.84), transparent),
    radial-gradient(1.0px 1.2px at 336px 139px, rgba(255,255,255,0.62), transparent),
    radial-gradient(1.0px 1.2px at 51px 54px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.3px at 116px 226px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 0.9px at 334px 113px, rgba(255,255,255,0.94), transparent),
    radial-gradient(1.2px 1.0px at 63px 19px, rgba(255,255,255,0.76), transparent),
    radial-gradient(1.0px 1.4px at 296px 95px, rgba(255,255,255,0.93), transparent),
    radial-gradient(1.1px 1.4px at 45px 178px, rgba(255,255,255,0.79), transparent),
    radial-gradient(1.2px 1.2px at 140px 239px, rgba(255,255,255,0.67), transparent),
    radial-gradient(1.2px 1.2px at 211px 20px, rgba(255,255,255,0.96), transparent),
    radial-gradient(1.0px 0.9px at 320px 263px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 115px 18px, rgba(255,255,255,0.87), transparent),
    radial-gradient(1.4px 1.3px at 267px 149px, rgba(255,255,255,0.77), transparent),
    radial-gradient(1.4px 1.4px at 303px 148px, rgba(255,255,255,0.56), transparent),
    radial-gradient(1.0px 0.9px at 264px 103px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.4px 1.2px at 8px 248px, rgba(255,255,255,0.87), transparent),
    radial-gradient(1.0px 1.1px at 12px 270px, rgba(255,255,255,0.77), transparent),
    radial-gradient(0.9px 1.4px at 60px 176px, rgba(255,255,255,0.56), transparent),
    radial-gradient(1.5px 1.2px at 33px 182px, rgba(255,255,255,0.61), transparent),
    radial-gradient(1.0px 1.4px at 63px 89px, rgba(255,255,255,0.62), transparent),
    radial-gradient(1.1px 1.4px at 67px 5px, rgba(255,255,255,0.74), transparent),
    radial-gradient(1.2px 1.1px at 140px 129px, rgba(255,255,255,0.63), transparent),
    radial-gradient(1.2px 1.2px at 244px 167px, rgba(255,255,255,0.89), transparent),
    radial-gradient(0.9px 0.9px at 66px 25px, rgba(255,255,255,0.56), transparent),
    radial-gradient(0.9px 1.5px at 46px 265px, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.1px 1.1px at 181px 199px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1.3px 1.1px at 99px 170px, rgba(255,255,255,0.71), transparent),
    radial-gradient(1.0px 0.9px at 196px 42px, rgba(255,255,255,0.78), transparent),
    radial-gradient(0.9px 1.2px at 334px 279px, rgba(255,255,255,0.69), transparent),
    radial-gradient(1.4px 1.3px at 222px 29px, rgba(255,255,255,0.69), transparent),
    radial-gradient(1.2px 1.3px at 217px 216px, rgba(255,255,255,0.73), transparent),
    radial-gradient(1.0px 1.2px at 304px 38px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.0px 1.0px at 16px 168px, rgba(255,255,255,0.69), transparent),
    radial-gradient(1.4px 1.4px at 136px 64px, rgba(255,255,255,0.73), transparent),
    radial-gradient(1.0px 1.4px at 273px 194px, rgba(255,255,255,0.83), transparent),
    radial-gradient(1.3px 1.2px at 54px 4px, rgba(255,255,255,0.74), transparent),
    radial-gradient(1.0px 1.1px at 271px 49px, rgba(255,255,255,0.78), transparent),
    radial-gradient(1.3px 1.1px at 14px 176px, rgba(255,255,255,0.92), transparent),
    radial-gradient(1.0px 1.4px at 248px 147px, rgba(255,255,255,0.79), transparent),
    radial-gradient(1.4px 0.9px at 290px 263px, rgba(255,255,255,0.76), transparent),
    radial-gradient(1.0px 1.2px at 53px 285px, rgba(255,255,255,0.53), transparent);
  background-size: 340px 300px;
  -webkit-mask-image: radial-gradient(46% 74% at 81% 46%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
          mask-image: radial-gradient(46% 74% at 81% 46%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
}


/* Яркие. Маска у них строже: держатся правой части кадра, на текст
   не заходят вовсе. */
.hgB-bright {
  /* Крупные редкие звёзды тем же полем, но разбросаны шире и светят
     сильнее: они держат глубину, пока пыль держит плотность. */
  filter:
    drop-shadow(0 0 3px rgba(215, 234, 255, .95))
    drop-shadow(0 0 10px rgba(170, 205, 255, .7));
  background-image:
    radial-gradient(2.0px 1.9px at 407px 247px, rgba(255,255,255,0.83), transparent),
    radial-gradient(1.9px 2.2px at 298px 411px, rgba(255,255,255,1.0), transparent),
    radial-gradient(1.9px 2.3px at 370px 143px, rgba(255,255,255,0.96), transparent),
    radial-gradient(2.6px 2.1px at 28px 426px, rgba(255,255,255,0.93), transparent),
    radial-gradient(2.1px 2.1px at 170px 160px, rgba(255,255,255,0.86), transparent),
    radial-gradient(2.7px 2.8px at 383px 46px, rgba(255,255,255,0.97), transparent),
    radial-gradient(2.1px 2.2px at 256px 93px, rgba(255,255,255,0.85), transparent),
    radial-gradient(2.1px 2.7px at 309px 5px, rgba(255,255,255,0.98), transparent),
    radial-gradient(2.4px 2.7px at 201px 213px, rgba(255,255,255,0.88), transparent),
    radial-gradient(2.1px 2.3px at 240px 158px, rgba(255,255,255,0.85), transparent),
    radial-gradient(2.6px 1.9px at 475px 322px, rgba(255,255,255,1.0), transparent),
    radial-gradient(2.3px 2.4px at 353px 76px, rgba(255,255,255,1.0), transparent),
    radial-gradient(2.0px 2.2px at 209px 327px, rgba(255,255,255,0.93), transparent),
    radial-gradient(2.1px 2.2px at 330px 326px, rgba(255,255,255,0.91), transparent),
    radial-gradient(2.7px 1.9px at 65px 364px, rgba(255,255,255,0.85), transparent),
    radial-gradient(2.6px 2.4px at 245px 64px, rgba(255,255,255,0.87), transparent);
  background-size: 520px 430px;
  -webkit-mask-image: radial-gradient(50% 78% at 81% 46%, #000 0%, rgba(0,0,0,.5) 50%, transparent 80%);
          mask-image: radial-gradient(50% 78% at 81% 46%, #000 0%, rgba(0,0,0,.5) 50%, transparent 80%);
}


/* Два поля дышат вразнобой и с разной силой, поэтому совместного
   «моргания неба» не получается. */
@keyframes hgBTwinkleA {
  0%, 100% { opacity: .84; }
  50%      { opacity: 1; }
}
@keyframes hgBTwinkleB {
  0%, 100% { opacity: 1; }
  50%      { opacity: .76; }
}

/* ── Планета: место в кадре ────────────────────────────────────────────
   Шар крупнее зоны и центром поднят выше её середины: лишнее уходит
   вверх, под шапку сайта, а снизу диск не доходит до края зоны и не
   лезет на следующий раздел. Кадр от этого перестаёт быть «картинкой
   в рамке»: планета явно больше того окна, в которое мы на неё смотрим. */
.hgB-globe {
  position: absolute;
  top: 50%;
  /* Планета крупнее зоны и нарочно выходит за её края: вверх под шапку и
     вниз под следующий раздел (владелец, 13 сентября 2026). Высота самой
     зоны при этом не меняется. За правый край окна не выпускаем: там она
     тянет за собой боковую прокрутку всей страницы. */
  /* Планета привязана к колонке содержимого, а не к правому краю окна.
     Иначе на широком экране она уезжала к самому краю и отрывалась от
     текста: на двух тысячах точек между заголовком и планетой зияло
     триста пятьдесят точек пустоты (замерено 13 сентября 2026). Теперь
     её правый край стоит на восемьдесят точек правее общей сетки сайта,
     а на узких экранах работает прежний отступ от края. */
  right: max(0.5%, calc(50% - 700px));
  /* Опущена ниже по просьбе владельца 13 сентября 2026: больше уходит за
     нижний край, меньше лезет под шапку. */
  transform: translateY(-54%);
  z-index: 1;
  pointer-events: none;
}

/* Настройки шара объявлены в globe.css прямо на .globe-visual, поэтому
   перебиваю их таким же адресом, но длиннее на свой блок. Чужой файл
   при этом не меняется. */
.hgB .globe-visual {
  --globe-map: url("earth-daymap.webp"); /* настоящая дневная карта, а не ночная */
  --globe-glow: #cfe2ff;                /* холодный свет: он же идёт в платежи */
  --globe-turn: 120s;                   /* оборот медленный: съёмка, а не карусель */
  --globe-size: 41vw;
  --globe-max: 560px;
  --globe-opacity: 1;                   /* карта в полную силу, гасит её потом свет */
}

/* Своё свечение у шара выключено: вокруг планеты работает атмосфера
   (.hgB-atmo), два ореола друг на друге дали бы грязный ободок. */
.hgB .globe-visual::before { box-shadow: none; }
.hgB .globe-container      { box-shadow: none; }

/* ── Дневная карта ─────────────────────────────────────────────────────
   Цвет приглушён намеренно. Исходник яркий, бирюзово-салатовый, на
   чёрной странице он выглядит переводной картинкой. Насыщенность сбита
   почти вдвое, картинка уведена в холод и притушена по яркости: планета
   остаётся узнаваемо настоящей, но садится в тёмную гамму сайта.
   Контраст, наоборот, поднят — иначе приглушённая карта становится
   мутной и материки теряют очертания. */
.hgB .globe-map {
  filter: saturate(.52) hue-rotate(-8deg) brightness(.86) contrast(1.14);
}

/* Сфера. Подложка под картой почти чёрная с холодным отливом: карта
   кроет её целиком, но по самому краю диска, где съезжает проекция,
   подложка видна и не даёт появиться светлой щели. */
.hgB .globe-sphere {
  background: radial-gradient(circle at 62% 30%, #0d1b2c 0%, #060d17 60%, #02050a 100%);
  box-shadow: none;
}

/* ── Облака ────────────────────────────────────────────────────────────
   Отдельный слой поверх карты, и именно он делает планету живой.
   Работает на трёх мелочах. Первая: режим «осветление» — у исходника
   облака белые по чёрному, при таком наложении чёрное исчезает само,
   вырезать ничего не нужно. Вторая: облака едут чуть быстрее земли
   (96 секунд против 120), поэтому слои расходятся и планета получает
   толщину — это видно даже когда не следишь специально. Третья:
   лёгкое размытие, иначе облака выглядят наклейкой поверх карты. */
.hgB-clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: url("earth-clouds.webp");
  background-size: 50% 100%;
  background-repeat: repeat-x;
  background-position: 35% 0;
  mix-blend-mode: screen;
  opacity: .40;
  filter: contrast(1.2) brightness(.92) blur(.4px);
  animation: globeTurn 96s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── Свет и терминатор ─────────────────────────────────────────────────
   Солнце стоит справа сверху. Выбор не случайный: тогда ночная сторона
   приходится на левый нижний бок диска — как раз туда, где планета
   соседствует с текстом. Диск сам собой растворяется в черноте у
   колонки заголовка, и затемнению почти нечего делать.

   Слой лежит ВНЕ наклонённой сферы. Внутри неё всё повёрнуто на 23,5
   градуса вместе с осью, и солнце заваливалось бы вместе с картой.
   Здесь же оно стоит там, где нужно на экране.

   Три гаснущих слоя подряд, каждый со своей работой:
     блик   — тёплое пятно там, куда светит солнце;
     ночь   — чем дальше от солнца, тем темнее, до почти чёрного;
     край   — потемнение по самому ободу, без него круг остаётся плоским. */
.hgB-light {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle closest-side at 70% 20%,
      rgba(255, 251, 240, .17) 0%,
      rgba(255, 244, 225, .06) 28%,
      transparent 56%),
    radial-gradient(circle closest-side at 60% 26%,
      transparent 40%,
      rgba(3, 8, 18, .20) 64%,
      rgba(1, 5, 12, .58) 86%,
      rgba(0, 2, 7, .86) 106%),
    radial-gradient(circle closest-side at 50% 50%,
      transparent 74%,
      rgba(0, 3, 10, .38) 93%,
      rgba(0, 2, 7, .70) 100%);
}

/* ── Огни городов на ночной стороне ────────────────────────────────────
   Ночная сторона планеты не должна быть мёртвой дырой: на настоящем
   снимке там светятся города. Ночная карта едет тем же ходом и с тем же
   временем оборота, что и дневная, поэтому огни садятся ровно на свои
   материки, а не плывут отдельно.

   Обёртка НЕ наклонена: по ней вырезается ночной серп, и вырезается он
   в экранных координатах, от того же солнца, что и тень. Наклон на
   23,5 градуса живёт внутри, на .hgB-nightrot, вместе с самой картой.

   Слой стоит ПОСЛЕ тени (z-index выше): огни добавляются к уже
   погашенной стороне. Поставить его раньше нельзя — тень их погасит. */
.hgB-nightwrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;   /* огни складываются со снимком, а не закрывают его */
  opacity: .72;
  /* Маска: у солнца огней нет вовсе, к дальнему от него краю проступают
     в полную силу. Это и есть переход дня в ночь. */
  -webkit-mask-image: radial-gradient(circle closest-side at 68% 22%,
    transparent 0 40%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.82) 84%, #000 100%);
  mask-image: radial-gradient(circle closest-side at 68% 22%,
    transparent 0 40%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.82) 84%, #000 100%);
}

.hgB-nightrot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(23.5deg);  /* тот же наклон оси, что у сферы */
}

.hgB-night {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: url("earth-nightmap.webp");
  background-size: 50% 100%;
  background-repeat: repeat-x;
  background-position: 35% 0;
  /* Огни подняты по яркости и слегка уведены в тёплое: живой город
     светит жёлтым, а не белым. */
  filter: brightness(1.5) contrast(1.3) saturate(1.2) sepia(.18);
  animation: globeTurn 120s linear infinite;  /* ровно как дневная карта */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── Атмосфера изнутри диска ───────────────────────────────────────────
   Тонкая голубая полоска по самому краю. На снимках из космоса это
   первое, что выдаёт живую планету: у безвоздушного шара край режется
   ножом, у Земли он светится. Полоска идёт по всему ободу ровно, а
   вторым слоем поверх неё добавлена та же кайма, но открытая только со
   стороны солнца — там воздух подсвечен и заметно ярче. */
.hgB-limb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle closest-side at 50% 50%,
    transparent 0 89%,
    rgba(96, 156, 236, .08) 94%,
    rgba(140, 194, 255, .18) 98%,
    rgba(176, 216, 255, .28) 100%);
  /* Ровная кайма по всему кругу читалась бы как обводка значка. Поэтому
     даже базовый слой притушен со стороны ночи: там воздуху нечего
     подсвечивать. */
  -webkit-mask-image: radial-gradient(circle closest-side at 66% 24%,
    #000 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.34) 92%, rgba(0,0,0,.22) 110%);
  mask-image: radial-gradient(circle closest-side at 66% 24%,
    #000 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.34) 92%, rgba(0,0,0,.22) 110%);
}

/* Солнечная сторона каймы. Та же кайма, но яркая, и открыта маской
   только там, куда падает свет. */
.hgB-limb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side at 50% 50%,
    transparent 0 85%,
    rgba(150, 200, 255, .18) 92%,
    rgba(196, 226, 255, .52) 98%,
    rgba(224, 240, 255, .78) 100%);
  -webkit-mask-image: radial-gradient(circle closest-side at 68% 20%,
    #000 0%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.12) 94%, transparent 110%);
  mask-image: radial-gradient(circle closest-side at 68% 20%,
    #000 0%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.12) 94%, transparent 110%);
}

/* ── Атмосфера снаружи диска ───────────────────────────────────────────
   Лежит ПОД планетой, поэтому изнутри её не видно, а снаружи остаётся
   ровно то, что и должно: волосяная кайма по краю и воздух вокруг.
   Свечение смещено вправо вверх, к солнцу: ровный ореол по кругу читался
   бы как подсветка значка, а смещённый — как освещённый воздух.
   Последний, самый широкий слой почти незаметен поштучно, но именно он
   не даёт планете выглядеть вырезанной из бумаги и наклеенной. */
.hgB-atmo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  /* Еле заметное свечение по окружности (владелец, 13 сентября 2026).
     Именно еле: широкий ореол он до этого забраковал, поэтому здесь
     волосяная кайма у самой кромки и очень слабый отсвет за ней. Кайма
     нужна не для красоты, а чтобы край планеты не сливался с чёрным. */
  /* Отсвет уведён влево, в сторону заголовка (владелец, 13 сентября 2026):
     раньше он уходил вправо, к пустому краю, и его никто не видел. */
  /* Левая половина отсвета приглушена вдвое (просьба Дмитрия 14 сентября
     2026): волосяная кайма у самой кромки осталась прежней, слабее стал
     только разлив влево. Прежние величины в hero-globe-B-before-rimdim. */
  box-shadow:
    0 0 0 1px rgba(155, 200, 255, .07),
    0 0 9px 0 rgba(120, 175, 235, .07),
    -12px 0 34px 2px rgba(96, 150, 225, .05),
    -26px 0 60px 6px rgba(58, 106, 180, .035);
}

/* Планета лежит поверх ореола. */
.hgB .globe-visual {
  position: relative;
  z-index: 1;
}

/* ── Летящие платежи ───────────────────────────────────────────────────
   Суммы набраны шрифтом макета и посажены на мягкую тёмную подложку:
   без неё цифры тонут в облаках и огнях. Цвет холодный белый, тот же,
   что у атмосферы, чтобы платежи читались частью этого же кадра. */
.hgB .globe-tx-amount {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .7);
}

/* ── Затемнение ────────────────────────────────────────────────────────
   Лежит поверх планеты и под текстом, и здесь оно устроено не как обычная
   шторка слева направо. Глухая чернота у левого края убила бы всё небо:
   звёзды-то как раз там, вокруг колонки текста. Поэтому слева затемнение
   лёгкое, набирает силу к середине кадра, где надо растворить левый бок
   планеты, и сходит на нет к правому краю, где диск должен светить в
   полную силу. За читаемость букв отвечает не оно, а дыра в звёздном
   поле: звёзд за текстом просто нет. */
.hgB-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Затемнение слева ослаблено (просьба Дмитрия 14 сентября 2026): при
     прежних величинах свет от планеты на левой половине кадра гасился
     полностью, замер показывал ровный ноль, и развернуть его в сторону
     заголовка было нечем. Середина по-прежнему держит силу, чтобы левый
     бок планеты растворялся. */
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .20) 0%,
    rgba(0, 0, 0, .34) 28%,
    rgba(0, 0, 0, .50) 46%,
    rgba(0, 0, 0, .30) 58%,
    rgba(0, 0, 0, 0) 72%);
}

/* ── Текст ─────────────────────────────────────────────────────────────
   Колонка стоит по левому краю общей сетки сайта: ширина 1240 с полями
   по 20, как у остальных секций. Зона во всю ширину, а текст в строю. */
.hgB-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* Текст занимает половину ширины и под планету не заходит. */
.hgB-text {
  max-width: min(52%, 620px);
}

.hgB-title {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: .94;
  letter-spacing: -.01em;
  color: #ffffff;
  /* Строки разложены поровну, чтобы у прописных не было висящего хвоста. */
  text-wrap: balance;
  /* Холодный отсвет по контуру букв, того же цвета, что и атмосфера:
     заголовок оказывается освещён тем же светом, что и планета, и не
     выглядит наложенным сверху. */
  text-shadow: 0 0 80px rgba(120, 175, 255, .26);
  hyphens: none;
  -webkit-hyphens: none;
}

.hgB-lead {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: #a8a8a8;
  max-width: 52ch;
  hyphens: none;
  -webkit-hyphens: none;
}

.hgB-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  /* Отступ от текста поднят на 12 точек по просьбе Дмитрия 13 сентября 2026. */
  margin-top: clamp(42px, calc(3vw + 14px), 54px);
}

/* Кнопка первого экрана. Возвращена 26 сентября 2026 взамен подчёркнутой
   ссылки: владелец попросил кнопку, а кнопку из шапки убрать, чтобы
   призыв к действию на странице был один. Оформление то же, что было
   до 18 сентября: белое пятно на чёрном, без цветного свечения. */
.hgB-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .03em;
  padding: 17px 30px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* Без движения под курсором: требование владельца 26 сентября 2026. */
  transition: background .18s ease;
}
.hgB-btn-main {
  background: #ffffff;
  color: #0c0c0e;
  box-shadow: 0 12px 44px rgba(255, 255, 255, .14);
}
/* Тот же отклик, что у белых кнопок на остальных страницах. */
.hgB-btn-main:hover {
  background: #e8e8ea;
}


.hgB-arr {
  display: inline-flex;
}
.hgB-arr svg {
  width: 18px;
  height: 18px;
  display: block;
}


/* ── Узкий настольный экран ────────────────────────────────────────────
   Колонка текста уже, планета меньше: иначе заголовок упирается в диск. */
@media (max-width: 1180px) {
  .hgB-text { max-width: min(54%, 560px); }
  .hgB .globe-visual { --globe-size: 41vw; --globe-max: 450px; }
}

/* ── Планшет и телефон ─────────────────────────────────────────────────
   Один столбец. Планета перестаёт быть соседом текста: она уезжает вниз
   и почти целиком уходит за нижний край, на виду остаётся верхняя дуга.
   Читается как край Земли под ногами, а платежи взлетают с него в пустую
   полосу внизу. Поэтому нижнее поле здесь заметно больше верхнего: дуге
   нужно место, иначе она превращается в грязное пятно. Высота зоны
   становится по содержимому. */
@media (max-width: 1000px) {
  .hgB {
    /* Обрезка здесь нужна: планета нарочно шире окна и уходит за нижний
       край, без обрезки страница начинает ездить вбок. */
    overflow: hidden;
    min-height: 0;
    padding-top: clamp(60px, 8vw, 88px);
    padding-bottom: clamp(132px, 20vw, 186px);
  }
  .hgB-text { max-width: 620px; }
  .hgB-globe {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 0;
    /* Вниз на две трети своей высоты: над краем остаётся только дуга. */
    transform: translate(-50%, 64%);
  }
  .hgB .globe-visual {
    --globe-size: 112vw;
    --globe-max: 780px;
  }
  /* Солнце переезжает вверх: видна только верхняя дуга, и свет должен
     падать на неё, а не на скрытую часть. */
  .hgB-light {
    background:
      radial-gradient(circle closest-side at 62% 14%,
        rgba(255, 251, 240, .18) 0%,
        rgba(255, 244, 225, .06) 26%,
        transparent 54%),
      radial-gradient(circle closest-side at 58% 16%,
        transparent 30%,
        rgba(3, 8, 18, .26) 58%,
        rgba(1, 5, 12, .74) 86%,
        rgba(0, 2, 7, .94) 104%),
      radial-gradient(circle closest-side at 50% 50%,
        transparent 74%,
        rgba(0, 3, 10, .38) 93%,
        rgba(0, 2, 7, .70) 100%);
  }
  /* Кайма атмосферы разворачивается вместе с солнцем: на узком экране
     видна только верхняя дуга, и светиться должна именно она. */
  .hgB-limb,
  .hgB-limb::after {
    -webkit-mask-image: radial-gradient(circle closest-side at 52% 8%,
      #000 0%, rgba(0,0,0,.74) 60%, rgba(0,0,0,.26) 100%);
    mask-image: radial-gradient(circle closest-side at 52% 8%,
      #000 0%, rgba(0,0,0,.74) 60%, rgba(0,0,0,.26) 100%);
  }
  /* Ореол снаружи тоже смещён вверх, к солнцу. */
  .hgB-atmo {
    box-shadow:
      0 0 0 1px rgba(150, 200, 255, .13),
      0 0 12px 1px rgba(96, 156, 235, .18),
      0 -14px 46px 2px rgba(112, 176, 255, .30),
      0 0 110px 16px rgba(34, 74, 145, .22);
  }
  /* Затемнение развёрнуто по вертикали: вверху, где текст, чернота,
     внизу открыто и дуга светит в полную силу. */
  .hgB-scrim {
    background: linear-gradient(180deg,
      #000 0%,
      rgba(0, 0, 0, .92) 34%,
      rgba(0, 0, 0, .36) 62%,
      rgba(0, 0, 0, .38) 76%,
      rgba(0, 0, 0, .74) 90%,
      rgba(0, 0, 0, .94) 97%,
      #000 100%);
  }
  /* Дыра в звёздном поле переезжает вместе с текстом: он теперь наверху
     и во всю ширину, значит и вырез сверху. Небо остаётся в правом
     верхнем углу и вокруг дуги, за буквами его по-прежнему нет. */
  /* На узких экранах планета стоит внизу по центру, поэтому поле звёзд
     снова растягивается во всю ширину. */
  .hgB-stars { left: 0; right: 0; width: auto; top: 0; }

  .hgB-dust,
  .hgB-bright {
    -webkit-mask-image:
      radial-gradient(88% 46% at 42% 26%, transparent 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.70) 76%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 9%, #000 74%, rgba(0,0,0,.45) 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(88% 46% at 42% 26%, transparent 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.70) 76%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 9%, #000 74%, rgba(0,0,0,.45) 90%, transparent 100%);
    mask-composite: intersect;
  }
  .hgB-space {
    background:
      radial-gradient(74% 44% at 50% 102%, rgba(56, 96, 165, .22), transparent 72%),
      radial-gradient(52% 40% at 6% 0%,    rgba(90, 140, 210, .06), transparent 72%);
  }
  .hgB-space::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, .9) 0%,
      rgba(0, 0, 0, 0) 26%,
      rgba(0, 0, 0, 0) 100%);
  }
}

/* ── Телефон ───────────────────────────────────────────────────────────
   Кнопки встают в столбик во всю ширину: попасть пальцем проще, чем
   в две узкие рядом. */
@media (max-width: 560px) {
  .hgB {
    padding-top: 54px;
    /* Полоса внизу шире, чем на планшете: дуга должна начинаться ниже
       кнопок, иначе край планеты лезет им под ноги. */
    padding-bottom: 146px;
  }
  .hgB-lead { margin-top: 18px; }
  .hgB-actions { margin-top: 38px; gap: 10px; }
  .hgB-globe { transform: translate(-50%, 72%); }
  .hgB .globe-visual {
    --globe-size: 145vw;
    --globe-max: 600px;
  }
}

/* Если человек отключил анимацию в системе, кадр замирает: планета и
   облака стоят, звёзды не дышат. Картинка при этом остаётся целиком. */

/* ── Кометы ────────────────────────────────────────────────────────────
   Просьба Дмитрия 14 сентября 2026: очень редко по звёздному полю должна
   пролетать комета, чтобы глаз изредка её отлавливал. Шара это не
   касается, кометы живут в слое звёзд.

   Как сделано. Слой повторяет рамку звёздного поля и обрезает всё лишнее,
   иначе комета вылезала бы за правый край окна и тянула боковую прокрутку.
   Сама комета это светлая точка с ореолом, хвост нарисован полоской,
   развёрнутой по ходу движения. Видна она примерно секунду с небольшим,
   остальное время круга её нет вовсе. Круги у трёх комет разной длины
   (73, 107 и 151 секунда) и взаимно непохожие, поэтому повтор не читается:
   в среднем что-то пролетает раз в тридцать пять секунд. */
.hgB-comets{
  position:absolute;
  top:-140px;bottom:-260px;
  left:auto;right:max(0.5%, calc(50% - 700px));
  width:min(1500px,100vw);
  overflow:hidden;pointer-events:none;z-index:0;
}
.hgB-comet{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#ffffff;box-shadow:0 0 7px 1.5px rgba(214,232,255,.9);
  opacity:0;
}
/* Хвост тянется от головы назад, вверх и вправо, то есть туда, откуда
   комета прилетела. Полоска гаснет к концу, резкого обрыва нет. */
.hgB-comet::after{
  content:"";position:absolute;left:0;top:50%;
  width:74px;height:1.3px;transform-origin:0 50%;
  transform:rotate(-35.5deg);
  background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,0));
}
/* Пути выбраны замером по трём ширинам: полоса пустого неба идёт над
   планетой и левее её, а буквы заголовка лежат ниже. Поэтому кометы
   выходят из верхней полосы и падают влево-вниз, успевая погаснуть до
   того, как дойдут до шара или до текста. */
.hgB-comet.c1{top:15%;left:38%;animation:hgB-fall 73s linear infinite}
.hgB-comet.c2{top:14%;left:52%;animation:hgB-fall 107s linear infinite;animation-delay:14s}
.hgB-comet.c3{top:16%;left:64%;animation:hgB-fall 151s linear infinite;animation-delay:31s}

@keyframes hgB-fall{
  0%     {transform:translate(0,0);opacity:0}
  0.2%   {opacity:0}
  0.5%   {opacity:1}
  1.05%  {opacity:.8}
  1.45%  {transform:translate(-84px,60px);opacity:0}
  100%   {transform:translate(-84px,60px);opacity:0}
}

@media (prefers-reduced-motion: reduce) {
  .hgB-clouds,
  .hgB-night,
  .hgB-dust,
  .hgB-bright { animation: none; }
  /* Если человек отключил анимацию в системе, комет нет вовсе. */
  .hgB-comets { display: none; }
}

/* ======================================================================
   ССЫЛКА НА КАРТОЧКЕ ТРАНСГРАНИЧНЫХ ПЕРЕВОДОВ
   (решение владельца 18 сентября 2026)

   Общий файл сайта гасит указатель на всех карточках главной, потому
   что они не ведут никуда. У переводов ссылка включена, поэтому
   указателю возвращаем вид руки. Правило узкое, бьёт только по той
   карточке, у которой есть адрес. Общий файл не тронут.
   ====================================================================== */
.pmos .pcell[href]{cursor:pointer}

/* Правка 25 сентября 2026: тон планеты в первом экране приглушён (просьба
   владельца — синева была слишком яркой). Цвет снят на шестьдесят процентов:
   океан уходит в сталь, но зелень материков ещё читается, до чёрно-белого
   не доходит. Яркость чуть поднята: приглушение цвета затемняет картинку.
   Откат — снять этот блок целиком, ничего другого правка не трогает.
   Соседние степени, если эта не подойдёт: мягче .65 без поправки яркости,
   теплее .45 sepia(.18) hue-rotate(-8deg). */
.hgB-globe{filter:saturate(.4) brightness(1.08)}