/* ==========================================================================
   Главная — блок «Приложение Promin – доход всегда с вами» (b14).
   Макеты 1920 / 1440 / 768 / 360.

   Размеры на десктопе в vw от 1920 (px / 19.2), ниже 1660 — фиксированные
   пиксели с макета 1440, ниже 1278 — раскладка планшета с макета 768
   (картинка одна, пункты столбиком), ниже 620 — с макета 360.
   Контейнер общий со страницей (.mini-container-w): 1400 → 1250; на планшете
   и телефоне карточка в макете во всю ширину экрана, без скруглений.

   Кнопка «Подробнее» — modern-btn-block из темы: размеры, кружок, плашка
   и поворот при наведении берутся из общих стилей.
   ========================================================================== */

.home-app {
    width: 72.917vw;                    /* 1400px */
    margin: 12.5vw auto 0;              /* 240px — как между остальными блоками */
}

.home-app__card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32.552vw;               /* 625px */
    padding: 4.167vw 0 4.167vw 3.125vw; /* 80px / 60px */
    border-radius: 1.667vw;             /* 32px */
    background: #141414;
}

.home-app__content,
.home-app__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4.167vw;                       /* 80px */
}

.home-app__content {
    position: relative;
    z-index: 2;
    width: 38.802vw;                    /* 745px — по ширине заголовка в макете */
}

.home-app__title {
    max-width: 38.802vw;                /* 745px */
    margin: 0;
    font-weight: 400;
    font-size: 3.75vw;                  /* 72px */
    line-height: 1;
    letter-spacing: -.02em;
    color: #FFFFFF;
}

.home-app__title strong {
    font-weight: 600;
}

.home-app__list {
    display: flex;
    gap: 3.125vw;                       /* 60px */
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-app__item {
    display: flex;
    align-items: center;
    gap: 1.042vw;                       /* 20px */
    font-weight: 600;
    font-size: 1.042vw;                 /* 20px */
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #FFFFFF;
    white-space: nowrap;
}

.home-app__item svg {
    flex: 0 0 auto;
    width: 1.042vw;                     /* 20px */
    height: 1.042vw;
}

.home-app__btn {
    display: block;
}

/* телефоны выходят за карточку сверху и снизу — обёртка без overflow */
.home-app__phones {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.home-app__phones picture {
    display: contents;
}

.home-app__phone {
    position: absolute;
    display: block;
    height: auto;
}

.home-app__phone--back {
    left: 42.344vw;                     /* 813px от края карточки */
    top: -4.635vw;                      /* −89px */
    width: 18.594vw;                    /* 357px */
}

.home-app__phone--front {
    left: 47.344vw;                     /* 909px */
    top: 10.365vw;                      /* 199px */
    width: 21.042vw;                    /* 404px */
}

/* ── 1440: контейнер 1250, карточка 555 ────────────────────────────────── */

@media (max-width: 1660px) {
    .home-app { width: 1250px; margin-top: 160px; }
    .home-app__card { min-height: 555px; padding: 60px 0 60px 60px; border-radius: 32px; }
    .home-app__content, .home-app__group { gap: 60px; }
    .home-app__content { width: 721px; }
    .home-app__title { max-width: 721px; font-size: 56px; letter-spacing: -1.12px; }
    .home-app__list { gap: 40px; }
    .home-app__item { gap: 20px; font-size: 20px; letter-spacing: -.4px; }
    .home-app__item svg { width: 20px; height: 20px; }
    .home-app__phone--back { left: 766px; top: -48px; width: 290px; }
    .home-app__phone--front { left: 844px; top: 186px; width: 328px; }
}

/* ── планшет: один телефон справа, пункты столбиком ────────────────────── */

@media (max-width: 1278px) {
    .home-app { width: calc(100% - 98px); margin: 160px 49px 0; }
    .home-app__card { min-height: 680px; padding: 80px 47px; overflow: hidden; }
    .home-app__content { width: auto; max-width: 560px; }
    .home-app__title { max-width: 560px; font-size: 48px; letter-spacing: -.96px; }
    .home-app__list { flex-direction: column; gap: 40px; }
    .home-app__phone--back { display: none; }
    .home-app__phone--front { left: 50%; top: 128px; width: 414px; }
}

/* ── 768: карточка во всю ширину, без скруглений ───────────────────────── */

@media (max-width: 990px) {
    .home-app { width: 100%; margin: 160px 0 0; }
    .home-app__card { border-radius: 0; }
    .home-app__content { max-width: 673px; }
}

@media (max-width: 767px) {
    .home-app { margin-top: 120px; }    /* отступ между блоками на телефоне */
    /* уже 768 телефон уменьшается вместе с экраном, а не уезжает под обрез */
    .home-app__phone--front { left: auto; right: -3.9vw; width: 53.9vw; }
}

/* ── 360 ───────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
    .home-app__card { min-height: 504px; padding: 40px 16px; }
    /* заголовок и пункты слева, кнопка по центру */
    .home-app__content { align-items: center; width: 100%; max-width: none; }
    .home-app__group { width: 100%; }
    /* «Приложение Promin –» на 32px занимает 325px: тире должно остаться на первой строке */
    .home-app__title { max-width: 328px; font-size: 32px; letter-spacing: -.64px; }
    .home-app__list { gap: 30px; }
    .home-app__item { font-size: 16px; letter-spacing: -.32px; }
    .home-app__phone--front { left: calc(50% - 9px); top: 124px; width: 201px; }
}