@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,100..1000&display=swap");

:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-dark-gray: #1c1c1c;
    --color-button: #282828;
    --color-gray: #9b9b9b;
    --color-soft-white: #fafafa;
    --color-magenta: #AF00AF;
    --color-cyan: #00CDFF;

    --me2-black: var(--color-black);
    --me2-white: var(--color-white);
    --me2-dark-gray: var(--color-dark-gray);
    --me2-button: var(--color-button);
    --me2-gray: var(--color-gray);
    --me2-soft-white: var(--color-soft-white);
    --me2-magenta: var(--color-magenta);
    --me2-cyan: var(--color-cyan);

    --me2-border: var(--color-gray);
    --me2-text: var(--color-black);
    --me2-text-light: var(--color-white);
    --me2-muted: var(--color-gray);

    --me2-page-padding: clamp(0.75rem, 1.6667vw, 1.5rem);
    --me2-footer-progress: 0;
    --me2-hero-cta-y: clamp(8rem, 15vw, 12rem);

    --me2-transition: 220ms ease;
    --me2-font: "Google Sans Flex", "Google Sans", Arial, sans-serif;
}

@keyframes me2GradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes me2HeroSeed {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
        filter: blur(0.25rem);
    }

    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.72);
        filter: blur(0);
    }

    34% {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }

    60% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(0.84);
        filter: blur(0);
    }

    100% {
        opacity: 0.18;
        transform: translate(-50%, -50%) scale(0.54);
        filter: blur(0.375rem);
    }
}

@keyframes me2HeroSeedRing {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }

    14% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.52);
    }

    44% {
        opacity: 0.18;
        transform: translate(-50%, -50%) scale(1.18);
    }

    72% {
        opacity: 0.34;
        transform: translate(-50%, -50%) scale(0.74);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.1);
    }
}

@keyframes me2HeroParticleForm {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.12);
        filter: blur(0.375rem);
    }

    12% {
        opacity: var(--particle-opacity);
        transform: translate3d(calc(var(--spread-x) * 0.28), calc(var(--spread-y) * 0.28), 0) scale(0.72);
        filter: blur(0.125rem);
    }

    38% {
        opacity: calc(var(--particle-opacity) + 0.08);
        transform: translate3d(var(--spread-x), var(--spread-y), 0) scale(var(--particle-scale));
        filter: blur(0);
    }

    64% {
        opacity: 0.9;
        transform: translate3d(var(--hold-x), var(--hold-y), 0) scale(0.86);
        filter: blur(0);
    }

    82% {
        opacity: 0.78;
        transform: translate3d(var(--logo-x), var(--logo-y), 0) scale(0.5);
        filter: blur(0.0625rem);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--logo-x), var(--logo-y), 0) scale(0.16);
        filter: blur(0.375rem);
    }
}

@keyframes me2HeroLogoAuraIntro {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.76);
    }

    58% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.76);
    }

    80% {
        opacity: 0.46;
        transform: translate(-50%, -50%) scale(1.12);
    }

    100% {
        opacity: 0.28;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes me2HeroLogoAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.76);
        filter: blur(0.5rem);
    }

    62% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.76);
        filter: blur(0.5rem);
    }

    82% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.035);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}

@keyframes me2HeroLogoSweep {
    0% {
        background-position: 0% 50%;
        opacity: 0.52;
    }

    50% {
        background-position: 100% 50%;
        opacity: 0.9;
    }

    100% {
        background-position: 0% 50%;
        opacity: 0.52;
    }
}

@keyframes me2HeroShine {
    0% {
        transform: translateX(-130%) rotate(14deg);
        opacity: 0;
    }

    22% {
        opacity: 0.4;
    }

    46% {
        opacity: 0.12;
    }

    100% {
        transform: translateX(130%) rotate(14deg);
        opacity: 0;
    }
}

@keyframes me2HeroCtaAppear {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(var(--me2-hero-cta-y) + 1rem), 0);
        filter: blur(0.1875rem);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, var(--me2-hero-cta-y), 0);
        filter: blur(0);
    }
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--color-black);
    scroll-behavior: smooth;
    scroll-snap-type: none;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--me2-font);
    font-weight: 300;
    color: var(--me2-text);
    background: var(--color-black);
    overflow-x: hidden;
}

body.me2-no-scroll {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

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

::selection {
    color: var(--color-black);
    background: var(--color-white);
}

.me2-main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--color-black);
}

