main {
    margin-top: 0;
}
.main-block {
    position: relative;
    height: 1080px;
    video {
        width: 100%;
        height: 100%;
        margin-top: -40px;
        object-fit: cover;
    }
    .bottom-blur {
        background: var(--bg-4);
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        bottom: 0;
        height: 280px;
    }
    .content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            .notification {
                margin-top: 280px;
                padding: 10px 14px;
                border-radius: 32px;
                border: var(--border-3);
                background: var(--bg-5);
                box-shadow: var(--shadow-2);
                backdrop-filter: blur(10px);
                font-size: 15px;
                font-weight: 500;
                color: var(--text-2);
                display: flex;
                align-items: center;
                gap: 4px;
                img {
                    width: 14px;
                }
            }
            .hero {
                border: var(--border-3);
                background: var(--bg-10);
                padding: 10px;
                box-shadow: var(--shadow-3);
                backdrop-filter: blur(10px);
                border-radius: 20px;
                position: relative;
                max-width: 996px;
                display: flex;
                flex-direction: column;
                gap: 20px;
                align-items: center;
                margin-bottom: 10px;
                h1 {
                    border-radius: 10px;
                    padding: 40px;
                    background: var(--bg-7);
                    color: var(--text-5);
                    font-weight: 800;
                    font-size: 44px;
                    text-align: center;
                    span {
                        color: var(--text-2);
                        font-weight: 800;
                        font-size: 44px;
                    }
                }
                p {
                    font-size: 20px;
                    color: var(--text-5);
                    max-width: 628px;
                    text-align: center;
                    margin-bottom: 20px;
                }
            }
            .buttons {
                display: flex;
                gap: 16px;
            }
        }
    }
}
.promo {
    z-index: 1;
    position: relative;
    top: -213px;
    display: flex;
    justify-content: center;
    align-items: center;
    .clients {
        position: absolute;
        left: 0;
        right: 0;
        .slider-viewport {
            overflow: hidden;
            padding: 20px 0;
            background: var(--bg-11);
            .slider-track {
                display: flex;
                align-items: center;
                gap: 50px;
            }
        }
    }
    .block {
        width: 100%;
        max-width: 700px;
        padding: 28px 30px;
        border-radius: 20px;
        border: var(--border-3);
        background: var(--bg-10);
        box-shadow: var(--shadow-3);
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: space-between;
        div {
            width: 180px;
            min-width: 185px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            font-size: 20px;
            color: var(--text-1);
            span {
                color: var(--text-2);
                font-size: 52px;
                font-weight: 800;
                text-align: center;
            }
        }
        .trust {
            position: absolute;
            left: 0;
            top: -32px;
            font-size: 14px;
            border-radius: 32px;
            border: var(--bg-4);
            background: var(--bg-3);
            padding: 8px 16px;
            width: fit-content;
            backdrop-filter: blur(8px);
            box-shadow: var(--shadow-5);
            transform: rotate(-2.5deg);
        }
    }
}
.advantage {
    margin-top: -113px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 200px;
    h2 {
        font-size: 36px;
        font-weight: 700;
        color: var(--text-5);
        text-align: center;
        margin-bottom: 20px;
        span {
            font-size: 36px;
            font-weight: 700;
            color: var(--text-2);
        }
    }
    p {
        max-width: 520px;
        text-align: center;
        margin-bottom: 40px;
    }
    .snipets {
        width: 100%;
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 338px);
        justify-content: center;
        gap: 20px;
        .snipet {
            border-radius: 20px;
            background: var(--border-10);
            box-shadow: var(--shadow-4);
            z-index: 3;
            position: relative;
            backdrop-filter: blur(8px);
            padding: 10px;
            &:first-child {
                .content {
                    background-position: left top;
                }
            }
            &:nth-child(2) {
                .content {
                    background-position: right top;
                }
            }
            &:nth-child(3) {
                .content {
                    background-position: left bottom;
                }
            }
            &:nth-child(4) {
                .content {
                    background-position: right bottom;
                }
            }
            .content {
                height: 100%;
                padding: 42px;
                border-radius: 10px;
                border: var(--border-2);
                background: url(../images/advantage-bg.webp);
                background-size: 1180px;
                display: flex;
                align-items: center;
                justify-content: center;
                .text {
                    border-radius: 20px;
                    background: var(--bg-13);
                    box-shadow: var(--shadow-6);
                    padding: 30px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    max-width: 376px;
                    height: 100%;
                    max-height: 235px;
                    .label {
                        font-size: 14px;
                        border-radius: 32px;
                        border: var(--bg-4);
                        background: var(--bg-13);
                        padding: 6px 12px;
                        width: fit-content;
                        backdrop-filter: blur(8px);
                        box-shadow: var(--shadow-5);
                    }
                    h3 {
                        font-size: 24px;
                        font-weight: 700;
                        color: var(--text-5);
                        line-height: 100%;
                    }
                    p {
                        margin: 0;
                        text-align: left;
                    }
                    img {
                        width: 228px;
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                }
            }
        }
    }
}
.documentation {
    border-radius: 20px;
    border: var(--border-1);
    background: var(--bg-12);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(8px);
    padding: 10px;
    margin-bottom: 100px;
    .content {
        padding: 50px;
        border-radius: 10px;
        border: var(--border-3);
        background: var(--bg-6);
        display: flex;
        justify-content: space-between;
        gap: 40px;
        .left {
            max-width: 444px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            h2 {
                color: var(--text-4);
                font-size: 36px;
                font-weight: 700;
            }
            p {
                color: var(--text-4);
            }
            button {
                margin-top: auto;
                a {
                    padding: 10px 20px;
                    &::before {
                        content: '\f001';
                    }
                }
            }
        }
        .right {
            display: flex;
            width: 100%;
            min-width: 260px;
            padding: 24px;
            flex-direction: column;
            gap: 20px;
            border-radius: 12px;
            background: var(--bg-14);
            font-family: pt-mono;
            div {
                color: var(--text-8);
                font-family: pt-mono;
                span {
                    font-family: pt-mono;
                    color: var(--text-7);
                }
                b {
                    font-family: pt-mono;
                    font-weight: 400;
                    color: var(--text-9);
                }
            }
            .dots {
                display: flex;
                gap: 8px;
                div {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background: var(--bg-15);
                    &:nth-child(2) {
                        background: var(--bg-16);
                    }
                    &:nth-child(3) {
                        background: var(--bg-17);
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1200px) {
    .advantage {
        .snipets {
            grid-template-columns: 590px;
            grid-template-rows: repeat(4, 338px);
        }
    }
    .documentation {
        width: calc(100% - 40px);
    }
}
@media screen and (max-width: 768px) {
    .main-block {
        .bottom-blur {
            height: 224px;
        }
        .content {
            .wrapper {
                gap: 10px;
                .notification {
                    margin-top: 200px;
                }
                .hero {
                    h1 {
                        padding: 20px 10px;
                        font-size: 24px;
                        span {
                            font-size: 24px;
                        }
                    }
                    p {
                        font-size: 16px;
                    }
                }
                .buttons {
                    flex-direction: column;
                    gap: 10px;
                }
            }
        }
    }
    .promo {
        top: -180px;
        .clients {
            bottom: -172px;
            .slider-viewport {
                height: 380px;
                padding: 280px 0 60px;
                background: var(--bg-18);
            }
        }
        .block {
            flex-direction: column;
            align-items: center;
            margin-left: 20px;
            margin-right: 20px;
            gap: 50px;
            .trust {
                left: unset;
            }
        }
    }
    .advantage {
        margin-top: 70px;
        overflow: hidden;
        h2 {
            font-size: 24px;
            margin-bottom: 10px;
            span {
                font-size: 24px;
            }
        }
        p {
            margin-bottom: 20px;
        }
        .snipets {
            gap: 10px;
            grid-template-columns: 350px;
            grid-template-rows: repeat(4, 295px);
            .snipet {
                .content {
                    padding: 20px;
                    .text {
                        max-height: uset;
                        padding: 20px;
                        .label {
                            font-size: 12px;
                            font-weight: 300;
                        }
                        h3 {
                            margin-bottom: 6px;
                        }
                        p {
                            font-size: 14px;
                        }
                        img {
                            width: 140px;
                            top: 23px;
                            right: -23px;
                        }
                    }
                }
            }
        }
    }
    .documentation {
        margin-bottom: 0;
        .content {
            padding: 10px;
            flex-direction: column-reverse;
            gap: 20px;
            .left {
                width: 100%;
                max-width: unset;
                gap: 10px;
                h2 {
                    font-size: 24px;
                }
                p {
                    font-size: 14px;
                }
                button {
                    margin-top: 10px;
                    a {
                        padding: 10px 20px;
                        &::before {
                            content: '\f001';
                        }
                    }
                }
            }
            .right {
                padding: 16px;
                div {
                    font-size: 14px;
                    span {
                        font-size: 14px;
                    }
                    b {
                        font-size: 14px;
                    }
                }
                .dots {
                    display: flex;
                    gap: 8px;
                    div {
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        background: var(--bg-15);
                        &:nth-child(2) {
                            background: var(--bg-16);
                        }
                        &:nth-child(3) {
                            background: var(--bg-17);
                        }
                    }
                }
            }
        }
    }
}