/* #region stats-heading-grid */
.stats-heading-grid {
    padding-top: 100px;
    padding-bottom: 100px;
}

.stats-heading-grid__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.stats-heading-grid__heading {
    font-size: 46px;
    font-family: Impact, sans-serif;
    text-transform: uppercase;
}

.stats-heading-grid__grid {
    display: grid;
    grid-template-columns: repeat(4, 240px);
    gap: 20px;
}

.stats-heading-grid__item-title {
    font-size: 100px;
    font-family: Impact, sans-serif;
    text-transform: uppercase;
    line-height: 120%;
    text-wrap: nowrap;
}
.stats-heading-grid__item-subtitle {
    font-size: 16px;
    line-height: 140%;
    text-wrap: wrap;
}

@media (max-width: 1300px) {
    .stats-heading-grid {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .stats-heading-grid__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .stats-heading-grid__item {
        width: 190px;
        text-align: center;
    }

    .stats-heading-grid__item-title {
        font-size: 64px;
    }

    .stats-heading-grid__item-subtitle {
        opacity: 0.7;
        color: #b2b2b2;
    }
}

@media (max-width: 1300px) {
    .stats-heading-grid__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        width: 100%;
    }

    .stats-heading-grid__item {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .stats-heading-grid {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .stats-heading-grid__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-heading-grid__item {
        text-align: start;
    }

    .stats-heading-grid__item-title {
        font-size: 40px;
    }

    .stats-heading-grid__item-subtitle {
        font-size: 14px;
    }
}

@media (max-width: 320px) {
    .stats-heading-grid__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* #endregion */

/* #region project-mobile-showreel */
.showreel__item .showreel__frame--mobile {
    display: none;
}

@media (max-width: 767px) {
    .showreel--mobile-video .showreel__wrapper {
        max-width: 272px;
    }

    .showreel--mobile-video .showreel__item {
        left: auto;
        width: min(272px, calc(100vw - 88px));
        margin-right: auto;
        margin-left: auto;
        transform: none;
    }

    .showreel--mobile-video .showreel__item::before {
        padding-bottom: 222.0588235294%;
    }

    .showreel--mobile-video .showreel__frame--desktop {
        display: none;
    }

    .showreel--mobile-video .showreel__frame--mobile {
        display: block;
        top: 8.77%;
        left: -1.1%;
        z-index: 2;
        width: 102.57%;
        max-width: none;
        height: 91.23%;
        object-fit: fill;
        pointer-events: none;
    }

    .showreel--mobile-video .showreel__video-wrapper {
        top: 11.75%;
        bottom: 0.5%;
        left: 5.88%;
        z-index: 1;
        width: 88.24%;
        border-radius: 20px 20px 40px 40px;
        background: #040304;
    }

    .showreel--mobile-video .showreel__video-wrapper::before {
        display: none;
    }

    .showreel--mobile-video .showreel__video {
        object-fit: cover;
    }
}
/* #endregion */

/* #region achievements-slider */
.achievements-slider {
    padding-bottom: 120px;
    overflow: hidden;
}

/* на «О нас» блок стоит между командой и приглашаемыми специалистами:
   отступы задают соседи, свой нижний отступ давал двойной разрыв снизу */
.about-achievements .achievements-slider {
    padding-bottom: 0;
}

.achievements-slider__body-col {
    overflow: hidden;
}

.achievements-slider__swiper-container {
    width: 100%;
    max-width: 1025px;
}

.achievements-slider .swiper,
.achievements-slider .swiper-wrapper {
    overflow: visible;
}

.achievement-card {
    width: 415px;
    padding: 39px;
    border: 1px solid #333333;
    border-radius: 8px;
}

.achievement-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 7;
    object-fit: cover;
}

/* диплом ведет на строку агентства в рейтинге (свойство LINK, 09.10.2026) */
.achievement-card__link {
    display: block;
    border-radius: 4px;
}

.achievement-card__link:focus-visible {
    outline: 2px solid #0ab451;
    outline-offset: 4px;
}

.achievement-card {
    transition: border-color 0.2s;
}

.achievement-card:has(.achievement-card__link:hover) {
    border-color: #0ab451;
}

/* подпись под дипломом (13.10.2026, вариант 1 заказчика): заголовок и место в рейтинге.
   Карточки одной высоты, у пояснения (и у заголовка на телефоне) место под 2 строки - подписи на одном уровне */
.achievements-slider .swiper-wrapper {
    align-items: stretch;
}

.achievement-card.swiper-slide {
    height: auto;
}

.achievement-card__caption {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.achievement-card__caption-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.achievement-card__caption-text {
    min-height: 2lh;
    color: #8c8c8c;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.achievements-slider__buttons-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

@media (max-width: 1440px) {
    .achievements-slider__swiper-container {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .achievements-slider {
        padding-bottom: 120px;
    }

    .about-achievements .achievements-slider {
        padding-bottom: 0;
    }

    .achievements-slider__heading {
        margin-bottom: 20px;
    }

    .achievement-card {
        width: 256px;
        padding: 19px;
    }

    .achievement-card__caption {
        margin-top: 16px;
    }

    .achievement-card__caption-title {
        min-height: 2lh;
        font-size: 16px;
    }

    .achievement-card__caption-text {
        font-size: 14px;
    }

    .achievements-slider__buttons-container {
        display: none;
    }
}
/* #endregion */

/* #region contacts-cards: страница «Контакты», вариант 1 заказчика (21.10.2026).
   Первый контакт - крупная карточка с кнопкой, остальные сеткой 2x2, последняя ячейка - «Мы на площадках»
   (контакты с галочкой PLATFORM). Ниже текст в три колонки и полоса реквизитов.
   Надпись «contacts» (--dfs) - около 80% ширины контента, нижнюю треть слова закрывает тело страницы */
.contacts {
    --dfs: min(200px, calc((100vw - 160px) / 6.4));
}

.contacts .contacts__decor {
    white-space: nowrap;
    font-size: var(--dfs);
}

.contacts .contacts__body {
    margin-top: calc(var(--dfs) * 0.62 - 64px);
    background: #0a0a0a;
}

.contacts-cards {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

.contacts-cards__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.contacts-card {
    display: flex;
    min-width: 0;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    background: #0f0f0f;
    color: #ffffff;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.contacts-card[href]:hover {
    border-color: #0ab451;
}

.contacts-card--main {
    padding: 40px;
    border-color: #0ab451;
    background: #151515;
}

.contacts-card__head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contacts-card__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1f1f1f;
}

.contacts-card__icon img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.contacts-card--phone .contacts-card__icon img,
.contacts-card--email .contacts-card__icon img {
    width: 30px;
    height: 30px;
}

.contacts-card__name {
    display: block;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.05;
}

.contacts-card__value {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 1.3;
}

.contacts-card--main .contacts-card__name {
    font-size: 36px;
}

.contacts-card--main .contacts-card__value {
    margin-top: 8px;
    font-size: 20px;
}

.contacts-card__desc {
    display: block;
    margin-top: 24px;
    color: #8c8c8c;
    font-size: 16px;
    line-height: 1.5;
}

.contacts-card--main .contacts-card__desc {
    margin: 28px 0 32px;
}

.contacts-card__btn {
    flex: 0 0 auto;
    margin-top: auto;
    color: #ffffff;
}

.contacts-platforms {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 12px;
}

.contacts-platform {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid #262626;
    color: #ffffff;
    text-decoration: none;
}

.contacts-platform:first-child {
    border-top: 0;
}

.contacts-platform .contacts-card__icon {
    width: 44px;
    height: 44px;
}

.contacts-platform .contacts-card__icon img {
    width: 22px;
    height: 22px;
}

.contacts-platform__name {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.contacts-platform__value {
    display: block;
    margin-top: 2px;
    color: #8c8c8c;
    font-size: 16px;
}

.contacts-platform__go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border-radius: 50%;
    background: #1f1f1f;
    color: #8c8c8c;
    transition: background 0.2s ease, color 0.2s ease;
}

a.contacts-platform:hover .contacts-platform__name {
    color: #0ab451;
}

a.contacts-platform:hover .contacts-platform__go {
    background: #0ab451;
    color: #ffffff;
}

.contacts__intro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.contacts__intro p {
    margin: 0;
    color: #8c8c8c;
    font-size: 16px;
    line-height: 1.55;
}

.contacts__requisites {
    display: grid;
    grid-template-columns: auto 1.4fr 1fr 1fr;
    align-items: center;
    gap: 24px 40px;
    margin-top: 64px;
    padding: 32px 40px;
    border-radius: 24px;
    background: #1a1a1a;
    text-transform: none;
}

.contacts__requisites-title {
    margin: 0 24px 0 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.05;
}

.contacts__requisites-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #ffffff;
    font-size: 17px;
    text-align: center;
}

.contacts__requisites-col span:first-child {
    color: #8c8c8c;
    font-size: 14px;
}

@media (max-width: 1439px) {
    .contacts {
        --dfs: calc((100vw - 64px) / 6.4);
    }
}

@media (max-width: 1279px) {
    .contacts-cards {
        grid-template-columns: 1fr;
    }

    .contacts__requisites {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .contacts__requisites-title {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1023px) {
    .contacts {
        --dfs: calc((100vw - 40px) / 6.4);
    }
}

@media (max-width: 768px) {
    .contacts {
        padding-bottom: 78px;
    }

    .contacts .contacts__decor {
        top: 42px;
    }

    .contacts .contacts__body {
        margin-top: calc(var(--dfs) * 0.62 - 10px);
    }
}

@media (max-width: 767px) {
    .contacts {
        --dfs: calc((100vw - 32px) / 6.4);
    }

    .contacts-cards,
    .contacts-cards__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .contacts-card {
        padding: 20px;
    }

    .contacts-card--main {
        padding: 24px;
    }

    .contacts-card__head {
        gap: 14px;
    }

    .contacts-card__icon {
        width: 48px;
        height: 48px;
    }

    .contacts-card__icon img {
        width: 22px;
        height: 22px;
    }

    .contacts-card--phone .contacts-card__icon img,
    .contacts-card--email .contacts-card__icon img {
        width: 26px;
        height: 26px;
    }

    .contacts-card__name {
        font-size: 22px;
    }

    .contacts-card__value {
        font-size: 16px;
    }

    .contacts-card--main .contacts-card__name {
        font-size: 28px;
    }

    .contacts-card--main .contacts-card__value {
        font-size: 18px;
    }

    .contacts-card__desc {
        margin-top: 14px;
    }

    .contacts-card--main .contacts-card__desc {
        margin: 16px 0 20px;
    }

    .contacts__intro {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 32px;
    }

    .contacts__requisites {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
        padding: 24px;
    }

    .contacts__requisites-col {
        text-align: left;
    }
}
/* #endregion */

/* #region service-choice-cards */
.choice .card-choice {
    padding: 20px;
}

.choice .card-choice__head > div:first-child,
.choice .card-choice__body,
.choice .card-choice__content,
.choice .card-choice__info > div {
    min-width: 0;
}

.choice .card-choice__title,
.choice .card-choice__head p,
.choice .card-choice__info,
.choice .card-choice__content {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .choice .card-choice {
        padding: 20px;
    }

    .choice .card-choice__title {
        font-size: 24px;
        line-height: 1.3125;
    }
}
/* #endregion */

/* #region intro-stack */
.intro-stack {
    --intro-stack-top: 105px;
    --intro-stack-step: 14px;
    position: relative;
    padding-top: 20px;
    padding-bottom: 40px;
}

.intro-stack__container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

.intro-stack__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.intro-stack__card {
    position: sticky;
    top: calc(var(--intro-stack-top) + var(--intro-stack-offset, 0px));
    z-index: calc(1 + var(--intro-stack-index, 0));
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.95fr);
    align-items: center;
    gap: 60px;
    min-height: 326px;
    padding: 60px;
    border-radius: 36px;
    color: #fff;
    background: #1a1a1a;
    will-change: transform, filter, opacity;
}

.intro-stack__card:nth-child(2) {
    --intro-stack-offset: var(--intro-stack-step);
}

.intro-stack__card:nth-child(3) {
    --intro-stack-offset: calc(var(--intro-stack-step) + var(--intro-stack-step));
}

.intro-stack__card:nth-child(4) {
    --intro-stack-offset: calc(var(--intro-stack-step) + var(--intro-stack-step) + var(--intro-stack-step));
}

.intro-stack__card--primary {
    min-height: 330px;
    background: #0a0a0a;
}

.intro-stack__card--team {
    background: #242424;
}

.intro-stack__card--delivery {
    background: #333;
}

.intro-stack__heading,
.intro-stack__content {
    display: flex;
    flex-direction: column;
}

.intro-stack__heading {
    align-self: stretch;
    justify-content: center;
}

.intro-stack__content {
    justify-content: center;
    gap: 24px;
    min-width: 0;
}

.intro-stack__title {
    max-width: 680px;
    font-family: Impact, sans-serif;
    font-size: clamp(48px, 4.35vw, 64px);
    font-weight: 400;
    line-height: 1.08;
    text-transform: uppercase;
    overflow-wrap: normal;
}

.intro-stack__description {
    max-width: 420px;
    font-size: 16px;
    line-height: 1.4;
}

.intro-stack__button {
    width: 100%;
    max-width: 420px;
}

@media (max-width: 1439px) {
    .intro-stack__container {
        padding-right: 32px;
        padding-left: 32px;
    }

    .intro-stack__card {
        grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
        gap: 40px;
        padding: 48px;
    }
}

@media (max-width: 1023px) {
    .intro-stack {
        --intro-stack-top: 98px;
        --intro-stack-step: 10px;
    }

    .intro-stack__container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .intro-stack__list {
        gap: 20px;
    }

    .intro-stack__card {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
        min-height: 300px;
        padding: 36px;
        border-radius: 28px;
    }

    .intro-stack__title {
        font-size: clamp(38px, 5.5vw, 52px);
    }
}

@media (max-width: 767px) {
    .intro-stack {
        --intro-stack-top: 94px;
        --intro-stack-step: 8px;
        padding-top: 0;
    }

    .intro-stack__container {
        padding: 0;
    }

    .intro-stack__list {
        gap: 16px;
    }

    .intro-stack__card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 14px;
        min-height: 282px;
        padding: 20px;
        border-radius: 20px;
    }

    .intro-stack__card--primary {
        min-height: 315px;
    }

    .intro-stack__heading {
        justify-content: flex-start;
        padding-top: 36px;
    }

    .intro-stack__content {
        justify-content: flex-start;
        gap: 20px;
    }

    .intro-stack__title {
        font-size: clamp(31px, 9.75vw, 38px);
        line-height: 1.08;
    }

    .intro-stack__card--primary .intro-stack__title,
    .intro-stack__button span {
        white-space: nowrap;
    }

    .intro-stack__description {
        max-width: none;
        font-size: 14px;
        line-height: 1.4;
    }

    .intro-stack__button {
        width: 168px;
        height: 34px;
        font-size: 14px;
    }

    .intro-stack__button svg {
        width: 24px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-stack__card {
        position: relative;
        top: auto;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* #endregion */

/* #region boss-about */
.boss-about {
    padding-bottom: 40px;
}

.boss-about__limiter {
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    height: 605px;
}

.boss-about__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.boss-about__decor {
    position: absolute;
    bottom: -50px;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%) rotate(7deg);
    color: #262626;
    font-size: 600px;
    font-weight: 700;
    line-height: 100%;
    user-select: none;
}

.boss-about__person-img {
    position: absolute;
    bottom: 0;
    left: 52%;
    z-index: 1;
    transform: translateX(-50%);
    width: 440px;
    height: auto;
    user-select: none;
}

.boss-about__row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 280px;
    width: 100%;
}

.boss-about__col {
    display: flex;
    gap: 20px;
    width: 500px;
    font-size: 16px;
}

.boss-about__text-tabletop {
    display: none;
}

@media (max-width: 1300px) {
    .boss-about__decor {
        bottom: -60px;
        font-size: 500px;
    }
}

@media (max-width: 1000px) {
    .boss-about__limiter {
        padding-top: 50px;
        height: 565px;
    }

    .boss-about__decor {
        bottom: -50px;
        font-size: 400px;
    }

    .boss-about__person-img {
        left: 48%;
    }

    .boss-about__col {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 12px;
        width: 185px;
        color: #a6a6a6;
    }

    .boss-about__desktop-text {
        display: none;
    }
}

@media (max-width: 820px) {
    .boss-about__limiter {
        padding-top: 50px;
        height: 505px;
    }

    .boss-about__decor {
        bottom: -30px;
        font-size: 360px;
    }

    .boss-about__person-img {
        width: 380px;
    }
}

@media (max-width: 768px) {
    .boss-about {
        padding-bottom: 60px;
    }

    .boss-about__limiter {
        padding-top: 40px;
        height: auto;
    }

    .boss-about__mobile-spacer {
        height: 400px;
    }

    .boss-about__decor {
        bottom: -10px;
        font-size: 340px;
    }

    .boss-about__person-img {
        width: 320px;
    }

    .boss-about__row,
    .boss-about__col {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        font-size: 14px;
    }

    .boss-about__text-tabletop {
        display: inline;
    }
}

@media (max-width: 610px) {
    .boss-about__decor {
        bottom: 30px;
        font-size: 280px;
    }
}

@media (max-width: 440px) {
    .boss-about__mobile-spacer {
        height: 320px;
    }

    .boss-about__decor {
        bottom: 50px;
        font-size: 170px;
    }

    .boss-about__person-img {
        width: 250px;
    }
}

@media (max-width: 360px) {
    .boss-about__col--hide-mobile {
        display: none;
    }
}
/* #endregion */

/* #region request-badge */
.request-badge {
    display: flex;
    position: relative;
    width: 100%;
    padding: 40px;
    border-radius: 40px;
    border: 1px solid #1a1a1a;
}

.request-badge__bg-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    object-fit: cover;
    object-position: center center;
    user-select: none;
}

.request-badge__face-img,
.request-badge__like-img {
    position: absolute;
    z-index: 1;
    height: auto;
}

.request-badge__face-img {
    right: 150px;
    top: -130px;
    width: 365px;
}

.request-badge__like-img {
    right: 95px;
    top: 120px;
    width: 130px;
}

.request-badge__content {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    padding-right: 450px;
}

.request-badge__heading {
    max-width: 620px;
    font-family: Impact, sans-serif;
    font-size: 38px;
    line-height: 130%;
    text-transform: uppercase;
    text-wrap: balance;
}

.request-badge__subtitle {
    max-width: 500px;
    margin-top: 20px;
    font-size: 16px;
}

.request-badge__buttons {
    width: 100%;
    max-width: 480px;
    padding-top: 20px;
    margin-top: auto;
}

.ai-badge {
    min-height: 320px;
}

.ai-badge__button {
    width: 100%;
    max-width: 270px;
}

.ai-badge__face-img,
.ai-badge__like-img {
    position: absolute;
    z-index: 1;
    height: auto;
}

.ai-badge__face-img {
    top: -70px;
    right: 75px;
    width: 370px;
}
.ai-badge__like-img {
    top: 180px;
    right: 420px;
    width: 195px;
}

@media (max-width: 980px) {
    .ai-badge__button {
        max-width: unset;
    }

    .request-badge__face-img {
        right: 40px;
        top: -30px;
        width: 260px;
    }

    .request-badge__like-img {
        right: 20px;
        top: 160px;
        width: 90px;
    }

    .request-badge__content {
        padding-right: 320px;
    }

    .ai-badge__face-img {
        top: -50px;
        right: 0;
        width: 250px;
    }
    .ai-badge__like-img {
        top: 180px;
        right: 245px;
        width: 95px;
        transform: rotateZ(-10deg);
    }
}

@media (max-width: 768px) {
    .request-badge {
        padding: 40px 20px;
    }

    .request-badge__face-img {
        right: 20px;
        top: -20px;
        width: 220px;
    }

    .request-badge__like-img {
        right: 10px;
        top: 170px;
        width: 85px;
    }

    .request-badge__content {
        padding-right: 280px;
    }

    .request-badge__heading {
        font-size: 32px;
    }

    .request-badge__subtitle {
        margin-top: 12px;
        font-size: 14px;
    }

    .request-badge__buttons {
        max-width: 270px;
        padding-top: 40px;
    }
}

@media (max-width: 600px) {
    .request-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 160px 20px 20px;
    }

    .request-badge__face-img {
        right: auto;
        top: -100px;
        width: 205px;
    }

    .request-badge__like-img {
        right: auto;
        top: 70px;
        transform: translateX(100px);
        width: 80px;
    }

    .request-badge__content {
        width: 100%;
        padding-right: 0;
    }

    .request-badge__heading {
        font-size: 24px;
        text-wrap: balance;
    }

    .request-badge__subtitle {
        margin-top: 16px;
    }

    .request-badge__buttons {
        max-width: 100%;
        padding-top: 30px;
    }

    .ai-badge__face-img {
        top: -100px;
        right: auto;
        width: 205px;
    }

    .ai-badge__like-img {
        top: 80px;
        right: auto;
        width: 80px;
        transform: translateX(-100px) rotateZ(-20deg);
    }
}
/* #endregion */

/* #region presentation-badge */
.presentation-badge {
    position: relative;
    padding: 40px;
    border-radius: 40px;
    border: 1px solid #1a1a1a;
}

.presentation-badge__bg-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    object-fit: cover;
    object-position: center center;
    user-select: none;
}

.presentation-badge__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 610px;
}

.presentation-badge__title {
    font-family: Impact, sans-serif;
    font-size: 46px;
    line-height: 130%;
    text-transform: uppercase;
}

.presentation-badge__description {
    max-width: 480px;
    font-size: 16px;
}

.presentation-badge__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 600px;
}

