/* =====================================================
   HUBPLAY PREMIUM WEB VERSION
   STYLE.CSS
===================================================== */


 :root {

    --bg: #050505;
    --bg-soft: #0c0c0c;

    --gold: #d4af37;
    --gold-light: #f5df96;
    --gold-dark: #9c7419;

    --white: #ffffff;
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.62);

    --glass:
        rgba(255,255,255,.055);

    --border:
        rgba(255,255,255,.12);

    --shadow:
        0 30px 100px rgba(0,0,0,.55);

    --radius:
        28px;

    --container:
        1200px;

}





* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-y:auto;
    background:#050505;
    overscroll-behavior-x:none;
    overscroll-behavior-y:auto;
}

body{
    width:100%;
    max-width:100%;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    background:#050505;
    overscroll-behavior-x:none;
    overscroll-behavior-y:auto;
}

body.loading {
    overflow: hidden;
}

body:not(.loading) {
    overflow-y: auto;
}

body {

    min-height:100vh;

    background:
        radial-gradient(
            circle at top,
            rgba(212,175,55,.18),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #090909,
            #020202
        );

    color:var(--text);

    font-family:
        "Inter",
        sans-serif;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}





body::before {

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

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

    background-size:
        45px 45px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );

    z-index:0;

}




a {

    text-decoration:none;

    color:inherit;

}



img {

    max-width:100%;

}




/* ==========================
   BACKGROUND SYSTEM
========================== */



.background{

    position:fixed;
    inset:0;

    width:100vw;
    height:100vh;

    background:#050505;

    overflow:hidden;

    pointer-events:none;

    z-index:-5;

}





.grid {

    position:absolute;

    inset:0;

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

    background-size:
        80px 80px;

    opacity:.25;

}




.orb {

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    animation:
        floatOrb 12s ease-in-out infinite;

}



.orb-one {

    width:600px;

    height:600px;

    background:
        rgba(212,175,55,.20);

    top:-200px;

    left:-150px;

}



.orb-two {

    width:500px;

    height:500px;

    background:
        rgba(212,175,55,.12);

    right:-150px;

    top:30%;

    animation-delay:-5s;

}




@keyframes floatOrb {


    0%,
    100% {

        transform:
        translate3d(0,0,0);

    }


    50% {

        transform:
        translate3d(40px,50px,0);

    }


}





/* ==========================
   CURSOR
========================== */


.cursor-glow {

    position:fixed;

    width:180px;

    height:180px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.16),
            transparent 70%
        );

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

    z-index:999;

    mix-blend-mode:screen;

    opacity:0;

}





/* ==========================
   LOADER
========================== */



.loader{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    z-index:999999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

    overflow:hidden;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.15),
            transparent 35%
        ),
        #050505;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


.loader.hide {

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}




.loader-logo {

    display:flex;

    align-items:center;

    gap:15px;

    font-size:20px;

    letter-spacing:.12em;

    text-transform:uppercase;

}



.loader-icon {

    width:60px;

    height:60px;

    border-radius:22px;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.25),
            rgba(255,255,255,.05)
        );


    border:
        1px solid rgba(245,223,150,.35);


    box-shadow:
        0 0 50px rgba(212,175,55,.25);


}




.loader-icon span {

    width:0;

    height:0;

    border-top:
        12px solid transparent;

    border-bottom:
        12px solid transparent;

    border-left:
        20px solid var(--gold-light);

}




.loader-line {

    width:260px;

    height:5px;

    border-radius:999px;

    overflow:hidden;

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

}



.loader-progress {

    height:100%;

    width:0;

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


    animation:
        loading 2s forwards;

}




@keyframes loading {

    from {

        width:0;

    }


    to {

        width:100%;

    }

}

/* ==========================
   NAVBAR
========================== */


.navbar {

    position:fixed;

    top:25px;

    left:0;

    width:100%;

    z-index:100;

}



.nav-inner {

    width:min(var(--container),92%);

    margin:auto;

    padding:14px 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:999px;


    background:
        rgba(10,10,10,.65);


    backdrop-filter:
        blur(25px);


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


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

}





.logo {

    display:flex;

    align-items:center;

    gap:14px;

}



