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

/* «Для бизнеса»: чуть более светлый градиент вьюпорта, как отдельный тон страницы */
html.mobile-root {
  --page-root-fill-start: #6f97ec;
  --page-root-bg: linear-gradient(to bottom right, #6a92ea 18%, #c5dafb 78%);
  background-color: var(--page-root-fill-start);
  background-image: var(--page-root-bg);
}

html.mobile-root body {
  background: transparent;
}

.mobile-page.mobile-business {
  overflow-x: hidden;
  background: #6f97ec;
}

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

.mobile-business .business-hero-block {
  position: relative;
  z-index: 1;
  /* Фон должен продолжаться под секцией карточек */
  overflow: visible;
  min-height: calc(845px * var(--mobile-mq, 1));
}

/* Фон 1144:958: общий контейнер 100%×2307, картинка внутри 656px */
.mobile-business .business-mobile-bg-root {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Единый растр-фон вместо послойной сборки */
.mobile-business .business-mobile-bg-image {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: calc(-287.5px * var(--mobile-mq));
  width: calc(656px * var(--mobile-mq));
  height: calc(2307px * var(--mobile-mq));
  max-width: none;
  display: block;
  opacity: 1;
}

.mobile-business .business-canvas {
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

/*
  Mobile hero: масштаб от desktop Figma (.business-intro 651×656, business.css).
  Карточка 353px = 375 − 2×11. --bh = 353/651 — горизонтальный коэффициент к десктопу.
*/
.mobile-business .business-hero-canvas {
  position: relative;
  z-index: 2;
  min-height: calc(812.355224609375px * var(--mobile-mq));
  padding: 0;
  box-sizing: border-box;
  --business-card-w: calc(353px * var(--mobile-mq));
  --business-card-x: calc(11px * var(--mobile-mq));
  --business-card-top: calc(89px * var(--mobile-mq));
  --bh: calc(353 / 651);
}

.mobile-business .business-cards-canvas,
.mobile-business .business-spec-canvas {
  padding: 0;
}

.mobile-business .business-shell {
  margin-top: 0;
}

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

/* Figma 1114:4810 (Background+Border):
   - 1px solid white (rgba 0.94 на верхе) — рамка плавно тает к низу карточки
     (на ~95% высоты исчезает полностью, как в макете 1144:955).
     border-image не работает с border-radius без артефактов на углах,
     поэтому делаем рамку отдельным псевдоэлементом ::after и накладываем
     vertical mask-image с линейным fade-out.
   - двойной white linear-gradient в фоне на ::before (без opacity-обёртки) */
.mobile-business .business-mobile-hero {
  position: absolute;
  left: var(--business-card-x);
  top: var(--business-card-top);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--business-card-w);
  min-height: calc(656px * var(--mobile-mq));
  padding: calc(45px * var(--mobile-mq)) calc(28px * var(--mobile-mq)) calc(36px * var(--mobile-mq))
    calc(28px * var(--mobile-mq));
  border-radius: calc(32px * var(--mobile-mq));
  /* transparent border сохраняет content-area (box-sizing: border-box) ровно как раньше;
     видимая рамка с фейдом рисуется через ::after ниже. */
  border: 1px solid transparent;
  overflow: visible;
  isolation: isolate;
}

.mobile-business .business-mobile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(32px * var(--mobile-mq));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 29.327%, rgba(255, 255, 255, 0.4) 36.058%, rgba(255, 255, 255, 0) 75%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 15.865%, rgba(255, 255, 255, 0.85) 39.423%, rgba(255, 255, 255, 0) 93.75%);
  z-index: -1;
  pointer-events: none;
}

/* Figma 1144:955: рамка карточки плавно «растворяется» к низу. */
.mobile-business .business-mobile-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: calc(32px * var(--mobile-mq));
  pointer-events: none;
  z-index: 3;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0, 0, 0, 0) 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0, 0, 0, 0) 96%);
}


.mobile-business .business-mobile-hero__title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: calc(32px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(34px * var(--mobile-mq));
  letter-spacing: var(--ls-none);
  text-transform: uppercase;
  font-synthesis: none;
}

.mobile-business .business-mobile-hero__title-main {
  display: block;
  text-transform: none;
}

.mobile-business .business-mobile-hero__title-brand {
  display: block;
  margin-top: 0;
  font-size: calc(32px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(34px * var(--mobile-mq));
  letter-spacing: var(--ls-none);
  text-transform: uppercase;
  font-synthesis: none;
}

.mobile-business .business-mobile-hero__lead {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: calc(31px * var(--mobile-mq)) 0 0;
  padding: 0;
  color: #396ad5;
  font-size: calc(16px * var(--mobile-mq));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-none);
  font-synthesis: none;
}

.mobile-business .business-btn--hero {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(202px * var(--mobile-mq));
  height: calc(54px * var(--mobile-mq));
  margin: calc(28px * var(--mobile-mq)) 0 0;
  padding: calc(11px * var(--mobile-mq)) calc(36px * var(--mobile-mq));
  border: 0;
  border-radius: calc(13px * var(--mobile-mq));
  background: #396ad5;
  color: #fff;
  font-size: calc(16px * var(--mobile-mq));
  font-weight: 400;
  line-height: calc(32px * var(--mobile-mq));
  letter-spacing: var(--ls-cta);
  font-synthesis: none;
  cursor: pointer;
  overflow: clip;
  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;
}

