/* Start:/local/templates/main/components/bitrix/news.detail/services/style.css?179197469672786*/
.main-block {
    margin-bottom: 100px !important;
}

h2:empty {
    display: none;
}

.main-block .h1-heading {
    color: var(--dark);
    letter-spacing: -0.02em;
}

.main-block.company-block,
.main-block.steps-block,
.main-block.cases-block,
.main-block.faq-block,
.main-block.sector-block,
.main-block.follow-block,
.main-block.more-services,
.main-block.our-stack-block {
    padding-top: 100px;
}

.main-block.company-block,
.main-block.our-stack-block {
    padding-bottom: 100px;
}

.web-implement__dev-desctop {
    padding: 100px 0 50px !important;
}

.services-question__wrap.main-page {
    margin-bottom: 0 !important;
}

/* Правки формы связи и блоков старых страниц из релиза 3392 действуют только там: страницы 3 уровня
   (с блоком «Когда нужна услуга») свёрстаны по макетам 2026. :where() не меняет специфичность правил мастера */
:where(body:not(:has(.main-block.when-block))) .services-question__wrap.main-page .h2-heading{
    letter-spacing: -1%;
}

:where(body:not(:has(.main-block.when-block))) .services-question__social a+a{
    margin-left: 0px!important;
}

:where(body:not(:has(.main-block.when-block))) .services-question__social a svg:last-child{
    display: none!important;
}

.web-implement__dev-desctop img {
    width: 100%;
}

.more-services-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.more-services-items .more-services-item {
    display: inline-flex;
    align-items: center;
    min-height: 64px;
    text-decoration: none;
    color: var(--dark);
    background-color: var(--light-grey);
    border-radius: 32px;
    font-size: 18px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.02em;
    padding: 20px 32px;
    transition: var(--transition);
}

.more-services-items .more-services-item:hover {
    background-color: var(--dark);
    color: var(--white);
}

.service-block {
    display: flex;
    align-items: start;
    gap: 64px;
    padding: 50px 0;
}

.service-block h3 {
    max-width: 495px;
    width: 100%;
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.001rem;
    display: block;
    min-width: 495px;
}

.service-block .service-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.service-block .service-items .service-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--special-grey);
    padding: 16px;
    gap: 16px;
    overflow: hidden;
}

.service-items .service-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.service-block .service-items .service-item .service-item-top {
    display: flex;
    align-items: start;
    gap: 32px;
    justify-content: space-between;
    cursor: pointer;
}

.service-block .service-items .service-item .service-item-top span {
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.0006rem;
}

.service-block .service-items .service-item .service-item-top svg {
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    transition: all 0.3s;
}

.service-block .service-items .service-item .service-item-bottom {
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    color: var(--grey);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.service-block .service-items .service-item.active .service-item-bottom {
    max-height: 1000px;
}

.service-block .service-items .service-item.active .service-item-top svg {
    transform: rotate(180deg);
}

.cost-items {
    display: grid;
    gap: 32px;
}

.cost-items .const-visible-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.cost-items .const-visible-content .cost-button {
    text-decoration: none;
    border-radius: 160px;
    padding: 21px 32px;
    transition: var(--transition);
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -0.002rem;
    background-color: var(--light-grey);
    color: var(--dark);
}

.cost-items .const-visible-content .cost-button:hover,
.cost-items .const-visible-content .cost-button.active {
    color: var(--white);
    background-color: var(--dark);
}

.cost-hidden-content {
    background-color: var(--blue);
    color: var(--white);
    padding: 32px;
    border-radius: 32px;
    overflow: hidden;
}

.cost-hidden-content .cost-content:not(.active) {
    display: none;
}

.cost-hidden-content .cost-content.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    grid-template-areas:
        "title picture"
        "description picture"
        "bottom bottom";
    column-gap: 32px;
    row-gap: 24px;
    align-items: start;
}

.cost-hidden-content .cost-content .cost-content-title {
    grid-area: title;
    max-width: 1073px;
    width: 100%;
    display: block;
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.001rem;
}

.cost-hidden-content .cost-content .cost-content-description {
    grid-area: description;
    max-width: 1073px;
    width: 100%;
    display: block;
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: 0.001rem;
}

.cost-hidden-content .cost-content .cost-bottom-content {
    grid-area: bottom;
    margin-top: 0px;
    display: flex;
    align-items: center;
    gap: 32px;
    z-index: 2;
}

.cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-info-block {
    display: flex;
    align-items: center;
}

.cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-content-info {
    font-weight: 500;
    font-size: 42px;
    line-height: 110%;
    letter-spacing: -0.001rem;
    white-space: nowrap;
}

.cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-content-tags .cost-bottom-content-tag {
    padding: 16px;
    border: 1px solid var(--special-grey);
    border-radius: 16px;
    background-color: var(--white);
    color: var(--dark);
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0.002rem;
}

.cost-hidden-content .cost-picture {
    grid-area: picture;
    width: 100%;
    max-width: 355px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    justify-self: end;
}

.cost-hidden-content .cost-picture svg,
.cost-hidden-content .cost-picture img {
    width: 274px;
    height: auto;
    display: block;
}

.our-stack-block {
    display: grid;
}

.our-stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.our-stack-items--columns-3 .our-stack-item {
    flex: 1 1 calc((100% - 24px) / 3);
}

.our-stack-items--columns-4 .our-stack-item {
    flex: 1 1 calc((100% - 36px) / 4);
}

.our-stack-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: 32px;
    gap: 64px;
    border-radius: 32px;
    background-color: var(--light-grey);
    color: var(--dark);
}

.our-stack-item.is-hidden {
    display: none;
}

.our-stack-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.our-stack-item__top h3 {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1%;
    word-wrap: anywhere;
}

.our-stack-item__top span {
    flex: none;
    color: var(--grey);
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -0.6%;
}

.our-stack-item__tags {
    margin-top: auto;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -2%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.button-big-second.our-stack-more {
    margin: 12px 0 0 0;
    display: flex;
    gap: 24px;
    align-items: center;
    font-weight: 500;
}

.our-stack-more.is-hidden {
    display: none;
}
.main-block.faq-block {
    display: flex;
    align-items: start;
    gap: 64px;
}

.main-block.faq-block h2 {
    max-width: 495px;
    width: 100%;
    min-width: 495px;
    font-weight: 500;
    font-size: 60px;
    line-height: 110%;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .main-block.faq-block h2 {
        max-width: 491px;
        min-width: 491px;
    }
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.faq-container .faq-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--light-grey);
    background-color: var(--light-grey);
    border-radius: 32px;
    padding: 32px;
    cursor: pointer;
    transition: all 0.3s;
}

.faq-container .faq-item .faq-item-top {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    justify-content: space-between;
    width: 100%;
}

.faq-container .faq-item .faq-item-top span {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.01em;
    color: var(--dark);
}

.faq-container .faq-item .faq-item-top .faq-icon {
    transition: all 0.3s;
    min-width: 64px;
    max-width: 64px;
    min-height: 64px;
    max-height: 64px;
    background-color: var(--dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-container .faq-item .faq-item-top svg {
    min-width: 34px;
    max-width: 34px;
    min-height: 34px;
    max-height: 34px;
}

.faq-container .faq-item.active {
    background-color: var(--white);
}

.faq-container .faq-item.active .faq-item-top .faq-icon {
    background-color: #3E74ED;
}

@media (hover: hover) and (min-width: 1023px) {
    .faq-container .faq-item:hover {
        background-color: var(--white);
    }

    .faq-container .faq-item .faq-item-top .faq-icon:hover  {
        background-color: #3E74ED;
    }
}

.faq-container .faq-item.active .faq-item-top .faq-icon {
    transform: rotate(45deg);
}

.faq-container .faq-item .faq-item-bottom {
    max-height: 0;
    overflow: hidden;
    width: 100%;
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.001rem;
}

.faq-container .faq-item .faq-item-bottom a {
    color: var(--black);
}

.faq-container .faq-item.active .faq-item-top svg {
    transform: rotate(90deg);
}

.faq-container .faq-item.active .faq-item-bottom {
    max-height: 1000px;
    margin-top: 32px;
}

.main-block.cost-block{
    padding-top: 100px;
}

@media (max-width: 1440px) {
    .cost-hidden-content .cost-content.active{
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1050px) {
    .service-block {
        flex-direction: column;
    }

    .cost-hidden-content .cost-content .cost-bottom-content {
        flex-direction: column;
        align-items: start;
    }

    .main-block.faq-block {
        flex-direction: column;
    }

    .main-block.faq-block h2 {
        max-width: 100%;
        min-width: 0;
    }

    .main-block.faq-block h2 br:first-child {
        display: none;
    }

    .service-block {
        gap: 32px;
    }
}

@media (max-width: 1024px) {
    .service-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 64px;
        padding: 50px 32px;
    }

    .service-block h3 {
        max-width: 491px;
        min-width: auto;
        margin-bottom: 0;
    }

    .service-block .service-items {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-block .service-items .service-item {
        min-height: 110px;
        padding: 16px;
    }

    .cost-hidden-content {
        padding: 32px;
        min-height: 447px;
    }

    .cost-hidden-content .cost-content.active {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "description"
            "bottom";
        row-gap: 24px;
    }

    .cost-hidden-content .cost-content .cost-bottom-content {
        margin-top: 0;
        flex-direction: column;
        align-items: start;
        gap: 32px;
        width: 100%;
        max-width: 896px;
        margin-top: 40px;
    }

    .cost-hidden-content .cost-picture {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 338px;
        max-width: 338px;
        height: 274px;
        padding: 32px;
        align-items: flex-end;
        justify-content: flex-end;
        pointer-events: none;
    }

    .cost-hidden-content .cost-picture svg,
    .cost-hidden-content .cost-picture img {
        width: 274px;
        height: 96px;
        flex: none;
    }

    .cost-hidden-content .cost-content .cost-content-title,
    .cost-hidden-content .cost-content .cost-content-description {
        max-width: 896px;
    }

    .cost-hidden-content .cost-content .cost-content-description {
        min-height: 124px;
    }

    .cost-hidden-content .cost-content .cost-content-description br:last-child{
        display: none;
    }

    .our-stack-items--columns-3 .our-stack-item,
    .our-stack-items--columns-4 .our-stack-item {
        flex-basis: calc((100% - 12px) / 2);
    }

    .cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-info-block {
        width: 100%;
    }

    .cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-content-tags {
        max-width: 100%;
        width: 505px;
    }

    .service-items .service-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--special-grey);
    }

    .service-items .service-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--special-grey);
    }

    .service-items .service-item:last-child {
        border-bottom: none;
    }
}

