/**
 * Блок «Работы нашей школы» — главная (редизайн)
 * Два бесконечных ряда: верхний влево, нижний вправо
 */
:root {
    --works-container: 1500px;
    --works-gap-section-top: 80px;
    --works-gap-section-bottom: 160px;
    --works-gap-block: 64px;
    --works-gap-row: 24px;
    --works-slide-width: 490px;
    --works-slide-height: 320px;
    --works-color-text: #111827;
    --works-color-muted: #5a616c;
    --works-font: 'Vela Sans', 'Onest', system-ui, -apple-system, sans-serif;
    --works-marquee-duration: 55s;
    --works-cta-input-radius: 10px;
    --works-cta-input-bg: rgba(255, 255, 255, 0.12);
    --works-cta-input-bg-hover: rgba(255, 255, 255, 0.2);
    --works-cta-input-border-focus: #b04481;
    --works-cta-input-border-error: #e83838;
    --works-cta-input-bg-error: rgba(255, 169, 186, 0.15);
}

.works-main {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: var(--works-gap-section-top) 0 var(--works-gap-section-bottom);
    background: #ffffff;
    font-family: var(--works-font);
    color: var(--works-color-text);
    overflow: visible;
}

.works-main__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--works-gap-block);
    overflow: visible;
}

.works-main__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 830px;
    padding: 0 16px;
    text-align: center;
}

.works-main__title {
    margin: 0;
    font-size: 52px;
    font-weight: 600;
    line-height: 64px;
    color: var(--works-color-text);
}

body.in_index .works-main__title {
    margin-bottom: 0;
}

.works-main__subtitle {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 34px;
    color: var(--works-color-muted);
}

.works-main__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--works-gap-row);
    width: 100%;
}

.works-main__row {
    width: 100%;
    overflow: hidden;
}

.works-main__track {
    overflow: hidden;
    width: 100%;
    user-select: none;
}

.works-main__track-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--works-gap-row);
    width: max-content;
    will-change: transform;
}

.works-main__track--left .works-main__track-inner {
    animation: works-main-marquee-left var(--works-marquee-duration) linear infinite;
}

.works-main__track--right .works-main__track-inner {
    animation: works-main-marquee-right var(--works-marquee-duration) linear infinite;
}

.works-main__track:hover .works-main__track-inner {
    animation-play-state: paused;
}

@keyframes works-main-marquee-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes works-main-marquee-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.works-main__slide {
    flex: none;
    width: var(--works-slide-width);
    height: var(--works-slide-height);
    margin: 0;
    border-radius: var(--works-slide-radius, 24px);
    overflow: hidden;
    background: #e8eaed;
}

.works-main__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drag-block.container[data-class='WORKS_MAIN_drag'] {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}

.drag-block.container[data-class='WORKS_MAIN_drag'] > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1199px) {
    :root {
        --works-slide-width: 380px;
        --works-slide-height: 248px;
        --works-marquee-duration: 45s;
    }

    .works-main__title {
        font-size: 40px;
        line-height: 48px;
    }

    .works-main__subtitle {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 767px) {
    :root {
        --works-gap-block: 40px;
        --works-slide-width: 280px;
        --works-slide-height: 184px;
        --works-marquee-duration: 38s;
    }

    .works-main__title {
        font-size: 28px;
        line-height: 34px;
    }

    .works-main__subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    .works-main__head {
        padding: 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-main__track--left .works-main__track-inner,
    .works-main__track--right .works-main__track-inner {
        animation: none;
    }
}

/* ——— Форма консультации под слайдером ——— */
.works-main__cta-wrap {
    width: 100%;
    max-width: var(--works-container);
    margin: var(--works-gap-block) auto 0;
    box-sizing: border-box;
    overflow: visible;
}

@media (min-width: 1533px) {
    .works-main__cta-wrap {
        padding-left: 0;
        padding-right: 0;
    }
}

.works-main__cta {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 120px;
    min-height: 412px;
    padding: 48px 64px;
    border-radius: 32px;
    background: radial-gradient(93.93% 480.54% at 1.6% 7.77%, #111827 0%, #383f4e 34.01%, #111827 100%);
    overflow: visible;
}

.works-main__cta-decor {
    position: absolute;
    left: 64px;
    top: -62px;
    width: 486px;
    height: 234px;
    pointer-events: none;
    z-index: 3;
}

.works-main__cta-decor-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
    mix-blend-mode: lighten;
}

.works-main__cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 644px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
    min-height: 316px;
    padding-top: 120px;
}

.works-main__cta-title {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 644px;
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
    color: #ffffff;
}

body.in_index .works-main__cta-title {
    margin-bottom: 0;
}

.works-main__cta-text {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 514px;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #ffffff;
}

.works-main__cta-panel {
    position: relative;
    z-index: 1;
    flex: 0 1 608px;
    min-width: 0;
}

.works-main__cta-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.works-main__cta-form form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    margin: 0;
}