.logo-symbol {

    width:46px;

    height:46px;

    border-radius:16px;

    position:relative;


    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.35),
            rgba(255,255,255,.05)
        );


    border:
        1px solid rgba(245,223,150,.35);


    box-shadow:

        0 0 35px rgba(212,175,55,.25);

}


.logo-symbol::before {
    content: "";
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 0;
    height: 0;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid var(--gold-light);
}


.logo-text strong {

    display:block;

    font-size:14px;

    letter-spacing:.18em;

    text-transform:uppercase;

}



.logo-text span {

    display:block;

    font-size:10px;

    color:var(--muted);

    letter-spacing:.18em;

    text-transform:uppercase;

}




nav {

    display:flex;

    align-items:center;

    gap:28px;

}



nav a {

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

    font-size:14px;

    transition:.3s;

}



nav a:hover {

    color:white;

}




.nav-button {

    padding:12px 22px;

    border-radius:999px;


    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );


    color:#111 !important;

    font-weight:700;

}








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


.hero {

    min-height:100vh;

    width:min(var(--container),92%);

    margin:auto;

    display:grid;

    grid-template-columns:

        1fr .9fr;


    align-items:center;

    gap:50px;


    padding-top:120px;

}



.hero-content {

    position:relative;

}




.badge {

    display:inline-flex;

    align-items:center;

    gap:12px;


    padding:12px 18px;


    border-radius:999px;


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


    border:
        1px solid rgba(245,223,150,.18);


    color:
        var(--gold-light);


    font-size:12px;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:30px;

}




.badge span {

    width:8px;

    height:8px;

    border-radius:50%;


    background:
        var(--gold-light);


    box-shadow:

        0 0 15px var(--gold);

}






.hero h1 {

    font-size:

        clamp(55px,8vw,110px);


    line-height:.92;

    letter-spacing:-.06em;

    font-weight:900;

    margin-bottom:30px;

    overflow-wrap:break-word;

}



.hero h1 span {


    background:

    linear-gradient(
        120deg,
        white,
        var(--gold-light),
        var(--gold)
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}





.hero p {

    max-width:600px;

    color:var(--muted);

    font-size:18px;

    line-height:1.7;

    margin-bottom:40px;

}






/* BUTTONS */



.hero-actions {

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}




.button {

    min-height:56px;

    padding:0 30px;

    display:inline-flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    font-weight:700;

    font-size:15px;


    transition:.35s;

}



.button:hover {

    transform:
        translateY(-4px);

}





.primary {


    color:#111;


    background:

    linear-gradient(
        135deg,
        #ffe9a8,
        #d4af37
    );


    box-shadow:

        0 20px 50px rgba(212,175,55,.25);

}




.secondary {

    border:

        1px solid var(--border);


    background:

        rgba(255,255,255,.05);


}





/* NUMBERS */


.numbers {

    margin-top:70px;

    display:flex;

    gap:50px;

}



.numbers div {

    display:flex;

    flex-direction:column;

}



.numbers strong {

    font-size:42px;

    line-height:1;

    color:white;

}



.numbers span {

    margin-top:8px;

    font-size:12px;

    color:var(--muted);

    text-transform:uppercase;

    letter-spacing:.15em;

}







/* HERO VISUAL */



.hero-visual {

    position:relative;

    height:600px;

    display:flex;

    align-items:center;

    justify-content:center;

}




.floating-card {

    width:340px;

    padding:45px 35px;

    border-radius:40px;


    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.03)
    );


    backdrop-filter:
        blur(25px);


    border:

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


    text-align:center;


    box-shadow:

        var(--shadow);


    animation:

        floating 6s ease-in-out infinite;

}




.play-circle {

    width:120px;

    height:120px;

    margin:auto auto 30px;


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.8),
        rgba(212,175,55,.15)
    );


    display:grid;

    place-items:center;


}




.play-icon {

    width:0;

    height:0;


    border-top:
        18px solid transparent;


    border-bottom:
        18px solid transparent;


    border-left:
        30px solid white;


    margin-left:8px;

}




.floating-card h3 {

    font-size:34px;

    margin-bottom:8px;

}



.floating-card p {

    color:var(--muted);

}



.status {

    margin-top:25px;

    display:inline-flex;

    gap:8px;

    align-items:center;


    padding:8px 15px;

    border-radius:999px;


    background:
        rgba(0,255,120,.08);

}