/* Подсветка после тапа по пункту списка в карточке / теххарактеристиках (см. index.js) */
@keyframes mobile-business-hero-cta-highlight {
  0% {
    box-shadow: none;
    filter: brightness(1);
  }
  35% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.75),
      0 12px 36px rgba(46, 88, 174, 0.5);
    filter: brightness(1.1);
  }
  100% {
    box-shadow: none;
    filter: brightness(1);
  }
}

.mobile-business .business-btn--hero.business-btn--hero--highlight {
  animation: mobile-business-hero-cta-highlight 1.1s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-business .business-btn--hero.business-btn--hero--highlight {
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
    filter: brightness(1.08);
  }
}

/* На всю ширину стеклянной карточки (353), не только content-area с padding */
.mobile-business .business-mobile-hero-visual {
  position: absolute;
  z-index: 2;
  /* 434 / 353 = 1.2294 */
  width: 122.94%;
  /* -31 / 353 = -0.0878 */
  left: -8.78%;
  top: calc(364px * var(--mobile-mq));
  height: auto;
  aspect-ratio: 434 / 408;
  pointer-events: none;
}

.mobile-business .business-mobile-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mobile-business .business-mobile-hero-visual > .umbrent-img-twin,
.mobile-business .business-mobile-hero-visual > .umbrent-img-wrap {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.mobile-business .business-cards-block {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding-top: 0;
  padding-left: var(--mobile-business-cards-pad-x);
  padding-right: var(--mobile-business-cards-pad-x);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: calc(734px * var(--mobile-mq));
  /* Прозрачный фон: виден общий figma-bg страницы */
  background-color: transparent !important;
  background-image: none !important;
}

.mobile-business .business-cards {
  display: grid;
  gap: calc(20px * var(--mobile-mq));
  margin-top: 0;
}

.mobile-business .business-cards-canvas {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-color: transparent !important;
  background-image: none !important;
}

.mobile-business .business-card {
  position: relative;
  display: block;
  min-height: calc(233.8798828125px * var(--mobile-mq));
  padding: 0;
  border-radius: calc(15px * var(--mobile-mq));
  background: #3d6dcd;
  overflow: hidden;
}

.mobile-business .business-card--reverse {
  min-height: calc(240.2373046875px * var(--mobile-mq));
}

.mobile-business .business-card--employee {
  min-height: calc(240.7003173828125px * var(--mobile-mq));
}

.mobile-business .business-card-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  min-width: 0;
}

