*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#050506;color:#fff;font-family:Arial,sans-serif}
a{text-decoration:none;color:inherit}

body:before{
content:"";
position:fixed;
width:600px;height:600px;
top:-300px;left:20%;
background:#d6a60022;
filter:blur(100px);
z-index:-1
}

header{
height:80px;
display:flex;
align-items:center;
gap:35px;
padding:0 5%;
position:sticky;
top:0;
z-index:50;
background:#070708ee;
backdrop-filter:blur(20px);
border-bottom:1px solid #ffffff12
}

.logo{display:flex;align-items:center;gap:12px;font-weight:900}

.logo>span{
width:44px;height:44px;
display:grid;place-items:center;
border-radius:12px;
background:linear-gradient(135deg,#ffe682,#b77900);
color:#080808
}

.logo div{font-size:14px}
.logo small{display:block;color:#e8b92c;font-size:8px;letter-spacing:2px;margin-top:4px}

nav{display:flex;gap:24px;margin:auto}
nav a{color:#aaa;font-size:13px}
nav a:hover{color:#ffd75b}

.account{display:flex;gap:8px}
.account a{
padding:11px 16px;
border:1px solid #ffffff18;
border-radius:10px;
font-size:12px;font-weight:bold
}
.account .gold{background:#f4c53d;color:#080808}

.hero{
min-height:680px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:70px 20px
}

.badge{
border:1px solid #e8b92c55;
border-radius:50px;
padding:9px 15px;
color:#f5d471;
font-size:10px;
letter-spacing:2px
}

.hero h1{
font-size:clamp(60px,9vw,125px);
line-height:.85;
letter-spacing:-6px;
margin:30px 0
}

.hero h1 span{
display:block;
color:#efbd2c;
text-shadow:0 0 50px #e9b72544
}

.hero p{
max-width:700px;
color:#999;
font-size:18px;
line-height:1.7
}

.search{
width:min(900px,100%);
display:grid;
grid-template-columns:160px 1fr 130px;
padding:7px;
margin-top:30px;
border:1px solid #d9a92755;
border-radius:17px;
background:#111114
}

.search select,.search input{
border:0;outline:0;
background:transparent;
color:white;
padding:18px
}

.search select{border-right:1px solid #ffffff15}
.search option{background:#111}

.search button{
border:0;border-radius:11px;
background:#efbd2c;
font-weight:900;
cursor:pointer
}

.heroButtons{display:flex;gap:10px;margin-top:25px}

.heroButtons a{
padding:16px 25px;
border-radius:12px;
font-weight:900
}

.primary{background:#efbd2c;color:#080808}
.secondary{border:1px solid #ffffff20;background:#ffffff08}

.section{
max-width:1300px;
margin:auto;
padding:90px 25px
}

.title small,.sell small{color:#e8b92c;letter-spacing:2px;font-weight:bold}
.title h2{font-size:42px;margin:10px 0 30px}

.categories{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px
}

.categories a{
min-height:190px;
padding:22px;
border:1px solid #ffffff12;
border-radius:18px;
background:#ffffff05;
transition:.3s
}

.categories a:hover{
transform:translateY(-7px);
border-color:#dbae3055
}

.categories b{font-size:30px}
.categories h3{margin-top:45px}
.categories p{color:#777;font-size:12px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}

.filters button{
border:1px solid #ffffff15;
background:#101012;color:#aaa;
padding:10px 18px;
border-radius:30px;
cursor:pointer
}

.filters button.active{
background:#efbd2c;
color:#080808
}

.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px
}

.asset{
border:1px solid #ffffff12;
border-radius:18px;
overflow:hidden;
background:#101012
}

.asset.hidden{display:none}

.preview{
height:260px;
display:grid;
place-items:center;
font-size:55px;
font-weight:900
}

.p1{background:linear-gradient(135deg,#493400,#070707)}
.p2{background:linear-gradient(135deg,#29105d,#050505)}
.p3{background:linear-gradient(135deg,#502100,#090909)}
.p4{background:linear-gradient(135deg,#003d48,#080808)}
.p5{background:linear-gradient(135deg,#573e00,#251057)}
.p6{background:linear-gradient(135deg,#004b39,#07120f)}

.asset h3{padding:0 17px;margin-bottom:5px}
.asset>span{display:block;padding:0 17px 18px;color:#777;font-size:12px}

.sell{
max-width:1250px;
margin:70px auto;
padding:60px;
border:1px solid #d6a82955;
border-radius:25px;
background:linear-gradient(135deg,#15120a,#09090a);
display:flex;
align-items:center;
justify-content:space-between;
gap:40px
}

.sell h2{font-size:45px;max-width:700px;margin:15px 0}
.sell p{color:#888}
.sell>a{
padding:18px 25px;
border-radius:12px;
background:#efbd2c;
color:#080808;
font-weight:900;
white-space:nowrap
}

footer{
max-width:1300px;
margin:auto;
padding:50px 25px;
border-top:1px solid #ffffff12;
display:flex;
justify-content:space-between;
color:#777
}

footer strong{color:#ddd}
footer div:last-child{display:flex;gap:20px}

@media(max-width:900px){
nav{display:none}
.categories{grid-template-columns:repeat(2,1fr)}
.gallery{grid-template-columns:repeat(2,1fr)}
.sell{margin:30px 20px;flex-direction:column;align-items:flex-start}
}

@media(max-width:600px){
header{padding:0 14px}
.logo div{display:none}
.account{margin-left:auto}
.account a{padding:10px}
.hero h1{font-size:60px;letter-spacing:-3px}
.search{grid-template-columns:1fr}
.search select{border-right:0;border-bottom:1px solid #ffffff15}
.search button{padding:17px}
.categories,.gallery{grid-template-columns:1fr}
.sell{padding:30px}
.sell h2{font-size:32px}
footer{flex-direction:column;gap:25px}
footer div:last-child{flex-wrap:wrap}
}