*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1A1024;color:#FFFFFF;font-family:'Inter',sans-serif;overflow-x:hidden}
.grain-overlay{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

.channel{min-height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;overflow:hidden}
.channel-label{position:absolute;top:20px;right:24px;font-family:'Righteous',cursive;font-size:.85rem;color:#FF8A00;opacity:.6;letter-spacing:.15em}

/* CH1 */
.channel-1{background:#1A1024}
.static-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.02) 2px,rgba(255,255,255,.02) 4px);pointer-events:none}
.hero-cards{position:relative;width:min(90vw,600px);height:400px}
.hero-card{position:absolute;border-radius:16px;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .8s cubic-bezier(.23,1,.32,1)}
.card-1{background:#FF3366;width:100%;height:100%;z-index:3;transform:rotate(-2deg)}
.card-2{background:#3D5AFE;width:80%;height:70%;top:15%;left:10%;z-index:2;transform:rotate(4deg) translateX(30px)}
.card-3{background:#00E5A0;width:70%;height:60%;top:20%;left:15%;z-index:1;transform:rotate(-6deg) translateX(-20px);color:#1A1024}
.hero-title{font-family:'Bungee Shade',cursive;font-size:clamp(2.5rem,7vw,6rem);letter-spacing:.05em;line-height:.95;text-transform:uppercase}
.hero-sub{font-family:'Righteous',cursive;font-size:clamp(1.5rem,4vw,3rem);letter-spacing:.2em;margin-top:8px}
.card-text{font-family:'Righteous',cursive;font-size:clamp(1.2rem,3vw,2rem);text-align:center;letter-spacing:.05em;line-height:1.3}
.scroll-cue{position:absolute;bottom:40px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:pulse 2s infinite}
.cue-arrow{font-size:1.5rem;color:#E8FF00}
.cue-text{font-family:'Righteous',cursive;font-size:.8rem;color:#E8FF00;letter-spacing:.2em}
@keyframes pulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.5;transform:translateY(8px)}}

/* CH2 */
.channel-2{background:#FFF5F0;color:#1A1024}
.broken-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:900px;width:100%}
.grid-block{border-radius:14px;padding:32px;display:flex;align-items:center;justify-content:center}
.block-a{background:#FF3366;color:#FFF;grid-column:1/3;transform:rotate(-1deg)}
.block-b{background:#1A1024;color:#FFF;grid-column:3;grid-row:1/3;transform:rotate(2deg)}
.block-c{background:#E8FF00;color:#1A1024;transform:rotate(1.5deg)}
.block-d{background:#3D5AFE;transform:rotate(-3deg)}
.section-title{font-family:'Righteous',cursive;font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:.03em;text-transform:uppercase}
.block-body{font-family:'Inter',sans-serif;font-size:clamp(.85rem,1.3vw,1rem);line-height:1.7}
.big-number{font-family:'Bungee Shade',cursive;font-size:clamp(2rem,5vw,4rem)}
.accent-block{text-align:center}
.icon-burst{width:60px;height:60px;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* CH3 */
.channel-3{background:linear-gradient(135deg,#7B2D8E,#3D5AFE);flex-direction:row;gap:40px;flex-wrap:wrap}
.spectrum-bars{display:flex;gap:6px;align-items:flex-end;height:200px}
.bar{width:clamp(20px,4vw,40px);border-radius:6px 6px 0 0;animation:barPulse 1.5s ease-in-out infinite alternate}
.bar-1{height:40%;background:#FF8A00;animation-delay:0s}
.bar-2{height:70%;background:#E8FF00;animation-delay:.1s}
.bar-3{height:55%;background:#00E5A0;animation-delay:.2s}
.bar-4{height:85%;background:#FF3366;animation-delay:.3s}
.bar-5{height:45%;background:#FF8A00;animation-delay:.4s}
.bar-6{height:90%;background:#3D5AFE;animation-delay:.5s}
.bar-7{height:60%;background:#E8FF00;animation-delay:.6s}
.bar-8{height:75%;background:#00E5A0;animation-delay:.7s}
@keyframes barPulse{0%{transform:scaleY(1)}100%{transform:scaleY(.5)}}
.spectrum-text{max-width:400px}

/* CH4 */
.channel-4{background:#1A1024;gap:40px}
.ticker-wrap{width:100%;overflow:hidden;border-top:2px solid #FF8A00;border-bottom:2px solid #FF8A00;padding:12px 0}
.ticker-content{display:flex;gap:24px;animation:scroll 15s linear infinite;white-space:nowrap;font-family:'Righteous',cursive;font-size:clamp(1rem,2vw,1.4rem);color:#E8FF00;text-transform:uppercase;letter-spacing:.1em}
.ticker-dot{color:#FF3366}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.headline-stack{display:flex;flex-direction:column;gap:16px;max-width:700px;width:100%}
.headline{padding:24px 32px;border-radius:12px;transition:transform .3s,box-shadow .3s;cursor:pointer}
.headline:hover{transform:translateX(8px);box-shadow:4px 4px 0 #FF8A00}
.h-1{background:#FF3366;transform:rotate(-1deg)}
.h-2{background:#3D5AFE;transform:rotate(.5deg)}
.h-3{background:#00E5A0;color:#1A1024;transform:rotate(-0.5deg)}
.h-tag{font-family:'Inter',sans-serif;font-weight:900;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(0,0,0,.2);padding:4px 10px;border-radius:4px;display:inline-block;margin-bottom:8px}
.headline h3{font-family:'Righteous',cursive;font-size:clamp(1.2rem,2.5vw,2rem)}

/* CH5 */
.channel-5{background:#FFF5F0;color:#1A1024;gap:40px}
.freq-display{display:flex;align-items:baseline;gap:8px}
.freq-number{font-family:'Bungee Shade',cursive;font-size:clamp(4rem,12vw,10rem);color:#FF3366;line-height:1}
.freq-label{font-family:'Righteous',cursive;font-size:clamp(1rem,3vw,2rem);color:#7B2D8E}
.freq-body{max-width:600px;text-align:center}

/* CH6 */
.channel-6{background:#1A1024}
.signoff-content{text-align:center}
.signoff-title{font-family:'Bungee Shade',cursive;font-size:clamp(1.5rem,4vw,3rem);color:#FF8A00;margin-bottom:12px}
.signoff-sub{font-family:'Inter',sans-serif;font-size:1rem;color:#FFF5F0;opacity:.6;margin-bottom:32px}
.color-bar{display:flex;height:40px;border-radius:8px;overflow:hidden;width:min(90vw,400px)}
.cb{flex:1}
.cb-1{background:#FF3366}.cb-2{background:#FF8A00}.cb-3{background:#E8FF00}.cb-4{background:#00E5A0}.cb-5{background:#3D5AFE}

@media(max-width:640px){
  .broken-grid{grid-template-columns:1fr;gap:12px}
  .block-b{grid-column:1;grid-row:auto}
  .channel-3{flex-direction:column}
  .hero-cards{height:300px}
}