@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-Black.eot');
    src: url('../fonts/Outfit/Outfit-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-Black.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-Black.woff') format('woff'),
        url('../fonts/Outfit/Outfit-Black.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-Black.svg#Outfit-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-Bold.eot');
    src: url('../fonts/Outfit/Outfit-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-Bold.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-Bold.woff') format('woff'),
        url('../fonts/Outfit/Outfit-Bold.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-Bold.svg#Outfit-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-ExtraBold.eot');
    src: url('../fonts/Outfit/Outfit-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-ExtraBold.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-ExtraBold.woff') format('woff'),
        url('../fonts/Outfit/Outfit-ExtraBold.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-ExtraBold.svg#Outfit-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-Medium.eot');
    src: url('../fonts/Outfit/Outfit-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-Medium.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-Medium.woff') format('woff'),
        url('../fonts/Outfit/Outfit-Medium.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-Medium.svg#Outfit-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-Regular.eot');
    src: url('../fonts/Outfit/Outfit-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-Regular.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-Regular.woff') format('woff'),
        url('../fonts/Outfit/Outfit-Regular.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-Regular.svg#Outfit-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-Light.eot');
    src: url('../fonts/Outfit/Outfit-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-Light.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-Light.woff') format('woff'),
        url('../fonts/Outfit/Outfit-Light.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-Light.svg#Outfit-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-ExtraLight.eot');
    src: url('../fonts/Outfit/Outfit-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-ExtraLight.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-ExtraLight.woff') format('woff'),
        url('../fonts/Outfit/Outfit-ExtraLight.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-ExtraLight.svg#Outfit-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-SemiBold.eot');
    src: url('../fonts/Outfit/Outfit-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-SemiBold.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-SemiBold.woff') format('woff'),
        url('../fonts/Outfit/Outfit-SemiBold.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-SemiBold.svg#Outfit-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-Thin.eot');
    src: url('../fonts/Outfit/Outfit-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Outfit/Outfit-Thin.woff2') format('woff2'),
        url('../fonts/Outfit/Outfit-Thin.woff') format('woff'),
        url('../fonts/Outfit/Outfit-Thin.ttf') format('truetype'),
        url('../fonts/Outfit/Outfit-Thin.svg#Outfit-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'neontubes';
    src: url("../fonts/neon/neontubes-webfont.eot");
    src: url("../fonts/neon/neontubes-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/neon/neontubes-webfont.woff2") format("woff2"), url("../fonts/neon/neontubes-webfont.woff") format("woff"), url("../fonts/neon/neontubes-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Feather';
    src: url('../fonts/Feather/Feather-Bold.eot');
    src: url('../fonts/Feather/Feather-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Feather/Feather-Bold.woff2') format('woff2'),
        url('../fonts/Feather/Feather-Bold.woff') format('woff'),
        url('../fonts/Feather/Feather-Bold.ttf') format('truetype'),
        url('../fonts/Feather/Feather-Bold.svg#Feather-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



body {
    font-family: 'Outfit', sans-serif;
}

:root {
    --hue: 223;
    --hue2: 133;
    --bg: hsl(var(--hue), 10%, 90%);
    --fg: hsl(var(--hue), 10%, 10%);
    --primary: hsl(var(--hue), 90%, 50%);
    --trans-dur: 0.3s;
    --trans-timing: cubic-bezier(0.83, 0, 0.17, 1);
    --container-color: hsl(0, 0%, 100%);


}


.il-editor__textarea ol {
    list-style-type: decimal !important;
    padding-left: 20px;
}

.il-editor__textarea ul {
    list-style-type: disc !important;
    padding-left: 20px;
}
.il-editor__textarea blockquote {
    border-left: 4px solid #ccc;
    padding-left: 12px;
    margin: 10px 0;
    color: #555;
    font-style: italic;
}
.il-editor__textarea h1 {
    line-height: 1.4;
}

.il-editor__textarea h2 {
    line-height: 1.4;
}

.il-editor__textarea h3 {
    line-height: 1.4;
}

.bg-primary-loader {
    background: radial-gradient(at -11% 47%,
            #483400,
            #4f3500 21%,
            #191919 80%);
}

.pack-preloader {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateY(-6px);
}

.boxing-lottie {
    width: 142px;
    height: 142px;
    opacity: 0.94;
    filter: sepia(0.82) hue-rotate(-8deg) saturate(1.35) brightness(1) contrast(1.01) drop-shadow(0 0 2px rgba(255, 198, 74, 0.14));
}

.boxing-lottie:not(.is-ready) {
    display: none;
}

.boxing-lottie-wrap {
    width: 142px;
    height: 142px;
    position: relative;
}

.boxing-fallback {
    width: 100%;
    height: 100%;
    color: rgba(255, 224, 160, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 2px rgba(255, 198, 74, 0.14));
}

.boxing-fallback.hidden {
    display: none !important;
}

.boxing-fallback svg {
    width: 84px;
    height: 84px;
}

@media (max-width: 768px) {
    .boxing-lottie {
        width: 112px;
        height: 112px;
    }

    .boxing-lottie-wrap {
        width: 112px;
        height: 112px;
    }

    .boxing-fallback svg {
        width: 68px;
        height: 68px;
    }
}


.margin-auto {
    margin: auto !important;
}

.card {
    position: relative;
    /* margin: auto; */
    width: 18rem;
    height: 24rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: end;


    .light-layer {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        transform-style: preserve-3d;
        perspective: 400px;

        .slit {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 66%;
            height: 1.2rem;
            transform: rotateX(-76deg);
            background: #121212;
            box-shadow: 0 0 4px 0 #fff0;
            transition: all 0.4s ease-in-out;
        }

        .lumen {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 100%;
            pointer-events: none;
            perspective: 400px;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;

            .min {
                width: 70%;
                height: 3rem;
                background: linear-gradient(#fff0, #fffa);
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 2.5rem;
                margin: auto;
                transform: rotateX(-42deg);
                opacity: 0.4;
            }

            .mid {
                width: 74%;
                height: 13rem;
                background: linear-gradient(#fff0, #fffa);
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 10em;
                margin: auto;
                transform: rotateX(-42deg);
                filter: blur(1rem);
                opacity: 0.8;
                border-radius: 100% 100% 0 0;
            }

            .hi {
                width: 50%;
                height: 13rem;
                background: linear-gradient(#fff0, #fffa);
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 12em;
                margin: auto;
                transform: rotateX(22deg);
                filter: blur(1rem);
                opacity: 0.6;
                border-radius: 100% 100% 0 0;
            }
        }

        .darken {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 100%;
            pointer-events: none;
            perspective: 400px;
            transition: opacity 0.4s ease-in-out;
            opacity: 0.5;

            &>* {
                transition: opacity 0.4s ease-in-out;
            }

            .sl {
                width: 64%;
                height: 10rem;
                background: linear-gradient(#000, #0000);
                position: absolute;
                left: 0;
                right: 0;
                top: 11.6em;
                bottom: 0;
                margin: auto;
                filter: blur(0.2rem);
                opacity: 0.1;
                border-radius: 0 0 100% 100%;
                transform: rotateX(-22deg);
            }

            .ll {
                width: 62%;
                height: 10rem;
                background: linear-gradient(#000a, #0000);
                position: absolute;
                left: 0;
                right: 0;
                top: 12em;
                bottom: 0;
                margin: auto;
                filter: blur(0.8rem);
                opacity: 0.4;
                border-radius: 0 0 100% 100%;
                transform: rotateX(22deg);
            }

            .slt {
                width: 0.5rem;
                height: 4rem;
                background: linear-gradient(#0005, #0000);
                position: absolute;
                left: 0;
                right: 11.9rem;
                top: 4.5em;
                bottom: 0;
                margin: auto;
                opacity: 0.6;
                border-radius: 0 0 100% 100%;
                transform: skewY(42deg);
            }

            .srt {
                width: 0.5rem;
                height: 4rem;
                background: linear-gradient(#0005, #0000);
                position: absolute;
                right: 0;
                left: 11.9rem;
                top: 4.5em;
                bottom: 0;
                margin: auto;
                opacity: 0.6;
                border-radius: 0 0 100% 100%;
                transform: skewY(-42deg);
            }
        }
    }

    .content .icon svg {
        width: 90px;
        filter: grayscale(1);
    }

    .content {
        .icon {
            position: absolute;
            top: 5rem;
            left: 0;
            right: 0;
            margin: auto;
            width: fit-content;
            filter: drop-shadow(0 -1.2rem 1px transparent);
            transition: filter 0.4s ease-in-out;
        }

    }

    &:has(.switch__input:checked ~ .switch__lever) {


        .slit {
            background: #fff;
            box-shadow: 0 0 4px 0 #fff;
        }

        .lumen {
            opacity: 0.5;
        }

        .darken {
            opacity: 0.8;

            .sl {
                opacity: 0.2;
            }

            .ll {
                opacity: 1;
            }

            .slt {
                opacity: 1;
            }

            .srt {
                opacity: 1;
            }
        }

        .content {
            .icon {
                filter: drop-shadow(0 -1.2rem 2px #0003) brightness(1.64);
            }

            .icon svg {
                width: 90px;
                filter: grayscale(0);
            }
        }
    }
}

.switch,
.switch__input {
    -webkit-tap-highlight-color: transparent;
}

.switch {
    background-color: hsl(var(--hue), 10%, 90%);
    border-radius: 0.375em;
    box-shadow:
        0 4.375em 2em hsl(var(--hue), 10%, 70%) inset,
        0 0.125em 0 hsl(var(--hue), 10%, 90%) inset,
        0 0 0.375em hsla(var(--hue), 10%, 10%, 0.5);
    margin: auto;
    position: relative;
    transition:
        background-color var(--trans-dur) var(--trans-timing),
        box-shadow var(--trans-dur) var(--trans-timing);
    width: 3.40em;
    height: 6.75em;
    display: flex;
    transform: rotate(270deg);
}

.switch__input,
.switch__lever,
.switch__lever-half-top,
.switch__lever-half-bottom,
.switch__lever-shadow,
.switch__lever-shadow:before,
.switch__lever-shadow:after {
    display: block;
}

.switch__input,
.switch__label,
.switch__lever-half-top,
.switch__lever-half-bottom,
.switch__lever-shadow,
.switch__lever-shadow:before,
.switch__lever-shadow:after {
    position: absolute;
}

.switch__input {
    cursor: pointer;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.switch__label {
    overflow: hidden;
    width: 1px;
    height: 1px;
}

.switch__lever,
.switch__lever-shadow {
    pointer-events: none;
}

.switch__lever {
    background-color: hsla(var(--hue), 10%, 80%);
    border-radius: 0.25em;
    box-shadow:
        0 0 0.25em hsl(var(--hue), 10%, 10%) inset,
        0.75em 0 0.5em hsl(var(--hue), 10%, 90%) inset;
    margin: 0.375em;
    position: relative;
    transition:
        background-color var(--trans-dur) var(--trans-timing),
        box-shadow var(--trans-dur) var(--trans-timing);
    width: calc(100% - 0.75em);
    height: calc(100% - 0.75em);
}

.switch__lever:before {
    background-image: linear-gradient(hsla(var(--hue), 10%, 10%, 0), hsla(var(--hue), 10%, 10%, 0.2));
    border-radius: inherit;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}

.switch__lever-half-top,
.switch__lever-half-bottom {
    display: flex;
    justify-content: center;
    left: 0.125em;
    padding: 0.5em;
    width: calc(100% - 0.25em);
    height: calc(50% - 0.125em);
    transition:
        background-color var(--trans-dur) var(--trans-timing),
        transform var(--trans-dur) var(--trans-timing);
}

.switch__lever-half-top {
    background-color: hsl(var(--hue), 10%, 85%);
    border-radius: 0.25em 0.25em 0 0;
    bottom: 50%;
    transform-origin: 50% 100%;
}

.switch__lever-half-top:before,
.switch__lever-half-bottom:before {
    content: "";
    display: block;
    transition:
        background-color var(--trans-dur) var(--trans-timing),
        box-shadow var(--trans-dur) var(--trans-timing);
}

.switch__lever-half-top:before {
    border-radius: 50%;
    box-shadow:
        0 0 0 0.125em hsl(var(--hue), 10%, 65%) inset,
        0 0.25em 0 hsl(var(--hue), 10%, 90%) inset,
        0 0.125em 0 hsl(var(--hue), 10%, 90%);
    width: 1em;
    height: 1em;
}

.switch__lever-half-bottom {
    background-color: hsl(var(--hue), 10%, 90%);
    border-radius: 0 0 0.25em 0.25em;
    align-items: flex-end;
    top: 50%;
    transform: rotateX(-35deg);
    transform-origin: 50% 0;
}

.switch__lever-half-bottom:before {
    background-color: hsl(var(--hue2), 10%, 45%);
    box-shadow:
        0 0.125em 0 hsl(var(--hue2), 10%, 30%) inset,
        0 -0.0625em 0 hsl(var(--hue), 10%, 90%) inset,
        0 0 0.5em hsla(var(--hue2), 90%, 45%, 0);
    width: 0.25em;
    height: 1.125em;
}

.switch__lever-shadow {
    border-radius: 0.25em;
    overflow: hidden;
    top: 0.5em;
    right: 0;
    width: 5em;
    height: calc(100% - 0.25em);
}

.switch__lever-shadow:before,
.switch__lever-shadow:after {
    background-color: hsla(var(--hue), 10%, 10%, 0.15);
    content: "";
    left: 1.625em;
    width: 3em;
    height: 50%;
    transition:
        background-color var(--trans-dur) var(--trans-timing),
        transform var(--trans-dur) var(--trans-timing);
}

.switch__lever-shadow:before {
    border-radius: 1.5em 0 0 0 / 1em 0 0 0;
    transform-origin: 0 100%;
}

.switch__lever-shadow:after {
    border-radius: 0.25em;
    bottom: 0;
    transform: skewX(-10deg);
    transform-origin: 0 0;
}

/* `:checked` state */
.switch__input:checked~.switch__lever .switch__lever-half-top {
    background-color: hsl(var(--hue), 10%, 70%);
    transform: rotateX(35deg);
}

.switch__input:checked~.switch__lever .switch__lever-half-top:before {
    box-shadow:
        0 0 0 0.125em hsl(var(--hue), 10%, 55%) inset,
        0 0.25em 0 hsl(var(--hue), 10%, 80%) inset,
        0 0.125em 0 hsl(var(--hue), 10%, 80%);
}

.switch__input:checked~.switch__lever .switch__lever-half-bottom {
    background-color: hsl(var(--hue), 10%, 85%);
    transform: rotateX(0);
}

.switch__input:checked~.switch__lever .switch__lever-half-bottom:before {
    background-color: hsl(var(--hue2), 90%, 45%);
    box-shadow:
        0 0.125em 0 hsl(var(--hue2), 90%, 30%) inset,
        0 -0.0625em 0 hsl(var(--hue), 10%, 90%) inset,
        0 0 0.5em hsla(var(--hue2), 90%, 45%, 1);
}

.switch__input:checked~.switch__lever-shadow:before {
    transform: rotate(-10deg);
}

.switch__input:checked~.switch__lever-shadow:after {
    transform: skewX(0) scaleY(0.85);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue), 10%, 30%);
        --fg: hsl(var(--hue), 10%, 90%);
    }

    .switch {
        background-color: hsl(var(--hue), 10%, 40%);
        box-shadow:
            0 4.375em 2em hsl(var(--hue), 10%, 30%) inset,
            0 0.125em 0 hsl(var(--hue), 10%, 40%) inset,
            0 0 0.375em hsla(var(--hue), 10%, 10%, 0.5);
    }

    .switch__lever {
        background-color: hsla(var(--hue), 10%, 30%);
        box-shadow:
            0 0 0.25em hsl(var(--hue), 10%, 10%) inset,
            0.75em 0 0.5em hsl(var(--hue), 10%, 40%) inset;
    }

    .switch__lever-half-top {
        background-color: hsl(var(--hue), 10%, 35%);
    }

    .switch__lever-half-top:before {
        box-shadow:
            0 0 0 0.125em hsl(var(--hue), 10%, 25%) inset,
            0 0.25em 0 hsl(var(--hue), 10%, 40%) inset,
            0 0.125em 0 hsl(var(--hue), 10%, 40%);
    }

    .switch__lever-half-bottom {
        background-color: hsl(var(--hue), 10%, 40%);
    }

    .switch__lever-half-bottom:before {
        background-color: hsl(var(--hue2), 10%, 25%);
        box-shadow:
            0 0.125em 0 hsl(var(--hue2), 10%, 20%) inset,
            0 -0.0625em 0 hsl(var(--hue), 10%, 40%) inset,
            0 0 0.5em hsla(var(--hue2), 90%, 45%, 0);
    }

    .switch__lever-shadow:before,
    .switch__lever-shadow:after {
        background-color: hsla(var(--hue), 10%, 10%, 0.25);
    }

    /* `:checked` state */
    .switch__input:checked~.switch__lever .switch__lever-half-top {
        background-color: hsl(var(--hue), 10%, 25%);
    }

    .switch__input:checked~.switch__lever .switch__lever-half-top:before {
        box-shadow:
            0 0 0 0.125em hsl(var(--hue), 10%, 15%) inset,
            0 0.25em 0 hsl(var(--hue), 10%, 30%) inset,
            0 0.125em 0 hsl(var(--hue), 10%, 30%);
    }

    .switch__input:checked~.switch__lever .switch__lever-half-bottom {
        background-color: hsl(var(--hue), 10%, 35%);
    }

    .switch__input:checked~.switch__lever .switch__lever-half-bottom:before {
        background-color: hsl(var(--hue2), 90%, 45%);
        box-shadow:
            0 0.125em 0 hsl(var(--hue2), 90%, 20%) inset,
            0 -0.0625em 0 hsl(var(--hue), 10%, 40%) inset,
            0 0 0.5em hsla(var(--hue2), 90%, 45%, 1);
    }
}

.bg-1 {
    background: #708993;
}

.bg-2 {
    background: #E43636;
}

.bg-3 {
    background: #FFF8D4;
}

.bg-4 {
    background: #DCA06D;
}

.bg-5 {
    background: #dda31a;
}

.land-svg {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(at -11% 47%,
            #483400,
            #4f3500 21%,
            #191919 80%);
    flex-direction: column;
    z-index: 99;
}

.logo-path {

    width: 150px;
    height: 150px;
}

.logo-path path {
    stroke: #fff;
    stroke-width: 0;
    stroke-dasharray: 500;
}

.logo-path path {
    animation: letter-animation 8s linear forwards;
}

@keyframes letter-animation {
    0% {
        stroke-dashoffset: 500;
        stroke-width: 0.8;
        fill-opacity: 0;
        /* IMPORTANT: Set the gradient here, so it is ready to fade in */
        fill: url(#linear-gradient);
    }

    /* By 50%, the outline is fully drawn, but fill is still invisible */
    50% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
        stroke-width: 0.8;
    }

    /* Between 50% and 100%, the fill smoothly fades in as stroke fades out */
    100% {
        stroke-dashoffset: 0;
        stroke-width: 0;
        /* Optional: remove stroke smoothly */
        fill-opacity: 1;
        fill: url(#linear-gradient);
    }
}

/* 1. UPDATED CLASSES */
.neon {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    justify-content: center;
    bottom: 0;
    font-size: 1.3rem;
}

/* RED SPAN - Warm Brownish Red with matching glow */
.neon .redspan {
    color: #AF8260;


    font-family: "neontubes", sans-serif;
    opacity: 0;
    animation: fade-in 8s ease-in forwards, blink 4s infinite alternate 7s;
}

/* WHITE/TAN SPAN - Cream color with Gold/Amber glow */
.neon .whitespan {
    color: #E4C59E;

    font-family: "neontubes", sans-serif;
    opacity: 0;
    animation: fade-in 8s ease-in forwards, buzz 0.01s infinite alternate 3s;
}

/* BLUE/BROWN SPAN - Deep Maroon with Crimson/Red glow */
.neon .bluespan {
    color: #D1BB9E;


    font-family: "neontubes", sans-serif;
    opacity: 0;
    animation: fade-in 8s ease-in forwards, blink 4s infinite alternate 5s;
}

/* 2. NEW KEYFRAME FOR FADE IN */

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 3. EXISTING SECONDARY KEYFRAMES (Unchanged) */

@-webkit-keyframes buzz {
    70% {
        opacity: 0.80;
    }
}

@keyframes buzz {
    70% {
        opacity: 0.80;
    }
}

@-webkit-keyframes blink {
    40% {
        opacity: 1;
    }

    42% {
        opacity: 0.8;
    }

    43% {
        opacity: 1;
    }

    45% {
        opacity: 0.2;
    }

    46% {
        opacity: 1;
    }
}

@keyframes blink {
    40% {
        opacity: 1;
    }

    42% {
        opacity: 0.8;
    }

    43% {
        opacity: 1;
    }

    45% {
        opacity: 0.2;
    }

    46% {
        opacity: 1;
    }
}

.logo-container {
    position: relative;
}



.scene {
    width: 200px;
    height: 200px;
    transform: rotatex(65deg) rotatez(45deg);
    transform-style: preserve-3d;
}

.main-cube {
    transform-style: preserve-3d;
    position: absolute;
}

.main-cube {
    width: 200px;
    height: 200px;
}

.side {
    border: 8px solid black;
    position: absolute;
    box-sizing: border-box;
}

.main-cube__side-top {
    width: 200px;
    height: 200px;
    translate: 0px 0px 101px;
    background-color: rgb(220, 220, 220);
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hatching {
    background-image: repeating-linear-gradient(90deg,
            transparent,
            transparent 15px,
            #000 10px,
            #000 20px);
    background-color: rgb(255, 255, 255);
}

.main-cube__side-front {
    width: 200px;
    height: 200px;
    translate: 98px 0px 0px;
    transform: rotatey(90deg);
}

.main-cube__side-left {
    width: 200px;
    height: 200px;
    translate: 0px 98px 0px;
    transform: rotatex(90deg);
}

.main-cube__inside {
    position: absolute;
}

.main-cube__inside--bottom {
    translate: 0px 28px -89px;
    transform: rotatez(90deg);
    width: 100%;
    height: calc(70% + 16px);
    background-color: rgb(255, 255, 255);
}

.rotating-light-bottom {
    opacity: 0.8;
    position: absolute;
    width: 126px;
    height: 125%;
    background-color: rgb(193, 193, 193);
    translate: 37px 158px -63px;
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.31) 50%, rgba(255, 0, 0, 0) 100%);
}

.rotating-light-back {
    opacity: 0.8;
    position: absolute;
    width: 128px;
    height: 120%;
    transform: rotatey(90deg);
    background-color: rgb(255, 255, 255);
    translate: -28px 151px 0px;
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.31) 50%, rgba(255, 0, 0, 0) 100%);
}

.main-cube__inside--back {
    translate: -96px 5px 5px;
    transform: rotatex(90deg) rotatey(90deg);
    width: 100%;
    height: calc(70% + -10px);
    background-color: rgb(255, 255, 255)
}

.corner {
    position: absolute;
    background-color: rgb(220, 220, 220);
    width: 15%;
    height: 15%;
    position: absolute;
}

.corner-2 {
    bottom: 0;
}

.corner-3 {
    bottom: 0;
    right: 0;
}

.corner-4 {
    right: 0;
}

.rectangle {
    position: absolute;
    background-color: rgb(220, 220, 220);
    box-sizing: border-box;
}

.rectangle-1 {
    margin-left: calc(15% - 8px);
    border-bottom: 8px solid black;
    height: 15%;
    width: calc(70% + 16px);
}

.rectangle-2 {
    bottom: 0;
    margin-left: calc(15% - 8px);
    border-top: 8px solid black;
    height: 15%;
    width: calc(70% + 16px);
}

.rectangle-3 {
    height: calc(70% + 16px);
    width: 15%;
    top: calc(15% - 8px);
    border-right: 8px solid black;
}

.rectangle-4 {
    height: calc(70% + 16px);
    width: 17%;
    top: calc(15% - 8px);
    right: 0;
    border-left: 8px solid black;
}

.rotating-cube {
    position: absolute;
    transform-style: preserve-3d;
    width: 200px;
    height: 200px;
    transition: 0.7s ease-in-out;
}

.rotating-cube--rotated {
    transform: rotatey(90deg);
}

.rotating-cube__top {
    position: absolute;
    background-color: rgb(220, 220, 220);
    border: 8px solid black;
    box-sizing: border-box;
    width: 80px;
    height: 330px;
    translate: 71px 0px 38px;
    cursor: pointer;
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255 255 255) 50%, rgb(220 220 220) 100%);
}

.rotating-cube__front {
    position: absolute;
    background-color: rgb(220, 220, 220);
    border: 8px solid black;
    box-sizing: border-box;
    width: 80px;
    height: 330px;
    transform: rotatey(90deg);
    translate: 110px 0px 0px;
    cursor: pointer;
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255 255 255) 50%, rgb(220 220 220) 100%);
}

.rotating-cube__bottom {
    position: absolute;
    background-color: rgb(220, 220, 220);
    border: 8px solid black;
    box-sizing: border-box;
    width: 80px;
    height: 330px;
    translate: 72px 0px -33px;
    cursor: pointer;
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255 255 255) 50%, rgb(220 220 220) 100%);
}

.rotating-cube__back {
    position: absolute;
    background-color: rgb(220, 220, 220);
    border: 8px solid black;
    box-sizing: border-box;
    width: 80px;
    height: 330px;
    transform: rotatey(90deg);
    translate: 30px 0px 0px;
    cursor: pointer;
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255 255 255) 50%, rgb(220 220 220) 100%);
}

.rotating-cube__left {
    position: absolute;
    background-color: rgb(220, 220, 220);
    border: 8px solid black;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    transform: rotatex(90deg) rotatez(180deg) rotatey(180deg);
    cursor: pointer;
    display: flex;
    align-items: center;
    translate: 70px 290px 0px;
}

.text {
    opacity: 1;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    font-family: sans-serif;
    animation: fadeOut 0.5s ease-in 2s forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.bulb-cube {
    position: absolute;
    transform-style: preserve-3d;
    width: 200px;
    height: 200px;
    translate: -72px;
    transition: 0.7s ease-in-out;
}

.bulb-cube--opened {
    translate: 0;
}

.bulb-cube--opened .bulb-cube__front {
    background-blend-mode: luminosity;
}

.bulb-cube__top {
    position: absolute;
    width: 75px;
    height: 135px;
    translate: 194px 30px 64px;
    box-sizing: border-box;
    border: 8px solid black;
    background-color: white;
}

.bulb-cube__left {
    position: absolute;
    width: 70px;
    /* height: 140px;
    translate: 197px 93px 0px; */
    height: 136px;
    translate: 194px 93px -3px;
    box-sizing: border-box;
    border: 8px solid black;
    transform: rotatex(90deg);
    background-color: white;
}

.bulb-cube__front {
    position: absolute;
    width: 135px;
    height: 135px;
    translate: 218px 48px 11px;
    box-sizing: border-box;
    border: 8px solid black;
    transform: rotateY(270deg) rotateX(0deg) rotateZ(270deg);
    background: url(../images/logo_margin.svg);
    background-color: #f8fafc;
}

.bulb-light-left {
    opacity: 0;
    position: absolute;
    width: 199px;
    height: 132px;
    translate: 201px 98px -4px;
    box-sizing: border-box;
    transform: rotatex(90deg);
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.31) 50%, rgba(255, 0, 0, 0) 100%);
    transition: 0.7s ease-in-out;
}

.bulb-light-top {
    opacity: 0;
    position: absolute;
    width: 199px;
    height: 135px;
    translate: 236px 66px 87px;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.31) 50%, rgba(255, 255, 255, 0) 100%);
    transition: 0.7s ease-in-out;
}

