/* ==========================================================================
   Страница «О компании» (/about/)
   Верстка по макету Figma «Сайт ClientCore → О нас» (node 743:780, 1600×5586).
   Контентная колонка макета — 1400px (совпадает с .wrap), поля по 100px.
   Все размеры и отступы ниже взяты из макета как есть.
   ========================================================================== */

.ab {
  --ab-grad: linear-gradient(to left, #F29333 20.155%, #F9B440);
  --ab-radius: 12px;
  --ab-gap-section: 180px;
  /* сквозной ритм между секциями в макете */
}

/* Оранжевый градиент по тексту — в макете им набраны акценты в заголовках
   и проценты в блоке «Почему выбирают». */
.ab-grad {
  background: var(--ab-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Заголовок уровня секции: 46px / 1.15, Medium. */
.ab-h2 {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.15;
  color: #000;
  margin: 0;
}

.ab-h2--center {
  text-align: center;
}

.ab-ico36 {
  width: 36px;
  height: 36px;
  flex: none;
}

.ab-ico24 {
  width: 24px;
  height: 24px;
  flex: none;
}

/* Маркированные списки карточек: иконка-стрелка 16px + текст Inter 16/1.45.
   pt: 4px у иконки — так она встает по центру первой строки, как в макете. */
.ab-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ab-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ab-bullets li img {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 4px;
}

.ab-bullets li span {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #000;
}

.ab-bullets--light {
  gap: 6px;
}

.ab-bullets--light li span {
  color: #fff;
}

/* Кнопки страницы */
.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--ab-radius);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.ab-btn--dark {
  background: #000;
  color: #fff;
  padding: 16px 32px;
}

.ab-btn--dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}

.ab-btn--ghost {
  border: 1px solid #fff;
  color: #fff;
  min-width: 254px;
  padding: 16px 38px;
}

.ab-btn--ghost:hover {
  background: #fff;
  color: #000;
}

/* ==================== HERO ==================== */

.ab-hero {
  padding-top: 67px;
  /* от разделительной линии шапки до заголовка */
}

.ab-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 96px;
}

.ab-hero__col {
  display: flex;
  flex-direction: column;
  gap: 61px;
  width: 725px;
  flex: none;
}

.ab-hero__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ab-hero__title {
  font-size: 54px;
  font-weight: 600;
  line-height: 1.05;
  color: #000;
  margin: 0;
}

.ab-hero__sub {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
}

/* Плитки-факты: две строки по 700px, ширины карточек — из макета. */
.ab-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 700px;
}

.ab-fact {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #fff;
  border-radius: var(--ab-radius);
  padding: 24px;
  height: 131px;
  overflow: hidden;
}

.ab-fact span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
}

.ab-fact--a {
  width: 372px;
}

.ab-fact--b {
  width: 312px;
}

.ab-fact--c {
  width: 283px;
}

.ab-fact--d {
  width: 401px;
}

/* Иллюстрация: кадрируется контейнером 568×606, как во фрейме макета. */
.ab-hero__img {
  position: relative;
  width: 568px;
  height: 606px;
  flex: none;
  margin-top: -4px;
  margin-right: 11px;
  overflow: hidden;
}

.ab-hero__img img {
  position: absolute;
  left: -26.4%;
  top: -13.05%;
  width: 159.78%;
  height: 120.63%;
  max-width: none;
}

/* ==================== ОСНОВАТЕЛИ ==================== */

.ab-founders {
  padding-top: var(--ab-gap-section);
}

.ab-founders__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 80px;
}

.ab-fcard {
  position: relative;
  display: flex;
  gap: 24px;
  background: #000;
  border-radius: var(--ab-radius);
  padding: 30px 24px;
  overflow: hidden;
  isolation: isolate;
}

/* Подложка карточки: размытое оранжевое пятно + текстура в multiply.
   В макете слой подложки — 688×398 (выше самой карточки, 688×326),
   поэтому проценты ниже считаются от 398, а не от высоты карточки. */
/* Без z-index — слой не должен создавать свой контекст наложения, иначе
   текстура в multiply не увидит черный фон карточки и начнет его высветлять. */
