/* ==========================================================================
   SLEDEXT · страницы стран · NIGHT CHART v3.0 · сборка 2.7 · 28.10.2026
   Подключается только на страницах стран, после site.css, nightchart.css и sledext-portal.css.
   Корень – body.cx, все классы с префиксом cx-. Шапка, меню, подвал и короткая форма – общие, из site.css.
   Правила v3.0: один вес заголовка (Manrope 800 капсом), ступени – прозрачностью белого, линий нет,
   стекло (.gb, liquid-glass.js режим B) только на фото, одна основная кнопка Electric Aqua на экран.
   ========================================================================== */

.cx {
  --nc-lime: #C5F500;
  --nc-cyan: #4FC4E4;
  --nc-ink: #08090A;
  --nc-700: #252C31;
  --nc-w100: #F5F8F9;
  --nc-w92: rgba(245, 248, 249, .92);
  --nc-w86: rgba(245, 248, 249, .86);
  --nc-w60: rgba(245, 248, 249, .60);
  --nc-w45: rgba(245, 248, 249, .45);
  --nc-w35: rgba(245, 248, 249, .35);
  --nc-w30: rgba(245, 248, 249, .30);
  --nc-w22: rgba(245, 248, 249, .22);
  --nc-w04: rgba(245, 248, 249, .035);
  --nc-giant: rgba(237, 242, 244, .87);
  --nc-aqua: linear-gradient(115deg, #CBFF1A 0%, #2FE0C8 50%, #39B8E8 100%);
  --nc-f-head: "Manrope", system-ui, sans-serif;
  --nc-f-text: "Onest", system-ui, sans-serif;
  --nc-f-mono: "JetBrains Mono", ui-monospace, monospace;
  --cx-tone: #0D161E;
  --cx-gutter: clamp(16px, 4vw, 64px);
  --cx-sec: clamp(64px, 8vw, 112px);
  --cx-ease: cubic-bezier(.2, .7, .2, 1);
  background: var(--nc-ink);
}
/* у стекла должна быть позиция для блика ::before; :where – нулевая специфичность, абсолютные и fixed-элементы её перекрывают */
:where(.cx .gb) { position: relative; }
.cx main { display: block; }

/* ---------- общие ---------- */
.cx-wrap { width: min(100% - 2 * var(--cx-gutter), 1312px); margin-inline: auto; }
.cx-kick { display: block; font: 500 12px/1.25 var(--nc-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nc-cyan); }
.cx-micro { font: 500 11px/1.25 var(--nc-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nc-w60); }
.cx-h2 { margin: 0; font: 800 clamp(32px, 3.6vw, 52px)/.94 var(--nc-f-head); letter-spacing: -.02em; text-transform: uppercase; color: var(--nc-w100); text-wrap: balance; }
.cx-h2--s { font-size: clamp(28px, 3.05vw, 44px); }
.cx-lead { margin: 0; font: 300 clamp(16px, 1.25vw, 18px)/1.45 var(--nc-f-text); color: var(--nc-w86); }
.cx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 64px; margin-bottom: clamp(40px, 5vw, 64px); }
.cx-head__t { flex: 1 1 560px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cx-head > .cx-lead { flex: 0 1 420px; }

.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 500 12px/1 var(--nc-f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--nc-w100); background: none; transition: background-color .25s var(--cx-ease), filter .25s var(--cx-ease); }
.cx-btn svg { width: 14px; height: 14px; flex: none; }
.cx-btn:hover, .cx-btn:focus-visible { color: var(--nc-w100); }
.cx-btn--tone { background: var(--nc-700); }
.cx-btn--tone:hover { background: #2E373D; }
/* 2.7.4: «Сайт маршрута» в карточке маршрута – лаймовый контур, чтобы кнопку замечали; в окне маршрута рядом с заявкой остаётся --tone */
.cx-btn--site { color: var(--nc-lime); background: rgba(197, 245, 0, .08); box-shadow: inset 0 0 0 1px rgba(197, 245, 0, .6), 0 0 18px rgba(197, 245, 0, .12); }
.cx-btn--site:hover, .cx-btn--site:focus-visible { color: var(--nc-ink); background: var(--nc-lime); box-shadow: 0 0 24px rgba(197, 245, 0, .35); }
.cx-btn--glass { height: 52px; padding: 0 26px; font-size: 13px; }
.cx-btn--aqua { height: 56px; padding: 0 30px; font-size: 13px; color: var(--nc-ink); background: var(--nc-aqua);
  box-shadow: 0 0 36px rgba(47, 224, 200, .4), 0 10px 30px rgba(0, 0, 0, .3); }
.cx-btn--aqua:hover, .cx-btn--aqua:focus-visible { color: var(--nc-ink); filter: brightness(1.06); }
.cx-dot { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  font: 500 12px/1 var(--nc-f-mono); letter-spacing: .08em; color: var(--nc-w100); text-decoration: none; }
.cx-dot:hover { color: var(--nc-lime); }
.cx :focus-visible { outline: 2px solid var(--nc-lime); outline-offset: 3px; }

/* список: лаймовая точка, моно капсом, значение справа на W60, без линеек */
.cx-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cx-list li { display: flex; align-items: center; gap: 14px; font: 500 13px/1.3 var(--nc-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nc-w100); }
.cx-list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--nc-lime); flex: none; }
.cx-list li span { margin-left: auto; text-align: right; color: var(--nc-w60); }
.cx-list li span.is-hi { color: var(--nc-w100); }

