* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

:root {
    --purple: rgba(100, 51, 221, 1);
    --dark-purple: #34108D;
    --dark-grey: rgba(255, 255, 255, 0.4);
    --light-grey: rgba(255, 255, 255, 0.6);
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-Italic.woff2') format('woff2');
}

body {
    background-color: rgba(0, 0, 0, 1);
}

html,
body {
    scroll-behavior: smooth;
}

a,
a:visited {
    text-decoration: none;
    color: inherit;
}

a,
input,
button {
    transition: 0.3s;
}

a:hover {
    color: rgba(100, 51, 221, 1) !important;
}

.wrapper {
    position: relative;
    max-width: 1304px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
}

@media(max-width: 1240px) {
    .wrapper {
        padding: 0 32px;
    }
}

@media(max-width: 1000px) {
    .wrapper {
        padding: 0 24px;
    }
}

@media(max-width: 768px) {
    .wrapper {
        padding: 0 16px;
    }
}

section {
    position: relative;
    max-width: 1920px;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

main section {
    padding: 80px 0;
}

@media (max-width: 1240px) {
    main section {
        padding: 66px 0;
    }
}

@media(max-width: 1000px) {
    main section {
        padding: 53px 0;
    }
}

@media (max-width: 768px) {
    main section {
        padding: 40px 0;
    }
}

.mobile {
    display: none !important;
}

.tablet {
    display: none !important;
}

.desktop {
    display: flex !important;
}

@media(max-width: 1000px) {
    .desktop {
        display: none !important;
    }

    .tablet {
        display: flex !important;
    }

}

@media(max-width: 768px) {
    .tablet {
        display: none !important;
    }

    .mobile {
        display: flex !important;
    }
}

img {
    object-fit: contain;
}

.flex-box-row {
    display: flex;
    flex-direction: row;
}

.flex-box-column {
    display: flex;
    flex-direction: column;
}

.flex-box-column-reverse {
    display: flex;
    flex-direction: column-reverse;
}

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

.no-scroll {
    overflow: hidden;
}

.white-text {
    color: #fff !important;
}

.dark-grey-text {
    color: rgba(255, 255, 255, 0.4) !important;
}

.light-grey-text {
    color: rgba(255, 255, 255, 0.6) !important;
}

.purple-text {
    color: var(--purple);
}

/* Типографика */

.page-title {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.section-title {
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -.02em;
    font-weight: 800;
}

.section-subtitle {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -.01em;
    font-weight: 700;
}

.card-name-text {
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.main-text {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.main-text-bigger {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
}

.main-text-smaller {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}

@media(max-width: 1240px) {
    .page-title {
        font-size: 58px;
        line-height: 65px;
    }

    .section-title {
        font-size: 48px;
        line-height: 54px;
    }

    .section-subtitle {
        font-size: 34px;
        line-height: 38px;
    }

    .card-name-text {
        font-size: 28px;
        line-height: 33px;
    }

    .main-text {
        font-size: 17px;
        line-height: 22px;
    }

    .main-text-bigger {
        line-height: 26px;
    }

}

@media(max-width: 1000px) {
    .page-title {
        font-size: 45px;
        line-height: 50px;
    }

    .section-title {
        font-size: 40px;
        line-height: 45px;
    }

    .section-subtitle {
        font-size: 29px;
        line-height: 33px;
    }

    .card-name-text {
        font-size: 25px;
        line-height: 31px;
    }

    .main-text-bigger {
        font-size: 19px;
        line-height: 25px;
    }
}

@media(max-width: 768px) {
    .page-title {
        font-size: 32px;
        line-height: 36px;
    }

    .section-title {
        font-size: 32px;
        line-height: 36px;
    }

    .section-subtitle {
        font-size: 24px;
        line-height: 28px;
    }

    .card-name-text {
        font-size: 22px;
        line-height: 28px;
    }

    .main-text {
        font-size: 16px;
        line-height: 20px;
    }

    .main-text-bigger {
        font-size: 18px;
        line-height: 24px;
    }
}


/* Кнопки */

.purple-btn {
    padding: 18px 32px;
    background-color: rgba(100, 51, 221, 1);
    border-radius: 1000px;
    transition: all 0.3s;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1) !important;
    white-space: nowrap;
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.grey-btn {
    padding: 18px 32px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 1000px;
    transition: all 0.3s;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1) !important;
    white-space: nowrap;
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.white-btn {
    padding: 18px 32px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 1000px;
    transition: all 0.3s;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: rgba(0, 0, 0, 1) !important;
    white-space: nowrap;
    align-items: center;
    display: flex;
    justify-content: center;
}

.small-white-btn {
    padding: 16px 32px !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

.purple-btn:hover {
    background-color: var(--dark-purple);
    color: #fff !important;
}

.grey-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #000 !important;
}

.white-btn:hover {
    background-color: var(--purple);
    color: #fff !important;
}

.transparent-btn {
    border-radius: 1000px;
    position: relative;
    z-index: 1;
    padding: 18px 32px;
    transition: all 0.3s;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent;
    white-space: nowrap;
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.small-transparent-btn {
    padding: 16px 32px !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

.transparent-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

.transparent-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135.93deg, rgba(255, 255, 255, 0.2) -8.91%, rgba(255, 255, 255, 0) 92.4%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

.transparent-btn span {
    position: relative;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
    text-stroke: 2px rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.transparent-btn:hover {
    background-color: #fff;
    color: #000 !important;
}

.transparent-btn:hover::before,
.transparent-btn:hover::after {
    background-color: #fff;
}

.underlined-btn {
    font-size: 16px;
    line-height: 24px;
    text-decoration: underline;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration-thickness: 6.82% !important;
    text-underline-offset: 19.3%;
    text-decoration-skip-ink: auto;
}

.btns-row {
    gap: 16px;
}

@media(max-width: 1240px) {

    .purple-btn,
    .transparent-btn,
    .white-btn,
    .grey-btn {
        padding: 16px 29px;
        font-size: 20px;
        line-height: 26px;
    }

    .small-white-btn,
    .small-transparent-btn {
        padding: 15px 29px !important;
        font-size: 18px !important;
        line-height: 24px !important;
    }
}

@media(max-width: 1000px) {

    .purple-btn,
    .transparent-btn,
    .white-btn,
    .grey-btn {
        padding: 14px 26px;
        font-size: 19px;
        line-height: 25px;
    }

    .small-white-btn,
    .small-transparent-btn {
        padding: 14px 26px !important;
        font-size: 18px !important;
        line-height: 24px !important;
    }
}

@media(max-width: 768px) {

    .purple-btn,
    .transparent-btn,
    .white-btn,
    .grey-btn {
        padding: 12px 24px;
        font-size: 18px;
        line-height: 24px;
    }

    .small-white-btn,
    .small-transparent-btn {
        padding: 12px 24px !important;
    }

    .btns-row {
        gap: 8px;
    }
}



.grey-bouble {
    padding: 32px;
    border-radius: 32px;
    position: relative;
    z-index: 1;
    background-color: rgba(219, 214, 252, 0.15);
    backdrop-filter: blur(64px);
}

.grey-bouble-without {
    padding: 16px;
    z-index: 1;
    position: relative;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.2);
}

.grey-bouble::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(136.63deg, rgba(255, 255, 255, 0.2) -8.8%, rgba(255, 255, 255, 0) 91.26%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.grey-bouble::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(136.21deg, rgba(0, 0, 0, 0.021) 14.11%, rgba(255, 255, 255, 0) 76.41%);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}


@media(max-width: 1240px) {
    .grey-bouble {
        padding: 25px;
        border-radius: 25px;
    }

}

@media(max-width: 768px) {
    .grey-bouble {
        padding: 16px;
        border-radius: 16px;
    }

}


/* Тестирование */

.test-block {
    width: 100%;
    padding: 32px;
    border-radius: 32px;
    position: relative;
    z-index: 1;
    background-color: transparent;
    align-items: center;
    text-align: center;
}


.test-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

.test-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135.93deg, rgba(255, 255, 255, 0.2) -8.91%, rgba(255, 255, 255, 0) 92.4%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

.test-block .main-text-bigger {
    margin-bottom: 8px;
}

.test-block .section-subtitle {
    max-width: 855px;
    margin-bottom: 32px;
}

@media(max-width: 1240px) {
    .test-block {
        padding: 25px;
        border-radius: 25px;
    }

}

@media(max-width: 768px) {
    .test-block {
        padding: 16px;
        border-radius: 16px;
    }

    .test-block .section-subtitle {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 24px;
        max-width: 650px;
    }

    .test-block .main-text-bigger {
        font-size: 16px;
        line-height: 20px;
    }

    .test-block .btns-row {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .test-block .purple-btn,
    .test-block .transparent-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}



/* Блок новостей */

.news-block .wrapper {
    gap: 40px;
    position: relative;
}

.news-top {
    gap: 10px;
}

.news-item {
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.news-item:first-child {
    padding-top: 0;
}

.news-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.news-content {
    gap: 130px;
}

.news-date {
    align-items: center;
    gap: 8px;
    min-width: 80px;
}

.news-name-link {
    gap: 24px;
}

.news-name-link .card-name-text {
    max-width: 560px;
}

.arrow-link {
    gap: 8px;
    align-items: center;
    width: fit-content;
}

.arrow-link svg,
.arrow-link span,
.arrow-link path {
    transition: all 0.3s;
}

.arrow-link:hover span {
    color: rgba(255, 255, 255, 1) !important;
}

.arrow-link:hover svg {
    transform: translateX(4px);
}

.arrow-link.back:hover svg {
    transform: translateX(-4px);
}

.arrow-link.bottom:hover svg {
    transform: translateY(4px);
}

.arrow-link:hover path {
    opacity: 1;
}

.news-image {
    border-radius: 32px;
    overflow: hidden;
    width: 32%;
    height: auto;
    aspect-ratio: 392/220;
    position: relative;
    z-index: 1;
}

.news-image img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.news-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(220.64deg, rgba(255, 255, 255, 0.2) -11.67%, rgba(255, 255, 255, 0) 120.95%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}


@media(max-width: 1240px) {
    .news-name-link .card-name-text {
        max-width: 480px;
    }

    .news-content {
        gap: 90px;
    }
}

@media(max-width: 1000px) {
    .news-name-link .card-name-text {
        max-width: 433px;
    }

    .news-content {
        gap: 50px;
    }
}

@media(max-width: 850px) {
    .news-content {
        gap: 20px;
    }
}

@media(max-width: 768px) {
    .news-item {
        flex-direction: column-reverse;
    }

    .news-item .card-name-text {
        font-size: 18px;
        line-height: 24px;
    }

    .news-image {
        width: 100%;
    }

    .news-name-link {
        width: 100%;
    }

    .news-name-link .card-name-text {
        max-width: unset;
    }

    .news-block .transparent-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .news-block .wrapper {
        gap: 0;
    }

    .news-block .news-items {
        margin-top: 28px;
        margin-bottom: 32px;
    }

    .news-item {
        gap: 16px;
        padding: 24px 0;
    }

    .news-name-link {
        gap: 16px;
    }


}

@media(max-width: 567px) {
    .news-name-link .card-name-text {
        max-width: 311px;
    }
}

/* Форма */
.form-section .grey-bouble {
    gap: 32px;
}

.form-section .card-name-text span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.wpcf7 form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wpcf7 form .flex-box-column {
    gap: 18px;
}

.wpcf7 form .flex-box-row p {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.wpcf7 form br {
    display: none;
}

.wpcf7 form .wpcf7-spinner {
    position: absolute;
    bottom: -82px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.wpcf7 form.submitting {
    margin-bottom: 44px;
}

.wpcf7 .flex-box-row p span.wpcf7-form-control-wrap {
    width: 26.7%;
}

.wpcf7 .flex-box-column>p>span {
    width: 100%;
    display: flex;
}

.wpcf7 .form-field {
    width: 100%;
    border: none;
    outline: none;
    padding: 18px 24px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
}

.wpcf7 .form-field::placeholder{
    color: rgba(255,255,255,0.6);
}

.wpcf7 textarea.form-field {
    height: 64px;
    min-height: 120px;
    max-height: 200px;
    resize: vertical;
}

.wpcf7 .form-field:focus {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.wpcf7 .form-submit {
    border: none;
    outline: none;
    cursor: pointer;
}

/* Базовые стили */
.wpcf7 form .wpcf7-acceptance>span {
    margin-left: 0 !important;
}

.wpcf7 form .wpcf7-acceptance>span>label {
    display: flex;
    align-items: start;
    gap: 8px;
    cursor: pointer;
}

/* Прячем чекбокс */
.wpcf7 form .form-acceptance {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* Кастомный чекбокс */
.wpcf7 form .wpcf7-acceptance>span>label::before {
    content: '';
    margin-top: 4px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background: transparent;
    transition: all 0.2s;
    flex-shrink: 0;
    box-sizing: border-box;
}

.wpcf7 form .wpcf7-acceptance:has(.form-acceptance:checked)>span>label::before {

    background-color: #fff;
    border-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.wpcf7 form .wpcf7-acceptance:has(.form-acceptance:focus)>span>label::before {
    border-color: #fff;
}

.wpcf7 form .wpcf7-acceptance>span>label:hover::before {
    border-color: #fff;
}

.wpcf7 form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a {
    text-decoration: underline;
    text-decoration-thickness: 6.82%;
    text-underline-offset: 19.3%;
    text-decoration-skip-ink: auto;
    color: inherit;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 32px;
    border-color: rgba(100, 51, 221, 1) !important;
    border-radius: 32px;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #fff;
}

.wpcf7 form.invalid .wpcf7-response-output {
    border-color: #dc3232 !important;
}

.wpcf7 form .wpcf7-submit:disabled {
    opacity: 0.3;
}

.wpcf7 form .wpcf7-submit:disabled:hover {
    background-color: rgba(100, 51, 221, 1);
    color: rgba(255, 255, 255, 1) !important
}



.wpcf7 form .wpcf7-not-valid-tip {
    position: absolute;
    top: calc(100% + 5px);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.wpcf7 form .flex-box-column>p .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) {
    margin-bottom: 15px;
}

.wpcf7 form .flex-box-row>p:has(.wpcf7-not-valid-tip) {
    margin-bottom: 15px;
}

.wpcf7 form p:has(.wpcf7-acceptance) .wpcf7-spinner {
    display: none;
}

@media(max-width: 1240px) {
    .wpcf7 .form-field {
        padding: 16px 20px;
        font-size: 17px;
        line-height: 22px;
    }

    .wpcf7 form .wpcf7-acceptance .wpcf7-list-item-label {
        font-size: 17px;
        line-height: 22px;
    }

    .wpcf7 form .wpcf7-response-output {
        padding: 25px;
        border-radius: 25px;
        font-size: 17px;
        line-height: 22px;
    }

    .wpcf7 form .wpcf7-not-valid-tip {
        font-size: 13px;
        line-height: 17px;
    }

    .wpcf7 textarea.form-field {
        min-height: 54px;
        height: 54px;
    }
}

@media(max-width: 1000px) {
    .wpcf7 .form-field {
        padding: 14px 18px;
    }

    .wpcf7 textarea.form-field {
        height: 50px;
        min-height: 50px;
    }

    .wpcf7 form .flex-box-row p {
        flex-direction: column;
        width: 100%;
    }

    .wpcf7 .flex-box-row p span.wpcf7-form-control-wrap {
        width: 100%;
    }

    .wpcf7 .form-submit {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wpcf7 .form-submit.tablet {
        display: none !important;
    }

    .wpcf7 .form-submit.mobile {
        display: flex !important;
    }

    .wpcf7 form p:has(.wpcf7-acceptance) {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
}

@media(max-width: 768px) {
    .wpcf7 textarea.form-field {
        min-height: 88px;
        resize: none;
    }

    .wpcf7 .form-field {
        padding: 12px 16px;
        font-size: 18px;
        line-height: 24px;
    }

    .wpcf7 form .wpcf7-acceptance .wpcf7-list-item-label {
        font-size: 16px;
        line-height: 20px;
    }

    .wpcf7 form .wpcf7-response-output {
        padding: 16px;
        border-radius: 16px;
        font-size: 16px;
        line-height: 20px;
    }

    .wpcf7 form .wpcf7-not-valid-tip {
        font-size: 12px;
        line-height: 16px;
    }

    .wpcf7 form p:has(.wpcf7-acceptance) {
        gap: 16px;
    }

    .wpcf7 form .flex-box-column {
        gap: 12px;
    }

    .wpcf7 form .flex-box-row p {
        gap: 12px;
    }

    .form-section .grey-bouble {
        gap: 24px;
    }

    .wpcf7 form {
        gap: 16px;
    }

    .wpcf7 form .flex-box-row p .wpcf7-spinner {
        display: none;
    }

    .wpcf7 form p:has(.wpcf7-acceptance) .wpcf7-spinner {
        display: flex;
    }

}


.survey-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.survey-modal-title {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.survey-modal-close {
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: none;
    padding: 0;
}

.survey-modal-close:hover {
    color: rgba(255, 255, 255, 1);
}

/* Прогресс */
.survey-progress {
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    height: 30px;
}

.survey-progress-bar {
    height: 100%;
    background: rgba(100, 51, 221, 1);
    transition: width 0.3s;
}

.survey-progress .main-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Вопросы */
.survey-question {
    margin-bottom: 30px;
}

.survey-question-text {
    margin-bottom: 20px;
    display: flex;
}

.survey-answers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.survey-answer {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
}

.survey-answer:hover {
    border-color: rgba(100, 51, 221, 1);
    background: rgba(255, 255, 255, 0.4);
}

.survey-answer.selected {
    border-color: rgba(100, 51, 221, 1);
    background: rgba(255, 255, 255, 0.4);
}

.survey-answer input[type="radio"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    accent-color: rgba(100, 51, 221, 1);
}

.survey-answer-text {
    flex: 1;
}

/* Футер с кнопками */
.survey-modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    gap: 15px;
}

.survey-btn {
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
    border: none;
}



.survey-btn-prev:hover:disabled {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
}


.transparent-btn:hover:disabled::before,
.transparent-btn:hover:disabled::after {
    background-color: inherit !important;
}

.survey-btn-prev:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.survey-btn-next,
.survey-btn-finish {
    margin-left: auto;
}

.survey-btn-next:disabled,
.survey-btn-finish:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.survey-btn-next:hover:disabled,
.survey-btn-finish:hover:disabled {
    background-color: rgba(100, 51, 221, 1);
    color: #fff !important;
}


.survey-btn-next:hover,
.survey-btn-finish:hover {
    color: rgba(100, 51, 221, 1) !important;
}

/* Скрытие элементов секции */
.desktop-hidden {
    display: none !important;
}

.expanded .desktop-hidden {
    display: flex !important;
}

@media(max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }

    .expanded .mobile-hidden {
        display: flex !important;
    }
}


/* Второй экран главной */


.main-second-section .wrapper {
    gap: 40px;
}

.second-boubles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
}

.second-boubles-grid .grey-bouble {
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.second-boubles-grid .section-subtitle span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.big-grey-bouble {
    grid-column: span 2;
}

.big-grey-bouble:has(.big-grey-bouble-photo.big-img) {
    overflow: unset;
}

.half-grey-bouble {
    grid-column: span 1;
}

.big-grey-bouble-switcher {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(32px);
    border-radius: 10000px;
    padding: 4px;
    position: absolute;
    bottom: 28px;
    right: 35px;
    z-index: 3;
}

.big-grey-bouble-switcher div {
    display: flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

.big-grey-bouble-switcher div svg path {
    transition: all 0.3s;
}

.big-grey-bouble-switcher div.active {
    background-color: #fff;
}

.big-grey-bouble-switcher div.active svg path {
    fill: #000;
}

.big-grey-bouble-photo {
    position: absolute;
    bottom: 0;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    height: fit-content;
    width: 41%;
    z-index: -2;
}

.big-grey-bouble-photo.big-img {
    width: 41%;
    height: auto;
    position: absolute;
    right: 16px;
    bottom: 0;
    top: unset;
    transform: unset;
    z-index: -1;
}

.big-grey-bouble-photo.big-img.desktop-image-prod {
    bottom: unset;
    top: 50%;
    transform: translateY(-50%);
}

.big-grey-bouble-photo .blend-hue {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #6433DD;
    mix-blend-mode: hue;
    opacity: 0.7;
}

.half-grey-bouble-photo {
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    position: absolute;
    mix-blend-mode: plus-lighter;
    z-index: -2;
}

.big-grey-bouble-photo img,
.half-grey-bouble-photo img {
    width: 100%;
    display: block;
    height: auto;
}



.bouble-shadow {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

.big-grey-bouble-photo .bouble-shadow {
    height: 62%;
    background: linear-gradient(0deg, #222127 0%, rgba(34, 33, 39, 0) 91.94%);
}

.half-grey-bouble-photo .bouble-shadow {
    height: 50%;
    background: linear-gradient(180deg, rgba(34, 33, 39, 0) 0%, #000 100%);
}


.big-grey-bouble-column {
    width: 55%;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.half-grey-bouble-column {
    width: 100%;
    gap: 148px;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 1;
}

.grey-bouble-column-top {
    gap: 32px;
}

.grey-bouble-column-top-top {
    gap: 16px;
}

.half-grey-bouble-column .grey-bouble-column-top-top {
    min-height: 172px;
}

.purple-hars {
    gap: 12px;
    flex-wrap: wrap;
}

.purple-har {
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: rgba(100, 51, 221, 0.2);
    border-radius: 16px;
}

@media(max-width: 1100px) {
    .big-grey-bouble {
        grid-column: span 1;
        flex-direction: column;
    }

    .big-grey-bouble-switcher {
        display: none;
    }

    .big-grey-bouble-photo,
    .big-grey-bouble-photo.big-img,
    .big-grey-bouble-photo.big-img.desktop-image-prod {
        position: absolute;
        bottom: 68px;
        top: unset;
        height: fit-content;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);
    }

    .big-grey-bouble-photo img,
    .big-grey-bouble-photo.big-img img {
        height: 148px;
        width: auto;
    }

    .second-boubles-grid {
        gap: 12px;
    }

    .second-boubles-grid .grey-bouble {
        padding: 20px;

    }

    .second-boubles-grid .btns-row {
        gap: 8px !important;
    }

    .second-boubles-grid .btns-row .desktop {
        display: none !important;
    }

    .second-boubles-grid .btns-row .tablet {
        display: flex !important;
        padding: 12px 24px !important;
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .second-boubles-grid .btns-row .transparent-btn {
        padding: 12px 16px !important;
    }

    .big-grey-bouble-column {
        width: 100%;
        height: 100%;
        justify-content: space-between;
        gap: 148px;
    }
}

@media(max-width: 768px) {
    .main-second-section .wrapper {
        gap: 0;
    }

    .second-boubles-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
        margin-top: 48px;
    }

    .second-boubles-grid .btns-row .tablet {
        display: none !important;
    }

    .second-boubles-grid .grey-bouble {
        padding: 16px;
    }

    .big-grey-bouble {
        grid-column: unset;
        flex-direction: column;
    }

    .half-grey-bouble {
        grid-column: unset;
    }

    .big-grey-bouble-photo img,
    .big-grey-bouble-photo.big-img img {
        height: auto;
        width: 100%;
    }


    .big-grey-bouble-photo {
        position: absolute;
        bottom: unset;
        left: 0;
        right: 0;
        top: 0;
        height: auto;
        aspect-ratio: 16/9;
        width: 100%;
        transform: unset;
    }

    .big-grey-bouble-photo.big-img {
        position: relative;
        aspect-ratio: unset;
    }

    .big-grey-bouble-photo.big-img,
    .big-grey-bouble-photo.big-img.desktop-image-prod {
        width: 70%;
        left: 50%;
        top: -36px;
        right: unset;
        transform: translateX(-50%);
    }

    .half-grey-bouble-photo {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: unset;
    }

    .big-grey-bouble-column {
        width: 100%;
        gap: 16px;
        height: fit-content;
        justify-content: unset;
        margin-top: calc(100% * 9/16);
    }

    .big-grey-bouble:has(.big-grey-bouble-photo.big-img) .big-grey-bouble-column {
        margin-top: unset;
    }

    .half-grey-bouble-column {
        margin-top: 38%;
        gap: 16px;
    }

    .grey-bouble-column-top {
        gap: 0;
    }

    .grey-bouble-column-top-top {
        gap: 12px;
    }

    .half-grey-bouble-column .grey-bouble-column-top-top {
        min-height: unset;
    }

    .main-second-section .transparent-btn {
        padding: 12px 16px;
    }
}

/* ===== МОДАЛКА МОДИФИКАЦИИ ===== */

.mod-modal-overlay,
.form-modal-overlay,
.survey-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mod-modal-overlay.is-open,
.form-modal-overlay.is-open,
.survey-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Сама модалка */
.mod-modal,
.form-modal,
.survey-modal {
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    outline: none;
    transform: translateY(16px);
    transition: transform 0.25s ease;
    scrollbar-width: none;
    padding-bottom: 32px;
}

.form-modal,
.survey-modal {
    padding-bottom: 32px;
}

.form-modal h2,
.survey-modal h2 {
    padding-right: 57px;
}

.mod-modal::-webkit-scrollbar,
.form-modal::-webkit-scrollbar,
.survey-modal::-webkit-scrollbar {
    display: none;
}

.mod-modal-overlay.is-open .mod-modal,
.form-modal-overlay.is-open .form-modal,
.survey-modal-overlay.is-open .survey-modal {
    transform: translateY(0);
}

/* Кнопка закрыть */
.mod-modal-close,
.form-modal-close {
    position: absolute;
    top: 32px;
    right: 32px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s;
    flex-shrink: 0;
}

.mod-modal-close path,
.form-modal-close path {
    transition: all 0.3s;
}

.mod-modal-close:hover path,
.form-modal-close:hover path {
    opacity: 1;
}

.form-modal h2 span {
    color: var(--light-grey);
}

/* Основная раскладка */
.mod-modal-content {
    gap: 0;
}

.form-modal-content {
    gap: 32px;
}

.mod-modal-row {
    gap: 30px;
    align-items: stretch;
}

.mod-modal-column {
    gap: 40px;
    height: auto;
}

.mod-modal-column:last-child {
    width: 31%;
}

.mod-modal-image {
    position: relative;
    width: calc(100% + 64px);
    margin: -400px -32px -32px -32px;
    bottom: 0;
    left: 0;
    right: 0;
    height: fit-content;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    z-index: -1;
}

.mod-modal-image img {
    position: relative;
    width: 110%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    bottom: 0;
    object-fit: cover;
}

/* Заголовок */
.mod-modal-header {
    max-width: 656px;
    margin-bottom: 24px;
}

/* Буббли */
.mod-modal-bubbles {
    gap: 16px;
    flex-wrap: wrap;
}

.mod-modal-bubble {
    gap: 4px;
    flex-shrink: 0;
}

/* Текст */
.mod-modal-text {
    margin-top: 18px;
    max-width: 327px;
}

/* Группы тегов */
.mod-modal-groups {
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.mod-modal-group {
    gap: 16px;
}

.mod-modal-tags {
    gap: 12px;
    flex-wrap: wrap;
}

.mod-modal-tag {
    gap: 9px;
    align-items: center;
    padding: 12px 16px;
}

.mod-modal-tag-icon {
    object-fit: contain;
    flex-shrink: 0;
}

/* Кнопка */
.mod-modal-btn {
    width: fit-content;
}

.mod-modal-image-mobile {
    display: none;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 244px;
    width: 130%;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    margin: -40px 0px 0 0px;
    will-change: transform, mix-blend-mode, opacity;
    pointer-events: none;
    backface-visibility: hidden;
}

.mod-modal-image-mobile img {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    width: 100%;
    height: 100%;
    max-width: 700px;
    object-fit: contain;
}

.mod-modal-image-mobile div {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background: linear-gradient(180deg, rgba(34, 33, 39, 0) 0%, #000 100%);
}

.mod-modal::after {
    display: none;
}

.mod-modal {
    border: 2px solid rgba(255, 255, 255, 0.2);
    overflow-x: clip;
}

@media(max-width: 1240px) {
    .mod-modal-image {
        margin-top: -300px;
    }
}

@media(max-width: 960px) {
    .mod-modal-image {
        margin-top: -250px;
    }
}

/* ===== Адаптив ===== */
@media (max-width: 768px) {

    .mod-modal-overlay,
    .form-modal-overlay,
    .survey-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .mod-modal-overlay .wrapper,
    .form-modal-overlay .wrapper,
    .survey-modal-overlay .wrapper {
        padding: 0;
    }

    .mod-modal-image-mobile {
        display: flex;
    }

    .mod-modal,
    .form-modal,
    .survey-modal {
        width: calc(100% + 26px);
        max-height: 95dvh;
        /* Ограничиваем высоту */
        overflow-y: auto;
        overflow-x: hidden;
        /* Включаем вертикальную прокрутку */
        -webkit-overflow-scrolling: touch;
        /* Плавная прокрутка на iOS */
        border-radius: 32px 32px 0 0;
        left: 50%;
        transform: translate(-50%, 100%);
        padding: 16px 13px 0 13px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        background-color: rgb(33, 32, 38);
        border-bottom: none;
    }

    .mod-modal::after,
    .form-modal::after,
    .survey-modal::after {
        display: none;
    }

    /* Убедитесь, что контент может расти */
    .mod-modal-content,
    .form-modal-content,
    .survey-modal-content {
        height: auto;
        min-height: min-content;
        padding-bottom: 61px;
        /* Место для фиксированной кнопки */
    }

    .mod-modal-overlay.is-open .mod-modal,
    .form-modal-overlay.is-open .form-modal,
    .survey-modal-overlay.is-open .survey-modal {
        transform: translate(-50%, 0);
    }

    .form-modal h2,
    .survey-modal h2 {
        padding-right: 40px;
    }

    .form-modal-content,
    .survey-modal-content {
        padding: 0 16px 16px 16px;
    }

    .mod-modal-close,
    .form-modal-close {
        top: 24px;
        right: 24px;
    }

    .mod-modal-close svg,
    .form-modal-close svg {
        width: 24px;
        height: 20px;
    }

    .survey-modal-close svg {
        width: 24px;
        height: 20px;
    }

    .mod-modal-column {
        gap: 0;
    }

    .mod-modal-groups {
        flex-direction: column;
        gap: 24px;
    }

    .mod-modal-btn {
        position: sticky;
        bottom: 16px;
        justify-content: center;
        margin: auto;
        width: calc(100% - 32px);
        z-index: 10;
    }


    .mod-modal::-webkit-scrollbar {
        display: none;
    }

    /* Кнопка закрыть */
    .mod-modal-close {
        top: 24px;
        right: 32px;
    }

    .mod-modal-close svg {
        width: 24px;
        height: 20px;
    }

    .mod-modal-row {
        flex-direction: column;
        gap: 25px;
    }

    .mod-modal-column:last-child {
        width: 100%;
    }

    .mod-modal-image {
        display: none;
    }

    /* Заголовок */
    .mod-modal-header {
        margin-bottom: 24px;
        max-width: 255px;
        padding-left: 16px;
    }

    .mod-modal-header .section-subtitle {
        font-size: 32px;
        line-height: 36px;
    }

    /* Буббли */
    .mod-modal-bubbles {
        gap: 8px;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 16px;
    }

    .mod-modal-bubbles::-webkit-scrollbar {
        display: none;
    }

    .mod-modal-bubble {
        gap: 8px;
        flex-shrink: 0;
    }

    /* Текст */
    .mod-modal-text {
        margin-top: 0;
        max-width: unset;
        padding: 0 16px;
    }

    .mod-modal-group {
        gap: 8px;
        width: 100%;
    }

    .mod-modal-group-label {
        padding: 0 16px;
    }

    .mod-modal-tags {
        gap: 8px;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 16px;
    }

    .mod-modal-tags::-webkit-scrollbar {
        display: none;
    }

    .mod-modal-tag {
        gap: 8px;
        flex-shrink: 0;
    }
}

/* Четвёртый экран */

.main-fourth-section .wrapper {
    gap: 40px;
}

.main-fourth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
}


.service-item.wide {
    grid-column: span 2;
    min-height: 244px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.service-item.tall {
    grid-row: span 2;
    display: flex;
    min-height: 512px;
    flex-direction: column;
    justify-content: space-between;
}

.need-bg {
    position: absolute;
    background-color: rgba(100, 51, 221, 0.2);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: inherit;
    z-index: -1;
}

.service-text-column {
    gap: 16px;
    position: relative;
    z-index: 4;
}

.service-item.wide .service-text-column {
    width: 57%;
}

.service-item-btn {
    gap: 16px;
    position: relative;
    justify-content: end;
}

.service-item.wide .service-item-btn {
    width: 43%;
}

.service-need {
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 16px;
    width: fit-content;
    background-color: rgba(100, 51, 221, 1);
    white-space: nowrap;
    position: relative;
    z-index: 4;
}

.service-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 210px;
    background-size: contain;
    background-color: #101012;
    background-blend-mode: screen;
    z-index: 1;
}


.service-img .need-bg {
    z-index: 1;
    mix-blend-mode: lighten;
    background-color: rgb(45, 35, 73);
}

.service-item-btn .white-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4;
}

@media(max-width: 1000px) {
    .main-fourth-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-item.wide {
        min-height: 190px;
    }

    .service-item.tall {
        min-height: 350px;
    }

    .service-img {
        height: 160px;
        width: auto;
    }
}

@media(max-width: 768px) {
    .main-fourth-section .wrapper {
        gap: 0;
    }

    .main-fourth-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: max-content;
        margin-top: 28px;
        gap: 12px;
    }

    .service-item.tall {
        grid-row: unset;
        min-height: unset;
        flex-direction: row-reverse;
        gap: 20px;
    }

    .service-item.wide {
        grid-column: unset;
        min-height: unset;
        flex-direction: row-reverse;
        gap: 20px;
    }

    .service-item .white-btn {
        display: none;
    }

    .service-item .service-text-column {
        width: auto !important;
    }

    .service-item .service-item-btn {
        width: auto !important;
    }

    .service-need {
        position: absolute;
        left: 12px;
        top: -52px;
        z-index: 4;
    }

    .service-img {
        width: 57px;
        height: auto;
        position: relative;
    }

    .need-service-item {
        margin-top: 36px;
    }

    .service-item-btn {
        gap: 16px;
        position: relative;
        justify-content: start;
    }

    .mobile-hidden {
        display: none !important;
    }

    .show-more-btn,
    .hide-btn {
        width: fit-content;
        margin: auto;
        text-align: center;
        cursor: pointer;
        transition: opacity 0.3s ease;
        display: flex;
        margin-top: 16px;
    }

    .show-more-btn:hover,
    .hide-btn:hover {
        opacity: 0.8;
    }

    .main-fourth-section .white-btn.mobile {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Убираем анимацию если не нужна, или оставляем */
    .service-item,
    .second-boubles-grid .grey-bouble,
    .solution-mobile,
    .vacancies-section .grey-har,
    .details .details-item,
    .certificates .document-item {
        animation: fadeIn 0.3s ease;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


}


/* Четвёртый экран */
.product-fourth .wrapper {
    gap: 40px;
}

.mod-filters {
    gap: 32px;
    margin-bottom: 20px;
}

.mod-filters-top {
    padding: 18px 24px;
}

.range {
    position: absolute;
    bottom: -10px;
    right: 24px;
    width: 61%;
    --thumb-size: 20px;
    --track-height: 4px;
    --progress-color: #fff;
    --track-color: rgba(255, 255, 255, 0.4);
    --thumb-color: #ffffff;
    --min: 0;
    --max: 700;
}

.track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: var(--track-height);
    background: var(--track-color);
    border-radius: 100px;
    pointer-events: none;
    z-index: 1;
}

.progress {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc((var(--value-1) - var(--min)) / (var(--max) - var(--min)) * 100%);
    width: calc((var(--value-2) - var(--value-1)) / (var(--max) - var(--min)) * 100%);
    height: var(--track-height);
    background: var(--progress-color);
    border-radius: 100px;
    pointer-events: none;
    z-index: 2;
}

.thumbs {
    position: relative;
    display: grid;
    height: var(--thumb-size);
    z-index: 3;
}

.range-input {
    grid-area: 1 / 1;
    width: 100%;
    height: var(--thumb-size);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.range-input::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--track-height);
    background: transparent;
    border: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: var(--thumb-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s;
}

.range-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}


.range-input::-moz-range-track {
    width: 100%;
    height: var(--track-height);
    background: transparent;
    border: none;
}

/* Стили для ползунка (firefox) */
.range-input::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: var(--thumb-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s;
}

.range-input::-moz-range-thumb:hover {
    transform: scale(1.1);
}

/* Output для отображения значения */
.range-output {
    position: absolute;
    top: -36px;
    white-space: nowrap;
    pointer-events: none;
}

.range-output[for="speedFilterMin"] {
    left: 0;
    transform: translateX(0);
}

/* Правый output (max) */
.range-output[for="speedFilterMax"] {
    right: 0;
    transform: translateX(0);
}

.mod-filter-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Скрываем стандартный чекбокс */
.mod-check-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Стили для кастомного чекбокса */
.mod-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.mod-check-label .main-text-bigger {
    transition: all 0.3s;
}

/* Кастомный бокс чекбокса */
.mod-check-box {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s;
}

/* Состояние при наведении */
.mod-check-label:hover .mod-check-box,
.mod-check-label input[type="checkbox"]:focus+.mod-check-box {
    border-color: #fff;
}

.mod-check-label:hover .main-text-bigger {
    color: #fff !important;
}

/* Состояние когда чекбокс отмечен */
.mod-check-label input[type="checkbox"]:checked+.mod-check-box {
    border-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2058_719)'%3E%3Cpath d='M6.05702 10.6044C6.30263 10.6044 6.5036 10.4829 6.65245 10.2473L10.0539 4.78559C10.1431 4.63367 10.2324 4.46655 10.2324 4.29943C10.2324 3.9576 9.94222 3.7373 9.62958 3.7373C9.43607 3.7373 9.25003 3.85885 9.11605 4.07914L6.01981 9.13826L4.55356 7.20123C4.38237 6.95814 4.21119 6.89738 4.01023 6.89738C3.68274 6.89738 3.42969 7.16324 3.42969 7.49748C3.42969 7.66461 3.49667 7.82413 3.60087 7.96843L5.41694 10.2473C5.61045 10.498 5.80397 10.6044 6.05702 10.6044Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2058_719'%3E%3Crect width='14' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.mod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 24px;
}

.mod-card {
    padding-top: 218px;
}

.mod-card-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 194px;
    mix-blend-mode: plus-lighter;
}

.mod-card-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mod-card .card-name-text {
    max-width: 230px;
    margin-bottom: 16px;
}

.mod-card-features {
    gap: 8px;
    margin-bottom: 24px;
}

.mod-card-footer {
    align-items: center;
    gap: 16px;
    margin: auto 0 0 0;
}

.mod-card-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s;
    cursor: pointer;
}

.mod-card-info-btn path {
    transition: all 0.3s;
}

.mod-card-info-btn:hover {
    background-color: #fff;
}

.mod-card-info-btn:hover path {
    opacity: 0.6;
    fill: #000;
}

.mod-no-mod,
.mod-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Стили для скрытых карточек */
.mod-hidden {
    display: none !important;
}

@media(max-width: 1240px) {
    .mod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 1000px) {
    .range {
        position: relative;
        bottom: unset;
        right: unset;
        width: 100%;
        margin-top: 36px;
    }

    .mod-grid {
        gap: 12px;
    }

    .thumbs {
        top: 50%;
        transform: translateY(-50%);
    }

}

@media(max-width: 768px) {
    .mod-filters-top {
        gap: 44px;
        flex-direction: column;
    }

    .product-fourth .wrapper {
        gap: 0;
    }

    .product-fourth .section-title {
        margin-bottom: 28px;
    }

    .mod-filter-checks {
        flex-direction: column;
        gap: 16px;
    }

    .mod-filters {
        gap: 20px;
        margin-bottom: 28px;
    }

    .range {
        margin-top: 0;
    }

    .mod-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }

    .thumbs {
        top: unset;
        transform: unset;
    }

    .mod-filters-top {
        padding: 16px;
    }

    /* Кастомный бокс чекбокса */
    .mod-check-box {
        width: 14px;
        height: 14px;
    }

    .product-fourth .section-controls {
        justify-content: center;
        text-align: center;
        margin-top: 16px;
    }

    .mod-no-mod,
    .mod-empty {
        text-align: center;
    }

    .mod-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mod-card-img div {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: 50%;
        background: linear-gradient(180deg, rgba(34, 33, 39, 0) 0%, #000 100%);
    }
}

@media(max-width: 567px) {
    .mod-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mod-card-img {
        height: 131px;
    }

    .mod-card {
        padding-top: 139px;
    }

    .mod-card .card-name-text {
        margin-bottom: 12px;
    }

    .mod-card-features {
        margin-bottom: 16px;
    }

    .mod-card-info-btn {
        width: 48px;
        height: 48px;
    }

    .mod-card-footer {
        gap: 8px;
    }

}

.main-third-section .swiper-navigation,
.product-sixth .swiper-navigation,
.support-2 .swiper-navigation{
    position: absolute;
    right: 40px;
    top: 0;
    display: flex;
    gap: 16px;
    align-items: center;
}

.main-third-section .swiper-prev,
.main-third-section .swiper-next,
.product-sixth .swiper-prev,
.product-sixth .swiper-next,
.support-2 .swiper-prev,
.support-2 .swiper-next {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    left: unset;
    right: unset;
    margin-top: unset;
    top: unset;
}

.main-third-section .swiper-prev.swiper-button-disabled,
.main-third-section .swiper-next.swiper-button-disabled,
.product-sixth .swiper-next.swiper-button-disabled,
.product-sixth .swiper-prev.swiper-button-disabled,
.support-2 .swiper-next.swiper-button-disabled,
.support-2 .swiper-prev.swiper-button-disabled{
    opacity: 0.4;
}

.main-third-section .swiper-prev svg path,
.main-third-section .swiper-next svg path,
.main-third-section .swiper-prev svg,
.main-third-section .swiper-next svg,
.product-sixth .swiper-prev svg path,
.product-sixth .swiper-next svg path,
.product-sixth .swiper-prev svg,
.product-sixth .swiper-next svg,
.support-2  .swiper-prev svg path,
.support-2 .swiper-next svg path,
.support-2 .swiper-prev svg,
.support-2 .swiper-next svg{
    transition: all 0.3s;
}

.main-third-section .swiper-prev:hover svg path,
.main-third-section .swiper-next:hover svg path,
.product-sixth .swiper-prev:hover svg path,
.product-sixth .swiper-next:hover svg path,
.support-2 .swiper-prev:hover svg path,
.support-2 .swiper-next:hover svg path {
    fill: #000;
    opacity: 1;
}


.faq-items {
    gap: 24px;
}

.faq-item {
    gap: 33px;
}

.faq-icon-container {
    width: 41px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-question,
.faq-content g,
.faq-content svg {
    transition: all 0.3s ease;
}

.faq-content svg {
    flex-shrink: 0;
}
.faq-right{
    width: 100%;
}
.faq-content {
    gap: 20px;
    align-items: center;
    margin-top: 7px;
    cursor: pointer;
}

.faq-content:hover .faq-question {
    color: var(--purple) !important;
}

.faq-content:hover g {
    opacity: 1;
}

.faq-answer {
    max-height: 0;
    padding-right: 104px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    color: rgba(255, 255, 255, 0.8) !important;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-item.active .faq-content svg {
    transform: rotate(180deg);
}

.faq-answer p {
    padding-top: 16px;
}

@media(max-width: 1240px) {
    .faq-answer {
        padding-right: 84px;
    }
}

@media(max-width: 1000px) {
    .faq-answer {
        padding-right: 64px;
    }
}

@media(max-width: 768px) {

    .faq-items {
        gap: 12px;
    }

    .faq-item {
        gap: 14px;
    }

    .faq-icon-container {
        width: 22px;
        height: 25px;
    }

    .faq-icon-container img {
        max-width: 22px;
    }

    .faq-content {
        gap: 15px;
        margin-top: 0;
    }

    .faq-answer p {
        padding-top: 8px;
    }

    .faq-answer {
        padding-right: 44px;
    }

}

.tooltip-trigger svg {
    display: block;
}

.tooltip-trigger svg path {
    transition: all 0.3s;
}

.tooltip-trigger:hover svg path {
    opacity: 1;
}

.tooltip-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
}

.tooltip-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tooltip-wrapper.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Контент тултипа */
.tooltip-content {
    color: white;
    padding: 20px;
    border-radius: 20px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    min-width: 200px;
    max-width: 350px;
    background: rgba(89, 86, 99, 0.85);
    backdrop-filter: blur(4px);
}

/* Стрелка */
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    pointer-events: none;
}

/* Цвета стрелки для разных позиций */
.tooltip-wrapper.top .tooltip-arrow,
.tooltip-wrapper.top-left .tooltip-arrow,
.tooltip-wrapper.top-right .tooltip-arrow {
    border-top-color: rgba(89, 86, 99, 0.95);
    border-bottom: none;
    top: 100%;
    /* Стрелка под контентом */
}

.tooltip-wrapper.bottom .tooltip-arrow,
.tooltip-wrapper.bottom-left .tooltip-arrow,
.tooltip-wrapper.bottom-right .tooltip-arrow {
    border-bottom-color: rgba(89, 86, 99, 0.95);
    border-top: none;
    bottom: 100%;
    /* Стрелка над контентом */
}

.tooltip-wrapper.left .tooltip-arrow {
    border-left-color: rgba(89, 86, 99, 0.95);
    border-right: none;
    left: 100%;
    /* Стрелка справа от контента */
}

.tooltip-wrapper.right .tooltip-arrow {
    border-right-color: rgba(89, 86, 99, 0.95);
    border-left: none;
    right: 100%;
    /* Стрелка слева от контента */
}

.form-checkboxes p{
    display: flex;
    flex-direction: column;
    gap: 5px !important;
}
body.taxonomy-post_tag #edittag{
    max-width: 100% !important;
}