/*v1*/
:root {
    --nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 1.25em));
    --duration-fast: 0.2s;
    --duration-normal: 0.350s;
    --size-unit: 16;
    --size-container-ideal: 1512;
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

    --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
    --duration-default: 0.6s;
    --animation-default: var(--duration-default) var(--cubic-default);
    --swiper-pagination-color: var(--color-light);
    --swiper-pagination-bullet-inactive-color: var(--color-light);
    --swiper-pagination-bullet-inactive-opacity: 0.2;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 0.25em;
    --swiper-pagination-bullet-size: 0.65em;

    /*custom fonts*/

    --inter-font: "Inter-Variable", system-ui, sans-serif;
    --inter-Black: "Inter-Black", system-ui, sans-serif;
    --inter-Bold: "Inter-Bold", system-ui, sans-serif;
    --inter-ExtraBold: "Inter-ExtraBold", system-ui, sans-serif;
    --inter-ExtraLight: "Inter-ExtraLight", system-ui, sans-serif;
    --inter-Light: "Inter-Light", system-ui, sans-serif;
    --inter-Medium: "Inter-Medium", system-ui, sans-serif;
    --inter-Regular: "Inter-Regular", system-ui, sans-serif;
    --inter-SemiBold: "Inter-SemiBold", system-ui, sans-serif;
    --inter-Thin: "Inter-Thin", system-ui, sans-serif;

    --satoshi-font: "Satoshi-Variable", system-ui, sans-serif;
    --satoshi-black: "Satoshi-Black", system-ui, sans-serif;
    --satoshi-bold: "Satoshi-Bold", system-ui, sans-serif;
    --satoshi-medium: "Satoshi-Medium", system-ui, sans-serif;
    --satoshi-regular: "Satoshi-Regular", system-ui, sans-serif;
    --satoshi-variable: "Satoshi-Variable", system-ui, sans-serif;
    --satoshi-light: "Satoshi-Light", system-ui, sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: sans-serif;

}

.dev-soon {
    background-color: #d8e3ff;
    color: #1d1d1d;
}

.font-inter {
    font-family: var(--inter-font);
}

.font-inter-black {
    font-family: var(--inter-Black);
}

.font-inter-bold {
    font-family: var(--inter-Bold);
}

.font-inter-extrabold {
    font-family: var(--inter-ExtraBold);
}

.font-inter-extralight {
    font-family: var(--inter-ExtraLight);
}

.font-inter-light {
    font-family: var(--inter-Light);
}

.font-inter-medium {
    font-family: var(--inter-Medium);
}

.font-inter-regular {
    font-family: var(--inter-Regular);
}

.font-inter-semibold {
    font-family: var(--inter-SemiBold);
}

.font-inter-thin {
    font-family: var(--inter-Thin);
}

.font-satoshi {
    font-family: var(--satoshi-font) !important;
}

.font-satoshi-black {
    font-family: var(--satoshi-black) !important;
}

.font-satoshi-bold {
    font-family: var(--satoshi-bold) !important;
}

.font-satoshi-medium {
    font-family: var(--satoshi-medium) !important;
}

.font-satoshi-regular {
    font-family: var(--satoshi-regular) !important;
}

.font-satoshi-variable {
    font-family: var(--satoshi-variable) !important;
}

.font-satoshi-light {
    font-family: var(--satoshi-light) !important;
}

header, nav {
    display: block
}

.no-break-word {
    white-space: nowrap;
    /*white-space: pre-wrap;*/
    word-break: keep-all;
}

a:active, a:hover {
    outline: 0
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

button {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button {
    text-transform: none
}

button {
    -webkit-appearance: button;
    cursor: pointer
}

button::-moz-focus-inner {
    border: 0;
    padding: 0
}


[class*=\ w-icon-] {
    speak: none;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-family: webflow-icons !important
}

* {
    box-sizing: border-box
}

html {
    height: 100%
}


body {
    color: white;
    /*background-color: #fff;*/
    min-height: 100%;
    margin: 0;
    /*font-family: Arial, sans-serif;*/
    font-size: 14px;
    line-height: 20px;
    background: #040400;
    font-family: var(--inter-font);
}

body.light-mode-activated {
    color: #040400;
    /*color: #333;*/
    background: white;

}

img {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block
}

.w-inline-block {
    max-width: 100%;
    display: inline-block
}

ul {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px
}

button {
    cursor: pointer;
    -webkit-appearance: button;
    border: 0
}


:root {
    --primary-font: Suisseintl, Arial, sans-serif;
    --color-light: var(--color-white);
    --color-dark: var(--color-neutral-950);
    --color-secondary: #0025a8;
    --color-primary: #ef0;
    --gap-med: 1.25em;
    --gap-reg: 1em;
    --container-padding: 2em;
    --gap-tiny: .5em;
    /*--mono-font: Suisseintlmono, Arial, sans-serif;*/
    --color-neutral-950: #111;
    --color-neutral-100: whitesmoke;
    --color-white: white;
    --color-neutral-900: #1e1e1e;
    --gap-size: 1rem;
    --gap-xxlarge: 3em;
    --color-neutral-400: #cfcfcf;
    --color-neutral-800: #272727;
    --gap-large: 1.5em;
    --gap-xlarge: 2em;
    --gap-small: .75em;
    --color-neutral-700: #404040;
    --color-black: black;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-orange: #ec5e2a;
    --gap-component-grid: .75em
}

.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
    outline-offset: 2px;
    border-radius: 50%;
    outline: 2px solid #3b79c3
}

body {
    /*font-family: var(--primary-font);*/
    /*color: var(--color-light);*/
    font-weight: 400;
    line-height: 1;
    font-size: var(--size-font)
}

a {
    padding: 0;
    /*text-decoration: underline*/
}

ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0
}

img {
    max-width: 100%;
    display: inline-block
}

.button:not(.button-contact-us) {
    /*font-family: var(--mono-font);*/
    color: var(--color-neutral-950);
    text-transform: uppercase;
    border: 1px #000;
    border-radius: .25em;
    justify-content: center;
    align-items: center;
    height: 2.625em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    display: flex;
    position: relative
}

.button:focus {
    outline-offset: 2px;
    border-radius: .15em;
    outline: 1px #efeeec
}

.button:focus-visible {
    outline-offset: 2px;
    outline: 1px solid #efeeec
}

.button.is--dark {
    color: var(--color-neutral-100);
    background-color: #0000
}

.button.nav-button:not(.button-contact-us) {
    color: var(--color-light);
    background-color: #0000;
    height: max(2.375em, 36px);
    padding-left: .75em;
    padding-right: .75em
}

a.nav-logo {
    position: relative;
}

.black-logo.nav-logo,
.black-logo.nav-logo {
    transition: all .6s cubic-bezier(.165, .84, .44, 1)

}

.black-logo.nav-logo {
    /*display: none;*/
    opacity: 0;
    top: 0;
    position: absolute !important;
}

.u--clip {
    z-index: 1;
    position: relative;
    overflow: clip
}

.u--clip.nav-button {
    z-index: 1;
    grid-column-gap: .625em;
    grid-row-gap: .625em;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative
}