/* статы: число Manrope 800, подпись моно; ступени прозрачностью, главное число самое светлое */
.cx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cx-stat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cx-stat b { font: 800 clamp(40px, 4.2vw, 60px)/.85 var(--nc-f-head); letter-spacing: -.04em; color: var(--nc-w100); white-space: nowrap; }
.cx-stat span { font: 500 11px/1.3 var(--nc-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nc-w60); }
.cx-s1 b { color: var(--nc-w35); }
.cx-s2 b { color: var(--nc-w45); }
.cx-s3 b { color: var(--nc-w60); }

/* ---------- первый экран ---------- */
.cx-hero { position: relative; min-height: max(640px, 92svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  padding: calc(var(--header-h, 76px) + 32px) 0 clamp(40px, 5vw, 72px); }
.cx-hero__bg, .cx-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-hero__bg { z-index: -2; }
.cx-hero__bg img { object-fit: cover; object-position: 50% 40%; }
.cx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 9, 10, .94) 0%, rgba(8, 9, 10, .72) 28%, rgba(8, 9, 10, .25) 52%, rgba(8, 9, 10, 0) 66%),
              linear-gradient(180deg, rgba(8, 9, 10, .5) 0%, rgba(8, 9, 10, 0) 22%); }
.cx-hero__in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 32px; }
.cx-hero__main { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 22px; container-type: inline-size; }
.cx-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 500 11px/1 var(--nc-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nc-w60); text-decoration: none; }
.cx-back svg { width: 14px; height: 14px; }
.cx-back:hover { color: var(--nc-w100); }
.cx-hero h1 { margin: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 18px); }
.cx-hero__country { font: 800 min(clamp(88px, 10.4vw, 150px), calc((100vw - 2 * var(--cx-gutter)) / (var(--cx-cn, 4) * .74)))/.86 var(--nc-f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--nc-giant); }
/* точнее: от ширины левой колонки первого экрана (контейнерные единицы); браузер без них берёт строку выше */
.cx-hero__country { font-size: min(clamp(88px, 10.4vw, 150px), calc(100cqw / (var(--cx-cn, 4) * .74))); }
.cx-hero__region { font: 800 clamp(36px, 4.45vw, 64px)/.9 var(--nc-f-head); letter-spacing: -.02em; text-transform: uppercase; color: var(--nc-w45); }
.cx-hero__lead { margin: 0; max-width: 560px; font: 300 clamp(17px, 1.46vw, 21px)/1.42 var(--nc-f-text); color: var(--nc-w86); }
.cx-hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cx-mstats { margin: 0; font: 400 14px/1.4 var(--nc-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nc-w100); }
.cx-mstats b { font-weight: 400; color: var(--nc-lime); }
.cx-mstats span { white-space: nowrap; }
/* 2.7.5 · плашка под описанием: «Открыто раннее бронирование на 2027» (Россия), «Открыт лист ожидания на 2027» (Бразилия).
   Открывает короткую форму. Пульсирующая точка лаймом, тонкая лаймовая обводка, при наведении – заливка лаймом */
