@layer reset, global, custom, base;

:root {
    --font-body: 'Geologica', Arial, Helvetica, sans-serif;;
    --font-button: 'Inter', Arial, Helvetica, sans-serif;

    --white: rgba(255, 255, 255, 1);
    --white-65: rgba(255, 255, 255, 0.65);
    --white-70: rgba(255, 255, 255, 0.70);
    --black: rgba(0, 0, 0, 1);
    --gray-dark-3: rgba(20, 20, 20, 1);
    --gray-dark-2: rgba(39, 39, 39, 1);
    --gray-dark-1: rgba(71, 71, 71, 1);
    --gray: rgba(156, 156, 156, 1);
    --gray-light-1: rgba(241, 241, 241, 1);
    --green-dark-2: rgba(130, 199, 0, 1);
    --green-dark-1: rgba(136, 215, 33, 1);
    --green: rgba(209, 246, 87, 1);
    --green-light-1: rgba(235, 255, 168, 1);
    --purple-dark-1: rgba(92, 92, 244, 1);
    --purple: rgba(153, 153, 255, 1);
    --purple-light-1: rgba(210, 209, 255, 1);
    --purple-light-2: rgba(230, 230, 255, 1);
    --pink-dark-1: rgba(255, 190, 245, 1);
    --pink: rgba(255, 212, 248, 1);
    --pink-light-1: rgba(255, 234, 252, 1);

    --sb-track-color: #ffffff;
    --sb-thumb-color: #5c5cf4;
    --sb-size: 0.08rem;
    --submenu-height: 0;
}