.me2-safe-area {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: var(--me2-page-padding);
    padding-right: var(--me2-page-padding);
}

.me2-hero-page {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 28%),
        var(--color-black);
}

.me2-hero-formation {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: var(--color-black);
    pointer-events: none;
}

.me2-hero-formation::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0.9) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.58) 100%);
    pointer-events: none;
}

.me2-hero-formation::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    background: var(--color-black);
    opacity: calc(var(--me2-footer-progress) * 0.62);
    pointer-events: none;
}

.me2-hero-seed {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: clamp(1.75rem, 3.5vw, 3.5rem);
    height: clamp(1.75rem, 3.5vw, 3.5rem);
    display: block;
    border-radius: 999rem;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.78) 18%, rgba(0, 205, 255, 0.38) 42%, rgba(175, 0, 175, 0.34) 62%, rgba(255, 255, 255, 0) 78%);
    box-shadow:
        0 0 1.5rem rgba(255, 255, 255, 0.34),
        0 0 3rem rgba(0, 205, 255, 0.22),
        0 0 3rem rgba(175, 0, 175, 0.2);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
    animation: me2HeroSeed 4.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
}

.me2-hero-seed-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: clamp(7rem, 18vw, 18rem);
    height: clamp(7rem, 18vw, 18rem);
    display: block;
    border: 0.0625rem solid rgba(255, 255, 255, 0.22);
    border-radius: 999rem;
    box-shadow:
        0 0 3rem rgba(255, 255, 255, 0.08),
        0 0 5rem rgba(0, 205, 255, 0.1),
        0 0 5rem rgba(175, 0, 175, 0.1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    animation: me2HeroSeedRing 4.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
}

.me2-hero-particle {
    --particle-size: 0.5rem;
    --particle-opacity: 0.68;
    --particle-scale: 1;
    --spread-x: 0rem;
    --spread-y: 0rem;
    --hold-x: 0rem;
    --hold-y: 0rem;
    --logo-x: 0rem;
    --logo-y: 0rem;

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: var(--particle-size);
    height: var(--particle-size);
    display: block;
    border-radius: 999rem;
    opacity: 0;
    pointer-events: none;
    animation: me2HeroParticleForm 4.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter;
}

.me2-hero-particle.is-magenta {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(175, 0, 175, 0.84) 42%, rgba(175, 0, 175, 0) 72%);
    box-shadow:
        0 0 0.75rem rgba(255, 255, 255, 0.12),
        0 0 1.5rem rgba(175, 0, 175, 0.36);
}

.me2-hero-particle.is-cyan {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(0, 205, 255, 0.84) 42%, rgba(0, 205, 255, 0) 72%);
    box-shadow:
        0 0 0.75rem rgba(255, 255, 255, 0.12),
        0 0 1.5rem rgba(0, 205, 255, 0.38);
}

.me2-hero-particle.is-white {
    --particle-opacity: 0.58;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0) 72%);
    box-shadow:
        0 0 0.75rem rgba(255, 255, 255, 0.2),
        0 0 1.5rem rgba(255, 255, 255, 0.1);
}

.me2-hero-particle-one {
    --particle-size: 0.75rem;
    --spread-x: -18rem;
    --spread-y: -8rem;
    --hold-x: -8.5rem;
    --hold-y: -5rem;
    --logo-x: -6.75rem;
    --logo-y: -4.5rem;
    animation-delay: 0.02s;
}

.me2-hero-particle-two {
    --particle-size: 0.5rem;
    --spread-x: 16rem;
    --spread-y: 7rem;
    --hold-x: 7.5rem;
    --hold-y: 4.25rem;
    --logo-x: 6.25rem;
    --logo-y: 4rem;
    animation-delay: 0.08s;
}

.me2-hero-particle-three {
    --particle-size: 0.375rem;
    --spread-x: -7rem;
    --spread-y: -13rem;
    --hold-x: -4rem;
    --hold-y: -7.25rem;
    --logo-x: -3.25rem;
    --logo-y: -6rem;
    animation-delay: 0.16s;
}

.me2-hero-particle-four {
    --particle-size: 0.5625rem;
    --spread-x: 12rem;
    --spread-y: -11rem;
    --hold-x: 5.5rem;
    --hold-y: -6.25rem;
    --logo-x: 4.5rem;
    --logo-y: -5.25rem;
    animation-delay: 0.12s;
}

