:root{--neon-pink:#ff0090;--neon-yellow:#ffd700;--neon-cyan:#00eeff;--neon-orange:#ff6a00;--dark:#0a0010}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{background:var(--dark);color:#fff;font-family:'Space Mono',monospace;overflow-x:hidden}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.13) 2px,rgba(0,0,0,.13) 4px);pointer-events:none;z-index:9999}
.grid-floor{position:fixed;bottom:0;left:0;width:100%;height:45vh;background:linear-gradient(rgba(255,0,144,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,144,.18) 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(45deg);transform-origin:bottom;pointer-events:none;z-index:0;animation:gridMove 8s linear infinite}
@keyframes gridMove{from{background-position:0 0}to{background-position:0 60px}}
.hero{min-height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:2rem}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,0,144,.28) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(0,238,255,.18) 0%,transparent 50%),radial-gradient(ellipse at 20% 70%,rgba(255,106,0,.22) 0%,transparent 50%),var(--dark);z-index:0}
.sunburst{position:absolute;bottom:-10%;left:50%;transform:translateX(-50%);width:120vw;height:70vh;background:conic-gradient(from 180deg at 50% 100%,rgba(255,106,0,.4) 0deg,transparent 15deg,rgba(255,0,144,.3) 30deg,transparent 45deg,rgba(255,200,0,.3) 60deg,transparent 75deg,rgba(255,106,0,.3) 90deg,transparent 105deg,rgba(255,0,144,.2) 120deg,transparent 135deg,rgba(255,106,0,.3) 150deg,transparent 165deg,rgba(255,200,0,.2) 180deg);pointer-events:none;z-index:0;animation:sunRotate 20s linear infinite}
@keyframes sunRotate{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
.hero-content{position:relative;z-index:2;text-align:center;max-width:900px}
.logo-banner{display:inline-block;margin-bottom:1.5rem}
.online-radio{font-size:.85rem;letter-spacing:.5em;color:var(--neon-cyan);text-transform:uppercase;display:block;margin-bottom:.3rem;text-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan);animation:flicker 4s infinite}
@keyframes flicker{0%,90%,92%,94%,100%{opacity:1}91%{opacity:.2}93%{opacity:.8}95%{opacity:.1}96%{opacity:1}98%{opacity:.4}}
.dj-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(5rem,18vw,14rem);line-height:.85;display:block;background:linear-gradient(135deg,var(--neon-pink) 0%,var(--neon-yellow) 50%,var(--neon-orange) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:nameGlow 3s ease-in-out infinite alternate}
@keyframes nameGlow{from{filter:drop-shadow(0 0 15px rgba(255,0,144,.7)) drop-shadow(0 0 30px rgba(255,0,144,.4))}to{filter:drop-shadow(0 0 40px rgba(255,200,0,.9)) drop-shadow(0 0 80px rgba(255,0,144,.5)) drop-shadow(0 0 120px rgba(255,106,0,.3))}}
.mix-text{font-family:'Righteous',cursive;font-size:clamp(2rem,6vw,5rem);color:var(--neon-cyan);text-shadow:0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan);letter-spacing:.3em;display:block;margin-top:-.5rem;animation:cyanPulse 2s ease-in-out infinite alternate}
@keyframes cyanPulse{from{text-shadow:0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan)}to{text-shadow:0 0 40px var(--neon-cyan),0 0 80px rgba(0,238,255,.8),0 0 120px rgba(0,238,255,.4)}}
.tagline{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.2rem,3vw,2rem);letter-spacing:.2em;color:var(--neon-yellow);margin:1.5rem 0 2.5rem;text-shadow:0 0 15px rgba(255,215,0,.8),0 0 30px rgba(255,215,0,.4)}
.hero-badges{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.badge{border:2px solid var(--neon-pink);padding:.5rem 1.5rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink);box-shadow:0 0 15px rgba(255,0,144,.3),inset 0 0 15px rgba(255,0,144,.05);transition:all .3s;animation:badgePulse 3s ease-in-out infinite alternate}
@keyframes badgePulse{from{box-shadow:0 0 15px rgba(255,0,144,.3)}to{box-shadow:0 0 25px rgba(255,0,144,.6)}}
.badge:hover{background:rgba(255,0,144,.15);box-shadow:0 0 40px rgba(255,0,144,.8);transform:translateY(-2px)}
.badge.cyan{border-color:var(--neon-cyan);color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan);animation:badgePulseCyan 3s ease-in-out infinite alternate}
@keyframes badgePulseCyan{from{box-shadow:0 0 15px rgba(0,238,255,.3)}to{box-shadow:0 0 25px rgba(0,238,255,.6)}}
.badge.yellow{border-color:var(--neon-yellow);color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow);animation:badgePulseY 3s ease-in-out infinite alternate}
@keyframes badgePulseY{from{box-shadow:0 0 15px rgba(255,215,0,.3)}to{box-shadow:0 0 25px rgba(255,215,0,.6)}}
.scroll-hint{margin-top:3rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:.6;animation:bounce 2s ease-in-out infinite}
.scroll-hint span{font-size:.65rem;letter-spacing:.3em;color:var(--neon-cyan)}
.scroll-arrow{width:24px;height:24px;border-right:2px solid var(--neon-cyan);border-bottom:2px solid var(--neon-cyan);transform:rotate(45deg)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.poster-section{position:relative;z-index:2;padding:6rem 2rem;display:flex;flex-direction:column;align-items:center;gap:4rem}
.section-label{font-size:.7rem;letter-spacing:.5em;color:var(--neon-pink);text-transform:uppercase;text-shadow:0 0 10px var(--neon-pink);display:block;margin-bottom:.5rem}
.images-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1100px;width:100%}
.img-card{position:relative;overflow:hidden;border:1px solid rgba(255,0,144,.4);box-shadow:0 0 30px rgba(255,0,144,.25),0 0 60px rgba(255,0,144,.1);transition:all .4s}
.img-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,0,144,.08) 0%,transparent 50%,rgba(0,238,255,.08) 100%);pointer-events:none}
.img-card:hover{border-color:var(--neon-pink);box-shadow:0 0 60px rgba(255,0,144,.6),0 0 100px rgba(255,0,144,.2);transform:scale(1.02) translateY(-4px)}
.img-card img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .6s ease}
.img-card:hover img{transform:scale(1.08)}
.img-card.main{grid-column:1/-1;height:520px}
.img-card.main img{object-position:center 20%}
.img-card.secondary{height:380px}
.img-label{position:absolute;bottom:0;left:0;right:0;padding:.8rem 1.2rem;background:linear-gradient(transparent,rgba(10,0,16,.9));font-size:.65rem;letter-spacing:.3em;color:rgba(255,255,255,.6);text-transform:uppercase;z-index:2}
.tape-divider{width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--neon-yellow),var(--neon-pink),var(--neon-cyan),var(--neon-yellow),transparent);box-shadow:0 0 20px rgba(255,215,0,.6),0 0 40px rgba(255,0,144,.3);margin:2rem 0;animation:tapeGlow 3s ease-in-out infinite alternate}
@keyframes tapeGlow{from{opacity:.7}to{opacity:1;box-shadow:0 0 30px rgba(255,215,0,.8),0 0 60px rgba(255,0,144,.5)}}
.about-section{position:relative;z-index:2;padding:6rem 2rem;max-width:1100px;margin:0 auto}
.about-inner{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start}
.about-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,6vw,5rem);line-height:1;color:#fff;text-shadow:3px 3px 0 var(--neon-pink);margin-bottom:1rem}
.about-title span{color:var(--neon-yellow);text-shadow:3px 3px 0 var(--neon-orange)}
.about-year{font-family:'Bebas Neue',sans-serif;font-size:8rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,0,144,.25);position:absolute;top:-2rem;right:-2rem;pointer-events:none;user-select:none}
.about-left{position:relative}
.about-text p{font-size:.9rem;line-height:1.9;color:rgba(255,255,255,.75);margin-bottom:1.5rem;border-left:2px solid var(--neon-pink);padding-left:1.5rem}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.service-item{padding:1.2rem;border:1px solid rgba(0,238,255,.2);background:rgba(0,238,255,.03);transition:all .3s}
.service-item:hover{border-color:var(--neon-cyan);background:rgba(0,238,255,.08);box-shadow:0 0 20px rgba(0,238,255,.25);transform:translateY(-2px)}
.service-item::before{content:'▶';color:var(--neon-pink);margin-right:.5rem;font-size:.7rem}
.service-item p{display:inline;font-size:.8rem;color:rgba(255,255,255,.8)}

