/* ==========================================================================
   Страница «О нас» — три дополнительных блока:
   «Один партнер для всех платформ», «Как работает Promin Partner»,
   «Один бренд – две компании». Макеты 1920 / 1440 / 768 / 360.

   Размеры на десктопе в vw от 1920 (px / 19.2), ниже 1660 — фиксированные
   пиксели с макета 1440, ниже 990 — с макета 768, ниже 620 — с макета 360.
   Контейнер общий со страницей (.mini-container-w): 1400 → 1250 → 670 → 320.
   ========================================================================== */

.about-us {
    --ax-black:  #000000;
    --ax-grey:   #999999;
    --ax-line:   #E4E4E4;
    --ax-bg:     #F5F5F5;
    --ax-yellow: #FBC707;
    --ax-halo:   #FFF4CD;               /* 20% жёлтого на белом, непрозрачный */
    --ax-soft:   #FEEFB5;
}

/* ── общая шапка блока: заголовок и подзаголовок по центру ─────────────── */

.about-us .about-platforms,
.about-us .about-how {
    margin: 12.5vw auto 0;              /* 240px — как между остальными блоками */
}

/* последний блок страницы: сверху ближе к фотографиям, снизу воздух до подвала.
   Боковые поля — auto: контейнер 1400px центрируется, как остальные секции */
.about-us .about-brand {
    margin: 60px auto 240px;
}

.about-us .about-extra__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.563vw;                       /* 30px */
    text-align: center;
}

.about-us .about-extra__title {
    max-width: 60.573vw;                /* 1163px */
    margin: 0;
    font-weight: 400;
    font-size: 3.333vw;                 /* 64px */
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ax-black);
    text-align: center;
}

.about-us .about-extra__title strong { font-weight: 600; }
.about-us .about-extra__title--bold  { font-weight: 600; }

.about-us .about-extra__desc {
    max-width: 60.573vw;
    margin: 0;
    font-weight: 400;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.25;                  /* 30px */
    color: var(--ax-black);
}

.about-us .about-extra__desc strong  { font-weight: 500; }
.about-us .about-extra__desc--medium { font-weight: 500; }

/* в макете подзаголовок первого блока уже остальных — переносится после «работу» */
.about-us .about-platforms .about-extra__desc { max-width: 37.604vw; }   /* 722px */

/* у второго блока заголовок и подзаголовок стоят плотнее */
.about-us .about-how .about-extra__head { gap: .521vw; }                  /* 10px */

/* ── b7. один партнер для всех платформ: четыре карточки ───────────────── */

.about-us .about-platforms__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.083vw;                       /* 40px */
    margin-top: 3.125vw;                /* 60px */
}

.about-us .about-platforms__card {
    min-height: 15.156vw;               /* 291px */
    padding: 2.083vw;                   /* 40px */
    border: 1px solid var(--ax-line);
    border-radius: 1.667vw;             /* 32px */
    background: #FFFFFF;
}

.about-us .about-platforms__icon {
    display: block;
    width: 2.083vw;                     /* 40px */
    height: 2.083vw;
}

.about-us .about-platforms__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.about-us .about-platforms__head {
    margin: 1.563vw 0 0;                /* 30px от иконки */
    font-weight: 700;
    font-size: 1.25vw;                  /* 24px */
    line-height: 1.2;
    color: var(--ax-black);
}

.about-us .about-platforms__text {
    margin: 1.042vw 0 0;                /* 20px */
    font-weight: 400;
    font-size: .833vw;                  /* 16px */
    line-height: 1.4;
    color: var(--ax-black);
}

/* ── b8. как работает Promin Partner: фото + три шага в рамке ─────────── */

.about-us .about-how__card {
    display: flex;
    align-items: center;
    gap: 5.781vw;                       /* 111px */
    margin-top: 3.125vw;                /* 60px */
    padding: .521vw;                    /* 10px */
    border: 1px solid var(--ax-black);
    border-radius: 1.771vw;             /* 34px */
}