.presentation-badge__decor-text {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    padding: 5px;
    color: #0ab451;
    font-family: Kelsi, sans-serif;
    font-weight: 400;
    font-size: 128px;
    line-height: 90%;
    letter-spacing: 0%;
    text-align: right;
    cursor: default;
}

@media (max-width: 1100px) {
    .presentation-badge {
        padding: 20px;
    }

    .presentation-badge__content {
        max-width: unset;
        padding-right: 260px;
    }

    .presentation-badge__decor-text {
        right: 10px;
        font-weight: 400;
        font-size: 100px;
    }
}

@media (max-width: 768px) {
    .presentation-badge__content {
        max-width: unset;
        padding-right: 165px;
    }

    .presentation-badge__title {
        font-size: 24px;
    }

    .presentation-badge__description {
        font-size: 14px;
    }

    .presentation-badge__buttons {
        gap: 8px;
    }

    .presentation-badge__decor-text {
        right: 10px;
        font-weight: 400;
        font-size: 64px;
    }
}

@media (max-width: 620px) {
    .presentation-badge__buttons {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .presentation-badge__content {
        max-width: unset;
        padding-right: 0;
    }

    .presentation-badge__buttons {
        gap: 8px;
    }

    .presentation-badge__decor-text {
        display: none;
    }
}
/* #endregion */

/* #region team-slider */
.team-slider {
    width: 100%;
    height: auto;
    min-width: 0;
}

.team-slider .swiper-wrapper {
    align-items: stretch;
}

.team-slider__section {
    padding-bottom: 100px;
}

.team-slider__decor-text {
    color: #333333;
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 100px;
    line-height: 90%;
    letter-spacing: 0%;
    user-select: none;
}

.team-slider__content {
    display: grid;
    align-items: start;
    grid-template-columns: auto 1fr;
    gap: 20px;
    width: 100%;
    margin-top: 10px;
}

.team-slider__buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
}