/* ── RADIO PLAYER ── */
.radio-section{position:relative;z-index:2;padding:5rem 2rem;display:flex;justify-content:center}
.radio-widget{max-width:600px;width:100%;border:1px solid rgba(255,0,144,.5);background:rgba(10,0,16,.9);box-shadow:0 0 40px rgba(255,0,144,.3),0 0 80px rgba(255,0,144,.1);padding:2.5rem;position:relative;overflow:hidden}
.radio-widget::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,0,144,.02) 3px,rgba(255,0,144,.02) 4px);pointer-events:none}
.radio-top{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.radio-icon{font-size:2.5rem;animation:radioSpin 4s linear infinite}
@keyframes radioSpin{0%,100%{filter:drop-shadow(0 0 8px var(--neon-pink))}50%{filter:drop-shadow(0 0 20px var(--neon-cyan))}}
.radio-title{flex:1}
.radio-title h3{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:#fff;letter-spacing:.1em;text-shadow:0 0 15px rgba(255,0,144,.6)}
.radio-title p{font-size:.65rem;letter-spacing:.3em;color:rgba(255,255,255,.4);text-transform:uppercase}
.radio-live{display:flex;align-items:center;gap:.5rem;font-size:.65rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
#radio-status-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s}
#radio-status-dot.live{background:var(--neon-pink);box-shadow:0 0 10px var(--neon-pink);animation:livePulse 1s ease-in-out infinite alternate}
@keyframes livePulse{from{box-shadow:0 0 5px var(--neon-pink)}to{box-shadow:0 0 20px var(--neon-pink),0 0 40px rgba(255,0,144,.5)}}
.radio-now-playing{background:rgba(255,0,144,.05);border:1px solid rgba(255,0,144,.2);padding:1rem 1.2rem;margin-bottom:1.5rem;font-size:.75rem;letter-spacing:.1em;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#radio-now-playing{color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
.radio-controls{display:flex;align-items:center;gap:1.5rem}
#radio-btn{width:60px;height:60px;border-radius:50%;border:2px solid var(--neon-pink);background:transparent;color:var(--neon-pink);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 0 15px rgba(255,0,144,.3);flex-shrink:0}
#radio-btn:hover{background:rgba(255,0,144,.15);box-shadow:0 0 30px rgba(255,0,144,.7);transform:scale(1.1)}
#radio-btn.playing{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 20px rgba(0,238,255,.5);animation:btnPulse 1.5s ease-in-out infinite alternate}
@keyframes btnPulse{from{box-shadow:0 0 15px rgba(0,238,255,.4)}to{box-shadow:0 0 35px rgba(0,238,255,.8)}}
.radio-vol{display:flex;align-items:center;gap:.8rem;flex:1}
.radio-vol span{font-size:.65rem;letter-spacing:.2em;color:rgba(255,255,255,.4);flex-shrink:0}
#radio-volume{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:rgba(255,255,255,.1);outline:none;cursor:pointer}
#radio-volume::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--neon-pink);box-shadow:0 0 8px var(--neon-pink);cursor:pointer}
.radio-waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:30px;margin-top:1.5rem;opacity:.4}
.radio-waveform.active{opacity:1}
.wave-bar{width:3px;background:var(--neon-pink);border-radius:2px;animation:none}
.radio-waveform.active .wave-bar{animation:wave var(--d,.5s) ease-in-out infinite alternate}
@keyframes wave{from{transform:scaleY(.2)}to{transform:scaleY(1)}}

.footer{position:relative;z-index:2;text-align:center;padding:4rem 2rem;border-top:1px solid rgba(255,0,144,.2)}
.footer-logo{font-family:'Bebas Neue',sans-serif;font-size:3rem;background:linear-gradient(135deg,var(--neon-pink),var(--neon-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;animation:nameGlow 3s ease-in-out infinite alternate}
.footer-sub{font-size:.65rem;letter-spacing:.4em;color:rgba(255,255,255,.35);text-transform:uppercase;margin-bottom:2rem}
.footer-copy{font-size:.65rem;color:rgba(255,255,255,.2);letter-spacing:.1em}
@media(max-width:768px){.images-grid{grid-template-columns:1fr}.img-card.main{height:320px;grid-column:1}.img-card.secondary{height:280px}.about-inner{grid-template-columns:1fr;gap:2rem}.about-year{display:none}.services-grid{grid-template-columns:1fr}.radio-controls{flex-wrap:wrap}.radio-vol{width:100%}}