.about-us .about-how__photo {
    flex: 0 0 auto;
    width: 29.167vw;                    /* 560px */
    height: 33.333vw;                   /* 640px */
    overflow: hidden;
    border-radius: 1.563vw;             /* 30px */
    background: var(--ax-yellow);
}

.about-us .about-how__photo picture,
.about-us .about-how__img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-us .about-how__img {
    object-fit: cover;
    object-position: 60% center;        /* в макете кадр сдвинут влево на 85px */
}

.about-us .about-how__steps {
    display: flex;
    flex-direction: column;
    gap: 2.448vw;                       /* 47px */
    width: 36.771vw;                    /* 706px */
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-us .about-how__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.083vw;                       /* 40px */
}

/* Линия между кружками. Текст рядом с кружком бывает выше него, поэтому
   отрезок от одного кружка до другого заранее не известен. Каждый шаг рисует
   линию от своей середины до соседнего шага, отрезки складываются в сплошную,
   а кружки лежат поверх — видна только часть между ними, как в макете. */
.about-us .about-how__step::before,
.about-us .about-how__step::after {
    content: '';
    position: absolute;
    left: calc(4.167vw - 1px);          /* середина кружка 160px */
    width: 2px;
    background: var(--ax-soft);
}
.about-us .about-how__step::before { top: -2.448vw; bottom: 50%; }   /* вверх, через зазор */
.about-us .about-how__step::after  { top: 50%; bottom: 0; }
.about-us .about-how__step:first-child::before,
.about-us .about-how__step:last-child::after { display: none; }

/* кружок с номером: ореол 160 и сам круг 120. В покое — контур, при прокрутке
   до шага (.is-active, ставит скрипт) — заливка с ореолом, как у кружков
   онбординга на странице приложения */
.about-us .about-how__num {
    position: relative;
    z-index: 1;                         /* поверх линии */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.333vw;                     /* 160px */
    height: 8.333vw;
    border-radius: 50%;
    background: transparent;
    transition: background-color .3s ease;
}

.about-us .about-how__num > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25vw;                      /* 120px */
    height: 6.25vw;
    border: 2px solid var(--ax-soft);
    border-radius: 50%;
    background: #FFFFFF;
    font-weight: 600;
    font-size: 1.667vw;                 /* 32px */
    line-height: 1.2;
    letter-spacing: -.04em;
    color: var(--ax-black);
    transition: background-color .3s ease, border-color .3s ease;
}

.about-us .about-how__step.is-active .about-how__num { background: var(--ax-halo); }
.about-us .about-how__step.is-active .about-how__num > span {
    border-color: var(--ax-yellow);
    background: var(--ax-yellow);
}

.about-us .about-how__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-us .about-how__head {
    margin: 0;
    font-weight: 600;
    font-size: 1.667vw;                 /* 32px */
    line-height: 1.2;
    letter-spacing: -.04em;
    color: var(--ax-black);
}

.about-us .about-how__text {
    max-width: 26vw;                    /* 499px — как текстовый блок в макете */
    margin: 0;
    font-weight: 400;
    font-size: .833vw;                  /* 16px */
    line-height: 1.4;
    color: var(--ax-black);
}

/* ── b9. один бренд – две компании ─────────────────────────────────────── */

.about-us .about-brand__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.083vw;                       /* 40px */
    margin-top: 3.177vw;                /* 61px */
}

.about-us .about-brand__card {
    position: relative;
    height: 29.583vw;                   /* 568px */
    overflow: hidden;
    border-radius: 1.667vw;             /* 32px */
    background: var(--ax-bg);
}

/* вторая карточка в макете — белая с чёрной рамкой */
.about-us .about-brand__card:nth-child(2) {
    border: 1px solid var(--ax-black);
    background: #FFFFFF;
}

.about-us .about-brand__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-us .about-brand__content {
    position: relative;
    z-index: 2;
    width: 21.51vw;                     /* 413px */
    margin: 3.177vw 0 0 3.125vw;        /* 61px / 60px */
}

