html {
    font-size: calc(100vw / 1920 * 10);
}

body {
    width: 100svw;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0;
}

* {
    line-height: 100%;
    font-family: var(--sans);
    box-sizing: border-box;
    color: var(--color);
    -webkit-font-smoothing: antialiased;
    font-weight: 100;
}

button {
    border: none;
    background: transparent;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;

}

section {
    padding: var(--gap-section) 0;
    position: relative;
    display: block;
    background: var(--soft);
    width: 100vw;
    overflow: hidden;
}

.section-blue {
    --color: var(--soft);
    background: var(--dark-blue);
}

.section-blue .title_serif,
.section-blue .title_sans {
    color: var(--soft);
}

.section-blue .subtitle__dot {
    background-color: var(--color-soft);
}

.is-loading .preloader__dots {
    animation: floatFade var(--float-fade-duration, 0.8s) ease-in-out forwards infinite;
    opacity: 0;
}

@keyframes floatFade {
    0% {
        transform: translateY(-10px);
        opacity: 1;
    }

    50% {
        transform: translateY(0);
        opacity: 0;
    }

    100% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.preloader__dots:nth-child(1) {
    animation-delay: 0s;
}

.preloader__dots:nth-child(2) {
    animation-delay: 0.1s;
}

.preloader__dots:nth-child(3) {
    animation-delay: 0.2s;
}

.preloader__dots:nth-child(4) {
    animation-delay: 0.25s;
}


/* _____________ ELEMENTS  _____________ */
.stats__stats,
.stats__stats__ul,
.importance__beats,
.onclock__spiral,
.cycle__cycle,
.solution__hero__ornament,
.the-balance__list,
.footer__cta__link,
.note__hold,
.note__fader,
.ender__content,
.cursor-insight__hold,
.insights__hold,
.insights__counter,
.insigh-pannel__each {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
}

.stats__stats>*,
.stats__stats__ul>*,
.importance__beats>*,
.onclock__spiral>*,
.cycle__cycle>*,
.solution__hero__ornament>*,
.the-balance__list>*,
.footer__cta__link>*,
.note__hold>*,
.note__fader>*,
.ender__content>*,
.cursor-insight__hold>*,
.insights__hold>*,
.insights__counter>*,
.insigh-pannel__each>* {
    grid-row-start: 1;
    grid-column-start: 1;
}

.onclock__words {
    position: relative;
    width: clamp(260px, 60vmin, 560px);
    aspect-ratio: 1;
    /* guarantees a square */
    margin: 3rem auto;
    padding: 0;
}

.onclock__word {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 2rem;
    min-width: 15rem;
    opacity: .5;
}

.onclock__word:hover {
    opacity: 1;
}

.onclock__word:hover .onclock__word__text {
    color: var(--white);
}


.line-debug {
    position: fixed;
    left: 50vw;
    height: 100svh;
    z-index: 9;
    width: 1px;
    background: red;
}

ul.cycle__thumbs.w-list-unstyled {
    display: grid;
    align-content: space-around;
    justify-content: space-between;
    justify-items: stretch;
    grid-template-columns: 1fr 1fr;
}

li.cycle__thumbs__imgs:nth-child(2),
li.cycle__thumbs__imgs:nth-child(4) {
    justify-self: flex-end;
}

.pattern {
    background-color: transparent;
    background-image: url(https://cdn.prod.website-files.com/68fcf9490b2a28caaa0e59bc/690cdf5ffff2032d5eb4a260_pattern.webp);
    height: 100svh;
    left: 0;
    mix-blend-mode: luminosity;
    opacity: 0.1;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100svw;
    z-index: 30;
}

section.importance.section-blue {
    /*background-color: #243f86;*/
}

.spacer-fs.scene-phone {
    height: 400svh;
}

section.onclock.section-blue {
    background: #010d6e;
}

/* ___________ */
.js-words {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.js-words div {
    will-change: opacity;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.is-subt .subtitle__dot {
    animation: var(--flash-duration, 2s) ease-out var(--flash-delay, 1s) infinite flash;
}

@keyframes flash {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

path.stats__path__solid {
    -webkit-filter: drop-shadow(1px 1px 1px #94b8f2);
    filter: drop-shadow(1px 1px 1px #94b8f2);
}

.importance__beats__svg__solid path,
.onclock__spiral__original .onclock__lines__solid path,
.stats__solid,
.orna_strong path {
    -webkit-filter: drop-shadow(1px 1px 1px #94b8f2);
    filter: drop-shadow(0px 0px 6px white);
}

.is-cans-active .cycle__directions__svg,
.is-cycles-active .cycle__directions__svg {
    animation: var(--rotate-duration, 45s) linear infinite rotate-directions;
}

@keyframes rotate-directions {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


body:has(.is-cans-active) canvas,
body:has(.is-footer-active) canvas {
    z-index: 2;
    background: transparent;
}

body:has(.is-follow-path) canvas,
body:has(.is-lamp-active) canvas {
    background: #010d6e;
}

.drop-cans .cycle__circle.cycle__circle3 {
    width: 129rem;
}

section.scene-tunnel {
    overflow: auto;
}

.solution {
    background: transparent;
}

li.solutions__each:before {
    position: absolute;
    content: '';
    background: var(--dark-blue);
    background: radial-gradient(circle, rgba(1, 13, 110, 1) 65%, rgba(1, 13, 110, 0.71) 81%, rgba(1, 13, 110, 0) 100%);
    height: 6rem;
    width: 97rem;
    z-index: -1;
    top: 43%;
    left: -19rem;
}

.solutions__each:nth-child(1):before {
    display: none;
}

path.footer-decor-solid,
.cta-button {
    -webkit-filter: drop-shadow(1px 1px 1px #94b8f2);
    filter: drop-shadow(1px 1px 1px #94b8f2);
}

.footer__cta:hover .hover-btn rect {
    fill: var(--color);
}

.hover-btn rect {
    transition: fill .25s ease-in-out;
}

.footer__cta__link__span {
    transition: color .25s ease-in-out;
}

.footer__cta:hover .footer__cta__link__span {
    color: var(--white);
}

section.note {
    padding: 0px;
    background: transparent;
}


li.the-balance__ring {
    transform: rotateX(55deg);
    filter: drop-shadow(0px 38px 1rem rgba(0, 0, 0, .5));
}

.the-balance__ring__ring {
    width: 48rem;
    aspect-ratio: 1;
    border-radius: 65rem;
    border: 10rem solid #2575f6;
    filter: drop-shadow(0px 1px 0px white);
}

.the-balance__rings {
    margin-top: -92rem;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    --gap-ring: 12rem;
}

.the-balance__rings>* {
    grid-row-start: 1;
    grid-column-start: 1;
}

.the-balance__rings-list:nth-child(1) {
    margin-top: calc(var(--gap-ring) * 3);
    transform: translateY(-6rem);
}

.the-balance__rings-list:nth-child(2) {
    margin-top: calc(var(--gap-ring) * 2);
    transform: translateY(-2rem);
}

.the-balance__rings-list:nth-child(3) {
    margin-top: calc(var(--gap-ring) * 1);
    transform: translateY(2rem);
}

.the-balance__rings-list:nth-child(4) {
    transform: translateY(6rem);
}

.the-balance__rings-list:nth-child(1) .the-balance__ring__ring {
    width: 90rem;
    border-color: #fde7af;
}

.the-balance__rings-list:nth-child(2) .the-balance__ring__ring {
    width: 75rem;
    border-color: #eef4ff;
}

.the-balance__rings-list:nth-child(3) .the-balance__ring__ring {
    width: 60rem;
    border-color: #9ac0ff;
}

.trg-note svg {
    transition: transform .4s ease-in-out;
}

.trg-note__border {
    transition: fill .3s ease-in-out;
}

.trg-note__dot {
    transition: fill .3s ease-in-out;
}

.trg-note:hover svg {
    transform: rotate(180deg);

}

.trg-note:hover .trg-note__border {
    fill: var(--dark-blue);
}

.trg-note:hover .trg-note__dot {
    fill: var(--soft);
}


.orna_opac path {
    opacity: .35;
}


.stats {
    overflow: visible;
}

.stats__spiral {
    -webkit-mask-image: linear-gradient(180deg, black 83%, transparent 100%);
    mask-image: linear-gradient(180deg, black 83%, transparent 100%);
}

.solution__decor svg {
    overflow: visible;
}

.ender .description,
.ender .subtitle__text {
    color: var(--dark-blue);
}

.note__video__wrap {
    --mask: linear-gradient(-15deg, transparent 100%, black 150%);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
}

.cursor-insight__bg {
    transition: scale 0.6s cubic-bezier(0, 0.62, 0.22, 0.99);
}

body:has(.is-cursor) .cursor-insight__bg {
    scale: 1;
}

body:has(.is-cursor) .cursor-insight__text {
    opacity: 1;
}

[data-iscursor] {
    cursor: pointer;
}

.cursor-insight__text {
    transition: opacity .3s ease-out;
}

.trg-sound__svg svg {
    overflow: visible;
}

.insigh-pannel__each.is-active {
    width: 2rem;
}

.is-active .insights__active-bg,
.is-active .insigh-pannel__each__index {
    opacity: 1;
}

.is-active .insights__dot {
    opacity: 0;
}

.insigh-pannel {
    overflow: hidden;
    padding: 2rem 2rem 2rem 0.4rem;
    display: flex;
    align-items: center;
    --webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) -0%, #000000 2%, #000000 95.77%, rgba(0, 0, 0, 0) 96.94%, rgba(0, 0, 0, 0) 100%);
    mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) -0%, #000000 2%, #000000 95.77%, rgba(0, 0, 0, 0) 96.94%, rgba(0, 0, 0, 0) 100%);
}

.insigh-pannel__hold {
    transform: translateX(-14.1rem);
    transition: transform 0.5s cubic-bezier(0.04, 0.7, 0.32, 1.03);
    position: relative;
}


.insigh-pannel:hover .insigh-pannel__hold {
    transform: translateX(0rem);
}

.trg-sound {
    transition: bottom .3s ease-in-out;
}

body:has(.is-footer-active) .trg-sound {
    bottom: 7rem;
}

body:has(.is-footer-active) .insigh-pannel {
    opacity: 0 !important;
}

.webgl-ready .preloader__span,
.webgl-ready .preloader__dots {
    opacity: 0 !important;
    animation-play-state: paused;
}

.preloader__span,
.preloader__dots {
    transition: opacity 0.5s ease-in-out;
}

.preloader__enter {
    transition: opacity 0.5s ease-in-out 0.25s, letter-spacing 0.5s ease-in-out;
}

.webgl-ready .preloader__enter {
    opacity: 1;
}

.preloader__content {
    cursor: pointer;
}

.preloader__content:hover .preloader__enter {
    letter-spacing: 0.1rem;
}

.preloader__svg svg {
    overflow: visible;
}

/* ___________________ DESKTOP ___________________ */
/* ___________________ DESKTOP ___________________ */
@media only screen and (min-width: 1025px) {
    .footer__hold>* {
        position: absolute;
    }

    .hover-btn svg {
        overflow: visible;
    }

    .lined {
        position: relative;
    }

    .lined:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background: var(--color);
        bottom: -2px;
    }

    .lined:hover:after {
        transform: scaleX(1);
        transform-origin: left
    }

    .lined:after {
        content: "";
        background: currentColor;
        bottom: -.1rem;
        height: 1px;
        left: 0;
        position: absolute;
        width: 100%;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .8s cubic-bezier(.16, 1, .3, 1)
    }

    .scene-phone__description:nth-child(1) {
        top: 142rem;
        left: 8rem;
    }

    .scene-phone__description:nth-child(2) {
        top: 229rem;
        right: 8rem;
    }

    .scene-phone__description:nth-child(3) {
        bottom: 90rem;
        left: 8rem;
    }

    .note__close {
        background-color: var(--soft);
        transition: background-color .25s ease-in-out;
    }

    .note__close__text {
        transition: color .25s ease-in-out;
    }

    .note__close:hover {
        background: var(--color);
        color: var(--white);
    }

    .note__close:hover .note__close__text {
        color: var(--white);
    }

    .the-balance__parags .the-balance__bottom__right {
        transform: translate(13rem, 0px);
    }

    .the-balance__parags .cycle__bottom__left {
        transform: translate(-13rem, -8rem);
    }

    .the-balance__bottom .the-balance__bottom__right {
        transform: translate(5rem, 0px);
    }

    .the-balance__bottom .the-balance__bottom__left {
        transform: translate(-5rem, -7rem);
    }


    li.the-balance__pointers:nth-child(1) {
        transform: translate(calc(-28rem - 8rem), 8rem);
        --mask: linear-gradient(90deg, transparent 80%, black 0%);
        -webkit-mask-image: var(--mask);
        mask-image: var(--mask);
    }

    li.the-balance__pointers:nth-child(2) {
        transform: translate(calc(28rem + 8rem), 0rem);
        --mask: linear-gradient(270deg, transparent 80%, black 0%);
        -webkit-mask-image: var(--mask);
        mask-image: var(--mask);
    }

    li.the-balance__pointers:nth-child(3) {
        transform: translate(calc(-28rem - 16rem), 37rem);
        --mask: linear-gradient(90deg, transparent 80%, black 0%);
        -webkit-mask-image: var(--mask);
        mask-image: var(--mask);
    }

    li.the-balance__pointers:nth-child(4) {
        transform: translate(calc(28rem + 16rem), 29rem);
        --mask: linear-gradient(270deg, transparent 80%, black 0%);
        -webkit-mask-image: var(--mask);
        mask-image: var(--mask);
    }

    ul.the-balance__list.w-list-unstyled {
        --mask: linear-gradient(0deg, transparent 17%, black 48%);
        -webkit-mask-image: var(--mask);
        mask-image: var(--mask);
    }

    .the-balance__bottom__right .subtitle {
        flex-direction: row-reverse;
    }

    ul.the-balance__list {
        position: relative;
        z-index: 1;
    }

    .point-solid {
        -webkit-filter: drop-shadow(0px 0px 6px white);
        filter: drop-shadow(0px 0px 6px white);
    }

    .note__video__vector {
        object-position: 27% 25%;
    }

    .bunny-player__big-btn:hover {
        background: rgba(0, 0, 0, .3);
        scale: 1.05;
    }

    .bunny-player__big-btn {
        transition: .3s background-color ease-out, .3s scale ease-out;
    }


}


/* ___________________ NOT DESKTOP ___________________ */
/* ___________________ NOT DESKTOP ___________________ */
@media screen and (max-width: 1024px) {

    canvas.webgl,
    .note {
        height: calc(var(--vh) * 100) !important;
    }

    .note__hold {
        display: block;
        grid-template-columns: unset;
        place-items: unset;
    }

    .note__hold>* {
        grid-row-start: unset;
        grid-column-start: unset;
    }

    .scene-phone__description {
        display: none;
    }

    .the-balance__rings {
        margin-top: -43rem;
    }

    section.note {
        background: var(--soft) !important;
    }
}


/* ___________________ T-LAND ___________________ */
/* ___________________ T-LAND ___________________ */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    html {
        font-size: calc(100vw / 900 * 10);
    }
}


/* ___________________ T-PORT ___________________ */
/* ___________________ T-PORT ___________________ */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    html {
        font-size: calc(100vw / 900 * 10);
    }

    .insigh-pannel__hold {
        transform: translateX(-11.2rem);
    }
}


/* ___________________ MOB-LAND ___________________ */
/* ___________________ MOB-LAND ___________________ */
@media screen and (max-width: 767px) and (min-width: 569px) {
    html {
        font-size: calc(100vw / 900 * 10);
    }

    .insigh-pannel__hold {
        transform: translateX(-11.1rem);
    }
}


/* ___________________ MOBILE ___________________ */
/* ___________________ MOBILE ___________________ */
@media screen and (max-width: 568px) {
    html {
        font-size: calc(100vw / 767 * 10);
    }

    .insights {
        height: calc(var(--vh)*100);
    }

    li.solutions__each {
        flex-direction: column;
        align-content: flex-start;
    }

    .solutions__each__media {
        width: 40rem;
    }

    .solutions__each__title .description {
        font-size: 6rem;
    }

    .solutions__each__parag p.parag {
        font-size: 3rem;
    }

    li.solutions__each:before {
        top: 0px;
        width: 100%;
        left: -5rem;
        height: 100%;
        background: linear-gradient(90deg, rgba(1, 13, 110, 0) 0%, rgba(1, 13, 110, 0) 7.69%, #010D6E 15.87%, #010D6E 80.77%, rgba(1, 13, 110, 0) 88.94%, rgba(1, 13, 110, 0) 100%);
    }


    li.solutions__each {
        margin-top: -9vh;
    }

    [data-bunny-player-init][data-player-update-size=cover] {
        height: 66svh;
    }

    .bunny-player__big-btn {
        width: 10rem;
        aspect-ratio: 1;
        height: auto;
        padding: 3.1rem;
    }

    .insigh-pannel__hold {
        transform: translateX(-19.1rem);
    }
}

p.parag,
.hero__title__h1,
.hero__subt {
    --mask: linear-gradient(-15deg, transparent 100%, black 150%);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
}

/* ___________________ MOBILE ___________________ */
/* ___________________ MOBILE ___________________ */
.tp-dfwv {
    position: fixed;
    z-index: 99;
}

.tp-dfwv div {
    color: #999;
    font-family: monospace;
}

.preloader-master {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--soft);
    z-index: 99;
}
/* === Admin: Reduced Motion Mode === */
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
  animation: none !important;
  transition: none !important;
}