.status span {

    width:8px;

    height:8px;

    background:#36ff9b;

    border-radius:50%;

}





.light-ring {

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;


    border:

        1px solid rgba(212,175,55,.25);


    animation:

        rotateRing 20s linear infinite;

}




@keyframes floating {

    50% {

        transform:
        translateY(-25px);

    }

}



@keyframes rotateRing {

    to {

        transform:
        rotate(360deg);

    }

}

/* ==========================
   GLOBAL SECTIONS
========================== */


.section {

    width:min(var(--container),92%);

    margin:0 auto;

    padding:120px 0;

}



.section-header {

    max-width:750px;

    margin-bottom:70px;

}



.section-header span {

    color:var(--gold-light);

    font-size:12px;

    font-weight:700;

    letter-spacing:.2em;

    text-transform:uppercase;

    display:block;

    margin-bottom:20px;

}



.section-header h2 {

    font-size:

        clamp(40px,6vw,72px);


    line-height:.95;

    letter-spacing:-.05em;

    margin-bottom:20px;

}



.section-header p {

    color:var(--muted);

    font-size:18px;

    line-height:1.7;

}







/* ==========================
   BENTO GRID
========================== */


.bento-grid {

    display:grid;

    grid-template-columns:

        repeat(3,1fr);


    gap:20px;

}



.bento-card {

    min-height:260px;

    padding:35px;


    border-radius:32px;


    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );


    border:

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


    backdrop-filter:
        blur(20px);


    position:relative;

    overflow:hidden;


    transition:.4s;

}



.bento-card:hover {

    transform:
        translateY(-8px);


    border-color:

        rgba(212,175,55,.35);

}



.bento-card::before {

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(
        circle at top right,
        rgba(212,175,55,.18),
        transparent 45%
    );


    opacity:0;

    transition:.4s;

}



.bento-card:hover::before {

    opacity:1;

}




.bento-card.large {

    grid-column:
        span 2;

}



.bento-card.wide {

    grid-column:
        span 3;

    min-height:200px;

}




.bento-icon {

    width:55px;

    height:55px;

    display:grid;

    place-items:center;


    border-radius:20px;


    margin-bottom:25px;


    color:var(--gold-light);


    background:

    rgba(212,175,55,.12);


    border:

    1px solid rgba(212,175,55,.25);


    font-weight:800;

}



.bento-card h3 {

    font-size:26px;

    margin-bottom:15px;

}



.bento-card p {

    color:var(--muted);

    max-width:420px;

}



.bento-content {

    display:flex;

    align-items:center;

    gap:30px;

}



.mini-line {

    position:absolute;

    height:2px;

    width:50%;

    bottom:35px;

    left:35px;


    background:

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

}







/* ==========================
   PROCESS TIMELINE
========================== */



.timeline {

    position:relative;

    display:flex;

    flex-direction:column;

    gap:25px;

}



.timeline::before {

    content:"";

    position:absolute;

    left:35px;

    top:40px;

    bottom:40px;

    width:1px;


    background:

    linear-gradient(
        transparent,
        var(--gold),
        transparent
    );

}




.step {

    display:flex;

    align-items:center;

    gap:35px;


    padding:30px;


    border-radius:28px;


    background:

    rgba(255,255,255,.04);


    border:

    1px solid rgba(255,255,255,.1);


}



.step-number {

    width:70px;

    height:70px;


    flex-shrink:0;


    display:grid;

    place-items:center;


    border-radius:50%;


    background:

    linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );


    color:#111;

    font-weight:900;

}



.step h3 {

    font-size:25px;

    margin-bottom:5px;

}



.step p {

    color:var(--muted);

}







/* ==========================
   REVIEWS
========================== */


.review-slider {

    overflow:hidden;

}



.review-track {

    display:flex;

    gap:25px;


    width:max-content;


    animation:

        reviewMove 30s linear infinite;

}




.review-slider:hover
.review-track {

    animation-play-state:paused;

}





.review-card {

    width:360px;

    flex-shrink:0;


    padding:35px;


    border-radius:30px;


    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.09),
        rgba(255,255,255,.03)
    );


    border:

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


}



.stars {

    color:

    var(--gold-light);


    font-size:18px;

    margin-bottom:20px;

}



