main {
    .hero {
        margin-top: 20px;
        padding-bottom: 66px;
        position: relative;
        margin-bottom: 100px;
        .banner {
            height: 500px;
            background: var(--bg-3);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            .content {
                position: absolute;
                top: 108px;
                left: 50px;
                z-index: 2;
                width: 644px;
                h1 {
                    font-size: 44px;
                    line-height: 1.1;
                    letter-spacing: -1px;
                    color: var(--text-7);
                }
                p {
                    margin-top: 10px;
                    line-height: 20px;
                    font-weight: 500;
                    strong {
                        color: var(--text-2);
                        font-weight: 700;
                    }
                }
                .actions {
                    display: flex;
                    gap: 12px;
                    margin-top: 40px;
                    .register {
                        &::after {
                            content: '\f009';
                            transform: rotate(-45deg);
                            transition: 0.3s;
                        }
                        &:hover {
                            &::after {
                                transform: rotate(0);
                            }
                        }
                    }
                    .price {
                        &::after {
                            content: '\f00a';
                        }
                    }
                }
            }
            .art {
                position: absolute;
                top: 0;
                right: 0;
                width: 870px;
                height: 500px;
                video {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        .advantages {
            position: absolute;
            top: 446px;
            left: 50px;
            right: 50px;
            z-index: 3;
        }
    }
    .products {
        .tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 24px 0 12px;
            button {
                padding: 10px 12px;
                border-radius: 12px;
                background: var(--bg-3);
                font-size: 14px;
                font-weight: 700;
                line-height: 20px;
                color: var(--text-7);
                &.active {
                    background: var(--bg-1);
                    color: var(--text-6);
                }
            }
        }
    }
    .business {
        padding-bottom: 30px;
        strong {
            font-size: inherit;
            font-weight: 700;
            color: var(--text-2);
        }
        .tag {
            position: relative;
            display: flex;
            align-items: center;
            gap: 15px;
            width: fit-content;
            padding: 11px 20px;
            padding-left: max(20px, calc((100% - 1440px) / 2));
            margin-bottom: 20px;
            border-radius: 0 10px 10px 0;
            background: var(--bg-3);
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            > span {
                font: inherit;
            }
            .icon {
                flex: none;
                width: 20px;
                height: 20px;
                font-family: icon;
                font-size: 20px;
                font-weight: 400;
                line-height: 20px;
                color: var(--text-2);
            }
            strong {
                font-weight: 800;
            }
            &::before, &::after {
                content: '\f022';
                position: absolute;
                left: 0;
                top: 100%;
                font-family: icon;
                font-size: 20px;
                font-weight: 400;
                line-height: 20px;
                color: var(--bg-3);
            }
            &::after {
                top: -20px;
                transform: rotate(270deg);
            }
        }
        .wrapper {
            display: grid;
        }
        .content, .art {
            grid-area: 1 / 1;
        }
        .content {
            position: relative;
            z-index: 1;
            width: 58%;
        }
        .intro {
            h2 {
                font-family: SSFBreakthrough;
                font-size: 32px;
                font-weight: 800;
                line-height: 1.1;
                color: var(--text-7);
                strong {
                    font: inherit;
                }
            }
            p {
                max-width: 593px;
                margin-top: 10px;
                line-height: 20px;
            }
        }
        .cards {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 30px;
            .item {
                position: relative;
                display: flex;
                align-items: center;
                min-height: 212px;
                padding: 40px;
                border-radius: 20px;
                background: var(--bg-3);
                overflow: hidden;
                .text {
                    position: relative;
                    z-index: 1;
                    width: 400px;
                    max-width: 60%;
                    h3 {
                        font-family: SSFBreakthrough;
                        font-size: 28px;
                        font-weight: 800;
                        line-height: 1.1;
                        color: var(--text-7);
                    }
                    p {
                        max-width: 400px;
                        margin-top: 10px;
                        line-height: 20px;
                        span {
                            color: var(--text-2);
                            font-weight: 700;
                        }
                    }
                }
                img {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 45.5%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
        .art {
            justify-self: end;
            width: 42.222%;
            aspect-ratio: 608 / 1080;
            margin-top: -11px;
            position: relative;
            &::before {
                position: absolute;
                inset: 0;
                background: var(--gradient-video);
                content: '';
                z-index: 1;
            }
            video {
                width: 100%;
                aspect-ratio: 608 / 1080;
                object-fit: cover;
                display: block;
            }
        }
    }
    .faq {
        position: relative;
        padding: 60px 10px;
        margin-bottom: 100px;
        border-radius: 20px;
        background: var(--bg-3);
        overflow: hidden;
        &::before, &::after {
            content: '';
            position: absolute;
            width: 334px;
            height: 327px;
            background: url(../images/faq-logo.svg) no-repeat center;
            background-size: contain;
            pointer-events: none;
        }
        &::before {
            top: -30px;
            left: -30px;
        }
        &::after {
            right: -30px;
            bottom: -30px;
        }
        .content {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            > .btn {
                width: fit-content;
                max-width: 100%;
                margin: 30px auto 0;
                line-height: 20px;
            }
        }
        .intro {
            text-align: center;
            h2 {
                font-family: SSFBreakthrough;
                font-size: 32px;
                font-weight: 800;
                line-height: 1.1;
                color: var(--text-7);
                span {
                    font: inherit;
                    color: var(--text-2);
                }
            }
            p {
                margin-top: 10px;
                line-height: 20px;
                &:empty {
                    display: none;
                }
            }
        }
        .items {
            margin-top: 30px;
        }
    }
}
@media screen and (max-width: 1279px) {
    main {
        .hero {
            margin-top: 10px;
            padding-bottom: 0;
            margin-bottom: 80px;
            .banner {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                align-items: center;
                gap: 24px;
                height: auto;
                min-height: 420px;
                padding: 100px 24px 80px;
                .hero-tag {
                    top: 32px;
                    padding-left: 24px;
                }
                .content {
                    position: static;
                    width: auto;
                    h1 {
                        font-size: 34px;
                    }
                    .actions {
                        flex-wrap: wrap;
                        margin-top: 24px;
                    }
                }
                .art {
                    position: relative;
                    width: 100%;
                    height: auto;
                    aspect-ratio: 87 / 50;
                }
            }
            .advantages {
                position: relative;
                inset: auto;
                margin: -40px 24px 0;
            }
        }
        .directions {
            width: calc(100% - 48px);
            .head {
                gap: 24px;
                h2 {
                    font-size: 28px;
                    line-height: 1.1;
                }
                .btn-3 {
                    flex: none;
                }
            }
        }
        .business {
            padding: 20px 0 0;
            margin-bottom: 80px;
            .tag {
                padding-left: 24px;
                font-family: SSFBreakthrough;
                font-feature-settings: normal;
            }
            .wrapper {
                width: calc(100% - 48px);
                grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
                gap: 24px;
                .content {
                    display: contents;
                    .intro {
                        grid-area: 1 / 1 / 2 / -1;
                        position: relative;
                        z-index: 1;
                        h2 {
                            font-size: 28px;
                        }
                        p {
                            max-width: none;
                            font-size: 14px;
                            line-height: 18px;
                        }
                    }
                    .cards {
                        grid-area: 2 / 2;
                        display: grid;
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                        margin-top: 0;
                        position: relative;
                        z-index: 1;
                        .item {
                            flex-direction: column;
                            align-items: stretch;
                            padding: 0;
                            .text {
                                width: 100%;
                                max-width: none;
                                padding: 20px 20px 0;
                                h3 {
                                    font-size: 20px;
                                }
                                p {
                                    font-size: 14px;
                                    line-height: 18px;
                                }
                            }
                            img {
                                position: static;
                                align-self: flex-end;
                                width: 80%;
                                height: auto;
                                aspect-ratio: 287 / 160;
                                margin-top: auto;
                                object-position: right bottom;
                            }
                        }
                    }
                }
                .art {
                    grid-area: 2 / 1;
                    align-self: center;
                    justify-self: center;
                    width: 100%;
                    max-width: 390px;
                    margin-top: 0;
                    z-index: 0;
                }
            }
        }
        .faq {
            width: calc(100% - 48px);
            padding: 40px 24px;
            margin-bottom: 80px;
            .content {
                .intro {
                    h2 {
                        font-size: 28px;
                    }
                    p {
                        font-size: 14px;
                        line-height: 18px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    main {
        .hero {
            .banner {
                grid-template-columns: minmax(0, 1fr);
                align-content: start;
                gap: 0;
                min-height: 770px;
                padding: 102px 16px 127px;
                border-radius: 16px;
                .hero-tag {
                    top: 40px;
                    padding: 11px 16px;
                    line-height: 20px;
                    span::before {
                        margin-right: 12px;
                    }
                }
                .content {
                    grid-area: 2 / 1;
                    h1 {
                        font-size: 26px;
                    }
                    .actions {
                        flex-direction: column;
                        gap: 8px;
                        margin-top: 20px;
                        button {
                            min-height: 46px;
                            line-height: 20px;
                        }
                        .register {
                            padding: 13px 8px;
                            &::after {
                                transform: none;
                            }
                        }
                        .price {
                            padding: 12px 7px;
                        }
                    }
                }
                .art {
                    grid-area: 1 / 1;
                    justify-self: center;
                    width: 128.3%;
                    max-width: 460px;
                    transform: translateX(-20px);
                    &::after {
                        content: '';
                        position: absolute;
                        inset: 0;
                        pointer-events: none;
                        background:
                            linear-gradient(270deg, var(--bg-3), transparent 10.42%),
                            linear-gradient(0deg, var(--bg-3), transparent 20.158%),
                            linear-gradient(180deg, var(--bg-3), transparent 20.158%),
                            linear-gradient(90deg, var(--bg-3), transparent 20.158%);
                    }
                }
            }
            .advantages {
                margin: -50px 20px 0;
            }
        }
        .directions {
            width: calc(100% - 32px);
            .head {
                h2 {
                    font-size: 22px;
                }
                .btn-3 {
                    display: none;
                }
            }
        }
        .business {
            overflow-x: clip;
            .tag {
                gap: 12px;
                padding: 11px 16px;
            }
            .wrapper {
                width: calc(100% - 32px);
                grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
                gap: 20px 0;
                .content {
                    .intro {
                        h2 {
                            font-size: 22px;
                        }
                    }
                    .cards {
                        grid-area: 2 / 2;
                        grid-template-columns: minmax(0, 1fr);
                        margin-top: 0;
                        .item {
                            .text {
                                padding: 16px 16px 0;
                                h3 {
                                    font-size: 16px;
                                }
                                p {
                                    margin-top: 4px;
                                    line-height: 20px;
                                }
                            }
                            img {
                                width: 200px;
                                max-width: 100%;
                                aspect-ratio: 200 / 112;
                            }
                            &:first-child {
                                .text {
                                    p {
                                        line-height: 18px;
                                    }
                                }
                            }
                        }
                    }
                }
                .art {
                    grid-area: 1 / 1 / 3 / 2;
                    position: sticky;
                    top: 80px;
                    align-self: start;
                    justify-self: end;
                    width: 390px;
                    max-width: 100vw;
                    max-height: calc(100svh - 160px - env(safe-area-inset-bottom, 0px));
                    margin: 40px -40px 0 0;
                    video {
                        max-height: inherit;
                        object-fit: contain;
                        object-position: right top;
                    }
                }
            }
        }
        .faq {
            width: calc(100% - 32px);
            padding: 20px 16px;
            &::before {
                width: 216px;
                height: 212px;
            }
            &::after {
                width: 196px;
                height: 192px;
            }
            .content {
                .intro {
                    h2 {
                        font-size: 22px;
                    }
                }
                > .btn {
                    padding: 13px 20px;
                }
            }
        }
    }
}