.about-us .about-brand__name {
    margin: 0;
    font-weight: 500;
    font-size: 2.5vw;                   /* 48px */
    line-height: 1.2;
    letter-spacing: -.04em;
    color: var(--ax-black);
}

.about-us .about-brand__note {
    margin: 1.563vw 0 0;                /* 30px */
    font-weight: 500;
    font-size: 1.042vw;                 /* 20px */
    line-height: 1.2;
    letter-spacing: -.04em;
    color: var(--ax-grey);
}

.about-us .about-brand__list {
    display: flex;
    flex-direction: column;
    gap: .781vw;                        /* 15px */
    margin: 1.042vw 0 0;                /* 20px */
    padding: 0;
    list-style: none;
}

.about-us .about-brand__list li {
    display: flex;
    align-items: center;
    gap: 1.042vw;                       /* 20px */
    font-weight: 400;
    font-size: .833vw;                  /* 16px */
    line-height: 1.4;
    color: var(--ax-black);
}

.about-us .about-brand__mark {
    flex: 0 0 auto;
    display: block;
    width: 1.042vw;                     /* 20px */
    height: 1.042vw;
}

.about-us .about-brand__mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* значок адреса уже галочки и стоит с отступом, как в макете */
.about-us .about-brand__mark--pin {
    width: .608vw;                      /* 11.67px */
    height: .868vw;                     /* 16.67px */
    margin: 0 .208vw;                   /* 4px */
}

/* нахлёст на текст задан отрицательным отступом: в макете низ текста 348px,
   верх картинки 164px — 184px. Если текст выше, картинка уезжает вниз на столько же */
.about-us .about-brand__pic {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 42.031vw;                    /* 807px — уходит за правый край */
    margin: -9.583vw 0 0;               /* −184px */
}

.about-us .about-brand__card:nth-child(2) .about-brand__pic {
    width: 37.552vw;                    /* 721px */
    margin: -7.865vw 0 0 5.521vw;       /* −151px / 106px */
}

.about-us .about-brand__pic picture,
.about-us .about-brand__img,
.about-us .about-brand__wide-pic picture,
.about-us .about-brand__wide-img {
    display: block;
    width: 100%;
    height: auto;
}

/* широкая карточка: иллюстрация слева, текст справа */
.about-us .about-brand__wide {
    position: relative;
    min-height: 25.521vw;               /* 490px */
    margin-top: 2.083vw;                /* 40px */
    overflow: hidden;
    border-radius: 1.667vw;
    background: var(--ax-bg);
}

.about-us .about-brand__wide-pic {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 38.229vw;                    /* 734px */
    height: 100%;
}

.about-us .about-brand__wide-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-us .about-brand__wide-content {
    position: relative;
    z-index: 2;
    width: 31.146vw;                    /* 598px */
    margin-left: 37.76vw;               /* 725px */
    padding: 2.865vw 0;                 /* 55px */
}

.about-us .about-brand__points {
    display: flex;
    flex-direction: column;
    gap: 1.042vw;                       /* 20px */
    margin: 1.563vw 0 0;                /* 30px */
    padding: 0;
    list-style: none;
}

.about-us .about-brand__points li {
    display: flex;
    align-items: center;
    gap: 1.042vw;
}

.about-us .about-brand__point {
    display: flex;
    flex-direction: column;
    gap: 13px;
    font-size: .833vw;                  /* 16px */
    line-height: 1.4;
    color: var(--ax-black);
}

.about-us .about-brand__point strong { font-weight: 700; }
.about-us .about-brand__point span   { font-weight: 400; }

/* ── 1440: контейнер 1250, фиксированные пиксели ───────────────────────── */

