:root{
    --bg:#05070a;
    --bg2:#080c11;
    --white:#f7f7f4;
    --muted:#949ca5;

    --gold:#e6b761;
    --gold2:#ffd98c;
    --gold3:#9b6926;

    --line:rgba(255,255,255,.11);

    --scroll:0;
    --mx:0;
    --my:0;

    color-scheme:dark;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    overflow-x:hidden;

    background:
        #05070a;

    color:var(--white);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;
}

body,
button,
input{
    font-family:inherit;
}

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

img{
    max-width:100%;
}

button{
    cursor:pointer;
}

.skip-link{
    position:fixed;
    top:-100px;
    left:20px;

    z-index:10000;

    background:white;
    color:black;

    padding:12px 18px;
}

.skip-link:focus{
    top:20px;
}

.page-noise{
    position:fixed;
    inset:0;

    z-index:999;
    pointer-events:none;

    opacity:.018;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ================= HEADER ================= */

.site-header{
    position:absolute;

    top:0;
    left:0;
    right:0;

    height:92px;

    padding:
        0
        clamp(18px,4.6vw,72px);

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

    z-index:100;

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

    background:
        linear-gradient(
            180deg,
            rgba(3,6,10,.93),
            rgba(3,6,10,.42) 68%,
            transparent
        );
}

.brand-lockup{
    display:flex;
    align-items:center;

    gap:12px;
}

.brand-mark{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;
}

.brand-mark img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.brand-copy{
    display:flex;
    flex-direction:column;
}

.brand-copy strong{
    font-size:20px;

    line-height:1;

    font-weight:950;

    letter-spacing:.035em;
}

.brand-copy small{
    margin-top:6px;

    color:#a3a9ad;

    font-size:6.5px;

    font-weight:800;

    letter-spacing:.22em;
}

.header-right{
    display:flex;
    align-items:center;

    gap:26px;
}

.network-status{
    color:#aeb5ba;

    font-size:9px;

    font-weight:850;

    letter-spacing:.16em;
}

.network-status i{
    display:inline-block;

    width:7px;
    height:7px;

    margin-right:9px;

    border-radius:50%;

    background:var(--gold2);

    box-shadow:
        0 0 16px
        rgba(255,217,140,.75);
}

.header-cta{
    display:flex;
    align-items:center;

    gap:13px;

    border:
        1px solid
        rgba(230,183,97,.58);

    border-radius:999px;

    padding:12px 18px;

    color:#f1d39a;

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

    backdrop-filter:
        blur(12px);

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

    transition:
        background .25s,
        border-color .25s;
}

.header-cta:hover{
    background:
        rgba(230,183,97,.12);

    border-color:
        rgba(230,183,97,.92);
}


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

.hero{
    position:relative;

    min-height:
        max(900px,100svh);

    padding:
        146px
        22px
        110px;

    overflow:hidden;

    isolation:isolate;

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

    text-align:center;
}

.hero-world{
    position:absolute;
    inset:0;

    z-index:-3;

    overflow:hidden;
}

.hero-sky{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 51%,
            rgba(241,175,80,.14),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #08121c 0%,
            #070b10 48%,
            #05070a 100%
        );
}

.hero-arena{
    position:absolute;

    inset:
        25%
        -6%
        -4%;

    background:
        url('/assets/img/arena.webp?v=4')
        center 58%
        / cover
        no-repeat;

    filter:
        saturate(.94)
        contrast(1.08)
        brightness(.93);

    transform:
        translate3d(
            calc(var(--mx) * -12px),
            calc(
                var(--my) * -6px
                +
                var(--scroll) * 19px
            ),
            0
        )
        scale(
            calc(
                1.012
                +
                var(--scroll) * .022
            )
        );

    will-change:transform;
}

.portal-halo{
    position:absolute;

    left:50%;

    top:53%;

    border-radius:50%;

    pointer-events:none;

    transform:
        translate(-50%,-50%);
}

.portal-halo-one{
    width:min(48vw,670px);
    aspect-ratio:1;

    border:
        1px solid
        rgba(245,189,91,.14);

    box-shadow:
        0 0 120px
        rgba(227,157,57,.06);

    transform:
        translate(-50%,-50%)
        scale(
            calc(
                .95
                +
                var(--scroll) * .15
            )
        );
}

.portal-halo-two{
    width:min(33vw,470px);
    aspect-ratio:1;

    border:
        1px solid
        rgba(255,219,154,.11);

    filter:
        drop-shadow(
            0 0 36px
            rgba(227,157,57,.08)
        );
}

.hero-grid{
    position:absolute;

    inset:
        49%
        -10%
        -30%;

    opacity:.08;

    background-image:
        linear-gradient(
            rgba(255,255,255,.21)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.21)
            1px,
            transparent 1px
        );

    background-size:
        72px
        72px;

    transform:
        perspective(640px)
        rotateX(67deg);

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 80%
        );
}

.hero-vignette{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(5,7,10,.96) 0%,
            rgba(5,7,10,.74) 24%,
            rgba(5,7,10,.22) 51%,
            rgba(5,7,10,.16) 70%,
            rgba(5,7,10,.92) 95%,
            #05070a 100%
        ),
        linear-gradient(
            90deg,
            rgba(5,7,10,.74),
            transparent 25%,
            transparent 75%,
            rgba(5,7,10,.74)
        );
}

.hero-content{
    width:min(1010px,100%);

    position:relative;

    z-index:5;

    transform:
        translateY(
            calc(
                var(--scroll) * -12px
            )
        );
}

.hero-kicker{
    margin:0;

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

    gap:14px;

    color:#d0d4d7;

    font-size:9px;

    font-weight:850;

    letter-spacing:.29em;
}

.hero-kicker span{
    width:42px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}

.hero-kicker span:last-child{
    transform:scaleX(-1);
}

h1{
    margin:
        25px
        0
        0;

    font-size:
        clamp(
            66px,
            9vw,
            134px
        );

    line-height:.81;

    letter-spacing:-.067em;

    font-weight:950;

    text-transform:uppercase;
}

h1 span,
h1 strong{
    display:block;
}

h1 strong{
    color:var(--gold2);

    text-shadow:
        0 15px 50px
        rgba(229,177,82,.11);
}

.hero-statement{
    margin:
        29px
        0
        0;

    color:#ece7db;

    font-size:
        clamp(
            11px,
            1.2vw,
            15px
        );

    font-weight:800;

    letter-spacing:.2em;
}

.hero-intro{
    width:min(680px,100%);

    margin:
        16px
        auto
        0;

    color:#a9b0b6;

    font-size:
        13px;

    line-height:1.75;
}


/* ================= COUNTDOWN + FORM ================= */

.launch-panel{
    width:min(780px,100%);

    margin:
        31px
        auto
        0;

    position:relative;
}

.launch-status{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    margin-bottom:15px;

    color:#a5adb4;

    font-size:8px;

    font-weight:900;

    letter-spacing:.2em;
}

.pulse-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--gold2);

    box-shadow:
        0 0 15px
        rgba(255,217,140,.85);
}

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

    gap:
        clamp(
            10px,
            2.5vw,
            26px
        );

    margin-bottom:19px;
}

