/* ==============================
   RESET
============================== */

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

html {
    scroll-behavior:smooth;
}

body {

    font-family:'Inter',sans-serif;
    background:#08090d;
    color:white;
    overflow-x:hidden;

}


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


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


.navbar {

    position:fixed;
    top:0;
    width:100%;
    z-index:1000;

    backdrop-filter:blur(15px);
    background:rgba(8,9,13,.75);

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

}


.nav-container {

    max-width:1300px;
    margin:auto;

    height:85px;

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

    padding:0 30px;

}


.logo {

    font-size:26px;
    font-weight:800;
    letter-spacing:-1px;

}


.logo span {

    color:#6366f1;

}


nav {

    display:flex;
    gap:35px;

}


nav a {

    color:#b8b8c5;
    font-size:15px;
    transition:.3s;

}


nav a:hover {

    color:white;

}


/* BUTTONS */


.btn-primary {

    background:
    linear-gradient(
    135deg,
    #6366f1,
    #8b5cf6
    );

    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}


.btn-primary:hover {

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(99,102,241,.35);

}



.btn-login {

    margin-right:15px;

    color:#ddd;

}



.btn-outline {

    padding:14px 28px;

    border-radius:12px;

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

    transition:.3s;

}


.btn-outline:hover {

    background:white;
    color:black;

}



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


.hero {

    min-height:100vh;

    padding-top:160px;

    max-width:1300px;

    margin:auto;

    padding-left:30px;
    padding-right:30px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    position:relative;

}




.hero:before {


content:"";

position:absolute;

width:500px;
height:500px;

background:#6366f1;

filter:blur(180px);

opacity:.25;

top:100px;
right:200px;

z-index:-1;


}



.hero-content {

    max-width:650px;

}


.hero h1 {

    font-size:70px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-3px;

}


