/* ConvoyMeet — публичный сайт.
   Палитра и шрифты — из утверждённого макета и Mini App: navy, оранжевый
   акцент #ff8a1e/#ff5f1f, Montserrat (заголовки), Roboto (текст), Caveat
   (рукописная подпись в hero). Mobile-first, приоритет 360–390 px. */

:root {
  --bg: #07101f;
  --bg-2: #0b1628;
  --card: #0c1729;
  --card-rgb: 12, 23, 41;
  --text: #eef2f8;
  --sub: #b9c3d4;
  --muted: #8d99ad;
  --orange: #ff8a1e;
  --orange-2: #ff5f1f;
  --orange-text: #ff9a3d;
  --focus: #ffc27a;
  --line: rgba(140, 170, 230, 0.16);
  --pad: 16px;
  --radius: 18px;
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.solid { fill: currentColor; stroke: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--orange); color: #1a0c00; padding: 10px 14px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Шапка ---------- */
.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px var(--pad) 0;
  padding-top: max(12px, env(safe-area-inset-top));
}
.site-header.is-over-hero { position: absolute; top: 0; left: 0; right: 0; }
.page-inner .site-header { background: linear-gradient(180deg, #0a1426 0%, rgba(7, 16, 31, 0) 100%); padding-bottom: 8px; }
.brand { display: block; width: 78px; height: 78px; border-radius: 50%; flex: none;
  filter: drop-shadow(0 0 14px rgba(255, 138, 30, 0.45)); }
.brand img { width: 100%; height: 100%; }
.controls {
  display: flex; align-items: center; gap: 2px;
  margin-top: 8px; padding: 4px;
  background: rgba(6, 12, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.divider { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.18); margin: 0 4px; }
.lang { position: relative; }
.lang-btn, .menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
.lang-btn:hover, .menu-btn:hover { background: rgba(255, 255, 255, 0.06); }
.lang-btn svg:first-child { width: 22px; height: 22px; }
.lang-btn svg:last-child { width: 16px; height: 16px; transition: transform .2s; }
.lang-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.lang-code { font: 600 15px/1 var(--font-body); letter-spacing: .03em; }
.menu-btn .ico-close { display: none; }
.menu-btn[aria-expanded="true"] .ico-open { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: inline-flex; }
.menu-btn svg { width: 26px; height: 26px; }
.menu-label { font: 500 15px/1 var(--font-body); display: none; }

.lang-list, .site-menu {
  position: absolute; right: var(--pad); top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none;
  min-width: 210px;
  background: rgba(10, 19, 35, 0.97);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.lang-list { right: 0; top: calc(100% + 10px); }
.lang-list[hidden], .site-menu[hidden] { display: none; }
.lang-list a, .site-menu a {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 12px; border-radius: 10px;
  text-decoration: none;
}
.lang-list a:hover, .site-menu a:hover { background: rgba(255, 255, 255, 0.06); }
.lang-list .code { font-weight: 700; width: 26px; color: var(--muted); }
.lang-list a[aria-current] { background: rgba(255, 138, 30, 0.14); }
.lang-list a[aria-current] .code { color: var(--orange-text); }
.site-menu { width: min(330px, calc(100vw - 2 * var(--pad))); }
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu a { font: 600 17px/1.3 var(--font-head); }
.site-menu a[aria-current="page"] { color: var(--orange-text); }

/* ---------- Главная: одна общая фотография ----------
   Первый экран и карусель лежат на ОДНОЙ фотографии (.stage-media), без
   второй секции и без стыка; внизу снимок растворяется в тёмно-синем фоне.
   Телефон (<600): фото в натуральных пропорциях, привязано к верху и увеличено
   по ширине (--photo-w), кадр сдвинут к водителю; заголовок — над небом,
   водитель — между заголовком и каруселью, карусель — на тёмной нижней части
   снимка (стол, куртка) и зоне растворения. С 600px — фото на всю сцену
   (object-fit: cover), карусель слева, водитель справа. */
.stage {
  --photo-w: 190vw;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: calc(142vw + 300px);
  padding-bottom: 6px;
  background: var(--bg);
}
.stage-media { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--photo-w) * 0.8), transparent calc(var(--photo-w) * 0.96));
  mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--photo-w) * 0.8), transparent calc(var(--photo-w) * 0.96)); }