.count-unit{
    min-width:
        clamp(
            60px,
            7vw,
            90px
        );
}

.count-unit b{
    display:block;

    font-size:
        clamp(
            28px,
            3.5vw,
            46px
        );

    line-height:1;

    letter-spacing:-.04em;

    font-weight:800;
}

.count-unit small{
    display:block;

    margin-top:8px;

    color:#7c858d;

    font-size:7px;

    font-weight:900;

    letter-spacing:.19em;
}

.count-separator{
    color:
        rgba(255,217,140,.32);

    font-size:24px;

    transform:
        translateY(-7px);
}

#join-form{
    width:100%;
}

.signup-line{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:8px;

    width:100%;

    padding:7px;

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

    border-radius:999px;

    background:
        rgba(5,9,13,.58);

    box-shadow:
        0 22px 70px
        rgba(0,0,0,.22);

    backdrop-filter:
        blur(14px);
}

.email-field{
    display:flex;
    align-items:center;

    min-width:0;

    border-radius:999px;
}

.email-field>span{
    padding-left:17px;

    color:var(--gold2);

    font-size:13px;

    font-weight:900;
}

.email-field input{
    width:100%;

    min-width:0;

    padding:
        14px
        14px;

    border:0;
    outline:0;

    background:transparent;

    color:white;

    font-size:12px;
}

.email-field input::placeholder{
    color:#6f7881;
}

.signup-line button{
    border:0;

    border-radius:999px;

    padding:
        0
        25px;

    min-height:47px;

    background:
        linear-gradient(
            135deg,
            #f7cf7b,
            #c58930
        );

    color:#07090b;

    font-size:9px;

    font-weight:950;

    letter-spacing:.11em;

    box-shadow:
        0 12px 30px
        rgba(220,157,58,.13);
}

.signup-line button:hover{
    filter:brightness(1.07);
}

.signup-line button:disabled{
    opacity:.6;
}

.consent{
    width:max-content;
    max-width:100%;

    margin:
        10px
        auto
        0;

    display:flex;

    align-items:flex-start;

    gap:7px;

    color:#727b82;

    font-size:8px;

    line-height:1.5;
}

.consent input{
    margin-top:1px;

    accent-color:var(--gold);
}

.consent a{
    color:#9ca5ab;

    text-decoration:underline;
}

.form-message{
    min-height:17px;

    margin:
        7px
        0
        0;

    font-size:9px;

    color:#efb96a;
}

.form-message.success{
    color:#9cd7a8;
}

.form-message.error{
    color:#efa1a1;
}

.hp{
    position:absolute !important;
    left:-9999px !important;
}

.hero-micro{
    margin-top:17px;

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

    gap:11px;

    color:#69727a;

    font-size:7px;

    letter-spacing:.17em;
}

.hero-micro i{
    width:24px;
    height:1px;

    background:
        rgba(255,255,255,.15);
}

.hero-micro strong{
    color:#b6bec3;
}


/* ================= SIDE LABELS ================= */

.scene-label{
    position:absolute;

    z-index:7;

    color:#828b93;

    font-size:7px;

    font-weight:850;

    letter-spacing:.19em;
}

.scene-label-left{
    left:
        clamp(
            12px,
            2.8vw,
            40px
        );

    top:43%;

    display:flex;
    align-items:center;

    gap:12px;

    writing-mode:vertical-rl;
}

.scene-label-left i{
    width:1px;
    height:74px;

    background:
        linear-gradient(
            var(--gold),
            transparent
        );
}

.scene-label-right{
    right:
        clamp(
            12px,
            2.8vw,
            40px
        );

    top:38%;

    display:flex;

    flex-direction:column;

    gap:9px;

    text-align:right;
}

.scene-label-right span:last-child{
    color:var(--gold2);
}

.scroll-cue{
    position:absolute;

    right:
        clamp(
            18px,
            4vw,
            56px
        );

    bottom:31px;

    z-index:8;

    display:flex;
    align-items:center;

    gap:12px;

    font-size:7px;

    font-weight:900;

    letter-spacing:.18em;
}

.scroll-cue i{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(230,183,97,.45);

    border-radius:50%;

    color:var(--gold2);

    font-style:normal;
}


/* ================= NETWORK ================= */

.network-scene{
    position:relative;

    min-height:
        min(1050px,100svh);

    padding:
        110px
        clamp(20px,6vw,92px);

    overflow:hidden;

    isolation:isolate;

    background:#05070a;

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

.network-art{
    position:absolute;
    inset:0;

    z-index:-2;
}

.network-image{
    position:absolute;

    inset:
        13%
        -4%
        -7%;

    background:
        url('/assets/img/hero/glory-network.webp')
        center center
        / cover
        no-repeat;

    opacity:.58;

    filter:
        saturate(.82)
        contrast(1.05)
        brightness(.64);

    transform:
        translate3d(
            calc(var(--network-x,0) * 13px),
            calc(var(--network-y,0) * 7px),
            0
        )
        scale(1.035);
}

.network-glow{
    position:absolute;

    width:min(70vw,900px);
    aspect-ratio:1;

    left:50%;
    top:57%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(229,170,75,.11),
            transparent 66%
        );

    filter:blur(20px);
}

.network-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            #05070a 0%,
            rgba(5,7,10,.76) 18%,
            rgba(5,7,10,.19) 48%,
            rgba(5,7,10,.65) 79%,
            #05070a 100%
        ),
        linear-gradient(
            90deg,
            rgba(5,7,10,.83),
            transparent 38%,
            transparent 62%,
            rgba(5,7,10,.83)
        );
}

.network-copy{
    position:relative;

    z-index:3;

    max-width:780px;
}

.eyebrow{
    margin:0;

    color:#9ea6ad;

    font-size:8px;

    font-weight:900;

    letter-spacing:.25em;
}

.network-copy h2,
.arrival-copy h2{
    margin:
        19px
        0
        0;

    font-size:
        clamp(
            51px,
            7vw,
            100px
        );

    line-height:.86;

    letter-spacing:-.057em;

    text-transform:uppercase;
}

.network-copy h2 strong,
.arrival-copy h2 strong{
    display:block;

    color:var(--gold2);
}

.network-intro{
    max-width:580px;

    margin-top:24px;

    color:#959fa7;

    font-size:13px;

    line-height:1.75;
}


/* ================= NETWORK FLOATING NODES ================= */

.network-orbit{
    position:absolute;

    inset:
        34%
        5%
        9%;

    z-index:5;
}

.network-node{
    position:absolute;

    min-width:148px;

    padding:
        14px
        17px;

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

    background:
        rgba(7,11,16,.54);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.25);

    transition:
        transform .3s,
        border-color .3s,
        background .3s;
}

.network-node:hover{
    border-color:
        rgba(230,183,97,.48);

    background:
        rgba(12,15,17,.72);

    transform:
        translateY(-4px);
}

.network-node span{
    display:block;

    color:var(--gold);

    font-size:7px;

    letter-spacing:.17em;
}