.cx-badge { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%; padding: 11px 16px 11px 14px; border-radius: 22px;
  font: 500 12px/1.3 var(--nc-f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--nc-w100);
  background: rgba(8, 9, 10, .42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(197, 245, 0, .5), 0 0 22px rgba(197, 245, 0, .1);
  transition: background-color .25s var(--cx-ease), color .25s var(--cx-ease), box-shadow .25s var(--cx-ease); }
.cx-badge i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nc-lime); box-shadow: 0 0 10px rgba(197, 245, 0, .75); }
.cx-badge i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(197, 245, 0, .7); animation: cx-ping 2.4s var(--cx-ease) infinite; }
.cx-badge span { min-width: 0; }
.cx-badge svg { flex: none; width: 14px; height: 14px; color: var(--nc-lime); transition: transform .25s var(--cx-ease); }
.cx-badge:hover, .cx-badge:focus-visible { color: var(--nc-ink); background: var(--nc-lime); box-shadow: 0 0 26px rgba(197, 245, 0, .35); }
.cx-badge:hover i, .cx-badge:focus-visible i { background: var(--nc-ink); box-shadow: none; }
.cx-badge:hover i::after, .cx-badge:focus-visible i::after { border-color: rgba(8, 9, 10, .5); }
.cx-badge:hover svg, .cx-badge:focus-visible svg { color: var(--nc-ink); transform: translateX(3px); }
@keyframes cx-ping { 0% { transform: scale(.5); opacity: 1; } 75%, 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- маршруты · вариант C «Разворот» ---------- */
.cx-routes { scroll-margin-top: 24px; padding: var(--cx-sec) 0 clamp(64px, 7vw, 96px); background: linear-gradient(180deg, var(--cx-tone) 0%, var(--nc-ink) 70%); }
.cx-rows { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 64px); }
.cx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 56px; }
.cx-row:nth-child(even) { flex-direction: row-reverse; }
.cx-ph { flex: 1 1 640px; min-width: 0; position: relative; display: block; height: clamp(380px, 37.5vw, 540px); border-radius: 24px; overflow: hidden; color: inherit; text-decoration: none; isolation: isolate; }
.cx-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--cx-ease); }
.cx-ph:hover img { transform: scale(1.03); }
.cx-ph::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(8, 9, 10, .9) 0%, rgba(8, 9, 10, .6) 26%, rgba(8, 9, 10, 0) 54%), linear-gradient(180deg, rgba(8, 9, 10, .4) 0%, rgba(8, 9, 10, 0) 22%); }
.cx-ph__idx { position: absolute; top: 24px; left: 28px; font: 500 12px/1 var(--nc-f-mono); letter-spacing: .14em; color: rgba(245, 248, 249, .75); }
.cx-ph__name { position: absolute; left: 28px; right: 28px; bottom: 26px; margin: 0; font: 800 clamp(46px, 5.3vw, 76px)/.9 var(--nc-f-head); letter-spacing: -.03em; text-transform: uppercase; color: var(--nc-giant); }
.cx-tx { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.cx-tx__lead { margin: 0; font: 300 clamp(17px, 1.53vw, 22px)/1.4 var(--nc-f-text); color: var(--nc-w86); }
.cx-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- сравнение ---------- */
.cx-cmp-sec { padding: 32px 0 var(--cx-sec); }
.cx-cmp-sec .cx-head { margin-bottom: 40px; }
.cx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cx-scroll::-webkit-scrollbar { display: none; }
.cx-cmp { width: 100%; min-width: var(--cmp-min, 900px); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cx-cmp col.k { width: 220px; }
.cx-cmp th, .cx-cmp td { padding: 16px 20px; text-align: left; vertical-align: middle; font: 300 16px/1.35 var(--nc-f-text); color: var(--nc-w86); }
.cx-cmp thead th { padding-bottom: 20px; font: 800 22px/1 var(--nc-f-head); letter-spacing: -.01em; text-transform: uppercase; color: var(--nc-w100); }
.cx-cmp tbody th { font: 500 11px/1.3 var(--nc-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nc-w60); }
.cx-cmp tbody tr:nth-child(odd) > * { background: var(--nc-w04); }
.cx-cmp tbody tr > :first-child { border-radius: 14px 0 0 14px; }
.cx-cmp tbody tr > :last-child { border-radius: 0 14px 14px 0; }

/* ---------- почему страна: мозаика с метками ---------- */
.cx-why { padding: 0 0 var(--cx-sec); }
.cx-why .cx-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.cx-why__t { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.cx-mosaic { flex: 1 1 640px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cx-tile { position: relative; height: clamp(240px, 26.4vw, 380px); border-radius: 24px; overflow: hidden; margin: 0; isolation: isolate; }
.cx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.cx-lbl { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: rgba(8, 13, 18, .34); }
.cx-lbl b { font: 600 15px/1.2 var(--nc-f-text); color: var(--nc-w100); }
.cx-lbl span { font: 500 10px/1.3 var(--nc-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nc-w86); }
.cx-lbl--top { top: 12px; bottom: auto; }

/* ---------- как это устроено: плашки на фото ---------- */
.cx-how-sec { padding: 0 0 var(--cx-sec); }
.cx-how { position: relative; isolation: isolate; border-radius: 24px; overflow: hidden; min-height: clamp(560px, 45vw, 640px); padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 140px; }
.cx-how > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cx-how::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 9, 10, .7) 0%, rgba(8, 9, 10, 0) 60%), linear-gradient(180deg, rgba(8, 9, 10, .55) 0%, rgba(8, 9, 10, 0) 30%); }
.cx-how__t { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.cx-plaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cx-plaque { border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 12px; background: rgba(8, 13, 18, .26); }
.cx-plaque p { margin: 0; font: 300 17px/1.45 var(--nc-f-text); color: var(--nc-w92); }

/* ---------- цитата основателя: Playfair сам по себе, без линий ---------- */
.cx .quote { padding: 0 0 var(--cx-sec); }
.cx .quote__text { color: var(--nc-w92); }
.cx .quote__by { gap: 6px; }
.cx .quote__by span { font: 300 15px/1.4 var(--nc-f-text); color: var(--nc-w60); }

/* ---------- вопросы ---------- */
.cx-faq { padding: 0 0 var(--cx-sec); }
.cx-faq .cx-wrap { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.cx-faq__t { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.cx-faq__list { flex: 2 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-faq details { border-radius: 18px; background: var(--nc-w04); padding: 0 24px; }
.cx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font: 600 19px/1.3 var(--nc-f-text); color: var(--nc-w100); }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary svg { width: 20px; height: 20px; flex: none; transition: transform .2s var(--cx-ease); }
.cx-faq details[open] summary svg { transform: rotate(45deg); }
.cx-faq details p { margin: 0 0 22px; max-width: 760px; font: 300 17px/1.5 var(--nc-f-text); color: var(--nc-w86); }

/* ---------- заявка: плашка на фото, одна основная кнопка ---------- */
.cx-cta-sec { padding: 0 0 var(--cx-sec); }
.cx-cta { position: relative; isolation: isolate; border-radius: 24px; overflow: hidden; min-height: 560px; display: flex; align-items: center; padding: clamp(12px, 4vw, 56px); }
.cx-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: -2; }
.cx-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 9, 10, .28); }
.cx-cta__p { max-width: 640px; border-radius: 28px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; background: rgba(8, 13, 18, .26); }
.cx-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.cx-steps li { display: flex; gap: 16px; align-items: baseline; font: 300 17px/1.4 var(--nc-f-text); color: var(--nc-w92); }
.cx-steps li b { font: 500 13px/1 var(--nc-f-mono); color: var(--nc-lime); }
.cx-cta__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }

