/* ===============================
   NOVA XFINITY MUSIC
================================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#030303;
    color:#fff;
    font-family:'Inter','Segoe UI',Arial,sans-serif;
    padding-bottom:110px;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}


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


.nfx-header{

    height:85px;

    background:
    rgba(3,3,3,.95);

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

}


.nfx-header-container{

    height:100%;

    max-width:1500px;

    margin:auto;

    padding:0 70px;


    display:flex;

    align-items:center;

    gap:60px;

}


.nfx-logo img{

    width:65px;

    height:65px;

    object-fit:contain;

}


.nfx-nav{

    display:flex;

    align-items:center;

    gap:45px;

}


.nfx-nav a{

    color:white;

    font-size:16px;

    transition:.3s;

}


.nfx-nav a:hover{

    color:#ff4b1f;

}



/* ================= USER ACCOUNT ================= */


.nfx-user-menu{

    margin-left:auto;

    position:relative;

}


.user-icon{

    width:44px;

    height:44px;

    border-radius:50%;

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

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

    color:white;

    cursor:pointer;

}


.user-dropdown{

    position:absolute;

    right:0;

    top:55px;


    width:170px;


    background:#111;


    border-radius:15px;


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


    padding:10px;


    display:none;


    z-index:999;

}


.user-dropdown a{

    display:block;

    color:white;

    padding:12px;

}


.user-dropdown a:hover{

    color:#ff4b1f;

}


.nfx-user-menu:hover .user-dropdown{

    display:block;

}







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


.nfx-hero{

    min-height:620px;


    padding:

    70px 8%;


    display:grid;


    grid-template-columns:

    45% 55%;


    align-items:center;


    overflow:hidden;


    background:

    radial-gradient(
    circle at 75% 45%,
    rgba(255,75,31,.35),
    transparent 32%
    ),

    linear-gradient(
    90deg,
    #030303,
    #080808
    );

}



.section-label{

    color:#ff4b1f;

    letter-spacing:8px;

    font-size:14px;

    font-weight:bold;

}



.hero-text h1{

    margin:25px 0;


    font-size:62px;


    line-height:1.05;

}



.hero-text p{

    max-width:520px;

    color:#bbb;

    font-size:18px;

    line-height:1.8;

}



.primary-btn{

    display:inline-block;

    margin-top:35px;


    background:#ff4b1f;


    color:white;


    padding:

    18px 42px;


    border-radius:18px;


    font-weight:bold;


    box-shadow:

    0 0 35px rgba(255,75,31,.35);

}






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


.hero-art{

    height:450px;


    display:flex;

    justify-content:center;

    align-items:center;


    position:relative;

}



.hero-art::after{

    content:"";


    position:absolute;


    width:520px;

    height:130px;


    bottom:45px;


    border-radius:50%;


    background:

    linear-gradient(
    180deg,
    #111,
    #050505
    );


    border-bottom:

    3px solid #ff4b1f;


    box-shadow:

    0 0 45px rgba(255,75,31,.5);


    z-index:1;

}



.hero-art img{

    position:relative;


    z-index:2;


    width:300px;

    height:300px;


    object-fit:contain;


    filter:

    drop-shadow(
    0 0 45px rgba(255,75,31,.8)
    );


    animation:

    float 5s infinite ease-in-out;

}



.sound-wave{

    position:absolute;


    width:600px;

    height:200px;


    border-radius:50%;


    border:

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


    z-index:0;

}



@keyframes float{

    50%{

        transform:

        translateY(-20px);

    }

}







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


.nfx-section{

    padding:90px 8%;

}


.section-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.section-head a{

    color:#ff4b1f;

}


h2{

    font-size:42px;

}





/* ================= TRACKS ================= */


.tracks-row{

    margin-top:40px;


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(190px,1fr));


    gap:25px;

}






/* ================= COLLECTION ================= */


.collections{

    margin-top:45px;


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;

}



.collections div{

    min-height:220px;


    border-radius:25px;


    background:

    linear-gradient(
    150deg,
    rgba(255,75,31,.22),
    rgba(255,255,255,.03)
    );


    border:

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


    display:flex;

    flex-direction:column;


    align-items:center;

    justify-content:center;


    text-align:center;


    transition:.3s;

}



.collections div:hover{

    transform:

    translateY(-8px);

}



.collections span{

    font-size:45px;

    margin-bottom:20px;

}


.collections p{

    color:#bbb;

}






/* ================= ABOUT ================= */


.about-area{

    padding:90px 8%;


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:50px;


    background:#070707;

}



.about-area p{

    margin-top:25px;


    color:#aaa;


    font-size:18px;


    line-height:1.7;

}



.studio-bg{


    min-height:260px;


    border-radius:30px;


    background:

    radial-gradient(
    circle,
    rgba(255,75,31,.3),
    #050505 60%
    );

}






/* ================= PLAYER ================= */


.nfx-player{


    position:fixed;


    bottom:0;


    width:100%;


    height:95px;


    padding:

    0 8%;


    background:#050505;


    border-top:

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



    display:flex;


    align-items:center;


    justify-content:space-between;


    z-index:999;

}



.nfx-player img{

    width:60px;

    height:60px;


    border-radius:8px;


    object-fit:cover;

}



.nfx-player audio{

    width:55%;

}







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


@media(max-width:900px){


.nfx-header-container{

    padding:0 25px;

}


.nfx-nav{

    display:none;

}


.nfx-hero{

    grid-template-columns:1fr;


    text-align:center;

}


.hero-text h1{

    font-size:42px;

}


.hero-art img{

    width:220px;

    height:220px;

}


.hero-art::after{

    width:330px;

}


.sound-wave{

    display:none;

}


.collections{

    grid-template-columns:1fr;

}


.about-area{

    grid-template-columns:1fr;

}


}