.network-node strong{
    display:block;

    margin-top:15px;

    font-size:13px;

    letter-spacing:.08em;
}

.network-node small{
    display:block;

    margin-top:5px;

    color:#747e86;

    font-size:6px;

    font-weight:850;

    letter-spacing:.17em;
}

.node-athletes{
    left:9%;
    top:6%;
}

.node-fans{
    left:42%;
    top:1%;
}

.node-clubs{
    right:5%;
    top:18%;
}

.node-creators{
    left:4%;
    bottom:15%;
}

.node-venues{
    left:46%;
    bottom:4%;
}

.node-communities{
    right:3%;
    bottom:24%;
}


/* ================= ARRIVAL ================= */

.arrival{
    min-height:
        min(900px,95svh);

    position:relative;

    overflow:hidden;

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

    padding:
        100px
        20px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 47%,
            rgba(218,151,53,.1),
            transparent 28%
        ),
        #05070a;

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

.arrival-art{
    position:absolute;
    inset:0;

    pointer-events:none;
}

.arrival-art img{
    position:absolute;

    width:
        min(47vw,560px);

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        scale(.98);

    opacity:.18;

    filter:
        saturate(.7)
        drop-shadow(
            0 40px 90px
            rgba(197,137,42,.14)
        );
}

.arrival-ring{
    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    border:
        1px solid
        rgba(230,183,97,.1);

    transform:
        translate(-50%,-50%);
}

.ring-one{
    width:
        min(68vw,800px);

    aspect-ratio:1;
}

.ring-two{
    width:
        min(83vw,1000px);

    aspect-ratio:1;

    opacity:.45;
}

.arrival-copy{
    position:relative;

    z-index:3;

    width:
        min(900px,100%);
}

.arrival-copy h2{
    font-size:
        clamp(
            62px,
            9vw,
            122px
        );
}

.arrival-copy>p:not(.eyebrow){
    margin:
        25px
        auto
        0;

    color:#989fa5;

    font-size:13px;

    letter-spacing:.04em;
}

.arrival-cta{
    margin-top:34px;

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

    gap:15px;

    border-radius:999px;

    padding:
        17px
        25px;

    background:
        linear-gradient(
            135deg,
            #f6cd77,
            #c88c33
        );

    color:#080a0c;

    font-size:9px;

    font-weight:950;

    letter-spacing:.12em;

    box-shadow:
        0 20px 60px
        rgba(213,153,58,.15);
}


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

footer{
    min-height:94px;

    padding:
        24px
        clamp(20px,5vw,76px);

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

    gap:25px;

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

    color:#747d84;

    background:#040609;

    font-size:9px;
}

.footer-lockup{
    display:flex;
    align-items:center;

    gap:10px;
}

.footer-mark{
    width:34px;
    height:34px;
}

.footer-mark img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.footer-lockup>span:last-child{
    display:flex;
    flex-direction:column;
}

.footer-lockup strong{
    color:#e9ebec;

    font-size:14px;

    letter-spacing:.045em;
}

.footer-lockup small{
    margin-top:4px;

    font-size:5.5px;

    letter-spacing:.18em;

    color:#6e777e;
}

footer nav{
    display:flex;

    gap:22px;
}

footer nav a:hover{
    color:var(--gold2);
}


/* ================= TABLET ================= */

@media(max-width:1020px){

    .scene-label{
        display:none;
    }

    .network-orbit{
        inset:
            43%
            4%
            7%;
    }

    .network-node{
        min-width:130px;
    }

}


/* ================= MOBILE ================= */

@media(max-width:700px){

    .site-header{
        height:72px;

        padding:
            0
            15px;
    }

    .brand-mark{
        width:34px;
        height:34px;
    }

    .brand-copy strong{
        font-size:16px;
    }

    .brand-copy small{
        font-size:5px;

        margin-top:4px;
    }

    .network-status{
        display:none;
    }

    .header-cta{
        padding:
            9px
            12px;

        font-size:7px;
    }


    .hero{
        min-height:
            max(850px,100svh);

        padding:
            112px
            15px
            78px;
    }

    .hero-arena{
        inset:
            38%
            -58%
            -1%;

        background-position:
            center 54%;

        transform:scale(1.01);
    }

    .hero-grid{
        display:none;
    }

    .portal-halo-one{
        width:96vw;
    }

    .portal-halo-two{
        width:68vw;
    }

    .hero-kicker{
        font-size:7px;

        letter-spacing:.2em;

        gap:8px;
    }

    .hero-kicker span{
        width:19px;
    }

    h1{
        margin-top:19px;

        font-size:
            clamp(
                50px,
                15vw,
                82px
            );
    }

    .hero-statement{
        margin-top:22px;

        font-size:9px;

        letter-spacing:.14em;
    }

    .hero-intro{
        font-size:10px;

        line-height:1.62;

        width:min(520px,94%);
    }

    .launch-panel{
        margin-top:24px;
    }

    .launch-status{
        font-size:6.5px;

        margin-bottom:12px;
    }

    .countdown{
        gap:6px;

        margin-bottom:15px;
    }

    .count-unit{
        min-width:49px;
    }

    .count-unit b{
        font-size:24px;
    }

    .count-unit small{
        font-size:5.5px;

        margin-top:5px;
    }

    .count-separator{
        font-size:16px;

        transform:
            translateY(-5px);
    }

    .signup-line{
        grid-template-columns:1fr;

        border-radius:15px;

        padding:7px;
    }

    .email-field{
        min-height:49px;
    }

    .signup-line button{
        min-height:48px;

        width:100%;
    }

    .consent{
        width:100%;

        justify-content:center;

        padding:
            0
            8px;

        font-size:7px;
    }

    .scroll-cue{
        right:15px;

        bottom:20px;
    }

    .scroll-cue span{
        display:none;
    }


    .network-scene{
        min-height:980px;

        padding:
            77px
            17px;
    }

    .network-copy h2{
        font-size:
            clamp(
                45px,
                13vw,
                70px
            );
    }

    .network-intro{
        font-size:11px;

        line-height:1.7;
    }

    .network-image{
        inset:
            27%
            -55%
            5%;

        opacity:.54;

        background-position:center;

        transform:scale(1.02);
    }

    .network-orbit{
        inset:
            49%
            12px
            7%;
    }

    .network-node{
        position:absolute;

        min-width:116px;

        padding:
            11px
            12px;
    }

    .node-athletes{
        left:0;
        top:3%;
    }

    .node-fans{
        right:0;
        left:auto;
        top:10%;
    }

    .node-clubs{
        left:3%;
        right:auto;
        top:40%;
    }

    .node-creators{
        right:0;
        left:auto;
        top:48%;
        bottom:auto;
    }

    .node-venues{
        left:3%;
        bottom:3%;
    }

    .node-communities{
        right:0;
        bottom:0;
    }


    .arrival{
        min-height:760px;

        padding:
            80px
            17px;
    }

    .arrival-art img{
        width:92vw;

        opacity:.16;
    }

    .arrival-copy h2{
        font-size:
            clamp(
                56px,
                15vw,
                82px
            );
    }


    footer{
        justify-content:center;

        flex-wrap:wrap;

        text-align:center;

        padding:
            25px
            16px;
    }

    footer p{
        width:100%;

        order:3;

        margin:0;
    }

}


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

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

    html{
        scroll-behavior:auto;
    }

    .hero-arena,
    .hero-content,
    .portal-halo,
    .network-image{
        transform:none !important;
    }

}