@media (max-width: 950px) {
    .team-slider__section {
        padding-top: 12px;
        padding-bottom: 40px;
    }

    .team-slider__section-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }

    .team-slider__decor-text {
        font-size: 64px;
        text-align: end;
    }

    .team-slider__content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 15px;
    }
}

@media (max-width: 700px) {
    .team-slider__decor-text {
        font-size: 48px;
    }
}

@media (max-width: 600px) {
    .team-slider__section-header {
        display: block;
        gap: 0;
    }

    .team-slider__content {
        gap: 20px;
    }

    .team-slider__decor-text {
        text-align: start;
    }

    .team-slider__buttons {
        display: none;
    }
}
/* #endregion */

/* #region team-card */
.team-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-card--fill {
    height: auto;
}

.team-card--ceo {
    width: 500px;
}

.team-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.team-card__image {
    flex: 0 0 auto;
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center center;
    border-radius: 24px;
    border: 1px solid #333333;
}

.team-card--ceo .team-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 50/46;
}

.team-card__name {
    font-family: Impact, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: 0%;
    text-transform: uppercase;
}
.team-card--ceo .team-card__name {
    font-size: 46px;
    text-transform: none;
}

.team-card__role {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
}

/* Руководитель: должность и справа кнопки каналов (Telegram из свойства TELEGRAM), при нехватке места переносятся */
.team-card__role-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
}

.team-card__role-row .team-card__role {
    margin-top: 0;
}

.team-card__channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-card__channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px 4px 10px;
    border: 1px solid #333333;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.2s, color 0.2s;
}

.team-card__channel svg {
    flex: 0 0 auto;
    color: #0ab451;
}

.team-card__channel:hover,
.team-card__channel:focus-visible {
    border-color: #0ab451;
    color: #0bd15e;
}

.team-card__description {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #333333;
    color: #999999;
    font-size: 16px;
    font-weight: 500;
    line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.team-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}

.team-card-badge {
    display: inline-block;
    flex: 0 1 auto;
    padding: 3px 16px;
    border-radius: 999px;
    border: 1px solid #333333;
    color: #a6a6a6;
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0%;
}

@media (max-width: 1160px) {
    .team-card--ceo {
        width: 380px;
    }
}

@media (max-width: 1030px) {
    .team-card--ceo {
        width: 320px;
    }
}