.button-bg {
    z-index: 0;
    background-color: var(--color-white);
    border-radius: .25em;
    position: absolute;
    inset: 0%
}

.button-bg.is--dark {
    background-color: var(--color-neutral-900)
}

.button-bg.nav-button {
    z-index: 0;
    -webkit-backdrop-filter: blur(2.5em);
    backdrop-filter: blur(2.5em);
    background-color: #fff3
}

.button-text {
    white-space: nowrap;
    font-size: .875em
}

.button-text.nav-button {
    font-size: max(.875em, 14px)
}

.header {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.nav-inner {
    padding-top: var(--container-padding);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative
}

.nav-dropdown__link-bg {
    position: absolute;
    inset: 0%
}

.nav-dropdown__link-bg img {
    /*border-radius: 12px;*/
    /*box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;*/
}

.nav-link__label {
    font-size: max(.875em, 14px);
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.nav-link__label__arrow {
    display: none;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.nav-logo {
    width: 16.25em;
    height: auto;
    display: block;
    position: relative
}

.nav-logo.w--current {
    display: block
}

.nav-dropdown__link-inner {
    z-index: 1;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    display: flex;
    position: relative
}

.nav-dropdown__content {
    grid-column-gap: 1.25em;
    grid-row-gap: 1.25em;
    width: 100%;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    display: flex
}

@media screen and (min-width: 768px) {
    .nav-dropdown.nav-d-technology .nav-dropdown__content .nav-dropdown__content-li {
        width: calc(90% / var(--style-var-items-count));

    }
}


.nav-dropdown.nav-d-technology .nav-dropdown__content .nav-dropdown__content-li .nav-dropdown__link-label-capital {
    font-size: 1.25875em;
}

.nav-dropdown.nav-d-technology .nav-dropdown__content .nav-dropdown__content-li .nav-dropdown__link-label {
    font-size: .5875em;
    height: 8.875em;
}

.nav-container {
    z-index: 1;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
    width: 100%;
    position: relative
}

.nav-center {
    flex: 0 auto
}

.menu-button__line {
    background-color: var(--color-light);
    width: 100%;
    height: 1px
}

.nav-dropdown__content-li {
    flex: 1
}

.nav-dropdown__content-li {
    transition: all var(--duration-normal) var(--cubic-default);
    transition-delay: 0.108s;
    opacity: 0;
    transform: translate(0px, 4em);
}

.nav-dropdown__content-li:nth-child(2) {
    transition-delay: 0.24s;
}

.nav-dropdown__content-li:nth-child(3) {
    transition-delay: 0.3s;
}

.nav-dropdown__content-li:nth-child(4) {
    transition-delay: 0.36s;
}

.nav-dropdown__content-li:nth-child(5) {
    transition-delay: 0.44s;
}

[data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__content-li {
    opacity: 1;
    transform: translate(0px, 0em);
}


.nav-dropdown {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    width: 100%;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    position: fixed;
    left: 0;
    right: 0
}

.nav-bg {
    /*background-color: #fff;*/
    width: 100%;
    height: 0;
    position: absolute;
    inset: 0% 0% auto
}

.nav-dropdown__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1)
}

.nav-dropdown__img.u-opacity-50 {
    opacity: .5
}

.nav-link {
    grid-column-gap: .625em;
    grid-row-gap: .625em;
    /*font-family: var(--mono-font);*/
    /*color: var(--color-neutral-400);*/
    color: #d3d3d3;
    letter-spacing: .04 6em;
    text-transform: uppercase;
    background-color: #0000;
    border-radius: .25em;
    justify-content: center;
    align-items: center;
    padding: .75em .625em;
    display: flex;
    position: relative;
    text-decoration: none;
    font-weight: 500;

}

.nav-link:hover {
    color: var(--color-light);
    filter: brightness(1.1);
}

.page-bg {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    background-color: #0000004d;
    width: 100%;
    height: 100vh;
    position: absolute;
    inset: 0% 0% auto
}

.nav-dropdown__img-overlay {
    z-index: 1;
    opacity: 2.25;
    background-image: linear-gradient(#0000, #0000 50%, #000);
    transition: opacity .2s cubic-bezier(.625, .05, 0, 1);
    position: absolute;
    inset: 0%
}

.nav-end {
    grid-column-gap: .75em;
    grid-row-gap: .75em;
    flex: 1;
    justify-content: flex-end;
    align-items: stretch;
    display: flex
}

.menu-button {
    /*grid-column-gap: .5em;*/
    /*grid-row-gap: .5em;*/
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    background-color: #434343;
    /*font-family: var(--mono-font);*/
    /*text-transform: uppercase;*/
    /*background-color: #5559;*/
    /*border-radius: .25em;*/
    /*flex-flow: row;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*height: 2.1875em;*/
    /*padding: 0 .75em;*/
    display: none;
    box-shadow: inset 0 0 0 0 transparent;
}

.menu-button:hover {
    box-shadow: inset 0 0 10px 0 #45454530;
}

.nav-end .menu-button {
    margin-right: .5rem;
}

.nav-dropdown__link-label {
    /*font-family: var(--mono-font);*/
    text-transform: uppercase;
    font-size: .875em;
    transition: transform .2s cubic-bezier(.625, .05, 0, 1);
    position: relative;
    height: 5.875em;
}

.nav-dropdown__link-inner .nav-dropdown__link-label span {
    /*font-size: 1.3875em;*/
    /*transition: transform .2s cubic-bezier(.625, .05, 0, 1);*/
    /*position: relative;*/
    /*line-height: .95rem;*/
    /*text-shadow: 0 0 1px rgba(0, 0, 0, 0.82);*/

    font-size: 1.34875em;
    transition: transform .2s cubic-bezier(.625, .05, 0, 1);
    position: relative;
    line-height: 1.65rem;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.82);
}

.nav-dropdown__link-label-capital {
    font-size: 1.5875em;
    transition: transform .2s cubic-bezier(.625, .05, 0, 1);
    position: relative;
    line-height: inherit;
    text-shadow: 0 0 1px black;
    font-weight: 800;
}

/*.nav-dropdown__link-inner .nav-dropdown__link-label span:first-child{*/

/*}*/
.nav-dropdown__link-inner .nav-dropdown__link-label {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

.nav-center__list {
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    display: flex
}

.nav-dropdown__link {
    padding: var(--gap-large) var(--gap-large) var(--gap-xlarge) var(--gap-xlarge);
    background-color: var(--color-dark);
    color: #fff;
    border-radius: .5em;
    flex-flow: column;
    flex: 1;
    justify-content: flex-end;
    align-items: stretch;
    height: 20em;
    display: flex;
    position: relative;
    overflow: hidden
}

.nav-dropdown__link {
    -webkit-clip-path: inset(0 round 0.5rem);
    clip-path: inset(0 round 0.5rem);
    transition: -webkit-clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-link__square {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: var(--color-neutral-400);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: .5em;
    height: .5em;
    display: block;
    position: relative
}

.nav-link__square.nav-button {
    background-color: var(--color-white)
}

.nav-start {
    grid-column-gap: 4em;
    grid-row-gap: 4em;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    display: flex
}

.border-bottom {
    background-color: #0000001a;
    width: 100%;
    height: 1px;
    display: none
}

.mobile-cta-wrap {
    font-size: 18px
}

.sm--show {
    display: none
}

.link:focus-visible {
    outline-offset: 0px;
    outline: 1px solid #efeeec
}

.menu-button-line__wrap {
    grid-column-gap: .25em;
    grid-row-gap: .25em;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 1em;
    display: flex;
    position: relative
}

.nav-dropdown__link-icon {
    width: 2em;
    height: 2em;
    margin-left: -.25em
}

.coming-soon {
    z-index: 2;
    grid-column-gap: .25em;
    grid-row-gap: .25em;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    white-space: nowrap;
    overflow-wrap: normal;
    border-radius: .25em;
    align-items: center;
    margin-bottom: .5em;
    padding: .25em;
    display: flex;
    position: absolute;
    bottom: 100%
}

.notification-bubble {
    background-color: var(--color-primary);
    color: var(--color-dark);
    border-radius: .25em;
    padding: .1em .2em;
    display: block;
    position: absolute;
    top: -.25em;
    right: 0
}

.notification-bubble.is-lg {
    padding-top: .15em
}

.notification_text {
    font-size: 10px
}

.notification_text.is-lg {
    font-size: 14px;
    font-weight: 500
}

.smd-wordmark {
    width: 100%;
    display: block;
    overflow: visible
}

.smd-wordmark.hidden {
    display: none
}

.nav-link__list-item {
    position: relative
}

@media screen and (max-width: 991px) {
    .button.nav-button:not(.button-contact-us) {
        height: 2.625em
    }

    .button-text.nav-button {
        font-size: 1em
    }

    .nav-inner {
        padding-top: 1.25em
    }

    .nav-link__label {
        font-size: 1em
    }

    .nav-container {
        padding-left: 1.25em;
        padding-right: 1.25em
    }

    .nav-link {
        padding-left: 1em;
        padding-right: 1em
    }
}

@media screen and (max-width: 767px) {

    .button.nav-button {
        display: none
    }

    .nav-dropdown__overflow {
        grid-template-rows: 0fr;
        width: 100%;
        display: grid;
        position: relative;
        overflow: hidden
    }

    .nav-inner {
        padding-top: .95em;
        padding-bottom: .95em
    }

    .nav-link__label {
        /*font-size: 1.375em*/
        font-size: 1.5375em;
        font-weight: 700;
        margin: 5px 0;
    }

    .nav-link__label__arrow {
        display: inline-flex;
    }

    .nav-link__label:hover {
        color: var(--color-dark)
    }

    .nav-logo {
        z-index: 1
    }

    .nav-dropdown__content {
        padding-bottom: var(--gap-xxlarge);
        grid-gap: .75em;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        padding: 2.5rem;
        grid-gap: 1.75em;
    }

    .nav-dropdown__overflow-inner {
        flex-flow: column;
        width: 100%;
        height: 1000000%;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .nav-center {
        z-index: 0;
        opacity: 0;
        visibility: hidden;
        height: 100dvh;
        position: absolute;
        top: 0;
        left: -1.25em;
        right: -1.25em;
        transform: translateY(1em)
    }

    .nav-dropdown {
        opacity: 100;
        pointer-events: auto;
        visibility: visible;
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
        inset: auto
    }

    .nav-bg {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        height: 0
    }

    .nav-link {
        grid-column-gap: .125em;
        grid-row-gap: .125em;
        color: var(--color-dark);
        letter-spacing: -.02em;
        justify-content: flex-start;
        /*align-items: flex-start;*/
        width: 100%;
        padding: 1em 1.25em;
        display: flex;
        align-items: center;
    }

    .nav-link:hover {
        color: var(--color-dark);
        filter: brightness(1.1);

    }

    .nav-end {
        z-index: 2;
        position: relative
    }

    .nav-contact-end {
        display: none !important;
    }

    .menu-button {
        /*background-color: var(--color-neutral-800);*/
        display: flex
    }

    .nav-dropdown__link-label {
        font-size: .875em
    }

    .nav-center__list {
        flex-flow: column;
        justify-content: flex-start;
        align-items: stretch;
        height: 100%;
        padding-top: 4em;
        padding-bottom: 2em;
        overflow: hidden scroll
    }

    .nav-dropdown__link {
        aspect-ratio: 1;
        height: auto
    }

    .nav-link__square {
        display: none
    }

    .border-bottom {
        display: block
    }

    .mobile-cta-wrap {
        padding: 1.25em
    }

    .sm--show {
        display: block
    }

    .notification-bubble {
        display: none
    }
}

@media screen and (max-width: 479px) {

    .nav-inner {
        grid-column-gap: var(--gap-size);
        grid-row-gap: var(--gap-size)
    }

    .nav-logo {
        width: 100%;
        max-width: 13em
    }

    .nav-end {
        grid-column-gap: .5em;
        grid-row-gap: .5em;
        flex: 0 auto
    }

    .nav-dropdown__link-label {
        font-size: .75em
    }

    .nav-dropdown__link {
        padding: .75em
    }

    .nav-dropdown__content {
        padding: 1.5rem;
        grid-gap: .875em;
    }
}

[data-dropdown-toggle="open"] + .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-dropdown {
    transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default);
}

.nav-bg {
    transition: height var(--duration-normal) var(--cubic-default);
}


@media screen and (min-width: 768px) {
    :is(header:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])),
        header:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]) + .nav-dropdown)) .nav-bg {
        height: var(--nav-bg-height);
    }
}

