@font-face {
    font-family: "TT Firs Neue";
    src: local("TT Firs Neue-Normal"), url("/local/templates/main/assets/fonts/TT_Firs_Neue_Normal.woff2") format("woff2"), url("/local/templates/main/assets/fonts/TT_Firs_Neue_Normal.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "TT Intrphss Pr Mn Trl Vr";
    src: local("TT Intrphss Pr Mn Trl Vr_Mono_Regular"), url("/local/templates/main/assets/fonts/TT_Interphases_Pro_Mono_Regular.woff2") format("woff2"), url("/local/templates/main/assets/fonts/TT_Interphases_Pro_Mono_Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: "TT Firs Neue", sans-serif;*/
}


.btn {
    white-space: nowrap;
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 4px;
    font-family: "TT Intrphss Pr Mn Trl Vr";
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    letter-spacing: 0%;
    text-transform: uppercase;
    background-color: #182126;
    color: #fff;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.btn::before {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background-color: #182126;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.btn p,
.btn span {
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1), width 0.28s cubic-bezier(0.23, 1, 0.32, 1), left 0.28s cubic-bezier(0.23, 1, 0.32, 1), right 0.28s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1), width 0.28s cubic-bezier(0.23, 1, 0.32, 1), left 0.28s cubic-bezier(0.23, 1, 0.32, 1), right 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn p:nth-child(2) {
    border-radius: 4px;
    position: absolute;
    height: 0;
    width: 80%;
    left: 10%;
    right: 10%;
    background-color: #4d4d4d;
    color: #fff;
    bottom: 10%;
    z-index: 1;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
}
.btn p:nth-child(2) span {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(45deg);
    transform: translate3d(0, 100%, 0) rotateX(45deg);
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.btn p:nth-child(2)::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    background-color: #4d4d4d;
    height: 13px;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.btn.white-on-dark {
    background-color: #fff;
    color: #182126;
}
.btn.white-on-dark::before {
    background-color: #fff;
}
.btn.white-on-dark p:nth-child(2) {
    background-color: #ff8522;
    color: #182126;
}
.btn.white-on-dark p:nth-child(2)::after {
    background-color: #ff8522;
}
.btn.white-on-orange {
    background-color: #fff;
    color: #182126;
}
.btn.white-on-orange::before {
    background-color: #fff;
}
.btn.white-on-orange p:nth-child(2) {
    background-color: #182126;
    color: #fff;
}
.btn.white-on-orange p:nth-child(2)::after {
    background-color: #182126;
}
.btn.orange {
    background-color: #ff8522;
    color: #182126;
}
.btn.orange::before {
    background-color: #ff8522;
}
.btn.orange p:nth-child(2) {
    background-color: #182126;
    color: #fff;
}
.btn.orange p:nth-child(2)::after {
    background-color: #182126;
}
.btn.transparent {
    /*border: 1px solid rgba(0, 0, 0, 0.1490196078);*/
    /*background-color: #bebebe;*/
    /*color: #182126;*/
}
.btn.transparent::before {
    background-color: transparent;
}
.btn.transparent p:nth-child(2) {
    background-color: #FFFFFF;
    color: #111113;
}
.btn.transparent p:nth-child(2)::after {
    background-color: transparent;
}
@media (hover: hover) {
    .btn.transparent:hover {
        border-color: transparent;
    }
}
.btn.transparent:active {
    border-color: transparent;
}
@media (hover: hover) {
    @media (min-width: 568px) {
        .btn:not(.disabled):hover p:nth-child(1) {
            translate: 0 -100%;
        }

        .btn:not(.disabled):hover p:nth-child(2) {
            height: 100%;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
            translate: 0 0;
        }

        .btn:not(.disabled):hover p:nth-child(2) span {
            -webkit-transform: translate3d(0, 0, 0) rotateX(0);
            transform: translate3d(0, 0, 0) rotateX(0);
        }
    }
}
.btn:not(.disabled):active p:nth-child(1) {
    translate: 0 -100%;
}
.btn:not(.disabled):active p:nth-child(2) {
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    translate: 0 0;
}
.btn:not(.disabled):active p:nth-child(2) span {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0);
    transform: translate3d(0, 0, 0) rotateX(0);
}
.btn.disabled {
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.0509803922);
    color: rgba(0, 0, 0, 0.1490196078);
}
.btn.disabled::before {
    display: none;
}

.icon-btn {
    width: 32px;
    height: 32px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 32px;
    flex: 0 0 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #ff8522;
    overflow: hidden;
    position: relative;
    -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    color: #182126;
}
.icon-btn:hover {
    color: #fff;
}
.icon-btn::after {
    border-radius: 4px;
    content: "";
    display: block;
    width: 110%;
    height: 0%;
    -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background-color: #182126;
    position: absolute;
    bottom: -5%;
    left: -5%;
    right: 0;
}
.icon-btn svg,
.icon-btn img,
.icon-btn span {
    position: relative;
    z-index: 2;
}
.icon-btn.white {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1490196078);
}
@media (hover: hover) {
    .icon-btn.white:hover {
        border-color: #182126;
    }
    .icon-btn.white:hover svg path {
        fill: #fff;
    }
}
@media (hover: hover) {
    .icon-btn:hover::after {
        height: 110%;
    }
}


a {
    text-decoration: none;
}

body {
    background: #f2f2f2;
}

header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 80px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .3s ease;

    mix-blend-mode: difference;
    isolation: isolate;
}
header:has(.show) {
    mix-blend-mode: normal;
    isolation: initial;
}
.logo img {
    height: 40px;
}

header .burger {
    display: none;
}
@media (max-width: 1024px) {
    header .burger {
        display: flex;
        width: 20px;
        height: 20px;
    }
}

header .menu {
    display: none;
}
@media (max-width: 1024px) {
    header .menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        justify-content: space-between;
        padding: 12px;
        padding-top: 68px;
        z-index: 99;
        right: -110vw;
        top: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, 0.85);
        transition: .5s ease;
    }
    header .menu.show {
        right: 0;
    }
    html:has(header .menu.show) {
        overflow: hidden;
    }
    header .menu .menu-close {
        position: absolute;
        top: 12px;
        right: 12px;
    }
    header .footer-contacts {
        background: #fff;
        border-radius: 12px;
        padding: 16px;
    }
}


/* ===== HERO БЛОК ===== */

.hero {
    background-image: url("/course/piano-start/img/hero.png");
    background-size: cover;
    background-position: center;
    padding: calc(52px + 80px) 0px 0;
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /*gap: 160px;*/
    justify-content: space-between;
    gap: 32px;
}
@media (max-width: 568px) {
    .hero {
        gap: 40px;
    }
}

.hero-top {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    padding: 0 20px;
}
@media (max-width: 1024px) {
    .hero-top {
        flex-direction: column;
        gap: 56px;
    }
}
@media (max-width: 568px) {
    .hero-top {
        gap: 40px;
        padding: 0 12px;
    }
}

.hero-content {
    width: calc(100% - 415px - 80px);
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media (max-width: 1024px) {
    .hero-content {
        width: 100%;
        align-items: center;
    }
}

.hero-content h1 {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 88px;
    line-height: 98%;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 800px;
}
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 64px;
        text-align: center;
    }
}
@media (max-width: 568px) {
    .hero-content h1 {
        font-size: 40px;
    }
}

.hero-content p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 348px;
}
@media (max-width: 1024px) {
    .hero-content p {
        text-align: center;
    }
}
@media (max-width: 568px) {
    .hero-content p {

    }
}

.hero-form-card {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    width: 415px;
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.7);
}
@media (max-width: 1024px) {
    .hero-form-card {

    }
}
@media (max-width: 568px) {
    .hero-form-card {
        width: 100%;
    }
}

.form-label {
    display: flex;
    border-bottom: 1px solid rgba(17, 17, 19, 0.15);
    padding: 20px;
    height: 60px;

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: #111113;
}