@media (max-width: 950px) {
    .team-card--ceo {
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .team-card--ceo .team-card__image {
        width: 290px;
        height: 350px;
        aspect-ratio: none;
    }

    .team-card__role {
        font-size: 14px;
    }
    .team-card--ceo .team-card__role-row {
        margin-top: 8px;
    }

    .team-card__description {
        font-size: 14px;
    }
    .team-card--ceo .team-card__description {
        padding-top: 8px;
        margin-top: 8px;
    }

    .team-card-badge {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .team-card {
        width: 230px;
    }

    .team-card--fill .team-card__name {
        height: 2.6em;
        overflow: hidden;
    }

    .team-card--fill .team-card__name-part {
        display: block;
    }

    .team-card__image {
        width: 100%;
        height: 240px;
        aspect-ratio: none;
    }

    .team-card--ceo {
        flex-direction: column;
        width: 100%;
    }

    .team-card--ceo .team-card__image {
        width: 100%;
        height: 420px;
    }

    .team-card--ceo .team-card__description {
        padding-top: 20px;
        margin-top: 20px;
    }
}

@media (max-width: 380px) {
    .team-card--ceo .team-card__image {
        width: 100%;
        height: 320px;
    }
}
/* #endregion team-card */

/* #region slider-buttons */
.slider-buttons {
    display: inline-flex;
    gap: 12px;
    padding: 6px;
    border-radius: 999px;
    background: #222222;
}

.slider-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    color: #0a0a0a;
    cursor: pointer;
    transition: 0.2s;
}

.slider-button:hover {
    background: #0ab451;
}

.slider-button:active {
    background: #07873d;
}

.slider-button__icon {
    width: 13px;
    height: 10px;
}

.slider-button.swiper-button-disabled {
    background: #0a0a0a;
    color: white;
}
/* #endregion */

/* #region invited-specialists */
.invited-specialists {
    display: flex;
    gap: 20px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.invited-specialists__head {
    flex: 0 0 auto;
    width: 240px;
}

.invited-specialists__heading {
    color: #8c8c8c;
    font-size: 16px;
}

.invited-specialists__buttons {
    display: none;
}

.invited-specialists__grid {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
}

@media (min-width: 768px) {
    .invited-specialists__grid .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1150px) {
    .invited-specialists {
        gap: 2px;
    }

    .invited-specialists__head {
        width: 180px;
    }
}

@media (max-width: 1024px) {
    .invited-specialists {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .invited-specialists {
        flex-direction: column;
        gap: 20px;
    }

    .invited-specialists__head {
        width: auto;
    }

    .invited-specialists__heading {
        font-size: 14px;
    }
}

/* Телефон: отделы листаются слайдером, на ПК и планшете сетка 2x2 */
@media (max-width: 767px) {
    .invited-specialists {
        overflow: hidden;
    }

    .invited-specialists__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .invited-specialists__buttons {
        display: inline-flex;
    }

    .invited-specialists__grid {
        margin-right: -16px;
    }
}
/* #endregion */

/* #region specialists-list */
.specialists-list {
    width: 100%;
}

.specialists-list__title {
    font-family: Impact, sans-serif;
    font-weight: 400;
    font-size: 24px;
    text-transform: uppercase;
}

.specialists-list__description {
    margin-top: 20px;
    color: #a6a6a6;
    font-size: 16px;
}

.specialists-list__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.specialists-list:nth-of-type(even) {
    padding-left: 20px;
}

.specialists-list:nth-of-type(n + 3) {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid #333333;
}

@media (max-width: 1024px) {
    .specialists-list:nth-of-type(even) {
        padding-left: 8px;
    }
}

@media (max-width: 768px) {
    .specialists-list__description {
        font-size: 14px;
    }

    .specialists-list__list {
        gap: 8px;
    }
}

@media (max-width: 767px) {
    .specialists-list:nth-of-type(n) {
        width: 400px;
        height: auto;
        padding: 24px;
        margin: 0;
        border: 1px solid #333333;
        border-radius: 8px;
    }

    .specialists-list__list {
        gap: 16px;
        padding-top: 20px;
        border-top: 1px solid #333333;
    }
}

@media (max-width: 530px) {
    .specialists-list:nth-of-type(n) {
        width: calc(100vw - 56px);
        padding: 20px 16px;
    }

    .specialists-list__title {
        font-family: Manrope, sans-serif;
        font-weight: 400;
        font-size: 20px;
        text-transform: none;
    }

    .specialists-list__description {
        margin-top: 8px;
    }

    .specialists-list__list {
        padding-top: 16px;
        margin-top: 16px;
    }
}
/* #endregion */

/* #region invited-specialist */
.invited-specialist {
    display: grid;
    grid-template-columns: auto 3fr 2fr;
    align-items: center;
    gap: 16px;
}

.invited-specialist__icon {
    width: 36px;
    height: 36px;
}

.invited-specialist__name {
    font-size: 16px;
    font-weight: 400;
}

.invited-specialist__price {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

@media (max-width: 1024px) {
    .invited-specialist {
        grid-template-columns: auto 1fr 95px;
    }
}

@media (max-width: 768px) {
    .invited-specialist {
        grid-template-columns: auto 1fr 80px;
        gap: 8px;
    }

    .invited-specialist__name {
        font-size: 14px;
    }

    .invited-specialist__price {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .invited-specialist {
        grid-template-columns: auto 1fr auto;
    }
}
/* #endregion */

/* #region how-we-work */
.how-we-work {
    padding-top: 20px;
    padding-bottom: 120px;
}

.how-we-work__heading {
    margin-bottom: 60px;
    color: #8c8c8c;
    font-size: 16px;
    font-weight: 500;
}

.how-we-work__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100%;
}

.how-we-work__intro {
    margin-bottom: 60px;
}

.how-we-work__description {
    max-width: 520px;
    line-height: 1.4;
}

.how-we-work__description > :first-child {
    margin-top: 0;
}

.how-we-work__description > :last-child {
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .how-we-work {
        padding-top: 10px;
        padding-bottom: 50px;
    }

    .how-we-work__heading {
        margin-bottom: 16px;
        color: #8c8c8c;
        font-size: 16px;
        font-weight: 500;
    }

    .how-we-work__list {
        gap: 4px;
        width: 100%;
    }

    .how-we-work__intro {
        margin-bottom: 40px;
    }
}

@media (max-width: 950px) {
    .how-we-work {
        padding-top: 15px;
        padding-bottom: 50px;
    }

    .how-we-work__heading {
        margin-bottom: 25px;
        font-size: 14px;
        font-weight: 500;
    }

    .how-we-work__list {
        gap: 2px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .how-we-work {
        padding-top: 40px;
        padding-bottom: 120px;
    }

    .how-we-work__heading {
        margin-bottom: 5px;
    }

    .how-we-work__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .how-we-work__intro {
        margin-bottom: 40px;
    }
}
/* #endregion */

/* #region info-circle */
.info-circle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 84px;
    min-height: 380px;
}

.info-circle__circle {
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 170px;
    height: 170px;
    border-radius: 9999px;
    border: 1px solid #333333;
    background: #0a0a0a;
}

.info-circle__back-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(-1px);
    border-radius: 9999px;
    background: #1a1a1a;
}

.info-circle__circle-text {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

.info-circle__description {
    box-sizing: border-box;
    width: 100%;
    padding-left: 12px;
    padding-right: 4px;
    color: #999999;
    font-size: 16px;
    font-weight: 500;
}

.info-circle__line {
    position: absolute;
    z-index: 2;
    width: 1px;
}

.info-circle__line--top {
    display: none;
}

.info-circle__line--bottom {
    top: 80px;
    bottom: 5px;
    left: 0;
    width: 1px;
}

.info-circle__line-fill {
    width: 100%;
    height: 100%;
    background: #333333;
}

.info-circle__line-circle {
    position: absolute;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 99px;
    background: #333333;
}

.info-circle__line--top .info-circle__line-circle {
    bottom: 0;
    transform: translate(-50%, 50%);
}

.info-circle__line--bottom .info-circle__line-circle {
    top: 0;
    transform: translate(-50%, -50%);
}

@media (max-width: 1200px) {
    .info-circle {
        gap: 50px;
        min-height: 390px;
    }

    .info-circle__circle {
        width: 150px;
        height: 150px;
    }

    .info-circle__back-circle {
        position: absolute;
        transform: translateZ(-1px);
        border-radius: 9999px;
        background: #1a1a1a;
    }

    .info-circle__line--bottom {
        top: 80px;
        bottom: 5px;
    }

    .info-circle__description {
        padding-left: 8px;
        padding-right: 4px;
    }
}

@media (max-width: 950px) {
    .info-circle {
        gap: 40px;
        min-height: 350px;
    }

    .info-circle__circle {
        width: 125px;
        height: 125px;
    }

    .info-circle__back-circle {
        position: absolute;
        transform: translateZ(-1px);
        border-radius: 9999px;
        background: #1a1a1a;
    }

    .info-circle__line--bottom {
        top: 62px;
        bottom: 8px;
    }

    .info-circle__circle-text {
        font-size: 14px;
    }

    .info-circle__description {
        padding-left: 8px;
        padding-right: 4px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .info-circle {
        align-items: center;
        gap: 0;
        min-height: 0;
    }

    .info-circle__circle {
        width: 130px;
        height: 130px;
    }

    .info-circle__description {
        width: 100%;
        max-width: 330px;
        padding: 0;
        text-align: center;
    }

    .info-circle__line {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        z-index: 2;
        width: 1px;
    }

    .info-circle__line--top,
    .info-circle__line--bottom {
        display: flex;
        height: 55px;
    }

    .info-circle__line-fill {
        width: 100%;
        height: 100%;
        background: #333333;
    }

    .info-circle__line-circle {
        position: absolute;
        left: 50%;
        width: 13px;
        height: 13px;
        border-radius: 99px;
        background: #333333;
    }
}
/* #endregion */

/* #region intro */
.intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
}

.intro__header {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.intro__header-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 640px;
}

.intro__title {
    font-size: 46px;
}

.intro__banner-wrapper {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 620px;
    margin: 30px auto;
}
.intro__banner-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(10, 10, 10, 0) 55.49%, #0a0a0a 80.35%);
}

.intro__banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.intro__body {
    display: grid;
    grid-template-columns: 1fr 600px;
    gap: 10px;
}

.intro__achievements-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.intro__achievement {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
}

.intro__achievement-title {
    font-size: 64px;
    line-height: 100%;
}

.intro__achievement-description {
    align-self: end;
    max-width: 180px;
}

.intro__additional {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.intro__site-link-button {
    width: 100%;
    max-width: 320px;
}

/* Теги идут строкой, а не flex: так работает text-wrap: balance и строки выходят
   одной длины, без одинокого тега внизу. font-size: 0 убирает пробелы между тегами
   из разметки, отрицательный отступ компенсирует поля тегов по краям */
.intro__tags {
    margin: -4px;
    font-size: 0;
    text-wrap: balance;
}

.intro__tag {
    display: inline-block;
    margin: 4px;
    padding: 5px 16px;
    border-radius: 999px;
    border: 1px solid #333333;
}

@media (max-width: 1200px) {
    .intro__body {
        grid-template-columns: 1fr 360px;
    }

    /* колонка тегов 360px, как на телефоне: и шрифт как на телефоне, иначе три строки */
    .intro__tag {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .intro__header-content {
        max-width: 410px;
    }

    .intro__body {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

    .intro__achievements-list {
        display: grid;
        grid-template-columns: repeat(2, 135px);
        gap: 20px;
    }

    .intro__achievement {
        display: flex;
        flex-direction: column;
    }

    .intro__achievement-title {
        font-size: 24px;
        line-height: 130%;
    }

    .intro__additional {
        flex: 1 1 auto;
        width: auto;
        max-width: 360px;
    }

    .intro__tags {
        text-align: right;
    }

    .intro__site-link-button {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .intro__banner-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        max-width: none;
        height: 500px;
        margin: 0;
    }
    .intro__banner-wrapper::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(10, 10, 10, 0) 80%, rgb(14, 14, 14, 0.8) 100%);
    }

    /* Сдвиг кадра на телефоне (свойство кейса BANNER_MOBILE_POSITION): устройство у края не обрезается */
    .intro__banner--mob-right {
        object-position: right center;
    }

    .intro__banner--mob-left {
        object-position: left center;
    }

    .intro__header {
        display: block;
        gap: 40px;
        margin-top: 500px;
    }

    .intro__header-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: auto;
    }

    .intro__title {
        font-size: 24px;
    }

    .intro__body {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
    }

    .intro__achievements-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .intro__achievement-description {
        align-self: start;
    }

    .intro__additional {
        max-width: 100%;
    }

    .intro__tags {
        text-align: left;
    }
}
/* #endregion */

/* #region section-block */
.section-block {
    display: flex;
    align-items: flex-start;
    gap: 55px;
}

.section-block__heading {
    flex-shrink: 0;
    text-wrap: nowrap;
}

div.section-block__heading {
    width: 255px;
}

@media (max-width: 1439px) {
    div.section-block__heading {
        width: 270px;
    }
}

@media (max-width: 1023px) {
    div.section-block__heading {
        width: 140px;
    }
}

@media (max-width: 767px) {
    div.section-block__heading {
        width: 100%;
    }
}

.section-block__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.section-block--stacked {
    flex-direction: column;
    gap: 40px;
}

.section-block--stacked .section-block__heading {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    text-wrap: wrap;
}

.section-block--stacked .section-block__heading-title {
    flex: 0 0 auto;
    width: 240px;
}

.section-block--stacked .section-block__lead {
    font-size: 16px;
    line-height: 140%;
    color: #fff;
    max-width: 520px;
}

@media (max-width: 980px) {
    .section-block--stacked .section-block__lead {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .section-block {
        flex-direction: column;
        gap: 20px;
    }

    .section-block--stacked .section-block__heading {
        flex-direction: column;
        gap: 20px;
    }

    .section-block--stacked .section-block__heading-title {
        width: 100%;
    }
}
/* #endregion */

/* #region possible-risks */
.possible-risks__description {
    font-size: 16px;
    max-width: 520px;
}
.possible-risks__description + .possible-risks__description {
    margin-top: 16px;
}

.possible-risks__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}
.possible-risks__description + .possible-risks__grid {
    margin-top: 20px;
}

@media (max-width: 980px) {
    .possible-risks__description {
        font-size: 14px;
    }

    .possible-risks__grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
}
/* #endregion */

/* #region risk-card */
.risk-card {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #333333;
    overflow-wrap: break-word;
}

.risk-card__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.risk-card__col {
    width: 100%;
    min-width: 0;
}

.risk-card__col-icon {
    width: 28px;
    height: 28px;
}

.risk-card__col-title {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0%;
    font-family: Impact, sans-serif;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: break-word;
}

.risk-card__col-description {
    margin-top: 16px;
    color: #999999;
    font-size: 16px;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 980px) {
    .risk-card__col-description {
        margin-top: 14px;
    }
}

@media (max-width: 570px) {
    .risk-card__row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .risk-card__col-header {
        display: flex;
        gap: 6px;
    }

    .risk-card__col-title {
        margin: -3px 0 0;
    }
}
/* #endregion */

/* #region tech-support-badge */
.tech-support-badge {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 40px;
    border-radius: 40px;
    background: #1a1a1a;
}

.tech-support-badge__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 760px;
}

.tech-support-badge__title {
    font-size: 46px;
}

.tech-support-badge__description {
    font-size: 16px;
}

.tech-support-badge__button {
    width: 100%;
    max-width: 270px;
}

@media (max-width: 768px) {
    .tech-support-badge {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .tech-support-badge__title {
        font-size: 46px;
    }

    .tech-support-badge__description {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .tech-support-badge {
        padding: 20px;
        border-radius: 30px;
    }

    .tech-support-badge__title {
        font-size: 24px;
    }

    .tech-support-badge__button {
        width: 100%;
        max-width: none;
    }
}
/* #endregion */

/* #region services-catalog */
.services-catalog__button {
    margin-top: 20px;
}

.services-catalog__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 270px));
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 60px;
    width: 100%;
}

.services-catalog__item {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.services-catalog__item > a {
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.services-catalog__item-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.services-dropdown {
    width: 100%;
}

.services-catalog__item-title {
    font-size: 24px;
    transition: 0.2s;
}

.services-catalog__item-title:hover {
    color: #0ab451;
}

@media (max-width: 768px) {
    .services-catalog__button {
        margin-top: 20px;
    }

    .services-catalog__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 290px));
        justify-content: space-between;
        column-gap: 20px;
        row-gap: 40px;
    }

    .services-catalog__item {
        gap: 20px;
    }

    .services-catalog__item-list {
        gap: 8px;
    }
}

@media (max-width: 470px) {
    .services-catalog__button {
        margin-top: 20px;
    }

    .services-catalog__grid {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
    }

    .services-catalog__item {
        gap: 20px;
        /* на телефоне список услуг по центру */
        align-items: center;
        text-align: center;
    }

    .services-catalog__item-list {
        gap: 8px;
    }
}
/* #endregion */

/* #region services-dropdown */
.services-dropdown__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 6px 0;
}