.stage-media img {
  position: absolute; top: 0; left: 0;
  width: var(--photo-w); max-width: none; height: auto;
  transform: translateX(-45%);
}
.stage-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 16, 31, 0.82) 0, rgba(7, 16, 31, 0.28) 170px, rgba(7, 16, 31, 0) 300px),
    linear-gradient(180deg, rgba(7, 16, 31, 0) calc(var(--photo-w) * 0.62), rgba(7, 16, 31, 0.55) calc(var(--photo-w) * 0.8), rgba(7, 16, 31, 0.3) 100%),
    linear-gradient(90deg, rgba(7, 16, 31, 0.45) 0%, rgba(7, 16, 31, 0) 60%);
}

.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  align-items: start; gap: 10px;
  padding: calc(104px + env(safe-area-inset-top)) var(--pad) 0;
}
.hero-tagline {
  margin: 0 0 8px;
  font: 600 13px/1.45 var(--font-head); letter-spacing: .26em; text-transform: uppercase;
  color: #e7ecf4; max-width: 17em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hero-title {
  /* Кегль: не больше 10vw и такой, чтобы самое длинное слово (--hw символов,
     ставится при сборке) помещалось в доступную ширину --hero-avail. */
  --hero-avail: 54vw;
  margin: 0; font: italic 900 min(10vw, calc(var(--hero-avail) / (var(--hw, 6) * 0.9)), 104px)/0.95 var(--font-head);
  text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}