.form-fields {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-fields input {
    border-radius: 4px;
    border: none;
    outline: none;
    padding: 4px 4px 4px 8px;
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.55);

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
}
@media (max-width: 568px) {
    .form-fields input {
        height: 44px;
    }
}

.form-fields input::placeholder {
    color: #999;
}

.form-fields input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(212, 136, 31, 0.2);
}

.form-submit {
    border-radius: 4px;
    border: none;
    outline: none;
    padding: 12px 16px;
    height: 48px;
    background: #111113;
    width: 100%;

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}
@media (max-width: 568px) {
    .form-submit {
        height: 44px;
    }
}

.form-submit:hover {

}

.form-checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 9px;
    color: #555;
}

.form-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.form-checkbox label p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 12px;
    line-height: 140%;
    color: #4c4c4c;
}
.form-checkbox label p a {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 12px;
    line-height: 140%;
    color: #4c4c4c;
    text-decoration: underline;
}

.form-checkbox input {
    display: none;
}

.form-checkbox label .check {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    background-color: #fff;
}
.form-checkbox label:has(input:checked) .check {
    border: 1px solid #111113;
    background-color: #111113;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTkuODAwNzggMC45NDIzODNMMy43OTc4NSA2LjcyNzU0QzMuNzIwNSA2LjgwMjA4IDMuNjQwMjYgNi44NTUgMy41NTc2MiA2Ljg4NjcyQzMuNDc0ODMgNi45MTg5MyAzLjM4ODQyIDYuOTM1NTUgMy4yOTk4IDYuOTM1NTVDMy4yMTEzMSA2LjkzNTUgMy4xMjU2NCA2LjkxODg5IDMuMDQyOTcgNi44ODY3MkMyLjk2MDI3IDYuODU1MDIgMi44ODAxMyA2LjgwMjEgMi44MDI3MyA2LjcyNzU0TDAgNC4wMjYzN0wxLjAxMTcyIDMuMDUxNzZMMy4zMzM5OCA1LjI4OTA2TDguODIyMjcgMEw5LjgwMDc4IDAuOTQyMzgzWiIgZmlsbD0id2hpdGUiIC8+Cjwvc3ZnPg==');
    background-position: center;
    background-repeat: no-repeat;
}

.hero-slider-section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    /*padding: 40px 40px 40px 20px;*/
}

.hero-slider-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
@media (max-width: 568px) {
    .hero-slider-inner {
        grid-template-columns: 1fr;
    }
}

.slider-await {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 40px 52px 40px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 568px) {
    .slider-await {
        padding: 20px 12px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
}



.await-label {
    border-radius: 2px;
    padding: 0px 4px;
    height: 20px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.12);
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.await-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 32px;
    line-height: 98%;
    letter-spacing: -0.01em;
    color: #fff;
}
.await-title {
    display: none;
    /* твоя анимация для заголовков */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.await-title.active {
    display: block;
    opacity: 1;
}

.slider-nav {
    display: flex;
    gap: 16px;
    width: 100%;
    justify-content: space-between;
}

.slider-nav .slider-button {
    display: flex;
    gap: 4px;
}

.slider-nav button {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 36px;
    background: transparent;
    cursor: pointer;
    transition: .3s ease;
}

.slider-nav button:hover {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #fff;
}
.slider-nav button:hover path {
    fill: #111113;
}

.slider-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.progress-lines {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.progress-line {
    height: 18px;
    width: 1px;
    background: #FFFFFF;
    transition: 0.3s ease;
}

.progress-line.active {
    height: 8px;
}

.slider-counter {
    color: #fff;
    font-size: 14px;
}

.slider-counter {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.slider-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10%;
    background: #fff;
    border-radius: 1px;
    transition: width 0.3s;
}

.slider-teacher {
    padding: 40px 40px 40px 40px;
    display: flex;
    gap: 32px;
    align-items: center;
}
@media (max-width: 568px) {
    .slider-teacher {
        padding: 20px 12px;
        margin-bottom: 28px;
    }
}
.slider-teacher .slide {
    display: none;
    gap: 32px;
    align-items: center;
    /* твоя анимация для переходов */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider-teacher .slide.active {
    display: flex;
    opacity: 1;
}

.teacher-avatar {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    overflow: hidden;
}
@media (max-width: 1024px) {
    .teacher-avatar {
        width: 88px;
        min-width: 88px;
        height: 88px;
    }
}
@media (max-width: 568px) {
    .teacher-avatar {
        width: 72px;
        min-width: 72px;
        height: 72px;
    }
}

.teacher-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-info h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.teacher-info small {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #d4881f;
    margin-bottom: 12px;
}

.teacher-info p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 372px;
}



/**/

.about-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1200px;
    margin: 80px auto;
    gap: 130px;
}
@media (max-width: 1024px) {
    .about-intro {
        gap: 72px;
    }
}
@media (max-width: 568px) {
    .about-intro {
        flex-direction: column;
        margin: 0px auto;
        padding: 64px 28px;
        gap: 40px;
    }
}

.about-intro__video {
    width: 100%;
    max-width: 458px;
    position: sticky;
    top: 80px;
    aspect-ratio: 16/9;
}
@media (max-width: 568px) {
    .about-intro__video {
        position: relative;
        top: 0;
    }
}

.about-intro__video-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.about-intro__video-frame.show {
    /*position: fixed;*/
}
html:has(.about-intro__video-frame.show) {
    overflow: hidden;
}
html:has(.about-intro__video-frame.show) header {
    opacity: 0;
    pointer-events: none;
}
html:has(.about-intro__video-frame.show) .cta {
    opacity: 0;
    pointer-events: none;
}

.about-intro__video-frame img, .about-intro__video-frame video {
    width: 100%;
    height: auto;
    display: block;
}

.about-intro__play {
    position: absolute;
    bottom: -16px;
    left: -16px;
    width: 80px;
    height: 80px;
    background: #111113;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1024px) {
    .about-intro__play {
        width: 56px;
        height: 56px;
    }
}
@media (max-width: 568px) {
    .about-intro__play {
        width: 56px;
        height: 56px;
    }
}

.about-intro__play:hover {
    width: 88px;
    height: 88px;
    bottom: -20px;
    left: -20px;
}

.about-intro__play::after {
    content: '▶';
    font-size: 32px;
    color: white;
    margin-left: 5px;
    transition: .3s ease;
}
.about-intro__play:hover::after {
    font-size: 28px;
}
@media (max-width: 1024px) {
    .about-intro__play::after {
        font-size: 22px;
        margin-left: 3px;
    }
}

.about-intro-video-modal {
    position: absolute;
    bottom: -16px;
    left: -16px;
    width: 80px;
    height: 80px;
    background: #111113;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    overflow: hidden;
    /*transition: 1s ease;*/
}
@media (max-width: 568px) {
    .about-intro-video-modal {
        width: 56px;
        height: 56px;
    }
}
.about-intro-video-modal.show {
    width: 100vw;
    height: 100svh;
    z-index: 1;
    border-radius: 0;
    left: 0;
    top: 0;
    position: fixed;
    background: rgba(17, 17, 19, 0.5);
    padding: 4%;
}
.about-intro-video-modal video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}
.about-intro-video-modal.show {

}
.video-controls {
    position: absolute;
    z-index: 1001;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: .5s ease;
}
.video-controls:hover {
    opacity: 1;
}
video:hover ~ .video-controls {
    opacity: 1;
}

