@import url("./common.css");

.mobile-page.mobile-about {
  position: relative;
  overflow-x: hidden;
  background: #4975d7;
  /*
    Figma 484:404: герой заканчивается на y=845; «пилот» 1144:953 — 375×1167 с y=845 (низ 2012).
    Секция .mobile-promo поднята на --overlap, поэтому min-height внутреннего блока = высота пилота + overlap.
  */
  --overlap-promo-into-hero: calc(4px * var(--mobile-mq));
  --mobile-promo-top-radius: calc(40px * var(--mobile-mq));
  --mobile-hero-block-h: calc(845px * var(--mobile-mq));
  --mobile-pilot-block-h: calc(1167px * var(--mobile-mq));
  /* Перебить common.css — трекинг заголовка героя масштабируется с --mobile-mq */
  --ls-hero-title: calc(-0.2px * var(--mobile-mq));
  /* Ширина — .mobile-page; blend/promo — overflow у родителей */
}

@supports (overflow-x: clip) {
  .mobile-page.mobile-about {
    overflow-x: clip;
  }
}

/*
  Слои: градиент < промо (фон блока) < blend < контент hero.
  Blend геометрически заходит на «Пилот» — должен быть поверх фона promo, но ниже секции .hero (z-index 6).
*/
.mobile-page.mobile-about > .hero-bg-gradient-fon {
  position: absolute;
  top: calc(26px * var(--mobile-mq));
  left: 0;
  width: 100%;
  height: calc(1078px * var(--mobile-mq));
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120.18712651731659deg, rgb(73, 116, 215) 42.124%, rgb(211, 225, 255) 61.977%);
  opacity: 1;
}

/* 1090:6258 Blend Group 24 — в ширину секции/страницы; SVG сдвинут внутри, без вылезания за 375px */
.mobile-page.mobile-about > .hero-bg-blend-group-24 {
  position: absolute;
  left: 0;
  top: calc(-26px * var(--mobile-mq));
  width: 100%;
  height: calc(1028.085693359375px * var(--mobile-mq));
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
  isolation: isolate;
  opacity: 1;
}

.mobile-page.mobile-about > .hero-bg-blend-group-24 img {
  position: absolute;
  left: calc(-111px * var(--mobile-mq));
  top: 0;
  width: calc(573.49560546875px * var(--mobile-mq));
  height: calc(1028.085693359375px * var(--mobile-mq));
  max-width: none;
  object-fit: contain;
  object-position: top left;
  display: block;
}

/*
  initStaticImagesFadeIn: img → .umbrent-img-wrap > .umbrent-img-twin > (ph + финал).
  static-images-fade даёт ph inset:0 + 100%, финалу position:relative — плейсхолдер «плывёт» относительно SVG.
  Как support blend: wrap/twin на весь блок; fill + isolation + z-index (ph 0 / финал 2) — один размер и ph строго сзади.
*/
.mobile-page.mobile-about > .hero-bg-blend-group-24 > .umbrent-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.mobile-page.mobile-about > .hero-bg-blend-group-24 > .umbrent-img-wrap > .umbrent-img-twin {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  line-height: 0;
  isolation: isolate;
}

