@font-face {
    font-family: "Rostelecom Basis";
    src: url("../fonts/RostelecomBasis-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rostelecom Basis";
    src: url("../fonts/RostelecomBasis-Medium.woff") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --color-bg-primary: #FF4F12;
    --color-bg-secondary: #101828;
    --color-surface: #ffffff;
    --color-text-primary: #101828;
    --color-text-secondary: #475569;
    --color-accent: #FF4F12;
    --color-accent-strong: #E03E00;
    --color-border: #E5E7EB;

    --font-family-base: "Rostelecom Basis", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-default: 1.5;

    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --border-width: 1px;

    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);

    --container-max-width: 1200px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: var(--font-family-base), sans-serif;
    font-size: var(--font-size-md);
    line-height: var(--line-height-default);
    color: var(--color-text-primary);
    overflow-x: hidden;
}

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

/*Странное поведение у стилей*/
/*.btn {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-family: var(--font-family-base);*/
/*    font-weight: var(--font-weight-medium);*/
/*    font-style: normal;*/
/*    font-size: 16px;*/
/*    line-height: 24px;*/
/*    color: #FFFFFF;*/
/*    width: 194px;*/
/*    min-width: 48px;*/
/*    height: 48px;*/
/*    padding: 0 var(--space-md);*/
/*    background: var(--color-accent);*/
/*    border-radius: var(--radius-md);*/
/*    border: none;*/
/*    cursor: pointer;*/
/*    transition: background-color 0.2s ease, box-shadow 0.2s ease;*/
/*    text-decoration: none;*/
/*}*/

.btn {
    display: inline-flex;
    justify-content: center;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    max-width: 269px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    background: var(--color-accent-strong);
    box-shadow: var(--shadow-sm);
}

.main {
    flex: 1;
    padding-top: 70px;
}

.container {
    position: relative;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 35px;
}


.footer {
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-text-secondary);
    padding: var(--space-xl);
    min-height: 250px;
}

.footer__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.footer__top,
.footer__bottom {
    display: flex;
    justify-content: space-between;
}


.footer__logo {
    margin-bottom: 25px;
}

.footer__btn-groups {
    margin-top: 15px;
}

.footer__btn {
    margin-left: 14px;
}

.footer__btn-title {
    text-align: right;
    font-family: var(--font-family-base), sans-serif;
    font-size: 20px;
    line-height: var(--line-height-default);
    color: var(--color-text-primary);

}

.footer__bottom {
    border-top: 1px solid rgba(16, 24, 40, 0.1);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
}


.social-icons {
    display: flex;
}

.social-icons__link {
    width: 21px;
    display: block;
    margin-left: 30px;
    height: 21px;
}

.social-icons__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section {
    padding-bottom: 100px;
    background-color: #F9F9FA;
    color: var(--color-text-primary);
}

@media (max-width: 800px) {
    section {
        padding-bottom: 50px;
    }

    .container {
        padding: 0 23px;
    }

    .btn {
        padding: 12px 16px;
        font-size: 14px;
        max-width: 187px;
    }
}

/*БЛОК 1*/

.intro {
    position: relative;
    padding-top: 120px;
}

.intro__heading {
    margin-bottom: 75px;
    text-align: center;
    font-size: 46px;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
}

.intro__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.intro__text {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    max-width: 791px;
}

.intro__title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.intro__paragraph {
    font-size: var(--font-size-xl);
}

.intro__visual {
    display: contents;
    position: relative;
}

.intro__visual-decor {
    position: absolute;
    right: -17%;
    max-width: 600px;
}

.intro__visual-image {
    display: block;
    width: 100%;
    max-width: 600px;
}

.intro__bottom {
    transform: translateY(-40px);
}

.intro__bottom-image {
    display: inline-block;
    max-width: 557px;
    width: 100%;
    transform: translateX(90px);
}

@media (max-width: 800px) {
    .intro__heading {
        margin-bottom: 50px;
        font-size: 22px;
    }

    .intro__text {
        max-width: 386px;
    }

    .intro__title {
        font-size: 22px;
    }

    .intro__paragraph {
        font-size: 16px;
    }

    .intro__visual-decor {
        right: -14%;
        max-width: 450px;
    }

    .intro__visual-image {
        display: block;
        width: 100%;
        max-width: 600px;
    }

    .intro__bottom {
        transform: translateY(-65px);
    }

    .intro__bottom-image {
        max-width: 478px;
        transform: none;
    }
}