/* Базовый стиль кнопки */
.video-controls__btn {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.video-controls__btn:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.video-controls__btn:active {
    transform: scale(0.95);
}

/* Специфичный стиль для кнопки play/pause */
.video-controls__btn--play-pause {
    /* Дополнительные стили если нужны */
}

.video-controls__btn--play-pause.playing {
    /* Стили когда видео воспроизводится */
}


.about-intro__content {
    display: flex;
    flex-direction: column;
    gap: 72px;
}
@media (max-width: 1024px) {
    .about-intro__content {
        gap: 44px;
    }
}
@media (max-width: 568px) {
    .about-intro__content {
        gap: 32px;
    }
}

.about-intro__text-block {

}

.about-intro__text {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #111113;
}
@media (max-width: 1024px) {
    .about-intro__text {
        font-size: 32px;
    }
}
@media (max-width: 568px) {
    .about-intro__text {
        font-size: 24px;
    }
}

.char {
    color: rgba(17, 17, 19, 0.15);
    transition: color 0.3s ease;
}

.about-intro__button {
    background-color: #d4881f;
    color: white;
    border: none;
    padding: 15px 35px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 25px;
}

.about-intro__button:hover {
    background-color: #b8710a;
    transform: translateY(-3px);
}

.suited-for {
    background: #111113;
    padding: 80px 40px;
    display: flex;
    justify-content: center;
}
@media (max-width: 1024px) {
    .suited-for {

    }
}
@media (max-width: 568px) {
    .suited-for {
        padding: 64px 28px;
    }
}
.suited-for .container {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.suited-for h2 {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 88px;
    line-height: 98%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
    max-width: 690px;
}
@media (max-width: 1024px) {
    .suited-for h2 {
        font-size: 64px;
    }
}
@media (max-width: 568px) {
    .suited-for h2 {
        font-size: 40px;
    }
}

.suited-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 62px;
}
@media (max-width: 1024px) {
    .suited-container {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

.suited-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
@media (max-width: 568px) {
    .suited-col {
        gap: 20px;
    }
}

.suited-circle {
    cursor: pointer;
    transition: all 1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 320px;
    height: calc(320px + 24px + 36px);
}
@media (max-width: 1024px) {
    .suited-circle {
        height: auto;
    }
}
@media (max-width: 568px) {
    .suited-circle {
        gap: 20px;
    }
}

.suited-circle .img {
    border-radius: 50%;
    width: 264px;
    height: 264px;
    overflow: hidden;
    transition: all 1s ease;
}
@media (max-width: 1024px) {
    .suited-circle .img {
        width: 320px;
        height: 320px;
    }
}
@media (max-width: 568px) {
    .suited-circle .img {
        width: 320px;
        height: 320px;
    }
}

.suited-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suited-col .suited-circle:hover .img,
.suited-col.active .suited-circle .img {
    width: 320px;
    height: 320px;
    /*scale: 1.21212;*/
}

.suited-label {
    border-radius: 4px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    height: 36px;

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: #fff;
}
.suited-label:after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff8522;
}

.suited-content {
    padding-bottom: 24px;
    /*border-bottom: 2px solid #ff8522;*/
    transition: 1s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.suited-content:after {
    content: '';
    position: absolute;
    bottom: 0;
    display: flex;
    height: 2px;
    width: 0%;
    background: #ff8522;
    transition: 1s ease;
}
.suited-col.active .suited-content:after {
    width: 100%
}

.suited-col .suited-content {
    opacity: 0.3;
    pointer-events: none;
}
@media (max-width: 1024px) {
    .suited-col .suited-content {
        opacity: 1;
        pointer-events: all;
    }
}

.suited-col.active .suited-content {
    opacity: 1;
    pointer-events: all;
}



.suited-text {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.suited-text li {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: #fff;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.suited-text li:last-child {
    border-bottom: none;
}

.suited-text li:before {
    content: "";
    display: flex;
    background: #FFFFFF;
    width: 3px;
    min-width: 3px;
    height: 3px;
    border-radius: 3px;
    transform: translateY(7px);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.teacher-banner {
    padding: 60px 40px;
    background-color: #f3f3f3;
}
@media (max-width: 1024px) {
    .teacher-banner {
        padding: 80px 20px;
    }
}
@media (max-width: 568px) {
    .teacher-banner {
        padding: 64px 12px;
    }
}

.teacher-banner-inner {
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background-image: url("/course/piano-start/img/teacher-banner-bg.png");
    background-size: cover;
    display: flex;
    align-items: stretch;
}
@media (max-width: 568px) {
    .teacher-banner-inner {
        flex-direction: column-reverse;
        background-position: center;
    }
}

.teacher-banner-image {
    width: 100%;
    max-width: 694px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.teacher-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-banner-content {
    padding: 80px 0px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    max-width: 485px;
}
@media (max-width: 1024px) {
    .teacher-banner-content {

    }
}
@media (max-width: 568px) {
    .teacher-banner-content {
        padding: 40px 20px;
        gap: 24px;
    }
}

.teacher-tag {
    margin-bottom: calc(54px - 32px);
    border-radius: 2px;
    padding: 0px 4px;
    width: fit-content;
    height: 20px;
    background: rgba(255, 255, 255, 0.12);
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 568px) {
    .teacher-tag {
        margin-bottom: calc(32px - 24px);
    }
}

.teacher-name {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #fff;
}
@media (max-width: 1024px) {
    .teacher-name {
        font-size: 32px;
    }
    .teacher-name br {
        display: none;
    }
}
@media (max-width: 568px) {
    .teacher-name {
        font-size: 24px;
    }
}

.teacher-desc {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.85);
}

.teacher-btn {
    margin-top: calc(54px - 32px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 147px;
    height: 56px;
    background: rgba(255, 255, 255, 0.12);
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}
@media (max-width: 568px) {
    .teacher-btn {
        margin-top: calc(32px - 24px);
        background: transparent;
    }
}

.teacher-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.materials-section {
    background: #f2f2f2;
    padding: 80px 20px;
}
@media (max-width: 568px) {
    .materials-section {
        padding: 64px 0px;
        padding-top: 0;
    }
}

.materials-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 1024px) {
    .materials-inner {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
}

.materials-left {
    border: 1px solid rgba(17, 17, 19, 0.05);
    border-radius: 16px;
    padding: 32px;
    background: #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.materials-pretitle {
    position: absolute;
    top: 32px;

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}


.materials-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.materials-nav li {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: rgba(17, 17, 19, 0.15);
    text-align: center;
    cursor: pointer;
    transition: color 0.3s;
}

.materials-nav li.active {
    color: #111113;
}

.materials-right {
    border-radius: 16px;
    /*padding: 164px 64px 155px 64px;*/
    background: #111113;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
@media (max-width: 1024px) {
    .materials-right {
        border-radius: 0;
    }
}

.materials-inner {
    height: 500vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .materials-inner {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 32px;
    }
}

.materials-left {
    border: 1px solid rgba(17, 17, 19, 0.05);
    border-radius: 16px;
    padding: 32px;
    background: #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: sticky;
    top: 20px;
    height: calc(100svh - 40px);
    z-index: 10; /* Добавляем z-index */
}
@media (max-width: 1024px) {
    .materials-left {
        position: unset;
        height: auto;
        padding: 0;
        background: none;
        border: none;
    }
}

.materials-right {
    border-radius: 16px;
    background: transparent;
    position: sticky;
    top: 20px;
    height: calc(100svh - 40px);
    overflow: hidden;
    z-index: 9;
}
@media (max-width: 1024px) {
    .materials-right {
        height: auto;
        position: unset;
        border-radius: 0;
    }
}

.materials-pretitle {
    position: absolute;
    top: 32px;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}
@media (max-width: 1024px) {
    .materials-pretitle {
        position: unset;
    }
}

.materials-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
@media (max-width: 1024px) {
    .materials-nav {
        display: none;
    }
}

.materials-nav li {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: rgba(17, 17, 19, 0.15);
    text-align: center;
    cursor: pointer;
    transition: color 0.3s;
}

.materials-nav li.active {
    color: #111113;
}

.materials-nav li:hover:not(.active) {
    color: rgba(17, 17, 19, 0.35);
}

.materials-items {
    position: relative;
    width: 100%;
    height: 100vh;
}
@media (max-width: 1024px) {
    .materials-items {
        max-width: 100vw;
        height: auto;
        display: flex;
        gap: 12px;
        padding: 0 12px;
    }
}

.materials-item {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 164px 64px 155px 64px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: #111113;
    z-index: 1;
}
@media (min-width: 1025px) {
    .materials-item {
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
    }
}
@media (max-width: 1024px) {
    .materials-item {
        padding: 120px 64px;
        height: auto;
        min-height: auto;
        position: unset;
        border-radius: 16px;
    }
}
@media (max-width: 568px) {
    .materials-item {
        padding: 40px 20px;
        gap: 40px;
    }
}

.materials-item:first-child {
    position: relative;
    pointer-events: auto;
}
.materials-item.active {
    pointer-events: auto;
    z-index: 5;
}
@media (min-width: 1025px) {
    .materials-item:first-child {
        clip-path: inset(0 0 0 0);
    }
    .materials-item.active {
        clip-path: inset(0 0 0 0);

    }
}

.materials-item:nth-child(2) { z-index: 2; }
.materials-item:nth-child(3) { z-index: 3; }
.materials-item:nth-child(4) { z-index: 4; }
.materials-item:nth-child(5) { z-index: 5; }

.materials-preview-frame {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    width: 566px;
    height: 318px;
}


.materials-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.materials-caption {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 1024px) {
    .materials-caption {
        align-items: center;
        text-align: center;
    }
}

.materials-caption-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #fff;
}
@media (max-width: 1024px) {
    .materials-caption-title {
        font-size: 18px;
    }
}
@media (max-width: 568px) {
    .materials-caption-title {
        font-size: 18px;
        line-height: 120%;
        letter-spacing: -0.01em;
    }
}

.materials-caption-text {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.55);
    max-width: 352px;
}

.materials-item:nth-child(1) { z-index: 5;}
.materials-item:nth-child(2) {
    z-index: 4;
    /*background: #0f6062*/
}
.materials-item:nth-child(3) {
    z-index: 3;
    /*background: #0a7ddd*/
}
.materials-item:nth-child(4) {
    z-index: 2;
    /*background: #1e55b9*/
}
.materials-item:nth-child(5) {
    z-index: 1;
    /*background: #6a2112*/
}

.materials-nav-tag {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #fff;
    text-align: center;
}
@media (max-width: 568px) {
    .materials-nav-tag {
        font-size: 24px;
    }
}
@media (min-width: 1025px) {
    .materials-nav-tag {
        display: none;
    }
}

.materials-preview-frame {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    width: 566px;
    height: 318px;
}
@media (max-width: 1024px) {
    .materials-preview-frame {
        width: 100%;
    }
}

.materials-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.materials-caption {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.materials-caption-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #fff;
}

.materials-caption-text {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.55);
    max-width: 352px;
}



.materials-preview-frame {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    width: 566px;
    height: 318px;
}
@media (max-width: 1024px) {
    .materials-preview-frame {
        width: 100%;
        height: 100%;
        aspect-ratio: 512/288;
    }
}

.materials-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.materials-caption {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.materials-caption-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #fff;
}

.materials-caption-text {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.55);

    max-width: 352px;
}

.outcomes {
    background-color: #f9f9f9;
    padding: 160px 40px;
}
@media (max-width: 1024px) {
    .outcomes {
        padding: 80px 20px;
    }
}
@media (max-width: 568px) {
    .outcomes {
        padding: 104px 12px;
        padding-top: 40px;
    }
}

.outcomes-inner {
    max-width: 924px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}
@media (max-width: 568px) {
    .outcomes-inner {
        gap: 40px;
    }
}

.outcomes h2 {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 88px;
    line-height: 98%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #111113;
}
@media (max-width: 1024px) {
    .outcomes h2 {
        font-size: 64px;
    }
}
@media (max-width: 568px) {
    .outcomes h2 {
        font-size: 40px;
    }
}

.outcomes-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
    /*max-width: 780px;*/
}
@media (max-width: 1024px) {
    .outcomes-grid {

    }
}
@media (max-width: 568px) {
    .outcomes-grid {
        gap: 8px;
    }
}

.outcome-item {
    border-radius: 4px;
    padding: 8px 12px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    background: #e7e7e7;
    transition: all 0.3s;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif ;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: #111113;

    cursor: default;
}

.outcome-item:hover {
    background-color: rgba(17, 17, 19, 0.15);;
}

.outcome-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.outcome-icon svg {
    width: 28px;
    height: 28px;
}

.my-skills-section {
    background-color: #1a1a1a;
    color: #fff;
    padding: 0px 20px;
    display: flex;
    align-items: flex-start;
}

@media (max-width: 568px) {
    .my-skills-section {
        padding: 0px 12px;
        min-height: 452px !important;
        max-height: 452px;
        overflow: hidden;
    }
}

.my-skills-inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    align-items: center;
    position: sticky;
    top: 20px;
}

@media (max-width: 1024px) {
    .my-skills-inner {
    }
}

@media (max-width: 568px) {
    .my-skills-inner {
        gap: 0px;
        position: unset;
        align-items: center;
        width: 100%;
    }
}

.my-skills-label {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #fff;
    width: fit-content;
}

@media (max-width: 1024px) {
    .my-skills-label {
        font-size: 24px;
    }
}

@media (max-width: 568px) {
    .my-skills-label {
        font-size: 16px;
        word-wrap: break-word;
        max-width: 60px;
    }
}

.my-skills-list {
    /*overflow: hidden;*/
    height: calc(100svh);
}

@media (max-width: 568px) {
    .my-skills-list {
        height: 452px;
        max-height: 452px;
    }
}

.my-skills-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 40px 0;
}
@media (max-width: 568px) {
    .my-skills-items {
        padding: 40px 0;
        padding-left: 10px;
        gap: 32px;

    }
}

