:root { --red:#ff1f32; --blue:#0877ff; --navy:#06101f; --card:#0d1a2e; --muted:#8ea0b8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#050b15; color:#fff; font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.site-header { position:sticky; top:0; z-index:20; height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 max(5vw,24px); border-bottom:1px solid rgba(255,255,255,.09); background:rgba(5,11,21,.9); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:54px; height:54px; object-fit:contain; border-radius:12px; box-shadow:0 0 24px rgba(8,119,255,.22); }
.brand span { display:flex; flex-direction:column; line-height:1; }
.brand strong { font-size:23px; letter-spacing:.07em; }
.brand small { color:#9aa9bc; font-size:9px; letter-spacing:.34em; margin-top:5px; }
.nav { display:flex; align-items:center; gap:34px; font-size:13px; font-weight:800; letter-spacing:.09em; }
.nav>a { position:relative; padding:32px 0; }
.nav>a:after { content:""; position:absolute; height:2px; left:0; right:100%; bottom:20px; background:var(--red); transition:.25s; }
.nav>a:hover:after { right:0; }
.socials { display:flex; gap:9px; padding-left:12px; }
.socials a { width:37px; height:37px; display:grid; place-items:center; border:1px solid #27344a; border-radius:11px; color:#fff; transition:.25s; background:#111d30; }
.socials svg { width:19px; height:19px; fill:currentColor; }
.socials a:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.socials .facebook:hover { background:#1877f2; border-color:#1877f2; }
.socials .youtube:hover { background:#ff0033; border-color:#ff0033; }
.socials .instagram:hover { border-color:#df477b; background:linear-gradient(135deg,#7c3aed,#df477b,#ff9f1c); }
.menu-button { display:none; background:none; border:0; padding:8px; }
.menu-button span { display:block; width:25px; height:2px; margin:5px; background:#fff; }
.hero { min-height:620px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; padding:88px max(7vw,28px); background:radial-gradient(circle at 77% 48%,#132a4b 0,transparent 27%),linear-gradient(125deg,#061020,#060b14 70%); }
.hero:before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to right,#000,transparent 85%); }
.hero-glow { position:absolute; width:340px; height:340px; border-radius:50%; right:15%; background:#0877ff; filter:blur(130px); opacity:.13; }
.hero-copy { position:relative; z-index:2; max-width:720px; }
.eyebrow,.kicker { color:#8aa1bc; font-weight:800; font-size:12px; letter-spacing:.17em; }
.eyebrow i,.live-pill i,.on-air i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); margin-right:9px; animation:pulse 1.4s infinite; }
.hero h1 { margin:22px 0 20px; font-size:clamp(54px,7.1vw,102px); line-height:.91; letter-spacing:-.065em; text-transform:uppercase; }
.hero h1 em { color:transparent; font-style:normal; -webkit-text-stroke:2px var(--red); filter:drop-shadow(0 0 16px rgba(255,31,50,.22)); }
.hero-copy>p { margin:0; max-width:510px; color:#aab8c9; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; gap:14px; margin-top:34px; }
.hero-actions a { padding:16px 24px; border-radius:8px; font-weight:800; font-size:13px; letter-spacing:.04em; transition:.2s; }
.primary { background:var(--red); box-shadow:0 8px 30px rgba(255,31,50,.25); }
.primary span { margin-left:22px; }
.secondary { border:1px solid #334158; }
.hero-actions a:hover { transform:translateY(-2px); }
.hero-mark { position:relative; z-index:1; width:min(31vw,390px); aspect-ratio:1; border:1px solid rgba(255,255,255,.08); border-radius:50%; display:grid; place-content:center; justify-items:center; text-align:center; box-shadow:0 0 0 38px rgba(255,255,255,.018),0 0 0 76px rgba(255,255,255,.012); transition:transform .5s ease,box-shadow .5s ease; }
.hero-mark:before { content:""; position:absolute; inset:13%; border-radius:50%; border:2px solid rgba(8,119,255,.28); box-shadow:0 0 50px rgba(8,119,255,.18); }
.hero-mark img { position:relative; z-index:1; width:62%; aspect-ratio:1; object-fit:contain; border-radius:25%; filter:drop-shadow(0 18px 34px rgba(0,0,0,.35)) drop-shadow(-8px 0 26px rgba(8,119,255,.25)) drop-shadow(8px 0 26px rgba(255,31,50,.2)); transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease; }
.hero-mark:hover { transform:translateY(-10px) rotate(3deg) scale(1.035); box-shadow:0 0 0 42px rgba(8,119,255,.035),0 0 0 82px rgba(255,31,50,.02),0 28px 70px rgba(0,0,0,.35); }
.hero-mark:hover img { transform:rotate(-6deg) scale(1.09); filter:drop-shadow(0 24px 40px rgba(0,0,0,.42)) drop-shadow(-10px 0 30px rgba(8,119,255,.36)) drop-shadow(10px 0 30px rgba(255,31,50,.3)); }
.section { padding:100px max(7vw,28px); }
.tv-section { background:linear-gradient(rgba(4,10,19,.86),rgba(4,10,19,.91)),url('assets/tv-background.jpg') center/cover no-repeat; }
.section-heading { max-width:1180px; margin:0 auto 32px; display:flex; align-items:end; justify-content:space-between; }
.section-heading h2 { margin:8px 0 0; font-size:clamp(32px,4vw,56px); letter-spacing:-.04em; }
.live-pill,.on-air { padding:9px 13px; border:1px solid rgba(255,31,50,.32); border-radius:999px; background:rgba(255,31,50,.09); color:#ff7985; font-size:10px; font-weight:900; letter-spacing:.12em; }
.tv-shell { max-width:1180px; margin:auto; padding:7px; border-radius:17px; background:linear-gradient(115deg,var(--blue),#202b40 35%,#202b40 65%,var(--red)); box-shadow:0 0 55px rgba(8,119,255,.12),0 0 55px rgba(255,31,50,.08); }
.tv-frame { position:relative; width:100%; padding-top:56.25%; overflow:hidden; border-radius:11px; background:#000; }
.tv-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.radio-section { position:relative; overflow:hidden; background:linear-gradient(rgba(4,10,19,.84),rgba(4,10,19,.91)),url('assets/radio-background.jpg') center/cover no-repeat; }
.radio-heading { justify-content:center; text-align:center; }
.radio-player { max-width:980px; min-height:390px; margin:auto; display:grid; grid-template-columns:390px 1fr; align-items:center; overflow:hidden; border:1px solid #26354b; border-radius:24px; background:linear-gradient(125deg,#101e33,#091321); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.radio-player.playing { border-color:rgba(8,119,255,.55); box-shadow:0 0 55px rgba(8,119,255,.12),0 30px 80px rgba(0,0,0,.4); }
.radio-art { position:relative; min-height:390px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,rgba(8,119,255,.14),rgba(255,31,50,.08)); }
.radio-art img { position:relative; z-index:2; width:184px; height:184px; padding:13px; object-fit:contain; border:5px solid rgba(255,255,255,.82); border-radius:50%; background:#fff; box-shadow:0 20px 55px rgba(0,0,0,.45),0 0 0 9px rgba(255,255,255,.09),-8px 0 35px rgba(8,119,255,.22),8px 0 35px rgba(255,31,50,.18); }
.rings,.rings span { position:absolute; inset:50%; border:1px solid rgba(111,153,213,.14); border-radius:50%; transform:translate(-50%,-50%); }
.rings span:nth-child(1){width:240px;height:240px}.rings span:nth-child(2){width:330px;height:330px}.rings span:nth-child(3){width:420px;height:420px}
.on-air { position:absolute; z-index:3; bottom:25px; }
.radio-info { padding:48px; }
.station-label { color:#4b9bff; font-size:11px; font-weight:900; letter-spacing:.18em; }
.radio-info h3 { margin:10px 0 8px; font-size:clamp(27px,3vw,42px); letter-spacing:-.04em; }
.radio-info>p { margin:0; color:var(--muted); font-size:14px; }
.wave { height:62px; margin:27px 0 24px; display:flex; align-items:center; gap:4px; overflow:hidden; }
.wave i { flex:1; min-width:2px; height:calc(10px + (var(--n) % 7) * 5px); border-radius:4px; background:linear-gradient(to top,var(--blue),#64aaff); opacity:.42; }
.playing .wave i { animation:wave .7s ease-in-out infinite alternate; animation-delay:calc(var(--n) * -35ms); opacity:.9; }
.controls { display:flex; align-items:center; gap:23px; }
.play { flex:0 0 auto; width:62px; height:62px; display:grid; place-items:center; color:#fff; border:0; border-radius:50%; cursor:pointer; background:linear-gradient(145deg,#1683ff,#0458bd); box-shadow:0 0 0 7px rgba(8,119,255,.1),0 9px 28px rgba(8,119,255,.28); }
.play svg { width:27px; height:27px; fill:currentColor; }
.spinner { width:22px; height:22px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
.volume { flex:1; display:flex; align-items:center; gap:11px; }
.volume svg { width:21px; fill:#95a7bc; }
.volume input { width:100%; accent-color:var(--blue); }
.quality { white-space:nowrap; color:#687b94; font-size:9px; font-weight:900; letter-spacing:.13em; }
footer { min-height:150px; padding:38px max(7vw,28px); display:flex; align-items:center; justify-content:space-between; gap:25px; border-top:1px solid #172235; color:#718198; font-size:12px; }
.footer-brand { display:flex; align-items:center; gap:10px; color:#cbd5e1; }
.footer-brand img { width:46px; height:46px; object-fit:contain; border-radius:10px; }
.footer-brand strong { color:#fff; }
.footer-socials { padding-left:0; gap:12px; }
.footer-socials a { width:42px; height:42px; border-radius:13px; }
.footer-socials svg { width:21px; height:21px; }
@keyframes pulse { 50% { opacity:.35; box-shadow:0 0 3px var(--red); } }
@keyframes wave { to { height:12px; } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:850px) {
  .site-header { height:72px; }
  .menu-button { display:block; }
  .nav { position:absolute; top:72px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:18px 25px 26px; background:#081220; border-bottom:1px solid #26344a; }
  .nav.open { display:flex; }
  .nav>a { padding:16px 0; }
  .socials { padding:16px 0 0; }
  .hero { min-height:650px; padding-top:80px; }
  .hero-mark { position:absolute; width:330px; right:-115px; opacity:.33; }
  .hero-copy { max-width:620px; }
  .radio-player { grid-template-columns:1fr; max-width:600px; }
  .radio-art { min-height:300px; }
  .radio-info { padding:36px; }
}
@media (max-width:560px) {
  .brand span { display:none; }
  .hero { min-height:590px; }
  .hero h1 { font-size:52px; }
  .hero-actions { flex-direction:column; align-items:stretch; text-align:center; }
  .hero-mark { display:none; }
  .section { padding:72px 18px; }
  .section-heading { align-items:center; }
  .radio-art { min-height:255px; }
  .radio-art img { width:154px; height:154px; padding:10px; }
  .radio-info { padding:30px 23px; }
  .controls { gap:15px; }
  .quality { display:none; }
  footer { flex-direction:column; text-align:center; }
}