:root {
    --bg: #070709;
    --text: #ffffff;
    --muted: rgba(255, 255, 255, .66);
    --accent: #ff3d73;
    --accent-2: #ff6a95;
    --border: rgba(255, 255, 255, .12);

    --ticker-height: 48px;
    --footer-height: 44px;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    background: var(--bg);
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* =========================================================
   VIDEO BACKGROUND
   ========================================================= */

.video-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #050507;
	pointer-events: none;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
	display: block;
    filter: saturate(.9) contrast(1.05);
}

.video-background .overlay {
    position: absolute;
    inset: 0;
	z-index: 1;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 48, 103, .16),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(4, 4, 7, .46) 0%,
            rgba(4, 4, 7, .66) 55%,
            rgba(4, 4, 7, .96) 100%
        );
    pointer-events: none;
}

/* =========================================================
   MAIN HERO
   ========================================================= */

.container {
    position: relative;
    z-index: 2;

    width: min(92%, 560px);

    min-height:
        calc(
            100svh
            - var(--ticker-height)
            - var(--footer-height)
        );

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
        60px
        0
        calc(
            var(--ticker-height)
            + var(--footer-height)
            + 30px
        );
}

.container::before {
    content: "PRIVATE • EXCLUSIVE • ONLINE";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;
    padding: 8px 14px;

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;

    background: rgba(255, 255, 255, .06);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: rgba(255, 255, 255, .72);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    white-space: nowrap;
}

.container h1 {
    margin: 0;

    font-size: clamp(30px, 6vw, 56px);
    line-height: 1;

    font-weight: 800;
    letter-spacing: -2px;

    text-shadow:
        0 8px 35px rgba(0, 0, 0, .5);
}

.container h1::after {
    content: "";

    display: block;

    width: 48px;
    height: 3px;

    margin: 18px auto 19px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-2)
        );

    box-shadow:
        0 0 18px rgba(255, 61, 115, .5);
}

.container > p {
    margin: 0 0 28px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.5;

    letter-spacing: .2px;
}

/* =========================================================
   CTA
   ========================================================= */

.join-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: min(88vw, 300px);
    min-height: 58px;

    padding: 0 28px;

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            #e91e63
        );

    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;

    box-shadow:
        0 14px 40px rgba(255, 35, 95, .28),
        inset 0 1px 0 rgba(255, 255, 255, .25);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;

    overflow: hidden;

    -webkit-tap-highlight-color: transparent;
}

.join-button::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, .22) 50%,
            transparent 80%
        );

    transform: translateX(-120%);
    transition: transform .65s ease;
}

.join-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 48px rgba(255, 35, 95, .4),
        inset 0 1px 0 rgba(255, 255, 255, .3);

    filter: brightness(1.05);
}

.join-button:hover::before {
    transform: translateX(120%);
}

.join-button:active {
    transform: scale(.985);
}

/* =========================================================
   AUTO REDIRECT MESSAGE
   ========================================================= */

.auto-redirect-msg {
    align-items: center;
    justify-content: center;
    gap: 11px;

    width: min(90vw, 430px);
    min-height: 52px;

    padding: 12px 16px;
    margin-top: 2px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: rgba(10, 10, 14, .58);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: rgba(255, 255, 255, .78);

    font-size: 12px;
    line-height: 1.4;

    text-align: left;
}

.spinner {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    border:
        2px solid rgba(255, 255, 255, .18);

    border-top-color: var(--accent);

    border-radius: 50%;

    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RUNNING TEXT
   ========================================================= */

#runningTextContainer {
    position: fixed;

    left: 0;
    right: 0;
    bottom: var(--footer-height);

    z-index: 5;

    height: var(--ticker-height);

    display: flex;
    align-items: center;

    overflow: hidden;

    border-top:
        1px solid rgba(255, 255, 255, .08);

    border-bottom:
        1px solid rgba(255, 255, 255, .08);

    background:
        rgba(5, 5, 8, .58);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#runningText {
    display: inline-flex;

    width: max-content;

    padding: 10px 0;

    white-space: nowrap;

    will-change: transform;

    animation:
        marquee 120s linear infinite;

    font-size: 11px;
}

.mq-name {
    color: rgba(255, 255, 255, .9);
    font-weight: 700;
}

.mq-action {
    color: rgba(255, 255, 255, .55);
    margin-left: 3px;
}