.my-skills-items li {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 150px;
    line-height: 98%;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.12);
    filter: blur(10px);
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .my-skills-items li {
        font-size: 80px;
    }
}

@media (max-width: 568px) {
    .my-skills-items li {
        font-size: 40px;
    }
    .my-skills-items li {
        color: rgba(255, 255, 255, 1) !important;
        filter: blur(0px) !important;
    }
}


.program-section {
    background: #f2f2f2;
    padding: 80px 20px;
}
@media (max-width: 1024px) {
    .program-section {

    }
}
@media (max-width: 1024px) {
    .program-section {
        padding: 64px 12px;
    }
}

.program-inner {
    /*max-width: 1200px;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
}
@media (max-width: 568px) {
    .program-inner {
        gap: 40px;
    }
}

.program-section h2 {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 88px;
    line-height: 98%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #111113;
}
@media (max-width: 1024px) {
    .program-section h2 {
        font-size: 64px;
    }
}
@media (max-width: 568px) {
    .program-section h2 {
        font-size: 40px;
    }
}

.program-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
@media (max-width: 1024px) {
    .program-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.program-grid > div {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
@media (max-width: 1024px) {
    .program-grid > div {
        gap: 24px;
    }
}

.program-item {
    border-radius: 16px;
    padding: 20px;
    padding-bottom: 0;
    background: #fafafa;
    break-inside: avoid;
    /*margin-bottom: 30px;*/
}


.program-item-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /*padding: 24px 28px;*/
    background-color: #f9f9f9;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}
.program-item-header > div {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.program-item-header:hover {
    /*background-color: #f0f0f0;*/
}

.program-item.open .program-item-header {
    /*background-color: #f0f0f0;*/
}

.program-item-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}
.program-item-meta span:nth-child(1) {
    border-radius: 2px;
    padding: 0px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}
.program-item-meta span:nth-child(2) {
    border: 1px solid rgba(17, 17, 19, 0.05);
    background: rgba(17, 17, 19, 0.05);
    border-radius: 2px;
    padding: 0px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}