.mobile-business .business-card-body h2 {
  position: absolute;
  top: calc(7.64px * var(--mobile-mq));
  left: calc(34px * var(--mobile-mq));
  right: calc(12px * var(--mobile-mq));
  width: auto;
  max-width: calc(275px * var(--mobile-mq));
  margin: 0;
  color: #fff;
  font-size: calc(16px * var(--mobile-mq));
  font-weight: 500;
  line-height: calc(24px * var(--mobile-mq));
  letter-spacing: var(--ls-none);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-business .business-card--station .business-card-body h2 {
  top: calc(14.22px * var(--mobile-mq));
  left: calc(24px * var(--mobile-mq));
  right: auto;
  width: calc(303.53564453125px * var(--mobile-mq));
  max-width: calc(303.53564453125px * var(--mobile-mq));
}

.mobile-business .business-card--employee .business-card-body h2 {
  top: calc(16.27px * var(--mobile-mq));
  left: calc(34px * var(--mobile-mq));
  right: auto;
  width: calc(275px * var(--mobile-mq));
  max-width: calc(275px * var(--mobile-mq));
}

.mobile-business .business-points {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-business .business-points li {
  position: absolute;
  padding-left: calc(26px * var(--mobile-mq));
  color: #fff;
  font-size: calc(12px * var(--mobile-mq));
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: var(--ls-none);
  white-space: normal;
  cursor: pointer;
  /* scale при :active — от центра иконки 20×20 (::before top: 2px) */
  transform-origin: calc(10px * var(--mobile-mq)) calc(12px * var(--mobile-mq));
}

/* Figma 1116:359/360/361: только ведущие слова жирные — bold через <strong>. */
.mobile-business .business-points li strong {
  font-weight: 700;
}

.mobile-business .business-points--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(2px * var(--mobile-mq));
  width: calc(20px * var(--mobile-mq));
  height: calc(20px * var(--mobile-mq));
  border-radius: calc(6px * var(--mobile-mq));
  background: center / calc(20px * var(--mobile-mq)) calc(20px * var(--mobile-mq)) no-repeat;
}

.mobile-business .business-points--partner {
  left: calc(18.1083984375px * var(--mobile-mq));
  top: calc(40.683349609375px * var(--mobile-mq));
  width: calc(129px * var(--mobile-mq));
  height: calc(137px * var(--mobile-mq));
}

.mobile-business .business-points--partner li {
  padding-left: calc(27.75px * var(--mobile-mq));
}

.mobile-business .business-points--partner li:nth-child(1) {
  top: 0;
  width: calc(100px * var(--mobile-mq));
}

.mobile-business .business-points--partner li:nth-child(1)::before {
  background-image: url("./images/business-point-icon-partner-1.svg");
}

.mobile-business .business-points--partner li:nth-child(2) {
  top: calc(41.29296875px * var(--mobile-mq));
  width: calc(89px * var(--mobile-mq));
}

.mobile-business .business-points--partner li:nth-child(2)::before {
  background-image: url("./images/business-point-icon-partner-2.svg");
}

.mobile-business .business-points--partner li:nth-child(3) {
  top: calc(88.9609375px * var(--mobile-mq));
  width: calc(92px * var(--mobile-mq));
}

.mobile-business .business-points--partner li:nth-child(3)::before {
  background-image: url("./images/business-point-icon-partner-3.svg");
}

.mobile-business .business-points--station {
  left: calc(177.3359375px * var(--mobile-mq));
  top: calc(49.21630859375px * var(--mobile-mq));
  width: calc(166px * var(--mobile-mq));
  height: calc(132px * var(--mobile-mq));
}

.mobile-business .business-points--station li {
  padding-left: calc(25.75px * var(--mobile-mq));
}

.mobile-business .business-points--station li:nth-child(1) {
  top: 0;
  width: calc(140.111328125px * var(--mobile-mq));
}

.mobile-business .business-points--station li:nth-child(1)::before {
  background-image: url("./images/business-point-icon-station-1.svg");
}

.mobile-business .business-points--station li:nth-child(2) {
  top: calc(36.916015625px * var(--mobile-mq));
  width: calc(108px * var(--mobile-mq));
}

.mobile-business .business-points--station li:nth-child(2)::before {
  background-image: url("./images/business-point-icon-station-2.svg");
}

.mobile-business .business-points--station li:nth-child(3) {
  top: calc(85.916015625px * var(--mobile-mq));
  width: calc(97px * var(--mobile-mq));
  line-height: 0.91;
}

.mobile-business .business-points--station li:nth-child(3)::before {
  background-image: url("./images/business-point-icon-station-3.svg");
}

.mobile-business .business-points--employee {
  left: calc(12.00341796875px * var(--mobile-mq));
  top: calc(46.27197265625px * var(--mobile-mq));
  width: calc(151px * var(--mobile-mq));
  height: calc(134px * var(--mobile-mq));
}

.mobile-business .business-points--employee li {
  padding-left: calc(25.86px * var(--mobile-mq));
}

.mobile-business .business-points--employee li:nth-child(1) {
  top: 0;
  width: calc(119px * var(--mobile-mq));
}

.mobile-business .business-points--employee li:nth-child(1)::before {
  background-image: url("./images/business-point-icon-employee-1.svg");
}

.mobile-business .business-points--employee li:nth-child(2) {
  top: calc(48.7880859375px * var(--mobile-mq));
  width: calc(118px * var(--mobile-mq));
}

.mobile-business .business-points--employee li:nth-child(2)::before {
  background-image: url("./images/business-point-icon-employee-2.svg");
}

.mobile-business .business-points--employee li:nth-child(3) {
  top: calc(97.7880859375px * var(--mobile-mq));
  width: calc(125px * var(--mobile-mq));
}

.mobile-business .business-points--employee li:nth-child(3)::before {
  background-image: url("./images/business-point-icon-employee-3.svg");
}

/* Пункты списков в карточках + «Технические характеристики»: hover / touch */
.mobile-business .business-points li,
.mobile-business .business-spec-list li {
  transition:
    transform calc(0.28s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1),
    filter calc(0.26s * var(--umbrent-motion-factor, 1.5)) ease,
    background-color calc(0.26s * var(--umbrent-motion-factor, 1.5)) ease,
    box-shadow calc(0.26s * var(--umbrent-motion-factor, 1.5)) ease;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-business .business-points--partner li:hover,
  .mobile-business .business-points--station li:hover,
  .mobile-business .business-points--employee li:hover {
    transform: translateX(calc(4px * var(--mobile-mq)));
    filter: brightness(1.14);
  }

  .mobile-business .business-spec-list li {
    border-radius: calc(8px * var(--mobile-mq));
  }

  .mobile-business .business-spec-list li:hover {
    transform: translateX(calc(4px * var(--mobile-mq)));
    filter: brightness(1.12);
    background-color: rgba(61, 109, 205, 0.09);
    box-shadow: 0 calc(2px * var(--mobile-mq)) calc(12px * var(--mobile-mq)) rgba(19, 44, 96, 0.07);
  }
}

@media (hover: none) {
  .mobile-business .business-points--partner li:active,
  .mobile-business .business-points--station li:active,
  .mobile-business .business-points--employee li:active {
    transform: translateX(calc(2px * var(--mobile-mq))) scale(0.99);
    filter: brightness(1.1);
  }

  .mobile-business .business-spec-list li:active {
    transform: translateX(calc(2px * var(--mobile-mq))) scale(0.99);
    filter: brightness(1.08);
    background-color: rgba(61, 109, 205, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-business .business-points li,
  .mobile-business .business-spec-list li {
    transition-duration: 0.01ms !important;
  }

  .mobile-business .business-points--partner li:hover,
  .mobile-business .business-points--station li:hover,
  .mobile-business .business-points--employee li:hover,
  .mobile-business .business-points--partner li:active,
  .mobile-business .business-points--station li:active,
  .mobile-business .business-points--employee li:active,
  .mobile-business .business-spec-list li:hover,
  .mobile-business .business-spec-list li:active {
    transform: none;
    filter: none;
    background-color: transparent;
    box-shadow: none;
  }
}

/* Кнопка в карточке — Figma Frame 208/209/210; открывает форму заявки */
.mobile-business .business-btn--card {
  position: absolute;
  width: calc(123px * var(--mobile-mq));
  height: calc(32px * var(--mobile-mq));
  border-radius: calc(7px * var(--mobile-mq));
  border: 0;
  background: #fff;
  color: #3d6dcd;
  font-size: calc(12px * var(--mobile-mq));
  font-weight: 500;
  line-height: calc(32px * var(--mobile-mq));
  text-align: center;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-business .business-card--partner .business-btn--card {
  left: calc(17.21px * var(--mobile-mq));
  top: calc(186.64px * var(--mobile-mq));
}

.mobile-business .business-card--station .business-btn--card {
  left: calc(175.77px * var(--mobile-mq));
  top: calc(189.51px * var(--mobile-mq));
}

.mobile-business .business-card--employee .business-btn--card {
  left: calc(11.11px * var(--mobile-mq));
  top: calc(189.68px * var(--mobile-mq));
}

.mobile-business .business-card-media {
  position: absolute;
  border-radius: calc(12px * var(--mobile-mq));
  overflow: hidden;
}

.mobile-business .business-card-media img {
  width: 100%;
  height: 100%;
  border-radius: calc(12px * var(--mobile-mq));
  object-fit: cover;
}

.mobile-business .business-card-media > .umbrent-img-twin,
.mobile-business .business-card-media > .umbrent-img-wrap {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.mobile-business .business-card-media > .umbrent-img-wrap > .umbrent-img-twin {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  vertical-align: top;
}

.mobile-business .business-card--partner .business-card-media {
  left: calc(168.5px * var(--mobile-mq));
  top: calc(42.94px * var(--mobile-mq));
  width: calc(157.82940673828125px * var(--mobile-mq));
  height: calc(162.4423828125px * var(--mobile-mq));
}

.mobile-business .business-card--station .business-card-media {
  left: calc(14.21px * var(--mobile-mq));
  top: calc(47.77px * var(--mobile-mq));
  width: calc(153.26124572753906px * var(--mobile-mq));
  height: calc(157.74069213867188px * var(--mobile-mq));
}

.mobile-business .business-card--employee .business-card-media {
  left: calc(168.82px * var(--mobile-mq));
  top: calc(47.85px * var(--mobile-mq));
  width: calc(157.83px * var(--mobile-mq));
  height: calc(157.83px * var(--mobile-mq));
}

.mobile-business .business-spec-block {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  margin-top: calc(20px * var(--mobile-mq));
  padding-right: var(--mobile-business-cards-pad-x);
  padding-bottom: calc(44px * var(--mobile-mq));
  padding-left: var(--mobile-business-cards-pad-x);
  background: transparent;
  box-shadow: var(--mobile-section-top-shadow);
}

.mobile-business .business-spec {
  margin-top: 0;
  padding-bottom: 0;
}

.mobile-business .business-spec-card {
  position: relative;
  width: 100%;
  min-height: calc(201.24468994140625px * var(--mobile-mq));
  border-radius: calc(15px * var(--mobile-mq));
  padding: 0;
  box-sizing: border-box;
  opacity: 0.9;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 82.212%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 15.865%, rgba(255, 255, 255, 1) 61.538%, rgba(255, 255, 255, 0) 93.75%);
  overflow: hidden;
}

.mobile-business .business-spec-card > h2 {
  position: absolute;
  left: calc(10.95654296875px * var(--mobile-mq));
  top: calc(16.5408935546875px * var(--mobile-mq));
  margin: 0;
  color: #3d6dcd;
  font-size: calc(16px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(14px * var(--mobile-mq));
  letter-spacing: var(--ls-none);
}

.mobile-business .business-spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #396ad5;
  font-size: calc(12px * var(--mobile-mq));
  line-height: calc(21px * var(--mobile-mq));
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

/* Figma 1106:2587 (Group 2085662548): y=41.8359375.
   В Figma у text-нод line-height=30px при box h=30 — глиф центрируется внутри 30-tall бокса.
   У нас lh=21, поэтому компенсируем offset (30-21)/2 ≈ 6px чтобы baseline совпал. */
.mobile-business .business-spec-content {
  position: absolute;
  left: calc(33px * var(--mobile-mq));
  top: calc(47.8359375px * var(--mobile-mq));
  width: calc(173px * var(--mobile-mq));
  max-width: calc(100% - calc(40px * var(--mobile-mq)));
  min-width: 0;
  overflow-x: hidden;
}

.mobile-business .business-spec-list li {
  position: relative;
  padding-left: 0;
  cursor: pointer;
  /* scale при :active — от центра иконки 13×13 (::before left/top в псевдоэлементе) */
  transform-origin: calc((-20.96435546875px + 6.5px) * var(--mobile-mq)) calc((4px + 6.5px) * var(--mobile-mq));
}

.mobile-business .business-spec-list li::before {
  content: "";
  position: absolute;
  left: calc(-20.96435546875px * var(--mobile-mq));
  top: calc(4px * var(--mobile-mq));
  width: calc(13px * var(--mobile-mq));
  height: calc(13px * var(--mobile-mq));
  background: center / contain no-repeat;
}

.mobile-business .business-spec-list li:nth-child(1)::before {
  background-image: url("./images/business-spec-icon-1.svg");
}

.mobile-business .business-spec-list li:nth-child(2)::before {
  background-image: url("./images/business-spec-icon-2.svg");
}

.mobile-business .business-spec-list li:nth-child(3)::before {
  background-image: url("./images/business-spec-icon-3.svg");
}

.mobile-business .business-spec-list li:nth-child(4)::before {
  background-image: url("./images/business-spec-icon-4.svg");
}

.mobile-business .business-spec-list li:nth-child(5)::before {
  background-image: url("./images/business-spec-icon-5.svg");
}

.mobile-business .business-spec-list li:nth-child(6)::before {
  background-image: url("./images/business-spec-icon-6.svg");
}

.mobile-business .business-spec-image {
  position: absolute;
  left: calc(215px * var(--mobile-mq));
  top: calc(53.8359375px * var(--mobile-mq));
  width: calc(112px * var(--mobile-mq));
  height: calc(110px * var(--mobile-mq));
  border-radius: calc(7px * var(--mobile-mq));
  overflow: hidden;
}

.mobile-business .business-spec-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(7px * var(--mobile-mq));
  object-fit: cover;
  margin-top: 0;
}

.mobile-business .business-spec-image > .umbrent-img-twin,
.mobile-business .business-spec-image > .umbrent-img-wrap {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: calc(7px * var(--mobile-mq));
}

.mobile-business .footer {
  position: relative;
  z-index: 4;
  margin-top: 0;
}

.mobile-business .request-modal {
  position: fixed;
  inset: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity calc(0.32s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s linear calc(0.32s * var(--umbrent-motion-factor, 1.5));
  /*
    `safe center` = центрируем карточку, но при переполнении контейнера контент
    не уезжает за верхнюю границу (CSS Box Alignment, fallback к flex-start).
    В паре с overflow-y: auto и padding-block — скролл, когда карточка min-height: 512
    не помещается (очень низкий vh, порядка <~540 при max-height 95vh).

    Размеры формы — в px эталона 375. Масштаб узкого вьюпорта — через --mobile-mq (см. common.css).
    Отдельный zoom на форме не задавать — получится двойной масштаб.
  */
  align-items: safe center;
  justify-content: center;
  overflow-x: clip;
  overflow-y: auto;
  padding-top: max(calc(14px * var(--mobile-mq, 1)), env(safe-area-inset-top, 0px));
  padding-bottom: max(calc(14px * var(--mobile-mq, 1)), env(safe-area-inset-bottom, 0px));
  padding-left: max(calc(11px * var(--mobile-mq, 1)), env(safe-area-inset-left, 0px));
  padding-right: max(calc(11px * var(--mobile-mq, 1)), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  z-index: 120;
}

.mobile-business .request-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity calc(0.32s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s;
}

/*
  Fixed к viewport, не к скроллящемуся .request-modal: при overflow-y на контейнере
  absolute + inset:0 даёт только высоту вьюпорта — при прокрутке карточки снизу/сверху
  «просвечивал» фон без затемнения. Fixed оставляет полупрозрачный слой на весь экран.
*/
.mobile-business .request-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mobile-business .request-modal-form {
  position: relative;
  isolation: isolate;
  /* flex-item: иначе min-width:auto не даёт сжаться уже контента → горизонтальный вылет на узких экранах */
  min-width: 0;
  box-sizing: border-box;
  width: calc(342.64px * var(--mobile-mq));
  max-width: 100%;
  height: calc(572px * var(--mobile-mq));
  border-radius: calc(17px * var(--mobile-mq));
  background: #bcd1ff;
  box-shadow: 0 18px 40px rgba(46, 88, 174, 0.22);
  z-index: 1;
  /*
    На коротких вьюпортах max-height: 95vh поджимает карточку.
    submit: top 415, height 47 → низ на y=462. Под кнопкой по макету/запросу — 50px воздуха.

    min-height = 415 + 47 + 50 = 512: карточка не ниже этого, ниже кнопки всегда ≥50px.
  */
  min-height: calc(512px * var(--mobile-mq));
  max-height: 95vh;
  overflow-x: clip;
  overflow-y: auto;
  transform: scale(0.95) translateY(calc(10px * var(--mobile-mq)));
  transition: transform calc(0.3s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-inline: auto;
}

.mobile-business .request-form {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(50px * var(--mobile-mq)) 0
    calc(48px * var(--mobile-mq) + var(--interactive-press-translate-y));
  box-sizing: border-box;
}

.mobile-business .request-fields {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  min-width: 0;
  width: calc(280px * var(--mobile-mq));
  max-width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(22px * var(--mobile-mq));
}

.mobile-business .request-input {
  width: 100%;
  height: calc(47px * var(--mobile-mq));
  border: 0;
  border-radius: calc(10px * var(--mobile-mq));
  padding: 0 calc(9px * var(--mobile-mq));
  box-sizing: border-box;
  background: #fff;
  color: rgba(30, 43, 72, 0.75);
  font-family: "Poppins", sans-serif;
  font-size: calc(10px * var(--mobile-mq));
  font-weight: 400;
  line-height: 1;
  font-synthesis: none;
  outline: calc(2px * var(--mobile-mq)) solid transparent;
  outline-offset: calc(-2px * var(--mobile-mq));
  transition:
    outline-color calc(0.28s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1),
    filter calc(0.22s * var(--umbrent-motion-factor, 1.5)) ease,
    box-shadow calc(0.22s * var(--umbrent-motion-factor, 1.5)) ease;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-business .request-input:not(.request-input--phone):hover:not(:focus):not(:disabled) {
    filter: brightness(1.02);
  }

  .mobile-business .request-input--phone:hover:not(:focus-within) {
    filter: brightness(1.02);
  }
}

.mobile-business .request-input::placeholder {
  color: rgba(30, 43, 72, 0.6);
  opacity: 1;
}

.mobile-business .request-input--phone {
  display: flex;
  align-items: stretch;
  gap: calc(10px * var(--mobile-mq));
  padding: 0 calc(8.68px * var(--mobile-mq));
  overflow: hidden;
  outline: calc(2px * var(--mobile-mq)) solid transparent;
  outline-offset: calc(-2px * var(--mobile-mq));
  transition:
    outline-color calc(0.28s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1),
    filter calc(0.22s * var(--umbrent-motion-factor, 1.5)) ease,
    box-shadow calc(0.22s * var(--umbrent-motion-factor, 1.5)) ease;
}

.mobile-business .request-phone-prefix,
.mobile-business .request-phone-national {
  display: flex;
  align-items: center;
}

.mobile-business .request-phone-prefix {
  flex-shrink: 0;
}

.mobile-business .request-phone-national {
  min-width: 0;
  gap: calc(2.5px * var(--mobile-mq));
  flex: 1;
}

/* Figma 1136:906–909 — как mobile/request.css (px эталона 375, масштаб через --mobile-mq / --rq) */
.mobile-business .request-country-picker {
  position: relative;
  width: fit-content;
  flex: 0 0 auto;
  height: calc(20.8px * var(--mobile-mq));
}

.mobile-business .request-country-picker-face {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: calc((24px - 20.476px) * var(--mobile-mq));
  height: 100%;
  pointer-events: none;
}

.mobile-business .request-country-flag-img {
  display: block;
  width: calc(20.476px * var(--mobile-mq));
  height: calc(14.788px * var(--mobile-mq));
  object-fit: cover;
  border-radius: calc(1px * var(--mobile-mq));
  box-shadow: 0 0 calc(5px * var(--mobile-mq)) rgba(0, 0, 0, 0.3);
}

.mobile-business .request-country-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(9.506px * var(--mobile-mq));
  height: calc(6.338px * var(--mobile-mq));
  color: #9a9a9a;
}

.mobile-business .request-country-chevron svg {
  display: block;
  width: calc(9.506px * var(--mobile-mq));
  height: calc(6.338px * var(--mobile-mq));
  transition: transform calc(0.22s * var(--umbrent-motion-factor, 1.5)) ease;
  transform: rotate(0deg);
  transform-origin: 50% 45%;
}

.mobile-business .request-country-picker.request-country-picker--open .request-country-chevron svg {
  transform: rotate(180deg);
}

.mobile-business .request-country-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
}

.mobile-business .request-phone-code,
.mobile-business .request-phone-number {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(30, 43, 72, 0.75);
  font-family: "Poppins", sans-serif;
  font-size: calc(10px * var(--mobile-mq));
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
}

.mobile-business .request-phone-code {
  color: rgba(30, 43, 72, 0.75);
  white-space: nowrap;
  font-weight: 600;
  line-height: calc(47px * var(--mobile-mq));
}

.mobile-business .request-phone-number {
  flex: 1;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  font-weight: 400;
  line-height: calc(47px * var(--mobile-mq));
}

.mobile-business .request-input:focus,
.mobile-business .request-input--phone:focus-within {
  outline-color: rgba(73, 116, 215, 0.45);
}

.mobile-business .request-phone-number:focus {
  outline: none;
}

.mobile-business .request-phone-number::placeholder {
  color: rgba(30, 43, 72, 0.75);
  opacity: 1;
}

.mobile-business .request-consent {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: calc(280px * var(--mobile-mq));
  max-width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: calc(4px * var(--mobile-mq));
  margin: calc(24px * var(--mobile-mq)) 0 calc(30px * var(--mobile-mq));
  flex: 0 0 auto;
  color: #fff;
  cursor: pointer;
}

.mobile-business .request-consent input {
  box-sizing: border-box;
  width: calc(21.667px * var(--mobile-mq));
  height: calc(21.667px * var(--mobile-mq));
  margin: 0;
  border-radius: calc(5px * var(--mobile-mq));
  border: 1px solid rgba(255, 255, 255, 0.6);
  appearance: none;
  background: transparent;
  flex: 0 0 calc(21.667px * var(--mobile-mq));
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition:
    border-color calc(0.25s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1),
    background-color calc(0.25s * var(--umbrent-motion-factor, 1.5)) ease,
    filter calc(0.22s * var(--umbrent-motion-factor, 1.5)) ease,
    transform var(--interactive-duration) var(--interactive-ease),
    box-shadow calc(0.22s * var(--umbrent-motion-factor, 1.5)) ease;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-business .request-consent:hover input {
    filter: brightness(1.06);
    border-color: rgba(255, 255, 255, 0.85);
  }
}

.mobile-business .request-consent input:active {
  transform: scale(0.94);
}

.mobile-business .request-consent input:checked {
  border-color: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3L13 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45%;
}

.mobile-business .request-consent input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.mobile-business .request-consent-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
  padding: 0;
  font-size: calc(8px * var(--mobile-mq));
  font-weight: 400;
  font-synthesis: none;
}

/* Как request-modal.html: пустая строка между lead и policy */
.mobile-business .request-consent-text br {
  display: block;
  flex: 0 0 auto;
  height: calc(8px * 1.003 * var(--mobile-mq));
  margin: 0;
  line-height: 0;
  overflow: hidden;
}

.mobile-business .request-consent-lead {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-business .request-consent-line {
  display: block;
  margin: 0;
  line-height: 1.003;
  font-weight: 400;
  font-synthesis: none;
}

.mobile-business .request-consent-policy {
  display: block;
  margin: 0;
  line-height: normal;
  font-weight: 400;
  font-synthesis: none;
}

.mobile-business .request-submit {
  --request-submit-press-duration: calc(0.13s * var(--umbrent-motion-factor, 1.5));
  --request-submit-release-duration: calc(0.28s * var(--umbrent-motion-factor, 1.5));
  --request-submit-press-ease: cubic-bezier(0.4, 0, 0.72, 1);
  --request-submit-release-ease: cubic-bezier(0.33, 1, 0.68, 1);
  position: relative;
  left: auto;
  top: auto;
  transform: translateY(0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(281px * var(--mobile-mq));
  max-width: 100%;
  height: calc(47px * var(--mobile-mq));
  flex: 0 0 auto;
  border: 0;
  border-radius: calc(10px * var(--mobile-mq));
  background: #2e58ae;
  color: #fff;
  text-transform: lowercase;
  font-family: "Poppins", sans-serif;
  font-size: calc(14px * var(--mobile-mq));
  font-weight: 400;
  line-height: 1;
  font-synthesis: none;
  cursor: pointer;
  box-shadow: none;
  text-align: center;
  transition:
    transform var(--request-submit-release-duration) var(--request-submit-release-ease),
    filter var(--request-submit-release-duration) ease,
    box-shadow var(--request-submit-release-duration) ease,
    color calc(0.28s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1);
}

.mobile-business .request-submit__label {
  display: block;
  width: 100%;
  max-height: 100%;
  padding: 0 calc(8px * var(--mobile-mq));
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  transition: opacity calc(0.22s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1);
}

.mobile-business .request-submit.request-submit--label-dim .request-submit__label {
  opacity: 0;
}

.mobile-business .request-modal .request-consent-link {
  text-decoration-thickness: 1px;
}

.mobile-business .request-modal .request-consent-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
  border-radius: 2px;
}


.mobile-business .request-modal.is-open .request-modal-form {
  transform: scale(1) translateY(0);
}

.mobile-business .request-submit:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 6px 24px rgba(46, 88, 174, 0.45);
}

.mobile-business .request-submit:active:not(:disabled) {
  transform: translateY(var(--interactive-press-translate-y));
  box-shadow: 0 2px 10px rgba(19, 44, 96, 0.22);
  filter: brightness(0.97);
  transition:
    transform var(--request-submit-press-duration) var(--request-submit-press-ease),
    filter var(--request-submit-press-duration) ease,
    box-shadow var(--request-submit-press-duration) ease,
    color calc(0.28s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.33, 1, 0.68, 1);
}

.mobile-business .request-submit.request-submit--validation-error {
  color: #fff;
  text-transform: none;
  white-space: normal;
}

.mobile-business .request-submit:disabled {
  cursor: not-allowed;
  transform: translateY(0);
  opacity: 0.72;
  filter: grayscale(0.06);
  pointer-events: none;
}

/* Те же оверлеи формы заявки, что на desktop/mobile-request: позиционирование в модалке + вход/выход */
.mobile-business .request-modal-form .request-form-busy,
.mobile-business .request-modal-form .request-form-result {
  position: absolute;
  inset: 0;
  z-index: 8;
  box-sizing: border-box;
  border-radius: inherit;
}

.mobile-business .request-modal-form .request-form-busy:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: calc(12px * var(--mobile-mq));
  background: rgba(25, 40, 72, 0.45);
  backdrop-filter: blur(calc(6px * var(--mobile-mq)));
}

.mobile-business .request-modal-form .request-form-busy__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-business .request-modal-form .request-form-busy__spinner {
  box-sizing: border-box;
  width: calc(32px * var(--mobile-mq));
  height: calc(32px * var(--mobile-mq));
  border-radius: 50%;
  border: calc(3px * var(--mobile-mq)) solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: mobile-business-modal-busy-spin calc(0.72s * var(--umbrent-motion-factor, 1.5)) linear infinite;
}

.mobile-business .request-modal-form .request-form-result:not([hidden]) {
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14px * var(--mobile-mq));
  pointer-events: none;
}

.mobile-business .request-modal-form .request-form-result__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 40, 72, 0.36);
  backdrop-filter: blur(calc(3px * var(--mobile-mq)));
  pointer-events: auto;
  cursor: pointer;
}