.ab-fcard__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 122.09%;
}

.ab-fcard__glow,
.ab-fcard__tex {
  position: absolute;
  display: block;
}

.ab-fcard__glow {
  left: -68.49%;
  top: -67.34%;
  width: 146.13%;
  height: 259.56%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-fcard__glow img {
  width: 920.6px;
  height: 758.6px;
  max-width: none;
  flex: none;
  transform: rotate(51.93deg);
}

.ab-fcard__tex {
  left: -13.66%;
  top: 0;
  width: 126.29%;
  height: 123.12%;
  mix-blend-mode: multiply;
  transform: scaleX(-1);
}

.ab-fcard__tex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .25;
}

.ab-fcard__photo {
  position: relative;
  z-index: 1;
  width: 180px;
  height: 180px;
  flex: none;
  border-radius: 11.967px;
  overflow: hidden;
}

.ab-fcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-fcard__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.ab-fcard__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ab-fcard__name {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.ab-fcard__role {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
  opacity: .5;
}

/* Цифры: три карточки 456px с шагом 16px. */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.ab-stat {
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: #fff;
  border-radius: var(--ab-radius);
  padding: 24px;
  overflow: hidden;
}

.ab-stat__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ab-stat__num {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.35;
  color: #000;
}

.ab-stat__cap {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
}

/* ==================== БАННЕР MINDBOX ==================== */

.ab-mbwrap {
  padding-top: var(--ab-gap-section);
}

/* Пропорция 1400×496 из макета — баннер тянется вместе с колонкой. */
.ab-mb {
  position: relative;
  aspect-ratio: 1400 / 496;
  background: #000;
  border-radius: var(--ab-radius);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}

.ab-mb__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ab-mb__tex {
  position: absolute;
  left: 0;
  top: -10.28%;
  width: 105%;
  height: 166.73%;
  transform: scaleX(-1);
}

.ab-mb__tex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-mb__grad {
  position: absolute;
  left: -1.29%;
  top: -6.45%;
  width: 106.86%;
  height: 166.33%;
  background: var(--ab-grad);
  mix-blend-mode: color;
}

.ab-mb__blob {
  position: absolute;
  left: 27.43%;
  top: -28.23%;
  width: 102.36%;
  height: 208.87%;
  z-index: 1;
}

.ab-mb__blob img {
  position: absolute;
  left: -20.94%;
  top: -28.96%;
  width: 141.88%;
  height: 157.92%;
  max-width: none;
}

.ab-mb__logo,
.ab-mb__note,
.ab-mb__card {
  position: absolute;
  z-index: 2;
}

.ab-mb__logo {
  left: 4.43cqw;
  top: 4.43cqw;
  font-size: 3.29cqw;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
}

.ab-mb__note {
  left: 4.43cqw;
  top: 27cqw;
  width: 38cqw;
  font-size: 1.71cqw;
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
}

/* Стеклянные плитки поверх баннера. */
.ab-mb__card {
  border-radius: var(--ab-radius);
  background: rgba(0, 0, 0, .03);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(9.7px);
  -webkit-backdrop-filter: blur(9.7px);
  overflow: hidden;
}

.ab-mb__card img {
  position: absolute;
  left: 1.64cqw;
  top: 1.64cqw;
  width: 1.71cqw;
  height: 1.71cqw;
}

.ab-mb__card p {
  position: absolute;
  left: 1.64cqw;
  font-size: 1.14cqw;
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
}

.ab-mb__card a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ab-mb__card a:hover {
  color: var(--yellow);
}

.ab-mb__card--a {
  left: 42.86cqw;
  top: 4.43cqw;
  width: 25.79cqw;
  height: 10.57cqw;
}

.ab-mb__card--b {
  left: 69.79cqw;
  top: 4.43cqw;
  width: 25.79cqw;
  height: 10.57cqw;
}

.ab-mb__card--c {
  left: 42.86cqw;
  top: 16.14cqw;
  width: 52.57cqw;
  height: 14.86cqw;
}

.ab-mb__card--a p,
.ab-mb__card--b p {
  top: 5.64cqw;
}

.ab-mb__card--c p {
  top: 9.93cqw;
}

/* ==================== КАРЬЕРА ==================== */

.ab-career {
  padding-top: var(--ab-gap-section);
}

.ab-career__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 69px;
}