/* =========================================================
   GLORY 95+ READABILITY / COMPOSITION FIX
   ========================================================= */

/* HERO SCALE FIX */

.hero-content{
    max-width:920px;
}

h1{
    font-size:clamp(54px,7.3vw,112px);
    line-height:.84;
    letter-spacing:-.058em;
}

.hero-intro{
    max-width:640px;
}

.launch-panel{
    max-width:760px;
}


/* NO FAKE COUNTDOWN */

.date-reveal{
    margin:0 auto 18px;
    text-align:center;
}

.date-reveal span{
    display:block;
    color:#7f878d;
    font-size:7px;
    font-weight:900;
    letter-spacing:.22em;
}

.date-reveal strong{
    display:block;
    margin-top:7px;
    color:#f0cb82;
    font-size:16px;
    font-weight:800;
    letter-spacing:.13em;
}


/* NETWORK SECTION — CLEAN SPLIT LAYOUT */

.network-scene{
    position:relative;
    min-height:820px;
    padding:100px clamp(24px,5vw,80px);
    overflow:hidden;
    background:
        radial-gradient(
            circle at 72% 46%,
            rgba(215,153,61,.08),
            transparent 34%
        ),
        #05070a;
}

.network-layout{
    width:min(1480px,100%);
    margin:0 auto;

    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(620px,1.18fr);
    gap:60px;
    align-items:center;
}

.network-copy{
    position:relative;
    z-index:5;
    max-width:650px;
}

.network-copy h2{
    margin-top:18px;

    font-size:clamp(48px,5.2vw,80px);
    line-height:.9;
    letter-spacing:-.052em;
}

.network-copy h2 strong{
    display:block;
    color:var(--gold2);
}

.network-intro{
    max-width:530px;
    margin-top:23px;

    color:#969fa6;
    font-size:13px;
    line-height:1.75;
}


/* RIGHT VISUAL */

.network-visual{
    position:relative;

    min-height:620px;

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

    overflow:hidden;

    background:
        #070a0e;

    isolation:isolate;
}

.network-image{
    position:absolute;
    inset:0;

    background:
        url('/assets/img/hero/glory-network.webp')
        center center
        / cover
        no-repeat;

    opacity:.46;

    filter:
        saturate(.8)
        contrast(1.08)
        brightness(.64);

    transform:scale(1.04);

    z-index:-3;
}

.network-visual::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-2;

    background:
        radial-gradient(
            circle at 50% 52%,
            rgba(222,161,71,.18),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            rgba(5,7,10,.2),
            rgba(5,7,10,.82)
        );
}

.network-core{
    position:absolute;

    left:50%;
    top:50%;

    width:180px;
    height:180px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border-radius:50%;

    border:
        1px solid
        rgba(230,183,97,.16);

    background:
        radial-gradient(
            circle,
            rgba(230,183,97,.09),
            rgba(5,7,10,.34) 62%,
            transparent
        );

    box-shadow:
        0 0 80px
        rgba(215,153,61,.09);
}

.network-core img{
    width:115px;
    height:115px;

    object-fit:contain;

    opacity:.9;
}


/* NODES — SMALLER, CLEANER */

.network-node{
    position:absolute;

    min-width:128px;

    padding:12px 14px;

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

    background:
        rgba(5,8,12,.72);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.26);
}

.network-node span{
    display:block;

    color:var(--gold);

    font-size:6px;

    font-weight:900;

    letter-spacing:.18em;
}

.network-node strong{
    display:block;

    margin-top:9px;

    color:#f3f3ef;

    font-size:11px;

    letter-spacing:.07em;
}

.network-node small{
    display:block;

    margin-top:3px;

    color:#79828a;

    font-size:5.5px;

    font-weight:800;

    letter-spacing:.14em;
}


/* FIXED NON-OVERLAPPING POSITIONS */

.node-athletes{
    left:5%;
    top:10%;
}

.node-fans{
    right:7%;
    top:8%;
}

.node-clubs{
    right:3%;
    top:42%;
}

.node-creators{
    left:3%;
    bottom:13%;
}

.node-venues{
    left:37%;
    bottom:5%;
}

.node-communities{
    right:4%;
    bottom:16%;
}


/* TABLET */

@media(max-width:1100px){

    .network-layout{
        grid-template-columns:1fr;
        gap:48px;
    }

    .network-copy{
        max-width:760px;
    }

    .network-visual{
        min-height:600px;
    }

}


/* MOBILE */

@media(max-width:700px){

    h1{
        font-size:clamp(48px,14vw,72px);
        line-height:.86;
    }

    .hero-statement{
        font-size:8px;
    }

    .date-reveal strong{
        font-size:13px;
    }

    .network-scene{
        min-height:auto;
        padding:72px 16px;
    }

    .network-layout{
        display:block;
    }

    .network-copy h2{
        font-size:clamp(42px,12vw,62px);
    }

    .network-intro{
        font-size:11px;
    }

    .network-visual{
        min-height:590px;
        margin-top:40px;
    }

    .network-core{
        width:140px;
        height:140px;
    }

    .network-core img{
        width:90px;
        height:90px;
    }

    .network-node{
        min-width:105px;
        padding:10px 11px;
    }

    .network-node strong{
        font-size:9px;
    }

    .node-athletes{
        left:3%;
        top:7%;
    }

    .node-fans{
        right:3%;
        top:9%;
    }

    .node-clubs{
        right:2%;
        top:43%;
    }

    .node-creators{
        left:2%;
        bottom:16%;
    }

    .node-venues{
        left:31%;
        bottom:4%;
    }

    .node-communities{
        right:2%;
        bottom:18%;
    }

}



/* =========================================================
   GLORY HERO 95+ PASS
   ========================================================= */

/* Stronger controlled vignette behind copy */
.hero-vignette{
    background:
        linear-gradient(
            180deg,
            rgba(5,7,10,.98) 0%,
            rgba(5,7,10,.82) 18%,
            rgba(5,7,10,.38) 39%,
            rgba(5,7,10,.12) 58%,
            rgba(5,7,10,.28) 74%,
            rgba(5,7,10,.92) 96%,
            #05070a 100%
        ),
        linear-gradient(
            90deg,
            rgba(5,7,10,.68),
            rgba(5,7,10,.10) 27%,
            rgba(5,7,10,.10) 73%,
            rgba(5,7,10,.68)
        );
}

/* Pull copy up and give it its own readable zone */
.hero-content{
    width:min(920px,100%);
    transform:translateY(-28px);
}

/* Clearer kicker */
.hero-kicker{
    color:#f0f1ef;
    font-size:10px;
    letter-spacing:.24em;
    text-shadow:0 2px 18px rgba(0,0,0,.55);
}