.review-card p {

    color:white;

    font-size:17px;

    line-height:1.7;

    margin-bottom:25px;

}



.review-card strong {

    color:

    var(--gold-light);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.12em;

}




@keyframes reviewMove {

    from {

        transform:
        translateX(0);

    }


    to {

        transform:
        translateX(-50%);

    }

}







.center-button {

    display:flex;

    justify-content:center;

    margin-top:50px;

}

/* ==========================
   PREMIUM EXPERIENCE
========================== */


.premium {

    padding-top:0;

}



.premium-box {

    position:relative;

    overflow:hidden;


    min-height:500px;


    display:flex;

    align-items:center;

    justify-content:center;


    text-align:center;


    border-radius:50px;


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );


    border:

    1px solid rgba(212,175,55,.2);


    box-shadow:

    var(--shadow);

}



.premium-glow {

    position:absolute;


    width:500px;

    height:500px;


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.3),
        transparent 70%
    );


    filter:blur(20px);


    animation:

    premiumPulse 5s infinite;

}




@keyframes premiumPulse {


    0%,
    100% {

        transform:scale(1);

        opacity:.7;

    }


    50% {

        transform:scale(1.2);

        opacity:1;

    }

}




.premium-content {

    position:relative;

    z-index:2;

}



.premium-content span {

    color:var(--gold-light);

    font-size:12px;

    letter-spacing:.25em;

}



.premium-content h2 {

    margin:25px 0;


    font-size:

    clamp(40px,6vw,75px);


    line-height:.95;


    letter-spacing:-.05em;

}



.premium-content p {

    color:var(--muted);

    font-size:18px;

}








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


.final-cta {

    width:min(var(--container),92%);

    margin:0 auto;

    padding:80px 0 140px;

}



.cta-inner {


    min-height:650px;


    border-radius:55px;


    position:relative;


    overflow:hidden;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;



    background:

    linear-gradient(
        135deg,
        #17120a,
        #050505
    );


    border:

    1px solid rgba(212,175,55,.3);


}



.cta-orb {


    position:absolute;


    width:600px;

    height:600px;


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.25),
        transparent 70%
    );


    filter:blur(40px);


}



.cta-inner span {


    position:relative;


    color:

    var(--gold-light);


    letter-spacing:.25em;


    font-size:12px;

}



.cta-inner h2 {


    position:relative;


    margin:25px 0;


    font-size:

    clamp(45px,7vw,90px);


    line-height:.9;


    letter-spacing:-.06em;

}



.cta-inner p {


    position:relative;


    max-width:650px;


    color:var(--muted);


    font-size:18px;


    line-height:1.7;


}



.cta-buttons {


    position:relative;


    display:flex;

    gap:18px;

    margin-top:40px;

}



.button.big {

    min-width:200px;

}







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



footer {

    padding:40px 0 60px;

}



.footer-inner {


    width:min(var(--container),92%);

    margin:auto;


    display:flex;


    justify-content:space-between;


    align-items:center;


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


}



.footer-brand {


    display:flex;

    align-items:center;

    gap:12px;

}



.footer-brand strong {


    display:block;


    color:white;


    font-size:14px;

    letter-spacing:.12em;

    text-transform:uppercase;


}



.footer-brand span {


    display:block;


    font-size:10px;


}



footer p {

    font-size:13px;

}







/* ==========================
   SCROLL REVEAL
========================== */



.reveal {


    opacity:0;


    transform:

    translateY(50px);


    filter:

    blur(10px);


    transition:

    opacity .8s ease,

    transform .8s ease,

    filter .8s ease;


}



.reveal.active {


    opacity:1;


    transform:

    translateY(0);


    filter:

    blur(0);

}







/* ==========================
   SHINE BUTTON EFFECT
========================== */



.primary {

    position:relative;

    overflow:hidden;

}



.primary::after {


    content:"";


    position:absolute;


    top:0;

    left:-100%;


    width:70%;


    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );


    transition:.7s;


}



.primary:hover::after {


    left:130%;


}

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