.program-item-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #111113;
}
@media (max-width: 1024px) {
    .program-item-title {

    }
}
@media (max-width: 568px) {
    .program-item-title {
        font-size: 18px;
        line-height: 120%;
    }
}

.program-item-toggle {
    border: 4.01px solid rgba(17, 17, 19, 0.05);
    border-radius: 32px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    background-color: rgba(17, 17, 19, 0.05);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI0IDEzTDAgMTNMMCAxMUwyNCAxMVYxM1oiIGZpbGw9IiMxMTExMTMiIC8+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMyAwTDEzIDI0SDExTDExIDBIMTNaIiBmaWxsPSIjMTExMTEzIiAvPgo8L3N2Zz4=');
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 568px) {
    .program-item-toggle {
        width: 32px;
        min-width: 32px;
        height: 32px;
        background-size: 70%;
    }
}

.program-item-toggle:hover {
    background-color: #e8e8e8;
}

.program-item.open .program-item-toggle {
    background-color: #1a1a1a;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI0IDEzTDAgMTNMMCAxMUwyNCAxMVYxM1oiIGZpbGw9IndoaXRlIiAvPgo8L3N2Zz4=');
    color: #fff;
}


.program-item-content {
    max-height: 0;
    overflow: hidden;
    transition:  0.7s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
}

.program-item.open .program-item-content {
    max-height: 500px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.program-item-content strong {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #111113;
}
@media (max-width: 568px) {
    .program-item-content strong {
        font-size: 14px;
    }
}

.program-item-content p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.5);
}


.program-item-list {
    list-style: none;
    font-size: 13px;
    color: #888;
}

.program-item-list li {
    padding: 6px 0;
    padding-left: 16px;
    position: relative;
}

.program-item-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #d4881f;
    font-weight: bold;
}

.consult-banner {
    padding: 80px 40px;
    background-color: #f3f3f3;
}
@media (max-width: 1024px) {
    .consult-banner {
        padding: 60px 20px 80px;
    }
}
@media (max-width: 568px) {
    .consult-banner {
        padding: 64px 12px;
        padding-top: 0;
    }
}

.consult-inner {
    padding: 44px;
    padding-bottom: 108px;
    border-radius: 16px;
    background-image: url("/course/piano-start/img/consult-banner.png");
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}
@media (max-width: 1024px) {
    .consult-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 568px) {
    .consult-inner {
        padding: 40px 20px;
        gap: 24px;
    }
}

.consult-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 44px;
    max-width: 485px;
}
@media (max-width: 568px) {
    .consult-left {
        gap: 32px;
    }
}

.consult-badge {
    border-radius: 2px;
    padding: 0px 4px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    height: 20px;

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.consult-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #fff;
}
@media (max-width: 1024px) {
    .consult-title {
        font-size: 32px;
    }
}
@media (max-width: 568px) {
    .consult-title {
        font-size: 24px;
    }
}

.consult-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 485px - 102px);
}
@media (max-width: 1024px) {
    .consult-form {
        width: 100%;
    }
}

.consult-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}
@media (max-width: 1024px) {
    .consult-row {
        grid-template-columns: 1fr;
    }
}

.consult-input {
    border-radius: 4px;
    border: none;
    outline: none;
    padding: 4px 4px 4px 8px;
    display: flex;
    align-items: center;
    height: 48px;
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.2);

    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}
@media (max-width: 568px) {
    .consult-input {
        height: 44px;
    }
}

.consult-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.consult-input:focus {
    outline: none;
}

.consult-row--bottom {
    display: flex;
    gap: 16px;
    align-items: center;
}
@media (max-width: 1024px) {
    .consult-row--bottom {
        flex-direction: column;
        width: 100%;
    }
}

.consult-submit {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    min-width: 280px;
    height: 48px;
    background: #111113;
    border: none;
}
.consult-submit:before {
    background: #111113;
}
@media (max-width: 1024px) {
    .consult-submit {
        width: 100%;
    }
}
@media (max-width: 568px) {
    .consult-submit {
        height: 44px;
    }
}
.consult-submit p:nth-child(2) {
    /*background: #ff8522;*/
    /*color: #111113;*/
}
.consult-submit p:nth-child(2)::after {
    /*background: #ff8522;*/
}

.consult-check {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (max-width: 1024px) {
    .consult-check {
        width: 100%;
    }
}

.consult-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;

    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 12px;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.55);
}
.consult-check label p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 12px;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.55);
}
.consult-check label p a {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 12px;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
}

.consult-check input {
    display: none;
}

.consult-check label .check {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    width: 16px;
    height: 16px;
    background-color: #fff;
}
.consult-check label:has(input:checked) .check {
    border: 1px solid #111113;
    background-color: #111113;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTkuODAwNzggMC45NDIzODNMMy43OTc4NSA2LjcyNzU0QzMuNzIwNSA2LjgwMjA4IDMuNjQwMjYgNi44NTUgMy41NTc2MiA2Ljg4NjcyQzMuNDc0ODMgNi45MTg5MyAzLjM4ODQyIDYuOTM1NTUgMy4yOTk4IDYuOTM1NTVDMy4yMTEzMSA2LjkzNTUgMy4xMjU2NCA2LjkxODg5IDMuMDQyOTcgNi44ODY3MkMyLjk2MDI3IDYuODU1MDIgMi44ODAxMyA2LjgwMjEgMi44MDI3MyA2LjcyNzU0TDAgNC4wMjYzN0wxLjAxMTcyIDMuMDUxNzZMMy4zMzM5OCA1LjI4OTA2TDguODIyMjcgMEw5LjgwMDc4IDAuOTQyMzgzWiIgZmlsbD0id2hpdGUiIC8+Cjwvc3ZnPg==');
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== REVIEWS С 3D СЛАЙДЕРОМ ===== */

.reviews-section {
    background: #E7E7E7;
    padding: 0px 20px;
    overflow: hidden;
}
@media (max-width: 568px) {
    .reviews-section {
        padding: 64px 12px;
    }
}

.reviews-inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
@media (max-width: 568px) {
    .reviews-inner {
        gap: 40px;
    }
}

.reviews-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 88px;
    line-height: 98%;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}
@media (max-width: 1024px) {
    .reviews-title {
        font-size: 64px;
    }
    .reviews-title br {
        display: none;
    }
}
@media (max-width: 568px) {
    .reviews-title {
        font-size: 40px;
    }
}

.reviews-layout {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-start;
}
@media (max-width: 1024px) {
    .reviews-layout {
        flex-direction: column;
        gap: 24px;
    }
}

/* ===== ЛЕВАЯ СТОРОНА - 12 ЭЛЕМЕНТОВ ===== */

.reviews-sidebar {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 80px 0;
}
@media (max-width: 568px) {
    .reviews-sidebar {
        padding: 0;
        gap: 40px;
    }
}

.reviews-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;

    height: calc(100vh - 80px * 2 - 64px - 180px);
    overflow-y: auto;
    overflow-x: hidden;

    /* Скрываем скроллбар, но сохраняем скроллинг */
    scrollbar-width: none;
}


.reviews-list::-webkit-scrollbar {
    display: none;
}
/*.reviews-list::-webkit-scrollbar {
    width: 6px;
}*/

/*.reviews-list::-webkit-scrollbar-track {
    background: transparent;
}*/

/*.reviews-list::-webkit-scrollbar-thumb {
    background: rgba(29, 29, 31, 0.2);
    border-radius: 3px;
}*/

.reviews-list::-webkit-scrollbar-thumb:hover {
    background: rgba(29, 29, 31, 0.4);
}