/* Main headline */
h1{
    margin-top:20px;
    font-size:clamp(58px,7.1vw,108px);
    line-height:.84;
    letter-spacing:-.055em;
}

h1 span{
    color:#f6f5f1;
}

h1 strong{
    color:#f7cf7b;
    text-shadow:
        0 8px 36px rgba(220,157,58,.14);
}

/* Supporting line stronger but restrained */
.hero-statement{
    margin-top:22px;
    color:#f3eadc;
    font-size:clamp(10px,1vw,13px);
    letter-spacing:.18em;
    text-shadow:0 2px 12px rgba(0,0,0,.5);
}

.hero-intro{
    margin-top:13px;
    max-width:610px;
    color:#d0d4d7;
    font-size:12px;
    line-height:1.65;
    text-shadow:0 2px 12px rgba(0,0,0,.5);
}


/* ---- LAUNCH PANEL ---- */

.launch-panel{
    width:min(650px,100%);
    margin-top:24px;
}

/* Compact status */
.launch-status{
    margin-bottom:10px;
    color:#d3d7d9;
    font-size:7px;
    letter-spacing:.19em;
}

/* Better no-date state */
.date-reveal{
    margin:0 auto 15px;
}

.date-reveal span{
    color:#aeb5ba;
    font-size:6.5px;
    letter-spacing:.18em;
}

.date-reveal strong{
    margin-top:5px;
    color:#f6ce7a;
    font-size:14px;
    letter-spacing:.12em;
}


/* Slimmer premium form */
.signup-line{
    width:min(620px,100%);
    margin:0 auto;

    grid-template-columns:minmax(0,1fr) auto;

    gap:7px;

    padding:6px;

    border-radius:999px;

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

    background:
        linear-gradient(
            90deg,
            rgba(8,11,15,.86),
            rgba(10,13,17,.72)
        );

    box-shadow:
        0 18px 55px rgba(0,0,0,.32);

    backdrop-filter:blur(18px);
}

.email-field{
    min-height:44px;
}

.email-field>span{
    padding-left:14px;
    font-size:12px;
}

.email-field input{
    padding:12px 12px;
    color:#fff;
    font-size:12px;
}

.email-field input::placeholder{
    color:#8e979e;
}

.signup-line button{
    min-height:44px;
    padding:0 21px;

    font-size:8.5px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #f8d27d,
            #d99a3c
        );

    box-shadow:
        0 10px 28px rgba(221,158,58,.17);
}

/* Consent readable but quiet */
.consent{
    margin-top:9px;
    color:#a3abb1;
    font-size:7.5px;
}

.consent a{
    color:#c7cdd1;
}

.form-message{
    margin-top:6px;
    font-size:8px;
}


/* Make portal the visual focus */
.hero-arena{
    filter:
        saturate(.96)
        contrast(1.10)
        brightness(.94);
}

/* Reduce decorative competition */
.portal-halo-one{
    opacity:.55;
}

.portal-halo-two{
    opacity:.35;
}

.hero-grid{
    opacity:.045;
}


/* Scroll cue less distracting */
.scroll-cue{
    opacity:.72;
}


/* MOBILE */
@media(max-width:700px){

    .hero{
        padding:
            108px
            14px
            74px;
    }

    .hero-content{
        transform:none;
    }

    h1{
        font-size:clamp(46px,13.6vw,68px);
        line-height:.86;
    }

    .hero-kicker{
        font-size:7px;
        letter-spacing:.17em;
    }

    .hero-statement{
        margin-top:18px;
        font-size:8px;
    }

    .hero-intro{
        font-size:10px;
        max-width:92%;
    }

    .launch-panel{
        width:min(92vw,560px);
        margin-top:20px;
    }

    .signup-line{
        grid-template-columns:1fr;
        border-radius:16px;
        padding:7px;
    }

    .email-field{
        min-height:46px;
    }

    .signup-line button{
        width:100%;
        min-height:46px;
    }

    .consent{
        justify-content:center;
        text-align:left;
        font-size:7px;
    }

    .date-reveal strong{
        font-size:12px;
    }

}



/* =========================================================
   GLORY RESPONSIVE SYSTEM V4
   95+ ALL-DEVICE PASS
   ========================================================= */

:root{
    --safe-top:env(safe-area-inset-top,0px);
    --safe-right:env(safe-area-inset-right,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);
    --safe-left:env(safe-area-inset-left,0px);

    --page-x:clamp(16px,4.6vw,74px);
    --content-max:1480px;
}


/* =========================================================
   GLOBAL RESPONSIVE SAFETY
   ========================================================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    min-width:280px;
}

main,
section,
header,
footer{
    max-width:100%;
}

button,
a,
input{
    -webkit-tap-highlight-color:transparent;
}

button,
.header-cta,
.arrival-cta{
    min-height:44px;
}

input{
    font-size:16px;
}

@media(min-width:768px){
    input{
        font-size:12px;
    }
}


/* =========================================================
   HEADER — SAFE AREA + FLUID
   ========================================================= */

.site-header{
    min-height:72px;

    height:
        calc(
            82px
            +
            var(--safe-top)
        );

    padding-top:var(--safe-top);

    padding-left:
        max(
            var(--page-x),
            var(--safe-left)
        );

    padding-right:
        max(
            var(--page-x),
            var(--safe-right)
        );
}

.brand-lockup{
    min-width:0;
}

.brand-copy{
    min-width:0;
}

.brand-copy strong{
    white-space:nowrap;
}

.header-right{
    flex:0 0 auto;
}


/* =========================================================
   HERO — FLUID MASTER
   ========================================================= */

.hero{
    min-height:
        max(
            840px,
            100svh
        );

    padding-top:
        calc(
            125px
            +
            var(--safe-top)
        );

    padding-right:
        max(
            18px,
            var(--safe-right)
        );

    padding-bottom:
        calc(
            82px
            +
            var(--safe-bottom)
        );

    padding-left:
        max(
            18px,
            var(--safe-left)
        );
}

.hero-content{
    width:min(920px,100%);
    margin-inline:auto;
}

.hero-kicker{
    max-width:100%;
}

h1{
    text-wrap:balance;
}

.hero-statement,
.hero-intro{
    text-wrap:balance;
}

.launch-panel{
    width:min(650px,100%);
}


/* =========================================================
   DESKTOP XL — 1800+
   ========================================================= */

@media(min-width:1800px){

    .site-header{
        padding-left:max(82px,var(--safe-left));
        padding-right:max(82px,var(--safe-right));
    }

    .brand-mark{
        width:48px;
        height:48px;
    }

    .brand-copy strong{
        font-size:23px;
    }

    .brand-copy small{
        font-size:7px;
    }

    .hero{
        min-height:980px;
        padding-top:160px;
    }

    .hero-content{
        width:min(1040px,100%);
    }

    h1{
        font-size:118px;
    }

    .hero-intro{
        max-width:700px;
        font-size:14px;
    }

    .launch-panel{
        width:700px;
    }

    .network-layout{
        max-width:1540px;
        gap:84px;
    }

    .network-visual{
        min-height:680px;
    }

}


/* =========================================================
   DESKTOP — 1440–1799
   ========================================================= */