/* ---------- другие страны ---------- */
.cx-more { padding: 0 0 var(--cx-sec); }
.cx-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.cx-country { position: relative; isolation: isolate; display: block; height: 420px; border-radius: 24px; overflow: hidden; color: var(--nc-w100); text-decoration: none; }
.cx-country img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--cx-ease); }
.cx-country:hover img { transform: scale(1.03); }
.cx-country::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 9, 10, .85) 0%, rgba(8, 9, 10, 0) 55%); }
.cx-country__t { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.cx-country__t b { font: 800 34px/1 var(--nc-f-head); letter-spacing: -.02em; text-transform: uppercase; color: var(--nc-giant); }
.cx-country:hover .cx-country__t b { color: var(--nc-w100); }

/* подвал без линий */
.cx .footer { border-top: 0; }
.cx .footer__bottom { border-top: 0; padding-top: 0; }

/* ---------- нижняя панель заявки на телефоне ---------- */
.cx-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; height: 64px; border-radius: 999px; padding: 8px;
  display: none; align-items: center; gap: 8px; transform: translateY(150%); transition: transform .4s var(--cx-ease); }
.cx-dock.is-on { transform: none; }
.cx-dock .cx-btn--aqua { flex: 1 1 auto; height: 48px; padding: 0 16px; font-size: 12px; letter-spacing: .12em; box-shadow: 0 0 22px rgba(47, 224, 200, .3); }
.cx-dock .cx-dot { width: 48px; height: 48px; background: rgba(37, 44, 49, .78); }

