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

body{
background:#05050b;
font-family:Arial,sans-serif;
color:#fff;
padding:25px;
overflow-x:hidden;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 30px;
border-radius:30px;
background:rgba(255,255,255,.03);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
}

.logo-area{
display:flex;
align-items:center;
gap:20px;
}

.logo{
width:70px;
height:70px;
}

.menu{
display:flex;
gap:30px;
}

.menu a{
color:#fff;
text-decoration:none;
font-weight:bold;
}

.live-btn{
padding:16px 28px;
border:none;
border-radius:18px;
background:linear-gradient(90deg,#8b5cf6,#ff7a00);
color:#fff;
font-weight:bold;
}

.hero{
margin-top:30px;
min-height:820px;
padding:80px;
border-radius:40px;
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:1.2fr 1fr .8fr;
gap:40px;
align-items:center;
background:
radial-gradient(circle at top right,#ff7a0015,transparent 35%),
radial-gradient(circle at left,#8b5cf615,transparent 30%),
linear-gradient(135deg,#05050b,#0f172a);
}

.overlay{
position:absolute;
inset:0;
background:
linear-gradient(to right,#000000dd,#00000055),
url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?q=80&w=1600&auto=format&fit=crop');
background-size:cover;
background-position:center;
opacity:.4;
}

.hero-left,
.hero-center,
.hero-right{
position:relative;
z-index:2;
}

.badge{
display:inline-block;
padding:12px 24px;
border-radius:100px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.hero-left h1{
font-size:90px;
line-height:.9;
margin:30px 0;
}

.hero-left h1 span{
background:linear-gradient(90deg,#8b5cf6,#ff7a00);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-left p{
font-size:26px;
line-height:1.5;
max-width:600px;
}

.buttons{
display:flex;
gap:20px;
margin-top:40px;
}

.primary,
.secondary{
padding:20px 38px;
border:none;
border-radius:18px;
color:#fff;
font-weight:bold;
}

.primary{
background:linear-gradient(90deg,#8b5cf6,#ff7a00);
}

.secondary{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.host-ring{
width:420px;
height:420px;
padding:8px;
border-radius:50%;
background:linear-gradient(135deg,#8b5cf6,#ff7a00);
box-shadow:
0 0 80px rgba(139,92,246,.4),
0 0 120px rgba(255,122,0,.2);
animation:pulse 4s infinite ease-in-out;
}

.host-ring img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
border:8px solid #05050b;
}

@keyframes pulse{
50%{
transform:scale(1.03);
}
}

.host-info{
margin-top:25px;
}

.host-info h2{
font-size:52px;
margin:10px 0;
}

.radio-card{
padding:35px;
border-radius:34px;
background:rgba(255,255,255,.04);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
}

.radio-card img{
width:130px;
height:130px;
margin:25px 0;
}

.status{
display:inline-block;
padding:10px 20px;
border-radius:100px;
background:#00aa44;
}

.player-floating{
margin-top:-90px;
position:relative;
z-index:5;
display:flex;
align-items:center;
justify-content:center;
gap:30px;
padding:35px;
border-radius:40px;
background:rgba(10,10,15,.92);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
}

.play-main{
width:150px;
height:150px;
border-radius:50%;
border:none;
font-size:54px;
color:#fff;
background:linear-gradient(145deg,#8b5cf6,#ff7a00);
box-shadow:
0 0 60px rgba(255,122,0,.4),
0 0 100px rgba(139,92,246,.25);
}

.side-btn{
width:80px;
height:80px;
border:none;
border-radius:50%;
background:#111827;
color:#fff;
font-size:30px;
}

.equalizer{
display:flex;
align-items:flex-end;
gap:8px;
height:60px;
}

.equalizer span{
width:8px;
background:linear-gradient(to top,#8b5cf6,#ff7a00);
border-radius:10px;
animation:bars 1s infinite ease-in-out;
}

.equalizer span:nth-child(2){animation-delay:.2s}
.equalizer span:nth-child(3){animation-delay:.4s}
.equalizer span:nth-child(4){animation-delay:.6s}
.equalizer span:nth-child(5){animation-delay:.8s}

@keyframes bars{
0%,100%{height:12px}
50%{height:60px}
}

@media(max-width:1200px){

.hero{
grid-template-columns:1fr;
padding:40px;
}

.hero-left h1{
font-size:64px;
}

.host-ring{
width:300px;
height:300px;
}

.menu{
display:none;
}

}