.me2-hero-particle-five {
    --particle-size: 0.6875rem;
    --spread-x: -15rem;
    --spread-y: 9rem;
    --hold-x: -6.75rem;
    --hold-y: 5.5rem;
    --logo-x: -5.5rem;
    --logo-y: 4.75rem;
    animation-delay: 0.04s;
}

.me2-hero-particle-six {
    --particle-size: 0.3125rem;
    --spread-x: 6rem;
    --spread-y: 13rem;
    --hold-x: 3.5rem;
    --hold-y: 7rem;
    --logo-x: 2.75rem;
    --logo-y: 5.75rem;
    animation-delay: 0.22s;
}

.me2-hero-particle-seven {
    --particle-size: 0.5rem;
    --spread-x: -22rem;
    --spread-y: -1.25rem;
    --hold-x: -9.25rem;
    --hold-y: -0.75rem;
    --logo-x: -7.75rem;
    --logo-y: -0.5rem;
    animation-delay: 0.18s;
}

.me2-hero-particle-eight {
    --particle-size: 0.625rem;
    --spread-x: 22rem;
    --spread-y: 1.5rem;
    --hold-x: 9.25rem;
    --hold-y: 0.875rem;
    --logo-x: 7.75rem;
    --logo-y: 0.625rem;
    animation-delay: 0.1s;
}

.me2-hero-particle-nine {
    --particle-size: 0.375rem;
    --spread-x: -4rem;
    --spread-y: 17rem;
    --hold-x: -2.5rem;
    --hold-y: 8.5rem;
    --logo-x: -2rem;
    --logo-y: 6.75rem;
    animation-delay: 0.3s;
}

.me2-hero-particle-ten {
    --particle-size: 0.4375rem;
    --spread-x: 4rem;
    --spread-y: -17rem;
    --hold-x: 2.5rem;
    --hold-y: -8.5rem;
    --logo-x: 2rem;
    --logo-y: -6.75rem;
    animation-delay: 0.26s;
}

.me2-hero-particle-eleven {
    --particle-size: 0.25rem;
    --spread-x: -11rem;
    --spread-y: 14rem;
    --hold-x: -5.25rem;
    --hold-y: 7rem;
    --logo-x: -4.25rem;
    --logo-y: 5.75rem;
    animation-delay: 0.34s;
}

.me2-hero-particle-twelve {
    --particle-size: 0.5625rem;
    --spread-x: 14rem;
    --spread-y: -6rem;
    --hold-x: 6.5rem;
    --hold-y: -3.5rem;
    --logo-x: 5.25rem;
    --logo-y: -2.75rem;
    animation-delay: 0.2s;
}

.me2-hero-particle-thirteen {
    --particle-size: 0.6875rem;
    --spread-x: -14rem;
    --spread-y: 4rem;
    --hold-x: -6.25rem;
    --hold-y: 2.25rem;
    --logo-x: -5rem;
    --logo-y: 1.75rem;
    animation-delay: 0.06s;
}

.me2-hero-particle-fourteen {
    --particle-size: 0.3125rem;
    --spread-x: 10rem;
    --spread-y: 15rem;
    --hold-x: 4.75rem;
    --hold-y: 7.25rem;
    --logo-x: 3.875rem;
    --logo-y: 6rem;
    animation-delay: 0.36s;
}

.me2-hero-particle-fifteen {
    --particle-size: 0.5rem;
    --spread-x: -20rem;
    --spread-y: 5rem;
    --hold-x: -8.5rem;
    --hold-y: 2.75rem;
    --logo-x: -7rem;
    --logo-y: 2.25rem;
    animation-delay: 0.14s;
}

.me2-hero-particle-sixteen {
    --particle-size: 0.4375rem;
    --spread-x: 20rem;
    --spread-y: -5rem;
    --hold-x: 8.5rem;
    --hold-y: -2.75rem;
    --logo-x: 7rem;
    --logo-y: -2.25rem;
    animation-delay: 0.24s;
}

.me2-hero-particle-seventeen {
    --particle-size: 0.375rem;
    --spread-x: -2rem;
    --spread-y: -20rem;
    --hold-x: -1.25rem;
    --hold-y: -9rem;
    --logo-x: -1rem;
    --logo-y: -7rem;
    animation-delay: 0.4s;
}

.me2-hero-particle-eighteen {
    --particle-size: 0.5rem;
    --spread-x: 2rem;
    --spread-y: 20rem;
    --hold-x: 1.25rem;
    --hold-y: 9rem;
    --logo-x: 1rem;
    --logo-y: 7rem;
    animation-delay: 0.28s;
}