@media(min-width:1440px) and (max-width:1799px){

    .hero{
        min-height:900px;
    }

    h1{
        font-size:clamp(76px,7vw,108px);
    }

    .network-layout{
        gap:68px;
    }

}


/* =========================================================
   LAPTOP — 1200–1439
   ========================================================= */

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

    .site-header{
        height:80px;
    }

    .hero{
        min-height:840px;
        padding-top:126px;
    }

    .hero-content{
        width:min(860px,100%);
    }

    h1{
        font-size:clamp(64px,7vw,92px);
    }

    .hero-statement{
        font-size:11px;
    }

    .hero-intro{
        max-width:580px;
        font-size:11px;
    }

    .launch-panel{
        width:min(610px,100%);
    }

    .network-layout{
        grid-template-columns:minmax(0,.85fr) minmax(560px,1.15fr);
        gap:46px;
    }

    .network-copy h2{
        font-size:clamp(46px,5vw,70px);
    }

    .network-visual{
        min-height:560px;
    }

}


/* =========================================================
   TABLET LANDSCAPE / SMALL LAPTOP — 1024–1199
   ========================================================= */

@media(min-width:1024px) and (max-width:1199px){

    .site-header{
        padding-inline:28px;
    }

    .network-status{
        display:none;
    }

    .hero{
        min-height:820px;
        padding-top:118px;
    }

    h1{
        font-size:clamp(58px,7.4vw,82px);
    }

    .hero-arena{
        inset:30% -14% -3%;
    }

    .launch-panel{
        width:min(590px,100%);
    }

    .network-layout{
        grid-template-columns:1fr;
        gap:42px;
    }

    .network-copy{
        max-width:780px;
    }

    .network-visual{
        min-height:610px;
    }

}


/* =========================================================
   TABLET PORTRAIT — 768–1023
   ========================================================= */

@media(min-width:768px) and (max-width:1023px){

    .site-header{
        height:
            calc(
                74px
                +
                var(--safe-top)
            );

        padding-inline:22px;
    }

    .network-status{
        display:none;
    }

    .brand-mark{
        width:37px;
        height:37px;
    }

    .brand-copy strong{
        font-size:17px;
    }

    .brand-copy small{
        font-size:5.5px;
    }

    .hero{
        min-height:850px;
        padding-top:
            calc(
                112px
                +
                var(--safe-top)
            );
    }

    .hero-content{
        width:min(760px,94%);
    }

    h1{
        font-size:clamp(56px,9vw,78px);
    }

    .hero-statement{
        font-size:9px;
    }

    .hero-intro{
        max-width:540px;
        font-size:11px;
    }

    .hero-arena{
        inset:34% -22% -2%;
        background-position:center 56%;
    }

    .launch-panel{
        width:min(570px,92%);
    }

    .network-scene{
        padding:80px 32px;
    }

    .network-layout{
        display:block;
    }

    .network-copy{
        max-width:700px;
    }

    .network-copy h2{
        font-size:clamp(50px,8vw,70px);
    }

    .network-visual{
        min-height:620px;
        margin-top:44px;
    }

    .arrival{
        min-height:720px;
    }

}


/* =========================================================
   LARGE PHONES — 600–767
   ========================================================= */

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

    .site-header{
        padding-inline:18px;
    }

    .network-status{
        display:none;
    }

    .hero{
        min-height:860px;

        padding-top:
            calc(
                102px
                +
                var(--safe-top)
            );

        padding-bottom:
            calc(
                64px
                +
                var(--safe-bottom)
            );
    }

    .hero-content{
        width:min(620px,94%);
        transform:none;
    }

    h1{
        font-size:clamp(52px,11vw,72px);
    }

    .hero-arena{
        inset:38% -34% -2%;
        background-position:center 55%;
    }

    .hero-intro{
        max-width:500px;
    }

    .launch-panel{
        width:min(540px,94%);
    }

    .network-scene{
        padding:72px 22px;
    }

    .network-layout{
        display:block;
    }

    .network-visual{
        min-height:610px;
        margin-top:38px;

        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-content:end;
        gap:9px;

        padding:270px 12px 12px;
    }

    .network-node{
        position:relative !important;

        inset:auto !important;

        min-width:0;
        width:100%;

        transform:none !important;
    }

    .network-core{
        top:36%;
    }

}


/* =========================================================
   NORMAL PHONES — 430–599
   ========================================================= */

@media(min-width:430px) and (max-width:599px){

    .site-header{
        height:
            calc(
                68px
                +
                var(--safe-top)
            );

        padding-inline:14px;
    }

    .brand-mark{
        width:32px;
        height:32px;
    }

    .brand-copy strong{
        font-size:15px;
    }

    .brand-copy small{
        font-size:4.7px;
    }

    .header-cta{
        padding:8px 10px;
        font-size:6.5px;
    }

    .network-status{
        display:none;
    }

    .hero{
        min-height:
            max(
                790px,
                100svh
            );

        padding-top:
            calc(
                96px
                +
                var(--safe-top)
            );

        padding-bottom:
            calc(
                58px
                +
                var(--safe-bottom)
            );
    }

    .hero-content{
        width:94%;
        transform:none;
    }

    .hero-kicker{
        font-size:6.5px;
        letter-spacing:.15em;
    }

    h1{
        font-size:clamp(44px,12.8vw,62px);
        line-height:.87;
    }

    .hero-statement{
        font-size:7.5px;
        letter-spacing:.12em;
    }

    .hero-intro{
        width:94%;
        font-size:9.8px;
    }

    .hero-arena{
        inset:40% -54% -1%;
        background-position:center 53%;
    }

    .launch-panel{
        width:94%;
    }

    .launch-status{
        font-size:6px;
    }

    .date-reveal strong{
        font-size:11px;
    }

    .signup-line{
        grid-template-columns:1fr;
        border-radius:14px;
    }

    .email-field{
        min-height:46px;
    }

    .signup-line button{
        width:100%;
        min-height:46px;
    }

    .consent{
        width:100%;
        justify-content:center;
        font-size:7px;
    }

    .scroll-cue{
        display:none;
    }

    .network-scene{
        padding:66px 14px;
    }

    .network-copy h2{
        font-size:clamp(39px,11.5vw,56px);
    }

    .network-intro{
        font-size:10px;
    }

    .network-visual{
        min-height:600px;
        margin-top:34px;

        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-content:end;
        gap:8px;

        padding:250px 10px 10px;
    }

    .network-node{
        position:relative !important;

        inset:auto !important;

        width:100%;
        min-width:0;

        transform:none !important;
    }

    .network-node strong{
        font-size:9px;
    }

    .network-core{
        top:34%;
        width:130px;
        height:130px;
    }

    .network-core img{
        width:84px;
        height:84px;
    }

    .arrival{
        min-height:670px;
        padding-inline:14px;
    }

    .arrival-copy h2{
        font-size:clamp(50px,13vw,68px);
    }

    footer{
        padding-bottom:
            calc(
                24px
                +
                var(--safe-bottom)
            );
    }

}


/* =========================================================
   SMALL PHONES — 360–429
   ========================================================= */