@media (max-width: 744px) {
    :where(body:not(:has(.main-block.when-block))) .services-detail.main-block{
        padding-top: 50px;
    }
    .main-block.cost-block{
        padding-top: 50px;
    }

    .main-block {
        margin-bottom: 50px !important;
    }

    .main-block.faq-block {
        gap: 32px;
    }

    .main-block.faq-block h2{
        font-size: 42px;
        margin-bottom: 0;
    }

    .service-block h3 {
        max-width: 100%;
        font-weight: 500;
        font-size: 28px;
        line-height: 120%;
    }

    .faq-container .faq-item .faq-item-top{
        flex-direction: column;
        align-items: start;
        gap: 32px;
    }

    .faq-container .faq-item .faq-item-top .faq-icon{
        order: 1;
    }

    .faq-container .faq-item .faq-item-top span{
        order: 2;
        font-size: 28px;
    }

    .service-block {
        gap: 32px;
        padding-left: 0;
        padding-right: 0;
    }

    .service-block .service-items {
        grid-template-columns: repeat(1, 1fr);
    }

    .service-block .service-items .service-item {
        min-height: unset;
        padding-left: 0;
        padding-right: 0;
    }

    .service-items .service-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--special-grey);
    }

    .cost-hidden-content {
        padding: 32px;
        min-height: 505px;
    }

    .cost-hidden-content .cost-content.active {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "description"
            "bottom";
        row-gap: 24px;
        min-height: 457px;
    }

    .cost-hidden-content .cost-content .cost-content-title {
        max-width: 648px;
        font-weight: 500;
        font-size: 28px;
        line-height: 120%;
    }

    .cost-hidden-content .cost-content .cost-content-description {
        max-width: 648px;
        font-weight: 500;
        font-size: 24px;
        line-height: 130%;
        min-height: 186px;
    }

    .cost-hidden-content .cost-picture {
        position: absolute;
        right: -200px;
        bottom: 0;
        width: 338px;
        max-width: 338px;
        height: 274px;
        padding: 32px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        pointer-events: none;
    }

    .cost-hidden-content .cost-picture svg,
    .cost-hidden-content .cost-picture img {
        width: 274px;
        height: 96px;
    }

    .cost-hidden-content .cost-content .cost-bottom-content {
        width: 100%;
        max-width: 648px;
        gap: 32px;
    }

    .cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-info-block {
        width: 488px;
        max-width: 100%;
        flex-direction: row;
        gap: 32px;
    }

    .cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-content-tags {
        width: 505px;
        max-width: 100%;
    }

    .our-stack-items--columns-3 .our-stack-item,
    .our-stack-items--columns-4 .our-stack-item {
        flex-basis: 100%;
    }

    .main-block.company-block,
    .main-block.steps-block,
    .main-block.cases-block,
    .main-block.faq-block,
    .main-block.sector-block,
    .main-block.follow-block,
    .main-block.more-services,
    .main-block.our-stack-block {
        padding-top: 50px;
    }

    .main-block.company-block,
    .main-block.our-stack-block {
        padding-bottom: 50px;
    }

    .service-items .service-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--special-grey);
    }

    .service-items .service-item:last-child {
        border-bottom: none;
    }

    .main-block.services-rates-block{
        padding-top: 50px!important;
    }

    .services-rates-head .h1-heading br{
        display: none;
    }

    .services-rates-head .h1-heading{
        letter-spacing: -2%;
    }

    .services-rates-block .services-rates-card{
        padding: 32px;
    }

    .services-rates-enterprise__head .h2-heading{
        line-height: 113%;
    }
}

@media (max-width: 600px) {
    .service-page .text-author.card-item{
        padding: 32px!important;
    }
    .cost-hidden-content .cost-content .cost-content-description {
        font-size: 18px;
    }

    .cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-content-info {
        font-size: 32px;
    }

    .cost-hidden-content .cost-content .cost-bottom-content .cost-bottom-info-block {
        flex-direction: column;
        gap: 16px;
        align-items: start;
    }

    .faq-container .faq-item .faq-item-top {
        flex-direction: column;
        align-items: start;
        gap: 32px;
    }

    .faq-container .faq-item .faq-item-top span {
        order: 2;
        font-weight: 500;
        font-size: 28px;
        line-height: 120%;
    }

    .services-rates-block .services-rates-card{
        padding: 32px 16px;
    }

    .services-detail .h1-heading br{
        display: none;
    }
}

@media (max-width: 550px) {
    .service-block h3 {
        font-size: 28px;
        line-height: 120%;
        min-width: unset;
    }
}

@media (max-width: 500px) {
    .our-stack-item__top {
        flex-direction: column;
        gap: 16px;
    }

    .our-stack-item__top span {
        order: -1;
    }
}

@media (max-width: 375px) {
    .cost-hidden-content {
        padding: 32px;
        border-radius: 24px;
    }

    .cost-hidden-content .cost-content.active {
        row-gap: 20px;
    }

    .cost-hidden-content .cost-content .cost-content-title {
        font-size: 24px;
    }

    .cost-hidden-content .cost-content .cost-content-description {
        font-size: 16px;
    }

    .cost-hidden-content .cost-picture {
        justify-self: center;
    }

    .services-question__wrap.main-page .button.active {
        padding: 40px 48px !important;
    }

    .services-question__wrap.main-page {
        padding: 0 !important;
    }
}

.main-block.step-block {
    background-color: var(--light-grey-tertiary);
    border-radius: 48px;
    padding: 64px;
}

.step-block .web-implement__wrap {
    padding-bottom: 0;
}

.step-block .web-implement__wrap h2 {
    margin-bottom: 64px;
    color: var(--dark);
    letter-spacing: -0.04rem;
    font-weight: 400;
}

.step-block .web-development-step__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.step-block .web-development-step__item {
    background-color: var(--white);
    border-radius: 32px;
    padding: 32px;
    min-width: 0;
    flex: unset;
}

.step-block .web-development-step__item span {
    padding: 0;
    margin: 0;
    max-width: none;
    background-color: transparent;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    white-space: normal;
    display: inline;
}

.step-block .web-development-step__number {
    position: static;
    order: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--grey);
    margin-bottom: 24px;
}

.step-block .web-development-step__number > span {
    font-size: 18px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.02em;
}

.step-block .time-step-block span {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    background-color: var(--accent);
    color: var(--grey);
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
    white-space: nowrap;
}

.step-block .web-development-step__item h4 {
    order: 1;
    margin: 0 0 24px;
    max-width: none;
    font-size: 32px;
    line-height: 120%;
    color: var(--dark);
    letter-spacing: -0.02rem;
}

.step-block .web-development-step__item p {
    order: 2;
    margin: 0;
    max-width: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
    color: var(--grey);
    margin-bottom: 24px;
}

.step-block .web-development-step__item p br{
    display: none;
}

.step-block .web-development-step__item .image-step-block {
    order: 3;
    width: 56px;
    height: 56px;
    margin: auto 0 0;
    border: none;
    border-radius: 24px;
    background-color: var(--accent);
    justify-content: center;
    align-items: center;
    align-self: flex-start;
}

.step-block .web-development-step__item .image-step-block-img-wrap {
    width: 28px;
    height: 28px;
}

.step-block .web-development-step__item .image-step-block-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1440px) {
    .main-block.step-block {
        margin-left: -25px;
        margin-right: -25px;
    }

    .step-block .web-development-step__item p {
        margin-bottom: 25px;
    }
}

@media (max-width: 1400px) {
    .step-block .web-development-step__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .step-block .web-development-step__item {
        padding: 28px;
    }
}

@media (max-width: 1024px) {
    .main-block.step-block{
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .main-block.step-block {
        margin-left: -16px;
        margin-right: -16px;
    }

    .step-block .web-implement__wrap h2 {
        font-size: 42px;
        line-height: 110%;
    }

    :where(body:has(.main-block.when-block)) .step-block .web-implement__wrap h2 {
        margin-bottom: 32px;
    }

    .step-block .web-development-step__items {
        grid-template-columns: 1fr;
    }

    .step-block .web-development-step__item h4 {
        font-size: 28px;
    }

    :where(body:not(:has(.main-block.when-block))) .main-block.faq-block{
        gap: 0;
    }
}

@media (max-width: 400px) {
    .main-block.step-block {
        padding:32px 16px;
    }
}
.main-block.tiles-block {
    padding-top: 100px;
}

.tiles-block .h1-heading {
    margin-bottom: 64px;
}

.main-block.request-block--first {
    margin-bottom: 200px !important;
}

.tiles-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tiles-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 32px;
    border-radius: 48px;
    background: var(--light-grey);
}

.tiles-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tiles-item__num {
    color: var(--grey);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.tiles-item__image {
    width: 100px;
    height: 100px;
    border-radius: 32px;
    object-fit: cover;
}

.tiles-item__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tiles-item__title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
    color: var(--dark);
}

.tiles-item__text {
    color: var(--grey);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.cost-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
    margin-bottom: 64px;
}

.cost-head .h1-heading {
    margin-bottom: 0;
}

.cost-head__link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: var(--grey);
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition);
}

.cost-head__link:hover {
    color: var(--dark);
}

.cost-head__link svg {
    width: 32px;
    height: 32px;
}

.cost-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cost-card {
    display: flex;
    flex: 0 0 calc((100% - (var(--cost-row, 3) - 1) * 12px) / var(--cost-row, 3));
    flex-direction: column;
    justify-content: space-between;
    gap: 64px;
    min-width: 0;
    padding: 32px;
    border-radius: 48px;
    background: var(--cyan);
    color: var(--dark);
}

.cost-card__title {
    margin: 0;
    min-height: 76px;
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
}

.cost-card__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.cost-card__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
}

.cost-card__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--grey);
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.cost-card__value {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
    text-align: right;
}

.cost-card__value--muted {
    color: var(--grey);
}

.cost-hint {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.cost-hint__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--grey);
    cursor: help;
}

.cost-hint__button svg {
    display: block;
    width: 24px;
    height: 24px;
}

.cost-hint__content {
    position: absolute;
    left: -10px;
    bottom: calc(100% + 14px);
    z-index: 5;
    width: 355px;
    max-width: calc(100vw - 32px);
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--white);
    color: var(--dark);
    font-size: 12px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    filter: drop-shadow(4px 4px 16px rgba(24, 35, 58, 0.12));
    transform: translateX(var(--hint-shift-x, 0px));
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.cost-hint__content::after {
    content: '';
    position: absolute;
    left: var(--hint-tail-left, 14px);
    right: var(--hint-tail-right, auto);
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--white);
    transform: rotate(45deg);
}

.cost-hint:hover .cost-hint__content,
.cost-hint:focus-within .cost-hint__content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 1440px) {
    .cost-head__link {
        display: none;
    }
}

@media (max-width: 1300px) {
    .tiles-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cost-card {
        flex-basis: calc(50% - 6px);
    }

    .cost-card:last-child:nth-child(odd) {
        flex-basis: 100%;
    }
}