@media(max-width:1100px){


    .hero {

        grid-template-columns:1fr;

        text-align:center;

        padding-top:150px;

    }



    .hero p {

        margin-left:auto;

        margin-right:auto;

    }



    .hero-actions {

        justify-content:center;

    }



    .numbers {

        justify-content:center;

        flex-wrap:wrap;

    }



    .hero-visual {

        height:500px;

    }



    .bento-grid {

        grid-template-columns:

        repeat(2,1fr);

    }



    .bento-card.large,
    .bento-card.wide {

        grid-column:auto;

    }


}








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



@media(max-width:760px){


    :root {

        --container:100%;

    }



    .navbar {

        top:12px;

    }



    .nav-inner {


        width:94%;


        padding:12px 15px;


    }



    nav {


        display:none;

    }





    .logo-symbol {

        width:40px;

        height:40px;

    }




    .logo-text strong {

        font-size:12px;

    }





    .hero {


        width:92%;


        min-height:auto;


        padding-top:120px;


        gap:20px;


    }





    .badge {


        font-size:10px;


        padding:10px 14px;


    }





    .hero h1 {


        font-size:

        clamp(44px,13vw,65px);


        letter-spacing:-.05em;


    }





    .hero p {


        font-size:16px;


    }





    .hero-actions {


        flex-direction:column;


    }



    .button {


        width:100%;


    }





    .numbers {


        margin-top:45px;


        gap:30px;


        display:grid;


        grid-template-columns:1fr;


    }



    .numbers strong {


        font-size:36px;


    }






    .hero-visual {


        height:380px;


    }





    .floating-card {


        width:290px;


        padding:35px 25px;


    }




    .play-circle {


        width:90px;

        height:90px;


    }




    .light-ring {

        width:280px;

        height:280px;

    }





    .section {


        padding:80px 0;

        width:92%;

    }





    .section-header {


        margin-bottom:40px;


    }





    .section-header h2 {


        font-size:42px;


    }







    .bento-grid {


        grid-template-columns:1fr;


    }



    .bento-card {


        min-height:220px;


        padding:25px;


    }





    .bento-content {


        flex-direction:column;


        align-items:flex-start;


    }







    .step {


        padding:22px;


        gap:20px;


    }





    .step-number {


        width:55px;


        height:55px;


        font-size:13px;


    }





    .review-card {


        width:300px;


        padding:28px;


    }







    .premium-box {


        min-height:400px;


        border-radius:35px;


        padding:30px;


    }





    .premium-content h2 {


        font-size:40px;


    }





    .final-cta {


        width:92%;


        padding-bottom:80px;


    }





    .cta-inner {


        min-height:500px;


        padding:30px;


        border-radius:35px;


    }





    .cta-inner h2 {


        font-size:45px;


    }





    .cta-buttons {


        width:100%;


        flex-direction:column;


    }







    .footer-inner {


        flex-direction:column;


        gap:20px;


        text-align:center;


    }


}








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


@media(max-width:420px){



    .hero h1 {

        font-size:42px;

    }




    .floating-card {


        width:260px;


    }



    .section-header h2 {


        font-size:36px;


    }



    .cta-inner h2 {


        font-size:38px;


    }



}





/* ==========================
   ACCESSIBILITY
========================== */


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


    *,
    *::before,
    *::after {


        animation-duration:.01ms!important;


        transition-duration:.01ms!important;


    }

    /* FIX MOBILE HORIZONTAL OVERFLOW */

    .orb,
    .light-ring,
    .premium-glow,
    .cta-orb {

        max-width:100vw;

    }


    @media(max-width:760px){

        .orb-two {

            right:-250px;

        }


        .light-ring {

            max-width:none;

        }


        .premium-glow,
        .cta-orb {

            max-width:none;

        }

    }


} 
/* ==========================
   AUTH NAVIGATION LINKS
========================== */
.nav-login {
    color: rgba(255,255,255,.78);
    font-size: 14px;
    font-weight: 700;
    transition: color .2s ease;
}

.nav-login:hover {
    color: var(--gold-light);
}

/* ==========================
   MOBILE AUTH NAVIGATION FIX
========================== */
@media (max-width:760px) {
    .nav-inner {
        gap:10px;
    }

    /* Mantiene visibili Login e Registrazione su smartphone */
    .nav-inner nav {
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:8px;
        margin-left:auto;
        flex-shrink:0;
    }

    /* Nasconde soltanto i link di navigazione standard */
    .nav-inner nav a:not(.nav-login):not(.nav-button) {
        display:none;
    }

    .nav-login,
    .nav-button {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        white-space:nowrap;
    }

    .nav-login {
        padding:9px 6px;
        font-size:12px;
    }

    .nav-button {
        padding:10px 13px;
        font-size:12px;
    }
}