.review-nav-item {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 28px;
    line-height: 115%;
    letter-spacing: -0.01em;
    color: rgba(29, 29, 31, 0.15);
    position: relative;
}
@media (max-width: 1024px) {
    .review-nav-item {
        font-size: 28px;
        line-height: 100%;
    }
}
@media (max-width: 568px) {
    .review-nav-item {
        font-size: 18px;
        line-height: 120%;
    }
}

.review-nav-item:hover {
    color: #1d1d1f;
}

.review-nav-item.active {
    color: #1d1d1f;
    padding-left: 20px;
}

.review-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    display: flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1d1d1f;
    top: 50%;
    transform: translateY(-50%);
}

.review-nav-name {
    display: inline;
}

@media (max-width: 1024px) {
    .reviews-list {
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: 12px;
        padding-bottom: 10px;
    }

    .reviews-list::-webkit-scrollbar {
        display: none;
    }

    .review-nav-item {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ===== ПРАВАЯ СТОРОНА - 3D СЛАЙДЕР ===== */

.reviews-viewport {
    /*perspective: 1000px;*/
    /*height: 550px;*/
    /*position: relative;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}
.reviews-viewport {
    /* Ограничиваем высоту, чтобы слайды не растягивали блок */
    height: 100%;
    max-height: 100vh;
    max-width: 694px;
    overflow: hidden;
    padding: 80px 0; /* Отступ под тени */
    /* perspective не обязателен для стандартного swiper, но можно оставить для 3D */
    perspective: 1000px;
}
@media (max-width: 1024px) {
    .reviews-viewport {
        width: 100%;
        margin: 0 -12px;
        padding: 0 12px;
        width: 100vw;
    }
}
@media (max-width: 568px) {
    .reviews-viewport {
        height: auto;
    }
}

.reviews-track {
    width: 100%;
    height: 100%;
    position: relative;
}

.review-card {
    /*border: 1px solid rgba(17, 17, 19, 0.1);*/
    /*border-radius: 16px;*/
    /*padding: 32px;*/
    /*width: 694px;*/
    /*width: 100%;*/
    /*height: 340px;*/
    /*background: #fafafa;*/
}
.review-card {
    border: 1px solid rgba(17, 17, 19, 0.1);
    border-radius: 16px;
    padding: 32px;
    /* Убрал фиксированную ширину, чтобы Swiper мог управлять размером,
       либо оставь max-width, если нужно ограничить */
    width: 100%;
    height: 340px;
    background: #fafafa;
    box-sizing: border-box;

    /* Анимация состояний */
    transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;

    /* Дефолтное состояние (неактивное) */
    opacity: 0.4;
    filter: blur(4px);
    /*transform: scale(0.9);*/
}
@media (max-width: 1024px) {
    .review-card {

    }
}
@media (max-width: 568px) {
    .review-card {
        padding: 20px;
    }
}
.review-card:not(.active) {
    /*filter: blur(20px);*/
    /*opacity: 0.4;*/
}

.review-card.active {
    /*opacity: 1;*/
    /*filter: blur(0);*/
    /*transform: translateY(0) scale(1);*/
    /*z-index: 10;*/
    /*pointer-events: auto;*/
}

.review-card.swiper-slide-active {
    opacity: 1;
    filter: blur(0);
    /*transform: scale(1);*/
    z-index: 10;
    pointer-events: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}


.review-card.prev {
    opacity: 0.5;
    filter: blur(2px);
    /*transform: translateY(-150px) scale(0.92);*/
    z-index: 5;
}
.review-card.swiper-slide-prev,
.review-card.swiper-slide-next {
    opacity: 0.5;
    filter: blur(2px);
    z-index: 5;
    /* Scale задаем чуть меньше активного, но больше дефолтного */
    /*transform: scale(0.92);*/
}
@media (max-width: 1024px) {
    .review-card.swiper-slide-prev,
    .review-card.swiper-slide-next {
        opacity: 1;
        filter: blur(0px);
        z-index: 5;
        /* Scale задаем чуть меньше активного, но больше дефолтного */
        /*transform: scale(0.92);*/
    }
}
.review-nav-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ===== ТИП 1: ТЕКСТОВЫЙ ОТЗЫВ ===== */

.review-card.text-review {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-text {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(17, 17, 19, 0.8);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.review-text.expanded {
    max-height: 1000px;
}

.review-header {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 568px) {
    .review-header {
        align-items: flex-end;
    }
}

.review-left {
    display: flex;
    gap: 16px;
    align-items: center;
}

.review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.review-info h4 {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #111113;
}

.review-expand-btn {
    border-radius: 4px;
    display: flex;
    width: 50px;
    height: 36px;
    background-color: #111113;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjQ2NDMgMS4yNTA1OUwzLjAyMTkgMS4yNDk5OUwzLjAyMTk5IC0xLjI0MDk5ZS0wNUwxMi45NzMxIDAuMDAwNjk0MzA4QzEzLjMxODMgMC4wMDA3MTg1ODUgMTMuNTk4MSAwLjI4MDU2MSAxMy41OTgxIDAuNjI1NzM5TDEzLjU5NzMgMTAuNTc2OUwxMi4zNDczIDEwLjU3NjhMMTIuMzQ3OSAyLjEzNDY4TDAuODgzNjUgMTMuNTk5TC0wLjAwMDIzMzU1MyAxMi43MTUxTDExLjQ2NDMgMS4yNTA1OVoiIGZpbGw9IndoaXRlIiAvPgo8L3N2Zz4=');
    background-position: center;
    background-repeat: no-repeat;
}

.review-expand-btn:hover {
    background-color: #d4881f;
}

/* ===== ТИП 2: ВИДЕО-ОТЗЫВ ===== */

.review-card.video-review {
    display: flex;
    gap: 32px;
    position: relative;
    /*align-items: center;*/
}
@media (max-width: 568px) {
    .review-card.video-review {
        flex-direction: column;
        gap: 20px;
    }
}

.review-video-container {
    border-radius: 12px;
    width: 363px;
    height: 276px;
    overflow: hidden;
}
@media (max-width: 568px) {
    .review-video-container {
        width: 100%;
    }
}

.review-video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-play-btn {
    position: absolute;
    right: 32px;
    bottom: 32px;
    border-radius: 4px;
    display: flex;
    width: 50px;
    height: 32px;
    background-color: #111113;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTggMTBMNi43NSAxNi4wNjIyTDYuNzUgMy45Mzc4MkwxOCAxMFoiIGZpbGw9IndoaXRlIiAvPgo8L3N2Zz4=');
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 568px) {
    .review-play-btn {
        right: 20px;
        bottom: 20px;
    }
}

.review-play-btn:hover {

}

.video-review-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 235px;
    width: 100%;
}
@media (max-width: 568px) {
    .video-review-info {
        flex-direction: column-reverse;
    }
}

.video-review-info h4 {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.01em;
    color: #111113;
}

.video-review-info p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(17, 17, 19, 0.8);
}

/* ===== PRICING SECTION ===== */

.pricing-section {
    background: #111113;
    padding: 80px 20px;
}

.pricing-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.pricing-title {
    text-align: left;
    font-size: 48px;
    margin-bottom: 60px;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: #1a1a1a;
}

.pricing-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: flex-start;
}
@media (max-width: 568px) {
    .pricing-layout {
        grid-template-columns: 1fr;
    }
}

/* ЛЕВАЯ СТОРОНА: ПРЕИМУЩЕСТВА + ТАБЫ + ЦЕНА */
.pricing-left {
    background-image: url("/course/piano-start/img/pricing.png");
    background-size: cover;
    /*border: 1px solid rgba(255, 255, 255, 0.12);*/
    border-radius: 16px;
    padding: 44px;
    /*height: fit-content;*/
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}
@media (max-width: 1024px) {
    .pricing-left {

    }
}
@media (max-width: 568px) {
    .pricing-left {
        padding: 40px 20px;
    }
}

.pricing-features-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: #fff;
}
.pricing-feature:before {
    content: '';
    display: flex;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FFFFFF;
}