/* ==========================================================================
   ОКНО МАРШРУТА: десктоп – окно поверх страницы, телефон – шторка снизу
   ========================================================================== */
/* без backdrop-filter и transform на самом окне: иначе fixed-панель на телефоне поедет вместе с прокруткой */
.cx-modal { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .3s var(--cx-ease); }
.cx-modal[hidden] { display: none; }
.cx-modal.is-open { opacity: 1; }
.cx-modal__veil { position: fixed; inset: 0; background: rgba(8, 9, 10, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cx-dlg { position: relative; z-index: 1; max-width: 1120px; margin: 48px auto 72px; border-radius: 28px; overflow: hidden; overflow: clip;
  background: linear-gradient(180deg, var(--cx-tone) 0%, var(--nc-ink) 72%); box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  transform: translateY(16px); transition: transform .35s var(--cx-ease); }
.cx-modal.is-open .cx-dlg { transform: none; }
.cx-dlg[hidden] { display: none; }
.cx-dlg__hero { position: relative; height: clamp(330px, 32vw, 460px); isolation: isolate; }
.cx-dlg__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cx-dlg__hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--cx-tone) 0%, color-mix(in srgb, var(--cx-tone) 60%, transparent) 30%, rgba(8, 9, 10, 0) 60%), linear-gradient(180deg, rgba(8, 9, 10, .45) 0%, rgba(8, 9, 10, 0) 25%); }
.cx-dlg__grab { display: none; }
.cx-dlg__nav { position: absolute; top: 20px; left: 20px; height: 48px; border-radius: 999px; padding: 0 5px; display: inline-flex; align-items: center; gap: 2px; }
.cx-dlg__nav button, .cx-dlg__close { border: 0; background: transparent; color: var(--nc-w100); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cx-dlg__nav button { width: 38px; height: 38px; border-radius: 50%; }
.cx-dlg__nav button:hover { color: var(--nc-lime); }
.cx-dlg__nav svg, .cx-dlg__close svg { width: 16px; height: 16px; }
.cx-dlg__nav span { font: 500 12px/1 var(--nc-f-mono); letter-spacing: .14em; color: var(--nc-w100); min-width: 64px; text-align: center; }
.cx-dlg__close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; }
.cx-dlg__close:hover { color: var(--nc-lime); }
.cx-dlg__head { position: absolute; left: 48px; right: 48px; bottom: 36px; display: flex; flex-direction: column; gap: 16px; }
.cx-dlg__name { margin: 0; font: 800 clamp(50px, 6.7vw, 96px)/.86 var(--nc-f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--nc-giant); }
.cx-dlg__body { padding: 32px 48px 56px; display: flex; flex-direction: column; gap: 64px; }
.cx-dlg__lead { margin: 0; max-width: 720px; font: 300 clamp(17px, 1.4vw, 20px)/1.42 var(--nc-f-text); color: var(--nc-w86); }
.cx-pass { display: flex; flex-direction: column; gap: 40px; margin-top: -24px; }
.cx-pass .cx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cx-pass .cx-stat b { font-size: clamp(56px, 5.9vw, 84px); line-height: .82; letter-spacing: -.05em; }
.cx-pass__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 72px; }
.cx-see { display: flex; flex-direction: column; gap: 24px; }
.cx-see__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.cx-see .cx-tile { height: 300px; border-radius: 22px; }
.cx-see .cx-lbl b { font-size: 14px; }
.cx-stay { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px 72px; }
.cx-stay__col { display: flex; flex-direction: column; gap: 20px; }
.cx-stay h3 { margin: 0; font: 600 22px/1.2 var(--nc-f-text); color: var(--nc-w100); }
.cx-stay__item { display: flex; flex-direction: column; gap: 8px; }
.cx-stay__item p { margin: 0; font: 300 16px/1.45 var(--nc-f-text); color: var(--nc-w86); }
.cx-inc { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cx-inc li { display: flex; gap: 14px; align-items: baseline; font: 300 16px/1.4 var(--nc-f-text); color: var(--nc-w86); }
.cx-inc li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nc-lime); flex: none; transform: translateY(-1px); }
.cx-inc--no li::before { background: var(--nc-w30); }
.cx-stay .cx-kick + .cx-inc { margin-top: -4px; }
.cx-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding: 40px; border-radius: 24px; background: rgba(245, 248, 249, .03); }
.cx-lock__t { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cx-lock__t .cx-h2 { font-size: clamp(26px, 2.6vw, 36px); }
.cx-lock__days { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-day { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 18px; padding: 12px 18px; border-radius: 14px; background: var(--nc-w04); }
.cx-day i { display: block; height: 11px; border-radius: 999px; background: var(--nc-w22); filter: blur(5px); }
.cx-mdock { display: none; }

/* ---------- телефон ---------- */
@media (max-width: 720px) {
  .cx-head { margin-bottom: 36px; }
  .cx-hero { min-height: max(620px, 100svh); padding-bottom: 36px; }
  .cx-hero__bg img { object-position: 50% 50%; }
  .cx-hero__main { gap: 16px; }
  .cx-hero__side { width: 100%; }
  .cx-hero__side .cx-btn--glass { display: none; }
  .cx-mstats { font-size: 12px; letter-spacing: .05em; }
  .cx-badge { gap: 9px; padding: 10px 14px 10px 13px; font-size: 11px; letter-spacing: .07em; }
  .cx-row, .cx-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: 20px; }
  .cx-ph { flex: none; height: 380px; }
  .cx-ph__idx { top: 16px; left: 18px; font-size: 11px; }
  .cx-ph__name { left: 18px; right: 18px; bottom: 18px; font-size: clamp(40px, 11.8vw, 46px); }
  .cx-tx { flex: none; gap: 20px; }
  .cx-stats { gap: 12px; }
  .cx-stat { gap: 6px; }
  .cx-stat b { font-size: 40px; }
  .cx-stat span { font-size: 10px; letter-spacing: .12em; }
  .cx-list { gap: 12px; }
  .cx-list li { font-size: 11px; letter-spacing: .07em; gap: 12px; }
  .cx-list li::before { width: 8px; height: 8px; }
  .cx-btn { height: 44px; padding: 0 18px; font-size: 11px; }
  .cx-scroll { margin: 0 calc(-1 * var(--cx-gutter)); padding: 0 var(--cx-gutter); }
  .cx-cmp { min-width: var(--cmp-min-m, 714px); }
  .cx-cmp col.k { width: 120px; }
  .cx-cmp th, .cx-cmp td { padding: 13px 12px; font-size: 14px; }
  .cx-cmp thead th { font-size: 18px; }
  .cx-cmp tbody th { font-size: 10px; letter-spacing: .12em; position: sticky; left: 0; z-index: 1; background: #0B1015; }
  .cx-cmp tbody tr:nth-child(odd) > th { background: #121619; }
  .cx-cmp thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--nc-ink); }
  .cx-mosaic { gap: 10px; }
  .cx-tile { height: 240px; border-radius: 20px; }
  .cx-lbl { left: 8px; right: 8px; bottom: 8px; max-width: none; border-radius: 12px; padding: 9px 10px; gap: 3px; }
  .cx-lbl--top { top: 8px; bottom: auto; }
  .cx-lbl b { font-size: 13px; }
  .cx-lbl span { font-size: 9px; }
  .cx-how { padding: 28px 12px 12px; gap: 160px; min-height: 0; }
  .cx-how__t { padding: 0 8px; }
  .cx-plaques { gap: 12px; }
  .cx-plaque { border-radius: 24px; padding: 20px; gap: 8px; }
  .cx-plaque p { font-size: 15px; }
  .cx-faq details { border-radius: 16px; padding: 0 18px; }
  .cx-faq summary { padding: 18px 0; font-size: 16px; gap: 16px; }
  .cx-faq summary svg { width: 18px; height: 18px; }
  .cx-faq details p { margin-bottom: 18px; font-size: 15px; }
  .cx-cta { min-height: 0; padding: 160px 12px 12px; }
  .cx-cta__p { border-radius: 26px; padding: 24px 20px; gap: 16px; }
  .cx-steps li { font-size: 15px; gap: 12px; }
  .cx-steps li b { font-size: 12px; }
  .cx-cta__acts .cx-btn--aqua { width: 100%; height: 52px; }
  .cx-cta__acts .cx-dot { display: none; }
  .cx-more__grid { gap: 12px; }
  .cx-country { height: 200px; border-radius: 22px; }
  .cx-country::after { background: linear-gradient(0deg, rgba(8, 9, 10, .85) 0%, rgba(8, 9, 10, 0) 65%); }
  .cx-country__t { left: 18px; right: 18px; bottom: 16px; gap: 6px; }
  .cx-country__t b { font-size: 26px; }
  .cx-dock { display: flex; }
  .cx .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .cx-modal__veil { background: rgba(8, 9, 10, .6); }
  .cx-dlg { margin: 28px 0 0; min-height: calc(100% - 28px); border-radius: 24px 24px 0 0; transform: translateY(40px); padding-bottom: 96px; }
  .cx-dlg__hero { height: 330px; }
  .cx-dlg__grab { display: block; position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: rgba(245, 248, 249, .5); }
  .cx-dlg__nav { top: 18px; left: 14px; height: 44px; }
  .cx-dlg__nav button { width: 34px; height: 34px; }
  .cx-dlg__nav span { min-width: 56px; }
  .cx-dlg__close { top: 18px; right: 14px; width: 44px; height: 44px; }
  .cx-dlg__head { left: 18px; right: 18px; bottom: 18px; gap: 10px; }
  .cx-dlg__head .cx-kick { font-size: 11px; }
  .cx-dlg__name { font-size: clamp(40px, 12.8vw, 50px); }
  .cx-dlg__body { padding: 20px 16px 24px; gap: 44px; }
  .cx-dlg__lead { font-size: 16px; }
  .cx-pass { margin-top: -16px; gap: 30px; }
  .cx-pass .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .cx-pass .cx-stat b { font-size: 64px; }
  .cx-pass__lists { grid-template-columns: 1fr; gap: 13px; }
  .cx-see { gap: 16px; }
  .cx-see__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cx-see__grid .cx-tile:first-child { grid-column: 1 / -1; height: 260px; }
  .cx-see .cx-tile { height: 210px; border-radius: 18px; }
  .cx-stay { gap: 44px; }
  .cx-stay__col { gap: 16px; }
  .cx-stay h3 { font-size: 20px; }
  .cx-stay__item p, .cx-inc li { font-size: 15px; }
  .cx-lock { padding: 22px 16px; gap: 16px; border-radius: 22px; }
  .cx-lock__t { display: contents; }
  .cx-lock__t .cx-kick { order: 1; }
  .cx-lock__t .cx-h2 { order: 2; font-size: 26px; }
  .cx-lock__days { order: 3; flex: none; width: 100%; }
  .cx-lock__t .cx-lead { order: 4; font-size: 14px; }
  .cx-lock__t .cx-acts { order: 5; }
  .cx-lock .cx-btn--aqua { display: none; }
  .cx-day { grid-template-columns: 70px 1fr; gap: 12px; padding: 11px 14px; }
  .cx-day i { height: 10px; filter: blur(4px); }
  .cx-mdock { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2; height: 64px; border-radius: 999px; padding: 8px; align-items: center; gap: 8px; }
  .cx-mdock .cx-btn--aqua { flex: 1 1 auto; height: 48px; padding: 0 16px; font-size: 12px; letter-spacing: .12em; box-shadow: 0 0 22px rgba(47, 224, 200, .3); }
  .cx-mdock .cx-dot { width: 48px; height: 48px; background: rgba(37, 44, 49, .78); }
}

/* самые узкие телефоны (320 px): крупные цифры не вылезают из колонки */
@media (max-width: 359px) {
  .cx-stat b { font-size: 32px; }
  .cx-pass .cx-stat b { font-size: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-ph img, .cx-country img, .cx-modal, .cx-dlg, .cx-dock { transition: none; }
  .cx-badge i::after { animation: none; opacity: 0; }
}