*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Outfit',sans-serif;
}

body{
background:#060f09;
color:white;
overflow-x:hidden;
min-height:100vh;
}

/* HERO */

.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:60px;
min-height:100vh;
perspective:1200px;
}

/* LEFT */

.left{
max-width:520px;
}

.h1-title{
font-size:48px;
font-weight:800;
margin-bottom:25px;
}

/* BUTTONS */

.buttons{
display:flex;
gap:15px;
}

.btn-buy,
.btn-cart{
background:#e8000a;
border:none;
padding:14px 32px;
border-radius:10px;
color:white;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.btn-buy:hover,
.btn-cart:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(255,0,0,0.4);
}

/* RIGHT */

.right{
flex:1;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}

/* HEADSET */

.headset-img{
width:520px;
max-width:100%;
position:relative;
z-index:2;
transition:transform .2s ease;
}

/* SPOTLIGHT */

.spotlight{
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle,
rgba(255,255,255,0.35),
transparent 70%);
filter:blur(70px);
pointer-events:none;
z-index:0;
}

/* PRODUCT GLOW */

.product-glow{
position:absolute;
width:420px;
height:420px;
background:radial-gradient(circle,
rgba(120,200,255,0.2),
transparent 70%);
filter:blur(50px);
}

/* SOUNDWAVES */

.soundwaves{
position:absolute;
width:420px;
height:420px;
display:flex;
align-items:center;
justify-content:center;
}

.soundwaves span{
position:absolute;
border:2px solid rgba(120,200,255,0.4);
border-radius:50%;
width:100%;
height:100%;
animation:soundwave 3s linear infinite;
}

.soundwaves span:nth-child(2){
animation-delay:1s;
}

.soundwaves span:nth-child(3){
animation-delay:2s;
}

@keyframes soundwave{

0%{
transform:scale(.6);
opacity:.6;
}

100%{
transform:scale(1.4);
opacity:0;
}

}

/* SOCIAL */

.social{
position:fixed;
bottom:30px;
right:40px;
}

.social-icons{
display:flex;
gap:16px;
background:rgba(255,255,255,0.05);
padding:10px 18px;
border-radius:50px;
}

.social-item img{
width:26px;
}

/* RESPONSIVE */

@media(max-width:768px){

.hero{
flex-direction:column;
text-align:center;
padding:30px;
}

.headset-img{
width:280px;
}

.h1-title{
font-size:32px;
}

}