.me2-hero-particle-nineteen {
    --particle-size: 0.3125rem;
    --spread-x: -17rem;
    --spread-y: -12rem;
    --hold-x: -7.25rem;
    --hold-y: -6rem;
    --logo-x: -5.875rem;
    --logo-y: -4.75rem;
    animation-delay: 0.44s;
}

.me2-hero-particle-twenty {
    --particle-size: 0.625rem;
    --spread-x: 17rem;
    --spread-y: 12rem;
    --hold-x: 7.25rem;
    --hold-y: 6rem;
    --logo-x: 5.875rem;
    --logo-y: 4.75rem;
    animation-delay: 0.32s;
}

.me2-hero-particle-twenty-one {
    --particle-size: 0.375rem;
    --spread-x: -24rem;
    --spread-y: 0rem;
    --hold-x: -10rem;
    --hold-y: 0rem;
    --logo-x: -8.25rem;
    --logo-y: 0rem;
    animation-delay: 0.5s;
}

.me2-hero-particle-twenty-two {
    --particle-size: 0.3125rem;
    --spread-x: 24rem;
    --spread-y: 0rem;
    --hold-x: 10rem;
    --hold-y: 0rem;
    --logo-x: 8.25rem;
    --logo-y: 0rem;
    animation-delay: 0.46s;
}

.me2-hero-particle-twenty-three {
    --particle-size: 0.5rem;
    --spread-x: -9rem;
    --spread-y: -18rem;
    --hold-x: -4.5rem;
    --hold-y: -8.25rem;
    --logo-x: -3.75rem;
    --logo-y: -6.625rem;
    animation-delay: 0.56s;
}

.me2-hero-particle-twenty-four {
    --particle-size: 0.5rem;
    --spread-x: 9rem;
    --spread-y: 18rem;
    --hold-x: 4.5rem;
    --hold-y: 8.25rem;
    --logo-x: 3.75rem;
    --logo-y: 6.625rem;
    animation-delay: 0.52s;
}

.me2-hero-particle-twenty-five {
    --particle-size: 0.25rem;
    --spread-x: -13rem;
    --spread-y: -2rem;
    --hold-x: -5.75rem;
    --hold-y: -1rem;
    --logo-x: -4.75rem;
    --logo-y: -0.75rem;
    animation-delay: 0.62s;
}

.me2-hero-particle-twenty-six {
    --particle-size: 0.3125rem;
    --spread-x: 13rem;
    --spread-y: 2rem;
    --hold-x: 5.75rem;
    --hold-y: 1rem;
    --logo-x: 4.75rem;
    --logo-y: 0.75rem;
    animation-delay: 0.58s;
}

.me2-hero-particle-twenty-seven {
    --particle-size: 0.5625rem;
    --spread-x: -5rem;
    --spread-y: 9rem;
    --hold-x: -2.5rem;
    --hold-y: 4.75rem;
    --logo-x: -2rem;
    --logo-y: 3.875rem;
    animation-delay: 0.38s;
}

.me2-hero-particle-twenty-eight {
    --particle-size: 0.375rem;
    --spread-x: 5rem;
    --spread-y: -9rem;
    --hold-x: 2.5rem;
    --hold-y: -4.75rem;
    --logo-x: 2rem;
    --logo-y: -3.875rem;
    animation-delay: 0.42s;
}

.me2-hero-particle-twenty-nine {
    --particle-size: 0.4375rem;
    --spread-x: -18rem;
    --spread-y: 12rem;
    --hold-x: -7.5rem;
    --hold-y: 6.25rem;
    --logo-x: -6.125rem;
    --logo-y: 5rem;
    animation-delay: 0.68s;
}

.me2-hero-particle-thirty {
    --particle-size: 0.3125rem;
    --spread-x: 18rem;
    --spread-y: -12rem;
    --hold-x: 7.5rem;
    --hold-y: -6.25rem;
    --logo-x: 6.125rem;
    --logo-y: -5rem;
    animation-delay: 0.64s;
}

.me2-hero-particle-thirty-one {
    --particle-size: 0.375rem;
    --spread-x: -1rem;
    --spread-y: 12rem;
    --hold-x: -0.625rem;
    --hold-y: 5.75rem;
    --logo-x: -0.5rem;
    --logo-y: 4.75rem;
    animation-delay: 0.72s;
}