@media (max-width: 1660px) {
    .about-us .about-platforms,
    .about-us .about-how { width: 1250px; margin: 160px auto 0; padding: 0; }
    .about-us .about-brand { width: 1250px; margin: 40px auto 160px; padding: 0; }

    .about-us .about-extra__head { gap: 30px; }
    .about-us .about-extra__title { max-width: 1040px; font-size: 56px; }
    .about-us .about-extra__desc { max-width: 1040px; font-size: 20px; line-height: 1.35; }
    .about-us .about-platforms .about-extra__desc { max-width: 601px; }
    .about-us .about-how .about-extra__head { gap: 10px; }
    .about-us .about-how__text { max-width: 446px; }

    /* b7 */
    .about-us .about-platforms__grid { gap: 30px; margin-top: 60px; }
    .about-us .about-platforms__card { min-height: 289px; padding: 44px 36px 36px; border-radius: 28px; }
    .about-us .about-platforms__icon { width: 36px; height: 36px; }
    .about-us .about-platforms__head { margin-top: 27px; font-size: 24px; }
    .about-us .about-platforms__text { margin-top: 18px; font-size: 16px; }

    /* b8 */
    .about-us .about-how__card { gap: 58px; margin-top: 60px; padding: 10px; border-radius: 30px; }
    .about-us .about-how__photo { width: 500px; height: 571px; border-radius: 24px; }
    .about-us .about-how__steps { gap: 42px; width: 630px; }
    .about-us .about-how__step { gap: 36px; }
    .about-us .about-how__num { width: 143px; height: 143px; }
    .about-us .about-how__num > span { width: 107px; height: 107px; font-size: 28px; }
    .about-us .about-how__step::before { left: 70.5px; top: -42px; }
    .about-us .about-how__step::after { left: 70.5px; }
    .about-us .about-how__head { font-size: 24px; }
    .about-us .about-how__text { font-size: 16px; }

    /* b9 */
    .about-us .about-brand__row { gap: 36px; margin-top: 60px; }
    .about-us .about-brand__card { height: 507px; border-radius: 28px; }
    .about-us .about-brand__content { width: 369px; margin: 54px 0 0 54px; }
    .about-us .about-brand__name { font-size: 48px; }
    .about-us .about-brand__note { margin-top: 27px; font-size: 20px; }
    .about-us .about-brand__list { gap: 13px; margin-top: 18px; }
    .about-us .about-brand__list li { gap: 18px; font-size: 16px; }
    .about-us .about-brand__mark { width: 18px; height: 18px; }
    .about-us .about-brand__mark--pin { width: 10.4px; height: 14.8px; margin: 0 3.5px; }
    .about-us .about-brand__pic { width: 720px; margin: -173px 0 0; }
    .about-us .about-brand__card:nth-child(2) .about-brand__pic { width: 644px; margin: -155px 0 0 95px; }
    .about-us .about-brand__wide { min-height: 437px; margin-top: 36px; border-radius: 28px; }
    .about-us .about-brand__wide-pic { width: 655px; }
    .about-us .about-brand__wide-content { width: 534px; margin-left: 647px; padding: 49px 0; }
    .about-us .about-brand__points { gap: 18px; margin-top: 27px; }
    .about-us .about-brand__points li { gap: 18px; }
    .about-us .about-brand__point { font-size: 16px; }
}

/* ── 991–1278: тема отдаёт секциям страницы резиновую ширину с полями 49px ─ */

@media (max-width: 1278px) {
    .about-us .about-platforms,
    .about-us .about-how { width: calc(100% - 98px); margin: 160px 49px 0; padding: 0; }
    .about-us .about-brand { width: calc(100% - 98px); margin: 40px 49px 160px; padding: 0; }

    /* четыре карточки в 1000px не помещаются — две колонки */
    .about-us .about-platforms__grid { grid-template-columns: 1fr 1fr; }

    /* фото и шаги вместе шире контейнера — фото уже, шаги растягиваются */
    .about-us .about-how__card { gap: 40px; }
    .about-us .about-how__photo { width: 42%; height: auto; min-height: 520px; }
    .about-us .about-how__steps { flex: 1 1 auto; width: auto; }

    /* карточкам компаний в 480px тесно — раскладка планшета: одна колонка,
       картинка внизу справа, текст сверху */
    .about-us .about-brand__row { grid-template-columns: 1fr; gap: 30px; }
    .about-us .about-brand__card { height: 559px; }
    .about-us .about-brand__content { width: 406px; margin: 60px 0 0 59px; }
    .about-us .about-brand__pic { width: 794px; margin: -180px 0 0 auto; align-self: flex-end; }
    .about-us .about-brand__card:nth-child(2) .about-brand__pic { width: 710px; margin: -150px 0 0 auto; }
    .about-us .about-brand__wide { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 93px 61px 0; }
    .about-us .about-brand__wide-content { order: 1; width: auto; max-width: 534px; margin-left: 0; padding: 0; }
    .about-us .about-brand__wide-pic { position: static; order: 2; width: 488px; height: auto; margin: 40px auto 0; }
    .about-us .about-brand__wide-img { height: auto; }
}