.bulb-light--on {
    opacity: 0.4;
}

.light-password {
    position: absolute;
    width: 250px;
    border-radius: 80%;
    height: 250px;
    background-color: rgb(255, 255, 255);
    top: 70%;
    left: 86%;
    margin-top: -100%;
    margin-left: -100%;
    opacity: 0;
    filter: blur(45px);
    transition: 0.7s ease-in-out;
}

.light-password--on {
    opacity: 0.3;
}

.is-invalid {
    border-color: var(--color-danger);
    border-style: dashed;
}

.font-feather {
    font-family: 'Feather' !important;
}

.setup-input,
.verify-input {
    width: 50px;
    padding: 0;
    height: 50px;
    text-align: center;
    font-size: 25px;
}

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}


/* 1. SHAKE (Error) */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.animate-shake {
    animation: shake 0.4s ease-in-out;
}

/* 2. SLIDE OUT LEFT (Step Transition) */
@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

.animate-slide-out {
    animation: slideOutLeft 0.3s forwards ease-in;
}

/* 3. SLIDE IN RIGHT (Step Transition) */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

.animate-slide-in {
    animation: slideInRight 0.3s forwards ease-out;
}

/* 4. POP (Typing Feedback) */
@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
        border-color: rgb(var(--color-primary));
    }

    100% {
        transform: scale(1);
    }
}