@media screen and (max-width: 767px) {
    body[data-scrolling-started="true"] .overlay.hero-product-media {
        opacity: .35 !important;
    }
}

@media screen and (min-width: 768px) {
    body[data-scrolling-started="true"] .header .nav-inner {
        padding: calc(var(--container-padding) / 2) 0;
    }
}

.header .nav-inner {
    transition: padding .4s cubic-bezier(.625, .05, 0, 1);
}

@media screen and (min-width: 768px) {

    :is(body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])),
                body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown)) {

        .nav-link span, .nav-button span {
            transition-delay: 0s !important;
        }

        .nav-bg {
            height: var(--nav-bg-height);
        }

        .page-bg {
            opacity: 1;
        }

        .nav {
            color: var(--color-dark);
        }

        .nav-link,
        .button-contact-us {
            color: var(--color-dark);
            /*filter: brightness(1.51);*/
        }

        .nav-link:hover,
        .button-contact-us:hover {
            color: var(--color-dark);
            filter: contrast(0.45);
        }

        .nav-link__square {
            background-color: var(--color-dark);
        }

        .button.nav-button {
            color: var(--color-dark);
        }

        .nav-button .button-bg {
            background-color: var(--color-dark);
            opacity: .1;
        }

        .nav-center .button {
            color: var(--color-light);
        }

        .nav-logo.black-logo {
            opacity: 1;
            /*display: inherit;*/
        }

        .nav-logo.white-logo {
            /*display: none;*/
            opacity: 0;
        }

    }

    .nav-link:hover .nav-link__square {
        background-color: var(--color-white);
    }
}