.hero-title span { display: block; padding-right: .08em; white-space: normal; }
.hero-title .t1 {
  background: linear-gradient(180deg, #ffffff 0%, #e6e9ee 45%, #a9b0bb 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title .t2 {
  background: linear-gradient(180deg, #ffb24a 0%, #ff7a12 55%, #ff5a10 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brush { width: min(62%, 230px); height: auto; margin-top: 8px; fill: var(--orange); stroke: none; opacity: .95;
  filter: drop-shadow(0 0 8px rgba(255, 120, 20, .45)); }
.hero-note {
  margin: 12px 0 0; justify-self: end; text-align: left;
  transform: rotate(-9deg); transform-origin: 100% 100%; /* вокруг нижнего правого угла: при любом числе строк блок не выходит за правый край */
  /* Кегль по длине самого длинного слова (--nw, ставится при сборке), слово
     целиком в колонке --note-avail; переносов внутри слов нет. */
  --note-avail: 33vw;
  font: 700 min(clamp(21px, 6vw, 44px), calc(var(--note-avail) / (var(--nw, 10) * var(--nw-k, .48))))/1.02 var(--font-hand);
  color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
  max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.hero-note span { display: block; }
.hero-note .accent { color: var(--orange); }
.hero-note .brush { width: 100%; margin-top: 2px; }

/* Кнопка Telegram: одна, компактная, по ширине текста. */
.hero-cta { grid-column: 1 / -1; margin-top: 14px; }
.tg-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 10px 20px 10px 16px; max-width: 100%;
  border-radius: 999px; background: var(--orange); color: #111a2c;
  font: 700 15.5px/1.2 var(--font-head); text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background .15s, transform .15s;
}
.tg-btn svg { width: 22px; height: 22px; flex: none; }
.tg-btn:hover { background: #ff9d3f; transform: translateY(-1px); }
.tg-btn:active { transform: scale(0.98); }
.tg-btn:focus-visible { outline-color: #fff; }

/* ---------- Прозрачная карусель ----------
   Одна неподвижная рамка — только тонкая оранжевая линия, никакой заливки,
   подложки или размытия: сквозь неё видна общая фотография. Внутри сменяются
   лишь иконка, заголовок и описание. Читаемость — затемнением самой
   фотографии (.stage-shade) и тенью текста. */
.slider { position: relative; margin-top: auto; padding: 0 var(--pad); box-sizing: border-box; }
.slider-frame {
  position: relative; padding: 18px 16px 18px;
  border: 1.5px solid rgba(255, 138, 30, 0.85); border-radius: 18px;
  background: none;
  box-shadow: 0 0 16px rgba(255, 120, 30, 0.22);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.slider-frame:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.slides { display: grid; }
/* С JS высота .slides = высоте активного слайда (плавно): рамка по
   содержимому, без пустот; верх рамки не сдвигается (резерв — под точками). */
html.js .slides { overflow: hidden; transition: height .3s ease; }
.slide {
  grid-area: 1 / 1; align-self: start;
  display: flex; align-items: flex-start; gap: 14px; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateX(var(--slide-from, 24px));
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease; }
/* Без JS — все четыре слайда подряд внутри той же рамки. */
html:not(.js) .slides { gap: 18px; }
html:not(.js) .slide { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.slide-icon { flex: none; color: var(--orange); display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px;
  filter: drop-shadow(0 0 8px rgba(255, 130, 30, .55)); }
.slide-icon svg { width: 40px; height: 40px; stroke-width: 3.4; }
.slide-icon svg.solid { stroke: none; }
.slide-text { min-width: 0; flex: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6); }
.slide-title {
  /* Кегль не больше обычного и такой, чтобы самое длинное слово (--sw,
     ставится при сборке) целиком помещалось в текстовую колонку рамки. */
  --title-avail: calc(100vw - 2 * var(--pad) - 96px);
  margin: 0 0 6px; font: 800 min(clamp(19px, 5.6vw, 30px), calc(var(--title-avail) / (var(--sw, 10) * 0.8)))/1.12 var(--font-head);
  text-transform: uppercase; overflow-wrap: break-word; hyphens: auto;
}
.slide-title span { display: block; }
.slide-title .t1 { color: #fff; }
.slide-title .t2 { color: var(--orange); }
.slide--parking .slide-title .num { color: var(--orange); font-size: 1.5em; line-height: 1.02; text-transform: none; }
.slide-sub { margin: 0 0 4px; font: 700 clamp(15px, 4.2vw, 20px)/1.2 var(--font-head); color: #fff; }
.slide-desc { margin: 0; font-size: clamp(15px, 4vw, 17px); line-height: 1.5; color: #f1f4f9; }

.slider-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.slider-arrow {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7));
}
.slider-arrow svg { width: 28px; height: 28px; stroke-width: 2.4; }
.slider-arrow:hover { background: rgba(255, 255, 255, .08); }
.car-dots { display: flex; gap: 4px; }
.dot {
  width: 40px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.dot::before { content: ''; width: 16px; height: 8px; border-radius: 6px; background: rgba(210, 218, 232, .55); transition: width .2s, background .2s; }
.dot[aria-current="true"]::before { width: 26px; background: var(--orange); box-shadow: 0 0 8px rgba(255, 130, 30, .6); }

/* ---------- Карта-глобус ---------- */
.globe { position: relative; margin-top: 12px; }
.globe-media img { width: 100%; height: clamp(210px, 62vw, 560px); object-fit: cover; object-position: 50% 0%; }
.globe::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(7, 16, 31, 0) 26%, rgba(7, 16, 31, 0) 72%, var(--bg) 100%);
}
.globe-text { position: absolute; z-index: 2; left: 0; right: 0; top: 36%; text-align: center; padding: 0 var(--pad); }
.globe-brand { margin: 0; font: 700 clamp(18px, 5.4vw, 34px)/1.2 var(--font-head); letter-spacing: .28em; text-transform: uppercase; padding-left: .28em; text-shadow: 0 2px 12px #000; }
.globe-sub { margin: 6px 0 0; font: 500 clamp(12px, 3.4vw, 18px)/1.4 var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: #dfe5ef; text-shadow: 0 2px 10px #000; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; padding: 18px var(--pad) 8px; }
.faq h2 { font: 800 22px/1.2 var(--font-head); margin: 0 0 12px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative;
  font: 600 16px/1.35 var(--font-head); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item p { margin: 0; padding: 0 16px 16px; color: var(--sub); }

/* ---------- Подвал ---------- */
.site-footer { padding: 28px var(--pad) calc(28px + env(safe-area-inset-bottom)); text-align: center; color: var(--muted); font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.footer-links a { color: var(--sub); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--orange-text); text-decoration: underline; }
.footer-copy { margin: 0; }

/* ---------- Внутренние страницы ---------- */
.inner { max-width: 820px; margin: 0 auto; padding: 20px var(--pad) 12px; }
.draft-badge {
  display: inline-block; margin: 0 0 18px; padding: 8px 12px;
  background: rgba(255, 138, 30, .12); border: 1px dashed rgba(255, 138, 30, .55); border-radius: 10px;
  color: #ffd2a3; font-size: 14px;
}
.inner-title { font: 800 clamp(28px, 7vw, 52px)/1.1 var(--font-head); margin: 0 0 16px; overflow-wrap: break-word; }
.inner-title span { display: block; }
.inner-title .accent { color: var(--orange); }
.inner-lead { font-size: 18px; color: #dde4ee; margin: 0 0 22px; }
.pillars { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.pillars li { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.pillars h2 { margin: 0 0 6px; font: 700 18px/1.3 var(--font-head); color: var(--orange-text); }
.pillars p { margin: 0; color: var(--sub); }
.contacts h2 { font: 700 20px/1.3 var(--font-head); margin: 0 0 6px; }
.contacts p { color: var(--sub); margin: 0; }
.status-pill { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: #182640; color: var(--sub); font-size: 14px; }
.back-link { color: var(--orange-text); font-weight: 600; }

/* ---------- Юридические тексты (политика, удаление аккаунта) ----------
   Та же колонка и типографика внутренних страниц; длинный текст — крупнее
   межстрочный интервал, разделы — отдельными заголовками. */
.legal .inner-title { font-size: clamp(28px, 6.4vw, 44px); margin-bottom: 10px; }
.legal-sub { font-size: 17px; color: #dde4ee; margin: 0 0 6px; }
.legal-updated { font-size: 14px; color: var(--sub); margin: 0 0 16px; }
.legal-translation {
  margin: 28px 0 8px; padding: 10px 14px; border-left: 3px solid var(--orange);
  background: var(--bg-2); border-radius: 8px; font-size: 14px; color: var(--sub);
}
.legal-section h2 { font: 700 clamp(19px, 4.6vw, 23px)/1.3 var(--font-head); margin: 30px 0 10px; color: #fff; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: #dde4ee; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 1.25em; }
.legal li { margin: 0 0 10px; }
.legal li::marker { color: var(--orange-text); }
.legal strong { color: #fff; }
.legal a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-note {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 138, 30, .1); border: 1px solid rgba(255, 138, 30, .4);
}
.legal-more { margin-top: 26px; font-weight: 600; }
:lang(bn) .legal p, :lang(bn) .legal li, :lang(hi) .legal p, :lang(hi) .legal li { line-height: 1.8; }

/* ---------- Главная: адаптивность ---------- */
/* Глобус на телефоне: подпись над дугой, в тёмном «космосе», а не поверх огней;
   дуга видна целиком, края плавно уходят в фон. */
@media (max-width: 767.98px) {
  .globe { display: flex; flex-direction: column; margin-top: 4px; }
  .globe-text { position: relative; order: -1; top: auto; z-index: 2; margin-bottom: -6px; }
  .globe-media { display: block; overflow: hidden; }
  .globe-media img { width: 176%; max-width: none; height: auto; margin-left: -38%; object-fit: initial; }
  .globe::before {
    background:
      linear-gradient(180deg, var(--bg) 0%, rgba(7, 16, 31, 0) 10%, rgba(7, 16, 31, 0) 70%, var(--bg) 100%),
      linear-gradient(90deg, var(--bg) 0%, rgba(7, 16, 31, 0) 12%, rgba(7, 16, 31, 0) 88%, var(--bg) 100%);
  }
}
/* Короткие экраны (≤600px по высоте, напр. 320×568): компактнее шапка. */
@media (max-width: 767.98px) and (max-height: 600px) {
  .brand { width: 64px; height: 64px; }
  .hero-inner { padding-top: calc(86px + env(safe-area-inset-top)); }
  .hero-tagline { font-size: 12px; }
}

/* ≥600: фото на всю сцену (cover), карусель — поверх нижней части снимка. */
@media (min-width: 600px) {
  .stage { min-height: 980px; padding-bottom: 56px; }
  .stage-media { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
  .stage-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 64%; transform: none; }
  .stage-shade {
    background:
      linear-gradient(180deg, rgba(7, 16, 31, 0.75) 0%, rgba(7, 16, 31, 0.15) 26%, rgba(7, 16, 31, 0) 42%, rgba(7, 16, 31, 0.35) 62%, rgba(7, 16, 31, 0.7) 82%, var(--bg) 100%),
      linear-gradient(90deg, rgba(7, 16, 31, 0.7) 0%, rgba(7, 16, 31, 0.3) 45%, rgba(7, 16, 31, 0) 70%);
  }
  .slider { max-width: 640px; width: 100%; }
  .slide-title { --title-avail: 440px; }
}

@media (min-width: 768px) {
  :root { --pad: 28px; }
  .brand { width: 96px; height: 96px; }
  .menu-label { display: inline; }
  .hero-inner { padding-top: 140px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .hero-title { --hero-avail: 50vw; }
  .hero-tagline { font-size: 17px; }
  .hero-note { margin-top: 0; }
  .slider-frame { padding: 24px 26px; }
  .slide { gap: 20px; }
  .slide-icon { width: 60px; height: 60px; }
  .slide-icon svg { width: 54px; height: 54px; }
}

@media (min-width: 1024px) {
  .site-header, .hero-inner { max-width: 1240px; margin-inline: auto; }
  .site-header.is-over-hero { padding-inline: max(var(--pad), calc((100vw - 1240px) / 2 + var(--pad))); max-width: none; }
  .lang-list { right: 0; }
  .site-menu { right: max(var(--pad), calc((100vw - 1240px) / 2 + var(--pad))); }
  .stage { min-height: max(900px, 100vh); }
  .stage-media img { object-position: 60% 70%; }
  .hero-inner { width: 100%; padding-top: 170px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .hero-title { --hero-avail: min(50vw, 640px); }
  .hero-note { --note-avail: 30vw; font-size: min(46px, calc(var(--note-avail) / (var(--nw, 10) * var(--nw-k, .48)))); margin-right: 4%; }
  .slider { max-width: 1240px; margin-inline: auto; }
  .slider-frame, .slider-nav { max-width: 620px; }
  .slider-nav { justify-content: flex-start; }
  .globe-media img { height: 520px; object-position: 50% 10%; }
}
@media (min-width: 1440px) {
  .hero-note { font-size: min(52px, calc(var(--note-avail) / (var(--nw, 10) * var(--nw-k, .48)))); }
}

/* ---------- «О нас» ----------
   Mobile-first и компактно: hero — горизонтальный баннер ограниченной высоты,
   под ним заголовок и вступление; каждая секция — одна карточка «иллюстрация
   16:9 + заголовок + текст». С 900px — чередование: текст | фото, фото | текст,
   текст | фото; фото — аккуратная вставка, а не полноэкранный баннер.
   Пропорции фото не искажаются (object-fit: cover), кадр — по главному объекту. */
.about { max-width: 1100px; margin: 0 auto; padding: 4px var(--pad) 8px; display: grid; gap: 18px; }
.ab-hero { position: relative; display: grid; gap: 16px; }
.ab-hero-media { position: relative; display: block; height: clamp(220px, 62vw, 300px); border-radius: 18px; overflow: hidden; }
.ab-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 84% 55%; }
.ab-hero-media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 16, 31, 0) 60%, rgba(7, 16, 31, .55) 100%); }
.ab-hero-shade { display: none; }
.ab-hero-inner { position: relative; padding: 0 2px; }
.ab-eyebrow {
  margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--orange);
  font: 600 12.5px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text);
}
.ab-title { margin: 0 0 10px; font: 800 clamp(25px, 7vw, 36px)/1.14 var(--font-head); letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
.ab-title span { display: block; }
.ab-title .accent, .ab-h2 .accent { color: var(--orange); }
.ab-lead { margin: 0; font-size: 16px; line-height: 1.55; color: #dde4ee; max-width: 34em; }

.ab-card {
  position: relative; display: grid; gap: 14px; padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #0e1b30 0%, #0a1427 100%);
  border: 1px solid rgba(140, 170, 230, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.ab-media { position: relative; display: block; aspect-ratio: 16 / 9; max-height: 240px; width: 100%; border-radius: 12px; overflow: hidden; }
.ab-media picture, .ab-media img { display: block; width: 100%; height: 100%; }
.ab-media img { object-fit: cover; }
.ab-know .ab-media img { object-position: 50% 62%; }
.ab-tech .ab-media img { object-position: 62% 42%; }
.ab-world .ab-media img { object-position: 50% 45%; }
.ab-text { padding: 0 6px 8px; min-width: 0; }
.ab-h2 {
  position: relative; margin: 0 0 10px; padding-left: 14px;
  font: 800 clamp(20px, 5.4vw, 26px)/1.25 var(--font-head); overflow-wrap: break-word; hyphens: auto;
}
.ab-h2::before { content: ''; position: absolute; left: 0; top: .2em; width: 4px; height: 1.05em; border-radius: 3px; background: var(--orange); }
.ab-text p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: #d6dde8; }
.ab-text p:last-child { margin-bottom: 0; }

/* Четыре функции — бейджи, без маркеров списка. */
.ab-icons { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ab-icons li {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 12px; margin: 0;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 12px;
}
.ab-icons li::marker { content: none; }
.ab-icon { color: var(--orange); display: grid; place-items: center; flex: none; }
.ab-icon svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 130, 30, .3)); }
.ab-icon-label { font-size: 14px; line-height: 1.25; font-weight: 500; color: #e6ebf3; min-width: 0; overflow-wrap: break-word; hyphens: auto; }

.ab-world { border-color: rgba(255, 138, 30, 0.5); box-shadow: 0 0 0 1px rgba(255, 138, 30, 0.1) inset, 0 0 24px rgba(255, 120, 30, 0.18), 0 10px 28px rgba(0, 0, 0, 0.32); }
.ab-rule { display: block; width: 120px; height: 2px; margin: 14px 0 12px; background: linear-gradient(90deg, var(--orange), rgba(255, 138, 30, .2)); border-radius: 2px; }
.ab-text .ab-badge {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px;
  border: 1px solid rgba(255, 138, 30, 0.5); border-radius: 12px; background: rgba(0, 0, 0, 0.22);
  font: 700 14.5px/1.35 var(--font-head); color: var(--orange-text);
}
.ab-badge-icon { color: var(--orange); flex: none; display: grid; }
.ab-badge-icon svg { width: 26px; height: 26px; }

/* Контакты: три отдельные карточки, заголовок и адрес — разные строки. */
.ab-contacts-card { padding: 18px 14px 16px; gap: 0; }
.ab-contacts-card .ab-h2 { padding-left: 0; margin: 0 4px 6px; }
.ab-contacts-card .ab-h2::before { display: none; }
.ab-contact-sub { margin: 0 4px 14px; color: #d6dde8; font-size: 15px; line-height: 1.5; }
.ab-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ab-contacts li { margin: 0; }
.ab-contacts li::marker { content: none; }
.ab-contact {
  display: flex; align-items: center; gap: 14px;
  min-height: 70px; padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.ab-contact-icon { color: var(--orange); flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(255, 138, 30, 0.1); }
.ab-contact-icon svg { width: 28px; height: 28px; }
.ab-contact-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ab-contact-label { display: block; font: 600 15.5px/1.3 var(--font-head); color: #eef2f8; }
.ab-contact-mail { display: block; font-size: 14.5px; line-height: 1.35; color: var(--orange-text); overflow-wrap: break-word; }
.ab-contact:hover { border-color: rgba(255, 138, 30, 0.7); background: rgba(255, 138, 30, 0.07); transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255, 120, 30, 0.2); }
.ab-contact:hover .ab-contact-mail { text-decoration: underline; }
.ab-contact:active { transform: scale(0.98); background: rgba(255, 138, 30, 0.14); border-color: var(--orange); }
.ab-contact:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Узкие экраны: бейдж — иконка над подписью (слово целиком), контакт — компактнее. */
@media (max-width: 439.98px) {
  .ab-icons li { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 6px; text-align: center; }
  .ab-icon-label { font-size: 13px; }
}
@media (max-width: 379.98px) {
  .ab-contact { gap: 12px; padding: 12px 12px; }
  .ab-contact-icon { width: 38px; height: 38px; }
  .ab-contact-icon svg { width: 24px; height: 24px; }
  .ab-contact-mail { font-size: 14px; }
}
@media (min-width: 640px) {
  .ab-contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-contact { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; }
}

/* ---------- ≥900: чередующаяся композиция ---------- */
@media (min-width: 900px) {
  .about { gap: 22px; padding-top: 8px; }
  .ab-hero { display: block; min-height: 340px; }
  .ab-hero-media { position: absolute; inset: 0; height: auto; border-radius: 18px; }
  .ab-hero-media::after { display: none; }
  .ab-hero-media img { object-position: 100% 50%; }
  .ab-hero-shade { display: block; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
    background: linear-gradient(90deg, var(--bg) 0%, rgba(7, 16, 31, .92) 28%, rgba(7, 16, 31, .45) 52%, rgba(7, 16, 31, 0) 68%); }
  .ab-hero-inner { padding: 44px 0 40px 40px; max-width: 62%; }
  .ab-title { font-size: clamp(34px, 3.4vw, 44px); }
  .ab-lead { font-size: 17px; max-width: 28em; }

  .ab-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 28px; }
  .ab-media { aspect-ratio: 16 / 10; max-height: none; border-radius: 14px; }
  .ab-know .ab-media, .ab-world .ab-media { order: 2; }
  .ab-tech { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .ab-text { padding: 0; }
  .ab-h2 { font-size: clamp(22px, 2.1vw, 27px); }
  .ab-text p { font-size: 16px; }
  .ab-icons { max-width: 460px; }
  .ab-contacts-card { display: block; padding: 28px; }
  .ab-contacts-card .ab-h2 { font-size: 28px; margin: 0 0 6px; }
  .ab-contact-sub { margin: 0 0 18px; }
  .ab-contact { flex-direction: row; align-items: center; gap: 14px; }
}
@media (min-width: 900px) and (max-width: 1080px) {
  .ab-contact { flex-direction: column; align-items: flex-start; }
}

/* Бенгальский и хинди: без разрядки, выше строка. */
:lang(bn) .ab-eyebrow, :lang(hi) .ab-eyebrow { letter-spacing: 0; }
:lang(bn) .ab-text p, :lang(hi) .ab-text p, :lang(bn) .ab-lead, :lang(hi) .ab-lead { line-height: 1.7; }
:lang(bn) .ab-title, :lang(hi) .ab-title, :lang(bn) .ab-h2, :lang(hi) .ab-h2 { line-height: 1.38; }

/* ---------- Список языков: 16 пунктов — прокрутка внутри панели ---------- */
.lang-list { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; min-width: 220px; }
.lang-list .name { white-space: nowrap; }

/* ---------- Бенгальский и хинди ----------
   Глифы — Noto Sans Bengali / Noto Sans Devanagari (грузятся только на этих
   страницах), латиница остаётся Montserrat/Roboto. Для этих письменностей
   нельзя разрядку (ломает лигатуры и надстрочную линию), нет прописных,
   синтетический курсив выглядит плохо, а знакам нужна большая высота строки. */
:root:lang(bn) {
  --font-head: 'Montserrat', 'Noto Sans Bengali', system-ui, sans-serif;
  --font-body: 'Roboto', 'Noto Sans Bengali', system-ui, sans-serif;
  --font-hand: 'Noto Sans Bengali', system-ui, sans-serif;
}
:root:lang(hi) {
  --font-head: 'Montserrat', 'Noto Sans Devanagari', system-ui, sans-serif;
  --font-body: 'Roboto', 'Noto Sans Devanagari', system-ui, sans-serif;
  --font-hand: 'Noto Sans Devanagari', system-ui, sans-serif;
}
:lang(bn) .hero-tagline, :lang(hi) .hero-tagline,
:lang(bn) .globe-brand, :lang(hi) .globe-brand,
:lang(bn) .globe-sub, :lang(hi) .globe-sub { letter-spacing: 0; padding-left: 0; }
:lang(bn) .hero-tagline, :lang(hi) .hero-tagline { font-size: 15px; line-height: 1.5; }
:lang(bn) .globe-brand, :lang(hi) .globe-brand { letter-spacing: .12em; }
:lang(bn) .hero-title, :lang(hi) .hero-title { font-style: normal; line-height: 1.25; }
:lang(bn) .hero-title span, :lang(hi) .hero-title span { padding-bottom: .04em; }
:lang(bn) .hero-note, :lang(hi) .hero-note { font-weight: 700; line-height: 1.35; --nw-k: .62; }
:lang(bn) .slide-title, :lang(hi) .slide-title { line-height: 1.32; }
:lang(bn) .slide-desc, :lang(hi) .slide-desc,
:lang(bn) .faq-item p, :lang(hi) .faq-item p { line-height: 1.65; }
:lang(bn) .tg-btn, :lang(hi) .tg-btn { line-height: 1.35; }

/* ---------- Движение ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}