.works-main__cta-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.works-main__cta-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.works-main__cta-input,
.works-main__cta-field input[type='text'],
.works-main__cta-field input[type='tel'] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 14px 20px 14px 16px;
    border: 2px solid transparent;
    border-radius: var(--works-cta-input-radius);
    background: var(--works-cta-input-bg);
    font-family: var(--works-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.works-main__cta-input:hover:not(:focus):not(:disabled):not(.error),
.works-main__cta-field input[type='text']:hover:not(:focus):not(:disabled):not(.error),
.works-main__cta-field input[type='tel']:hover:not(:focus):not(:disabled):not(.error),
.works-main__cta-input.is-filled:hover:not(:focus):not(:disabled):not(.error),
.works-main__cta-field input.is-filled:hover:not(:focus):not(:disabled):not(.error) {
    border-color: transparent;
    background: var(--works-cta-input-bg-hover);
}

.works-main__cta-input:focus,
.works-main__cta-field input[type='text']:focus,
.works-main__cta-field input[type='tel']:focus {
    border-color: var(--works-cta-input-border-focus);
    background: var(--works-cta-input-bg);
}

.works-main__cta-input.error,
.works-main__cta-field.error .works-main__cta-input,
.works-main__cta-field.error input[type='text'],
.works-main__cta-field.error input[type='tel'] {
    border-color: var(--works-cta-input-border-error);
    background: var(--works-cta-input-bg-error);
}

.works-main__cta-input.error:focus,
.works-main__cta-field.error .works-main__cta-input:focus,
.works-main__cta-field.error input[type='text']:focus,
.works-main__cta-field.error input[type='tel']:focus {
    border-color: var(--works-cta-input-border-error);
    background: var(--works-cta-input-bg-error);
}

.works-main__cta-field label.error {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
    color: #ffb4b4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.works-main__cta-input::placeholder,
.works-main__cta-field input::placeholder {
    color: #ffffff;
    opacity: 0.5;
}

.works-main__cta-actions {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Altcha на тёмном CTA: белая плашка как кнопка «Отправить» */
.works-main__cta .altcha-row {
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.works-main__cta .altcha-row altcha-widget {
    display: block;
    width: 100%;
    max-width: 100%;
    --altcha-border-width: 0;
    --altcha-border-radius: 12px;
    --altcha-color-base: #ffffff;
    --altcha-color-border: #ffffff;
    --altcha-color-text: #111827;
    --altcha-color-border-focus: #111827;
    --altcha-color-error-text: #b42318;
    --altcha-color-footer-bg: #f3f4f6;
    --altcha-color-active: #111827;
}

.works-main__cta .altcha-row .altcha,
.works-main__cta .altcha-row .altcha-main {
    color: #111827;
    border: 0;
    background: #ffffff;
    border-radius: 12px;
}

.works-main__cta .altcha-row .altcha-label,
.works-main__cta .altcha-row .altcha a {
    color: #111827 !important;
}

.works-main__cta .altcha-row .altcha-logo,
.works-main__cta .altcha-row .altcha-logo svg,
.works-main__cta .altcha-row .altcha-logo path {
    color: #111827 !important;
    fill: #111827;
}

.works-main__cta .altcha-row .altcha-checkbox input {
    accent-color: #111827;
}

.works-main__cta-submit,
button.works-main__cta-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 308px;
    height: 52px;
    padding: 14px 24px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    font-family: var(--works-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #111827;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.works-main__cta-submit:hover,
button.works-main__cta-submit:hover {
    opacity: 0.92;
}

.works-main__cta-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.works-main__cta-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.works-main__cta-consent-checkbox {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin: 1px 0 0;
}

.works-main__cta-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.works-main__cta-checkbox-box {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    pointer-events: none;
}

.works-main__cta-checkbox-box svg {
    display: block;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.works-main__cta-consent-checkbox.is-checked .works-main__cta-checkbox-box svg,
.works-main__cta-checkbox:checked + .works-main__cta-checkbox-box svg {
    opacity: 1;
}

.works-main__cta-consent-checkbox.error .works-main__cta-checkbox-box {
    outline: 2px solid #e83838;
    outline-offset: 1px;
}

.works-main__cta-consent label.error {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 0;
    padding-left: 36px;
    font-size: 12px;
    line-height: 16px;
    color: #ffb4b4;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.works-main__cta-consent-error {
    width: 100%;
    min-width: 0;
}

.works-main__cta-consent-error:empty {
    display: none;
}

.works-main__cta-consent-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #ffffff;
}

.works-main__cta-consent-text a {
    color: #D959A1;
    text-underline-offset: 2px;
}

.works-main__cta-consent-text a:hover {
    color: #A53976;
}

.works-main__cta-error {
    font-size: 14px;
    line-height: 20px;
    color: #ffb4b4;
}

.works-main__cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(17, 24, 39, 0.45);
}

.works-main__cta-loader {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: works-main-cta-spin 0.8s linear infinite;
}

@keyframes works-main-cta-spin {
    to {
        transform: rotate(360deg);
    }
}

.works-main__cta-wrap:has(.works-main__cta--success) {
    padding-top: 0;
}

/* Успешная отправка — по макету Figma (1500×264) */
.works-main__cta--success {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    height: 264px;
    min-height: 264px;
    max-height: 264px;
    padding: 64px;
    background: #111827;
    border-radius: 32px;
    isolation: isolate;
    overflow: hidden;
}

.works-main__cta--success .works-main__cta-decor {
    display: none;
}

.works-main__cta--success .works-main__cta-content {
    display: none;
}

.works-main__cta--success .works-main__cta-panel {
    position: static;
    z-index: 0;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.works-main__cta-form--success {
    position: static;
    width: 100%;
    height: 100%;
}

.works-main__cta-success {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.works-main__cta-success-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 24px;
    width: 598px;
    max-width: calc(100% - 420px);
}

.works-main__cta-success-title {
    margin: 0;
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
    color: #ffffff;
}

.works-main__cta-success-desc {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #ffffff;
}

.works-main__cta-success-visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.works-main__cta-success-glow {
    position: absolute;
    left: 72.533%;
    top: -44px;
    z-index: 2;
    width: 178px;
    height: 219px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.1;
    filter: blur(44.5665px);
    transform: rotate(15deg);
}

.works-main__cta-success-check {
    position: absolute;
    left: 61.617%;
    top: -1.27px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    height: 340px;
    box-sizing: border-box;
    border-radius: 1000px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10.6133px);
    -webkit-backdrop-filter: blur(10.6133px);
    transform: rotate(-11.63deg);
}

.works-main__cta-success-check-icon {
    display: block;
    width: 172px;
    height: auto;
    flex: none;
}

.works-main__cta-success-bubble-icon {
    display: block;
    flex: none;
}

.works-main__cta-success-check-icon.works-main__cta-success-icon--mobile,
.works-main__cta-success-bubble-icon.works-main__cta-success-icon--mobile {
    display: none;
}

.works-main__cta-success-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.works-main__cta-success-bubble--phone {
    left: 58.733%;
    top: 70px;
    z-index: 3;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: linear-gradient(167.23deg, rgba(255, 255, 255, 0.10) 4.15%, rgba(255, 255, 255, 0.10) 90.76%);
    transform: rotate(-12.23deg);
}

.works-main__cta-success-bubble--phone .works-main__cta-success-bubble-icon {
    width: 40px;
    height: 40px;
}

.works-main__cta-success-bubble--msg {
    left: 83.513%;
    top: 125.69px;
    z-index: 4;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    background: linear-gradient(159.86deg, rgba(255, 255, 255, 0.10) -6.8%, rgba(255, 255, 255, 0.10) 86.59%);
    transform: rotate(13.65deg);
}

.works-main__cta-success-bubble--msg .works-main__cta-success-bubble-icon {
    width: 32px;
    height: 32px;
}

@media (max-width: 1199px) {
    .works-main__cta {
        flex-direction: column;
        gap: 32px;
        padding: 40px 32px;
    }

    .works-main__cta-decor {
        left: 50%;
        top: -48px;
        width: min(360px, calc(100% - 32px));
        height: auto;
        transform: translateX(-50%);
    }

    .works-main__cta-decor-img {
        height: auto;
    }

    .works-main__cta-content {
        flex: none;
        width: 100%;
        min-height: 0;
        padding-top: 150px;
    }

    .works-main__cta-title {
        font-size: 36px;
        line-height: 44px;
    }

    .works-main__cta-panel {
        flex: none;
        width: 100%;
    }

    .works-main__cta--success {
        height: auto;
        min-height: 264px;
        max-height: none;
        padding: 40px 32px;
        overflow: hidden;
    }

    .works-main__cta-success {
        flex-direction: column;
        align-items: flex-start;
    }

    .works-main__cta-success-content {
        width: 100%;
        max-width: none;
    }

    .works-main__cta-success-visual {
        position: relative;
        inset: auto;
        width: 100%;
        height: 280px;
        margin-top: 24px;
    }

    .works-main__cta-success-glow {
        left: 58%;
        top: 0;
    }

    .works-main__cta-success-bubble--phone {
        left: 18%;
        top: 58%;
    }

    .works-main__cta-success-bubble--msg {
        left: auto;
        right: 8%;
        top: 68%;
    }

    .works-main__cta-success-check {
        left: 50%;
        top: 50%;
        width: 280px;
        height: 280px;
        transform: translate(-50%, -50%) rotate(-11.63deg);
    }

    .works-main__cta-success-check-icon {
        width: 140px;
    }
}

@media (max-width: 767px) {
    .works-main__cta-wrap {
        padding: 0 20px;
    }

    .works-main__cta {
        padding: 32px 20px;
        border-radius: 24px;
    }

    .works-main__cta--success {
        height: auto;
        min-height: 264px;
        max-height: none;
        padding: 32px 20px;
    }

    .works-main__cta-title,
    .works-main__cta-success-title {
        font-size: 28px;
        line-height: 34px;
    }

    .works-main__cta-text,
    .works-main__cta-success-desc {
        font-size: 16px;
        line-height: 24px;
    }

    .works-main__cta-submit,
    button.works-main__cta-submit {
        width: 100%;
        min-width: 0;
    }
}