@media (max-width:420px) {
    .nav-inner {
        width:96%;
        padding:10px 11px;
    }

    .logo {
        gap:8px;
    }

    .logo-text span {
        display:none;
    }

    .nav-inner nav {
        gap:5px;
    }

    .nav-login {
        padding:8px 4px;
        font-size:11px;
    }

    .nav-button {
        padding:9px 10px;
        font-size:11px;
    }
}

/* ==========================
   MOBILE DROPDOWN NAVIGATION
========================== */

/* Desktop: elementi mobile sempre esclusi dal layout. */
.mobile-menu-toggle,
.mobile-nav-menu {
    display: none !important;
}

.mobile-menu-toggle {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
}

@media (max-width: 760px) {
    .navbar {
        top: 10px;
    }

    .nav-inner {
        position: relative;
        width: 94%;
        min-height: 62px;
        gap: 10px;
        overflow: visible;
        padding: 9px 10px 9px 12px;
        border-radius: 22px;
        background: linear-gradient(145deg, rgba(16,16,16,.92), rgba(7,7,7,.88));
        border-color: rgba(245,223,150,.16);
        box-shadow: 0 14px 45px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.055);
    }

    .logo {
        min-width: 0;
        gap: 10px;
    }

    .logo-symbol {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 14px;
    }

    .logo-text strong {
        max-width: calc(100vw - 130px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 11px;
        letter-spacing: .12em;
    }

    /* Smartphone: la navbar desktop viene sostituita dal menu compatto. */
    .nav-inner > nav {
        display: none !important;
    }

    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-left: auto;
        padding: 0;
        border: 1px solid rgba(245,223,150,.30);
        border-radius: 15px;
        background:
            radial-gradient(circle at 30% 20%, rgba(245,223,150,.14), transparent 42%),
            linear-gradient(145deg, rgba(212,175,55,.15), rgba(255,255,255,.035));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.30);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .mobile-menu-toggle:active {
        transform: scale(.95);
    }

    .mobile-menu-toggle:focus-visible {
        outline: 2px solid var(--gold-light);
        outline-offset: 3px;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--gold-light), var(--gold));
        box-shadow: 0 0 9px rgba(212,175,55,.24);
        transition: transform .24s ease, opacity .18s ease, width .2s ease;
    }

    .mobile-menu-toggle span:nth-child(2) {
        width: 13px;
        margin-left: 5px;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        width: 0;
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-nav-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 1000;
        width: min(330px, calc(100vw - 24px));
        padding: 12px;
        border: 1px solid rgba(245,223,150,.18);
        border-radius: 24px;
        background:
            radial-gradient(circle at 100% 0, rgba(212,175,55,.13), transparent 38%),
            linear-gradient(165deg, rgba(18,18,18,.985), rgba(5,5,5,.985));
        box-shadow: 0 28px 75px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        opacity: 0;
        transform: translateY(-8px) scale(.975);
        transform-origin: top right;
        pointer-events: none;
        transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1);
    }

    .mobile-nav-menu[hidden] {
        display: none !important;
    }

    .mobile-nav-menu.is-open {
        display: block !important;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .mobile-nav-head {
        padding: 7px 9px 13px;
        border-bottom: 1px solid rgba(255,255,255,.075);
    }

    .mobile-nav-kicker {
        display: block;
        margin-bottom: 5px;
        color: var(--gold-light);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .mobile-nav-head strong {
        color: #fff;
        font-size: 14px;
        letter-spacing: .02em;
    }

    .mobile-nav-links,
    .mobile-nav-auth {
        display: grid;
        gap: 5px;
        padding-top: 8px;
    }

    .mobile-nav-auth {
        margin-top: 7px;
        border-top: 1px solid rgba(255,255,255,.075);
    }

    .mobile-nav-item {
        display: grid;
        grid-template-columns: 38px 1fr;
        align-items: center;
        gap: 11px;
        min-height: 57px;
        padding: 7px 9px;
        border: 1px solid transparent;
        border-radius: 16px;
        color: rgba(255,255,255,.9);
        transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus-visible {
        background: rgba(255,255,255,.055);
        border-color: rgba(255,255,255,.08);
        outline: none;
        transform: translateX(2px);
    }

    .mobile-nav-icon {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        color: var(--gold-light);
        background: rgba(212,175,55,.10);
        border: 1px solid rgba(212,175,55,.18);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .03em;
    }

    .mobile-nav-item > span:last-child {
        min-width: 0;
    }

    .mobile-nav-item strong,
    .mobile-nav-item small {
        display: block;
    }

    .mobile-nav-item strong {
        color: #fff;
        font-size: 13px;
        line-height: 1.2;
    }

    .mobile-nav-item small {
        margin-top: 4px;
        color: rgba(255,255,255,.48);
        font-size: 10px;
        line-height: 1.2;
    }

    .mobile-nav-primary {
        min-height: 48px;
        margin-top: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        color: #151109;
        background: linear-gradient(135deg, #f9e4a0, #d4af37);
        box-shadow: 0 12px 27px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.42);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .035em;
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .mobile-nav-primary:hover,
    .mobile-nav-primary:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 15px 32px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.5);
        outline: none;
    }
}

@media (max-width: 420px) {
    .nav-inner {
        width: calc(100% - 18px);
    }

    .logo-symbol {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
    }

    .logo-text strong {
        font-size: 10px;
        letter-spacing: .095em;
    }

    .mobile-menu-toggle {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 13px;
    }

    .mobile-nav-menu {
        right: -1px;
        width: min(318px, calc(100vw - 18px));
        border-radius: 21px;
    }
}

/* =====================================================
   CTA ACCOUNT — HOME PAGE
===================================================== */

.hero-account-actions {
    align-items: stretch;
}

.hero-account-actions .button {
    min-width: 220px;
}

.hero-account-note {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.6;
}

.hero-account-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 14px rgba(212,175,55,.65);
}