.mobile-business .request-modal-form .request-form-result__panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: calc(260px * var(--mobile-mq));
  width: 100%;
  margin: 0;
  padding: calc(16px * var(--mobile-mq)) calc(18px * var(--mobile-mq));
  border-radius: calc(12px * var(--mobile-mq));
  background: #fff;
  color: rgba(30, 43, 72, 0.92);
  font-family: "Poppins", sans-serif;
  font-size: calc(11px * var(--mobile-mq));
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 calc(10px * var(--mobile-mq)) calc(28px * var(--mobile-mq)) rgba(25, 56, 120, 0.2);
  pointer-events: auto;
}

.mobile-business .request-modal-form .request-form-result--error .request-form-result__panel {
  background: #fff5f5;
  color: #6b1c1c;
}

.mobile-business .request-modal-form .request-form-result__message {
  margin: 0;
}

.mobile-business .request-modal-form .request-form-result__extras {
  margin: calc(10px * var(--mobile-mq)) 0 0;
  padding: calc(8px * var(--mobile-mq)) 0 0;
  border-top: 1px solid rgba(46, 88, 174, 0.14);
}

.mobile-business .request-modal-form .request-form-result--error .request-form-result__extras {
  border-top-color: rgba(120, 30, 30, 0.18);
}

.mobile-business .request-modal-form .request-form-result__telegram-line {
  margin: 0;
  font-size: calc(10px * var(--mobile-mq));
  font-weight: 500;
  line-height: 1.45;
  color: rgba(30, 43, 72, 0.82);
}