.nav-dropdown__content-li {
    /* transition: all var(--duration-normal) var(--cubic-default); */
    /* transition-delay: 0.18s; */
    opacity: 0;
    transform: translate(0px, 4em);
}

.nav-dropdown__content-li:nth-child(2) {
    transition-delay: 0.24s;
}

.nav-dropdown__content-li:nth-child(3) {
    transition-delay: 0.3s;
}

.nav-dropdown__content-li:nth-child(4) {
    transition-delay: 0.36s;
}

.nav-dropdown__content-li:nth-child(5) {
    transition-delay: 0.44s;
}

.nav-dropdown__content-li:nth-child(6) {
    transition-delay: 0.50s;
}

.nav-dropdown__content-li:nth-child(7) {
    transition-delay: 0.55s;
}

.nav-dropdown__content-li:nth-child(8) {
    transition-delay: 0.60s;
}

[data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__content-li {
    opacity: 1;
    transform: translate(0px, 0em);
}

.nav-dropdown__link {
    -webkit-clip-path: inset(0 round 0.5rem);
    clip-path: inset(0 round 0.5rem);
    transition: -webkit-clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/*@media (hover: hover) and (pointer: fine) {

    a.nav-dropdown__link:hover .nav-dropdown__img,
    a.nav-dropdown__link:focus-visible .nav-dropdown__img {
        transform: scale(1.105) translateZ(0);
    }

    a.nav-dropdown__link:hover,
    a.nav-dropdown__link:focus-visible {
        -webkit-clip-path: inset(0.425rem round 1.25rem);
        clip-path: inset(0.425rem round 1.25rem);
    }
}*/
/* Definimos la transición en el estado base para que sea fluida al entrar y salir */
a.nav-dropdown__link {
    display: block;
    overflow: hidden;
    transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* Estado inicial: inset 0 sin recorte */
    clip-path: inset(0 round 0.25rem);
}

a.nav-dropdown__img {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    a.nav-dropdown__link:hover,
    a.nav-dropdown__link:focus-visible {
        /* Inset sutil y profesional: el 2px crea un marco interno elegante */
        clip-path: inset(2px round 0.5rem);
    }

    a.nav-dropdown__link:hover .nav-dropdown__img,
    a.nav-dropdown__link:focus-visible .nav-dropdown__img {
        /* Escalado más suave para no marear al usuario */
        transform: scale(1.08) translateZ(0);
    }
}

@media screen and (max-width: 767px) {
    :root {
        --nav-bg-height: 100dvh;
    }

    .nav-logo {
        opacity: 100;
        transition: opacity var(--duration-fast) var(--cubic-default);
    }

    .nav-center {
        transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default);
    }

    .menu-button__line {
        transition: all var(--duration-normal) var(--cubic-default);
    }

    .nav-dropdown__overflow {
        transition-delay: var(--duration-normal);
    }

    .nav-dropdown .nav-dropdown__content-li {
        transition-delay: var(--duration-normal);
    }

    .nav-link {
        color: var(--color-dark);
    }

    .nav-link:hover .nav-link__label__arrow {
        transform: translateX(15px);
    }

    /* ———— STYLES WHEN MENU IS OPEN ———— */
    :is([data-menu-status="open"]) {
        color: var(--color-dark);

        .nav-logo {
            opacity: 0;
            visibility: hidden;
        }

        .nav-dropdown__overflow {
            grid-template-rows: 1fr;
            transition-delay: 0s;
        }

        .nav-dropdown__content-li {
            opacity: 1;
            transform: translate(0em, 0px);
            transition-delay: 0s;
        }

        .menu-button {
            color: var(--color-light);
        }

        .menu-button__line:nth-of-type(1) {
            transform: translate(0px, 0.125em) rotate(135deg);
        }

        .menu-button__line:nth-of-type(2) {
            transform: translate(0px, -0.175em) rotate(-135deg);
        }

        .nav-bg {
            height: var(--nav-bg-height);
        }

        .page-bg {
            opacity: 1;
        }

        .nav-center {
            opacity: 1;
            visibility: visible;
            transform: translate(0px, 0em);
            transition-delay: 0.1s;
        }
    }
}

/*v2*/

/*contact us*/
/* From Uiverse.io by Creatlydev */
.button-contact.button-contact-us {
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    border: none;
    cursor: pointer;
    align-items: baseline;
    gap: 0.5rem;
    /* background-color: var(--clr); */
    color: #fff;
    border-radius: 10rem;
    font-weight: 500;
    padding: 0.5rem 1.05rem;
    padding-left: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.3s;
    font-size: max(.52em, 13px);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.button__icon-wrapper {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    position: relative;
    color: var(--clr);
    /*background-color: #fff;*/
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.button-contact.button-contact-us:hover {
    /*background-color: #000;*/
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md)) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: blur(var(--blur-md)) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    background-color: color-mix(in oklab, var(--color-black) 53%, transparent);
}

.button-contact.button-contact-us:hover .button__icon-wrapper {
    color: #000;
}

.button__icon-svg--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}

.button-contact-us:hover .button__icon-svg:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}

.button-contact-us:hover .button__icon-svg--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}

/*v3*/
.shadow--header {
    --color--semantic--surface: black;
    background-image: linear-gradient(180deg, var(--color--semantic--surface), transparent);
    pointer-events: none;
    height: 200%;
    position: absolute;
    inset: 0% 0% auto;
}


/*v4*/


/* Font base */
body {
    /*font-family: "Inter", "Satoshi", "Helvetica Neue", Arial, sans-serif;*/
    /*line-height: 1.5;*/
    /*color: #111;*/
}

/* Breakpoints */
@media (min-width: 640px) {
    /* sm */
}

@media (min-width: 768px) {
    /* md */
}

@media (min-width: 1024px) {
    /* lg */
}

@media (min-width: 1280px) {
    /* xl */
}

@media (min-width: 1536px) {
    /* 2xl */
}

/* ---------- HEADINGS ---------- */

h1, .h1 {
    font-weight: 700;
    line-height: 1.2;
    font-size: 2rem; /* sm default */
}

@media (min-width: 640px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
}

/* sm */
@media (min-width: 768px) {
    h1, .h1 {
        font-size: 3rem;
    }
}

/* md */
@media (min-width: 1024px) {
    h1, .h1 {
        font-size: 3.5rem;
    }
}

/* lg */
@media (min-width: 1280px) {
    h1, .h1 {
        font-size: 4rem;
    }
}

/* xl */
@media (min-width: 1536px) {
    h1, .h1 {
        font-size: 4.5rem;
    }
}

/* 2xl */

h2, .h2 {
    font-weight: 700;
    line-height: 1.25;
    font-size: 1.75rem;
}

@media (min-width: 640px) {
    h2, .h2 {
        font-size: 2rem;
    }
}

@media (min-width: 768px) {
    h2, .h2 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    h2, .h2 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1280px) {
    h2, .h2 {
        font-size: 2.75rem;
    }
}

@media (min-width: 1536px) {
    h2, .h2 {
        font-size: 3rem;
    }
}