.twemoji {
    width: 14px;
    height: 14px;

    vertical-align: -3px;

    margin-left: 2px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 6;

    height: var(--footer-height);

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        max(
            12px,
            env(safe-area-inset-right)
        )
        0
        max(
            12px,
            env(safe-area-inset-left)
        );

    background:
        rgba(4, 4, 7, .84);

    border-top:
        1px solid rgba(255, 255, 255, .07);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.footer p {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin: 0;

    color: rgba(255, 255, 255, .4);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.2px;

    text-align: center;
}

.footer svg {
    flex: 0 0 auto;
    opacity: .72;
}

/* =========================================================
   SMALL PHONES
   320–390px
   ========================================================= */

@media (max-width: 390px) {

    :root {
        --ticker-height: 44px;
        --footer-height: 40px;
    }

    .container {
        width: 90%;

        padding:
            48px
            0
            calc(
                var(--ticker-height)
                + var(--footer-height)
                + 22px
            );
    }

    .container::before {
        margin-bottom: 17px;
        padding: 7px 11px;

        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .container h1 {
        font-size: clamp(27px, 9vw, 34px);
        letter-spacing: -1.2px;
    }

    .container h1::after {
        width: 40px;
        height: 2px;

        margin:
            14px
            auto
            15px;
    }

    .container > p {
        margin-bottom: 23px;
        font-size: 13px;
    }

    .join-button {
        width: min(86vw, 285px);
        min-height: 54px;

        border-radius: 14px;

        font-size: 12px;
        letter-spacing: 1.3px;
    }

    .auto-redirect-msg {
        width: 90vw;
        min-height: 48px;

        padding: 10px 13px;

        font-size: 10px;
    }

    #runningText {
        font-size: 9px;
    }

    .twemoji {
        width: 12px;
        height: 12px;
    }

    .footer p {
        font-size: 7px;
        letter-spacing: 1px;
    }
}

/* =========================================================
   VERY SHORT PHONES
   ========================================================= */

@media (max-height: 680px) and (max-width: 600px) {

    .container {
        padding-top: 35px;
    }

    .container::before {
        margin-bottom: 12px;
    }

    .container h1 {
        font-size: 29px;
    }

    .container h1::after {
        margin-top: 11px;
        margin-bottom: 12px;
    }

    .container > p {
        margin-bottom: 18px;
    }

    .join-button {
        min-height: 50px;
    }
}

/* =========================================================
   LARGE PHONES
   391–600px
   ========================================================= */

@media (min-width: 391px) and (max-width: 600px) {

    .container {
        width: min(90%, 500px);
    }

    .container h1 {
        font-size: clamp(34px, 8vw, 45px);
    }

    .join-button {
        width: min(82vw, 320px);
    }
}

/* =========================================================
   TABLET PORTRAIT
   601–900px
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    :root {
        --ticker-height: 52px;
        --footer-height: 48px;
    }

    .container {
        width: min(82%, 650px);

        padding:
            70px
            0
            calc(
                var(--ticker-height)
                + var(--footer-height)
                + 35px
            );
    }

    .container::before {
        padding: 9px 16px;
        font-size: 11px;
    }

    .container h1 {
        font-size: clamp(44px, 7vw, 58px);
    }

    .container > p {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .join-button {
        width: 300px;
        min-height: 60px;
        border-radius: 17px;
    }

    .auto-redirect-msg {
        font-size: 13px;
    }

    #runningText {
        font-size: 12px;
    }

    .footer p {
        font-size: 9px;
    }
}

/* =========================================================
   IPAD / TABLET LANDSCAPE
   ========================================================= */

@media (min-width: 901px) and (max-width: 1200px) {

    .container {
        width: min(72%, 680px);

        padding:
            65px
            0
            calc(
                var(--ticker-height)
                + var(--footer-height)
                + 35px
            );
    }

    .container h1 {
        font-size: clamp(48px, 5vw, 64px);
    }

    .container > p {
        font-size: 17px;
    }

    .join-button {
        width: 310px;
    }
}

/* =========================================================
   IPAD PORTRAIT
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    .container {
        min-height:
            calc(
                100svh
                - var(--ticker-height)
                - var(--footer-height)
            );

        padding-top: 80px;
    }

    .container h1 {
        font-size: clamp(48px, 7vw, 62px);
    }

    .container > p {
        font-size: 17px;
        margin-bottom: 34px;
    }

    .join-button {
        width: 320px;
        min-height: 62px;
    }
}

/* =========================================================
   IPAD LANDSCAPE
   ========================================================= */

@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {

    .container {
        min-height:
            calc(
                100svh
                - var(--ticker-height)
                - var(--footer-height)
            );

        padding-top: 35px;
        padding-bottom: 30px;
    }

    .container::before {
        margin-bottom: 13px;
    }

    .container h1 {
        font-size: clamp(40px, 5vw, 55px);
    }

    .container h1::after {
        margin-top: 14px;
        margin-bottom: 15px;
    }

    .container > p {
        margin-bottom: 23px;
    }

    .join-button {
        min-height: 56px;
    }
}

/* =========================================================
   SAFE AREA — IPHONE / IPAD
   ========================================================= */

@supports (padding: max(0px)) {

    .container {
        padding-left:
            max(
                0px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                0px,
                env(safe-area-inset-right)
            );
    }

    #runningTextContainer {
        padding-left:
            env(safe-area-inset-left);

        padding-right:
            env(safe-area-inset-right);
    }

    .footer {
        padding-bottom:
            env(safe-area-inset-bottom);
    }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .join-button:hover {
        transform: none;
        filter: none;
    }

    .join-button:hover::before {
        transform: translateX(-120%);
    }

    .join-button:active {
        transform: scale(.975);
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #runningText,
    .spinner {
        animation: none;
    }

    .join-button {
        transition: none;
    }
}