/* --------------------------------------- LOADER */
                    .loader {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 9999;
                        transition: opacity 0.5s ease, visibility 0.5s ease;
                        background-color: var(--bg-loading);
                        backdrop-filter: blur(3px);
                        -webkit-backdrop-filter: blur(3px);
                    }

                    .loader.hidden {
                        opacity: 0;
                        visibility: hidden;
                        transition: opacity 0.8s ease, visibility 0.8s ease;
                    }

                    .loader_container {
                        width: 50px;
                        height: 50px;
                        position: relative;
                        transform: rotate(45deg);
                    }

                    .orbe {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        --delay: calc(var(--index) * 0.1s);
                        animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;
                        opacity: calc(1 - calc(0.2 * var(--index)));
                    }

                    .orbe::after {
                        position: absolute;
                        content: '';
                        top: 0;
                        left: 0;
                        width: 10px;
                        height: 10px;
                        background-color: var(--loading);
                        box-shadow: 0px 0px 20px 2px var(--loading);
                        border-radius: 50%;
                    }

                    @keyframes orbit7456 {
                        0% {}

                        80% {
                            transform: rotate(360deg);
                        }

                        100% {
                            transform: rotate(360deg);
                        }
                    }

                    /* --------------------------------------- BG */
                    .background {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        z-index: 0;
                    }

                    .background_grid-square {
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background:
                            linear-gradient(90deg, var(--bg-line-square) 1px, transparent 1px) 0 0 / 40px 40px,
                            linear-gradient(0deg, var(--bg-line-square) 1px, transparent 1px) 0 0 / 40px 40px;
                        background-position: 0 0;
                        opacity: .25;
                        pointer-events: none;
                        z-index: 1;
                        position: absolute;
                    }

                    .background_noise {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: repeating-radial-gradient(circle at 50% 50%, var(--bg-noise) 0, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.050) 10px);
                        opacity: .2;
                        pointer-events: none;
                        z-index: 1;
                    }

                    @keyframes noise {

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

                        10% {
                            transform: translate(-5%, -5%);
                        }

                        20% {
                            transform: translate(-10%, 5%);
                        }

                        30% {
                            transform: translate(5%, -10%);
                        }

                        40% {
                            transform: translate(-5%, 15%);
                        }

                        50% {
                            transform: translate(-10%, 5%);
                        }

                        60% {
                            transform: translate(15%, 0%);
                        }

                        70% {
                            transform: translate(0%, 10%);
                        }

                        80% {
                            transform: translate(-15%, 0%);
                        }

                        90% {
                            transform: translate(10%, 5%);
                        }
                    }

                    .star {
                        position: absolute;
                        width: 1px;
                        height: 1px;
                        background: var(--bg-star);
                        border-radius: 100%;
                        opacity: 0.8;
                        animation: moveStar linear infinite;
                    }

                    @keyframes moveStar {
                        0% {
                            transform: translateY(0) scale(1);
                            opacity: 1;
                        }

                        100% {
                            transform: translateY(-120vh) scale(0.8);
                            opacity: 0;
                        }
                    }


                    body.loading {
                        overflow: hidden;
                    }

                    body {
                        margin: 0;
                        padding: 0;
                        position: relative;
                        font-family: "Cal Sans", sans-serif;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }

                    body::before {
                        content: "";
                        position: fixed;
                        inset: 0;
                        background: url(backgrounds/background-desktop-2.webp) center/cover no-repeat fixed;
                        z-index: -2;
                    }

                    body::after {
                        content: "";
                        position: fixed;
                        inset: 0;
                        background: url(backgrounds/background-mobile-2.webp) center/cover no-repeat fixed;
                        opacity: 0;
                        z-index: -1;
                    }

                    @media (max-width: 767px) {
                        body::before {
                            opacity: 0;
                        }

                        body::after {
                            opacity: 1;
                        }
                    }

                    /* --------------------------------------- LINKTREE */
                    .linktree {
                        display: flex;
                        flex-direction: column;
                        height: auto;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .linktree-expert {
                        margin: 1rem 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    .linktree-avatar {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        object-fit: cover;
                        border: var(--border);
                        padding: 3px;
                        backdrop-filter: blur(3px);
                        -webkit-backdrop-filter: blur(3px);
                    }

                    .linktree-name {
                        color: var(--linktree-name);
                        font-size: 1.3rem;
                        font-weight: bold;
                        margin-bottom: 5px;
                        letter-spacing: .1rem;
                    }

                    .linktree-verified-icon {
                        width: 25px;
                        position: relative;
                        top: .25rem;
                    }

                    .linktree-email {
                        color: var(--linktree-email);
                        opacity: 85%;
                    }

                    .linktree-icon-container {
                        display: flex;
                        gap: 1rem;
                        font-size: 20px;
                        text-decoration: none;
                        margin: .5rem 0;
                        z-index: 998;

                    }

                    .linktree-icon-container a {
                        color: var(--linktree-icon);
                        margin-top: 5px;
                        cursor: pointer;
                        transition: transform 0.3s ease, color 0.3s ease;
                    }

                    .linktree-icon-container a:hover {
                        color: var(--linktree-icon-hover);
                        transform: scale(1.5);
                    }

                    .linktree-role {
                        color: var(--linktree-role);
                        width: 320px;
                        text-align: center;

                    }

                    .linktree-icon-role {
                        position: relative;
                        left: 5px;
                        width: 20px;
                        top: 3px;

                    }

                    /* --------------------------------------- HR */
                    hr {
                        border: none;
                        height: 2px;
                        background: linear-gradient(to right, transparent, var(--hr), transparent);
                        margin: 0rem auto;
                        margin-top: .5rem;
                        margin-bottom: 1em;
                        width: 50%;
                    }

                    .linktree-btn-container {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        width: 100%;
                        max-width: 320px;
                        margin: 0 auto;
                        margin-bottom: .5rem;

                    }

                    .linktree-btn {
                        align-items: center;
                        display: flex;
                        align-items: center;
                        gap: .5rem;
                        border: var(--border);
                        padding: 0.6rem .5rem;
                        text-decoration: none;
                        font-weight: 600;
                        font-size: .9rem;
                        transition: background-color 0.3s ease;
                        letter-spacing: .1rem;
                        border-radius: 3rem;
                        transition: transform 0.3s ease, color 0.3s ease;
                        backdrop-filter: blur(3px);
                        -webkit-backdrop-filter: blur(3px);
                    }

                    .linktree-btn:hover {
                        background-color: var(--linktree-btn-hover);
                        transform: scale(1.1);
                    }

                    .linktree-btn-photo {
                        flex-shrink: 0;
                        justify-content: center;
                        align-items: center;
                        padding: 3px;
                        border-radius: 100%;
                        border: var(--border);
                    }

                    .linktree-btn-photo img {
                        height: 36px;
                        height: 36px;
                        object-fit: contain;
                        border-radius: 100%;
                    }

                    .linktree-btn-txt-desc {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        gap: 3px;
                    }

                    .linktree-btn-title {
                        color: var(--linktree-btn-title);
                    }

                    .linktree-btn-description {
                        font-weight: normal;
                        font-size: 12px;
                        color: var(--linktree-btn-description);
                    }

                    .linktree-footer {
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        font-size: 10px;
                        padding-bottom: 1rem;
                        color: var(--linktree-footer);
                        text-align: center;
                        z-index: 999;
                        letter-spacing: .3rem;
                    }