html main.page.mobile-about .hero-bg-blend-group-24 .umbrent-img-twin > img.umbrent-img-ph {
  position: absolute;
  inset: unset;
  left: calc(-111px * var(--mobile-mq));
  top: 0;
  width: calc(573.49560546875px * var(--mobile-mq));
  height: calc(1028.085693359375px * var(--mobile-mq));
  max-width: none;
  object-fit: fill;
  object-position: top left;
  display: block;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

html main.page.mobile-about .hero-bg-blend-group-24 .umbrent-img-twin > img:not(.umbrent-img-ph) {
  position: absolute;
  inset: unset;
  left: calc(-111px * var(--mobile-mq));
  top: 0;
  width: calc(573.49560546875px * var(--mobile-mq));
  height: calc(1028.085693359375px * var(--mobile-mq));
  max-width: none;
  object-fit: fill;
  object-position: top left;
  display: block;
  z-index: 2;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Первый блок (hero) — высота до линии стыка с пилотом (y=845 в макете) */
.mobile-about .hero {
  position: relative;
  z-index: 6;
  overflow: visible;
  /* fallback 845px — если токен с main не наследуется, блок не схлопывается */
  min-height: var(--mobile-hero-block-h, calc(845px * var(--mobile-mq)));
  height: var(--mobile-hero-block-h, calc(845px * var(--mobile-mq)));
  background: transparent;
}

.mobile-about .hero-canvas {
  position: relative;
  z-index: 6;
  height: var(--mobile-hero-block-h, calc(845px * var(--mobile-mq)));
  min-height: var(--mobile-hero-block-h, calc(845px * var(--mobile-mq)));
}

.mobile-about .hero-stack {
  position: absolute;
  left: calc(31.29px * var(--mobile-mq));
  top: calc(131px * var(--mobile-mq));
  /* Не шире колонки: при узком main артборд колонкой сжимается пропорционально */
  width: min(
    100%,
    calc(325.78546142578125px * var(--mobile-mq))
  );
  height: calc(671.278076171875px * var(--mobile-mq));
  box-sizing: border-box;
}

.mobile-about .site-header {
  position: absolute;
  left: var(--mobile-header-x);
  top: var(--mobile-header-y);
  z-index: 3;
}

/* 1090:8088: Poppins Bold/Black, 32/34, right; uppercase на мобиле */
.mobile-about .hero-title {
  position: absolute;
  top: 0;
  left: calc(0.6435546875px * var(--mobile-mq));
  right: calc(21.08px * var(--mobile-mq));
  margin: 0;
  height: calc(110px * var(--mobile-mq));
  color: #fff;
  text-align: right;
  text-transform: uppercase;
  font-size: calc(32px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(34px * var(--mobile-mq));
  letter-spacing: var(--ls-hero-title);
  text-shadow: 0 calc(6px * var(--mobile-mq)) calc(14.9px * var(--mobile-mq)) rgba(57, 106, 213, 0.44);
  font-synthesis: none;
}

.mobile-about .hero-title-brand {
  font-weight: 700;
}

/* Вторая часть строки — Bold (700), не Black; трекинг в макете обычно свободнее, чем у «Umbrent» */
.mobile-about .hero-title-dash {
  font-weight: 700;
  letter-spacing: var(--ls-none);
  font-synthesis: none;
}

.mobile-about .hero-title-row {
  display: block;
}

.mobile-about .hero-title-row--first {
  margin-bottom: 0;
}

/*
  Блок копира + CTA: 50px (эталон) до кнопки.
*/
.mobile-about .hero-lead-text {
  position: absolute;
  left: 0;
  right: 0;
  /* Было ~14.66px под h1; плотнее — как прежний эталон ~121.528 от верха стека */
  top: calc((110px + 11.528564453125px) * var(--mobile-mq));
  width: 100%;
  padding-left: calc(22.65576171875px * var(--mobile-mq));
  padding-right: calc(21.13px * var(--mobile-mq));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(50px * var(--mobile-mq));
  box-sizing: border-box;
}

.mobile-about .hero-lead-text__copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(4px * var(--mobile-mq));
  min-width: 0;
}

/* Figma 3083:4326: Poppins, 20/28, #fafafa, right; ось как в MCP (ExtraBold-слой, wght 700) */
.mobile-about .hero-subtitle-accent {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  color: #fafafa;
  text-align: right;
  font-size: calc(20px * var(--mobile-mq));
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: calc(28px * var(--mobile-mq));
  letter-spacing: var(--ls-none);
  font-synthesis: none;
  overflow-wrap: break-word;
}

/* Figma 3083:4327: Poppins Regular по оси, 14/16 */
.mobile-about .hero-subtitle-note {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.mobile-about .hero-subtitle-note__line {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  color: #fafafa;
  text-align: right;
  font-size: calc(14px * var(--mobile-mq));
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: calc(16px * var(--mobile-mq));
  letter-spacing: var(--ls-none);
  font-synthesis: none;
  overflow-wrap: break-word;
}

/* CTA по правому краю контента (как подзаголовок) — без полосы пустоты справа от кнопки */
.mobile-about .hero-lead-text .hero-cta-wrap {
  position: static;
  align-self: flex-end;
  width: calc(238px * var(--mobile-mq));
  max-width: 100%;
  margin-left: 0;
  padding: 0;
  box-sizing: border-box;
}

.mobile-about .download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(55px * var(--mobile-mq));
  padding: 0;
  border: 0;
  border-radius: calc(13px * var(--mobile-mq));
  background: #fff;
  color: #4b83ff;
  font-size: calc(16px * var(--mobile-mq));
  font-weight: 400;
  line-height: calc(32px * var(--mobile-mq));
  cursor: pointer;
  box-shadow: none;
  transition: transform var(--interactive-duration) var(--interactive-ease), filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease,
    box-shadow calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease;
}

.mobile-about .download-btn:hover {
  filter: brightness(1.04);
  box-shadow: var(--btn-white-hover-shadow);
}

.mobile-about .download-btn:active {
  transform: translateY(calc(2px * var(--mobile-mq)));
  box-shadow: var(--btn-white-active-shadow);
  filter: brightness(0.98);
}

/*
  1131:708 Vector 38 — фрейм в герое (hero-stack) + размер img из get_design_context (Figma MCP):
  контейнер 325.785×300.426, растр 433.785×408.426 (@2× экспорт 868×817), центрирование как inset в макете.
*/
.mobile-about .hero-visual {
  --hero-station-visual-scale: 1.3316;
  --hero-station-frame-w: calc(325.78546142578125px * var(--mobile-mq));
  --hero-station-frame-h: calc(300.425537109375px * var(--mobile-mq));
  --hero-station-img-w: calc(433.785px * var(--mobile-mq));
  --hero-station-img-h: calc(408.426px * var(--mobile-mq));
  position: absolute;
  left: 0;
  /* 1131:708 + сдвиг; −4px вверх от предыдущего положения */
  top: calc((370.8525390625px + 8px - 16px + 20px - 4px) * var(--mobile-mq));
  width: var(--hero-station-frame-w);
  height: var(--hero-station-frame-h);
  /* visible: тень станции в PNG — за пределами фрейма; overflow-x на цепочке .mobile-page / html */
  overflow: visible;
}

.mobile-about .hero-visual > .umbrent-img-wrap {
  position: absolute;
  inset: 0;
}

/*
  initStaticImagesFadeIn: img внутри span.umbrent-img-twin.
  Глобальный static-images-fade даёт twin display:inline-block и финалу position:relative + translateZ(0) —
  ломается абсолютное центрирование станции относительно фрейма 1131:708.
*/
.mobile-about .hero-visual > .umbrent-img-wrap > .umbrent-img-twin {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  line-height: 0;
  isolation: isolate;
}

/*
  ph и финал — одна геометрия (static-images-fade иначе даёт ph inset+cover, финалу position:relative).
*/
html main.page.mobile-about .hero-visual .umbrent-img-twin > img.umbrent-img-ph,
html main.page.mobile-about .hero-visual .umbrent-img-twin > img.hero-station {
  position: absolute;
  inset: unset;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(100% * var(--hero-station-visual-scale));
  height: calc(100% * var(--hero-station-visual-scale));
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
}

html main.page.mobile-about .hero-visual .umbrent-img-twin > img.umbrent-img-ph {
  z-index: 0;
  pointer-events: none;
}

html main.page.mobile-about .hero-visual .umbrent-img-twin > img.hero-station {
  z-index: 2;
  pointer-events: auto;
}

.mobile-about .mobile-promo {
  position: relative;
  margin-top: calc(-1 * var(--overlap-promo-into-hero));
  z-index: 3;
  border-top-left-radius: var(--mobile-promo-top-radius);
  border-top-right-radius: var(--mobile-promo-top-radius);
  background: var(--promo-bg, #3d6dcd);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--mobile-section-top-shadow);
}

/* Пилот: фон как desktop promo (--promo-bg / Figma); padding-top = overlap; высота блока 1167 + overlap */
.mobile-about .mobile-promo-inner {
  position: relative;
  box-sizing: border-box;
  min-height: calc(var(--mobile-pilot-block-h) + var(--overlap-promo-into-hero));
  padding-top: var(--overlap-promo-into-hero);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: var(--promo-bg, #3d6dcd);
  overflow: hidden;
  isolation: isolate;
}

.mobile-about .mobile-promo-visual {
  position: absolute;
  left: calc(-11px * var(--mobile-mq));
  top: calc(142px * var(--mobile-mq) + var(--overlap-promo-into-hero));
  width: calc(456px * var(--mobile-mq));
  height: calc(818px * var(--mobile-mq));
  z-index: 0;
  pointer-events: none;
}

.mobile-about .mobile-promo-visual > .umbrent-img-wrap {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-about .mobile-promo-composite {
  width: calc(456px * var(--mobile-mq));
  height: calc(818px * var(--mobile-mq));
  object-fit: contain;
  object-position: center bottom;
}

/*
  Слоган 1144:953 — как blocks/promo (545:258): две строки, caps, первая 36/800, вторая 20/700,
  вторая строка ближе к первой (см. promo-title-line--sub).
*/
.mobile-about .mobile-promo-title {
  position: absolute;
  left: 50%;
  top: calc(79px * var(--mobile-mq) + var(--overlap-promo-into-hero));
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(278px * var(--mobile-mq)), calc(100% - calc(32px * var(--mobile-mq))));
  max-width: calc(100% - calc(16px * var(--mobile-mq)));
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  z-index: 2;
  overflow: hidden;
}

.mobile-about .mobile-promo-line {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  letter-spacing: var(--ls-none);
  font-style: normal;
  font-synthesis: none;
  white-space: nowrap;
}

/*
  Figma 1090:10617 («ДОЖДЬ ИДЕТ?»): Poppins ExtraBold.
  Только font-weight:800 со статическим Google Fonts иногда даёт визуально Bold (700);
  variable Poppins в common.css + явная ось wght — совпадение с макетом.
*/
.mobile-about .mobile-promo-line--lead {
  width: calc(274px * var(--mobile-mq));
  font-family: "Poppins", sans-serif;
  font-size: calc(36px * var(--mobile-mq));
  font-weight: 800;
  font-variation-settings: "wght" 800;
  line-height: 1.54;
  text-transform: uppercase;
}

.mobile-about .mobile-promo-line--lead strong {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-variation-settings: "wght" 800;
}

.mobile-about .mobile-promo-line--sub {
  width: calc(278px * var(--mobile-mq));
  margin-top: calc(-4px * var(--mobile-mq));
  font-size: calc(20px * var(--mobile-mq));
  font-weight: 700;
  line-height: 1.54;
  text-transform: uppercase;
}

/* 1090:9711: Poppins Medium 8/1.2, white */
.mobile-about .mobile-promo-period {
  position: absolute;
  left: 50%;
  top: calc(171px * var(--mobile-mq) + var(--overlap-promo-into-hero));
  transform: translateX(-50%);
  box-sizing: border-box;
  width: calc(193px * var(--mobile-mq));
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  font-size: calc(8px * var(--mobile-mq));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-none);
  z-index: 2;
}

.mobile-about .how {
  position: relative;
  margin-top: calc(-304px * var(--mobile-mq));
  min-height: calc(834px * var(--mobile-mq));
  border-radius: calc(40px * var(--mobile-mq)) calc(40px * var(--mobile-mq)) 0 0;
  background-color: #6f94e8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 834' preserveAspectRatio='none'><g transform='matrix(-7.5916 8.7767 -2.6034 -27.222 292.92 278.31)'><foreignObject x='-413.2' y='-413.2' width='826.4' height='826.4'><div xmlns='http://www.w3.org/1999/xhtml' style='background-image: conic-gradient(from 90deg, rgba(73, 117, 215, 0.9) -0.96154%, rgba(116, 153, 235, 0.95) -0.093883%, rgb(160, 190, 255) 0.77377%, rgb(116, 153, 235) 21.3%, rgb(73, 116, 215) 41.827%, rgb(111, 148, 232) 56.01%, rgb(148, 179, 249) 70.192%, rgba(111, 148, 232, 0.95) 84.615%, rgba(73, 117, 215, 0.9) 99.038%, rgba(116, 153, 235, 0.95) 99.906%, rgb(160, 190, 255) 100.77%); opacity:1; height: 100%; width: 100%;'></div></foreignObject></g></svg>");
  background-size: cover;
  background-position: center;
  z-index: 5;
  overflow: hidden;
  box-shadow: var(--mobile-section-top-shadow);
}

.mobile-about .how-canvas {
  /* Слайдер «Как работает»: ширина никогда не шире родителя (чеклист overflow/width). */
  --how-slide: min(100%, calc(353px * var(--mobile-mq)));
  padding: calc(47px * var(--mobile-mq)) var(--mobile-pad-x) calc(103px * var(--mobile-mq));
}

/*
  Заголовок как в blocks/how-it-works (.how-title): caps, трек + точки как в Figma List 578:281.
*/
.mobile-about .how-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: calc(32px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(41px * var(--mobile-mq));
  letter-spacing: var(--ls-section-h2);
  text-transform: uppercase;
  font-synthesis: none;
}

.mobile-about .how-title-line {
  display: block;
}

.mobile-about .how-region {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: var(--how-slide);
  max-width: 100%;
  margin: calc(59px * var(--mobile-mq)) auto 0;
  gap: calc(59px * var(--mobile-mq));
}

.mobile-about .how-track {
  display: flex;
  flex-direction: row;
  gap: calc(16px * var(--mobile-mq));
  box-sizing: border-box;
  width: var(--how-slide);
  max-width: 100%;
  height: calc(460px * var(--mobile-mq));
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Разрешаем и горизонтальный свайп карусели, и вертикальный скролл страницы. */
  touch-action: pan-x pan-y;
}

.mobile-about .how-track::-webkit-scrollbar {
  display: none;
}

.mobile-about .how-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--how-slide);
  box-sizing: border-box;
  width: var(--how-slide);
  max-width: 100%;
  scroll-snap-align: start;
}

.mobile-about .how-card-1 {
  gap: calc(10px * var(--mobile-mq));
}

.mobile-about .how-card-2 {
  gap: calc(11px * var(--mobile-mq));
}

.mobile-about .how-card-3 {
  gap: calc(13px * var(--mobile-mq));
}

.mobile-about .how-card-4 {
  gap: calc(13px * var(--mobile-mq));
}

/* Как на узком desktop: без переноса в середине фразы в карточках */
.mobile-about .card-break {
  display: none;
}

.mobile-about .how-media {
  width: calc(329px * var(--mobile-mq));
  max-width: 100%;
  height: calc(297px * var(--mobile-mq));
  margin: 0 auto calc(14px * var(--mobile-mq));
  border-radius: calc(20px * var(--mobile-mq));
  overflow: hidden;
}

.mobile-about .how-media > .umbrent-img-wrap {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-about .how-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-about .how-overlay {
  position: relative;
  width: calc(329px * var(--mobile-mq));
  max-width: 100%;
  height: calc(153px * var(--mobile-mq));
  margin: 0 auto;
  border-radius: calc(32px * var(--mobile-mq));
  overflow: hidden;
}

.mobile-about .how-overlay-surface {
  position: absolute;
  inset: 0;
  border: calc(1px * var(--mobile-mq)) solid #bcc3d0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 76%);
  backdrop-filter: blur(calc(25px * var(--mobile-mq)));
  -webkit-backdrop-filter: blur(calc(25px * var(--mobile-mq)));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 38%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0 38%, transparent 78%);
}

.mobile-about .how-overlay-content {
  position: relative;
  z-index: 1;
  padding: calc(22px * var(--mobile-mq)) calc(17px * var(--mobile-mq)) calc(16px * var(--mobile-mq));
}

.mobile-about .how-overlay-content h3 {
  margin: 0;
  color: #fff;
  font-size: calc(20px * var(--mobile-mq));
  line-height: calc(26px * var(--mobile-mq));
}

.mobile-about .how-overlay-content p {
  margin: calc(8px * var(--mobile-mq)) 0 0;
  color: #fff;
  font-size: calc(12px * var(--mobile-mq));
  line-height: calc(18px * var(--mobile-mq));
}

/* Figma List 578:281 — 128×24, зазор до трека через .how-region gap */
.mobile-about .how-dots {
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(12px * var(--mobile-mq));
  box-sizing: border-box;
  width: calc(128px * var(--mobile-mq));
  height: calc(24px * var(--mobile-mq));
  margin: 0;
  flex-shrink: 0;
}

.mobile-about .how-dot {
  appearance: none;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  width: calc(10px * var(--mobile-mq));
  height: calc(10px * var(--mobile-mq));
  border-radius: 999px;
  background: #8d8d8d;
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform var(--interactive-duration) var(--interactive-ease),
    filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}

.mobile-about .how-dot.active {
  background: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-about .how-dot:hover:not(.active) {
    filter: brightness(1.25);
    transform: scale(1.2);
    box-shadow: 0 0 0 calc(2px * var(--mobile-mq)) rgba(255, 255, 255, 0.35);
  }

  .mobile-about .how-dot.active:hover {
    filter: brightness(1.08);
  }
}

.mobile-about .how-dot:active {
  transform: scale(0.88);
}

.mobile-about .how-dot.active:active {
  transform: scale(0.92);
}

.mobile-about .faq {
  position: relative;
  margin-top: calc(-43px * var(--mobile-mq));
  height: auto;
  border-radius: calc(40px * var(--mobile-mq)) calc(40px * var(--mobile-mq)) 0 0;
  background: #bcd1ff;
  z-index: 6;
  box-shadow: var(--mobile-section-top-shadow);
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* Нижний отступ: support наезжает margin-top calc(-90px - 15px) — запас под последний ответ.
   Верх канваса + заголовок: Figma 1114:3805 — 1114:3806 y=26 h=56; до первого ряда 1181:696 y≈93.75 → зазор ~11.75px */
.mobile-about .faq-canvas {
  padding: calc(26px * var(--mobile-mq)) var(--mobile-faq-pad-x) calc((72px + 90px + 15px) * var(--mobile-mq));
  box-sizing: border-box;
  min-width: 0;
}

.mobile-about .faq-title {
  margin: 0 0 calc(11.75px * var(--mobile-mq));
  color: #fff;
  text-align: center;
  font-size: calc(28px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(56px * var(--mobile-mq));
  letter-spacing: var(--ls-faq-title);
  text-transform: uppercase;
}

.mobile-about .faq-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(16px * var(--mobile-mq));
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.mobile-about .faq-item {
  width: 100%;
  max-width: calc(339px * var(--mobile-mq));
  margin-inline: auto;
  padding: 0 calc(16px * var(--mobile-mq)) 0 calc(15px * var(--mobile-mq));
  box-sizing: border-box;
  border: 0;
  border-radius: calc(20px * var(--mobile-mq));
  background: #fff;
  box-shadow: none;
  transition: transform var(--interactive-duration) var(--interactive-ease), filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease,
    opacity calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease, box-shadow calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease;
}

.mobile-about .faq-item-text {
  text-align: left;
}

.mobile-about .faq-item img {
  width: calc(24px * var(--mobile-mq));
  height: calc(24px * var(--mobile-mq));
}

.mobile-about .support {
  position: relative;
  margin-top: calc((-90px - 15px) * var(--mobile-mq));
  height: var(--mobile-support-section-height);
  border-radius: calc(40px * var(--mobile-mq)) calc(40px * var(--mobile-mq)) 0 0;
  background: linear-gradient(90deg, #4975d7 18.75%, #85a3e8 95.67%);
  z-index: 7;
}

.mobile-about .support-canvas {
  position: relative;
  height: calc(100% + var(--mobile-support-canvas-pull-up));
  margin: calc(-1 * var(--mobile-support-canvas-pull-up)) auto 0;
  box-sizing: border-box;
}

/*
  Figma 1096:10840 (тг → текст «Напишите нам в поддержку…»):
  Poppins SemiBold (wght 600) 16/1.3, центрирован, white. Слово «Telegram» —
  жирнее (Bold/700) через <strong> в шаблоне. Раньше font-weight не задавался
  и наследовался Regular (400), из-за чего текст в live выглядел тоньше макета.
*/
.mobile-about .support-canvas p {
  position: absolute;
  top: calc(54px * var(--mobile-mq));
  left: 50%;
  transform: translateX(-50%);
  width: calc(336px * var(--mobile-mq));
  max-width: calc(100% - calc(24px * var(--mobile-mq)));
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: calc(16px * var(--mobile-mq));
  font-weight: 600;
  line-height: 1.3;
  font-synthesis: none;
}

.mobile-about .support-canvas strong {
  font-weight: 700;
}

.mobile-about .tg-btn {
  position: absolute;
  left: 50%;
  top: calc(132px * var(--mobile-mq));
  transform: translateX(-50%);
  display: block;
  width: calc(61px * var(--mobile-mq));
  height: calc(61px * var(--mobile-mq));
  border-radius: 50%;
  overflow: hidden;
  transform-origin: center center;
  box-shadow: none;
  transition: transform var(--tg-flight-duration) var(--tg-flight-ease), filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease, opacity calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease;
}

/* Как .mobile-support .footer: 40px от низа иконки Telegram до верха футера. */
.mobile-about .footer {
  position: relative;
  margin-top: calc(-175px * var(--mobile-mq));
  height: auto;
  z-index: 8;
}

.mobile-about .faq-item:hover {
  filter: brightness(1.03);
  box-shadow: var(--btn-surface-hover-shadow);
}
.mobile-about .faq-item:active {
  transform: translateY(var(--interactive-press-translate-y));
  box-shadow: var(--btn-surface-active-shadow);
  filter: brightness(0.99);
}

.mobile-about .tg-btn img {
  display: block;
  width: calc(61px * var(--mobile-mq));
  height: calc(61px * var(--mobile-mq));
  max-width: none;
  object-fit: contain;
  transform-origin: center center;
  transition: transform var(--tg-flight-duration) var(--tg-flight-ease), filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease;
}

.mobile-about .tg-btn:hover {
  filter: brightness(1.12);
  transform: translate(-50%, calc(-8px * var(--mobile-mq)));
}

.mobile-about .tg-btn:active:not(.tg-plane--flying) {
  filter: brightness(1.02);
}

.mobile-about .tg-btn:active:not(.tg-plane--flying) img {
  transform: translate(calc(-11px * var(--mobile-mq)), calc(10px * var(--mobile-mq))) scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-about .how-dot {
    transition-duration: 0.01ms !important;
  }

  .mobile-about .how-dot:hover,
  .mobile-about .how-dot:active {
    transform: none;
    filter: none;
    box-shadow: none;
  }
}