/* ── 768: контейнер 670, карточки в две колонки, фото над шагами ───────── */

@media (max-width: 990px) {
    .about-us .about-platforms,
    .about-us .about-how { width: calc(100% - 98px); margin: 160px 49px 0; padding: 0; }
    .about-us .about-brand { width: calc(100% - 98px); margin: 40px 49px 160px; padding: 0; }

    .about-us .about-extra__head { align-items: flex-start; gap: 30px; text-align: left; }
    .about-us .about-extra__title { max-width: none; font-size: 48px; text-align: left; }
    /* «Один бренд – две компании»: на узких экранах жирная только вторая часть
       (в поле она обёрнута в <strong>), а до описания 40px */
    .about-us .about-extra__title--bold { font-weight: 400; }
    .about-us .about-brand .about-extra__head { gap: 40px; }
    .about-us .about-extra__desc { max-width: 644px; font-size: 18px; line-height: 1.5; }
    .about-us .about-platforms .about-extra__desc { max-width: 601px; }
    /* в макете 768 заголовок и подзаголовок этого блока стоят вплотную и мельче */
    .about-us .about-how .about-extra__head { gap: 30px; }
    .about-us .about-how .about-extra__desc { font-size: 18px; }
    .about-us .about-how__text { max-width: 446px; }

    /* b7 */
    .about-us .about-platforms__grid { grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 60px; }
    .about-us .about-platforms__card { min-height: 268px; padding: 32px; border-radius: 24px; }

    /* b8 */
    .about-us .about-how__card { flex-direction: column; align-items: stretch; gap: 40px; margin-top: 60px; padding: 10px 10px 50px; border-radius: 30px; }
    .about-us .about-how__photo { width: auto; height: 571px; border-radius: 24px; }
    .about-us .about-how__steps { width: auto; gap: 60px; padding: 0 10px; }
    .about-us .about-how__step::before { top: -60px; }

    /* b9 */
    .about-us .about-brand__row { grid-template-columns: 1fr; gap: 30px; margin-top: 60px; }
    .about-us .about-brand__card { height: 559px; }
    .about-us .about-brand__content { width: 406px; margin: 60px 0 0 59px; }
    /* картинка шире карточки: прижимаем к левому краю, как в макете и на ПК —
       уходит за правый край, а не наезжает на текст слева */
    .about-us .about-brand__pic { width: 794px; margin: -180px 0 0 -9px; align-self: flex-start; }
    .about-us .about-brand__card:nth-child(2) .about-brand__pic { width: 710px; margin: -150px 0 0 95px; }
    /* широкая карточка: текст сверху, иллюстрация внизу */
    .about-us .about-brand__wide { display: flex; flex-direction: column; height: auto; min-height: 807px; margin-top: 30px; padding: 93px 61px 0; }
    .about-us .about-brand__wide-content { order: 1; width: auto; max-width: 534px; margin-left: 0; padding: 0; }
    .about-us .about-brand__wide-pic { position: static; order: 2; width: 488px; height: auto; margin: 40px auto 0; }
    .about-us .about-brand__wide-img { height: auto; }
}

/* ── 360: одна колонка, компактные размеры ─────────────────────────────── */