.me2-hero-particle-thirty-two {
    --particle-size: 0.5rem;
    --spread-x: 1rem;
    --spread-y: -12rem;
    --hold-x: 0.625rem;
    --hold-y: -5.75rem;
    --logo-x: 0.5rem;
    --logo-y: -4.75rem;
    animation-delay: 0.76s;
}

.me2-hero-particle-thirty-three {
    --particle-size: 0.25rem;
    --spread-x: -8rem;
    --spread-y: 2rem;
    --hold-x: -3.75rem;
    --hold-y: 1rem;
    --logo-x: -3rem;
    --logo-y: 0.75rem;
    animation-delay: 0.8s;
}

.me2-hero-particle-thirty-four {
    --particle-size: 0.3125rem;
    --spread-x: 8rem;
    --spread-y: -2rem;
    --hold-x: 3.75rem;
    --hold-y: -1rem;
    --logo-x: 3rem;
    --logo-y: -0.75rem;
    animation-delay: 0.84s;
}

.me2-hero-particle-thirty-five {
    --particle-size: 0.4375rem;
    --spread-x: -6rem;
    --spread-y: -5rem;
    --hold-x: -3rem;
    --hold-y: -2.5rem;
    --logo-x: -2.5rem;
    --logo-y: -2rem;
    animation-delay: 0.88s;
}

.me2-hero-particle-thirty-six {
    --particle-size: 0.375rem;
    --spread-x: 6rem;
    --spread-y: 5rem;
    --hold-x: 3rem;
    --hold-y: 2.5rem;
    --logo-x: 2.5rem;
    --logo-y: 2rem;
    animation-delay: 0.92s;
}

.me2-hero-logo-aura {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: clamp(18rem, 42vw, 44rem);
    height: clamp(18rem, 42vw, 44rem);
    display: block;
    border-radius: 999rem;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(0, 205, 255, 0.18) 28%, rgba(175, 0, 175, 0.16) 48%, rgba(0, 0, 0, 0) 72%);
    filter: blur(1.75rem);
    opacity: 0;
    animation: me2HeroLogoAuraIntro 4.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
}

.me2-hero-logo-shell {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: clamp(16rem, 36vw, 39rem);
    height: clamp(16rem, 36vw, 39rem);
    display: block;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.76);
    animation: me2HeroLogoAppear 4.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.me2-hero-logo-base,
.me2-hero-logo-gradient,
.me2-hero-logo-shine {
    position: absolute;
    inset: 0;
    display: block;
    -webkit-mask: url("/assets/me2.svg") center center / contain no-repeat;
    mask: url("/assets/me2.svg") center center / contain no-repeat;
}

.me2-hero-logo-base {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.055) 100%);
    opacity: 0.86;
    filter:
        drop-shadow(0 0 1.25rem rgba(255, 255, 255, 0.16))
        drop-shadow(0 0 4rem rgba(0, 205, 255, 0.16));
}

.me2-hero-logo-gradient {
    z-index: 2;
    background: linear-gradient(120deg, var(--color-magenta) 0%, var(--color-cyan) 44%, var(--color-white) 54%, var(--color-magenta) 100%);
    background-size: 280% 280%;
    background-position: 0% 50%;
    mix-blend-mode: screen;
    animation: me2HeroLogoSweep 6.5s ease-in-out 3.55s infinite;
}

.me2-hero-logo-shine {
    z-index: 3;
    overflow: hidden;
}

.me2-hero-logo-shine::before {
    content: "";
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: 38%;
    width: 18%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0));
    filter: blur(0.5rem);
    animation: me2HeroShine 5.8s ease-in-out 3.75s infinite;
}

.me2-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

.me2-hero-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-black);
    opacity: calc(var(--me2-footer-progress) * 0.62);
    pointer-events: none;
}

.me2-hero-content {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(8rem, 11vw, 12rem);
    padding-bottom: clamp(2rem, 5vw, 5rem);
}

.me2-hero-copy {
    width: 100%;
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    opacity: 0;
    transform: translate3d(0, calc(var(--me2-hero-cta-y) + 1rem), 0);
    filter: blur(0.1875rem);
    animation: me2HeroCtaAppear 720ms cubic-bezier(0.16, 1, 0.3, 1) 3.85s forwards;
}