.mobile-business .request-modal-form .request-form-result--error .request-form-result__telegram-line {
  color: rgba(90, 28, 28, 0.92);
}

.mobile-business .request-modal-form .request-form-result__telegram-link {
  color: #3d6dcd;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mobile-business .request-modal-form .request-form-result--error .request-form-result__telegram-link {
  color: #8b2525;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes mobile-business-modal-busy-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes mobile-business-modal-busy-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes mobile-business-modal-busy-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes mobile-business-modal-result-backdrop-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes mobile-business-modal-result-backdrop-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes mobile-business-modal-result-panel-in {
    from {
      opacity: 0;
      transform: scale(0.94) translateY(calc(6px * var(--mobile-mq)));
    }

    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes mobile-business-modal-result-panel-out {
    from {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    to {
      opacity: 0;
      transform: scale(0.96) translateY(calc(5px * var(--mobile-mq)));
    }
  }

  .mobile-business .request-modal-form .request-form-busy:not([hidden]):not(.request-form-busy--closing) {
    animation: mobile-business-modal-busy-in calc(0.28s * var(--umbrent-motion-factor, 1.5)) ease both;
  }

  .mobile-business .request-modal-form .request-form-busy.request-form-busy--closing:not([hidden]) {
    animation: mobile-business-modal-busy-out calc(0.28s * var(--umbrent-motion-factor, 1.5)) ease forwards;
    pointer-events: none;
  }

  .mobile-business
    .request-modal-form
    .request-form-result:not([hidden]):not(.request-form-result--closing)
    .request-form-result__backdrop {
    animation: mobile-business-modal-result-backdrop-in calc(0.3s * var(--umbrent-motion-factor, 1.5)) ease both;
  }

  .mobile-business
    .request-modal-form
    .request-form-result:not([hidden]):not(.request-form-result--closing)
    .request-form-result__panel {
    animation: mobile-business-modal-result-panel-in calc(0.38s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .mobile-business
    .request-modal-form
    .request-form-result.request-form-result--closing:not([hidden])
    .request-form-result__backdrop {
    animation: mobile-business-modal-result-backdrop-out calc(0.28s * var(--umbrent-motion-factor, 1.5)) ease forwards;
  }

  .mobile-business
    .request-modal-form
    .request-form-result.request-form-result--closing:not([hidden])
    .request-form-result__panel {
    animation: mobile-business-modal-result-panel-out calc(0.32s * var(--umbrent-motion-factor, 1.5)) cubic-bezier(0.4, 0, 1, 1) forwards;
  }
}

.mobile-business .business-btn:hover {
  filter: brightness(1.06);
  box-shadow: var(--btn-primary-hover-shadow);
}
.mobile-business .business-btn:active {
  transform: translateY(var(--interactive-press-translate-y));
  box-shadow: var(--btn-primary-active-shadow);
  filter: brightness(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-business .request-modal,
  .mobile-business .request-modal.is-open {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .mobile-business .request-modal-form {
    transition-duration: 0.01ms !important;
  }

  .mobile-business .request-modal-form .request-form-busy__spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.85);
    opacity: 0.9;
  }

  .mobile-business .request-modal-form .request-form-busy:not([hidden]),
  .mobile-business .request-modal-form .request-form-busy.request-form-busy--closing:not([hidden]),
  .mobile-business .request-modal-form .request-form-result:not([hidden]) .request-form-result__backdrop,
  .mobile-business .request-modal-form .request-form-result:not([hidden]) .request-form-result__panel,
  .mobile-business
    .request-modal-form
    .request-form-result.request-form-result--closing:not([hidden])
    .request-form-result__backdrop,
  .mobile-business
    .request-modal-form
    .request-form-result.request-form-result--closing:not([hidden])
    .request-form-result__panel {
    animation: none !important;
  }

  .mobile-business .request-input,
  .mobile-business .request-input--phone,
  .mobile-business .request-consent input,
  .mobile-business .request-submit,
  .mobile-business .request-submit__label {
    transition-duration: 0.01ms !important;
  }

  .mobile-business .request-consent input:active {
    transform: none;
  }
}