@media (max-width: 600px) {
    .intro {
        padding-bottom: 400px;
    }

    .intro__main {
        justify-content: center;
    }

    .intro__text {
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .intro__visual-decor {
        left: 50%;
        transform: translateX(-50%);
        top: 103%;
        max-width: 350px;
    }

    .intro__bottom {
        display: none;
    }
}

/*БЛОК 2*/

.platform {
    padding-bottom: 140px;
}

.platform__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.platform__text {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    max-width: 549px;
}

.platform__heading {
    margin-bottom: 75px;
    font-size: 40px;
    font-weight: var(--font-weight-bold);
}

.platform_text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.platform__title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.platform__paragraph {
    font-size: var(--font-size-xl);
}

.platform__visual {
    display: contents;
    position: relative;
}

.platform__visual-image {
    position: absolute;
    top: -18%;
    right: -9%;
    max-width: 750px;
    width: 100%;
    display: block;
}

.platform__bottom {
    position: relative;
    padding-top: 197px;
}

.platform__bottom-image {
    position: absolute;
    right: 25%;
    top: -75%;
    max-width: 394px;
    width: 100%;
}

@media (max-width: 800px) {
    .platform {
        padding-bottom: 100px;
    }

    .platform__text {
        max-width: 366px;
    }

    .platform__heading {
        margin-bottom: 50px;
        font-size: 30px;
    }

    .platform__title {
        font-size: 22px;
    }

    .platform__paragraph {
        font-size: 16px;
    }

    .platform__visual-image {
        top: 0%;
        right: -2%;
        max-width: 520px;
    }

    .platform__bottom {
        padding-top: 183px;
    }

    .platform__bottom-image {
        right: 41%;
        top: -30%;
        max-width: 264px;
    }
}

@media (max-width: 600px) {
    .platform {
        padding-bottom: 330px;
    }

    .platform__visual-image {
        top: 71%;
        right: -13%;
        max-width: 400px;
        width: 400px;
    }

    .platform__bottom {
        padding-top: 183px;
    }

    .platform__bottom-image {
        right: 61%;
        top: 159%;
        max-width: 176px;
    }
}

/* БЛОК 3 */

.client {
    padding-bottom: 150px;
}

.client__main {
    display: flex;
    justify-content: end;
    gap: 40px;
}

.client__visual {
    display: contents;
    position: relative;
}

.client__visual-main {
    position: absolute;
    top: -15%;
    left: -9%;
    max-width: 700px;
    width: 100%;
    display: block;
}

.client__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex: 1 1 0;
    max-width: 540px;
}

.client__title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.client__paragraph {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
}

.client__bottom {
    position: relative;
    padding-top: 285px;
}

.client__bottom-image {
    position: absolute;
    right: 40%;
    top: -3%;
    max-width: 394px;
    width: 100%;
}

@media (max-width: 800px) {
    .client {
        padding-bottom: 50px;
    }

    .client__visual-main {
        top: -9%;
        left: -6%;
        max-width: 495px;
    }

    .client__text {
        max-width: 330px;
    }

    .client__title {
        font-size: 22px;
    }

    .client__paragraph {
        font-size: 16px;
    }

    .client__bottom {
        position: relative;
        padding-top: 285px;
    }

    .client__bottom-image {
        position: absolute;
        right: 30%;
        top: -3%;
        max-width: 264px;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .client {
        padding-bottom: 330px;
    }

    .client__visual-main {
        top: 54%;
        left: -6%;
        max-width: 495px;
    }

    .client__bottom-image {
        right: -13%;
        top: 88%;
        max-width: 176px;
    }
}

/*БЛОК 4*/

.steps {
    padding-bottom: 230px;
}

.steps__heading {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 50px;
    max-width: 635px;
}

.steps__layout {
    position: relative;
}

.steps__rows {
    display: flex;
    flex-direction: column;
    gap: 200px;
    position: relative;
    z-index: 2;
}

.steps__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.steps__text-block {
    max-width: 660px;
}

.steps__row--left .steps__text-block {
    grid-column: 1;
    justify-self: start;
}

.steps__row--right .steps__text-block {
    grid-column: 2;
    justify-self: start;
}

.steps__item-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.steps__item-text {
    font-size: 22px;
    font-weight: var(--font-weight-regular);
}

.steps__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    min-height: 820px;
}

.steps__device {
    position: absolute;
    display: block;
    width: 100%;
}

.steps__device--monitor {
    top: -38%;
    right: -27%;
    max-width: 650px;
}

.steps__device--laptop {
    top: 15%;
    left: -13%;
    max-width: 575px;
}

.steps__device--phones {
    top: 72%;
    left: 0;
    max-width: 450px;
}

.steps__device--tablet {
    top: 40%;
    right: -3%;
    max-width: 450px;
}

.steps__arrow {
    position: absolute;
    display: block;
    width: 100%;
}

.steps__arrow--1 {
    top: -63px;
    left: 319px;
    max-width: 450px;
}

.steps__arrow--2 {
    top: 320px;
    left: 229px;
    max-width: 326px;
}

.steps__arrow--3 {
    top: 714px;
    left: 567px;
    max-width: 170px;
}

.steps__footer {
    margin-top: 150px;
    text-align: center;
}

