/* Подключение шрифта Inter */
body {
    margin: 0; padding: 0;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px; line-height: auto;
    color: #000;
    font-weight: 400;
}

h1 {font-size: 56px; font-weight: 700;}
    @media (max-width: 600px) {h1 {font-size: 34px;}}
h2 {font-size: 42px; font-weight: 700;}
    @media (max-width: 600px) {h2 {font-size: 34px;}}
h3 {font-size: 32px; font-weight: 500; margin-bottom: 34px;}
.hcenter {text-align: center; margin-bottom: 20px;}

.all {
    max-width: 1456px; padding: 0 20px; margin: 0 auto;
}
.
.desktop {display: block;}
.mobile {display: none;}
    @media (max-width: 800px) {
        .desktop {display: none;}
        .mobile {display: block;}
    }

/* INTRO SECTION */
#intro {
  background-color: #121A31;
  color: #FFFFFF;
  border-radius: 0 0 30px 30px;
  padding: 28px 0 110px 0;
  margin-bottom: 35px;
}
    @media (max-width: 600px) { #intro {padding: 20px 0 80px 0;} }
    /* header */
    header.all {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
        gap: 20px 20px;
        margin-bottom: 80px;
    }
        @media (max-width: 600px) { header.all {margin-bottom: 40px;} }
        header #header-logo {width: 220px;}
            header #header-logo img {
                width: 136px; height: auto;
            }
                @media (max-width: 800px) {
                    header #header-logo {width: auto;}
                    header #header-logo img {width: 110px;}
                }
        header #header-title {
            background: #242C44;
            color: #8F97B0;
            font-size: 14px; font-weight: 300;
            padding: 10px; border-radius: 10px;
        }
            @media (max-width: 600px) {
                header #header-title {
                    order: -1; width: 100%; text-align: center;
                }
            }
        header #header-button {width: 220px;}
            @media (max-width: 800px) { header #header-button {width: auto;} }
            header #header-button a {
                font-size: 14px; font-weight: 300;
                color: #fff;
                text-decoration: none;
                padding: 11px 30px;
                border: 1px solid #495068;
                border-radius: 30px;
            }
    /* intro-about */
    #intro-about {
        color: #fff;
        text-align: center;
        padding: 0 20px;
        background: url(img/gradient.png) no-repeat 50% 20px;
        background-size: 860px auto;
    }
        #intro-about img {
            width: 77px; height: auto;
            margin-bottom: 27px;
        }
        #intro-about h1 {
            margin: 0 0 47px 0;
        }
        #intro-about p {
            font-size: 19px; line-height: 32px; font-weight: 300;
            color: #8F97B0;
            max-width: 1000px;
            margin: 0 auto 61px auto;
        }
            @media (max-width: 600px) { #intro-about p {font-size: 16px; line-height: 24px;} }
        #intro-about a.intro-button {
            text-decoration: none;
            font-size: 15px; color: #fff;
            padding: 13px 30px;
            background: linear-gradient(239.31deg, #DD1C88 58.64%, #8C20A8 108.89%), #FFFFFF;
            opacity: 0.9;
            border-radius: 50px;
        }

/* SCREENSHOT SECTION */
.screenshot {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    margin-bottom: 40px;
}
    @media (max-width: 800px) { .screenshot {flex-direction: column; margin-bottom: 80px;} }
    .screenshot.screenshot-right {flex-direction: row-reverse;}
        .screenshot-image {width: 49%;}
            @media (max-width: 800px) { .screenshot-image {width: 100%;} }
            .screenshot-image img {
                width: 100%; height: auto;
            }
        .screenshot-content {
            width: 49%;
            padding: 0 123px; box-sizing: border-box;
        }
            @media (max-width: 1200px) {
                .screenshot-content {
                    padding: 0 0px;
                }
            }
            @media (max-width: 800px) { .screenshot-content {width: 100%;} }
            .screenshot-icon {
                width: 48px; height: auto;
                margin-bottom: 30px;
            }
                @media (max-width: 800px) { .screenshot-icon {margin-bottom: 10px;} }
            .screenshot-content p {
                line-height: 27px; font-weight: 500;
                margin: 0; padding: 0;
            }

/* PREVANTAGES SECTION */
#prevantages {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px 20px;
    margin-bottom: 150px; margin-top: 100px;
    background: #121A31 url(img/gradient.png) no-repeat 100% 50%;
    background-size: 860px auto;
    border-radius: 30px;
    color: #fff;
    padding: 65px;
}
    @media (max-width: 1000px) { #prevantages {padding: 60px 40px; margin: 60px 20px 100px 20px;} }
    .prevantages-item {
        width: 22%;
        font-size: 17px; line-height: 24px;
    }
        @media (max-width: 1100px) { .prevantages-item {width: 45%;} }
        @media (max-width: 600px) { .prevantages-item {width: 100%;} }
        .prevantages-item b {
            font-weight: 700;
            display: block;
        }

/* OTHER FEATURES SECTION */
.other-features {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 60px 1%;
    margin-bottom: 180px;
    margin-top: 36px;
}
    @media (max-width: 600px) { .other-features {margin-bottom: 100px;} }
    .other-features-item {width: 32%;}
        @media (max-width: 800px) { .other-features-item {width: 48%;} }
        @media (max-width: 600px) { .other-features-item {width: 100%;} }
        .other-features-image {
            height: 230px;
            margin-bottom: 24px;
            border: 1px solid #DEDEDE; border-radius: 20px;
        }
            @media (max-width: 800px) { .other-features-image {height: 180px;} }
            .other-features-item-01 .other-features-image {
                background: url(img/features01.jpg) no-repeat 50% 100%;
                background-size: auto 90%;
            }
            .other-features-item-02 .other-features-image {
                background: url(img/features02.jpg) no-repeat calc(100% - 12px) 12px;
                background-size: 75% auto;
            }
            .other-features-item-03 .other-features-image {
                background: url(img/features03.jpg) no-repeat calc(100% - 12px) 12px;
                background-size: 93% auto;
            }
        .other-features-item b {
            font-weight: 500; font-size: 16px;
            display: block; margin-bottom: 8px;
        }
        .other-features-item p {
            margin: 0; padding: 0;
            font-size: 14px; line-height: 24px; font-weight: 300;
        }

/* VERY PERSONAL SECTION */
#very-personal {
    display: flex; flex-direction: column; align-items: center;
    gap: 45px;
    text-align: center;
    margin-bottom: 150px;
    max-width: 740px;
}
    @media (max-width: 600px) { #very-personal {gap: 28px; margin-bottom: 100px;} }
    #very-personal-image {}
        #very-personal-image img {
            width: 77px; height: auto;
        }
    #very-personal h2 {
        margin: 0; padding: 0;
    }
    #very-personal p {
        margin: 0; padding: 0;
        line-height: 27px; font-weight: 500;
    }
    #very-personal a.go-button {
        text-decoration: none;
        font-size: 15px; color: #fff;
        padding: 13px 30px;
        background: linear-gradient(239.31deg, #DD1C88 58.64%, #8C20A8 108.89%), #FFFFFF;
        opacity: 0.9;
        border-radius: 50px;
    }

/* FOOTER SECTION */
footer {
    border-top: 1px solid #E5E5E5;
    padding: 36px 0;
}
    footer .footer-content {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
        gap: 30px 20px;
    }
        footer .footer-left {
            font-size: 13px; line-height: 20px; font-weight: 300; color: #3B3B3B;
        }
        footer .footer-right {
            font-weight: 300;
            background: url(img/telegram.png) no-repeat 0 50% / 15px auto;
            padding-left: 25px;
        }
            footer .footer-right a {
                color: #000;
                font-weight: 500;
            }