.animate-pop {
    animation: pop 0.2s ease-out;
}

.input-transition {
    transition: all 0.2s ease-in-out;
}

.text-gradient {
    background: -webkit-linear-gradient(45deg, #ddd, #c79660 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-custom-warning {
    background: #e4e8eb;
    border: 1px solid #aaa;
}

.error-state {
    background: oklch(0.92 0.02 347.53);
    border: 1px solid #f0e0e7 !important;
}


#hitBtn {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    fill: transparent;
}

#scifi {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}

#scifi svg {
    width: 100%;
    height: 100%;
    max-width: 350px;
    max-height: 350px;
}

.radialGroup,
.icon,
.bar,
.ring {
    transform-origin: 400px 300px;
}

.bg-whole-app {
    background: radial-gradient(at -11% 47%,
            #483400,
            #4f3500 21%,
            #191919 80%);
}

.bg-whole-app::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(at -11% 47%,
            #483400,
            #4f3500 21%,
            #191919 80%) !important;
}



.welcome-date {
    gap: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.welcome-date h2 {
    font-size: 25px;
    font-weight: 700;

}

.welcome-date p {
    font-size: 1.2rem;
}

.welcome-text {
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: center;
}

.welcome-text h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    padding: 0 0 10px 0;
}

.welcome-text p {
    font-size: 1.2rem;

}

.div-welcome {
    padding: 20px 14px;
    background: transparent;
    border-radius: 18px;
    gap: 18px;
}

.divider {
    border: 1px solid #d4d4d4;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
}

.morning {
    background: -webkit-linear-gradient(45deg, #ffffff 0%, #ffd800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff40;
}

.afternoon {
    background: -webkit-linear-gradient(45deg, #ffffff 0%, #F1C40F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff40;
}

.evening {
    background: -webkit-linear-gradient(45deg, #ffffff 0%, #f73806 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff40;
}

.night {
    background: -webkit-linear-gradient(45deg, #ffffff 0%, #5d5d5d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff40;
}

.is-invalid .ts-control {
    border: 1px dashed var(--color-danger);
}

.min-h-10 {
    min-height: calc(var(--spacing) * 10);
}

.color-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 14px;
}

.color-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.color-pill input {
    display: none;
}

/* color circle */
.color-pill .swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #606a7f;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover */
.color-pill:hover .swatch {
    transform: scale(1.06);
}

/* CHECK MARK */
.color-pill .swatch::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.2s ease;
}

/* SELECTED */


/* SELECTED */
.color-pill input:checked+.swatch {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.color-pill input:checked+.swatch::after {
    opacity: 1;
    transform: scale(1);
}


.brand-pill {
    cursor: pointer;
    display: inline-flex;
}

/* hide checkbox */
.brand-pill input {
    display: none;
}

/* brand box */
.brand-box {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

/* hover effect */
.brand-pill:hover .brand-box {
    transform: scale(1.06);
}

/* CHECK MARK OVERLAY */
.brand-box::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 700;
    color: #fff;

    background: rgba(0, 0, 0, 0.55);
    border-radius: inherit;

    opacity: 0;
    transform: scale(0.7);
    transition: all 0.2s ease;
}

/* SELECTED STATE */
.brand-pill input:checked+.brand-box {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* SHOW CHECK MARK */
.brand-pill input:checked+.brand-box::after {
    opacity: 1;
    transform: scale(1);
}

.d-none {
    display: none;
}

.layout-option input:checked+div {
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.03);
}
/* LEFT BORDER COLORS */
.border-catalog {
    border-left-color: steelblue;
}

.border-category {
    border-left-color: seagreen;
}

.border-product {
    border-left-color: lavender;
}


/* BUTTON STYLES */
.catalog-btn {
    background-color: steelblue;
    color: white;
    font-family: 'Feather';
    font-size: 15px;
    border-radius: 35px;
    border-color: steelblue;
}

.category-btn {
    background-color: seagreen;
    color: white;
    font-family: 'Feather';
    font-size: 15px;
    border-radius: 35px;
    border: 1px solid seagreen;
}

.product-btn {
    background-color: lavender;
    color: midnightblue;
    font-family: 'Feather';
    font-size: 15px;
    border-radius: 35px;
    border: 1px solid lavender;
}
#global-loader {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

#global-loader.show {
    opacity: 1;
    visibility: visible;
}



.main-laoder-div .data-loader {
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
}

.main-laoder-div .data-loader:before,
.main-laoder-div .data-loader:after {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
}

.main-laoder-div .data-loader:before {
    animation: box1 1s infinite;
    background-color: #fff;
    box-shadow: 30px 0 0 #DCA06D;
    margin-bottom: 10px;
}

.main-laoder-div .data-loader:after {
    animation: box2 1s infinite;
    background-color: #DCA06D;
    box-shadow: 30px 0 0 #fff;
}

/* Chrome, Safari, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.ts-wrapper .ts-control {
    border-radius: 0.375rem;
    /* border-color: hsl(var(--foreground) / 0.2); */
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}

.ts-wrapper.focus .ts-control {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
}

/* SortableJS drag fallbacks to prevent native browser transparency */
.sortable-drag {
    background-color: hsl(var(--background)) !important;
    opacity: 1 !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
    cursor: grabbing !important;
    z-index: 1000 !important;
}

.sortable-ghost {
    opacity: 0.3 !important;
}

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

    50% {
        transform: rotate(360deg) scale(1.2)
    }

    100% {
        transform: rotate(720deg) scale(0.8)
    }
}

@keyframes box1 {
    0% {
        box-shadow: 30px 0 0 #DCA06D;
    }

    50% {
        box-shadow: 0 0 0 #DCA06D;
        margin-bottom: 0;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #DCA06D;
        margin-bottom: 10px;
    }
}

@keyframes box2 {
    0% {
        box-shadow: 30px 0 0 #fff;
    }

    50% {
        box-shadow: 0 0 0 #fff;
        margin-top: -20px;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #fff;
        margin-top: 0;
    }
}

@media (width>=80rem) {
    .bg-whole-app {
        background: none;
    }
}