body{
margin:0;
font-family:'Poppins',sans-serif;
background:#000;
color:white;
}

/* TOP BAR */
.topbar{
background:linear-gradient(90deg,#ff00cc,#00c3ff);
text-align:center;
padding:10px;
font-size:14px;
}

/* NAVBAR FIX */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 15px;
background:rgba(0,0,0,0.8);
backdrop-filter:blur(10px);
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-size:20px;
font-weight:600;
white-space:nowrap;
background:linear-gradient(45deg,#00c3ff,#ff00cc);
-webkit-background-clip:text;
color:transparent;
}

.navbar nav{
display:none;
}

.nav-actions{
display:flex;
gap:15px;
font-size:22px;
cursor:pointer;
}

/* HERO */
.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background:url('https://images.unsplash.com/photo-1605902711622-cfb43c4437b5?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat;
position:relative;
}

.hero::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
}

.hero h1,.hero p,.hero button{
position:relative;
z-index:2;
}

/* PRODUCTS */
.product-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
padding:20px;
}

.product{
background:#111;
padding:10px;
border-radius:12px;
}

.product img{
width:100%;
border-radius:8px;
}

.price{
color:#00c3ff;
}

/* SEARCH */
.search-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.search-box{
width:90%;
max-width:400px;
}

.result-item{
background:#111;
padding:10px;
margin-top:5px;
color:white;
cursor:pointer;
}

/* MENU */
.side-menu{
position:fixed;
left:-260px;
top:0;
width:250px;
height:100%;
background:#111;
padding:20px;
transition:0.3s;
z-index:10000;
}

.side-menu.active{
left:0;
}

.overlay{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
z-index:9998;
}

.overlay.active{
display:block;
}

/* DESKTOP */
@media(min-width:768px){

.navbar nav{
display:flex;
gap:20px;
}

.navbar nav a{
color:white;
text-decoration:none;
}

.product-grid{
grid-template-columns:repeat(4,1fr);
}

}