.cta-account-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cta-telegram-link {
    width: 100%;
    margin-top: 4px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color .2s ease;
}

.cta-telegram-link:hover {
    color: var(--gold-light);
}

@media (max-width: 760px) {
    .hero-account-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .hero-account-actions .button {
        width: 100%;
        min-width: 0;
    }

    .hero-account-note {
        align-items: flex-start;
        font-size: 12px;
    }

    .cta-account-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .cta-account-buttons .button {
        width: 100%;
    }
}


/* =====================================================
   MOBILE UX FIXES — allineamento, torna su, menu lock
===================================================== */

html.menu-open,
body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

@media (max-width: 760px) {
    .hero-account-note {
        width: fit-content;
        max-width: min(100%, 620px);
        margin: 18px auto 0;
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        text-align: left;
    }

    .hero-account-note > span:last-child {
        display: block;
    }

    .hero-account-dot {
        flex: 0 0 8px;
        margin-top: .48em;
    }

    .mobile-nav-menu {
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

.back-to-top {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
    z-index: 1200;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(245,223,150,.34);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 20%, rgba(245,223,150,.18), transparent 45%),
        rgba(12,12,12,.88);
    color: var(--gold-light);
    box-shadow:
        0 16px 40px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font: inherit;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(.94);
    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease,
        border-color .22s ease;
    -webkit-tap-highlight-color: transparent;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.back-to-top:active {
    transform: scale(.92);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

@media (min-width: 761px) {
    .back-to-top {
        right: 28px;
        bottom: 28px;
    }
}


/* =====================================================
   HUBPLAY HOME — MOBILE / RESPONSIVE FINAL POLISH
   Correzioni globali aggiunte dopo la revisione completa
===================================================== */

/* Gli elementi decorativi non devono mai creare overflow.
   Nel file precedente alcune di queste regole erano dentro
   prefers-reduced-motion e quindi non valevano per tutti. */
.orb,
.light-ring,
.premium-glow,
.cta-orb {
    max-width: 100vw;
}

.hero,
.section,
.final-cta,
.nav-inner,
.footer-inner,
.hero-content,
.hero-visual,
.bento-grid,
.bento-card,
.timeline,
.step,
.review-slider,
.premium-box,
.cta-inner {
    min-width: 0;
    max-width: 100%;
}

.hero h1,
.hero p,
.section-header h2,
.section-header p,
.bento-card h3,
.bento-card p,
.step h3,
.step p,
.premium-content h2,
.premium-content p,
.cta-inner h2,
.cta-inner p,
.review-card p {
    overflow-wrap: anywhere;
}

/* Migliore altezza sui browser mobile moderni. */
.loader {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Il bagliore del mouse non serve sui dispositivi touch. */
@media (hover: none), (pointer: coarse) {
    .cursor-glow {
        display: none !important;
    }

    .button:hover,
    .bento-card:hover {
        transform: none;
    }
}

@media (max-width: 1100px) {
    .hero {
        min-height: auto;
        padding-bottom: 50px;
    }

    .hero-content,
    .hero-account-note {
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    .navbar {
        top: max(10px, env(safe-area-inset-top));
        padding-inline:
            max(0px, env(safe-area-inset-left))
            max(0px, env(safe-area-inset-right));
    }

    .nav-inner {
        width: calc(100% - 18px);
        max-width: calc(100% - 18px);
    }

    .hero {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        padding-top: calc(105px + env(safe-area-inset-top));
        padding-bottom: 34px;
        overflow: visible;
    }

    .hero-content {
        width: 100%;
    }

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

    .hero-visual {
        width: 100%;
        height: 340px;
        overflow: hidden;
    }

    .floating-card {
        width: min(290px, calc(100vw - 52px));
        max-width: 100%;
    }

    .light-ring {
        width: min(280px, calc(100vw - 44px));
        height: min(280px, calc(100vw - 44px));
        max-width: none;
    }

    .section,
    .final-cta {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }

    .section {
        padding: 72px 0;
    }

    .bento-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bento-card,
    .bento-card.large,
    .bento-card.wide {
        width: 100%;
        grid-column: auto;
    }

    .step {
        align-items: flex-start;
    }

    .timeline::before {
        left: 27px;
    }

    .review-slider {
        width: 100%;
        max-width: 100%;
    }

    .review-card {
        width: min(300px, calc(100vw - 48px));
    }

    .premium-box,
    .cta-inner {
        width: 100%;
    }

    .premium-glow,
    .cta-orb {
        width: min(500px, 125vw);
        height: min(500px, 125vw);
        max-width: none;
    }

    .footer-inner {
        width: calc(100% - 24px);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .back-to-top {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 420px) {
    .logo-text strong {
        max-width: calc(100vw - 118px);
    }

    .hero {
        padding-top: calc(98px + env(safe-area-inset-top));
    }

    .badge {
        max-width: 100%;
        white-space: normal;
        line-height: 1.4;
        text-align: left;
    }

    .hero h1 {
        font-size: clamp(38px, 12vw, 46px);
    }

    .numbers {
        width: 100%;
    }

    .numbers div {
        align-items: center;
        text-align: center;
    }

    .hero-visual {
        height: 315px;
    }

    .floating-card {
        width: min(260px, calc(100vw - 44px));
    }

    .section-header h2,
    .premium-content h2,
    .cta-inner h2 {
        hyphens: auto;
    }

    .step {
        gap: 15px;
        padding: 19px;
    }

    .step-number {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }
}


/* =====================================================
   FIX LOADER MOBILE — BLOCCO COMPLETO DELLA PAGINA
===================================================== */

/* Blocca anche l'elemento html: su iOS overflow:hidden sul solo body
   non impedisce sempre il rimbalzo e lo spostamento del contenuto. */
html.loading,
body.loading {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
}

body.loading {
    position: fixed !important;
    inset: 0 !important;
}

/* Durante il caricamento il loader è l'unico livello visibile e interattivo. */
html.loading .loader,
body.loading .loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    z-index: 2147483647;
    isolation: isolate;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background:
        radial-gradient(circle at center, rgba(212,175,55,.15), transparent 35%),
        #050505;
}

/* Impedisce che Safari mostri elementi sottostanti durante il rubber-band. */
body.loading > *:not(.loader) {
    visibility: hidden;
}

body.loading > .loader {
    visibility: visible;
}

@supports (-webkit-touch-callout: none) {
    html.loading,
    body.loading {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}