.ab-career__row--2 {
  margin-top: 45px;
}

.ab-ccard {
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: #fff;
  border-radius: var(--ab-radius);
  padding: 24px;
  overflow: hidden;
}

.ab-ccard__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ab-ccard__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  color: #000;
  margin: 0;
}

/* ==================== ПОЧЕМУ ВЫБИРАЮТ ==================== */

.ab-why {
  padding-top: 201px;
}

.ab-why__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.ab-why__sub {
  margin-top: 30px;
  max-width: 647px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
}

/* Аватары команды: круги 74px с нахлестом 16px, правый поверх левого.
   Размер и нахлест — переменные: на узких экранах ряд ужимается, а не
   выталкивает страницу в горизонтальный скролл. */
.ab-team {
  --av: 74px;
  --ov: 16px;
  display: flex;
  align-items: center;
  margin-top: 64px;
}

.ab-team img,
.ab-team__more {
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.ab-team> :not(:first-child) {
  margin-left: calc(var(--ov) * -1);
}

.ab-team>* {
  position: relative;
}

.ab-team>:nth-child(1) {
  z-index: 1;
}

.ab-team>:nth-child(2) {
  z-index: 2;
}

.ab-team>:nth-child(3) {
  z-index: 3;
}

.ab-team>:nth-child(4) {
  z-index: 4;
}

.ab-team>:nth-child(5) {
  z-index: 5;
}

.ab-team>:nth-child(6) {
  z-index: 6;
}

.ab-team>:nth-child(7) {
  z-index: 7;
}

.ab-team>:nth-child(8) {
  z-index: 8;
}

.ab-team__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 25.6px;
  font-weight: 600;
  line-height: 1.15;
  color: #000;
}

.ab-why__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ab-why__line {
  display: flex;
  gap: 24px;
}

.ab-wcard {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 172px;
  background: #fff;
  border-radius: var(--ab-radius);
  padding: 24px;
  overflow: hidden;
}

/* Ширины первой строки заданы макетом: 439 и 237 при сумме 700. */
.ab-wcard--w439 {
  flex: 439 1 0;
}

.ab-wcard--w237 {
  flex: 237 1 0;
}

/* Ширины текстовых блоков внутри плиток заданы макетом — от них зависят
   переносы строк. */
.ab-wcard__txt {
  max-width: 281px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
}

.ab-wcard--w439 .ab-wcard__txt {
  max-width: 235px;
}

.ab-wcard--w237 .ab-wcard__txt {
  max-width: 190px;
}

.ab-wcard__num {
  position: absolute;
  left: 24px;
  top: 107px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.15;
}

/* ==================== ЧЕК-ЛИСТ ==================== */

.ab-quiz {
  position: relative;
  padding-top: 192px;
  /* clip только по горизонтали: свечение должно уходить вверх, за границу
     секции, как в макете. */
  overflow-x: clip;
}

/* Размытое оранжевое пятно под заголовком. Позиция — от макета:
   пятно 1130×544 начинается на 65px ниже верха заголовка. */
.ab-quiz__blob {
  position: absolute;
  left: 50%;
  top: 257px;
  width: min(1130px, 80.7%);
  height: 544px;
  transform: translateX(-50%);
  pointer-events: none;
}

.ab-quiz__blob img {
  position: absolute;
  left: -26.55%;
  top: -55.15%;
  width: 153.1%;
  height: 210.3%;
  max-width: none;
}

.ab-quiz__inner {
  position: relative;
  z-index: 1;
}

