/* — секция глобуса ASR —
   Токены продублированы локально: на сайте :root объявлен и в index.html, и в
   sector.css, а --serif не объявлена в sector.css вовсе. Блок должен выглядеть
   одинаково на обеих страницах, поэтому не полагается на чужие переменные. */
.globe-sec {
  --g-bg: #0f1114;
  --g-ink: #f4f1ea;
  --g-ink-60: rgba(244, 241, 234, .6);
  --g-ink-40: rgba(244, 241, 234, .42);
  --g-gold: #d5a35e;
  --g-gold-soft: rgba(213, 163, 94, .55);
  --g-line: rgba(244, 241, 234, .12);
  --g-edge: clamp(20px, 5vw, 84px);
  position: relative;
  padding: clamp(80px, 10vw, 130px) 0 clamp(70px, 9vw, 110px);
  border-top: 1px solid var(--g-line);
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 300;
  /* свечение под шаром — радиальный градиент, как в .one-band: в тёмной теме
     сайта нет ни одного box-shadow, и заводить его тут нельзя */
  background-image: radial-gradient(58% 62% at 50% 54%, rgba(213, 163, 94, .085), transparent 66%);
}

.globe-wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--g-edge); }

/* заголовок секции золотом — по правке заказчика */
.globe-sec .section-label h2 { color: var(--g-gold); }

.globe-kicker { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; }
.globe-kicker .num { font-size: 12px; letter-spacing: .3em; color: var(--g-gold); font-weight: 400; }
.globe-kicker .rule { width: 56px; height: 1px; background: var(--g-gold-soft); }
.globe-kicker .label { font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--g-ink-60); font-weight: 400; }

.globe-lede { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 62ch;
  color: var(--g-ink-60); font-size: 16.5px; line-height: 1.85; }

.globe-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; }
.globe-head h2 { margin: 0; font-weight: 200; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 40px); letter-spacing: .06em; }
.globe-head h2 em { font-style: normal; color: var(--g-gold); }
.globe-head p { margin: 0; max-width: 46ch; color: var(--g-ink-60);
  font-size: 15.5px; line-height: 1.75; }

/* — сцена — */
.globe-stage { position: relative; margin-top: clamp(28px, 3.4vw, 46px);
  height: clamp(520px, 76vh, 880px);
  /* шар крутится пальцем, вертикальный свайп остаётся за страницей */
  touch-action: pan-y; cursor: grab;
  /* постер виден сразу и остаётся, если WebGL недоступен: пустая чёрная
     секция читается как «не загрузилось» */
  background: url(data/globe-poster.jpg) center / contain no-repeat; }
.globe-stage.is-live { background-image: none; }
.globe-stage.is-dragging { cursor: grabbing; }
.globe-stage::after { content: ''; position: absolute; left: 50%; bottom: 3%;
  width: 42%; height: 7%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .72), transparent 70%); }
.globe-stage canvas { display: block; width: 100%; height: 100%; }
.globe-labels { position: absolute; inset: 0; pointer-events: none;
  contain: layout style; }

/* подпись страны: точка, волосяной вынос, имя. Посадка снята с референса —
   нижний край точки сидит на базовой линии текста, зазор ≈1.2 диаметра */
.lab { position: absolute; width: 0; height: 0; will-change: opacity; }
.lab .inner { position: absolute; top: 0; left: 0; display: flex; align-items: center;
  gap: 6px; white-space: nowrap; transform: translateY(-50%); }
.lab.to-left .inner { left: auto; right: 0; flex-direction: row-reverse; }
.lab .dot { width: 5px; height: 5px; flex: none; border-radius: 50%;
  background: var(--g-gold); }
.lab .lead { width: 26px; height: 1px; flex: none; background: var(--g-gold-soft);
  transform-origin: left center; }
.lab.to-left .lead { transform-origin: right center; }
.lab .txt { display: flex; flex-direction: column; gap: 2px; }
.lab .nm { font-size: 12px; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--g-ink); line-height: 1;
  text-shadow: 0 1px 12px rgba(6, 7, 9, .85), 0 0 3px rgba(6, 7, 9, .7); }
.lab .iso { font-size: 10px; font-weight: 300; letter-spacing: .3em;
  color: var(--g-ink-40); line-height: 1;
  text-shadow: 0 1px 10px rgba(6, 7, 9, .8); }
.lab.to-left .txt { align-items: flex-end; }

/* пульс под точкой — залитый диск с низкой альфой, механика референса */
.lab .pulse { position: absolute; left: 2.5px; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--g-gold);
  opacity: 0; pointer-events: none; }
.lab.to-left .pulse { left: auto; right: -2.5px; }

/* — список стран: он же интерфейс и он же живой текст для поиска.
   Свёрнут по умолчанию: 26 строк занимали пол-экрана. Раскрытие —
   функциональное движение по действию пользователя, а не въезд контента. — */
