/* ==========================================================
                    HERO SECTION
        FUTURISTIC ROTATING GLASS DASHBOARD
========================================================== */



.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:130px;

    position:relative;

}




.hero-container{

    display:grid;

    grid-template-columns:

    1fr 1fr;

    align-items:center;

    gap:70px;

}





/* ==========================================================
                    LEFT CONTENT
========================================================== */



.hero-content{

    position:relative;

}



.hero-badge{


    display:inline-flex;


    align-items:center;


    gap:8px;


    padding:12px 25px;


    border-radius:50px;


    font-size:.9rem;


    margin-bottom:25px;


    background:


    rgba(255,255,255,.55);


    backdrop-filter:

    blur(20px);


    border:

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


    color:

    var(--primary-dark);


}




.hero-content h1{


    font-size:

    clamp(3rem,6vw,5rem);


    line-height:

    1;


    font-weight:800;


    letter-spacing:-2px;


}



.hero-content h1 span{


    background:

    linear-gradient(

        135deg,

        #789bff,

        #b5caff

    );


    -webkit-background-clip:text;


    color:transparent;


}





.hero-content p{


    margin-top:25px;


    max-width:520px;


    font-size:1.1rem;


}




.hero-buttons{


    margin-top:35px;


    display:flex;


    gap:18px;


    flex-wrap:wrap;


}
/* ==========================================================
                FUTURISTIC DASHBOARD AREA
========================================================== */


.hero-preview{


    display:flex;


    justify-content:center;


    align-items:center;


    perspective:1500px;


}





/* ==========================================================
                MAIN ROTATING GLASS CARD
========================================================== */


.dashboard-wrapper{


    width:430px;


    min-height:520px;


    padding:30px;


    border-radius:45px;


    position:relative;


    transform-style:

    preserve-3d;


    background:


    linear-gradient(

        145deg,

        rgba(255,255,255,.65),

        rgba(230,236,255,.35)

    );


    backdrop-filter:

    blur(35px);


    border:


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


    box-shadow:


    0 50px 120px rgba(90,131,255,.18);


    animation:


    dashboardRotate 10s infinite ease-in-out;



}





@keyframes dashboardRotate{


    0%,100%{


        transform:


        rotateY(-8deg)

        rotateX(5deg)

        translateY(0);


    }



    50%{


        transform:


        rotateY(8deg)

        rotateX(-5deg)

        translateY(-20px);


    }


}




/* ==========================================================
                    DASHBOARD GLOW RING
========================================================== */


.dashboard-wrapper::before{


    content:"";


    position:absolute;


    inset:-30px;


    border-radius:60px;


    background:


    linear-gradient(

        135deg,

        rgba(150,185,255,.35),

        transparent,

        rgba(255,255,255,.7)

    );


    filter:

    blur(35px);


    z-index:-1;


}





/* ==========================================================
                    TOP STATUS BAR
========================================================== */


.top-card{


    padding:22px;


    border-radius:28px;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:12px;


    background:


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


    border:


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


    font-weight:600;


}



.top-card i{


    color:

    var(--primary);


    font-size:1.4rem;


}
/* ==========================================================
                    DASHBOARD CONTENT AREA
========================================================== */


.dashboard-content{


    margin-top:25px;


    display:flex;


    flex-direction:column;


    gap:20px;


}





/* ==========================================================
                    BALANCE DISPLAY
========================================================== */


.balance-card{


    padding:30px;


    border-radius:32px;


    background:


    rgba(255,255,255,.5);


    border:


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


}



.balance-card span{


    display:block;


    color:

    var(--text-light);


    font-size:.9rem;


}




.balance-card h2{


    margin-top:8px;


    font-size:2.4rem;


    font-weight:800;


    background:


    linear-gradient(

        135deg,

        #638aff,

        #b9ccff

    );


    -webkit-background-clip:text;


    color:transparent;


}





/* ==========================================================
                    DATA GRID
========================================================== */


.dashboard-grid{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:18px;


}




.mini-card{


    padding:22px;


    border-radius:28px;


    text-align:center;


    background:


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


    border:


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


    transition:.35s;


}




.mini-card:hover{


    transform:


    translateY(-8px);


}



.mini-card i{


    font-size:1.7rem;


    color:

    var(--primary);


    margin-bottom:12px;


}



.mini-card h4{


    font-size:1.1rem;


}



.mini-card span{


    font-size:.85rem;


    color:

    var(--text-light);


}







/* ==========================================================
                    REFERRAL PROGRESS
========================================================== */


.progress-card{


    padding:25px;


    border-radius:30px;


    background:


    rgba(255,255,255,.5);


}





.progress-header{


    display:flex;


    justify-content:space-between;


    margin-bottom:15px;


}



.progress-bar{


    height:12px;


    width:100%;


    background:


    rgba(255,255,255,.7);


    border-radius:20px;


    overflow:hidden;


}




.progress-fill{


    height:100%;


    width:75%;


    border-radius:20px;


    background:


    linear-gradient(

        90deg,

        #6b90ff,

        #c1d0ff

    );


    animation:


    progressMove 3s ease;


}



@keyframes progressMove{


    from{


        width:0;


    }


    to{


        width:75%;


    }


}




/* ==========================================================
                    FLOATING DATA DOTS
========================================================== */


.dashboard-wrapper::after{


    content:"";


    position:absolute;


    width:15px;


    height:15px;


    border-radius:50%;


    background:

    var(--primary);


    top:80px;


    right:60px;


    box-shadow:


    0 0 30px var(--primary);


    animation:


    pulseDot 2s infinite;


}



@keyframes pulseDot{


    0%{


        transform:scale(1);


        opacity:.8;


    }


    50%{


        transform:scale(1.8);


        opacity:.3;


    }


    100%{


        transform:scale(1);


        opacity:.8;


    }


}
/* ==========================================================
                    HERO RESPONSIVE DESIGN
========================================================== */



@media(max-width:1100px){


    .hero-container{


        grid-template-columns:


        1fr;


        text-align:center;


    }



    .hero-content p{


        margin-left:auto;


        margin-right:auto;


    }



    .hero-buttons{


        justify-content:center;


    }



    .hero-preview{


        margin-top:60px;


    }


}





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


@media(max-width:768px){



    .hero{


        padding-top:110px;


    }



    .dashboard-wrapper{


        width:380px;


        min-height:auto;


        padding:25px;


    }



    .hero-content h1{


        font-size:3rem;


    }



}






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


@media(max-width:480px){



    .hero-content h1{


        font-size:2.5rem;


        letter-spacing:-1px;


    }



    .hero-content p{


        font-size:.95rem;


    }



    .hero-buttons{


        flex-direction:column;


    }



    .hero-buttons .btn{


        width:100%;


    }




    .dashboard-wrapper{


        width:100%;


        border-radius:35px;


        padding:20px;


        animation:


        none;


    }



    .dashboard-grid{


        grid-template-columns:


        1fr;


    }



    .balance-card h2{


        font-size:2rem;


    }



    .mini-card{


        padding:18px;


    }


}






/* ==========================================================
                    HERO FLOATING LIGHTS
========================================================== */


.hero::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    border-radius:50%;


    background:


    rgba(140,173,255,.18);


    filter:


    blur(90px);


    top:20%;


    right:10%;


    z-index:-1;


    animation:


    heroGlow 8s infinite alternate;


}





@keyframes heroGlow{


    from{


        transform:

        translateY(0);


    }


    to{


        transform:

        translateY(60px);


    }


}