@media (max-width: 620px) {
    .about-us .about-platforms,
    .about-us .about-how { width: calc(100% - 40px); margin: 80px 20px 0; padding: 0; }
    .about-us .about-brand { width: calc(100% - 40px); margin: 20px 20px 80px; padding: 0; }

    .about-us .about-extra__head { gap: 20px; }
    .about-us .about-extra__title { max-width: none; font-size: 28px; line-height: 1; letter-spacing: -.02em; }
    .about-us .about-extra__desc { max-width: none; font-size: 14px; line-height: 1.36; }
    .about-us .about-brand .about-extra__desc { font-size: 14px; line-height: 1.9; }
    .about-us .about-platforms .about-extra__desc { max-width: none; }
    .about-us .about-how .about-extra__head { gap: 20px; }
    .about-us .about-brand .about-extra__head { gap: 40px; }
    .about-us .about-how__text { max-width: none; }

    /* b7 */
    .about-us .about-platforms__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
    .about-us .about-platforms__card { min-height: 0; padding: 30px; border-radius: 24px; }
    .about-us .about-platforms__icon { width: 34px; height: 34px; }
    .about-us .about-platforms__head { margin-top: 27px; font-size: 24px; }
    .about-us .about-platforms__text { margin-top: 18px; font-size: 16px; }

    /* b8: рамка шире контейнера на 10px с каждой стороны, как в макете */
    .about-us .about-how { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; }
    .about-us .about-how .about-extra__head { padding: 0 10px; }
    .about-us .about-how__card { gap: 30px; margin-top: 40px; padding: 10px 10px 30px; border-radius: 24px; }
    .about-us .about-how__photo { height: 300px; min-height: 300px; border-radius: 20px; }
    .about-us .about-how__steps { gap: 40px; padding: 0 5px; }
    .about-us .about-how__step { gap: 18px; }
    .about-us .about-how__num { width: 73px; height: 73px; }
    .about-us .about-how__num > span { width: 55px; height: 55px; border-width: 1px; font-size: 15px; }
    .about-us .about-how__step::before { left: 36px; top: -40px; width: 1px; }
    .about-us .about-how__step::after { left: 36px; width: 1px; }
    .about-us .about-how__head { font-size: 20px; }
    .about-us .about-how__text { font-size: 14px; }

    /* b9 */
    .about-us .about-brand__row { gap: 20px; margin-top: 40px; }
    .about-us .about-brand__card { height: 408px; border-radius: 20px; }
    .about-us .about-brand__content { width: calc(100% - 56px); margin: 28px 0 0 28px; }
    .about-us .about-brand__name { font-size: 24px; }
    .about-us .about-brand__note { margin-top: 14px; font-size: 16px; line-height: 1.375; }
    .about-us .about-brand__list { gap: 10px; margin-top: 14px; }
    .about-us .about-brand__list li { gap: 12px; font-size: 14px; }
    .about-us .about-brand__mark { width: 15px; height: 15px; }
    .about-us .about-brand__mark--pin { width: 11px; height: 15px; margin: 0 2px; }
    .about-us .about-brand__mark svg path { stroke-width: 1; }
    .about-us .about-brand__pic { width: 100%; margin: -23px 0 0; }
    .about-us .about-brand__card:nth-child(2) .about-brand__pic { width: 100%; margin: -4px 0 0; }
    .about-us .about-brand__wide { min-height: 0; margin-top: 20px; padding: 44px 28px 0; border-radius: 20px; }
    .about-us .about-brand__wide-content { max-width: none; margin-left: 0; padding: 0; }
    .about-us .about-brand__wide-pic { width: 223px; margin: 30px auto 0; }
    .about-us .about-brand__points { gap: 16px; margin-top: 24px; }
    .about-us .about-brand__points li { gap: 8px; align-items: flex-start; }
    .about-us .about-brand__points .about-brand__mark { margin-top: 2px; width: 19px; height: 19px; }
    .about-us .about-brand__point { font-size: 13px; }
}