.me2-hero-button {
    min-height: clamp(3rem, 3.6vw, 3.75rem);
    padding: 0 clamp(1.25rem, 2vw, 2rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid transparent;
    border-radius: 0.5rem;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-cyan) 50%, var(--color-magenta) 100%);
    background-size: 260% 260%;
    background-position: 0% 50%;
    animation: me2GradientFlow 6.5s ease-in-out infinite;
    box-shadow:
        0 1rem 3rem rgba(0, 0, 0, 0.42),
        0 0 2rem rgba(0, 205, 255, 0.16),
        0 0 2rem rgba(175, 0, 175, 0.14);
    font-size: clamp(0.875rem, 1.111vw, 1rem);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 400;
    transition:
        color var(--me2-transition),
        border-color var(--me2-transition),
        opacity var(--me2-transition),
        box-shadow var(--me2-transition);
}

.me2-hero-button:hover {
    color: var(--color-white);
    border-color: var(--color-white);
    opacity: 0.96;
    box-shadow:
        0 1rem 3rem rgba(0, 0, 0, 0.5),
        0 0 2.5rem rgba(0, 205, 255, 0.2),
        0 0 2.5rem rgba(175, 0, 175, 0.18);
}

.me2-hero-login-mobile {
    position: relative;
    width: fit-content;
    margin-top: 1rem;
    display: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 300;
    transition: color var(--me2-transition);
}

.me2-hero-login-mobile::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.375rem;
    width: 100%;
    height: 0.0625rem;
    background: var(--color-white);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--me2-transition);
}

.me2-hero-login-mobile:hover {
    color: var(--color-white);
}

.me2-hero-login-mobile:hover::after {
    transform: scaleX(1);
}

@media (max-width: 64rem) {
    :root {
        --me2-hero-cta-y: clamp(7rem, 22vw, 10.5rem);
    }

    .me2-hero-logo-shell {
        width: clamp(17rem, 58vw, 34rem);
        height: clamp(17rem, 58vw, 34rem);
    }

    .me2-hero-logo-aura {
        width: clamp(19rem, 64vw, 38rem);
        height: clamp(19rem, 64vw, 38rem);
    }

    .me2-hero-login-mobile {
        display: inline-flex;
    }
}

@media (max-width: 48rem) {
    :root {
        --me2-hero-cta-y: clamp(7rem, 28vw, 9.5rem);
    }

    .me2-hero-content {
        padding-top: 7rem;
        padding-bottom: 2rem;
    }

    .me2-hero-copy {
        max-width: 35rem;
    }

    .me2-hero-logo-shell {
        width: clamp(15rem, 76vw, 26rem);
        height: clamp(15rem, 76vw, 26rem);
    }

    .me2-hero-logo-aura {
        width: clamp(18rem, 92vw, 30rem);
        height: clamp(18rem, 92vw, 30rem);
    }

    .me2-hero-particle {
        --particle-size: 0.3125rem;
    }

    .me2-hero-button {
        min-height: 3.25rem;
        padding: 0 1.25rem;
        font-size: 0.875rem;
    }

    .me2-hero-login-mobile {
        margin-top: 0.875rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 30rem) {
    :root {
        --me2-hero-cta-y: clamp(6.75rem, 30vw, 8.5rem);
    }

    .me2-hero-logo-shell {
        width: clamp(14rem, 82vw, 22rem);
        height: clamp(14rem, 82vw, 22rem);
    }

    .me2-hero-button {
        min-height: 3.125rem;
        padding: 0 1.125rem;
    }
}

@media (max-width: 12.5rem) {
    body {
        width: 100vw;
        min-width: 0;
        min-height: 100vh;
        overflow: hidden;
        background: var(--color-black);
    }

    body > *:not(#me2-navbar-container) {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .me2-hero-seed,
    .me2-hero-seed-ring,
    .me2-hero-particle,
    .me2-hero-logo-aura,
    .me2-hero-logo-shell,
    .me2-hero-logo-gradient,
    .me2-hero-logo-shine::before,
    .me2-hero-copy,
    .me2-hero-button {
        animation: none;
    }

    .me2-hero-seed {
        opacity: 0.18;
        transform: translate(-50%, -50%) scale(0.54);
        filter: blur(0.375rem);
    }

    .me2-hero-logo-aura {
        opacity: 0.28;
        transform: translate(-50%, -50%) scale(1);
    }

    .me2-hero-logo-shell {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: none;
    }

    .me2-hero-copy {
        opacity: 1;
        transform: translate3d(0, var(--me2-hero-cta-y), 0);
        filter: none;
    }
}