/* ===================================================
   QuartzSMP Website V5
=================================================== */


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:#090611;
color:white;
min-height:100vh;
overflow-x:hidden;

}





/* BACKGROUND */


#background{

position:fixed;
inset:0;

z-index:-1;


background:

radial-gradient(circle at top,#9145ff66,transparent 35%),

radial-gradient(circle at bottom,#c66cff33,transparent 45%),

linear-gradient(
180deg,
#090611,
#12081f,
#090611
);


}





/* HEADER */


header{


position:fixed;

top:0;
left:0;

width:100%;
height:85px;


padding:0 60px;


display:flex;

align-items:center;

justify-content:space-between;


background:rgba(12,8,25,.75);


backdrop-filter:blur(18px);


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


z-index:1000;


}





.logo{


display:flex;

align-items:center;

gap:15px;


}





.logo img{


width:62px;

height:62px;


object-fit:contain;


filter:
drop-shadow(
0 0 20px #a85cff
);


}





.logo-text h2{


font-size:29px;

font-weight:800;


background:
linear-gradient(
90deg,
white,
#c078ff,
#8745ff
);


-webkit-background-clip:text;

color:transparent;


}





.logo-text span{


font-size:11px;

letter-spacing:5px;

color:#ccc;


}





/* NAV */


.navigation{


display:flex;

gap:32px;


}



.navigation a{


color:#ddd;

text-decoration:none;

font-weight:600;

cursor:pointer;


transition:.3s;


}



.navigation a:hover,
.navigation a.active{


color:#bb7cff;


}






#menuBtn{


display:none;


background:none;

border:none;

color:white;

font-size:30px;

cursor:pointer;


}






/* MAIN */


main{


width:min(1400px,92%);


margin:auto;


padding-top:120px;


min-height:100vh;


}







/* HERO */


.hero{


min-height:80vh;


display:flex;

align-items:center;


}



.hero h1{


font-size:72px;


margin:25px 0;


}



.hero h1 span{


background:

linear-gradient(
90deg,
#ffffff,
#a958ff
);


-webkit-background-clip:text;

color:transparent;


}



.hero h2{


font-size:30px;

color:#ddd;


}



.hero p{


margin-top:20px;

max-width:650px;


font-size:18px;


line-height:1.7;


color:#bbb;


}







/* BUTTONS */


.play-btn,
.discord-btn,
.buy-btn,
.submit-btn{


padding:16px 32px;


border-radius:15px;


font-weight:700;


cursor:pointer;


border:none;


}



.play-btn,
.buy-btn,
.submit-btn{


background:

linear-gradient(
135deg,
#8b40ff,
#d477ff
);


color:white;


}



.discord-btn{


background:#ffffff15;

border:
1px solid #ffffff25;


color:white;


}





/* PAGE */


.page{


padding:40px 0;


}



.page h1{


font-size:45px;

margin-bottom:15px;


}






/* STORE */


.store-category{


margin-top:45px;


}



.store-category h2{


color:#ca8cff;

margin-bottom:20px;


}



.store-grid{


display:grid;


grid-template-columns:
repeat(
auto-fit,
minmax(220px,1fr)
);


gap:20px;


}





.store-card,
.dashboard-card{


background:#ffffff10;


border:
1px solid #ffffff18;


padding:25px;


border-radius:20px;


backdrop-filter:blur(12px);


}



.price{


font-size:22px;


color:#d19aff;


margin:15px 0;


}








/* FORMS */


.form-container{


max-width:600px;


display:flex;


flex-direction:column;


gap:15px;


}



input,
textarea{


background:#ffffff12;


border:none;


padding:15px;


border-radius:12px;


color:white;


}



textarea{


height:130px;


}







/* FOOTER */


footer{


display:flex;


justify-content:space-around;


padding:40px;


background:#05030a;


}







/* MOBILE */


@media(max-width:900px){



header{


padding:0 20px;


}




#menuBtn{


display:block;


}



.navigation{


display:none;


position:absolute;


top:85px;


left:0;


width:100%;


padding:25px;


background:#0d0718;


flex-direction:column;


}




.navigation.show{


display:flex;


}



.hero h1{


font-size:45px;


}



footer{


flex-direction:column;


gap:25px;


}



}