@media (max-width: 1024px) {
    .tiles-item__title br,
    .tiles-item__text br,
    .cost-card__title br {
        display: none;
    }
}

@media (max-width: 1023px) {
    .tiles-block .h1-heading,
    .cost-head {
        margin-bottom: 32px;
    }

    .cost-card,
    .cost-card:last-child:nth-child(odd) {
        flex-basis: 100%;
    }
}

@media (max-width: 992px) {
    .main-block.web-stack + .main-block.why-me:has(~ .main-block.tiles-block) {
        padding-top: 100px;
    }

    .main-block.services-editions-block + .main-block.why-me {
        padding-top: 100px;
    }
}

@media (max-width: 744px) {
    .main-block.tiles-block,
    .main-block.cost-block--grid {
        padding-top: 60px;
    }

    .main-block.request-block--first {
        padding-top: 34px;
    }

    .main-block.web-stack + .main-block.why-me:has(~ .main-block.tiles-block) {
        padding-top: 60px;
    }

    .main-block.services-editions-block + .main-block.why-me {
        padding-top: 50px;
    }

    .main-block.request-block--first {
        margin-bottom: 84px !important;
    }

    .tiles-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .tiles-item__top {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 743px) {
    .cost-card {
        gap: 24px;
    }

    .cost-card__title {
        font-size: 28px;
    }

    .cost-card__meta {
        gap: 24px;
    }

    .cost-card__line {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cost-card__value {
        text-align: left;
    }

    .cost-hint__content {
        left: auto;
        right: -10px;
    }

    .cost-hint__content::after {
        left: var(--hint-tail-left, auto);
        right: var(--hint-tail-right, 14px);
    }
}

@media (max-width: 500px) {
    .main-block.request-block--first {
        padding-top: 50px;
        margin-bottom: 100px !important;
    }
}

/* На страницах 2026 обводка пункта FAQ входит в 32px макета; после слайдера кейсов блоки уже вне общей обёртки, поэтому признак берётся от body */
body:has(.main-block.tiles-block) .faq-container .faq-item,
body:has(.main-block.when-block) .faq-container .faq-item {
    padding: 31px;
}

@media (min-width: 769px) {
    .tiles-block ~ .step-block .web-development-step__item h4 {
        min-height: 76px;
    }
}

/* Каркас услуг 3 уровня: «Когда нужна эта услуга» */
.main-block.when-block {
    padding-top: 100px;
}

.when-block__inner {
    display: grid;
    grid-template-columns: 619px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.when-block .h1-heading {
    margin: 0;
    padding-right: 64px;
}

.when-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Галочка у первой строки: в макетах многострочный пункт выровнен по верху, однострочный совпадает до 0.5px */
.when-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 32px;
    background: var(--light-grey);
    color: var(--dark);
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.when-item__icon {
    display: flex;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

.when-item__icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

/* Плитки 2 в ряд */
.tiles-items--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Стоимость пакетами: баннер, карточки с ценником, факторы стоимости */
.cost-packages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    border-radius: 48px;
    background: var(--light-grey);
}

.cost-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 64px;
    padding: 64px;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(180deg, #3e74ed 0%, #9747ff 142.27%);
    color: var(--white);
}

.cost-banner__text {
    position: relative;
    z-index: 1;
    max-width: 760px;
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
}

.cost-banner__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
}

.cost-banner .cost-banner__button {
    margin: 0;
    min-height: 56px;
    padding: 0 24px;
    border-radius: 28px;
    background: var(--white);
    color: var(--dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.02em;
}

.cost-banner .cost-banner__button:hover {
    background: var(--dark);
    color: var(--white);
}

.cost-banner__note {
    max-width: 240px;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.cost-banner__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 652px;
    height: auto;
    pointer-events: none;
}

.cost-packages__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cost-package {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border-radius: 32px;
    background: var(--white);
}

a.cost-package {
    color: inherit;
    text-decoration: none;
}

.cost-package__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 76px;
}

.cost-package__title {
    margin: 0;
    color: var(--dark);
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
}

.cost-package__price {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 50px;
    background: var(--blue);
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.006em;
    white-space: nowrap;
}

.cost-package__text {
    color: var(--grey);
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.cost-factors {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 24px;
    background: var(--accent);
    color: var(--dark);
}

.cost-factors__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.cost-factors__title svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

/* Две колонки заполняются сверху вниз, как в макете; делит пункты шаблон, первая колонка длиннее */
.cost-factors__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 6px 64px;
}

.cost-factors__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cost-factors__list li {
    margin: 0;
    color: var(--grey);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

/* Этапы компактной сеткой: белые карточки с рамкой, иконки шага отдельной ячейкой */
.main-block.step-block.step-block--compact {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

.main-block:not(.company-block) + .main-block.step-block--compact {
    padding-top: 100px;
}

.step-block.step-block--compact .web-implement__wrap h2 {
    font-weight: 500;
    letter-spacing: -0.02em;
}

.step-block.step-block--compact .web-development-step__number > span {
    line-height: 130%;
    letter-spacing: 0;
}

.step-block--compact .web-development-step__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.step-block--compact .web-development-step__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 31px;
    border: 1px solid var(--light-grey-secondary);
    border-radius: 48px;
    background: var(--white);
}

.step-block--compact .web-development-step__number {
    margin-bottom: 0;
}

/* Строки названий этапов выравниваются по длине: так их разбивает макет на всех ширинах */
.step-block.step-block--compact .web-development-step__item h4 {
    margin: 0;
    min-height: 0;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.step-block--compact .web-development-step__item--decor {
    justify-content: flex-end;
}

.step-block--compact .web-development-step__decor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.step-block--compact .web-development-step__decor-icons {
    display: flex;
}

.step-block--compact .web-development-step__item .web-development-step__decor-circle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--accent);
}

.step-block--compact .web-development-step__item .web-development-step__decor-circle + .web-development-step__decor-circle {
    margin-left: -10px;
    box-shadow: 0 0 0 2px var(--light-grey);
}

.step-block--compact .web-development-step__item .web-development-step__decor-circle img {
    display: block;
    width: 48px;
    height: 48px;
    background: transparent;
}

.step-block--compact .web-development-step__item .web-development-step__decor-arrow svg {
    width: 32px;
    height: 32px;
}

/* Иконка вместо стрелки в макете меньше иконок слева */
.step-block--compact .web-development-step__item .web-development-step__decor-circle.web-development-step__decor-end img {
    width: 42px;
    height: 42px;
}

/* Форма связи со своим текстом растягивается на всю ширину, как в макетах 3 уровня */
.main-block .services-question__wrap--wide {
    max-width: none;
}

/* В макете 1440 текст формы связи идёт сплошным абзацем, на остальных ширинах перенос сохраняется.
   Переносы с классом ширины (<br class="br-1440">) подчиняются своему классу */
@media (min-width: 1025px) and (max-width: 1440px) {
    .main-block .services-question__wrap.services-question__wrap--wide .h2-heading br:not([class]) {
        display: none;
    }
}

@media (max-width: 767px) {
    .main-block .services-question__wrap.services-question__wrap--wide {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Шаблон формы связи на 550 и уже прячет все переносы заголовка: свои возвращаются, из классов ширины — только br-375 */
@media (max-width: 550px) {
    .main-block .services-question__wrap.services-question__wrap--wide .h2-heading br:not([class]),
    .main-block .services-question__wrap.services-question__wrap--wide .h2-heading br.br-375 {
        display: inline;
    }
}

@media (max-width: 1440px) {
    .when-block__inner {
        grid-template-columns: 547px minmax(0, 1fr);
    }

    .cost-banner__image {
        right: -106px;
    }
}

@media (max-width: 1024px) {
    .when-block__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 64px;
    }

    .when-block .h1-heading {
        padding-right: 0;
    }

    .cost-packages__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cost-banner__image {
        right: -522px;
    }

    .step-block--compact .web-development-step__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* В две колонки декор-карточка после второго шага меняется местами с третьим шагом, как в макете */
@media (min-width: 745px) and (max-width: 1024px) {
    .step-block--compact .web-development-step__item:nth-child(1) { order: 1; }
    .step-block--compact .web-development-step__item:nth-child(2) { order: 2; }
    .step-block--compact .web-development-step__item:nth-child(3) { order: 3; }
    .step-block--compact .web-development-step__item:nth-child(4) { order: 4; }
    .step-block--compact .web-development-step__item:nth-child(5) { order: 5; }
    .step-block--compact .web-development-step__item:nth-child(n+6) { order: 6; }
    .step-block--compact .web-development-step__item--decor:nth-child(3) { order: 4; }
    .step-block--compact .web-development-step__item--decor:nth-child(3) + .web-development-step__item { order: 3; }
}

/* Этапы рядами 4 + 3 (ИТ-консалтинг): на 1440 — 3 + 2 + 2, на 1024 по две и нечётная последняя на всю ширину.
   Декор-карточка считается карточкой ряда. Названия переносятся по ширине без выравнивания строк, как в макете */
.step-block.step-block--rows-4-3 .web-development-step__item h4 {
    text-wrap: wrap;
}

@media (min-width: 1441px) {
    .step-block--rows-4-3 .web-development-step__items {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .step-block--rows-4-3 .web-development-step__item {
        grid-column: span 4;
    }

    .step-block--rows-4-3 .web-development-step__item:nth-child(-n + 4) {
        grid-column: span 3;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .step-block--rows-4-3 .web-development-step__items {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .step-block--rows-4-3 .web-development-step__item {
        grid-column: span 3;
    }

    .step-block--rows-4-3 .web-development-step__item:nth-child(-n + 3) {
        grid-column: span 2;
    }
}

@media (min-width: 745px) and (max-width: 1024px) {
    .step-block--rows-4-3 .web-development-step__item:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }
}

.step-block.step-block--rows-3-4 .web-development-step__item h4 {
    text-wrap: wrap;
}

@media (min-width: 1441px) {
    .step-block--rows-3-4 .web-development-step__items {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .step-block--rows-3-4 .web-development-step__item {
        grid-column: span 3;
    }

    .step-block--rows-3-4 .web-development-step__item:nth-child(-n + 3) {
        grid-column: span 4;
    }
}

@media (min-width: 745px) and (max-width: 1024px) {
    .step-block--rows-3-4 .web-development-step__item:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 744px) {
    .main-block.when-block {
        padding-top: 60px;
    }

    .when-block__inner {
        gap: 32px;
    }

    .when-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .tiles-items--two {
        grid-template-columns: minmax(0, 1fr);
    }

    .cost-block--packages .cost-packages {
        margin-left: -16px;
        margin-right: -16px;
        padding: 32px 16px;
    }

    .cost-banner {
        padding: 32px;
    }

    .cost-banner__text {
        font-size: 28px;
    }

    .cost-banner__image {
        right: -316px;
    }

    .cost-package__title {
        font-size: 28px;
    }

    .cost-package__text br {
        display: none;
    }

    .main-block:not(.company-block) + .main-block.step-block--compact {
        padding-top: 60px;
    }

    .main-block.company-block + .main-block.step-block--compact {
        padding-top: 10px;
    }

    .step-block--compact .web-development-step__items {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-block--compact .web-development-step__item {
        min-height: 0;
    }

    .step-block--compact .web-development-step__item--decor {
        min-height: 150px;
    }
}

@media (max-width: 500px) {
    .cost-banner__actions {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .cost-banner__image {
        top: 139px;
        right: -410px;
    }

    .cost-package__head {
        flex-direction: column;
        gap: 24px;
    }

    .cost-factors__title {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cost-factors__columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-block--compact .web-development-step__item--decor {
        min-height: 181px;
    }
}

/* В макете 744 у пунктов факторов справа поле 32px, кроме последнего */
@media (min-width: 601px) and (max-width: 744px) {
    .cost-factors__list:not(:last-child) li,
    .cost-factors__list li:not(:last-child) {
        padding-right: 32px;
    }
}

/* Общие блоки страниц 3 уровня по макетам 2026: «Почему мы», форма связи, логотипы клиентов, кейсы */
.why-me .services-detail-item-text {
    color: var(--dark);
    letter-spacing: -0.01em;
}

.why-me .services-detail-item-detail {
    letter-spacing: -0.006em;
}

.main-block .services-question__wrap.main-page .h4-heading,
.main-block .services-question__wrap.main-page .h2-heading,
.main-block .services-question__wrap.main-page .text-md {
    color: var(--dark);
}

.main-block .services-question__wrap.main-page .text-md,
.main-block .services-question__wrap.main-page .button-big {
    letter-spacing: -0.01em;
}

.main-block .services-question__wrap.main-page .h2-heading {
    letter-spacing: -0.01em;
}

.main-block .services-question__wrap .services-question__social a + a {
    margin-left: 0;
}

.main-block .services-question__wrap .services-question__social a svg:last-child {
    display: none;
}

.main-block .services-question__wrap.main-page .button.active {
    font-weight: 500;
}

@media (max-width: 767px) {
    .company-block .companies .splide__slide {
        width: 240px;
        padding: 0;
        border-radius: 0;
    }

    .company-block .companies .splide__slide img {
        max-width: 240px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .company-block .h1-heading,
    .more-services .h1-heading {
        margin-bottom: 64px;
    }
}

@media (min-width: 601px) and (max-width: 744px) {
    .main-block.cases-block {
        padding-top: 60px;
    }

    .cases-block .cases-slider__top {
        margin-bottom: 64px;
    }

    .cases-block .cases-slider__top .h1-heading,
    .cases-block .cases-slider-arrows {
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {
    .cases-block .heading-cases-slider {
        margin-right: -8px;
    }
}

@media (max-width: 550px) {
    .main-block .services-question__wrap.main-page .services-question__social {
        gap: 32px;
    }
}

/* Сетка страниц 3 уровня: поля по бокам 32px вместо общих 25px сайта. Шапка стоит в том же контейнере,
   поэтому поля добавляются блокам, а не контейнеру. Этапы-карточки растянуты на всю ширину сами */
@media (min-width: 769px) and (max-width: 1700px) {
    #page > .container > section.main-block:not(.step-block),
    #page > .container > section.main-block.step-block--compact {
        padding-left: 7px;
        padding-right: 7px;
    }

    #page > section.cases-block > .container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* На 1024 от шапки до заголовка первого экрана 120px, как на десктопе, а общее правило шапки даёт 60px.
   Отступ внутренний: внешний схлопнулся бы с нижним отступом шапки */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-block.web-stack {
        padding-top: 60px;
    }
}

/* Форма связи на мобильных: 50px до текста сверху и ничего под кнопкой, как в макетах 744 и 375.
   Перед этапами у формы свои отступы секции. !important — против обнуления отступов в шаблоне формы на 375 */
@media (max-width: 768px) {
    #page .main-block:not(.request-block--first) .services-question__wrap.main-page {
        padding-top: 50px !important;
        padding-bottom: 0 !important;
    }
}

/* Figma рисует каждую строку целым числом пикселей (23.4→23, 31.2→31, 33.6→34, 38.4→38, 46.2→46),
   поэтому высота строк округляется так же — иначе на длинных текстах набегает сдвиг */
#page .service-page .text-author-titles .undertitle p,
#page .service-page .worker-text h4,
#page .service-page .worker-text .worker-position,
#page .service-page .more-case-link,
#page .when-item__text,
#page .tiles-item__title,
#page .tiles-item__text,
#page .tiles-item__num,
#page .why-me .services-detail-item-text,
#page .why-me .services-detail-item-detail,
#page .why-me .services-detail__subtitle,
#page .step-block--compact .web-development-step__item h4,
#page .step-block--compact .web-development-step__number > span,
#page .cases-block .h4-heading,
#page .cost-package__text,
#page .cost-package__num,
#page .cost-banner__note,
#page .cost-package__price,
#page .cost-package__term,
#page .cost-package__list-title,
#page .cost-package__points li,
#page .cost-factors__title,
#page .cost-factors__list li,
#page .faq-container .faq-item .faq-item-bottom,
#page .more-services-items .more-services-item,
#page .main-block .services-question__wrap.main-page .h4-heading,
#page .main-block .services-question__wrap.main-page .text-md,
#page .main-block .services-question__wrap .services-question__social a span {
    line-height: round(1.3em, 1px);
}

#page .service-page .text-author-head h3,
#page .cost-banner__text,
#page .cost-package__title,
#page .faq-container .faq-item .faq-item-top span,
#page .cases-block .h3-heading {
    line-height: round(1.2em, 1px);
}

#page .main-block .h1-heading,
#page .main-block .services-question__wrap.main-page .h2-heading {
    line-height: round(1.1em, 1px);
}

@media (max-width: 768px) {
    #page .main-block .services-question__wrap.main-page .h2-heading {
        line-height: round(1.2em, 1px);
    }
}

/* Переносы строк под отдельные макеты: <br class="br-1440 br-375"> виден только на перечисленных ширинах.
   После такого переноса в тексте нужен пробел, иначе на остальных ширинах слова склеятся */
.main-block br[class*="br-"] {
    display: none;
}

@media (min-width: 1441px) {
    .main-block br.br-1920 {
        display: inline;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .main-block br.br-1440 {
        display: inline;
    }
}

@media (min-width: 745px) and (max-width: 1024px) {
    .main-block br.br-1024 {
        display: inline;
    }
}

@media (min-width: 601px) and (max-width: 744px) {
    .main-block br.br-744 {
        display: inline;
    }
}

@media (max-width: 600px) {
    .main-block br.br-375 {
        display: inline;
    }
}

/* В подзаголовке первого экрана шаблон шапки прячет все переносы на ≤768: переносы с классом ширины остаются */
@media (min-width: 745px) and (max-width: 1024px) {
    .main-block.web-stack .text-author-titles .undertitle p br.br-1024 {
        display: inline;
    }
}

@media (min-width: 601px) and (max-width: 744px) {
    .main-block.web-stack .text-author-titles .undertitle p br.br-744 {
        display: inline;
    }
}

@media (max-width: 600px) {
    .main-block.web-stack .text-author-titles .undertitle p br.br-375 {
        display: inline;
    }

    /* Скрытый перенос другой ширины добавляет строке доли пикселя: строка, которая в макете заполняет колонку, иначе переносится */
    .main-block.web-stack .text-author-titles .undertitle p {
        margin-right: -1px;
    }
}

/* Плитки 3 в ряд (страница CRM): на 1024 по две с номером и картинкой в строку, с 744 по одной */
.tiles-items.tiles-items--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Неполный последний ряд растягивается на всю ширину, как в макетах «Проектирования» и LMS:
   две плитки встают пополам, одна — целиком; на 1024 так же ведёт себя последняя нечётная плитка */
@media (min-width: 1025px) {
    .tiles-items.tiles-items--three {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .tiles-items--three > .tiles-item {
        grid-column: span 2;
    }

    .tiles-items--three > .tiles-item:nth-child(3n + 1):nth-last-child(2),
    .tiles-items--three > .tiles-item:nth-child(3n + 1):nth-last-child(2) + .tiles-item {
        grid-column: span 3;
    }

    .tiles-items--three > .tiles-item:nth-child(3n + 1):last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 745px) and (max-width: 1024px) {
    .tiles-items--three > .tiles-item:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1024px) {
    .tiles-items.tiles-items--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 745px) and (max-width: 1024px) {
    .tiles-items--three .tiles-item__top {
        flex-direction: row;
        gap: 10px;
    }
}

@media (max-width: 744px) {
    .tiles-items.tiles-items--three {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Пакеты со сроком и списками «Подходит, если» и «В услугу входит» (страница CRM).
   Последний пакет при нечётном числе занимает всю ширину, панель факторов стоит внутри него */
.cost-packages__grid > .cost-package:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.cost-packages__grid--lists > .cost-package:last-child:nth-child(odd) .cost-package__head {
    min-height: 0;
}

/* Пакеты с мелким текстом на мобильных (страница интернет-магазинов): текст баннера и названия пакетов 24px,
   на 744 у баннера поля 48, иконка у заголовка факторов остаётся слева от него */
@media (max-width: 744px) {
    .cost-block--compact .cost-banner__text,
    .cost-block--compact .cost-package__title {
        font-size: 24px;
    }
}

@media (min-width: 601px) and (max-width: 744px) {
    .cost-block--compact .cost-banner {
        padding: 48px;
    }
}

@media (max-width: 500px) {
    .cost-block--compact .cost-factors__title {
        flex-direction: row;
    }
}

.cost-package__badges {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 8px;
}

.cost-package__term {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 50px;
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--grey);
    color: var(--dark);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.006em;
    white-space: nowrap;
}

.cost-packages__grid--lists .cost-package {
    gap: 16px;
}

.cost-package__lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 64px;
    margin-top: auto;
    padding-top: 48px;
}

.cost-package__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cost-package__list-title {
    color: var(--dark);
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.cost-package__points {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cost-package__points li {
    position: relative;
    margin: 0;
    padding: 0 0 0 22px;
    color: var(--dark);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

/* Маркер по центру пункта: в макетах многострочный пункт пакета выровнен по центру, однострочный — по строке */
.cost-package__points li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue);
}

.cost-package__list--includes .cost-package__points li::before {
    background: var(--grey);
}

.cost-package .cost-factors {
    margin-top: 16px;
}

/* В макете 744 от списков до панели факторов 48px, на остальных ширинах 32px */
@media (min-width: 501px) and (max-width: 744px) {
    .cost-package .cost-factors {
        margin-top: 32px;
    }
}

.cost-packages__grid > .cost-package:last-child:nth-child(odd) .cost-package__lists {
    column-gap: 64px;
}

@media (min-width: 745px) {
    .cost-packages__grid > .cost-package:last-child:nth-child(odd) .cost-package__points li {
        padding-right: 32px;
    }
}

@media (max-width: 1440px) {
    .cost-package__lists {
        column-gap: 48px;
    }
}

/* На 1440 в узких пакетах плашки встают друг под другом, цена сверху — как в макете */
@media (min-width: 1025px) and (max-width: 1440px) {
    .cost-packages__grid--lists > .cost-package:not(:last-child:nth-child(odd)) .cost-package__badges {
        flex-direction: column-reverse;
        align-items: flex-end;
    }
}

@media (max-width: 1024px) {
    .cost-packages__grid--lists .cost-package__head {
        min-height: 0;
    }
}

@media (max-width: 744px) {
    .cost-package__lists {
        grid-template-columns: minmax(0, 1fr);
    }

    .cost-package .cost-factors__columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 500px) {
    .cost-package__badges {
        flex-direction: column;
    }

    .cost-package__lists {
        padding-top: 32px;
    }
}

/* Пакеты с номером (ИТ-консалтинг): номер и цена в плашке над заголовком, описание мельче, чем у пакетов BI */
.cost-package__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cost-package__num {
    color: var(--grey);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.cost-package--numbered .cost-package__price,
.cost-package--numbered .cost-package__term {
    border-radius: 16px;
    font-size: 14px;
    letter-spacing: -0.02em;
}

.cost-package--numbered .cost-package__text {
    font-size: 18px;
    letter-spacing: 0;
}

/* Кейсы сразу после «Нам доверяют»: у блока клиентов уже есть нижний отступ, свой верхний у кейсов лишний.
   Секция кейсов стоит вне общего контейнера страницы, поэтому соседство ищется через :has() */
#page > .container:has(> .main-block.company-block + #services-cases) + section.main-block.cases-block {
    padding-top: 0;
}

/* Любой другой блок после «Нам доверяют» на страницах 2026 поднимается на нижний отступ клиентов: блоки переставляются
   свойством BLOCKS_ORDER, и зазор должен быть как между остальными блоками. Этапы и списки гасят его своим верхним отступом */
body:has(.main-block.when-block) .main-block.company-block + .main-block:not(.step-block--compact):not(.lists-block) {
    margin-top: -100px;
}

@media (max-width: 744px) {
    body:has(.main-block.when-block) .main-block.company-block + .main-block:not(.step-block--compact):not(.lists-block) {
        margin-top: -50px;
    }
}

/* В макетах 2026 вопрос FAQ прижат к верху кнопки «+», а не по её центру — это видно на однострочных вопросах */
body:has(.main-block.when-block) .faq-container .faq-item .faq-item-top {
    align-items: flex-start;
}

/* Карточки со списками («Что проектируем»): в сером контейнере три карточки одной высоты, список прижат к низу;
   до 1440 карточки идут столбиком, на 744 контейнер растягивается на всю ширину экрана.
   Сразу после «Нам доверяют» верхний отступ не нужен — у блока клиентов свой нижний, как у этапов */
.main-block:not(.company-block) + .main-block.lists-block {
    padding-top: 100px;
}

.lists-block .h1-heading {
    margin: 0 0 64px;
}

.lists-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 32px;
    border-radius: 48px;
    background: var(--light-grey);
}

.lists-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 32px;
    border-radius: 32px;
    background: var(--white);
}

.lists-item__title {
    margin: 0;
    color: var(--dark);
    font-size: 32px;
    font-weight: 500;
    line-height: round(1.2em, 1px);
    letter-spacing: -0.01em;
}

.lists-item__points {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lists-item__points li {
    position: relative;
    margin: 0;
    padding: 0 0 0 30px;
    color: var(--grey);
    font-size: 18px;
    font-weight: 500;
    line-height: round(1.3em, 1px);
}

/* Маркер — ромб (квадрат 10px с обводкой, повёрнутый на 45°) по центру первой строки пункта;
   общий ul li:before скрыт стилями страницы */
.lists-item__points li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 4px;
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 2px solid var(--dark);
    transform: rotate(45deg);
}

/* Три колонки — с 1440, как в макете: уже заголовки карточек рвутся по слову; ниже раскладка макета 1024 */
@media (max-width: 1439px) {
    .lists-items {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* В ряду из трёх карточек под заголовок отведены две строки, как в макетах: однострочный заголовок не укорачивает карточки */
@media (min-width: 1440px) {
    .lists-item__title {
        min-height: 76px;
    }
}

@media (max-width: 744px) {
    .main-block:not(.company-block) + .main-block.lists-block {
        padding-top: 60px;
    }

    .main-block.company-block + .main-block.lists-block {
        padding-top: 10px;
    }

    .lists-block .h1-heading {
        margin-bottom: 32px;
    }

    .lists-items {
        margin: 0 -16px;
        padding: 16px;
    }

    .lists-item__title {
        font-size: 24px;
    }
}

/* Как выбрать решение («1С-Битрикс и Битрикс24»): в сером контейнере две колонки карточек — первая половина слева,
   вторая справа, — под ними тёмный баннер с кнопкой. С 1024 карточки одной колонкой, на 600 и уже шапка карточки
   встаёт столбиком, логотипы — над подписью, контейнер растягивается на всю ширину экрана */
.main-block:not(.company-block) + .main-block.choose-block {
    padding-top: 100px;
}

.choose-block .h1-heading {
    margin: 0 0 64px;
}

.choose-block__box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    border-radius: 48px;
    background: var(--light-grey);
}

.choose-block__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--choose-rows, 3), auto);
    grid-auto-flow: column;
    gap: 12px;
}

.choose-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title logos"
        "text text text";
    column-gap: 24px;
    row-gap: 64px;
    padding: 32px 24px;
    border-radius: 32px;
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--special-grey);
}

.choose-card__icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: var(--light-grey);
}

.choose-card__icon img {
    width: auto;
    max-width: 56px;
    height: 40px;
    object-fit: contain;
}

.choose-card__title {
    grid-area: title;
    align-self: center;
    margin: 0;
    color: var(--dark);
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.choose-card__logos {
    grid-area: logos;
    display: flex;
}

.choose-card__logo {
    width: 72px;
    height: 72px;
}

.choose-card__logo + .choose-card__logo {
    margin-left: -16px;
}

.choose-card__text {
    grid-area: text;
    color: var(--grey);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.choose-block__banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 181px;
    padding: 32px;
    overflow: hidden;
    border-radius: 32px;
    background: var(--dark);
}

.choose-block__banner-image {
    position: absolute;
    top: -226px;
    left: 632px;
    width: 588px;
    height: 580px;
    max-width: none;
    pointer-events: none;
}

.choose-block__banner-text {
    position: relative;
    color: var(--white);
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
}

.choose-block .choose-block__button {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 117px;
    margin: 0;
    padding: 16px 32px;
    border: 0;
    border-radius: 32px;
    background: var(--light-grey);
    color: var(--dark);
    font-family: inherit;
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.choose-block .choose-block__button svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
}

.choose-block .choose-block__button:hover {
    background: var(--white);
}

@media (max-width: 1024px) {
    .choose-block__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .choose-block__banner-image {
        top: -245px;
        left: 312px;
    }
}

@media (max-width: 744px) {
    .main-block:not(.company-block) + .main-block.choose-block {
        padding-top: 60px;
    }

    .choose-block .h1-heading {
        margin-bottom: 32px;
    }

    .choose-block__banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 64px;
    }

    .choose-block__banner-image {
        top: -146px;
        left: 324px;
    }
}

@media (max-width: 600px) {
    .choose-block__box {
        margin: 0 -16px;
    }

    .choose-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "icon"
            "title"
            "logos"
            "text";
        row-gap: 24px;
    }

    .choose-card__logos {
        margin-top: 40px;
    }

    .choose-block__banner-image {
        top: -46px;
        left: 66px;
    }

    .choose-block .choose-block__button {
        justify-content: center;
        width: 100%;
        padding: 16px 4px;
        text-align: center;
    }

    .choose-block .choose-block__button svg {
        display: none;
    }
}

/* Направления работ: пакеты без серого контейнера, сама карточка серая, под описанием теги; с 1440 — по одной в ряд */
.cost-block--directions .cost-packages {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

.cost-block--directions .cost-package {
    gap: 16px;
    background: var(--light-grey);
}

.cost-block--directions .cost-package__term,
.cost-block--directions .cost-package__price {
    padding: 8px 16px;
}

.cost-package__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.cost-package__tag {
    margin: 0;
    padding: 16px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--special-grey);
    color: var(--dark);
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.cost-package__tag::before {
    display: none;
}

@media (max-width: 1440px) {
    .cost-block--directions .cost-packages__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 744px) {
    .cost-block--directions .cost-package__title {
        font-size: 32px;
    }
}

/* Этапы по четыре в ряд («1С-Битрикс и Битрикс24»): декор-карточки в счёт ряда, ряды одной высоты, как в макете.
   Уже 1440 декор-карточка в четверть ряда не помещается — там по две, как на 1024.
   Названия переносятся по ширине без выравнивания строк, как в макете */
.step-block.step-block--cols-4 .web-development-step__item h4 {
    text-wrap: wrap;
}

@media (min-width: 1440px) {
    .step-block--cols-4 .web-development-step__items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 1fr;
    }

    .step-block--cols-4 .web-development-step__decor-row {
        gap: 0;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    .step-block--cols-4 .web-development-step__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Этапы по три, с 1024 — одной колонкой («Корпоративные сайты»): на планшете и телефоне карточки списком,
   названия переносятся по ширине без выравнивания строк, на планшете название не шире 762px, как в макете */
@media (max-width: 1024px) {
    .step-block--stack .web-development-step__items {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-block.step-block--stack .web-development-step__item h4 {
        text-wrap: wrap;
    }
}

@media (min-width: 745px) and (max-width: 1024px) {
    .step-block.step-block--stack .web-development-step__item h4 {
        max-width: 762px;
    }
}

/* End */


/* Start:/local/components/addamant/text.author/templates/service-page/style.css?179196264913653*/
/* Правки первого экрана из релиза 3392 (21920) действуют только на старых страницах услуг: страницы 3 уровня
   (с блоком «Когда нужна услуга») свёрстаны по макетам 2026. :where() не меняет специфичность правил мастера */
.service-page.text-author-wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.service-page .text-author-worker{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.service-page .text-author-content{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 0;
    margin: 0 auto;
    width: 257px;
    min-height: 155px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
}
.service-page .text-author-titles{
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 0;
}
:where(body:not(:has(.main-block.when-block))) .service-page .text-author-titles{
    max-width: 1105px;
}
.service-page .text-author-titles h1{
    margin-bottom: 56px;
    padding-right: 64px;
}
.service-page .text-author-titles .undertitle p{
    letter-spacing: -0.01em;
}
.service-page .text-author-head{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 6px;
    width: 257px;
    min-height: unset;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
}
.service-page .text-author-head h3{
    width: 257px;
    min-height: 76px;
    margin-bottom: 0;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.01em;
    color: #18233A;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin-bottom: 0 !important;
}
.service-page .text-author-head-subtitle{
    display: none;
    width: 483px;
    height: 23px;
    margin: 0;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    color: #8E939E;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}
.service-page .text-author.card-item.dark h3,
.service-page .text-author.card-item.dark h4,
.service-page .text-author.card-item.dark h5{
    color: var(--white);
}
.service-page .text-author.card-item.dark h5{
    opacity: 0.5;
}
.service-page .text-author.card-item.light h5{
    color: var(--grey);
}
.service-page .text-author-worker .button{
    margin: 0;
    background-color: var(--blue);
    color: var(--white);
}
.service-page .text-author-content .button{
    width: 174px;
    min-width: 174px;
    height: 56px;
    padding: 16px 24px;
    gap: 0px;
    border-radius: 160px;
    margin-top: auto;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.service-page .text-author-worker .button svg path {
    stroke: var(--white);
}
.service-page .text-author-worker .button:hover{
    background-color: var(--special-grey);
    color: var(--dark);
}
.service-page .text-author-worker .button:hover svg path {
    stroke: var(--dark);
}
.service-page .worker-info{
    text-align: right;
}
.service-page .worker-text .worker-position{
    width: 226px;
    height: 23px;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    text-align: right;
    letter-spacing: -0.006em;
    color: rgba(24, 35, 58, 0.5);
    flex: none;
    order: 0;
    flex-grow: 0;
}
:where(body:not(:has(.main-block.when-block))) .service-page .worker-text .worker-position{
    line-height: 100%;
}
.service-page .worker-info img{
    margin-bottom: 16px;
    max-width: 80px;
    max-height: 80px;
}
.service-page .worker-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.service-page .worker-text h4{
    color: var(--dark);
}
.service-page .employee-block .text-author-titles{
    display: none;
}
.service-page .employee-block .text-author-worker{
    flex-wrap: wrap;
}
.service-page .employee-block .text-author.card-item h3{
    position: static;
}
.service-page .employee-block .worker-info{
    width: 100%;
    display: flex;
    text-align: left;
    align-items: center;
    margin-top: 32px;
}
.service-page .employee-block .worker-info img{
    margin-right: 16px;
    margin-bottom: 0;
}
.service-page .employee-block .text-author h3{
    margin-bottom: 24px;
}
.service-page .employee-block .text-author.card-item{
    padding: 24px;
    margin-top: 0;
}
.service-page .text-author-step{
    margin-bottom: 32px;
}
.service-page .text-author-step.text-bg{
    font-weight: 500;
}
.service-page .main-block.web-stack{
    margin-bottom: 100px;
}
.service-page .text-author-wrapper.outstaff .text-author.card-item h3{
    margin-bottom: -75px;
    line-height: 38.4px;
}
.service-page .author-right {
    display: flex;
    flex: 0 0 547px;
    flex-direction: column;
    gap: 32px;
    max-width: 547px;
    width: 100%;
}
.service-page .author-right .card-item {
    margin-right: 0;
}
.service-page .more-case-link {
    border-radius: 160px;
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--light-grey);
    color: var(--dark);
    text-decoration: none;
    padding: 21px;
    line-height: 130%;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: var(--transition);
}
.service-page .more-case-link:hover {
    background-color: var(--special-grey);
}
@media (max-width: 1440px) {
    :where(body:not(:has(.main-block.when-block))) .service-page .text-author-titles h1 br{
        display: none;
    }

    :where(body:not(:has(.main-block.when-block))) .service-page.text-author-wrapper{
        gap: 24px;
    }
}
@media screen and (max-width:1050px){
    .service-page.text-author-wrapper{
        flex-wrap: wrap;
        gap: 64px;
    }
    .service-page .text-author-titles{
        margin-right: 0;
    }
    .service-page .text-author-titles h1{
        margin-bottom: 56px;
    }
    :where(body:not(:has(.main-block.when-block))) .service-page .text-author-titles h1{
        max-width: 900px;
    }
    .service-page .text-author.card-item{
        margin-top: 0;
        margin-bottom: 0;
    }
    .service-page .author-right {
        flex: 0 1 auto;
    }
}
@media screen and (max-width:768px){
    .service-page .text-author-titles h1{
        padding-right: 0;
    }
    :where(body:not(:has(.main-block.when-block))) .service-page .text-author-titles h1{
        max-width: 660px;
    }
    .service-page .text-author-titles .undertitle p{
        font-size: 24px;
        line-height: 130%;
        letter-spacing: -0.01em;
    }
    .service-page .text-author-titles{
        max-width: 100%;
    }
    .service-page .main-block.web-stack{
        margin-bottom: 50px;
    }
    .service-page .web-stack .text-author-titles .undertitle p{
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.01em;
    }
    .service-page .web-stack .text-author-titles .undertitle p br{
        display: none;
    }
    .service-page .web-stack .text-author-titles{
        max-width: 100%;
    }

    :where(body:not(:has(.main-block.when-block))) .service-page .text-author-head h3{
        font-size: 28px;
        line-height: 120%;
    }

    :where(body:not(:has(.main-block.when-block))) .service-page .text-author.card-item{
        padding: 32px;
    }
}
@media (max-width: 744px) {
    .service-page.text-author-wrapper {
        gap: 32px;
    }

    .service-page .text-author.card-item {
        margin-top: 0;
        margin-bottom: 0;
        padding: 32px;
    }

    .service-page .text-author-head h3 {
        min-height: 0;
        font-size: 28px;
    }

    .service-page .text-author-head h3 br {
        display: none;
    }
}
@media screen and (max-width:600px){
    .service-page .text-author.card-item{
        flex-wrap: wrap;
        padding: 32px;
    }
    .service-page .text-author-worker{
        flex-wrap: wrap;
        gap: 32px;
    }
    .service-page .text-author-content{
        width: 100%;
        min-height: 0;
        gap: 32px;
        margin: 0;

        justify-content: flex-start;
        align-self: auto;
        flex-grow: 0;
    }
    .service-page .text-author-worker .button{
        margin-bottom: 0;
    }
    .service-page .worker-info{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        text-align: left;
        align-items: center;
    }
    .service-page .worker-text{
        margin-left: 16px;
    }
    .service-page .worker-info img{
        margin-bottom: 0px;
    }

    :where(body:not(:has(.main-block.when-block))) .web-stack .text-author-titles .undertitle p{
        line-height: 31px!important;
    }
}
@media (max-width: 480px) {
    .service-page .text-author-content{
        width: 100%;
        min-height: 0;
    }

    .service-page .worker-info{
        width: 279px;
        height: 80px;
        flex-wrap: nowrap;
        gap: 16px;
        align-items: center;
        text-align: left;
    }

    .service-page .worker-info img{
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        max-width: 80px;
        max-height: 80px;
        margin-right: 0;
        border-radius: 24px;
        object-fit: cover;
    }

    .service-page .worker-text{
        width: 183px;
        height: 79px;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex-grow: 1;
    }

    .service-page .worker-text .worker-position{
        width: 183px;
        height: 46px;
        color: #8E939E;
        text-align: left;
    }

    .service-page .worker-text h4{
        width: 183px;
        height: 31px;
        font-size: 24px;
        line-height: 130%;
        letter-spacing: -0.01em;
    }

    .service-page .text-author-titles h1 {
        word-break: break-word;
    }
}
@media (max-width: 370px) {
    .service-page .worker-info img{
        width: 65px;
        height: 65px;
        margin-right: 8px;
    }
    .service-page .worker-text{
        margin-left: 8px;
    }
}
@media (max-width: 350px) {
    .service-page .worker-info img{
        width: 55px;
        height: 55px;
        margin-right: 8px;
    }
    .service-page .worker-text{
        margin-left: 8px;
    }
}
/* Тёмная карточка с декором («1С-Битрикс и Битрикс24»): класс promo в свойстве «Задний фон» вместе с dark.
   Фон тёмный поверх цвета сотрудника, 3D-декор справа обрезан карточкой, кнопка светлая без стрелки */
.service-page .text-author.card-item.promo{
    position: relative;
    overflow: hidden;
    background-color: var(--dark) !important;
}
.service-page .text-author.card-item.promo::before{
    content: '';
    position: absolute;
    top: -122px;
    left: 198px;
    width: 459px;
    height: 530px;
    background: url('/local/components/addamant/text.author/templates/service-page/images/promo-3d.png') center / 100% 100% no-repeat;
    pointer-events: none;
}
.service-page .text-author.card-item.promo .text-author-worker{
    position: relative;
}
.service-page .text-author.card-item.promo .text-author-content .button{
    width: auto;
    min-width: 0;
    background-color: var(--light-grey);
    box-shadow: inset 0 0 0 1px var(--white);
    color: var(--dark);
}
.service-page .text-author.card-item.promo .text-author-content .button svg{
    display: none;
}
.service-page .text-author.card-item.promo .text-author-content .button:hover{
    background-color: var(--white);
}
.service-page .text-author.card-item.promo h5{
    opacity: 1;
}
@media screen and (max-width:600px){
    .service-page .text-author.card-item.promo::before{
        top: -32px;
        left: 17px;
        width: 463px;
        height: 573px;
    }
}
@media screen and (max-width: 744px){
    .service-page .text-author.card-item.promo .text-author-head h3{
        font-size: 32px;
    }
    .service-page .text-author.card-item.promo .text-author-head h3 br{
        display: inline;
    }
}
@media screen and (max-width:600px){
    .service-page .text-author.card-item.promo .text-author-worker{
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .service-page .text-author.card-item.promo .text-author-content{
        display: contents;
    }
    .service-page .text-author.card-item.promo .text-author-head{
        order: 1;
    }
    .service-page .text-author.card-item.promo .worker-info{
        order: 2;
        flex-direction: column;
        align-items: flex-start;
        width: auto;
        height: auto;
        gap: 16px;
    }
    .service-page .text-author.card-item.promo .worker-info img{
        margin: 0;
    }
    .service-page .text-author.card-item.promo .worker-text{
        width: auto;
        height: auto;
        margin-left: 0;
    }
    .service-page .text-author.card-item.promo .worker-text .worker-position,
    .service-page .text-author.card-item.promo .worker-text h4{
        width: auto;
        height: auto;
    }
    .service-page .text-author.card-item.promo .worker-text .worker-position{
        color: var(--light-grey);
    }
    .service-page .text-author.card-item.promo .text-author-content .button{
        order: 3;
    }
}

/* End */


/* Start:/local/components/addamant/main.about/templates/services/style.css?17919626498205*/
.services-detail {
    padding-top: 100px;
}

.services-detail-items{
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.services-detail-item{
    padding-bottom: 19px;
    padding-right: 32px;
    width: 33.33333333333333%;
}

.services-detail-item-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 32px;
    background-color: var(--light-grey);
    margin-bottom: 24px;
}

/* Иконки «Почему мы» на старых страницах услуг (22011). Страниц 3 уровня с раскладками «aside» не касается:
   там иконки нарисованы под размер подложки */
.main-block.why-me:not(.vnedrenie-i-razrabotka-na-bitriks24, .razrabotka-na-1s-bitriks) .services-detail:not(.services-detail--aside) .services-detail-item-icon img {
    max-width: 50%;
}

.services-detail-item-text{
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    color: var(--black);
    margin-bottom: 16px;
}

/* Карточка без подписи (экспертиза на «1С-Битрикс и Битрикс24»): отступ под подпись не нужен */
.services-detail-item-text:last-child{
    margin-bottom: 0;
}

.services-detail-item-detail{
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    color: var(--dark-secondary);
}

/* Заголовок «Почему мы» старых страниц с 1024 (21920); у раскладок «aside» свои размеры */
@media (max-width: 1024px) {
    .services-detail:not(.services-detail--aside) .h1-heading {
        font-size: 42px;
        margin-bottom: 32px;
    }

    .main-about__service svg {
        width: 100%;
        height: auto;
    }
}

@media ((max-width: 1024px) and (min-width: 993px)) {
    .main-block.why-me.vnedrenie-i-razrabotka-na-bitriks24 .services-detail-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 12px;
        row-gap: 48px;
    }

    .main-block.why-me.vnedrenie-i-razrabotka-na-bitriks24 .services-detail-items .services-detail-item {
        padding-right: 0;
        width: 100%;
    }
}

@media (max-width: 992px) {
    .services-detail-items{
        flex-direction: column;
        gap: 24px;
    }

    .services-detail-item{
        width: 100%;
    }

    .services-detail .h1-heading{
        font-size: 42px;
        margin-bottom: 32;
    }

    .services-detail-item-text br,
    .services-detail-item-detail br{
        display: none;
    }

    .services-detail{
        padding-top: 0;
    }
}

.services-detail--aside {
    display: grid;
    grid-template-columns: 619px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.services-detail--aside .h1-heading {
    margin: 0;
    padding-right: 64px;
}

.services-detail--aside .services-detail-items {
    gap: 12px;
}

.services-detail--aside .services-detail-item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-bottom: 0;
}

.services-detail-item-icon img {
    max-width: 100%;
    max-height: 100%;
}

/* Логотипы партнёров («1С-Битрикс и Битрикс24»): в карточке цветной логотип, серым его делают стили тем же приёмом,
   что в макете, — обесцвечивание и слой #8E939E в режиме «осветление» (светлую подложку слой не меняет).
   При наведении логотип цветной, подложка белая, смена плавная, как в прототипе.
   Слой смешивается только внутри иконки и отступает от её краёв: на сглаженных краях подложки он давал серую рамку */
.services-detail--logos .services-detail-item-icon {
    position: relative;
    isolation: isolate;
    transition: background-color 0.25s ease-in-out;
}

.services-detail--logos .services-detail-item-icon img {
    filter: grayscale(1);
    transition: filter 0.25s ease-in-out;
}

.services-detail--logos .services-detail-item-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background-color: #8e939e;
    mix-blend-mode: lighten;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

.services-detail--logos .services-detail-item-icon:hover {
    background-color: var(--white);
}

.services-detail--logos .services-detail-item-icon:hover img {
    filter: grayscale(0);
}

.services-detail--logos .services-detail-item-icon:hover::after {
    opacity: 0;
}

@media (max-width: 1440px) {
    .services-detail--aside {
        grid-template-columns: 547px minmax(0, 1fr);
    }

    .services-detail--aside .services-detail-items {
        gap: 64px;
    }
}

@media (max-width: 1024px) {
    .services-detail--aside {
        grid-template-columns: minmax(0, 1fr);
        gap: 64px;
    }

    .services-detail--aside .h1-heading {
        padding-right: 0;
    }

    .services-detail--aside .h1-heading br {
        display: none;
    }
}

@media (max-width: 992px) {
    .services-detail--aside {
        padding-top: 100px;
    }

    .services-detail--aside .services-detail-items {
        gap: 32px;
    }

    .services-detail--aside .services-detail-item {
        flex: 0 0 auto;
    }

    .services-detail--aside .services-detail-item-detail br:not([class*="br-"]) {
        display: inline;
    }
}

@media (max-width: 744px) {
    .services-detail--aside {
        gap: 32px;
        padding-top: 60px;
    }
}

.services-detail__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.services-detail__head .h1-heading {
    margin: 0;
}

.services-detail__subtitle {
    color: var(--dark);
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.services-detail--aside .services-detail__head {
    padding-right: 64px;
}

.services-detail--aside .services-detail__head .h1-heading {
    padding-right: 0;
}

.services-detail--two .services-detail-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 12px;
}

.services-detail--two .services-detail-item {
    width: auto;
}

@media (max-width: 1440px) {
    .services-detail--two .services-detail-items {
        gap: 64px 12px;
    }
}

@media (max-width: 992px) {
    .services-detail--two .services-detail-items {
        display: grid;
        gap: 64px 12px;
    }
}

@media (max-width: 744px) {
    .services-detail--two .services-detail-items {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 480px) {
    .services-detail--aside .services-detail__head {
        padding-right: 0;
    }
}

/* Заголовок слева, карточки по три в ряд (страница «Проектирование»): пять и больше карточек идут рядами по три,
   на 1024 заголовок уходит наверх, ряды сохраняются, с 744 карточки встают по одной */
.services-detail--three .services-detail-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px 12px;
}

.services-detail--three .services-detail-item {
    width: auto;
}

/* Как в макете: у последней карточки ряда и у последней вообще нет отступа справа, текст идёт до края */
.services-detail--three .services-detail-item:nth-child(3n),
.services-detail--three .services-detail-item:last-child {
    padding-right: 0;
}

@media (max-width: 1440px) {
    .services-detail--three .services-detail-items {
        gap: 64px 12px;
    }
}

@media (max-width: 992px) {
    .services-detail--three .services-detail-items {
        display: grid;
        gap: 64px 12px;
    }
}

@media (max-width: 744px) {
    .services-detail--three .services-detail-items {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* End */


/* Start:/local/components/addamant/develop.implement/templates/.default/style.css?17912736388964*/
.web-implement__step.text-bg {
    font-weight: 500;
    margin-bottom: 32px;
}

.web-implement__wrap h2 {
    margin-bottom: 64px;
}

.web-implement__wrap p.text-sm.text-grey {
    font-weight: 500;
    max-width: 762px;
    width: 100%;
}
.web-implement__wrap{
    padding-bottom: 50px;
}
.web-implement__items {
    background-color: var(--light-grey);
    padding: 32px;
    border-radius: 56px;
    display: flex;
    margin-bottom: 150px;
}

.web-implement__items.outstaff .web-implement__item {
    min-height: 469px;
}

.web-implement__item:last-child {
    margin-right: 0;
}

.web-implement__item {
    max-width: 391px;
    width: 100%;
    min-height: 437px;
    padding: 32px;
    border-radius: 32px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    margin-right: 12px;
}

.web-implement__item:first-child {
    max-width: 794px;
    min-width: 650px;
}

.web-implement__item h3 {
    margin-bottom: auto;
}

.web-implement__item h3.h2-heading{
    margin-bottom: 24px;
}

.web-implement__item img {
    display: block;
    margin-bottom: 24px;
}

.web-implement__item p+p {
    margin-top: 12px;
}

.web-implement__dev-wrap h3,
.web-implement__dev-wrap p {
    margin-bottom: 64px;
}

.web-implement__dev-desctop,
.web-implement__dev-mobile {
    padding: 32px 0;
    margin-bottom: 64px;
}

.web-implement__dev-desctop svg,
.web-implement__dev-mobile svg {
    width: 100%;
    height: auto;
}

.web-implement__dev-mobile {
    display: none;
}

.web-development-step__items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.web-development-step__item {
    background-color: var(--light-grey);
    border-radius: 48px;
    padding: 32px;
    max-width: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(33.333% - 10px);
    min-width: calc(33.333% - 10px);
}

.web-development-step__item span {
    padding: 16px 24px;
    border-radius: 56px;
    font-size: 18px;
    font-weight: 500;
    line-height: 23.4px;
    margin-top: auto;
    display: block;
    max-width: 159px;
    white-space: nowrap;
    background-color: var(--white);
}

.web-development-step__item:last-child {
    margin-right: 0;
}

.web-development-step__item h4 {
    margin: auto 0 24px;
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.001rem;
    max-width: 762px;
    width: 100%;
}

.web-development-step__tags {
    display: flex;
    flex-wrap: wrap;
}

.web-development-step__tags .web-development-step__tag {
    background-color: var(--white);
    border-color: var(--white);
    font-size: 14px;
    line-height: 16.2px;
    letter-spacing: -0.02em;
    margin: 0 6px 6px 0;
}

.web-development-step__tags .web-development-step__tag:after {
    display: none;
}

.web-development-step__number {
    position: absolute;
    top: 32px;
    left: 32px;
}

.image-step-block {
    display: flex;
    justify-content: end;
    margin-bottom: 32px;
}

.monolog {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 24px;
}

.monolog img:first-child{
    margin-right: 8px;
}

.web-implement__item .big-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -12px;
    margin-top: 22px;
}

.web-implement__item .big-tag {
    /*border: 1px dashed #8E939E;*/
    padding: 24px 0px;
    border-radius: 56px;
    font-size: 18px;
    font-weight: 500;
    line-height: 23.4px;
    margin: 0 12px 12px 0;
    max-width: 136px;
    text-align: center;
    width: 100%;
    background-image: url('/local/components/addamant/develop.implement/templates/.default/images/border.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.web-implement__item .big-tag:last-child{
    margin-right: 0;
}

.web-implement__item .big-tag.active {
    color: var(--white);
    background-color: var(--dark);
    background-image:none
}

.web-development-step__item .image-step-block{
    border: 4px solid var(--light-grey);
    width: 100px;
    height: 100px;
    border-radius: 32px;
    background-color: var(--white);
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.web-development-step__item .image-step-block-img-wrap{
    width: 47px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.web-development-step__item .image-step-block-img-wrap img{
    width: 100%;
}

@media (max-width: 1600px) {
    .web-development-step__tags {
        max-width: 280px;
        display: block;
    }
}

@media (max-width: 1440px) {
    .web-implement__items {
        flex-wrap: wrap;
    }

    .web-implement__item:first-child {
        max-width: 100%;
        min-width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .web-implement__item {
        max-width: 49.5%;
        margin-right: 1%;
    }
}

@media (max-width: 1400px) {
    .web-development-step__item {
        margin-right: 0;
        max-width: 100%;
    }

    .web-development-step__item h4 br {
        display: none;
    }

    .web-development-step__item span {
        margin-top: 32px;
    }
}

@media (max-width: 1400px) and (min-width: 430px) {
    .web-development-step__tags {
        max-width: 100%;
    }
}

@media (max-width: 1050px) {
    .web-development-step__item {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
}

@media (max-width: 1024px) {
    .web-implement__item {
        max-width: 49.2%;
        margin-right: 1.6%;
    }

    .web-implement__item:not(:first-child) p {
        max-width: 327px;
    }

    .web-implement__item:first-child h3 {
        margin-bottom: 70px;
    }

    .web-implement__items.outstaff .web-implement__item:first-child h3{
        margin-bottom: 24px;
    }
    .web-implement__dev-desctop, .web-implement__dev-mobile {
        padding: 32px 0;
        margin-bottom: 0px;
    }
}

@media (max-width: 768px) {
    .web-implement__item {
        min-height: 320px;
    }

    .web-implement__items {
        margin-bottom: 75px;
    }
}

@media (max-width: 744px) {
    .web-implement__items {
        padding: 16px;
    }
    .web-implement__dev-desctop, .web-implement__dev-mobile {
        padding: 32px 0;
       margin-bottom: 0px;
    }
    .web-implement__item {
        max-width: 100%;
        margin-right: 0;
    }

    .web-implement__item:last-child {
        margin-top: 12px;
    }

    .web-implement__dev-wrap h3,
    .web-implement__dev-wrap p {
        margin-bottom: 32px;
    }

    .web-development-step__item {
        flex: unset;
    }
}

@media (max-width: 600px) {
    .web-implement__dev-desctop {
        display: none;
    }

    .web-implement__dev-mobile {
        display: block;
        text-align: center;
        margin-bottom: 32px;
    }

    .web-implement__dev-mobile svg {
        max-width: 375px;
        margin: 0 auto;
    }

    .web-implement__dev-mobile img {
        width: 100%;
    }

    .image-step-block {
        justify-content: start;
        margin-top: 40px;
    }

    .web-development-step__item .image-step-block{
        margin-left: 0;
    }
}

@media (max-width: 450px) {
    .web-implement__wrap h2 br {
        display: none;
    }

    .monolog{
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .web-implement__items.outstaff .web-implement__item .monolog img{
        order: 1;
        margin-bottom: 0;
    }

    .web-implement__items.outstaff .web-implement__item .monolog img:first-child{
        order: 2;
        margin-top: 8px;
    }

    .web-implement__items.outstaff .web-implement__item img{
        margin-top: 32px;
    }

    .web-implement__item .big-tag{
        max-width: max-content;
        padding:  16px 24px;
    }

    .web-implement__item .big-tag {
        background-image: url('/local/components/addamant/develop.implement/templates/.default/images/border-mobile.svg');
    }

    .web-implement__item .big-tag:nth-child(1) {
        background-image: url('/local/components/addamant/develop.implement/templates/.default/images/border-mobile-1.svg');
    }

    .web-implement__item .big-tag:nth-child(3) {
        background-image: url('/local/components/addamant/develop.implement/templates/.default/images/border-mobile-2.svg');
    }
}

@media (max-width: 370px) {
    .web-implement__item {
        min-height: 360px;
    }
}

.web-development-step__decor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    order: 4;
    gap: 6px;
    margin-top: auto;
    padding-top: 15px;
}

.web-development-step__decor-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 24px;
    background-color: #d8e3fb;
}

.web-development-step__decor-icon img {
    display: block;
    max-width: 44px;
    max-height: 44px;
}

.web-development-step__decor-badge {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 28px;
    border-radius: 25px;
    background-color: #f5f5f5;
    color: #18233a;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
}

/* End */


/* Start:/local/components/addamant/social.request/templates/.default/style.css?17919626494183*/
.services-question__wrap{
    max-width: 1106px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 120px;
}

/* На страницах услуг 3 уровня отступ формы по макетам 2026, без хотфикса 22004 */
:where(body:has(.main-block.when-block)) .services-question__wrap{
    padding-top: 100px;
}

.services-question__wrap.services-page {
    padding-top: 0;
}

.services-question__wrap.main-page {
    margin-bottom: 200px;
}

.services-question__wrap .button.active {
    background-color: var(--dark);
    color: var(--white);
    max-width: 347px;
    padding-left: 0;
    padding-right: 0;
    font-weight: 400;
    margin: 0 auto;
    margin-top: 32px;
}

.services-question__wrap.main-page .button.active {
    padding-left: 48px;
    padding-right: 48px;
    max-width: fit-content;
}

.services-question__wrap .button:hover{
    background-color: #3E74ED;
}

.services-question__wrap .h4-heading{
    margin-bottom: 24px;
}

.services-question__social{
    margin: 32px 0;
    display: flex;
    justify-content: center;
    gap: 32px;
}

.services-question__social a{
    display: flex;
    align-items: center;
    text-decoration: none;
}

.services-question__social a span{
    color: var(--grey);
    transition: 0.5s;
    font-size: 24px;
    font-weight: 500;
    line-height: 31.2px;
    letter-spacing: -0.01em;
}

.services-question__social a:hover span{
    color: var(--dark);
}

.services-question__social a+a{
    margin-left: 32px;
}

.services-question__social a svg:first-child{
    margin-right: 12px;
}

.services-question__social a svg:first-child rect{
    stroke: #3E74ED;
    fill: #3E74ED;
    stroke-opacity: 1;
}
.services-question__social a svg:first-child path{
    fill: var(--white);
    fill-opacity: 1;
}

.services-question__social a svg:last-child{
    width: 32px;
    height: 32px;
    margin-left: 12px;
}

.services-question__social a svg:last-child path{
    stroke: var(--grey);
}

.services-question__social a:hover svg:last-child path{
    stroke: var(--dark);
}

.services-question__wrap .h4-heading br{
    display: none;
}

@media (max-width:1023px) {
    .services-question__wrap .h4-heading br{
        display: block;
    }
}

@media (max-width:767px) {
    .services-question__wrap{
        max-width: 500px;
    }

    .services-question__wrap.services-page{
        max-width: 100%;
    }

    .services-question__social{
        flex-direction: row;
        align-items: center;
    }

    .services-question__social a+a{
        margin-left: 25px;

    }

    .services-question__wrap .text-md{
        font-size: 24px;
    }



    .services-question__wrap.main-page {
        margin-bottom: 100px;
        max-width: 100%;
        padding: 16px;
    }

    .services-question__wrap.main-page .services-question__social a + a {
        margin: 0;
    }

    .services-question__wrap.main-page .services-question__social {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .services-question__wrap.main-page .button.active {
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .services-question__wrap.main-page .h4-heading {
        align-items: start;
        text-align: left;
        justify-content: start;
    }

    .services-question__wrap.main-page .h2-heading br {
        display: none;
    }

    .services-question__wrap.main-page .h2-heading {
        text-align: left;
    }

    .services-question__wrap.main-page .services-question__social {
        flex-direction: column;
        gap: 32px;
        align-items: start;
    }

    .services-question__wrap.main-page .button.active {
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width:500px) {
    .services-question__wrap{
        text-align: left;
    }


    .services-question__social {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .services-question__social a+a {
        margin-left: 0px;
    }
    .services-question__wrap .text-md{
        text-align: center;
    }
}

/* End */


/* Start:/local/components/addamant/form/templates/becometeam/addamant/form.result.new/becometeam/style.css?17768326452506*/
.form-wrap .form-head{
    margin: 56px 0 24px;
    text-align: center;
}
.form-wrap .form-data .main-input-block{
    margin-bottom: 24px;
}
.form-wrap .btn-wrap,
.form-wrap .form-userconsent{
    text-align: center;
}
.form-wrap .btn-wrap .button{
    margin: 0;
    margin-bottom: 12px;
    max-width: 328px;
    width: 100%;
}
.form-wrap .form-userconsent a{
    color: var(--grey);
    text-decoration: none;
}
.form-wrap .form-success{
    margin: 56px 0 24px;
    text-align: center;
}
.form-wrap .form-success h2,
.form-wrap .form-success p{
    margin-top: 24px;
}
.form-wrap .form-success .button{
    margin: 0 auto;
    margin-top: 32px;
}
.form-wrap .main-input-block.input-hide{
    display: none;
}
.form-wrap .main-input-block.input-file{
    background-color: var(--light-grey);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    width: 100%;
}
.form-wrap .main-input-block.input-file p{
    margin-bottom: 24px;
}
.form-wrap.inputfile-form .form-data{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.form-wrap.inputfile-form .btn-wrap{
    width: 100%;
    align-items: center;
}
.form-wrap.inputfile-form .main-input-block:not(.input-file){
    width: 48.5%;
}
.form-wrap.inputfile-form .button-main.disabled{
    background-color: var(--light-grey);
    pointer-events: none;
}
.main-input-block.input-file .input-file-list{
    display: none;
    max-width: 280px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 54px;
    line-height: 54px;
    position: relative;
    padding: 0 72px 0 32px;
    cursor: pointer;
}
.main-input-block.input-file .input-file-list::before{
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 16px;
    background-image: url(/local/components/addamant/form/templates/becometeam/addamant/form.result.new/becometeam/image/check.svg);
}
.main-input-block.input-file .input-file-list::after{
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    right: 24px;
    top: 16px;
    background-image: url(/local/components/addamant/form/templates/becometeam/addamant/form.result.new/becometeam/image/cart.svg);
}
.main-input-block.input-file .input-file-list.active{
    display: block;
}
.main-input-block.input-file .input-file-button.hide{
    display: none;
}

#becomeTeam .privacy-block-form {
    margin-top: 0;
    margin-bottom: 32px;
}

@media (max-width: 1023px){
    .form-wrap.inputfile-form .main-input-block:not(.input-file){
        width: 100%;
    }
}
@media (max-width: 1023px){
    .form-wrap .main-input-block.input-file{
        padding: 24px 16px;
    }
}
/* End */
/* /local/templates/main/components/bitrix/news.detail/services/style.css?179197469672786 */
/* /local/components/addamant/text.author/templates/service-page/style.css?179196264913653 */
/* /local/components/addamant/main.about/templates/services/style.css?17919626498205 */
/* /local/components/addamant/develop.implement/templates/.default/style.css?17912736388964 */
/* /local/components/addamant/social.request/templates/.default/style.css?17919626494183 */
/* /local/components/addamant/form/templates/becometeam/addamant/form.result.new/becometeam/style.css?17768326452506 */