@media(min-width:360px) and (max-width:429px){

    .site-header{
        height:
            calc(
                64px
                +
                var(--safe-top)
            );

        padding-inline:11px;
    }

    .brand-mark{
        width:29px;
        height:29px;
    }

    .brand-copy strong{
        font-size:13.5px;
    }

    .brand-copy small{
        font-size:4px;
        letter-spacing:.15em;
    }

    .header-cta{
        padding:7px 9px;
        min-height:38px;

        font-size:6px;
    }

    .hero{
        min-height:
            max(
                760px,
                100svh
            );

        padding-top:
            calc(
                88px
                +
                var(--safe-top)
            );

        padding-inline:10px;

        padding-bottom:
            calc(
                50px
                +
                var(--safe-bottom)
            );
    }

    .hero-content{
        width:96%;
        transform:none;
    }

    .hero-kicker{
        font-size:6px;
    }

    .hero-kicker span{
        display:none;
    }

    h1{
        font-size:clamp(41px,13vw,54px);
        line-height:.88;
    }

    .hero-statement{
        font-size:7px;
    }

    .hero-intro{
        width:96%;
        font-size:9px;
        line-height:1.55;
    }

    .hero-arena{
        inset:42% -69% -1%;
        background-position:center 52%;
    }

    .launch-panel{
        width:96%;
        margin-top:18px;
    }

    .date-reveal span{
        font-size:5.5px;
    }

    .date-reveal strong{
        font-size:10px;
    }

    .signup-line{
        padding:6px;
    }

    .email-field{
        min-height:44px;
    }

    .email-field input{
        font-size:16px;
    }

    .signup-line button{
        min-height:44px;
        font-size:7px;
    }

    .consent{
        font-size:6.5px;
        line-height:1.4;
    }

    .network-scene{
        padding:58px 10px;
    }

    .network-copy h2{
        font-size:clamp(36px,11.8vw,49px);
    }

    .network-visual{
        min-height:610px;
        margin-top:28px;

        display:grid;
        grid-template-columns:1fr 1fr;
        align-content:end;

        gap:7px;

        padding:245px 8px 8px;
    }

    .network-node{
        position:relative !important;

        inset:auto !important;

        min-width:0;
        width:100%;

        padding:9px 9px;

        transform:none !important;
    }

    .network-node strong{
        font-size:8px;
    }

    .network-node small{
        font-size:5px;
    }

    .network-core{
        top:33%;
        width:116px;
        height:116px;
    }

    .network-core img{
        width:74px;
        height:74px;
    }

    .arrival{
        min-height:620px;
        padding:60px 10px;
    }

    .arrival-copy h2{
        font-size:clamp(44px,13vw,58px);
    }

    .arrival-copy>p:not(.eyebrow){
        font-size:10px;
    }

    .arrival-cta{
        padding:14px 19px;
        font-size:7.5px;
    }

    footer{
        gap:15px;
        padding-inline:10px;
    }

}


/* =========================================================
   VERY SMALL PHONES — BELOW 360
   ========================================================= */

@media(max-width:359px){

    .site-header{
        height:
            calc(
                61px
                +
                var(--safe-top)
            );

        padding-inline:8px;
    }

    .brand-mark{
        width:26px;
        height:26px;
    }

    .brand-copy strong{
        font-size:12px;
    }

    .brand-copy small{
        display:none;
    }

    .header-cta{
        padding:6px 8px;

        min-height:36px;

        font-size:5.5px;
    }

    .hero{
        min-height:
            max(
                740px,
                100svh
            );

        padding-top:
            calc(
                82px
                +
                var(--safe-top)
            );

        padding-inline:8px;
    }

    .hero-kicker{
        font-size:5.5px;
    }

    .hero-kicker span{
        display:none;
    }

    h1{
        font-size:39px;
    }

    .hero-statement{
        font-size:6px;
    }

    .hero-intro{
        font-size:8.5px;
    }

    .hero-arena{
        inset:44% -80% -1%;
    }

    .launch-panel{
        width:98%;
    }

    .signup-line{
        grid-template-columns:1fr;
    }

    .network-scene{
        padding:54px 8px;
    }

    .network-copy h2{
        font-size:35px;
    }

    .network-visual{
        min-height:650px;

        padding:
            245px
            6px
            6px;

        grid-template-columns:1fr;
    }

    .network-core{
        top:25%;
    }

    .arrival-copy h2{
        font-size:42px;
    }

}


/* =========================================================
   LANDSCAPE PHONES / SHORT VIEWPORTS
   ========================================================= */

@media(max-height:560px) and (orientation:landscape){

    .site-header{
        height:56px;
        padding-top:0;
    }

    .brand-mark{
        width:27px;
        height:27px;
    }

    .brand-copy strong{
        font-size:13px;
    }

    .brand-copy small{
        display:none;
    }

    .hero{
        min-height:620px;

        padding-top:76px;
        padding-bottom:44px;
    }

    .hero-content{
        transform:none;
    }

    h1{
        font-size:clamp(44px,8vw,62px);
    }

    .hero-intro{
        display:none;
    }

    .hero-statement{
        margin-top:15px;
    }

    .launch-panel{
        margin-top:15px;
    }

    .hero-arena{
        inset:30% -20% -3%;
    }

    .scroll-cue{
        display:none;
    }

}


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

@media(pointer:coarse){

    .network-node:hover{
        transform:none;
    }

    .header-cta:hover,
    .signup-line button:hover{
        filter:none;
    }

}


/* =========================================================
   HIGH-DPI / LARGE RETINA
   ========================================================= */

@media(min-resolution:2dppx){

    .hero-arena,
    .network-image{
        image-rendering:auto;
    }

}


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

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .hero-arena,
    .hero-content,
    .portal-halo,
    .network-image,
    .network-node{
        transform:none !important;
    }

}



/* =========================================================
   GLORY V4.1 — IMAGE-FIRST HERO
   The artwork is the hero. UI supports it.
   ========================================================= */


/* ---------- COLOR SYSTEM ---------- */

:root{
    --glory-bg:#05080c;
    --glory-text:#eef1f3;
    --glory-muted:#a8b0b7;
    --glory-gold:#d9a84f;
    --glory-gold-light:#efc978;
}


/* ---------- HEADER ---------- */

.site-header{
    background:
        linear-gradient(
            180deg,
            rgba(3,6,9,.78) 0%,
            rgba(3,6,9,.28) 68%,
            transparent 100%
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,.055) !important;
}

.brand-copy strong{
    color:#f0f2f3 !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-weight:900 !important;
}

.brand-copy small{
    color:#929aa1 !important;
}

.network-status{
    color:#9da5ac !important;
}

.header-cta{
    color:#e6c27c !important;

    border-color:
        rgba(217,168,79,.48) !important;
}


/* =========================================================
   HERO IMAGE — FULL BLEED
   ========================================================= */

.hero{
    min-height:max(820px,100svh) !important;

    padding-top:
        calc(105px + var(--safe-top)) !important;

    padding-bottom:
        calc(68px + var(--safe-bottom)) !important;

    align-items:flex-start !important;
}