.hero h1 span {

    background:
    linear-gradient(
    90deg,
    #6366f1,
    #22d3ee
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero p {

    margin-top:30px;

    font-size:19px;

    color:#a5a5b5;

    line-height:1.7;

}



.hero-buttons {

    display:flex;

    gap:20px;

    margin-top:40px;

}





/* ==============================
   SKINS CARD
============================== */


.hero-card {

    width:420px;

}



.skin-card {


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


border:

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


padding:20px;

border-radius:20px;


display:flex;

gap:20px;


align-items:center;


margin-bottom:20px;


backdrop-filter:blur(20px);


transition:.4s;


}



.skin-card:hover {


transform:
translateY(-10px)
scale(1.03);


border-color:#6366f1;


}



.skin-card img {


width:90px;

height:90px;

object-fit:contain;


}



.skin-card h3 {

font-size:18px;

}



.skin-card p {

color:#999;

margin:8px 0;

}



.skin-card strong {

color:#22c55e;

}



/* ==============================
STATS
============================== */


.stats {


max-width:1200px;

margin:80px auto;

padding:40px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;


background:

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


border-radius:25px;


border:

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


}


.stats div {

text-align:center;

}



.stats h2 {

font-size:45px;

background:
linear-gradient(
90deg,
#6366f1,
#22d3ee
);


-webkit-background-clip:text;

color:transparent;

}



.stats p {

color:#aaa;

margin-top:10px;

}



/* ==============================
FEATURES
============================== */


.features {

max-width:1200px;

margin:150px auto;

padding:0 30px;

}



.features h2 {

text-align:center;

font-size:45px;

margin-bottom:60px;

}



.cards {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.feature-card {


padding:35px;


border-radius:20px;


background:

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



border:

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



transition:.3s;


}



.feature-card:hover {

transform:translateY(-10px);

}



.feature-card h3 {

font-size:22px;

margin-bottom:15px;

}



.feature-card p {

color:#aaa;

line-height:1.6;

}



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


.footer {

margin-top:100px;

padding:60px 30px;

background:#050507;


}



.footer-container {


max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;


}



.footer h3 {

font-size:28px;

}



.footer h4 {

margin-bottom:20px;

}



.footer a {

display:block;

color:#999;

margin-bottom:12px;

}



.footer a:hover {

color:white;

}



.copyright {

text-align:center;

margin-top:50px;

color:#777;

}



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


@media(max-width:900px){


.hero {

flex-direction:column;

text-align:center;

}



.hero h1 {

font-size:45px;

}



.hero-card {

margin-top:50px;

width:100%;

}



.stats {

grid-template-columns:1fr;

margin:30px;

}



.cards {

grid-template-columns:1fr;

}



.footer-container {

grid-template-columns:1fr;

}



nav {

display:none;

}


}

/* ===============================
SCROLL ANIMATION
=============================== */


.hidden{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;

}



.show{

opacity:1;

transform:
translateY(0);

}





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


.mobile-menu{

display:none;

font-size:30px;

cursor:pointer;

}



@media(max-width:900px){


.mobile-menu{

display:block;

}



nav.active{


display:flex;

position:absolute;

top:85px;

left:0;

width:100%;


flex-direction:column;

align-items:center;


padding:30px;


background:#08090d;


}



.nav-buttons{

display:none;

}


}

/* ===============================
STEPS
================================ */


.steps,
.pricing,
.reviews,
.faq,
.cta{

max-width:1200px;

margin:150px auto;

padding:0 30px;

}



.steps h2,
.pricing h2,
.reviews h2,
.faq h2{

text-align:center;

font-size:45px;

margin-bottom:60px;

}




.steps-container,
.pricing-container,
.reviews-container{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}




.step-card,
.price-card,
.review-card{


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


border:

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


border-radius:22px;


padding:35px;


transition:.3s;


}



.step-card:hover,
.price-card:hover,
.review-card:hover{


transform:
translateY(-10px);


border-color:#6366f1;


}



.step-number{


font-size:40px;

font-weight:800;

color:#6366f1;

margin-bottom:20px;

}




/* PRICING */


.pricing-container{

grid-template-columns:repeat(3,1fr);

}



.price-card h3{

font-size:25px;

}


.price{

font-size:45px;

font-weight:800;

margin:25px 0;

}



.price span{

font-size:16px;

color:#aaa;

}



.price-card ul{

list-style:none;

color:#bbb;

line-height:2.2;

margin-bottom:30px;

}



.popular{

border-color:#6366f1;

position:relative;

}



.badge{

position:absolute;

top:-15px;

right:20px;

background:#6366f1;

padding:8px 15px;

border-radius:20px;

font-size:12px;

}





/* REVIEWS */


.reviews-container{

grid-template-columns:repeat(3,1fr);

}



.stars{

color:#facc15;

font-size:22px;

margin-bottom:20px;

}





/* FAQ */


.faq-box{

max-width:900px;

margin:auto;

}



details{


background:#11131a;

padding:25px;

margin-bottom:15px;

border-radius:15px;

cursor:pointer;

}



summary{

font-size:18px;

font-weight:600;

}



details p{

margin-top:20px;

color:#aaa;

}





/* CTA */


.cta{

text-align:center;

padding:80px 30px;


background:

linear-gradient(
135deg,
rgba(99,102,241,.2),
rgba(34,211,238,.1)
);


border-radius:30px;


}



.cta h2{

font-size:50px;

}



.cta p{

color:#aaa;

margin:20px;

}



/* RESPONSIVE */


@media(max-width:900px){


.steps-container,
.pricing-container,
.reviews-container{

grid-template-columns:1fr;

}


}

/* AUTH */


.auth-container{

max-width:450px;

margin:150px auto;

padding:40px;


background:

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


border-radius:25px;


border:

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


text-align:center;

}



.auth-container h1{

font-size:40px;

margin-bottom:20px;

}



.auth-container input{


width:100%;

padding:15px;

margin:10px 0;


background:#11131a;


border:1px solid #222;


border-radius:12px;


color:white;


}



.auth-container button{

width:100%;

border:none;

cursor:pointer;

margin-top:20px;

}



.alert{


background:#22c55e;

padding:15px;

border-radius:12px;

margin-bottom:20px;


}

/* =========================
 DASHBOARD
========================= */


.dashboard{


display:flex;

max-width:1400px;

margin:130px auto;

padding:0 30px;

gap:30px;


}



.sidebar{


width:280px;


background:

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


border:

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


border-radius:25px;


padding:30px;


height:max-content;


}



.profile-mini{

text-align:center;

}



.profile-mini img{


width:90px;

height:90px;


border-radius:50%;


margin-bottom:15px;


}



.profile-mini span{


background:#6366f1;

padding:7px 15px;

border-radius:20px;


font-size:12px;


}



.sidebar ul{


list-style:none;

margin-top:40px;


}



.sidebar li{


margin-bottom:20px;


}



.sidebar a{


color:#bbb;


transition:.3s;


}



.sidebar a:hover{


color:white;


}



.dashboard-content{


flex:1;


}



.dashboard-content h1{


font-size:45px;


}



.subtitle{


color:#aaa;

margin-bottom:40px;


}



.dashboard-cards{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}



.dash-card,
.seller-box,
.skins-box{


background:

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


border:

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


border-radius:25px;


padding:30px;


margin-bottom:30px;


}



.dash-card strong{


font-size:45px;


color:#6366f1;


}



.profile-link{


background:#08090d;

padding:15px;

border-radius:12px;

margin:20px 0;


color:#22d3ee;


}



.empty{


text-align:center;

padding:50px;

color:#aaa;


}




@media(max-width:900px){


.dashboard{

flex-direction:column;

}



.sidebar{

width:100%;

}



.dashboard-cards{

grid-template-columns:1fr;

}


}

.user-menu{

position:relative;

}



.user-trigger{

display:flex;

align-items:center;

gap:12px;

cursor:pointer;

user-select:none;

}



.user-trigger img{

width:45px;

height:45px;

border-radius:50%;

}



.user-trigger strong{

display:block;

}



.user-trigger small{

display:block;

color:#6366f1;

}




.dropdown{


position:absolute;


right:0;


top:60px;



width:230px;


background:#11131a;


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


border-radius:16px;


padding:10px;



opacity:0;


visibility:hidden;


pointer-events:none;



transform:translateY(-10px);


transition:.2s ease;


z-index:9999;


}




.dropdown.active{


opacity:1;


visibility:visible;


pointer-events:auto;


transform:translateY(0);


}



.dropdown a{


display:block;


padding:14px;


border-radius:10px;


color:#bbb;


}



.dropdown a:hover{


background:#1d202b;

color:white;


}

.auth-page{


min-height:100vh;


display:flex;


align-items:center;


justify-content:center;


gap:80px;


padding:120px 40px;


background:


radial-gradient(
circle at top left,
rgba(99,102,241,.3),
transparent 40%
);


}



.auth-info{


max-width:500px;


}



.auth-info h1{


font-size:60px;


}



.auth-info p{


color:#aaa;

font-size:20px;

line-height:1.6;

margin:30px 0;


}



.auth-benefits{


font-size:18px;

line-height:2.5;


color:#ddd;


}



.auth-box{


width:450px;


padding:45px;


background:

rgba(255,255,255,.06);


backdrop-filter:blur(20px);


border-radius:30px;


border:

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


}



.auth-box input{


height:35px;

font-size:16px;

background-color: rgba(255,255,255,.1);
}



@media(max-width:900px){

.auth-page{

flex-direction:column;

}



.auth-info h1{

font-size:40px;

}



.auth-box{

width:100%;

}

}
.auth-box h2{

font-size:35px;
margin-bottom:15px;

}


.auth-description{

color:#aaa;
margin-bottom:30px;

}


.auth-description a{

color:#6366f1;

}



.auth-box label{

display:block;

text-align:left;

margin-top:15px;

margin-bottom:8px;

color:#c3b3b3;

}



.alert.error{

background:#ef4444;

}



.alert.success{

background:#22c55e;

}

/* ===========================
 PREMIUM DASHBOARD
=========================== */


.dashboard-layout{


max-width:1500px;

margin:120px auto;

padding:0 30px;


display:flex;

gap:30px;


}




.dashboard-sidebar{


width:300px;


background:

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


border:

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


border-radius:30px;


padding:35px;


height:max-content;


}




.seller-profile{

text-align:center;

}



.seller-profile img{


width:100px;

height:100px;

border-radius:50%;

}



.seller-profile h3{

margin-top:20px;

font-size:24px;

}



.package{


display:inline-block;

margin-top:10px;


padding:7px 18px;


background:#6366f1;


border-radius:20px;


font-size:12px;


}





.sidebar-menu{


margin-top:40px;


}



.sidebar-menu a{


display:block;


padding:15px;


border-radius:12px;


color:#aaa;


margin-bottom:10px;


}



.sidebar-menu a:hover,
.sidebar-menu .active{


background:#6366f1;

color:white;


}






.dashboard-main{


flex:1;


}




.dashboard-header{


display:flex;

justify-content:space-between;

align-items:center;


margin-bottom:40px;


}



.dashboard-header h1{


font-size:45px;


}



.dashboard-header p{


color:#aaa;


}




.dashboard-stats{


display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;


margin-bottom:35px;


}




.stat-box{


background:

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


border:

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


padding:30px;


border-radius:25px;


display:flex;


gap:20px;


align-items:center;


}



.stat-box span{

font-size:35px;

}



.stat-box h3{


font-size:30px;


}



.stat-box p{


color:#aaa;


}





.dashboard-grid{


display:grid;

grid-template-columns:1fr 1fr;

gap:25px;


}




.panel{


background:

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


border:

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


border-radius:25px;


padding:35px;


margin-bottom:30px;


}




.panel h2{


margin-bottom:25px;


}



.profile-url{


background:#090a0f;


padding:18px;


border-radius:12px;


color:#22d3ee;


margin-bottom:25px;


}




.current-package{


padding:20px;

background:#090a0f;

border-radius:15px;

margin-bottom:20px;

}




.empty-offers{


text-align:center;

padding:60px;


color:#aaa;


}



.empty-offers div{


font-size:60px;


margin-bottom:20px;


}





.activity{


background:#090a0f;


padding:20px;

border-radius:15px;

color:#aaa;


}




@media(max-width:1000px){


.dashboard-layout{

flex-direction:column;

}



.dashboard-sidebar{

width:100%;

}



.dashboard-stats{

grid-template-columns:1fr;

}



.dashboard-grid{

grid-template-columns:1fr;

}


}/* =====================
SELLER PROFILE
===================== */


.seller-page{


max-width:1300px;

margin:120px auto;

padding:0 30px;


}



.seller-banner{


height:300px;


border-radius:30px;


overflow:hidden;


background:

linear-gradient(
135deg,
#6366f1,
#22d3ee
);


}



.seller-banner img{


width:100%;

height:100%;

object-fit:cover;


}





.seller-card{


margin-top:-60px;


position:relative;


background:

rgba(255,255,255,.06);


border:

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


backdrop-filter:blur(20px);


border-radius:30px;


padding:40px;


display:flex;


gap:35px;


align-items:center;


}



.seller-avatar{


width:160px;

height:160px;


border-radius:50%;


border:

5px solid #08090d;


}





.seller-info h1{


font-size:45px;


}



.seller-package{


background:#6366f1;


padding:8px 20px;


border-radius:20px;


font-size:13px;


display:inline-block;


margin:15px 0;


}



.seller-info p{


color:#aaa;


font-size:18px;


max-width:600px;


line-height:1.7;


}







.seller-stats{


display:grid;


grid-template-columns:repeat(3,1fr);


gap:25px;


margin:50px 0;


}




.seller-stats div{


background:

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


border:

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


padding:35px;


border-radius:25px;


text-align:center;


}



.seller-stats h2{


font-size:40px;


color:#6366f1;


}



.seller-stats p{


color:#aaa;


}






.seller-items{


background:

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


border:

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


border-radius:30px;


padding:40px;


}



.no-items{


padding:70px;


text-align:center;


color:#aaa;


}



.no-items:first-letter{

font-size:50px;

}





@media(max-width:800px){


.seller-card{

flex-direction:column;

text-align:center;

}



.seller-stats{

grid-template-columns:1fr;

}



}

.skin-form select{


width:100%;

padding:15px;


background:#11131a;


border:1px solid #222;


border-radius:12px;


color:white;


margin-bottom:15px;


}


.skin-form input[type=file]{


padding:15px;

background:#11131a;


border-radius:12px;


}

.skin-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;


}



.market-card{


background:

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


border:

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


border-radius:25px;


padding:25px;


transition:.3s;


}



.market-card:hover{


transform:translateY(-10px);


border-color:#6366f1;


}



.market-card img{


width:100%;

height:180px;


object-fit:contain;


}



.market-card h3{


margin-top:20px;


}



.market-card p{


color:#aaa;


margin:10px 0;


}



.market-card strong{


color:#22c55e;

font-size:22px;


}



@media(max-width:900px){


.skin-grid{

grid-template-columns:1fr;

}


}

/* =========================
MARKETPLACE
========================= */


.marketplace{


max-width:1400px;

margin:120px auto;

padding:0 30px;


}




.market-header{


text-align:center;

margin-bottom:50px;


}



.market-header h1{


font-size:55px;


}



.market-header p{


color:#aaa;

font-size:20px;


}






.filters{


display:flex;

gap:15px;


background:

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


padding:25px;


border-radius:25px;


border:

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


margin-bottom:50px;


}




.filters input,
.filters select{


flex:1;


padding:15px;


background:#11131a;


border:1px solid #222;


border-radius:12px;


color:white;


}






.market-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.market-item{


background:

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


border:

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


border-radius:25px;


overflow:hidden;


transition:.3s;


}



.market-item:hover{


transform:translateY(-10px);


border-color:#6366f1;


}



.market-item img{


width:100%;

height:200px;


object-fit:contain;


padding:20px;


}



.item-info{


padding:25px;


}



.item-info p{


color:#aaa;

margin:10px 0;


}




.seller{


font-size:14px;

color:#aaa;


}



.seller a{


color:#22d3ee;


}





.item-bottom{


display:flex;


justify-content:space-between;


align-items:center;


margin-top:20px;


}



.item-bottom strong{


font-size:22px;

color:#22c55e;


}




.buy-btn{


background:#6366f1;


padding:10px 20px;


border-radius:12px;


}



.empty-market{


grid-column:1/-1;

text-align:center;

padding:80px;

color:#aaa;


}






@media(max-width:1100px){


.market-grid{


grid-template-columns:

repeat(2,1fr);


}


}




@media(max-width:700px){


.filters{


flex-direction:column;


}



.market-grid{


grid-template-columns:1fr;


}


}

/* EDIT PROFILE */


.profile-edit-page{


max-width:800px;

margin:130px auto;

padding:30px;


}



.edit-box{


background:

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


border:

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


border-radius:30px;


padding:40px;


}



.edit-box h1{


font-size:40px;

margin-bottom:30px;


}



.edit-box textarea{


width:100%;

height:150px;


background:#11131a;


border:1px solid #222;


border-radius:15px;


padding:15px;


color:white;


resize:none;


}



.edit-box input[type=file]{


background:#11131a;

padding:15px;

border-radius:12px;


}



.edit-box label{


display:block;

margin-top:20px;

margin-bottom:8px;

color:#aaa;


}

/* PRICING */


.pricing-page{


max-width:1200px;

margin:120px auto;

padding:30px;


}



.pricing-header{


text-align:center;

margin-bottom:60px;


}



.pricing-header h1{


font-size:55px;


}



.pricing-header p{


color:#aaa;

font-size:20px;


}



.plans{


display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;


}



.plan-card{


background:

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


border:

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


border-radius:30px;


padding:45px;


text-align:center;


}



.seller-plan{


border-color:#6366f1;


transform:scale(1.05);


}



.plan-card h2{


font-size:35px;


}



.price{


font-size:25px;

color:#6366f1;

margin:25px 0;


}



.plan-card ul{


list-style:none;

padding:0;


text-align:left;


line-height:2.5;


color:#ccc;


}



.disabled{


background:#333;

border:none;

padding:15px 30px;

border-radius:15px;

color:#aaa;


}



.discord-btn{


display:block;

margin-top:30px;


}



@media(max-width:800px){


.plans{

grid-template-columns:1fr;

}


.seller-plan{

transform:none;

}


}


/* ADMIN */


.admin-panel{


max-width:1400px;

margin:120px auto;

padding:30px;


}



.admin-panel h1{


font-size:45px;

margin-bottom:40px;


}




.admin-cards{


display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;


}



.admin-cards div{


background:

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


border-radius:25px;


padding:40px;


}




.admin-table{


width:100%;

border-collapse:collapse;


background:

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


border-radius:20px;


overflow:hidden;


}



.admin-table th,
.admin-table td{


padding:20px;

border-bottom:

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


text-align:left;


}



.admin-btn{


background:#6366f1;

padding:10px 15px;

border-radius:10px;


}



.admin-btn.danger{


background:#ef4444;


}