.globe-toggle { display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(26px, 3vw, 40px); padding: 13px 0 13px 0;
  border: 0; border-top: 1px solid var(--g-line); width: 100%;
  background: none; color: var(--g-ink-60); cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  transition: color .3s ease; }
.globe-toggle:hover { color: var(--g-gold); }
.globe-toggle:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 3px; }
.globe-toggle i { margin-left: auto; width: 9px; height: 9px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform .35s cubic-bezier(.19,1,.22,1); }
.globe-toggle.is-open i { transform: translateY(2px) rotate(-135deg); }

.globe-list { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(20px, 2.4vw, 40px);
  max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
  transition: max-height .5s cubic-bezier(.19,1,.22,1), opacity .3s ease, visibility .5s; }
.globe-list.is-open { max-height: 1400px; visibility: visible; opacity: 1;
  padding-top: clamp(14px, 1.6vw, 22px); }

/* флаг приглушён так же, как все фото на сайте, и оживает вместе со строкой */
.globe-list .flag { width: 20px; height: 15px; flex: none; object-fit: cover;
  border-radius: 2px; opacity: .72; filter: saturate(.75);
  transition: opacity .3s ease, filter .3s ease; }
.globe-list button:hover .flag,
.globe-list button.on .flag { opacity: 1; filter: saturate(1); }
.globe-list button { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 0; border: 0; border-bottom: 1px solid var(--g-line);
  background: none; color: var(--g-ink-60); cursor: pointer; text-align: left;
  font: inherit; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  transition: color .3s ease; }
.globe-list button .code { margin-left: auto; font-size: 10px; letter-spacing: .24em;
  color: var(--g-ink-40); transition: color .3s ease; }
.globe-list button:hover,
.globe-list button.on { color: var(--g-gold); }
.globe-list button:hover .code,
.globe-list button.on .code { color: var(--g-gold-soft); }
.globe-list button:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 2px; }

/* строка-отсчёт под шаром */
.globe-read { display: flex; align-items: center; gap: 14px; margin-top: 18px;
  min-height: 16px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--g-ink-40); }
.globe-read .cur { color: var(--g-gold); }
.globe-read .bar { flex: 1; height: 1px; background: var(--g-line); }

.globe-fallback { display: grid; place-items: center; height: 100%;
  color: var(--g-ink-40); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }

@media (max-width: 1000px) { .globe-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .globe-list { grid-template-columns: repeat(2, 1fr); }
  .globe-stage { height: clamp(400px, 58vh, 560px); }
  .lab .nm { font-size: 11px; letter-spacing: .14em; }
  .lab .iso { display: none; }
  .lab .lead { width: 18px; }
}
@media (max-width: 480px) { .globe-list { grid-template-columns: 1fr; } }

/* ambient/active: в кадре живёт несколько имён, но фокус всегда один —
   иначе подписи читаются как каша */
.lab .nm, .lab .iso, .lab .dot, .lab .lead { transition: color .32s ease, background-color .32s ease, opacity .32s ease; }
.lab:not(.act) .nm { color: rgba(244, 241, 234, .62); font-weight: 300; }
.lab:not(.act) .iso { opacity: 0; }
.lab:not(.act) .dot { background: rgba(213, 163, 94, .5); }
.lab:not(.act) .lead { opacity: .5; }
.lab.act .nm { color: var(--g-ink); }


/* — баннер приложения —
   Отдельная картинка на десктоп и на телефон: у них разная композиция,
   кроп одной под другую ломает раскладку. */
.app-band { padding: clamp(40px, 5vw, 70px) 0 clamp(26px, 3vw, 42px); background: #0f1114; }
.app-band + .contact-section { padding-top: clamp(56px, 6vw, 84px); }
.app-band .wrap { max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 84px); }
.app-band .app-lede { margin: 0 0 clamp(26px, 3vw, 40px); max-width: 78ch;
  color: rgba(244, 241, 234, .6); font-family: "Outfit", system-ui, sans-serif;
  font-weight: 300; font-size: 16.5px; line-height: 1.85; }
@media (max-width: 760px) { .app-band .app-lede { font-size: 15px; line-height: 1.75; } }
.app-band picture { display: block; }
.app-band img { display: block; width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 760px) { .app-band img { border-radius: 14px; } }
/* золотой берём числом: --g-gold объявлена на .globe-sec, а сюда не достаёт */
.app-band .section-label h2 { color: #d5a35e; }
.app-band .app-lede .ac { color: #d5a35e; }
.app-band .app-note { margin: 14px 0 0; font-family: "Outfit", system-ui, sans-serif;
  font-size: 11px; font-style: italic; font-weight: 300; letter-spacing: .04em;
  color: rgba(244, 241, 234, .30); }