@layer global {
    ::-webkit-scrollbar {
        width: 0.25rem;
        height: 0.25rem
    }

    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar-track {
        background: var(--color-gray)
    }

    ::-webkit-scrollbar-track {
        background: var(--sb-track-color);
        border-radius: 0.04rem;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-color);
        border-radius: 0.25rem;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scrollbar-gutter: stable;
        scroll-behavior: smooth;
        scroll-padding: 5rem;
        font-family: var(--font-body);
        font-size: 16px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -webkit-tap-highlight-color: transparent;
    }

    main {
        overflow-x: hidden;
    }

    section {
        padding-block: 2.75rem;
    }

    section:has(.wrapper) {
        padding-inline: 1.25rem;
    }

    section.hero {
        padding-top: 140px !important;
    }

    section .container {
        display: flex;
        flex-direction: column;
        gap: 52px;
    }

    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        font-family: var(--font-body);
        line-height: 1.1;
        font-weight: 600;
    }

    .display-1 {
        font-size: 96px;
        font-weight: 600;
        line-height: 1.1;
    }

    .display-2 {
        font-size: 56px;
        font-weight: 600;
        line-height: 1.1;
    }

    .display-3 {
        font-size: 50px;
        font-weight: 600;
        line-height: 1.1;
    }

    .body-1 {
        font-size: 18px;
        line-height: 1.4;
        font-weight: 400;
    }

    .body-2 {
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
    }

    .body-3 {
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
    }

    .caption {
        font-size: 12px;
        line-height: 1.4;
        font-weight: 400;
    }

    .caption-tight {
        font-size: 12px;
        line-height: 1.2;
        font-weight: 400;
    }

    h1,
    .h1 {
        font-size: 50px;
    }

    h2,
    .h2 {
        font-size: 36px;
    }

    h3,
    .h3 {
        font-size: 24px;
    }

    h4,
    .h4 {
        font-size: 20px;
    }

    h5,
    .h5 {
        font-size: 16px;
    }

    button {
        font-family: var(--font-body);
    }

    img {
        user-select: none;
        pointer-events: none;
    }

    a {
        text-decoration: none;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.25rem;
    }

    .wrapper {
        border-radius: 50px;
        padding: 3.5rem 2.25rem;
    }

    .card {
        padding: 36px;
        border-radius: 30px;
        position: relative;
        isolation: isolate;
    }

    ul.text {
        list-style: disc;
    }

    ol.text {
        list-style: decimal;
    }

    ul.text,
    ol.text {
        padding-left: 22px;
    }

    .preloader {
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        inset: 0;
        z-index: 100000000;
        transition: opacity 0.3s ease;
    }

    .preloader__svg {
        max-width: 14.375rem;
        transition: transform 0.3s ease;
    }

    .preloader[data-visible="false"] {
        opacity: 0;
    }

    .preloader[data-visible="false"] .preloader__svg {
        transform: scale(0.8);
    }


    .card.gradient-border {
        border: 1px solid transparent;
        background: linear-gradient(var(--gray-dark-1), var(--gray-dark-1)) padding-box,
        linear-gradient(226.14deg, #ffffff 0.92%, #272727 110%) border-box;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select {
        width: 100%;
        height: 52px;
    }

    textarea {
        width: 100%;
        resize: none;
        display: block;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-family: inherit;
        padding: 14px 28px;
        border-radius: 30px;
        font-size: 1rem;
        color: var(--black);
    }

    input[type="text"]::placeholder,
    input[type="email"]::placeholder,
    input[type="password"]::placeholder,
    input[type="search"]::placeholder,
    input[type="tel"]::placeholder,
    input[type="number"]::placeholder,
    textarea::placeholder {
        color: var(--gray);
    }

    input[type="checkbox"] {
        border-radius: 0;
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        border: 2px solid var(--gray-dark-3);
        margin: 3px;
        cursor: pointer;
    }

    input[type="checkbox"]:checked {
        background-color: var(--gray-dark-3);
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTAgOSIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik05LjcxMjI0IDAuMTI3MzhDMTAuMDI0OCAwLjM2NTMzNyAxMC4wOTE4IDAuNzk3OTg3IDkuODY4NTMgMS4xMDA4NEw0LjE1MjgyIDguNzE1NDdDNC4wMTg4NiA4Ljg2Njg5IDMuODQwMjQgOC45NzUwNSAzLjYzOTMgOC45OTY2OUMzLjQxNjAzIDkuMDE4MzIgMy4yMTUwOSA4LjkzMTc5IDMuMDU4OCA4LjgwMTk5TDAuMjAwOTQzIDYuMDMzMDRDLTAuMDY2OTgxIDUuNzUxODIgLTAuMDY2OTgxIDUuMzE5MTcgMC4yMDA5NDMgNS4wMzc5NUMwLjQ5MTE5NCA0Ljc3ODM2IDAuOTM3NzM0IDQuNzc4MzYgMS4yMjc5OCA1LjAzNzk1TDMuNDgzMDEgNy4yNDQ0Nkw4LjcwNzUzIDAuMjc4ODA4QzguOTUzMTIgLTAuMDI0MDQ2OCA5LjM5OTY2IC0wLjA4ODk0NDIgOS43MTIyNCAwLjEyNzM4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.625rem;
    }

    .cfr-form {
        display: flex;
        flex-direction: column;
        gap: 1.125rem;
        position: relative;
    }

    .cfr-form__fields {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .cfr-form .button {
        width: 100%;
    }

    .cfr-form .wpcf7-spinner {
        position: absolute !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        margin: 0;
        display: block !important;
    }

    .cfr-form__agreement label {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .cfr-form__agreement .wpcf7-list-item {
        margin-left: 0;
    }

    .cfr-form__agreement .wpcf7-list-item-label {
        font-size: 0.875rem;
        line-height: 1.4;
        font-weight: 400;
    }

    .cfr-form .wpcf7-not-valid-tip {
        font-size: 0.875rem;
        line-height: 1.1;
        margin-top: 4px;
    }

    input.wpcf7-not-valid {
        outline: 2px solid #dc3232;
    }

    .wpcf7 form .wpcf7-response-output {
        padding: 20px 28px;
        border-radius: 30px;
        margin: 20px 0 0;
        color: var(--white);
    }

    .wpcf7 form.invalid .wpcf7-response-output,
    .wpcf7 form.failed .wpcf7-response-output,
    .wpcf7 form.aborted .wpcf7-response-output {
        background: #dc3232;
        border-color: #dc3232 !important;
        color: var(--white);
    }

    .wpcf7 form.sent .wpcf7-response-output {
        background: #46b450;
        border-color: #46b450 !important;
        color: var(--white);
    }

    .wpcf7 form.spam .wpcf7-response-output {
        background: #f56e28;
        border-color: #f56e28 !important;
        color: var(--white);
    }

    .wpcf7 form.invalid .wpcf7-response-output,
    .wpcf7 form.unaccepted .wpcf7-response-output,
    .wpcf7 form.payment-required .wpcf7-response-output {
        background: #ffb900;
        border-color: #ffb900 !important;
        color: var(--black);
    }

    @media screen and (max-width: 960px) {
        .wrapper {
            border-radius: 40px;
            padding: 44px 20px;
        }

        .display-3 {
            font-size: 44px;
        }

        .display-1 {
            font-size: 64px;
        }

        .display-2 {
            font-size: 44px;
        }

        h1,
        .h1 {
            font-size: 44px;
        }

        h2,
        .h2 {
            font-size: 32px;
        }

        h3,
        .h3 {
            font-size: 20px;
        }

        h4,
        .h4 {
            font-size: 16px;
        }

        h5,
        .h5 {
            font-size: 14px;
        }

        body {
            font-size: 14px;
        }
    }

    @media screen and (max-width: 768px) {
        .faq__answer {
            padding-right: 1.5rem;
        }
    }

    @media screen and (max-width: 640px) {
        .display-1 {
            font-size: 48px;
        }

        .display-2 {
            font-size: 36px;
        }

        .display-3 {
            font-size: 26px;
        }

        h1,
        .h1 {
            font-size: 36px;
        }

        h2,
        .h2 {
            font-size: 28px;
        }

        h3,
        .h3 {
            font-size: 18px;
        }

        .wrapper {
            padding: 20px 0;
            border-radius: 30px;
        }

        .wrapper h2 {
            margin-top: 0.5rem;
        }

        .card {
            padding: 20px;
            border-radius: 20px;
        }
    }

    @media screen and (max-width: 480px) {
        section {
            padding-block: 2.75rem;
        }
    }
}

@layer custom {
    .hero {
        background: url('../assets/images/hero_noise.png') no-repeat center top / cover, linear-gradient(180deg, #e9fbaf 0%, #ffffff 60%);
    }

    .hero .container {
        gap: 0;
    }


    .highlight {
        z-index: -1;
        position: relative;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    .highlight.highlight_sm {
        background: url('../assets/images/highlight_sm.png') no-repeat center / 100% 100%;
        padding: 4px 12px 6px 8px;
        margin: -4px -12px -6px -8px;
    }

    .highlight.highlight_md {
        background: url('../assets/images/highlight_md.png') no-repeat center / 100% 100%;
        padding: 3px 32px 14px 24px;
        margin: -3px -32px -14px -24px;
    }

    .highlight.highlight_lg {
        background: url('../assets/images/highlight_lg.png') no-repeat center / 100% 100%;
        padding: 4px 16px 12px 24px;
        margin: -4px -16px -12px -24px;
    }

    h2:has(.highlight) {
        position: relative;
        isolation: isolate;
    }

    .morph-cards .card:after {
        content: '';
        position: absolute;
        z-index: -1;
        pointer-events: none;
    }

    .morph-cards .card:nth-child(1):after,
    .morph-cards .card:nth-child(5):after,
    .morph-cards .card:nth-child(7):after {
        width: 96px;
        height: 107px;
        top: -1px;
        right: -1px;
        background: url('../assets/images/main/format_card_bg_1.svg') no-repeat center / contain;
    }

    .morph-cards .card:nth-child(2):after,
    .morph-cards .card:nth-child(4):after {
        width: 140px;
        height: 16px;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        background: url('../assets/images/main/format_card_bg_2.svg') no-repeat center / contain;
    }

    .morph-cards .card:nth-child(3):after {
        width: 193px;
        height: 52px;
        bottom: -1px;
        right: 40px;
        background: url('../assets/images/main/format_card_bg_3.svg') no-repeat center / contain;
    }

    .morph-cards .card_image img {
        max-width: calc(100% + 12px);
        object-fit: contain;
        object-position: bottom right;
    }

    .morph-cards .card_image {
        background: url('../assets/images/main/format_img_bg.svg') no-repeat center / cover;
    }

    .highlight_heart:after {
        content: '';
        position: absolute;
        width: 55px;
        height: 55px;
        background: url('../assets/images/heart.svg') no-repeat center / contain;
        z-index: 1;
        bottom: calc(100% + 1.25rem);
        left: 65%;
    }

    .highlight_lines:before {
        content: '';
        position: absolute;
        right: calc(100% + 16px);
        top: 30%;
        width: 60px;
        height: 57px;
        background: url('../assets/images/lines.svg') no-repeat center / contain;
    }

    .faq__question {
        cursor: pointer;
    }

    .faq__icon {
        color: var(--color-main, #5c5cf5);
        transition: transform 0.3s ease;
    }

    .faq__item.active .faq__icon {
        transform: rotate(45deg);
    }

    .faq__content {
        overflow: hidden;
        height: 0;
        transition: height 0.3s ease;
    }

    .faq__answer {
        padding: 0 6rem 1.5rem 1.5rem;
    }

    .faq__question span,
    .faq__content {
        transition: all 0.3s ease;
    }

    .faq__item.active .faq__content {
        margin-top: -0.75rem;
    }

    .video-circle-progress__bar {
        stroke-linecap: round;
    }

    svg.video-circle-progress {
        inset: 6px;
    }

    video[class*="border-["] + svg.video-circle-progress {
        inset: 12px !important;
    }

    @supports (-ms-ime-align:auto) or (-moz-appearance: none) {
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
            -ms-overflow-style: var(--sb-thumb-color) var(--sb-track-color);
        }
    }

    @media screen and (max-width: 1200px) and (min-width: 961px) {
        .morph-cards .margin-left-custom {
            margin-left: calc(clamp(0, (1200px - 100vw) / (1200px - 961px), 1) * -4vw);
        }

        .morph-cards .margin-right-custom {
            margin-right: calc(clamp(0, (1200px - 100vw) / (1200px - 961px), 1) * 4vw);
        }
    }

    @media screen and (max-width: 640px) {
        .morph-cards .card:nth-child(1):after,
        .morph-cards .card:nth-child(5):after,
        .morph-cards .card:nth-child(7):after {
            width: 80px;
            height: 89px;
        }

        .morph-cards .card:nth-child(2):after,
        .morph-cards .card:nth-child(4):after {
            width: 110px;
            height: 12px;
        }

        .morph-cards .card:nth-child(3):after {
            width: 150px;
            height: 40px;
        }

        .morph-cards .card {
            padding-inline: 24px;
            padding-top: 28px;
        }

        .morph-cards .card:nth-child(3) {
            padding-bottom: 60px;
        }
    }
}