h3, .h3 {
    font-weight: 600;
    line-height: 1.3;
    font-size: 1.5rem;
}

@media (min-width: 640px) {
    h3, .h3 {
        font-size: 1.75rem;
    }
}

@media (min-width: 768px) {
    h3, .h3 {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    h3, .h3 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1280px) {
    h3, .h3 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1536px) {
    h3, .h3 {
        font-size: 2.75rem;
    }
}

h4, .h4 {
    font-weight: 600;
    line-height: 1.3;
    font-size: 1.25rem;
}

@media (min-width: 640px) {
    h4, .h4 {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    h4, .h4 {
        font-size: 1.75rem;
    }
}

@media (min-width: 1024px) {
    h4, .h4 {
        font-size: 2rem;
    }
}

@media (min-width: 1280px) {
    h4, .h4 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1536px) {
    h4, .h4 {
        font-size: 2.5rem;
    }
}

h5, .h5 {
    font-weight: 600;
    line-height: 1.35;
    font-size: 1.125rem;
}

@media (min-width: 640px) {
    h5, .h5 {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    h5, .h5 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    h5, .h5 {
        font-size: 1.75rem;
    }
}

@media (min-width: 1280px) {
    h5, .h5 {
        font-size: 2rem;
    }
}

@media (min-width: 1536px) {
    h5, .h5 {
        font-size: 2.25rem;
    }
}

h6, .h6 {
    font-weight: 600;
    line-height: 1.4;
    font-size: 1rem;
}

@media (min-width: 640px) {
    h6, .h6 {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    h6, .h6 {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    h6, .h6 {
        font-size: 1.375rem;
    }
}

@media (min-width: 1280px) {
    h6, .h6 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1536px) {
    h6, .h6 {
        font-size: 1.625rem;
    }
}

/* ---------- PARAGRAPHS ---------- */

p, .paragraph {
    font-weight: 400;
    line-height: 1.6;
    font-size: 1rem;
}

footer .paragraph {
    font-size: 0.9rem;
}

@media (min-width: 640px) {
    p, .paragraph {
        font-size: 1.0625rem;
    }

    footer .paragraph {
        font-size: 0.90625rem;
    }
}

/* 17px */
@media (min-width: 768px) {
    p, .paragraph {
        font-size: 1.125rem;
    }

    footer .paragraph {
        font-size: 0.9125rem;
    }
}

/* 18px */
@media (min-width: 1024px) {
    p, .paragraph {
        font-size: 1.1875rem;
    }

    footer .paragraph {
        font-size: 0.91875rem;
    }
}

/* 19px */
@media (min-width: 1280px) {
    p, .paragraph {
        font-size: 1.25rem;
    }

    footer .paragraph {
        font-size: 0.925rem;
    }
}

/* 20px */
@media (min-width: 1536px) {
    p, .paragraph {
        font-size: 1.3125rem;
    }

    footer .paragraph {
        font-size: 0.93125rem;
    }
}

/* 21px */

/*v5*/

.text-title-body {
    font-family: var(--satoshi-black) !important;

    -webkit-text-fill-color: transparent;
    color: unset;
    background: linear-gradient(to bottom right, #fff 55%, rgba(255, 255, 255, 0.71));
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-title {
    font-family: var(--satoshi-black) !important;

    -webkit-text-fill-color: transparent;
    color: unset;
    background: linear-gradient(to bottom right, #fff 65%, rgba(255, 255, 255, 0.91));
    -webkit-background-clip: text;
    background-clip: text;
}


body.light-mode-activated .text-subtitle-1-body {
    font-family: var(--satoshi-bold) !important;
}

body.light-mode-activated .text-body-1-body {
    font-family: var(--inter-SemiBold);
}


body.light-mode-activated .text-lightmode-inter-medium {
    font-family: var(--inter-Medium);
}

body.light-mode-activated .text-lightmode-inter-regular {
    font-family: var(--inter-Regular);
}

body.light-mode-activated .text-lightmode-inter-bold {
    font-family: var(--inter-Bold);
}

body.light-mode-activated .wwb-lightmode {
    border-color: black !important;
}

body.light-mode-activated .wwb-lightmode .gfiwd-item,
body.light-mode-activated .wwb-lightmode .gfiwd-item video,
body.light-mode-activated .wwb-lightmode .gfiwd-item img,
body.light-mode-activated .ρd__div img,
body.light-mode-activated .keen-slider__slide,
body.light-mode-activated .keen-slider div,
body.light-mode-activated .slinn-slider__slide,
body.light-mode-activated .slinn-slider div {
    border-radius: 2rem;
}

/*v7*/

.bg-radial-gradient-color,
.bg-radial-gradient-color-2,
.bg-radial-gradient-color-3 {
    overflow: hidden;
}

.bg-radial-gradient-color:after {
    /*content: "";*/
    background: radial-gradient(circle, rgba(11, 52, 113, 0.28) 0%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.bg-radial-gradient-color-left-2:after {
    content: "";
    /*background: radial-gradient(circle, rgba(11, 52, 113, 0.28) 0%, rgba(0, 0, 0, 0) 100%);*/
    background: radial-gradient(circle 817px at 40% 417px, rgb(0 63 107 / 28%) 0, rgba(38, 6, 53, 0) 100%);
    /*background: radial-gradient(circle, rgba(11, 52, 113, 0.22) 0%, rgba(0, 0, 0, 0) 100%);*/
    position: absolute;
    top: 0;
    left: -779px;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.bg-radial-gradient-color-left-3:after {
    content: "";
    /*background: radial-gradient(circle, rgba(11, 52, 113, 0.28) 0%, rgba(0, 0, 0, 0) 100%);*/
    background: radial-gradient(circle 817px at 40% 417px, rgb(84 0 119 / 26%) 0, rgba(38, 6, 53, 0) 100%);
    /*background: radial-gradient(circle, rgba(11, 52, 113, 0.22) 0%, rgba(0, 0, 0, 0) 100%);*/
    position: absolute;
    top: 0;
    left: -779px;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.bg-radial-gradient-color-2:after {
    content: "";
    /*background: radial-gradient(circle, rgba(11, 52, 113, 0.22) 0%, rgba(0, 0, 0, 0) 100%);*/
    position: absolute;
    top: 0;
    left: -779px;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 817px at 40% 417px, rgba(28, 0, 107, .28) 0, rgba(38, 6, 53, 0) 100%);
}

.bg-radial-gradient-color-3:after {
    /*content: "";*/
    /* background: radial-gradient(circle, rgba(11, 52, 113, 0.22) 0%, rgba(0, 0, 0, 0) 100%); */
    position: absolute;
    top: 25%;
    right: -1300px;
    /* left: 0; */
    bottom: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 797px at 40% 417px, rgba(2, 81, 107, 0.28) 0, rgba(38, 6, 53, 0) 100%);
}

.bg-radial-gradient-color-4:before {
    animation-direction: alternate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-name: example;
    background: radial-gradient(rgba(25, 25, 28, 0) 50%, #19191c 80%), conic-gradient(#9c3cf7 0, #19191c 15.2%, #19191c 18.2%, #1e1ae8 20.5%, #19191c 30.2%, #19191c 50%, #0e0ab4 56.5%, #1e1ae8 59.4%, #060551 66.2%, #101057 72.9%, #242473 85.1%, #1e1ae8 89.1%, #0a06b7 90.6%, #19191c 93.7%, #9c3cf7 100%);
    border-bottom: 4px solid #19191c;
    content: "";
    height: 350%;
    opacity: .4;
    position: absolute;
    right: -125%;
    top: -120%;
    width: 350%
}

@keyframes example {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(20deg)
    }
}


/*V8*/


/* ---------------------------------- */
/* Definición de Keyframes   */
/* ---------------------------------- */

/* Animación de Giro Suave: Hace girar el conic-gradient 360 grados */
@keyframes border-spin {
    to {
        --angle: 360deg; /* La variable CSS que controla la rotación */
    }
}

/* Animación de Movimiento Lateral Sutil (mantiene tu animación original, pero más corta) */
@keyframes border-flow-subtle {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%; /* Solo de 0 a 100, la repetición lo hace volver */
    }
}


/* ---------------------------------- */
/* Estilos Base            */
/* ---------------------------------- */
.article-sft-path {
    /* 1. Definición de la variable para el ángulo inicial */
    --angle: 0deg;

    /* Estilos del borde y fondo */
    border: 2px solid transparent;
    border-radius: 0.75em;

    background: linear-gradient(#000000, #000000) padding-box,
        /* 2. El gradiente cónico usa la variable --angle */ conic-gradient(
        from var(--angle), /* Afectado por @keyframes border-spin */ rgba(255, 183, 197, 0.6), /* Aumento la opacidad para que se vea mejor */ rgba(186, 230, 253, 0.5),
        rgba(196, 181, 253, 0.5),
        rgba(255, 221, 175, 0.6),
        rgba(255, 183, 197, 0.6)
    ) border-box;

    background-size: 300% 300%;

    /* Aplicar la animación de Giro Suave siempre (Giro de colores) */
    animation: border-spin 12s linear infinite, /* Lenta, sutil y constante */ border-flow-subtle 6s linear alternate infinite; /* Movimiento de fondo que oscila */

    /* Filtro de Matiz sutil (Hue-Rotate) */
    filter: hue-rotate(0deg);

    opacity: 0.96;
    transition: all 0.3s ease;
    padding: 0.25rem;
}

/* ---------------------------------- */
/* Efecto Hover             */
/* ---------------------------------- */
.article-sft-path:hover {
    opacity: 1;

    /* Aumenta la velocidad del giro en hover para hacerlo más notable */
    animation: border-spin 6s linear infinite, /* ¡Doble de rápido! */ border-flow-subtle 4s linear alternate infinite;

    /* Añade un sutil efecto de cambio de color al matiz en hover */
    filter: hue-rotate(30deg);
}

/* Estilos para la imagen (se mantienen igual) */
.article-sft-path img {
    border-radius: 0.75em;
    display: block;
    width: 100%;
    height: auto;
}


/*!*v9*! ip-cores*/

.ip-core-card-sl_sub {
    /*background: aqua;*/
    width: 100%;
    max-width: 616px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: max(6.5%, 5rem);
}

@media screen and (max-width: 600px) {
    .ip-core-card-sl_sub {
        padding: 3.5%;

    }

    .ipc-core-card-img, .ipc-core-card-text {
        width: calc(100% - 3.5%);
        height: calc(100% - 3.5%);
    }
}

.ip-core-card-sl_sub:before {
    border: 1px solid rgba(134, 191, 242, .81);
}

.ip-core-card-sl_sub:after {
    background: hsla(0, 0%, 100%, .002);
    box-shadow: inset 0 1px 1px rgba(199, 211, 234, .12), inset 0 24px 48px rgba(199, 211, 234, .05);
}

.ipc-core-card-img, .ipc-core-card-text {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% - max(6.5%, 5rem));
    height: calc(100% - max(6.5%, 5rem));
}

.ip-core-card-sl_sub_img img {
    object-fit: cover;
    object-position: center;
}

.ipc-core-card-text h6,
.ipc-core-card-text h5,
.ipc-core-card-text p {
    text-shadow: 0 0px 11px #000000;
}


.power-feature-background-holder-copy {
    opacity: 1;
    width: 150%;
    height: 150%;
    position: absolute;
    top: -25%;
    left: -25%;
    filter: blur(5px);
}

.power-backbround {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Animación de rotación continua */
@keyframes rotateZInfinite {
    0% {
        transform: rotateZ(16.236deg);
    }
    100% {
        transform: rotateZ(376.236deg); /* 360° más que el inicial */
    }
}

/* Clase para iniciar la animación */
.rotate-animate {
    animation: rotateZInfinite 4s linear infinite;
}

:root {
    /*--card-color: rgb(25, 25, 25);*/
    --card-color: #121212f2;
}


.card-anim {
    background-color: var(--card-color);
    border-radius: 0.75em;
    /*cursor: pointer;*/
    height: 240px;
    position: relative;
    overflow: hidden;
    width: 90%;
    height: auto;
    height: auto;
    margin: auto;
}

.card-anim:hover:before {
    opacity: 1;
}

.card-anim:before {
    background: linear-gradient(
        45deg,
        transparent 5%,
            /*rgb(255, 215, 137) 50%,*/ #DAEBF7 50%,
        transparent 99%
    );
    border-radius: inherit;
    content: "";
    inset: 0px;
    opacity: 0;
    position: absolute;
    transition: opacity 400ms;
    z-index: 0;
}

.card-anim-content {
    background-color: var(--card-color);
    border-radius: inherit;
    /*display: grid;*/
    inset: 1px;
    /*padding: 3.5px;*/
    position: absolute;
    /*border: 0.1px solid rgba(218, 235, 247, 0.24);*/
    border: 0.1px solid rgb(12 12 12);

    overflow: hidden;
    margin: auto;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover: aparece y empieza la rotación */
.card-anim:hover::before {
    opacity: .61;
    animation: rotateConic 6s linear infinite;
}

/* Animación de rotación del gradiente circular */
@keyframes rotateConic {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

:root {
    /*--card-color: rgb(25, 25, 25);*/
}


.multiple-cards-wrapper {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(3, 1fr);
    /*max-width: 1000px;*/
    max-width: 100%;
    padding: 1em 0em;
    place-self: center;
    position: relative;
    width: calc(100% - 2em);
    z-index: 2;
}

.multiple-cards-wrapper.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.m-card-2 {
    background-color: var(--card-color);
    border-radius: 0.75em;
    /*cursor: pointer;*/
    height: 240px;
    position: relative;
}

.m-card-2:hover:before {
    opacity: 1;
}

.m-card-2:before {
    background: linear-gradient(
        45deg,
        transparent 5%,
        #e7f0ff 50%,
        transparent 99%
    );
    border-radius: inherit;
    content: "";
    inset: 0px;
    opacity: 0;
    position: absolute;
    transition: opacity 400ms;
    z-index: 0;
}

.m-card-2-content {
    background-color: var(--card-color);
    border-radius: inherit;
    display: grid;
    inset: 1px;
    padding: 1em;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    gap: .6rem;
}

.m-card-2-content.m-icon-above {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}


.m-card-2:hover > .m-card-2-content > .m-card-2-icon {
    opacity: 1;
    filter: brightness(1.25);

    /*transform: scale(1.1) translateY(-5%);*/
}

.m-card-2-icon {
    color: rgba(255, 255, 255, 0.25);
    font-size: 6em;
    opacity: 0.8;
    place-self: center;
    transition: transform 250ms, opacity 250ms;
    height: 80%;
    min-width: 118px;

}

.m-card-2-text {
    font-size: clamp(1.5rem, 2rem, 1.25vw);
    line-height: normal;
    cursor: default;
    /*padding-inline: .5rem;*/
    word-break: normal;
}

.m-card-2.span-2 {
    grid-column: span 2;
}

.m-card-2.span-3 {
    grid-column: span 3;
}

.m-card-2.span-4 {
    grid-column: span 4;
}

@media (max-width: 1024px) {
    .multiple-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 672px) {
    .multiple-cards-wrapper, .multiple-cards-wrapper.grid-4 {
        grid-template-columns: 1fr;
    }

    .m-card-2.span-2,
    .m-card-2.span-3,
    .m-card-2.span-4 {
        grid-column: span 1;
    }

}

.chip-bg-shadow {
    transition: all 350ms;
}

.power-feature-card-container:hover .chip-bg-shadow {
    opacity: 0;
}


/*v10*/
.\3c1pNpli {
    display: grid;
    position: relative;
    align-content: flex-start;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    grid-template-columns: var(--plsmc-viewport-gap) 1fr minmax(0, var(--plsmc-wide-chunk)) min(var(--plsmc-standard-width), calc(100% - var(--plsmc-viewport-gap) - var(--plsmc-viewport-gap))) minmax(0, var(--plsmc-wide-chunk)) 1fr var(--plsmc-viewport-gap)
}

.\3c1plGQ {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 1;
    grid-column-start: 1 !important;
    grid-column-end: -1 !important
}

.\3c1vlQsc {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: flex-start;
    align-items: center;
    min-width: 0
}

.\3c1mRobf {
    animation: none;
    display: flex;
    width: 100%;
    height: auto;
    align-items: stretch;
    flex-shrink: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 105px;
    min-width: 0;
    --plsmc-rc-col-gap: 105px
}

@media (min-width: 0px) and (max-width: 1024px) {
    .\3c1mRobf {
        animation: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 32px;
        min-width: 0;
        --plsmc-rc-col-gap: 105px
    }
}

.\3c1mRobf2 {
    animation: none;
    display: flex;
    width: 100%;
    height: auto;
    align-items: stretch;
    flex-shrink: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 105px;
    min-width: 0;
    --plsmc-rc-col-gap: 105px
}


@media (min-width: 0px) and (max-width: 50px) {
    .\3c1mRobf2 {
        animation: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 32px;
        min-width: 0;
        --plsmc-rc-col-gap: 105px
    }
}

.\3c1j4Nft {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    row-gap: 24px;
    min-width: 0
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1j4Nft {
        animation: none
    }
}

.\3c1 c5YrO {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 420px;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 0
}

.\3c1 ap5At {
    animation: none;
    font-size: var(--token-VrJOj8LuymDM)
}

.\3c1y5YpR {
    animation: none;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    font-size: var(--token-3tLrZQMJqqw);
    color: #ffffffb3;
    min-width: 0
}

.\3c1_78QOa {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    min-width: 0
}

.\3c1mi0B {
    animation: none;
    display: flex;
    width: 100%;
    height: auto;
    align-items: stretch;
    flex-shrink: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 105px;
    min-width: 0;
    --plsmc-rc-col-gap: 105px
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1mi0B {
        animation: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        row-gap: 32px;
        min-width: 0;
        --plsmc-rc-col-gap: 105px
    }
}

.\3c1k7FYg {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    min-width: 0
}

.\3c1_8YKkk {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    row-gap: 24px;
    min-width: 0
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1_8YKkk {
        animation: none
    }
}

.\3c1 fVk7H {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 420px;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 0
}

.\3c1os9Im {
    animation: none;
    font-size: var(--token-VrJOj8LuymDM)
}

.\3c1rcbF7 {
    animation: none;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    font-size: var(--token-3tLrZQMJqqw);
    color: #ffffffb3;
    min-width: 0
}

.\3c1lzjpe {
    animation: none;
    display: flex;
    width: 100%;
    height: auto;
    align-items: stretch;
    flex-shrink: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 105px;
    min-width: 0;
    --plsmc-rc-col-gap: 105px
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1lzjpe {
        animation: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 32px;
        min-width: 0;
        --plsmc-rc-col-gap: 105px
    }
}

.\3c1 ccVac {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    row-gap: 24px;
    min-width: 0
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1 ccVac {
        animation: none
    }
}

.\3c1 fcrXi {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 420px;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 0
}

.\3c1 c6Ii8 {
    animation: none;
    font-size: var(--token-VrJOj8LuymDM);
    padding-bottom: 0;
    padding-right: 0
}

.\3c1 eRXuY {
    animation: none;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    font-size: var(--token-3tLrZQMJqqw);
    color: #ffffffb3;
    min-width: 0
}

.\3c1xiLch {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    min-width: 0
}

.\3c1 ciOj {
    animation: none;
    display: flex;
    width: 100%;
    height: auto;
    align-items: stretch;
    flex-shrink: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 105px;
    min-width: 0;
    --plsmc-rc-col-gap: 105px
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1 ciOj {
        animation: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        row-gap: 32px;
        min-width: 0;
        --plsmc-rc-col-gap: 105px
    }
}

.\3c1_8TGkD {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    min-width: 0
}

.\3c1nyC3O {
    animation: none;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    row-gap: 24px;
    min-width: 0
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1nyC3O {
        animation: none
    }
}

.\3c1iU1Sk {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 420px;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 0
}

.\3c1qlEqC {
    animation: none;
    font-size: var(--token-VrJOj8LuymDM)
}

.\3c1qeiH1 {
    animation: none;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    font-size: var(--token-3tLrZQMJqqw);
    color: #ffffffb3;
    min-width: 0
}

.\3c1nHyba {
    display: grid;
    position: relative;
    align-content: flex-start;
    justify-items: center;
    width: 100%;
    min-width: 0;
    grid-template-columns: var(--plsmc-viewport-gap) 1fr minmax(0, var(--plsmc-wide-chunk)) min(var(--plsmc-standard-width), calc(100% - var(--plsmc-viewport-gap) - var(--plsmc-viewport-gap))) minmax(0, var(--plsmc-wide-chunk)) 1fr var(--plsmc-viewport-gap);
    padding: 4rem 0px
}

.\3c1_1XVm5 {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    z-index: 1;
    grid-column-start: 1 !important;
    grid-column-end: -1 !important
}

.\3c1o4JP {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    max-width: 100%;
    column-gap: 64px;
    min-width: 0
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1o4JP {
        display: flex;
        flex-direction: column;
        width: 100%;
        row-gap: 32px;
        column-gap: 0px
    }
}

.\3c1scjLd {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    max-width: 450px
}

@media (min-width: 0px) and (max-width: 640px) {
    .\3c1scjLd {
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        min-width: 0
    }
}

.\3c1 fgnOw {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0
}

.\3c1_2FvUm {
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0
}

.\3c1msvpI {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0
}

.\3c1gau0X {
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0
}

.\3c1_52N6J {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    font-family: Inter, sans-serif;
    min-width: 0
}


/* Estilo de la nube */
.floating-cloud {
    position: absolute;
    width: 450px;
    height: 450px;
    pointer-events: none;
    top: 0;
    left: 0;
    border-radius: 50%;
    opacity: 0.55;
    filter: blur(40px);
    background: radial-gradient(circle at 30% 30%, rgba(255, 0, 150, 0.6), rgba(0, 200, 255, 0.4), rgba(255, 255, 0, 0.3));
    transition: background 10s linear; /* transición suave de color */
}


@keyframes cloudColors {
    0% {
        background: radial-gradient(circle at 30% 30%, rgba(255, 0, 150, 0.6), rgba(0, 200, 255, 0.4), rgba(255, 255, 0, 0.3));
    }
    50% {
        background: radial-gradient(circle at 60% 30%, rgba(0, 255, 120, 0.6), rgba(0, 150, 255, 0.4), rgba(255, 0, 70, 0.3));
    }
    100% {
        background: radial-gradient(circle at 30% 70%, rgba(255, 140, 0, 0.6), rgba(255, 0, 200, 0.4), rgba(0, 255, 255, 0.3));
    }
}

@keyframes cloudDrift {
    0% {
        transform: translate(-20%, -20%);
    }
    50% {
        transform: translate(40%, 30%);
    }
    100% {
        transform: translate(-10%, 50%);
    }
}

#container_next_step_inner {
    /*background: #0000000d!important;*/
    background: rgba(134, 191, 242, .01) !important;
    box-shadow: inset 0px 20px 20px 20px rgba(22, 22, 22, 0.38), inset 0px -20px 20px 20px rgba(2, 2, 2, 0.36), inset -20px 0px 20px 20px rgba(4, 4, 4, 0.44), inset 20px 0px 20px 20px rgba(26, 26, 26, 0.29);
}

/*    #container_next_step_inner:before {
        border: 1px solid rgba(134, 191, 242, var(--border-opacity));
    }
    #container_next_step_inner:after {
        background: hsla(0, 0%, 100%, .002);
        box-shadow: inset 0 1px 1px rgba(199, 211, 234, .12), inset 0 24px 48px rgba(199, 211, 234, .05);
    }*/


/*V11*/
.magic-box {
    position: relative;
}

.magic-box::before {
    content: "";
    position: absolute;
    inset: 0;
    /* El gradiente sigue las variables --x y --y */
    background: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(248, 253, 255, 0.15) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.6s ease; /* Desvanecimiento suave al salir */
    pointer-events: none;
}

.magic-box.active::before {
    opacity: 0.53;
    transition: opacity 0.2s ease; /* Aparición más rápida al entrar */
}

/*V12*/
#css_video_wrapper[data-play="0"] .css-video-paused-icon,
#css_video_wrapper[data-play="1"] .css-video-play-icon {
    display: none;
}

#myProgress {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    /*border-radius: 5px;*/
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    backdrop-filter: blur(3px);
}

#myProgress:hover {
    opacity: 1;
}

#myProgress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

#myProgress::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

#myPlayButton svg {
    fill: white;
    left: 0.5px;
    position: relative;
}


/**************************
   Micromodal
   Mobile custom styles for individual modals
**************************/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .modal__container {
        width: 90% !important;
        min-width: 90% !important;
    }

    @supports (display: flex) {
        .modal__container {
            width: 90% !important;
            min-width: 90% !important;
            height: 85vh;
        }
    }

    .modal__header {
        padding: 20px;
    }

    .modal-content-content {
        padding: 20px;
    }

    .modal__content {
        -webkit-overflow-scrolling: touch;
    }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide .modal__overlay {
    padding-top: 12rem;
}

/* Entradas */
.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn 0.4s cubic-bezier(0, 0, 0.2, 1);
}

/* Salidas */
.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut 0.3s cubic-bezier(0.4, 0, 1, 1);
}

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(20px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

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

body:has(.modal.is-open) {
    overflow: hidden;
}

body:has(.modal.is-open) .modal__overlay {
    overflow: auto;
}


/*
custom-scrollbar
*/
.custom-scrollbar::-webkit-scrollbar,
.custom-scrollbar div::-webkit-scrollbar,
.custom-scrollbar main::-webkit-scrollbar {
    width: 0.5rem; /* w-2 */
}

.custom-scrollbar::-webkit-scrollbar-track,
.custom-scrollbar div::-webkit-scrollbar-track,
.custom-scrollbar main::-webkit-scrollbar-track {
    background-color: #18181b; /* zinc-900 */
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.custom-scrollbar div::-webkit-scrollbar-thumb,
.custom-scrollbar main::-webkit-scrollbar-thumb {
    background-color: #3f3f46; /* zinc-700 */
    border-radius: 9999px; /* rounded-full */
}

v
.custom-scrollbar:hover::-webkit-scrollbar-thumb,
.custom-scrollbar div:hover::-webkit-scrollbar-thumb,
.custom-scrollbar main:hover::-webkit-scrollbar-thumb {
    background-color: #52525b; /* zinc-600 */
}


/*disables fake*/
.input-fake-disabled {
    /*background-color: #efefef !important;*/
    /*color: #545454;*/
    pointer-events: none;
    cursor: not-allowed;
    outline: none;
    opacity: 0.79;
    box-shadow: inset -2px 3px 16px 9px #183f749e;
    -webkit-appearance: none;
    -moz-appearance: none;

}


/*tooltip*/
[tooltip] {
    /*margin: 20px 60px;*/
    position: relative;
    display: inline-block;
}

[tooltip]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    z-index: 99;
    opacity: 0;
}

[tooltip-position='left']::before {
    left: 0%;
    top: 50%;
    margin-left: -12px;
    transform: translatey(-50%) rotate(-90deg)
}

[tooltip-position='top']::before {
    left: 50%;
}

[tooltip-position='buttom']::before {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[tooltip-position='right']::before {
    left: 100%;
    top: 50%;
    margin-left: 1px;
    transform: translatey(-50%) rotate(90deg)
}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%) translateY(-100%);
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    text-align: center;
    color: #fff;
    /*padding: 4px 2px;*/
    font-size: 12px;
    min-width: 120px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index: 99;
    opacity: 0;
}

[tooltip-position='left']::after {
    left: 0%;
    top: 50%;
    margin-left: -8px;
    transform: translateX(-100%) translateY(-50%);
}

[tooltip-position='top']::after {
    left: 50%;
}

[tooltip-position='buttom']::after {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(0%);
}

[tooltip-position='right']::after {
    left: 100%;
    top: 50%;
    margin-left: 8px;
    transform: translateX(0%) translateY(-50%);
}

[tooltip]:hover::after, [tooltip]:hover::before {
    opacity: 1
}