:root{

--bg:#090b22;
--card:#131935;
--card2:#1b2348;

--purple:#7f5af0;
--pink:#f0aaff;
--mint:#64ffda;

--text:#f5f7ff;
--muted:#9ea8d4;

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

}

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

body{

font-family:"Segoe UI",sans-serif;

background:

radial-gradient(circle at top left,#24184f 0%,transparent 35%),

radial-gradient(circle at top right,#143753 0%,transparent 35%),

var(--bg);

color:var(--text);

}

.marketplace-hero{

max-width:1400px;

margin:auto;

padding:90px 40px 60px;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

border-radius:40px;

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

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

color:var(--mint);

margin-bottom:22px;

}

.marketplace-hero h1{

font-size:4rem;

line-height:1.05;

font-weight:800;

max-width:760px;

}

.marketplace-hero h1 span{

background:

linear-gradient(
90deg,
var(--purple),
var(--pink),
var(--mint));

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.marketplace-hero p{

margin-top:25px;

max-width:760px;

line-height:1.8;

font-size:1.05rem;

color:var(--muted);

}

.marketplace-stats{

max-width:1400px;

margin:auto;

padding:0 40px;

display:grid;

grid-template-columns:

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

gap:22px;

}

.stat-card{

background:var(--card);

padding:30px;

border-radius:24px;

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

transition:.35s;

text-align:center;

}

.stat-card:hover{

transform:translateY(-8px);

box-shadow:

0 18px 40px rgba(127,90,240,.35);

}

.stat-card h2{

font-size:2.2rem;

margin-bottom:10px;

color:var(--mint);

}

.marketplace-toolbar{

max-width:1400px;

margin:50px auto;

padding:0 40px;

display:flex;

justify-content:space-between;

gap:20px;

flex-wrap:wrap;

}

.marketplace-toolbar input,

.marketplace-toolbar select{

padding:14px 18px;

background:var(--card);

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

border-radius:14px;

color:white;

min-width:260px;

}

.market-grid{

max-width:1400px;

margin:auto;

padding:0 40px;

display:grid;

grid-template-columns:

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

gap:28px;

}

.market-card{

background:var(--card);

border-radius:24px;

overflow:hidden;

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

transition:.35s;

}

.market-card:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(127,90,240,.30);

}

.market-card img{

width:100%;

height:220px;

object-fit:cover;

}

.market-card h3{

padding:25px 25px 10px;

font-size:1.35rem;

}

.market-card p{

padding:0 25px;

color:var(--muted);

}

.market-card h4{

padding:15px 25px;

font-size:1.5rem;

color:var(--mint);

}

.market-card button{

margin:0 25px 25px;

width:calc(100% - 50px);

padding:15px;

border:none;

border-radius:40px;

cursor:pointer;

font-weight:700;

background:

linear-gradient(

90deg,

var(--purple),

var(--pink),

var(--mint));

transition:.3s;

}

.market-card button:hover{

transform:scale(1.03);

box-shadow:

0 0 30px rgba(240,170,255,.45);

}

.market-sections{

max-width:1400px;

margin:80px auto;

padding:0 40px;

display:grid;

grid-template-columns:

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

gap:30px;

}

.market-box{

background:var(--card);

border-radius:24px;

padding:30px;

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

}

.market-box h2{

margin-bottom:20px;

font-size:1.7rem;

}

.market-box ul{

padding-left:20px;

line-height:2;

color:var(--muted);

}

.market-box button{

margin-top:25px;

padding:15px 28px;

border:none;

border-radius:40px;

cursor:pointer;

font-weight:700;

background:

linear-gradient(

90deg,

var(--purple),

var(--mint));

}

footer{

padding:60px;

text-align:center;

font-weight:600;

color:var(--mint);

}

@media(max-width:900px){

.marketplace-hero h1{

font-size:3rem;

}

}

@media(max-width:768px){

.marketplace-toolbar{

flex-direction:column;

}

.marketplace-toolbar input,

.marketplace-toolbar select{

width:100%;

}

.marketplace-hero,

.market-grid,

.market-sections,

.marketplace-stats{

padding-left:24px;
padding-right:24px;

}

}