.steps__note {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.steps__note-highlight {
    color: var(--color-bg-primary);
    font-weight: var(--font-weight-bold);
}

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

@media (max-width: 800px) {
    .steps {
        padding-bottom: 70px;
    }

    .steps__heading {
        font-size: 30px;
        max-width: 450px;
    }

    .steps__item-title {
        font-size: 20px;
    }

    .steps__item-text {
        font-size: 20px;
    }

    .steps__rows {
        gap: 217px;
    }

    .steps__text-block {
        max-width: 400px;
    }

    .steps__row--left .steps__text-block {
        grid-column: 1;
        justify-self: start;
    }

    .steps__row--right .steps__text-block {
        grid-column: 2;
        justify-self: start;
    }

    .steps__visual {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        min-height: 820px;
    }

    .steps__device {
        position: absolute;
        display: block;
        width: 100%;
    }

    .steps__device--monitor {
        top: -18%;
        right: -18%;
        max-width: 450px;
    }

    .steps__device--laptop {
        top: 20%;
        left: -13%;
        max-width: 500px;
    }

    .steps__device--phones {
        top: 75%;
        left: -10%;
        max-width: 450px;
    }

    .steps__device--tablet {
        top: 45%;
        right: -9%;
        max-width: 450px;
    }

    .steps__arrow {
        position: absolute;
        display: block;
        width: 100%;
    }

    .steps__arrow--1 {
        top: 63px;
        left: 130px;
        max-width: 300px;
    }

    .steps__arrow--2 {
        top: 488px;
        left: 157px;
        max-width: 270px;
    }

    .steps__arrow--3 {
        top: 810px;
        left: 173px;
        max-width: 261px;
    }

    .steps__footer {
        margin-top: 160px;
        text-align: center;
    }

    .steps__note {
        font-size: 22px;
        margin-bottom: 24px;
    }
}

@media (max-width: 600px) {
    .steps {
        padding-bottom: 100px;
    }

    .steps__heading {
        text-align: center;
        font-size: 30px;
        max-width: 450px;
    }

    .steps__rows {
        gap: 130px;
    }

    .steps__text-block {
        max-width: 90%;
    }

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

    .steps__text-block {
        grid-column: 1;
        max-width: 279px;
        width: 100%;
    }

    .steps__visual {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        min-height: 820px;
    }

    .steps__device {
        display: none;
    }

    .steps__arrow {
        position: absolute;
        display: block;
        width: 100%;
        max-width: 210px;
    }

    .steps__arrow--1 {
        top: 97px;
        left: 53px;
    }

    .steps__arrow--2 {
        top: 411px;
        left: 53px;
    }

    .steps__arrow--3 {
        top: 722px;
        left: 53px;
    }

    .steps__footer {
        margin-top: 100px;
        text-align: center;
    }
}

/*БЛОК 5*/

.corporate {
    padding-bottom: 150px;
}

.corporate__main {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.corporate__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 515px;
}

.corporate__title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.corporate__paragraph {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
}

.corporate__visual {
    display: contents;
    position: relative;
}

.corporate__visual-image {
    position: absolute;
    right: -12%;
    top: -37%;
    max-width: 620px;
    width: 100%;
    display: block;
}

@media (max-width: 800px) {
    .corporate__text {
        max-width: 300px;
    }

    .corporate__title {
        font-size: 22px;
    }

    .corporate__paragraph {
        font-size: 16px;
    }

    .corporate__visual-image {
        right: -6%;
        top: -18%;
        max-width: 426px;
    }
}

@media (max-width: 480px) {
    .corporate {
        padding-bottom: 525px;
    }

    .corporate__text {
        align-items: center;
        justify-content: center;
        text-align: center;
        max-width: none;
    }

    .corporate__visual-image {
        right: -22%;
        top: 105%;
        max-width: 500px;
        width: 396px;
    }
}

/* БЛОК 6 */

.faq {
    overflow: hidden;
    color: var(--color-text-primary);
}

.faq__container {
    position: relative;
    z-index: 2;
}

.faq__title {
    text-align: center;
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 50px;
}

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

.faq__item {
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: none;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 22px 32px;
    list-style: none;
    border: none;
    background: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::marker {
    content: "";
}

.faq__question-text {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    max-width: 675px;
}

.faq__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.faq__answer {
    padding: 0 28px 20px;
}

.faq__answer-text {
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
}

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

.faq__decor--left {
    left: -25%;
    bottom: -12%;
    max-width: 500px;
    width: 100%;
}

.faq__decor--right {
    right: -23%;
    bottom: -27%;
    max-width: 500px;
    width: 100%;
}

@media (max-width: 800px) {
    .faq__title {
        font-size: 22px;
    }

    .faq__decor--left {
        left: -11%;
        bottom: -28%;
        max-width: 323px;
        width: 100%;
    }

    .faq__decor--right {
        right: -23%;
        bottom: 24%;
        max-width: 380px;
        width: 100%;
    }

    .faq__question {
        padding: 17px 32px;
    }
}

@media (max-width: 480px) {
    .faq__decor--left {
        left: -38%;
        bottom: 22%;
        max-width: 280px;
        width: 100%;
    }

    .faq__decor--right {
        right: -33%;
        bottom: 70%;
        max-width: 280px;
        width: 100%;
    }

    .faq__question {
        padding: 15px;
    }
}