.ab-quiz__title {
  font-size: 82px;
  font-weight: 300;
  line-height: 1.15;
  text-align: center;
  margin: 0;
  filter: blur(2px);
  background: linear-gradient(to bottom, #fff 22.989%, rgba(255, 255, 255, 0) 107.71%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Чипы: три центрированных ряда с шагом 32px (позиции из макета). */
.ab-chips {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 54px;
}

.ab-chips__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.ab-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--ab-radius);
  background: rgba(255, 255, 255, .73);
  border: 1px solid rgba(255, 255, 255, .6);
  backdrop-filter: blur(14.45px);
  -webkit-backdrop-filter: blur(14.45px);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.ab-quiz .ab-btn--dark {
  display: flex;
  width: max-content;
  margin: 74px auto 0;
}

/* ==================== CTA ==================== */

.ab-cta {
  position: relative;
  margin-top: 180px;
  height: 403px;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ab-cta__tex {
  position: absolute;
  left: -21.13%;
  top: -116.63%;
  width: 131.88%;
  height: 294.54%;
  transform: scaleY(-1);
}

.ab-cta__tex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-cta__grad {
  position: absolute;
  left: -.88%;
  top: 0;
  width: 104.75%;
  height: 310.42%;
  background: var(--ab-grad);
  mix-blend-mode: color;
}

.ab-cta__blob {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.ab-cta__blob--1 {
  left: 20.19%;
  top: -31.51%;
  width: 52.13%;
  height: 163.28%;
}

.ab-cta__blob--1 img {
  position: absolute;
  left: -35.97%;
  top: -45.59%;
  width: 171.94%;
  height: 191.18%;
  max-width: none;
}

.ab-cta__blob--2 {
  left: 30.19%;
  top: 122.83%;
  width: 80.63%;
  height: 161.04%;
}

.ab-cta__blob--2 img {
  position: absolute;
  left: -23.26%;
  top: -46.22%;
  width: 146.52%;
  height: 192.44%;
  max-width: none;
}

.ab-cta__inner {
  position: relative;
  z-index: 2;
  width: 800px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}

.ab-cta__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  width: 100%;
}

.ab-cta__title {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.ab-cta__sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
}

.ab-cta__btns {
  display: flex;
  align-items: center;
  gap: 29px;
}

/* ==================== ПОДВАЛ ==================== */

.ab-footer {
  padding: 180px 0 107px;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

/* Ниже 1500px контентная колонка сужается — фиксированные ширины из макета
   становятся резиновыми. */
@media (max-width: 1499px) {
  .ab-hero__row {
    gap: 48px;
  }

  .ab-hero__col {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .ab-facts {
    width: 100%;
  }

  .ab-fact {
    flex: 1 1 260px;
    width: auto;
    height: auto;
    min-height: 131px;
  }

  .ab-hero__img {
    width: 42%;
    max-width: 568px;
    height: auto;
    aspect-ratio: 568 / 606;
    margin-right: 0;
  }

  .ab-hero__title {
    font-size: clamp(36px, 3.8vw, 54px);
  }

  .ab-h2,
  .ab-cta__title {
    font-size: clamp(32px, 3.2vw, 46px);
  }

  .ab-quiz__title {
    font-size: clamp(46px, 5.8vw, 82px);
  }

  .ab-wcard--w439,
  .ab-wcard--w237 {
    flex: 1 1 0;
  }
}

@media (max-width: 1180px) {
  .ab-career__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-career__row--2 {
    margin-top: 24px;
  }

  .ab-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-why__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .ab-why__cards {
    width: 100%;
  }
}

@media (max-width: 960px) {
  .ab {
    --ab-gap-section: 110px;
  }

  .ab-hero {
    padding-top: 48px;
  }

  .ab-hero__row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
  }

  .ab-hero__img {
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .ab-hero__col {
    gap: 40px;
  }

  .ab-founders__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 48px;
  }

  /* Вне пропорций макета SVG-свечение ложится по-разному в зависимости от
     высоты карточки — ниже breakpoint'а рисуем его CSS-градиентом, чтобы обе
     карточки выглядели одинаково. */
  .ab-fcard__glow {
    display: none;
  }

  .ab-fcard {
    background: #000 radial-gradient(115% 85% at 0% 62%, rgba(244, 176, 34, .62), rgba(244, 176, 34, 0) 62%);
  }

  .ab-career__row {
    margin-top: 40px;
  }

  .ab-why {
    padding-top: 110px;
  }

  .ab-quiz {
    padding-top: 110px;
  }

  .ab-quiz .ab-btn--dark {
    margin-top: 48px;
  }

  .ab-cta {
    margin-top: 110px;
  }

  .ab-footer {
    padding: 110px 0 60px;
  }

  /* Баннер Mindbox: на узких экранах абсолютная раскладка макета
     превращается в поток. */
  .ab-mb {
    aspect-ratio: auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .ab-mb__logo,
  .ab-mb__note,
  .ab-mb__card {
    position: static;
    width: auto;
    height: auto;
  }

  .ab-mb__logo {
    font-size: 34px;
  }

  .ab-mb__note {
    font-size: 20px;
    order: 5;
  }

  .ab-mb__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .ab-mb__card img,
  .ab-mb__card p {
    position: static;
    width: 24px;
    height: 24px;
  }

  .ab-mb__card p {
    width: auto;
    height: auto;
    font-size: 16px;
  }
}

@media (max-width: 720px) {
  .ab-career__row,
  .ab-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .ab-fcard {
    flex-direction: column;
  }

  .ab-why__line {
    flex-direction: column;
  }

  .ab-wcard {
    height: auto;
    min-height: 140px;
    padding-bottom: 60px;
  }

  .ab-wcard__num {
    top: auto;
    bottom: 20px;
  }

  .ab-team {
    --av: clamp(38px, 11.5vw, 56px);
    --ov: calc(var(--av) * .22);
  }

  .ab-team__more {
    font-size: calc(var(--av) * .346);
  }

  .ab-chips {
    gap: 12px;
    margin-top: 32px;
  }

  .ab-chip {
    padding: 14px 16px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }

  .ab-cta {
    height: auto;
    padding: 64px 0;
  }

  .ab-cta__btns {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .ab-btn--ghost {
    width: 100%;
  }

  .footer__links {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Движение
   ========================================================================== */

/* Появление блоков при скролле. Скрываем только при работающем JS
   (класс cc-js), иначе без него страница осталась бы пустой. */
.cc-js .ab [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}

.cc-js .ab [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Иллюстрация в первом экране едва заметно покачивается. */
.ab-hero__img img {
  animation: ab-float 9s ease-in-out infinite;
}

@keyframes ab-float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

/* Белые карточки чуть приподнимаются под курсором — тот же жест, что у
   кнопок на остальном сайте. */
.ab-fact,
.ab-stat,
.ab-ccard,
.ab-wcard,
.ab-chip {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.ab-fact:hover,
.ab-stat:hover,
.ab-ccard:hover,
.ab-wcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(29, 45, 44, .08);
}

.ab-chip:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px rgba(180, 105, 20, .16);
}

/* Карточка основателя: свечение слегка разгорается. */
.ab-fcard {
  transition: transform .25s ease;
}

.ab-fcard__glow img {
  transition: opacity .35s ease, transform .35s ease;
}

.ab-fcard:hover {
  transform: translateY(-3px);
}

.ab-fcard:hover .ab-fcard__glow img {
  opacity: .85;
}

.ab-fcard__photo img {
  transition: transform .4s ease;
}

.ab-fcard:hover .ab-fcard__photo img {
  transform: scale(1.04);
}

/* Стеклянные плитки баннера. */
.ab-mb__card {
  transition: border-color .25s ease, background .25s ease;
}

.ab-mb__card:hover {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .05);
}

/* Уважаем системную настройку «меньше движения»: остаются только смены цвета. */
@media (prefers-reduced-motion: reduce) {

  .ab-btn,
  .ab-fact,
  .ab-stat,
  .ab-ccard,
  .ab-wcard,
  .ab-chip,
  .ab-fcard,
  .ab-fcard__photo img,
  .ab-fcard__glow img,
  .cc-js .ab [data-reveal] {
    transition: none;
  }

  .ab-hero__img img {
    animation: none;
  }

  .ab-btn--dark:hover,
  .ab-fact:hover,
  .ab-stat:hover,
  .ab-ccard:hover,
  .ab-wcard:hover,
  .ab-chip:hover,
  .ab-fcard:hover,
  .ab-fcard:hover .ab-fcard__photo img {
    transform: none;
  }

  .cc-js .ab [data-reveal] {
    opacity: 1;
    transform: none;
  }
}