.pricing-tabs {
    display: flex;
    gap: 22px;
}

.pricing-tab {
    border-radius: 4px;
    border: none;
    padding: 6px 8px;
    width: fit-content;
    height: 32px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: .3s ease;
}

.pricing-tab:hover {
    background: #111113;
}

.pricing-tab.active {
    background: #111113;
}

.pricing-content {
    display: none;
}

.pricing-content.active {
    display: block;
}

.pricing-price-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pricing-old-price {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #482d28;
    position: relative;
    width: fit-content;
}
@media (max-width: 1024px) {
    .pricing-old-price {
        font-size: 32px;
    }
}
@media (max-width: 568px) {
    .pricing-old-price {
        font-size: 24px;
    }
}
.pricing-old-price:after {
    content: '';
    display: flex;
    width: calc(100% + 4px);
    height: 2px;
    position: absolute;
    top: 50%;
    left: -2px;
    background: #482d28;
}

.pricing-price {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 88px;
    line-height: 98%;
    letter-spacing: -0.01em;
    color: #fff;
}
@media (max-width: 1024px) {
    .pricing-price {
        font-size: 64px;
    }
}
@media (max-width: 568px) {
    .pricing-price {
        font-size: 40px;
    }
}

.pricing-period {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.55);
    max-width: 350px;
}

/* ПРАВАЯ СТОРОНА: ФОРМА */
.pricing-form-card {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    padding: 74px 118px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
@media (max-width: 1024px) {
    .pricing-form-card {

    }
}
@media (max-width: 568px) {
    .pricing-form-card {
        padding: 40px 20px;
    }
}

.pricing-form-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #111113;
}
@media (max-width: 1024px) {
    .pricing-form-title {
        font-size: 32px;
    }
}
@media (max-width: 568px) {
    .pricing-form-title {
        font-size: 24px;
    }
}

.pricing-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricing-form input {
    border-radius: 4px;
    border: none;
    outline: none;
    padding: 4px 4px 4px 8px;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.55);
    transition: all 0.3s;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(17, 17, 19, 1);
}
@media (max-width: 568px) {
    .pricing-form input {
        height: 44px;
    }
}

.pricing-form input::placeholder {
    color: rgba(17, 17, 19, 0.35);
}

.pricing-form input:focus {
    outline: none;
    border-color: #ff9933;
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.1);
}

.pricing-form-contacts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 12px 0px;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #111113;
}
@media (max-width: 568px) {
    .pricing-form-contacts {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}
.pricing-form-contacts > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.pricing-form-contacts label {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
    text-transform: uppercase;
    color: #111113;
}
.pricing-form-contacts label input {
    display: none;
}
.pricing-form-contacts label .check {
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    background: #fff;
    transition: .3s ease;
}
.pricing-form-contacts label:has(input:checked) .check {
    background-color: #111113;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTkuODAwNzggMC45NDIzODNMMy43OTc4NSA2LjcyNzU0QzMuNzIwNSA2LjgwMjA4IDMuNjQwMjYgNi44NTUgMy41NTc2MiA2Ljg4NjcyQzMuNDc0ODMgNi45MTg5MyAzLjM4ODQyIDYuOTM1NTUgMy4yOTk4IDYuOTM1NTVDMy4yMTEzMSA2LjkzNTUgMy4xMjU2NCA2LjkxODg5IDMuMDQyOTcgNi44ODY3MkMyLjk2MDI3IDYuODU1MDIgMi44ODAxMyA2LjgwMjEgMi44MDI3MyA2LjcyNzU0TDAgNC4wMjYzN0wxLjAxMTcyIDMuMDUxNzZMMy4zMzM5OCA1LjI4OTA2TDguODIyMjcgMEw5LjgwMDc4IDAuOTQyMzgzWiIgZmlsbD0id2hpdGUiIC8+Cjwvc3ZnPg==');
    background-position: center;
    background-repeat: no-repeat;
}

.pricing-form-button {
    border-radius: 4px;
    padding: 12px 16px;
    width: 100%;
    height: 48px;
    border: none;
    background: #ff9933;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: #111113;
    cursor: pointer;
    transition: all 0.3s;
}

.pricing-form-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.pricing-form-checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 12px;
    line-height: 140%;
    color: #4c4c4c;
}
.pricing-form-checkboxes label a {
    color: #4c4c4c;
    text-decoration: underline;
}
.pricing-form-checkboxes label input {
    display: none;
}
.pricing-form-checkboxes label .check {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    transition: .3s ease;
}
.pricing-form-checkboxes label:has(input:checked) .check {
    border: 1px solid #111113;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTkuODAwNzggMC45NDIzODNMMy43OTc4NSA2LjcyNzU0QzMuNzIwNSA2LjgwMjA4IDMuNjQwMjYgNi44NTUgMy41NTc2MiA2Ljg4NjcyQzMuNDc0ODMgNi45MTg5MyAzLjM4ODQyIDYuOTM1NTUgMy4yOTk4IDYuOTM1NTVDMy4yMTEzMSA2LjkzNTUgMy4xMjU2NCA2LjkxODg5IDMuMDQyOTcgNi44ODY3MkMyLjk2MDI3IDYuODU1MDIgMi44ODAxMyA2LjgwMjEgMi44MDI3MyA2LjcyNzU0TDAgNC4wMjYzN0wxLjAxMTcyIDMuMDUxNzZMMy4zMzM5OCA1LjI4OTA2TDguODIyMjcgMEw5LjgwMDc4IDAuOTQyMzgzWiIgZmlsbD0id2hpdGUiIC8+Cjwvc3ZnPg==');

    background-color: #111113;
}

.faq-section {
    background: #111113;
    padding: 100px 40px;
    padding-top: 0;
}
@media (max-width: 1024px) {
    .faq-section {
        padding: 80px 20px;
        padding-top: 0;
    }
}
@media (max-width: 568px) {
    .faq-section {
        padding: 64px 12px;
        padding-top: 0;
        margin-top: -1px;
    }
}

.faq-inner {
    max-width: 1164px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
}
@media (max-width: 568px) {
    .faq-inner {
        gap: 40px;
    }
}

.faq-title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 88px;
    line-height: 98%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
}
@media (max-width: 1024px) {
    .faq-title {
        font-size: 64px;
    }
}
@media (max-width: 568px) {
    .faq-title {
        font-size: 40px;
    }
}

.faq-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
    background: rgba(250, 250, 250, 0.05);
    transition: all 0.3s ease;
}
@media (max-width: 1024px) {
    .faq-item {

    }
}
@media (max-width: 568px) {
    .faq-item {

    }
}

.faq-item:hover {

}

.faq-item.open .faq-header {
    /* стили для открытого заголовка */
}

.faq-item.open .faq-content {
    max-height: 1000px;
    /* раскрытие контента */
    padding-top: 24px;
}

.faq-sub-item.open .faq-sub-header {
    /* стили для открытого подзаголовка */
}

.faq-sub-item.open .faq-sub-content {
    max-height: 500px;
    /* раскрытие подконтента */
}


.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    /*padding: 24px 28px;*/
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

.faq-header:hover {

}

.faq-question {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #fff;
}
@media (max-width: 1024px) {
    .faq-question {

    }
}
@media (max-width: 568px) {
    .faq-question {
        font-size: 18px;
        line-height: 120%;
    }
}

.faq-toggle {
    border-radius: 32px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    transition: 0.3s ease;
}
@media (max-width: 568px) {
    .faq-toggle {
        width: 30px;
        min-width: 30px;
        height: 30px;
        /*padding: 6px;*/
    }
    .faq-toggle svg {
        width: 19px;
        height: 19px;
    }
}

.faq-item.open .faq-toggle {
    transform: rotate(180deg);
    background: #ff8522;
}
.faq-item .faq-toggle path {
    transition: 0.3s ease;
}
.faq-item.open .faq-toggle path {
    stroke: #111113;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-content {
    max-height: 2000px;
}

