:root { --pink:#f50bb6; --cyan:#20d9ef; --lime:#c8ff18; --black:#050505; --white:#f7f7f3; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--black); color:var(--white); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.055; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.orb { position:fixed; border-radius:50%; filter:blur(90px); opacity:.16; pointer-events:none; }
.orb-pink { width:46vw; height:46vw; background:var(--pink); left:-18vw; top:20vh; animation:drift 8s ease-in-out infinite alternate; }
.orb-cyan { width:38vw; height:38vw; background:var(--cyan); right:-16vw; bottom:-14vw; animation:drift 9s ease-in-out -3s infinite alternate-reverse; }
@keyframes drift { to { transform:translate(7vw, -4vh) scale(1.12); } }
.ticker { height:30px; border-bottom:1px solid rgba(255,255,255,.18); overflow:hidden; display:flex; align-items:center; font-size:9px; font-weight:800; letter-spacing:.2em; }
.ticker > div { display:flex; align-items:center; width:max-content; gap:22px; white-space:nowrap; animation:ticker 22s linear infinite; }
.ticker i { width:5px; height:5px; background:var(--pink); border-radius:50%; }
@keyframes ticker { to { transform:translateX(-50%); } }
header { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px, 5.5vw, 88px); border-bottom:1px solid rgba(255,255,255,.14); position:relative; z-index:3; }
header img { width:205px; filter:invert(1) grayscale(1) brightness(3); }
header > span { font-size:9px; font-weight:800; letter-spacing:.18em; color:#aaa; display:flex; gap:9px; align-items:center; }
header > span i { width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:0 0 14px var(--pink); animation:blink 1.1s infinite; }
@keyframes blink { 50% { opacity:.25; } }
main { min-height:calc(100vh - 154px); display:grid; place-items:center; position:relative; z-index:2; }
.hero { width:min(1160px, 100%); text-align:center; padding:clamp(38px, 6vh, 76px) 22px 52px; }
.neon-logo { width:min(630px, 80vw); height:150px; margin:0 auto 4px; overflow:hidden; display:grid; place-items:center; }
.neon-logo img { width:100%; mix-blend-mode:screen; }
.eyebrow { margin:0 0 14px; font-size:9px; font-weight:800; letter-spacing:.22em; color:#aaa; }
.eyebrow b { color:var(--pink); font-size:18px; vertical-align:-2px; margin-right:6px; }
h1 { margin:0; font-size:clamp(76px, 13vw, 190px); line-height:.7; letter-spacing:-.085em; font-weight:900; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:2px var(--pink); text-shadow:0 0 30px rgba(245,11,182,.26); position:relative; }
h1 em::after { content:""; position:absolute; height:6px; left:4%; right:0; bottom:-8px; background:var(--lime); box-shadow:0 0 16px rgba(200,255,24,.55); transform:rotate(-1deg); }
.cable-message { width:min(760px, 100%); margin:66px auto 34px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.cable-message strong { color:var(--white); font-size:clamp(26px, 3.1vw, 46px); line-height:.94; letter-spacing:-.055em; font-weight:900; transform:rotate(-1deg); }
.cable-message strong span { color:transparent; -webkit-text-stroke:1px var(--white); text-shadow:0 0 22px rgba(255,255,255,.08); }
.cable-message p { margin:0; color:var(--white); font-size:clamp(12px, 1.35vw, 18px); line-height:1.4; letter-spacing:.06em; font-weight:800; }
.cable-message em { display:inline-block; padding:2px 8px 3px; color:var(--black); background:var(--lime); box-shadow:0 0 18px rgba(200,255,24,.36); font-style:normal; transform:rotate(-1.5deg); }
.radio-player { width:min(720px, 100%); min-height:112px; margin:0 auto; padding:18px 20px; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:18px; text-align:left; border:1px solid rgba(255,255,255,.28); background:rgba(10,10,10,.72); box-shadow:0 0 0 1px rgba(245,11,182,.08) inset, 0 18px 70px rgba(0,0,0,.42); backdrop-filter:blur(18px); position:relative; overflow:hidden; }
.radio-player::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(var(--pink),var(--cyan)); box-shadow:0 0 18px var(--pink); }
.radio-player.is-playing { border-color:rgba(245,11,182,.55); box-shadow:0 0 30px rgba(245,11,182,.13), 0 18px 70px rgba(0,0,0,.42); }
.play-button { width:66px; height:66px; flex:0 0 66px; border:1px solid var(--pink); border-radius:50%; display:grid; place-items:center; background:var(--pink); box-shadow:0 0 24px rgba(245,11,182,.42); transition:transform .2s, box-shadow .2s; }
.play-button:hover { transform:scale(1.06); box-shadow:0 0 34px rgba(245,11,182,.64); }
.play-button:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.play-icon { width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:15px solid white; margin-left:4px; }
.radio-player.is-playing .play-icon { width:14px; height:18px; border:0; margin:0; position:relative; }
.radio-player.is-playing .play-icon::before,.radio-player.is-playing .play-icon::after { content:""; position:absolute; top:0; bottom:0; width:4px; background:white; }
.radio-player.is-playing .play-icon::before { left:1px; }.radio-player.is-playing .play-icon::after { right:1px; }
.player-copy { min-width:0; }
.player-status { display:flex; align-items:center; gap:7px; margin-bottom:8px; color:#8d8d8d; font-size:8px; font-weight:900; letter-spacing:.14em; }
.player-status i { width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:0 0 12px var(--pink); }
.radio-player.is-playing .player-status i { animation:blink .85s infinite; }
.player-copy strong { display:block; font-size:clamp(17px, 2vw, 24px); line-height:1; letter-spacing:-.025em; }
.player-copy p { margin:5px 0 0; color:var(--lime); font-size:clamp(12px, 1.2vw, 15px); font-weight:800; }
.equalizer { height:46px; display:flex; align-items:center; gap:3px; }
.equalizer i { width:3px; height:8px; background:linear-gradient(var(--cyan),var(--pink)); opacity:.36; }
.radio-player.is-playing .equalizer i { opacity:1; animation:eq .75s ease-in-out infinite alternate; }
.radio-player.is-playing .equalizer i:nth-child(2) { animation-delay:-.55s; }.radio-player.is-playing .equalizer i:nth-child(3) { animation-delay:-.18s; }.radio-player.is-playing .equalizer i:nth-child(4) { animation-delay:-.68s; }.radio-player.is-playing .equalizer i:nth-child(5) { animation-delay:-.3s; }.radio-player.is-playing .equalizer i:nth-child(6) { animation-delay:-.48s; }.radio-player.is-playing .equalizer i:nth-child(7) { animation-delay:-.1s; }
@keyframes eq { from { height:7px; } to { height:42px; } }
.volume-control { display:flex; flex-direction:column; align-items:center; gap:8px; color:#737373; font-size:7px; font-weight:900; letter-spacing:.15em; }
.volume-control input { appearance:none; width:76px; height:2px; padding:0; background:#444; cursor:pointer; }
.volume-control input::-webkit-slider-thumb { appearance:none; width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.volume-control input::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
button { color:white; background:transparent; border:0; font-size:9px; font-weight:900; letter-spacing:.1em; cursor:pointer; }
button span { color:var(--pink); font-size:18px; margin-left:7px; }
footer { min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(22px, 5.5vw, 88px); border-top:1px solid rgba(255,255,255,.14); color:#606060; font-size:8px; font-weight:800; letter-spacing:.13em; position:relative; z-index:3; }
footer a { color:#aaa; transition:color .2s; } footer a:hover { color:var(--lime); }
.footer-site { text-align:center; }
.footer-meta { display:flex; flex-direction:column; align-items:flex-end; gap:7px; text-align:right; }
.footer-meta span { color:#555; }
@media (max-width:650px) {
  header { height:72px; } header img { width:160px; } header > span { font-size:7px; }
  main { min-height:calc(100vh - 150px); }
  .hero { padding-top:28px; }
  .neon-logo { height:110px; width:96vw; margin-left:-10px; }
  h1 { font-size:78px; line-height:.75; }
  .cable-message { margin-top:54px; margin-bottom:28px; gap:12px; }.cable-message strong { font-size:27px; }.cable-message p { font-size:10px; letter-spacing:.035em; }
  .radio-player { min-height:0; grid-template-columns:auto 1fr auto; gap:13px; padding:15px 14px; }
  .play-button { width:54px; height:54px; flex-basis:54px; }
  .player-copy strong { font-size:15px; }.player-copy p { font-size:11px; }
  .equalizer { display:none; }
  .volume-control { grid-column:2 / 4; width:100%; flex-direction:row; justify-content:flex-end; margin-top:-5px; }
  .volume-control input { width:110px; }
  footer { min-height:122px; grid-template-columns:1fr 1fr; gap:14px; padding-top:18px; padding-bottom:18px; }
  .footer-site { text-align:right; }
  .footer-meta { grid-column:1 / -1; align-items:center; text-align:center; gap:6px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }