*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:

linear-gradient(
180deg,
#070711,
#0c0c18
);

font-family:

Arial,sans-serif;

color:white;

overflow-x:hidden;

}



body::before{

content:"";

position:fixed;

width:800px;

height:800px;

background:

radial-gradient(
circle,
rgba(
0,
132,
255,
.18
),
transparent
);

right:-250px;

top:-250px;

filter:

blur(
120px
);

z-index:-1;

}



/* NAVBAR */

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:30px 8%;

position:sticky;

top:0;

z-index:999;

background:

rgba(
7,
7,
17,
.75
);

backdrop-filter:

blur(
20px
);

}

nav h2{

font-size:34px;

font-weight:700;

}

ul{

display:flex;

gap:45px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

opacity:.85;

font-weight:600;

transition:.3s;

}

nav a:hover{

opacity:1;

color:#8B5CFF;

}

.cart-btn{

background:#6f5cff;

}



/* BUTTONS */

button{

padding:14px 30px;

border:none;

border-radius:12px;

background:#6f5cff;

color:white;

cursor:pointer;

transition:.3s;

font-weight:600;

}

button:hover{

transform:

translateY(-4px);

box-shadow:

0 0 30px rgba(
111,
92,
255,
.4
);

}

.secondary{

background:transparent;

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

}



/* HERO */

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:120px 8%;

min-height:90vh;

gap:80px;

}

.hero-left{

max-width:700px;

}

.hero h1{

font-size:90px;

line-height:1;

}

.hero p{

font-size:26px;

opacity:.8;

margin:

35px 0;

line-height:1.5;

}

.hero-right img{

width:600px;

border-radius:25px;

box-shadow:

0 0 80px rgba(
111,
92,
255,
.2
);

}

.buttons{

display:flex;

gap:20px;

}



/* SECTIONS */

.featured,
.categories,
.newsletter{

padding:140px 8%;

text-align:center;

}

.featured h2,
.categories h2,
.newsletter h2{

font-size:50px;

margin-bottom:20px;

}



/* PRODUCTS */

.product-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:70px;

}

.product{

padding:35px;

border-radius:25px;

background:

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

transition:.3s;

}

.product:hover{

transform:

translateY(-10px);

box-shadow:

0 0 50px rgba(
111,
92,
255,
.2
);

}

.card-image{

height:280px;

border-radius:20px;

overflow:hidden;

margin-bottom:25px;

background:

linear-gradient(
145deg,
#1a1a30,
#101018
);

}

.card-image img{

width:100%;

height:100%;

object-fit:cover;

}

.product-buttons{

display:flex;

gap:10px;

margin-top:20px;

justify-content:center;

}



/* CATEGORIES */

.category-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

margin-top:60px;

}

.category-grid div{

padding:45px;

border-radius:20px;

background:

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

transition:.3s;

}

.category-grid div:hover{

transform:

translateY(-8px);

}



/* NEWSLETTER */

.newsletter-box{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

.newsletter input{

padding:20px;

width:350px;

border:none;

border-radius:12px;

background:

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

color:white;

}



/* FOOTER */

footer{

padding:120px;

text-align:center;

display:flex;

flex-direction:column;

gap:20px;

opacity:.8;

}



/* MOBILE */

@media(max-width:1000px){

.hero{

flex-direction:column;

text-align:center;

}

.hero h1{

font-size:65px;

}

.hero-right img{

width:100%;

}

.product-grid{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

ul{

display:none;

}

}

.cart-sidebar{

position:fixed;

top:0;

right:-450px;

width:420px;

height:100vh;

background:#101018;

padding:40px;

transition:.4s;

z-index:99999;

box-shadow:

0 0 80px rgba(
0,
0,
0,
.5
);

display:flex;

flex-direction:column;

justify-content:space-between;

}

.cart-sidebar.open{

right:0;

}

.cart-btn{

cursor:pointer;

}

#cartItems{

margin-top:40px;

display:flex;

flex-direction:column;

gap:20px;

}

.product-modal{

position:fixed;

inset:0;

background:

rgba(
0,
0,
0,
.75
);

display:none;

justify-content:center;

align-items:center;

z-index:999999;

}

.product-modal.open{

display:flex;

}

.modal-content{

width:500px;

padding:40px;

border-radius:25px;

background:#111118;

text-align:center;

position:relative;

}

.modal-content img{

width:250px;

height:320px;

object-fit:cover;

border-radius:20px;

margin-bottom:30px;

}

.close-modal{

position:absolute;

top:20px;

right:25px;

cursor:pointer;

font-size:30px;

}

.trust,
.reviews{

padding:140px 8%;

text-align:center;

}

.trust-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

margin-top:60px;

}

.trust-card{

padding:45px;

border-radius:20px;

background:

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

font-size:28px;

transition:.3s;

}

.trust-card:hover{

transform:

translateY(-8px);

}

.review-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.review{

padding:40px;

border-radius:20px;

background:

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

}

.review p{

margin:

25px 0;

opacity:.8;

}


@media(max-width:1000px){

.trust-grid{

grid-template-columns:1fr;

}

.review-grid{

grid-template-columns:1fr;

}

}

.checkout{

padding:

140px 8%;

min-height:100vh;

}

.checkout-grid{

display:grid;

grid-template-columns:

2fr 1fr;

gap:50px;

margin-top:60px;

}

.checkout-form{

display:flex;

flex-direction:column;

gap:20px;

}

.checkout-form input{

padding:20px;

border:none;

border-radius:12px;

background:

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

color:white;

}

.order-summary{

padding:40px;

border-radius:20px;

background:

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

}

.cart-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

border-bottom:

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

}

.remove-item{

padding:8px 14px;

background:

#ff4444;

border:none;

border-radius:10px;

cursor:pointer;

}