.services-dropdown__title-link {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.services-dropdown__title-link:hover {
    color: #0ab451;
}

.services-dropdown__toggle {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    min-height: 0;
    line-height: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    box-sizing: border-box;
}

.services-dropdown__title {
    font-size: 16px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.services-dropdown__arrow-icon {
    flex: 0 0 auto;
    display: block;
    width: 24px;
    height: 24px;
    transition: 0.3s;
}

.services-dropdown__list {
    padding-left: 40px;
    padding-right: 20px;
}

.services-dropdown__list-item {
    margin-top: 12px;
    color: #999999;
    font-size: 16px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.services-dropdown__list-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.services-dropdown__list-item a:hover {
    color: #0ab451;
}

@media (max-width: 470px) {
    /* на телефоне текст пунктов по центру экрана, стрелка справа от текста:
       слева отступ на ширину стрелки с зазором (24 + 12) */
    .services-dropdown__row {
        justify-content: center;
        padding-left: 36px;
    }

    .services-dropdown__title-link {
        flex: 0 1 auto;
    }

    .services-dropdown__list {
        padding-left: 0;
        padding-right: 0;
    }
}
/* #endregion */

/* #region projects-filter */
.projects-filters {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.projects-filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.projects-filter {
    position: relative;
    flex-shrink: 0;
}

.projects-filter__panel {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 210px;
    vertical-align: top;
}

.projects-filter__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    color: #808080;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease, background-color 0.2s ease, border-radius 0.2s ease;
}

.projects-filter--has-value .projects-filter__trigger {
    color: #ffffff;
}

.projects-filter__panel.is-open .projects-filter__trigger {
    border-radius: 8px 8px 0 0;
    background: #262626;
    color: #ffffff;
}

.projects-filter__label {
    flex: 0 1 auto;
    width: auto;
    max-width: calc(100% - 14px);
    min-width: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects-filter__caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    transform-origin: center;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.2s ease;
}

.projects-filter__caret.is-up {
    transform: rotateX(180deg);
}

@media (max-width: 767px) {
    .projects-filter__trigger {
        justify-content: center;
        text-align: center;
    }

    .projects-filter__label {
        text-align: center;
    }
}
/* #endregion */

/* #region feedback-form */
.feedback-form__honeypot {
    position: fixed;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

[data-feedback-nickname-field][hidden] {
    display: none !important;
}

/* Капча лежит в плашке цвета полей формы. Рамку виджета Google (304x78, компактный 164x144)
   прячет окно на 2px меньше, виджет сдвинут на 1px. После галочки плашка сворачивается
   в строку «Проверка пройдена», при истечении проверки возвращается (см. feedback-form.js) */
.feedback-recaptcha__plate {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid #f2f2f2;
    border-radius: 20px;
    background-color: #f2f2f2;
    transition: border-color 0.3s;
}

.form._dark .feedback-recaptcha__plate {
    border-color: #262626;
    background-color: #262626;
}

.feedback-recaptcha.is-error .feedback-recaptcha__plate {
    border-color: #b11932;
}

.feedback-recaptcha__frame {
    flex: 0 0 auto;
    width: 302px;
    height: 76px;
    overflow: hidden;
    border-radius: 4px;
}

/* Высота пустого контейнера нужна до загрузки капчи: по ней IntersectionObserver
   в feedback-form.js понимает, что форма на экране, и подгружает виджет */
.feedback-recaptcha__widget {
    min-height: 78px;
    margin: -1px;
}

/* Строчный iframe капчи оставлял зазор 5px и лишнюю прокрутку в форме */
.feedback-recaptcha__widget iframe {
    display: block;
}

.feedback-recaptcha__note {
    flex: 1 1 auto;
    min-width: 0;
    color: #8c8c8c;
    font-size: 14px;
    line-height: 1.35;
    text-wrap: balance;
}

.feedback-recaptcha__error {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #b11932;
    font-size: 14px;
}

.feedback-recaptcha.is-error .feedback-recaptcha__error {
    display: flex;
}

.feedback-recaptcha__done {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #0ab451;
    border-radius: 20px;
    background-color: rgba(10, 180, 81, 0.08);
    font-size: 15px;
}

.feedback-recaptcha__done svg {
    flex: 0 0 auto;
}

.feedback-recaptcha__done small {
    margin-left: auto;
    color: #8c8c8c;
    font-size: 13px;
}

.feedback-recaptcha.is-passed .feedback-recaptcha__plate {
    display: none;
}

.feedback-recaptcha.is-passed .feedback-recaptcha__done {
    display: flex;
}

.feedback-recaptcha__unavailable {
    padding: 12px 16px;
    border: 1px solid #e44343;
    border-radius: 8px;
    color: #e44343;
    line-height: 1.4;
}

[data-feedback-error-list] {
    display: grid;
    gap: 4px;
}

@media (max-width: 600px) {
    /* На телефоне компактный виджет 164x144 (size: compact в feedback-form.js) */
    .feedback-recaptcha__plate {
        gap: 14px;
        padding: 10px;
    }

    .feedback-recaptcha__frame {
        width: 162px;
        height: 142px;
    }

    .feedback-recaptcha__widget {
        min-height: 144px;
    }

    .feedback-recaptcha__note {
        font-size: 13px;
    }

    .feedback-recaptcha__done small {
        display: none;
    }
}

/* текст согласия в темной форме (модалка заявки) */
.form._dark .checkbox__text {
    color: #fff;
}

@media (max-width: 1023px) {
    /* Прокручивается весь .popup__scroll-container. Внутренний скролл формы на тач-экранах перехватывает свайп, форма не едет */
    .popup__form .form__body {
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .field__textarea {
        height: 62px;
        line-height: 1.4;
    }

    .field__textarea::placeholder {
        text-wrap: balance;
    }
}
/* #endregion */

/* #region reviews-slider */
.reviews-slider__swiper-container {
    width: 100%;
    max-width: 1025px;
}

.reviews-slider .swiper,
.reviews-slider .swiper-wrapper {
    overflow: visible;
}

.reviews-slider__body-col {
    overflow: hidden;
}

.reviews-slider__buttons-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

@media (max-width: 1440px) {
    .reviews-slider__swiper-container {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .reviews-slider__buttons-container {
        display: none;
    }
}
/* #endregion */

/* #region review-card */
.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 500px;
    height: auto;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #333333;
}

.review-card__header {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.review-card__header-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 4px 0;
}

.review-card__body {
    width: 100%;
    margin-top: 40px;
}

.review-card:has(.review-card__button) > .review-card__body {
    margin-bottom: 40px;
}

.review-card__avatar {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    border-radius: 999px;
    object-fit: cover;
    object-position: center center;
}

.review-card__title {
    overflow: hidden;
    font-size: 20px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card__subtitle {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Компания крупно, под ней «Имя, должность» (13.10.2026, вариант 2 заказчика).
   Шапка фиксированной высоты под 2 строки названия и 2 строки подписи: тексты отзывов начинаются
   на одном уровне, а логотип и текст центрованы друг относительно друга при любой длине названия */
.review-card__header:has(.review-card__company) {
    height: 118px;
}

.review-card__company {
    color: #fff;
    font-family: Impact, sans-serif;
    font-size: 30px;
    line-height: 1.05;
    text-transform: uppercase;
}

.review-card__company > span {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.review-card__company + .review-card__subtitle {
    color: #a6a6a6;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.review-card__description {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: auto;
    color: #999999;
    font-size: 16px;
    line-height: 1.4;
    max-height: 12.6em;
    line-clamp: 9;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
}

.review-card__button {
    width: 100%;
    margin-top: auto;
}

.review-card__button + .review-card__button {
    margin-top: 12px;
}

.review-card__button--original {
    border: 1px solid #333333;
    background-color: transparent;
    color: #ffffff;
}

.review-card__button--original svg {
    width: 32px;
    height: 32px;
    color: #0a0a0a;
}

.review-card__button--original:focus-visible,
.review-card__button--original:hover,
.review-card__button--original:active {
    background-color: #1a1a1a;
}

@media (max-width: 1024px) {
    .review-card {
        width: 380px;
        padding: 20px;
    }

    .review-card__body {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .review-card {
        width: 290px;
        padding: 8px;
    }

    .review-card__header {
        gap: 8px;
        height: 96px;
    }

    .review-card__header-content {
        gap: 6px;
        padding: 0;
    }

    .review-card__subtitle {
        font-size: 14px;
    }

    .review-card__company {
        font-size: 18px;
    }

    .review-card__description {
        font-size: 14px;
    }

    .review-card__button--original {
        font-size: 13px;
        white-space: nowrap;
    }
}
/* #endregion */

/* #region project-review */
.review-card.review-card--project {
    width: min(100%, 760px);
    padding: 40px;
    color: #ffffff;
    background: transparent;
}

.project-review .review-card__header {
    height: auto;
}

.project-review .review-card__header-content {
    justify-content: center;
}

.project-review .review-card__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333333;
    color: #ffffff;
    background: #1a1a1a;
    font-size: 20px;
    line-height: 1;
}

.project-review .review-card__title {
    overflow: visible;
    color: #ffffff;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    text-overflow: initial;
    white-space: normal;
}

.project-review .review-card__subtitle {
    display: block;
    overflow: visible;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
    -webkit-line-clamp: initial;
}

.project-review .review-card__description {
    display: block;
    overflow: visible;
    max-height: none;
    color: #999999;
    font-size: 16px;
    line-height: 1.4;
    line-clamp: initial;
    -webkit-line-clamp: initial;
}

.project-review .review-card__description p + p {
    margin-top: 16px;
}

@media (max-width: 768px) {
    .review-card.review-card--project {
        width: 100%;
        padding: 40px 16px;
    }

    .project-review .review-card__header {
        gap: 10px;
    }

    .project-review .review-card__header-content {
        gap: 0;
    }

    .project-review .review-card__avatar {
        width: 46px;
        height: 46px;
    }

    .project-review .review-card__body {
        margin-top: 40px;
    }

    .project-review .review-card__subtitle,
    /* текст по ширине с переносами, как в разделах кейса (вариант 3 заказчика, 14.10.2026) */
    .project-review .review-card__description {
        font-size: 15px;
        line-height: 1.55;
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}
/* #endregion */

/* #region price-card */
.price-card__badge {
    padding: 3px 16px;
    border-radius: 999px;
    background: #0a0a0a;
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
}
.price-card__badge--clr-white {
    border: 1px solid #ffffff;
    color: #ffffff;
}
.price-card__badge--clr-gray {
    border: 1px solid #333333;
    color: #a6a6a6;
}

.price-card__clients-choice-badge {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    transform: translate(30px, -10px) rotateZ(7deg);
    padding: 7px 16px;
    border-radius: 999px;
    background: #0ab451;
    color: #fff;
    text-wrap: nowrap;
}

.price-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* счетчик и стрелки карусели нужны только на телефоне */
.price-section__controls {
    display: none;
    align-items: center;
    gap: 16px;
}

.price-section__counter {
    font-size: 14px;
    color: #999999;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.price-section__counter-current {
    color: #ffffff;
}

.price-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
}

.price-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 20px;
    width: 100%;
    height: 100%;
    padding: 25px;
}

.price-card__row {
    width: 100%;
}

.price-card__row--second {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.price-card__title {
    font-family: Impact;
    font-size: 40px;
    text-transform: uppercase;
}

.price-card__price-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    margin-top: 24px;
    border-bottom: 1px solid #333333;
}

.price-card__price-list-item {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
}

.price-card__badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.price-card__description-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.price-card__description-list--laptop {
    display: none;
}

.price-card__description-list-item {
    font-weight: 500;
    font-size: 16px;
}

.price-card__point-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    padding-inline-start: 20px;
    margin-top: 20px;
}

.price-card__point-list-item {
    font-weight: 500;
    font-size: 16px;
    list-style-type: disc;
}
.price-card__point-list-item--clr-white {
    color: #ffffff;
}
.price-card__point-list-item--clr-gray {
    color: #a6a6a6;
}

.price-card__bg-image {
    position: absolute;
    z-index: -1;
    overflow: hidden;
}
.price-card__bg-image--desktop {
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    border-radius: 0 12px 12px 0;
}
.price-card__bg-image--laptop {
    display: none;
}
.price-card__bg-image--mobile {
    display: none;
}

.price-card__button--laptop {
    display: none;
}

@media (max-width: 1300px) {
    .price-section__grid {
        display: flex;
        flex-direction: column;
        gap: 65px;
        width: 100%;
    }

    .price-card__clients-choice-badge {
        position: absolute;
        right: unset;
        left: 220px;
        top: 10px;
        transform: translate(0) rotateZ(7deg);
    }

    .price-card {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 360px));
        grid-template-rows: auto;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        height: auto;
        padding: 25px;
    }

    .price-card__row {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .price-card__row--second {
        justify-content: flex-end;
        gap: 0;
    }

    .price-card__price-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 20px;
        margin-top: 24px;
        border-bottom: 1px solid #333333;
    }

    .price-card__price-list-item {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
    }

    .price-card__badges-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
        margin-top: 20px;
    }

    .price-card__description-list {
        margin-top: 0;
    }
    .price-card__description-list--desktop {
        display: none;
    }
    .price-card__description-list--laptop {
        display: flex;
    }

    .price-card__bg-image--desktop {
        display: none;
    }
    .price-card__bg-image--laptop {
        display: block;
        right: 0;
        bottom: 0;
        height: 100%;
        width: auto;
    }

    .price-card__button {
        margin-top: 24px;
    }

    .price-card__button--desktop {
        display: none;
    }
    .price-card__button--laptop {
        display: inline-flex;
    }
}

@media (max-width: 768px) {
    .price-card {
        grid-template-columns: repeat(2, minmax(0, 280px));
        padding: 12px;
    }

    .price-card__row {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .price-card__row--second {
        justify-content: flex-end;
        gap: 0;
    }

    .price-card__price-list-item,
    .price-card__description-list-item,
    .price-card__point-list-item,
    .price-card__badge,
    .price-card__clients-choice-badge,
    .price-card__button {
        font-size: 14px;
    }

    .price-card__bg-image--desktop {
        display: none;
    }
    .price-card__bg-image--laptop {
        display: block;
        right: 0;
        bottom: 0;
        height: 100%;
        width: auto;
    }

    .price-card__button {
        margin-top: 24px;
    }
    .price-card__button--desktop {
        display: none;
    }
    .price-card__button--laptop {
        display: inline-flex;
    }
}

/* Телефон: тарифы в карусели (js/tariffs-slider.js), следующая карточка выглядывает справа */
@media (max-width: 767px) {
    .price-section {
        overflow: hidden;
    }

    .price-section__controls {
        display: flex;
    }

    .price-section__grid {
        flex-direction: row;
        gap: 0;
    }

    .price-card {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        padding: 20px;
        border: 1px solid #262626;
        border-radius: 20px;
    }

    /* карточки в карусели одной высоты: запас места у коротких тарифов остается внизу, а не над условиями */
    .price-card__row--second {
        justify-content: flex-start;
    }

    .price-card__clients-choice-badge {
        left: unset;
        right: 12px;
        top: -14px;
        padding: 6px 14px;
        border-radius: 999px;
        font-size: 14px;
    }

    .price-card__bg-image--laptop {
        display: none;
    }
    .price-card__bg-image--mobile {
        top: 80px;
        right: 0;
        display: block;
        width: 130px;
        height: auto;
    }
}
/* #endregion */

/*#region key-block */
.key-block {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 70px;
    padding-bottom: 130px;
}

.key-block__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 1 1 auto;
    width: 100%;
    max-width: 600px;
}

.key-block__header {
    display: flex;
    gap: 20px;
}

.key-block__decor-arrow {
    position: absolute;
    left: -55px;
    top: 145px;
    z-index: -1;
}

.key-block__key-icon {
    flex: 0 0 auto;
    width: 85px;
    height: 34px;
    color: #fff;
}

.key-block__title {
    font-size: 24px;
    line-height: 140%;
    font-family: Impact, sans-serif;
    text-transform: uppercase;
}

.key-block__description {
    font-size: 16px;
    line-height: 140%;
    color: #999999;
}

.key-block__tabs-container {
    flex: 0 1 600px;
    width: 600px;
    min-width: 0;
}

/* «Продюсер объединяет всех»: три роли в ряд, линии от них к широкой карточке IT-продюсера
   (порядок открытия - js/key-block.js) */
.key-block__roles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.key-block__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    height: 26px;
}

.key-block__links i {
    justify-self: center;
    width: 2px;
    height: 100%;
    background: #0ab451;
    box-shadow: 0 0 8px rgba(10, 180, 81, 0.6);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s ease;
}

.key-block__team.is-linked .key-block__links i {
    transform: scaleY(1);
}

.key-block__team.is-linked .key-block__links i:nth-child(2) {
    transition-delay: 0.08s;
}

.key-block__team.is-linked .key-block__links i:nth-child(3) {
    transition-delay: 0.16s;
}

@media (max-width: 1024px) {
    .key-block {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .key-block__decor-arrow {
        display: none;
    }

    .key-block__content {
        flex-direction: row;
        gap: 20px;
        max-width: 100%;
    }

    .key-block__header {
        flex-direction: row;
        gap: 8px;
        flex: 1 0 auto;
        width: 100%;
        max-width: 340px;
    }

    .key-block__description {
        flex: 1 1 auto;
        padding-right: 10px;
    }

    .key-block__tabs-container {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 960px) {
    .key-block__header {
        max-width: 280px;
    }

    .key-block__description {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .key-block__content {
        flex-direction: column;
    }

    .key-block__header {
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
    }

    .key-block__key-icon {
        width: 68px;
        height: 27px;
    }

    .key-block__title {
        font-size: 22px;
    }

    .key-block__description {
        font-size: 14px;
    }

    .key-block__tabs-container {
        margin-top: 8px;
    }

    /* роли столбиком, связь идет зеленой линией слева от роли к роли и к продюсеру */
    .key-block__roles {
        grid-template-columns: minmax(0, 1fr);
    }

    .key-block__links {
        display: none;
    }
}
/* #endregion */

/* #region key-block-tab */
.key-block-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    border-radius: 20px;
    border: 1px solid #333333;
    background: #0a0a0a;
    color: #fff;
    transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.key-block-tab__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.key-block-tab__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 48px;
    color: #fff;
    transition: color 0.35s ease;
}

.key-block-tab__lock--open {
    display: none;
}

/* открытый замок: вздрагивание и подъем дужки рисует js/key-block.js, цвет меняется плавно */
.key-block-tab.is-open {
    border-color: rgba(10, 180, 81, 0.55);
}

.key-block-tab.is-open .key-block-tab__icon {
    color: #0ab451;
}

.key-block-tab.is-open .key-block-tab__lock--closed {
    display: none;
}

.key-block-tab.is-open .key-block-tab__lock--open {
    display: block;
}

.key-block-tab__title {
    font-size: 24px;
    line-height: 140%;
    font-family: Impact, sans-serif;
    text-transform: uppercase;
    word-break: break-word;
}

.key-block-tab__value {
    margin-top: 16px;
}

.key-block-tab__number {
    display: block;
    font-family: Impact, sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    color: #0ab451;
}

.key-block-tab__caption {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: #9a9a9a;
}

/* числа и подписи появляются вместе с открытием замка; без скрипта видны сразу */
.key-block__team.is-animated .key-block-tab__number,
.key-block__team.is-animated .key-block-tab__caption {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.key-block__team.is-animated .key-block-tab__caption {
    transition-delay: 0.08s;
}

.key-block__team.is-animated .key-block-tab.is-open .key-block-tab__number,
.key-block__team.is-animated .key-block-tab.is-open .key-block-tab__caption {
    opacity: 1;
    transform: none;
}

.key-block-tab--producer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
}

.key-block-tab--producer .key-block-tab__body {
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.key-block-tab--producer .key-block-tab__title {
    white-space: nowrap;
}

.key-block-tab--producer .key-block-tab__value {
    margin-top: 0;
    text-align: right;
}

.key-block-tab--producer .key-block-tab__caption {
    margin-top: 0;
    font-size: 15px;
    color: #c8c8c8;
}

.key-block-tab--producer.is-open {
    border-color: #0ab451;
    background: rgba(10, 180, 81, 0.08);
    box-shadow: 0 0 24px rgba(10, 180, 81, 0.18);
}

/* метка «Ваш главный контакт» над карточкой продюсера и полная подпись - только на телефоне,
   на ПК и планшете рядом с заголовком помещается короткая */
.key-block-tab__badge,
.key-block-tab__caption-full {
    display: none;
}

@media (max-width: 767px) {
    /* сетка карточки: замок | название и подпись | число справа */
    .key-block-tab {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        column-gap: 14px;
        row-gap: 4px;
        align-items: center;
        padding: 16px;
    }

    .key-block-tab__body,
    .key-block-tab__value {
        display: contents;
    }

    .key-block-tab__icon {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 34px;
        height: 40px;
    }

    .key-block-tab__title {
        grid-column: 2;
        grid-row: 1;
        font-size: 20px;
        line-height: 1.2;
    }

    .key-block-tab__caption {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    .key-block-tab__number {
        grid-column: 3;
        grid-row: 1 / 3;
        font-size: 28px;
        text-align: right;
    }

    .key-block-tab--role::after {
        content: "";
        position: absolute;
        left: 34px;
        top: 100%;
        width: 2px;
        height: 12px;
        background: #0ab451;
        box-shadow: 0 0 8px rgba(10, 180, 81, 0.6);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.3s ease;
    }

    .key-block-tab--role.is-linked::after {
        transform: scaleY(1);
    }

    /* продюсер (вариант «Метка и крупное слово», выбран заказчиком 09.10.2026):
       метка «Ваш главный контакт» на верхней рамке, «IT-ПРОДЮСЕР» крупно в одну строку */
    .key-block-tab--producer {
        margin-top: 24px;
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 22px 16px 18px;
    }

    .key-block-tab--role:last-child::after {
        height: 24px;
    }

    .key-block-tab--producer.is-open {
        background: rgba(10, 180, 81, 0.1);
        box-shadow: 0 0 36px rgba(10, 180, 81, 0.3);
    }

    .key-block-tab--producer .key-block-tab__title {
        font-size: clamp(26px, 9vw, 34px);
        line-height: 1.1;
    }

    .key-block-tab--producer .key-block-tab__caption {
        font-size: 14px;
        text-align: left;
    }

    .key-block-tab__caption-full {
        display: inline;
    }

    .key-block-tab__caption-short {
        display: none;
    }

    .key-block-tab__badge {
        display: block;
        position: absolute;
        left: 16px;
        top: 0;
        transform: translateY(-50%);
        padding: 4px 10px;
        border-radius: 999px;
        background: #0ab451;
        color: #0a0a0a;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: opacity 0.4s ease 0.2s;
    }

    .key-block__team.is-animated .key-block-tab__badge {
        opacity: 0;
    }

    .key-block__team.is-animated .key-block-tab--producer.is-open .key-block-tab__badge {
        opacity: 1;
    }
}
/* #endregion */

/* #region services-pricing */
.services-pricing.section-block {
    gap: 120px;
}

.services-pricing .section-block__body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.services-pricing-card {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 16px;
    border-radius: 20px;
    border: 1px solid #1a1a1a;
}

.services-pricing-card--clr-black {
    background: #0a0a0a;
}
.services-pricing-card--clr-light-gray {
    background: #1a1a1a;
}

.services-pricing-card--wide {
    grid-column: span 2;
}

.services-pricing-card__divider {
    width: 100%;
    height: 1px;
    border: none;
    background: #1a1a1a;
}

.services-pricing-card__checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1a1a1a;
}

.services-pricing-card__checkbox-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.services-pricing-card__heading {
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
}

.services-pricing-card__text-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
}

.services-pricing-card__text-block-description {
    color: #999999;
}

@media (max-width: 1065px) {
    .services-pricing.section-block {
        gap: 40px;
    }
}

@media (max-width: 980px) {
    .services-pricing .section-block__body {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-pricing-card {
        gap: 20px;
    }

    .services-pricing-card--wide {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .services-pricing .section-block__body {
        gap: 8px;
    }

    .services-pricing-card__text-block {
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    .services-pricing .section-block__body {
        grid-template-columns: 1fr;
    }
}
/* #endregion */

/* #region responsibility-zones */
/* Две карточки «Заказчик» и «Исполнитель», между ними линия передачи.
   Телефон и планшет: карточки друг под другом, от 1024px рядом. Анимация передачи в js/main.js */
.responsibility-zones__relay {
    display: grid;
    grid-template-rows: auto 96px auto;
    max-width: 560px;
}

.responsibility-zones__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px;
    border: 1px solid #262626;
    border-radius: 20px;
    background: #0a0a0a;
    transition:
        border-color 0.4s,
        box-shadow 0.4s;
}

.responsibility-zones__card--2 {
    border-color: #1a1a1a;
    background: #1a1a1a;
}

/* карточка, к которой пришла задача или готовая работа */
.responsibility-zones__card.is-hit {
    border-color: #0ab451;
    box-shadow:
        0 0 0 4px rgba(10, 180, 81, 0.12),
        0 10px 40px -10px rgba(10, 180, 81, 0.45);
}

.responsibility-zones__card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.responsibility-zones__card-title {
    font-family: Impact, sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.responsibility-zones__card-role {
    padding: 2px 12px;
    border: 1px solid #333333;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.6;
    color: #a6a6a6;
}

.responsibility-zones__card-text {
    font-size: 15px;
    line-height: 1.45;
    color: #bfbfbf;
}

.responsibility-zones__wire {
    position: relative;
    z-index: 1;
}

.responsibility-zones__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    overflow: hidden;
    background: #262626;
}

.responsibility-zones__line-fill {
    position: absolute;
    inset: 0;
    background: #0ab451;
    transform-origin: top;
    transform: scaleY(0);
}

.responsibility-zones__dot {
    position: absolute;
    left: 50%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: #0ab451;
    color: #0a0a0a;
    box-shadow: 0 0 18px rgba(10, 180, 81, 0.6);
    opacity: 0;
}

.responsibility-zones__dot svg {
    width: 16px;
    height: 16px;
}

.responsibility-zones__dot--result {
    background: #fff;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* без анимации линия сразу заполнена, точки не показываются */
@media (prefers-reduced-motion: reduce) {
    .responsibility-zones__line-fill {
        transform: none;
    }
}

/* блок начинается от левого края описания: заголовок раздела 240px + отступ 20px */
@media (min-width: 769px) {
    .responsibility-zones .section-block__body {
        padding-left: 260px;
    }
}

@media (min-width: 1024px) {
    .responsibility-zones__relay {
        grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
        grid-template-rows: auto;
        max-width: none;
    }

    .responsibility-zones__card {
        gap: 18px;
        padding: 32px 28px;
    }

    .responsibility-zones__card-title {
        font-size: 36px;
    }

    .responsibility-zones__card-text {
        font-size: 16px;
    }

    .responsibility-zones__line {
        left: 0;
        right: 0;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 2px;
        margin: -1px 0 0;
    }

    .responsibility-zones__line-fill {
        transform-origin: left;
        transform: scaleX(0);
    }

    .responsibility-zones__dot {
        left: 0;
        top: 50%;
    }

    /* задача идет слева направо */
    .responsibility-zones__dot--task svg {
        transform: rotate(-90deg);
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .responsibility-zones__relay {
        grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    }

    .responsibility-zones__card {
        padding-left: 22px;
        padding-right: 22px;
    }

    .responsibility-zones__card-title {
        font-size: 28px;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .responsibility-zones__line-fill {
        transform: none;
    }
}

@media (max-width: 767px) {
    .responsibility-zones__card-title {
        font-size: 26px;
    }

    .responsibility-zones__card-role {
        padding: 1px 10px;
        font-size: 12px;
    }
}
/* #endregion */

/* #region services-request-badge */
@media (max-width: 650px) {
    .services-request-badge {
        padding-bottom: 0;
    }
}
/* #endregion */

/* #region projects-slider-devices */
/* Главная: слайдер проектов для ПК и для мобильной версии, см. /index.php */
@media (max-width: 767px) {
    .projects-slider--pc {
        display: none;
    }
}

@media (min-width: 768px) {
    .projects-slider--mob {
        display: none;
    }
}

/* ПК: устройство (картинка без пустых полей) вписано в рамку в масштабе AURUS -
   планшет на 71.6% ширины карточки, по центру, на фоне #191919 */
.projects-slider--pc .projects-slider__img {
    background-color: #191919;
}

.projects-slider--pc .projects-slider__img img {
    top: 11.1%;
    left: 14.2%;
    width: 71.6%;
    height: 77.8%;
    object-fit: contain;
}
/* #endregion */

/* #region projects-slider-meta */
/* Главная: направление плашкой в правом нижнем углу обложки, под описанием бюджет и срок через зеленую точку.
   Выводятся, только если в вызове projects_main заданы DIRECTION_PROPERTY_CODE и META_PROPERTY_CODE */
.projects-slider__chip {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    max-width: calc(100% - 24px);
    padding: 3px 10px;
    border: 1px solid #00c15b;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #00c15b;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects-slider__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin-top: 10px;
    color: #8c8c8c;
    font-size: 14px;
    line-height: 1.3;
}

.projects-slider__meta span {
    white-space: nowrap;
}

.projects-slider__meta span + span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: #00c15b;
    vertical-align: middle;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .projects-slider__chip {
        right: 8px;
        bottom: 8px;
        padding: 2px 8px;
        border-color: #fff;
        color: #fff;
        font-size: 11px;
    }

    .projects-slider__meta {
        margin-top: 6px;
        font-size: 12px;
    }

    .projects-slider__meta span + span::before {
        margin: 0 6px;
    }
}
/* #endregion */

/* #region other-projects-cards */
/* «Другие проекты» внизу кейса и мобильный слайдер главной: устройство (картинка без пустых
   полей) вписывается в рамку целиком с одинаковым отступом 6% на фоне #191919, описание одной высоты.
   Описание одной высоты и у ПК-слайдера главной: короткий текст №180 занимает 2 строки на карточке
   400px и 3 строки на карточке 250px (до 1024px) */
.other-projects .projects-slider__img,
.projects-slider--mob .projects-slider__img {
    background-color: #191919;
}

.other-projects .projects-slider__img img,
.projects-slider--mob .projects-slider__img img {
    top: 6%;
    left: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.other-projects .projects-slider__body .c-gray-300,
.projects-slider--mob .projects-slider__body .c-gray-300,
.projects-slider--pc .projects-slider__body .c-gray-300 {
    min-height: 2lh;
}

.other-projects .projects-slider__body .c-gray-300 p,
.projects-slider--mob .projects-slider__body .c-gray-300 p,
.projects-slider--pc .projects-slider__body .c-gray-300 p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

@media (max-width: 1024px) {
    .projects-slider--pc .projects-slider__body .c-gray-300 {
        min-height: 3lh;
    }

    .projects-slider--pc .projects-slider__body .c-gray-300 p {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (max-width: 767px) {
    .other-projects .projects-slider__body .c-gray-300,
    .projects-slider--mob .projects-slider__body .c-gray-300 {
        min-height: 3lh;
    }

    .other-projects .projects-slider__body .c-gray-300 p,
    .projects-slider--mob .projects-slider__body .c-gray-300 p {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}
/* #endregion */

/* #region mobile-form-titles: заголовки форм без висячего слова в последней строке */
@media (max-width: 767px) {
    .footer__head .title,
    .success-form__block .title {
        text-wrap: balance;
    }
}
/* #endregion mobile-form-titles */

/* #region services-stack */
/* /services/, телефон: карточки услуг складываются стопкой. Класс и номера карточек ставит js/services-stack.js */
@media (max-width: 767px) {
    .cards-services--stack .cards-services__col {
        position: sticky;
        top: calc(var(--services-stack-top) + var(--card-index) * 8px);
    }

    /* под карточкой не должна просвечивать предыдущая */
    .cards-services--stack .card-services {
        background: #0a0a0a;
    }

    /* навигация по группам остается над карточками, которые уходят вверх вместе со стопкой */
    .sticky-section__side {
        z-index: 2;
    }
}
/* #endregion */

/* #region news-cards */
/* /news/ и «Другие статьи» под статьей: заголовок без одного слова в последней строке, тег в одну строку */
.card-news__title {
    text-wrap: balance;
}

.card-other-news__tag {
    white-space: nowrap;
}

.card-other-news__title {
    text-wrap: balance;
}

@media (max-width: 767px) {
    /* вкладки /news/ на телефоне: в две строки на 390 */
    .chips--second .chips__body {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* #endregion */

/* #region header-menu-mobile */
/* мобильное меню (бургер до 1000px): пункты и контакты плотнее, как остальной текст сайта.
   В app.css объявлен только Manrope 500, начертания 600/700 подключены здесь */
@font-face {
    font-display: swap;
    font-family: Manrope;
    font-style: normal;
    font-weight: 600;
    src:
        url(../fonts/Manrope-SemiBold.woff2) format("woff2"),
        url(../fonts/Manrope-SemiBold.woff) format("woff");
}

@font-face {
    font-display: swap;
    font-family: Manrope;
    font-style: normal;
    font-weight: 700;
    src:
        url(../fonts/Manrope-Bold.woff2) format("woff2"),
        url(../fonts/Manrope-Bold.woff) format("woff");
}

@media (max-width: 1000px) {
    .header__nav > ul > li > a {
        font-weight: 700;
    }

    .header-menu__social-link {
        font-weight: 600;
    }
}
/* #endregion */

/* #region case-article-typography: оформление текста кейсов и статей (вариант 4, 03.10.2026) */
/* Заголовки разделов кейса - фирменным Impact капсом, текст светлее и крупнее.
   На ПК и планшете заголовок в левой колонке 24px: так длинные слова («позиционирование»)
   не рвутся посередине, а заголовок занимает не больше двух строк. */
.stage-project .two-cols__head h2,
.result-project .two-cols__head h2,
.project-review .two-cols__head h2,
.team-project .two-cols__head h2,
.tools--project .two-cols__head h2 {
    margin-bottom: 14px;
    color: #fff;
    font-family: Impact, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

/* у части разделов кейса заголовка нет - пустой h2 не должен давать отступ */
.stage-project .two-cols__head h2:empty {
    display: none;
}

.stage-project.pv-20-mob,
.result-project.pv-20-mob,
.project-review.pv-20-mob,
.team-project.pv-20-mob,
.tools--project.pv-20-mob {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* «V» у раздела «Команда»: в app.css она поднята над секцией в расчете на отступ 100px,
   при отступе 32px верх буквы срезался overflow: hidden. На телефоне места хватает. */
@media (min-width: 768px) {
    .team-project__decor {
        top: 30px;
    }
}

/* на планшете список команды доходит до правого края - «V» справа от заголовка */
@media (min-width: 768px) and (max-width: 1023px) {
    .team-project__decor {
        right: auto;
        left: 125px;
    }
}

.stage-project__text,
.stage-project__text li {
    color: #cfcfcf;
    font-size: 16px;
    line-height: 1.6;
}

.stage-project__text ul li {
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .stage-project .two-cols__head h2,
    .result-project .two-cols__head h2,
    .project-review .two-cols__head h2,
    .team-project .two-cols__head h2,
    .tools--project .two-cols__head h2 {
        font-size: 24px;
    }
}

/* на планшете левая колонка кейса 140px - расширяем до 240px, как в статьях */
@media (min-width: 768px) and (max-width: 1023px) {
    .stage-project .two-cols__head,
    .result-project .two-cols__head,
    .project-review .two-cols__head,
    .team-project .two-cols__head,
    .tools--project .two-cols__head {
        width: 240px;
    }
}

/* Статьи: подзаголовки в левой колонке тем же Impact, текст как в кейсах */
.news-page__row-title h3 {
    margin-bottom: 14px;
    color: #fff;
    font-family: Impact, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

.news-page__row-description,
.news-page__row-description p,
.news-page__row-description li {
    color: #cfcfcf;
    font-size: 16px;
    line-height: 1.6;
}

/* редактор оборачивает абзацы в <span style="font-size: 11pt">, размер берем от абзаца */
.news-page__row-description span[style*="font-size"] {
    font-size: inherit !important;
}

.news-page__row-description b,
.news-page__row-description strong {
    color: #fff;
    font-weight: 700;
}

/* Телефон: текст кейсов и статей по ширине с переносами, 15px (вариант 3 заказчика, 14.10.2026,
   витрина /tekst-po-krayu-53996e/). Без переносов по ширине между словами появляются дыры */
@media (max-width: 767px) {
    .stage-project__text,
    .stage-project__text li,
    .news-page__row-description,
    .news-page__row-description p,
    .news-page__row-description li {
        font-size: 15px;
        line-height: 1.55;
    }

    .stage-project__text,
    .news-page__row-description,
    .intro__header-content p {
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}
/* #endregion */

/* #region case-partner: плашка «Совместно с» на обложке кейса (свойство PARTNERS, 06.10.2026) */
/* Текст плашки начинается по колонке заголовка (отступ .container 80px):
   left = 80 - 20 (поле плашки) - 1 (рамка) */
.intro__partner {
    position: absolute;
    left: 59px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    max-width: calc(100% - 118px);
    /* Поля сверху и снизу равные, надпись по центру. --partner-plate-pad (px при шрифте 16)
       считает result_modifier: лого помещается в плашку, кроме части выше data-plate-above (крестик Extyl выходит за край) */
    padding: calc(var(--partner-plate-pad, 12) * 1em / 16) 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: 16px;
    line-height: 1.3;
}

.intro__partner-label {
    flex: none;
    color: #bbbbbb;
}

.intro__partner-and {
    color: #bbbbbb;
}

/* Лого для плашки (LOGO_CASE), размеры в px при шрифте 16px приходят из result_modifier:
   --partner-logo-height - высота холста, --partner-logo-descent - сколько холста ниже базовой линии
   надписи (6px под y и p, больше у лого со второй строкой: PW agency, значок CreativePeople).
   Картинка встает низом на базовую линию текста, top опускает ее на descent, поле сверху
   снимает все, что выше строки текста: высоту плашки задает только --partner-plate-pad */
.intro__partner-logo {
    position: relative;
    top: calc(var(--partner-logo-descent, 6) * 1em / 16);
    flex: none;
    width: auto;
    height: calc(var(--partner-logo-height, 24) * 1em / 16);
    margin-top: min(calc(var(--partner-logo-descent, 6) * -1em / 16), calc((16 - var(--partner-logo-height, 24)) * 1em / 16));
    margin-bottom: calc(var(--partner-logo-descent, 6) * -1em / 16);
}

.intro__partner-name {
    color: #ffffff;
}

@media (max-width: 1439px) {
    .intro__partner {
        left: 11px;
        max-width: calc(100% - 22px);
    }
}

/* Отступ колонки 20px и меньше: плашка прижата к краю обложки, поле слева равно отступу колонки */
@media (max-width: 1023px) {
    .intro__partner {
        left: 0;
        max-width: calc(100% - 20px);
        padding-left: 20px;
        border-left: 0;
        border-radius: 0 999px 999px 0;
    }
}

@media (max-width: 767px) {
    .intro__partner {
        bottom: 16px;
        max-width: calc(100% - 16px);
        padding-left: 16px;
        font-size: 13px;
    }
}
/* #endregion */

/* #region scroll-behavior: без плавной прокрутки страницы (09.10.2026) */
/* В app.css у html и body стоит scroll-behavior: smooth. ScrollTrigger при пересчете
   прокручивает страницу к началу и сразу меряет блоки; с плавной прокруткой он меряет
   до того, как страница доехала, и если страницу открыли не с самого верха
   (обновили посередине, вернулись «Назад»), границы анимаций съезжают: карточки
   intro-stack на главной перестают размываться при складывании. Якорных переходов
   на сайте нет, плавная прокрутка из скриптов задается явно (behavior: "smooth"). */
html,
body {
    scroll-behavior: auto;
}
/* #endregion */

/* #region scroll-top: кнопка «Наверх» на телефоне (js/scroll-top.js, разметка в footer.php, 09.10.2026) */
.scroll-top {
    display: none;
}

@media (max-width: 767px) {
    .scroll-top {
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 8; /* ниже шапки с меню (10), cookie-плашки (9) и окна заявки */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid #3a3a3a;
        border-radius: 50%;
        background: rgba(26, 26, 26, 0.92);
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px) scale(0.9);
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s, border-color 0.2s ease;
    }

    .scroll-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, border-color 0.2s ease;
    }

    .scroll-top:active {
        border-color: #0ab451;
        color: #0ab451;
    }

    .scroll-top:focus-visible {
        outline: 2px solid #0ab451;
        outline-offset: 2px;
    }

    .scroll-top svg {
        width: 26px;
        height: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-top {
        transition: none;
    }
}
/* #endregion */

/* #region slider-pointer: листание слайдеров мышью и трекпадом на ПК (js/slider-pointer.js, 12.10.2026) */
@media (hover: hover) and (pointer: fine) {
    .swiper-horizontal:not(.swiper-lock) {
        cursor: grab;
    }

    .swiper-horizontal:not(.swiper-lock):active {
        cursor: grabbing;
    }
}

/* Ссылки меню и карточек слайдеров не перетаскиваются: при клике со сдвигом курсора Chrome и Safari
   начинали тащить ссылку, переход не срабатывал */
.header__nav a,
.swiper a,
.swiper img {
    -webkit-user-drag: none;
}
/* #endregion */

/* #region header-nav-menu-all: кнопка «Все услуги» в выпадающем меню (12.10.2026) */
.header-nav-menu__all {
    grid-column: 1 / -1;
    justify-self: start;
}
/* #endregion */

/* #region header-nav-menu-sub: подуслуги в выпадающем меню «Услуги» (13.10.2026, вариант 2 заказчика).
   Пункт - строка-аккордеон, под ней «Все о направлении» и виды услуги (разметка в menu/main/template.php).
   Колонка по ширине самого длинного пункта: «Проектирование и веб-дизайн» со стрелкой в одну строку */
@media (min-width: 1000px) {
    .header-nav-menu {
        grid-template-columns: repeat(3, minmax(220px, max-content));
        align-items: start;
    }

    .header-nav-menu-section__list {
        gap: 4px;
    }

    .header-nav-menu-sub__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: calc(100% + 24px);
        margin: 0 -12px;
        padding: 10px 12px;
        border-radius: 10px;
        color: #fff;
        font: inherit;
        text-align: left;
        white-space: nowrap;
        transition: background-color 0.2s;
    }

    .header-nav-menu-sub__toggle svg {
        flex: 0 0 auto;
        color: #8c8c8c;
        transition: transform 0.2s, color 0.2s;
    }

    .header-nav-menu-sub._open .header-nav-menu-sub__toggle {
        background: #262626;
    }

    .header-nav-menu-sub._open .header-nav-menu-sub__toggle svg {
        transform: rotate(180deg);
        color: #0ab451;
    }

    /* наведение: активная строка зеленая (просьба заказчика 13.10) */
    .header-nav-menu-sub__toggle:hover,
    .header-nav-menu-sub._open .header-nav-menu-sub__toggle:hover {
        background: #0ab451;
    }

    .header-nav-menu-sub__toggle:hover svg,
    .header-nav-menu-sub._open .header-nav-menu-sub__toggle:hover svg {
        color: #fff;
    }

    .header-nav-menu-sub__toggle:focus-visible {
        outline: 2px solid #0ab451;
        outline-offset: 2px;
    }

    .header-nav-menu-sub__list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px 0 10px;
    }

    .header-nav-menu-sub__list a {
        display: block;
        padding: 6px 0;
        color: #a6a6a6;
        font-size: 14px;
        transition: color 0.2s;
    }

    .header-nav-menu-sub__list .header-nav-menu-sub__all a,
    .header-nav-menu-sub__list a:hover {
        color: #0ab451;
    }
}

@media (min-width: 1000px) and (max-width: 1160px) {
    .header-nav-menu {
        grid-template-columns: repeat(2, minmax(200px, max-content));
    }
}
/* #endregion */

/* #region card-more: кнопка «Подробнее» в карточках услуг (13.10.2026, вариант 3 заказчика).
   /services/ (.card-services) и «Вид услуги» на странице услуги (.card-choice): на ПК в правом верхнем углу
   вместо стрелки, на телефоне во всю ширину внизу карточки. Наведение - зеленая рамка и зеленая кнопка */
.card-services,
.card-choice {
    position: relative;
}

.card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 5px 0 14px;
    border-radius: 999px;
    background: #262626;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.card-more svg {
    flex: 0 0 auto;
}

.card-more__dot {
    fill: #0ab451;
    transition: fill 0.3s;
}

.card-more__arrow {
    stroke: #fff;
    transition: stroke 0.3s;
}

@media (min-width: 768px) {
    .card-more {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .card-choice .card-more {
        right: 16px;
    }

    .card-services__title,
    .card-choice__title {
        padding-right: 140px;
    }
}

@media (max-width: 767px) {
    .card-more {
        justify-content: space-between;
        width: 100%;
        height: 44px;
        margin-top: 16px;
        padding: 0 6px 0 20px;
        font-size: 16px;
    }

    .card-more svg {
        width: 32px;
        height: 32px;
    }
}

@media (any-hover: hover) {
    .card-services {
        transition: border-color 0.3s;
    }

    /* вместо заливки всей карточки зеленым (app.css) - зеленая рамка и кнопка */
    .card-services:hover:not(:active) {
        background-color: transparent;
    }

    .card-services:hover:not(:active) .card-services__tags {
        color: #a6a6a6;
    }

    .card-services:hover:not(:active) .card-services__bottom {
        border-color: #333;
        color: #a6a6a6;
    }

    .card-services:hover,
    .card-choice:has(.card-choice__title-link:hover) {
        border-color: #0ab451;
    }

    .card-services:hover .card-more,
    .card-choice:has(.card-choice__title-link:hover) .card-more {
        background: #0ab451;
    }

    .card-services:hover .card-more__dot,
    .card-choice:has(.card-choice__title-link:hover) .card-more__dot {
        fill: #fff;
    }

    .card-services:hover .card-more__arrow,
    .card-choice:has(.card-choice__title-link:hover) .card-more__arrow {
        stroke: #0ab451;
    }
}
/* #endregion */

/* #region requisites: реквизиты ИП в подвале (18.10.2026, аудит перед рекламой; на /contacts/ - region contacts-cards).
 * Текст - включаемая область /include/requisites.php (span на строку). Подвал и контакты в text-lowercase,
 * реквизиты пишутся как в документах. */
.footer__requisites {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-top: 24px;
    color: #8a8a8a;
    text-transform: none;
}
/* #endregion */

/* #region service-projects: блок «Кейсы» на странице услуги (21.10.2026, правки маркетолога к посадочной ЛК).
   Слайдер карточек как на главной (размеры карточки и отступ слайдера от заголовка - app.css), стрелки под ним справа.
   Слайды одной высоты, цифра результата прижата к низу, чтобы цифры стояли на одной линии */
.service-projects__card.projects-slider__card {
    display: flex;
    flex-direction: column;
    height: auto;
}

.service-projects__card .projects-slider__body {
    margin-bottom: 16px;
}

.service-projects__result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #262626;
}

.service-projects__result b {
    font-family: Impact, sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    color: #14d468;
}

.service-projects__result span {
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    color: #fff;
}

.service-projects__nav {
    display: flex;
    width: fit-content;
    margin: 32px 0 0 auto;
}

@media (max-width: 767px) {
    .service-projects__result b {
        font-size: 32px;
    }
}
/* #endregion */