/* ARTWORK NOW STARTS AT THE TOP */

.hero-arena{
    inset:0 !important;

    background-image:
        url('/assets/img/arena.webp?v=5') !important;

    background-size:cover !important;

    background-position:
        center center !important;

    filter:
        saturate(1.02)
        contrast(1.06)
        brightness(.88) !important;

    transform:
        translate3d(
            calc(var(--mx) * -8px),
            calc(var(--my) * -4px + var(--scroll) * 10px),
            0
        )
        scale(calc(1.01 + var(--scroll) * .012)) !important;
}


/* REMOVE THE LARGE BLACK TOP BLOCK */

.hero-sky{
    background:
        radial-gradient(
            circle at 50% 36%,
            rgba(204,144,57,.07),
            transparent 34%
        ) !important;
}


/* CONTROLLED OVERLAY ONLY WHERE TEXT NEEDS IT */

.hero-vignette{
    background:
        linear-gradient(
            180deg,
            rgba(3,6,9,.68) 0%,
            rgba(3,6,9,.32) 19%,
            rgba(3,6,9,.07) 38%,
            rgba(3,6,9,.02) 58%,
            rgba(3,6,9,.22) 78%,
            rgba(3,6,9,.70) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3,6,9,.27),
            transparent 24%,
            transparent 76%,
            rgba(3,6,9,.27)
        ) !important;
}


/* REMOVE VISUAL CLUTTER */

.hero-grid{
    opacity:.025 !important;
}

.portal-halo{
    opacity:.18 !important;
}

.scene-label-left,
.scene-label-right{
    opacity:.5;
}


/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

.hero-content{
    width:min(860px,92%) !important;

    margin:
        clamp(52px,8vh,105px)
        auto
        0 !important;

    transform:none !important;

    text-align:center;
}


.hero-kicker{
    color:#d8dde0 !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:.28em !important;

    text-shadow:
        0 2px 18px rgba(0,0,0,.6);
}


.hero-kicker span{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(217,168,79,.78)
        ) !important;
}


/* Force modern sports-tech typography.
   No serif headline. */

.hero h1{
    margin-top:20px !important;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(58px,6.5vw,100px) !important;

    font-weight:950 !important;

    line-height:.88 !important;

    letter-spacing:-.065em !important;

    text-transform:uppercase;

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


.hero h1 span,
.hero h1 strong{
    color:var(--glory-text) !important;
}


/* Gold is now only a subtle underline/light accent,
   not a second headline color. */

.hero h1 strong{
    position:relative;
}

.hero h1 strong::after{
    content:"";

    display:block;

    width:74px;
    height:2px;

    margin:18px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--glory-gold-light),
            transparent
        );
}


.hero-intro{
    width:min(590px,92%) !important;

    margin-top:17px !important;

    color:#d0d5d8 !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:12px !important;

    line-height:1.7 !important;

    text-shadow:
        0 2px 14px rgba(0,0,0,.65);
}


/* =========================================================
   LAUNCH AREA
   ========================================================= */

.launch-panel{
    width:min(610px,94%) !important;

    margin-top:24px !important;
}


.launch-status{
    color:#b4bbc0 !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:6.5px !important;

    letter-spacing:.2em !important;
}


.date-reveal{
    margin-bottom:13px !important;
}


.date-reveal span{
    color:#8f989f !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:6px !important;

    letter-spacing:.24em !important;
}


.date-reveal strong{
    margin-top:4px !important;

    color:#d8dcdf !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:12px !important;

    font-weight:800 !important;

    letter-spacing:.18em !important;
}


/* =========================================================
   FORM — SMALLER, SHARPER
   ========================================================= */

.signup-line{
    width:min(580px,100%) !important;

    background:
        rgba(7,10,14,.78) !important;

    border:
        1px solid rgba(255,255,255,.15) !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.34) !important;

    backdrop-filter:
        blur(16px) !important;
}


.email-field input{
    color:#f2f3f4 !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;
}


.email-field input::placeholder{
    color:#838c93 !important;
}


.email-field>span{
    color:var(--glory-gold-light) !important;
}


.signup-line button{
    background:
        linear-gradient(
            135deg,
            #e8bb65,
            #c78932
        ) !important;

    color:#090b0e !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-weight:900 !important;
}


.consent{
    color:#929aa0 !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:7px !important;
}


.consent a{
    color:#c3c8cc !important;
}


/* =========================================================
   DESKTOP — LET IMAGE BREATHE
   ========================================================= */

@media(min-width:1200px){

    .hero-content{
        margin-top:
            clamp(56px,7vh,92px) !important;
    }

    .hero h1{
        max-width:820px;
        margin-left:auto !important;
        margin-right:auto !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(min-width:768px) and (max-width:1199px){

    .hero{
        min-height:830px !important;
    }

    .hero-content{
        margin-top:48px !important;
    }

    .hero h1{
        font-size:
            clamp(54px,7.8vw,78px) !important;
    }

    .hero-arena{
        background-position:
            center center !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

    .scene-label-left,
    .scene-label-right{
        display:none !important;
    }

    .hero{
        min-height:
            max(780px,100svh) !important;

        padding-top:
            calc(
                86px
                +
                var(--safe-top)
            ) !important;
    }

    .hero-content{
        width:94% !important;

        margin-top:24px !important;
    }

    .hero-arena{
        inset:0 !important;

        background-position:
            center 50% !important;

        background-size:cover !important;

        transform:scale(1.015) !important;

        filter:
            saturate(1)
            contrast(1.05)
            brightness(.80) !important;
    }

    .hero-vignette{
        background:
            linear-gradient(
                180deg,
                rgba(3,6,9,.74) 0%,
                rgba(3,6,9,.34) 25%,
                rgba(3,6,9,.04) 47%,
                rgba(3,6,9,.18) 69%,
                rgba(3,6,9,.80) 100%
            ) !important;
    }

    .hero h1{
        font-size:
            clamp(
                46px,
                13vw,
                65px
            ) !important;

        line-height:.9 !important;
    }

    .hero-kicker{
        font-size:6.5px !important;

        letter-spacing:.18em !important;
    }

    .hero-intro{
        font-size:10px !important;

        max-width:92% !important;
    }

    .launch-panel{
        width:94% !important;

        margin-top:20px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:429px){

    .hero h1{
        font-size:
            clamp(
                42px,
                12.5vw,
                56px
            ) !important;
    }

    .hero-intro{
        font-size:9.5px !important;
    }

    .signup-line{
        width:100% !important;

        grid-template-columns:1fr !important;

        border-radius:14px !important;
    }

    .signup-line button{
        width:100% !important;
    }

}


/* =========================================================
   SHORT / LANDSCAPE PHONES
   ========================================================= */

@media(max-height:560px) and (orientation:landscape){

    .hero{
        min-height:650px !important;

        padding-top:72px !important;
    }

    .hero-content{
        margin-top:12px !important;
    }

    .hero h1{
        font-size:
            clamp(
                42px,
                7vw,
                58px
            ) !important;
    }

    .hero-intro{
        display:none;
    }

}