.faq-body {
    /*padding: 0 28px 24px;*/
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.7;
}

.faq-sub-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.faq-sub-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 20px 0px;
    transition: all 0.3s ease;
}
.faq-sub-item:last-child {
    border: none;
}

.faq-sub-item:hover {

}

.faq-sub-item.open {

}

.faq-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    /*padding: 16px 20px;*/
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.faq-sub-question {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 568px) {
    .faq-sub-question {
        font-size: 18px;
        line-height: 120%;
    }
}
.faq-sub-item.open .faq-sub-question {
    color: #fff;
}

.faq-sub-toggle {
    border-radius: 32px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
@media (max-width: 568px) {
    .faq-sub-toggle {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }
    .faq-sub-toggle svg {
        width: 20px;
        height: 20px;
    }
}

.faq-sub-item.open .faq-sub-toggle path:last-child {
    /*transform: rotate(45deg);*/
    opacity: 0;
}

.faq-sub-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-sub-item.open .faq-sub-content {
    max-height: 500px;
    padding-top: 24px;
}
.faq-sub-item.open .faq-sub-content > div {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.faq-sub-item.open .faq-sub-content strong {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #fff;
}
.faq-sub-item.open .faq-sub-content p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.55);
}

.faq-sub-body {
    padding: 0 20px 16px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.6;
}

footer {
    background: #111113;

}

.footer-inner {
    padding: 40px 20px;
    border-radius: 16px 16px 0 0;
    background: #f2f2f2;
    display: flex;
    justify-content: space-between;
    gap: 64px;
}
@media (max-width: 1024px) {
    .footer-inner {
        flex-direction: column;
    }
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 58px;
}
@media (max-width: 568px) {
    .footer-left {
        gap: 20px;
    }
    .footer-left .title {
        margin-bottom: -4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(17, 17, 19, 0.15);
        padding: 0px 0px 8px;
    }
    .footer-left .title span {
        font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        color: rgba(17, 17, 19, 0.35);
    }
    .footer-left .title svg {
        rotate: 180deg;
    }
}

.footer-logo {

}

.footer-logo img {
    max-width: 100%;
    height: auto;
}

.footer-columns {
    display: flex;
    gap: 12px;
}
@media (max-width: 568px) {
    .footer-columns {
        flex-wrap: wrap;
        row-gap: 20px;
    }
}

.footer-column {
    min-width: 224px;
}
@media (max-width: 568px) {
    .footer-column {
        min-width: calc(50% - 6px);
    }
}

.footer-column ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-column ul li a {
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: #111113;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #1a1a1a;
}

.footer-contacts {
    border-radius: 12px;
    padding: 16px;
    width: 100vw;
    max-width: 423px;
    background: #e7e7e7;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 568px) {
    .footer-contacts {
        width: 100%;
    }
}

.footer-contacts-header {
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(17, 17, 19, 0.35);
}

.footer-phone {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #111113;
}
@media (max-width: 1024px) {
    .footer-phone {
        font-size: 32px;
    }
}
@media (max-width: 568px) {
    .footer-phone {
        font-size: 24px;
    }
}

.footer-messengers {
    display: flex;
    gap: 12px;
}

.messenger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(17, 17, 19, 0.15);
    border-radius: 4px;
    padding: 12px 16px;
    width: calc(100%/2 - 12px/2);
    height: 48px;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: #111113;
}

.messenger:hover {
    border-color: #1a1a1a;
    background-color: rgba(0, 0, 0, 0.02);
}

.messenger.whatsapp::before {
    content: '💬';
    font-size: 16px;
}

.messenger.telegram::before {
    content: '📱';
    font-size: 16px;
}

/**/

.teacher-modal {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
}
.teacher-modal.show {
    display: block;
}
html:has(.teacher-modal.show) {
    overflow: hidden;
}
html:has(.teacher-modal.show) header {
    opacity: 0;
    pointer-events: none;
}
.teacher-modal-content {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    width: 486px;
    height: calc(100% - 20px - 20px);
    padding: 20px;
    padding-top: 54px;
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    overflow-y: auto;
}
.teacher-modal-content::-webkit-scrollbar {
    display: none;
}
@media (max-width: 568px) {
    .teacher-modal-content {
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        top: unset;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.85);
        padding: 20px 12px;
        padding-top: 64px;
    }
}
.teacher-modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
@media (max-width: 568px) {
    .teacher-modal-close {
        right: 12px;
    }
}
.teacher-modal-top {
    display: flex;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.teacher-modal-avatar {
    border-radius: 12px;
    width: 160px;
    min-width: 160px;
    height: 160px;
    overflow: hidden;
}
@media (max-width: 568px) {
    .teacher-modal-avatar {
        width: 120px;
        min-width: 120px;
        height: 120px;
    }
}
.teacher-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.teacher-modal-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
@media (max-width: 568px) {
    .teacher-modal-info {
        justify-content: center;
    }
}
.teacher-modal-info p.title {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #111113;
}
@media (max-width: 568px) {
    .teacher-modal-info p.title {
        font-size: 24px;
    }
}
.teacher-modal-info p:not(.title) {
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: rgba(17, 17, 19, 0.5);
}
.teacher-modal-txt {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.teacher-modal-txt strong {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #111113;
}
.teacher-modal-txt p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: rgba(17, 17, 19, 0.5);
}
.teacher-modal-soc {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.teacher-modal-soc > p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #111113;
}
.teacher-modal-soc a {
    background: #f2f2f2;
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    color: #111113;
}
.teacher-modal-soc a p:nth-child(2) {
    background: #111113;
}
.teacher-modal-soc a:before {
    background: #f2f2f2;
}
.teacher-modal-soc a p {
    display: flex;
    align-items: center;
    gap: 10px;
}
.teacher-modal-soc a p span {
    display: flex;
    align-items: center;
    gap: 10px;
}
.teacher-modal-video {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.teacher-modal-video p {
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 110%;
    color: #111113;
}
.teacher-modal-video .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.teacher-modal-video .grid .item {
    border-radius: 12px;
    width: 100%;
    height: 122px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.teacher-modal-video .grid .item:after {
    content: '';
    position: absolute;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTUgOEw0LjUgMTQuMDYyMkw0LjUgMS45Mzc4MkwxNSA4WiIgZmlsbD0id2hpdGUiIC8+Cjwvc3ZnPg==');
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 8px;
    width: 56px;
    height: 32px;
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.35);
}
.teacher-modal-video .grid .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/**/

.cta {
    position: fixed;
    z-index: 9;
    right: 20px;
    bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 12px;
    width: 194px;
    height: 64px;
    backdrop-filter: blur(6px);
    background: #111113;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: .3s ease;
}
.cta span {
    font-family: "TT Intrphss Pr Mn Trl Vr", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    text-transform: uppercase;
    color: #fff;
}
.cta-modal {
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
}
.cta-modal.show {
    display: block;
}
html:has(.cta-modal.show) {
    overflow: hidden;
}
.cta-form {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
.cta-close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

input.error {
    border: 1px solid #ff0000;
}
label.error .check{
    border: 1px solid #ff0000;
}
.form-success-block{
    display:none;
}
.form-success-block.show{
    display:block;
}
.course_signup-success{
    padding:20px;
    font-family: "TT Firs Neue", sans-serif;
    font-size:14px;
    color:rgba(0,0,0,0.5)
}
.course_signup-price-success{
    font-family: "TT Firs Neue", sans-serif;
    font-size:14px;
    color:rgba(0,0,0,0.5)
}
.course_signup-consult-success{
    font-family: "TT Firs Neue", sans-serif;
    font-size:14px;
    color:white
}
.course_signup-consult-success h3{
    font-family: "TT Firs Neue", sans-serif;
    font-weight: 450;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom:32px;
}