:root { --ink:#121212; --yellow:#ffe500; --pink:#ff3cac; --blue:#2e45ff; --cream:#fffbed; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.topline { min-height:38px; padding:7px 4vw; background:var(--ink); color:white; display:flex; align-items:center; justify-content:space-between; font:800 11px/1 Arial; letter-spacing:1.6px; }
.mini-wave { transform:scale(.5); height:20px; }
nav { height:94px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid var(--ink); }
.brand { font:1000 clamp(24px,3vw,42px)/.8 Arial Black, Impact, sans-serif; letter-spacing:-2.5px; }
.brand em { display:inline-block; padding:6px 8px; background:var(--yellow); font-style:normal; transform:rotate(-3deg); }
.nav-cta { background:var(--pink); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:13px 18px; font:900 12px Arial; letter-spacing:.6px; transform:rotate(1deg); }
.hero { min-height:710px; display:grid; grid-template-columns:1.06fr .94fr; border-bottom:3px solid var(--ink); }
.hero-copy { padding:9vh 4vw 7vh; background:var(--cream); position:relative; }
.eyebrow,.section-number { font:900 11px Arial; letter-spacing:1.7px; text-transform:uppercase; }
.eyebrow { display:inline-block; border:2px solid var(--ink); padding:8px 10px; box-shadow:3px 3px 0 var(--blue); }
h1,h2,blockquote { font-family:Arial Black, Impact, sans-serif; font-weight:1000; text-transform:uppercase; letter-spacing:-.07em; margin:0; line-height:.84; }
h1 { font-size:clamp(74px,9.3vw,148px); margin:35px 0 30px; }
h1 span,h2 span { color:var(--blue); -webkit-text-stroke:2px var(--ink); text-shadow:5px 5px 0 var(--yellow); }
.lede { max-width:680px; font-size:clamp(18px,1.65vw,26px); line-height:1.28; margin:0 0 38px; }
.hero-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.big-button { background:var(--blue); color:white; border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:19px 24px; font:900 14px Arial; letter-spacing:1px; transition:.18s; }
.big-button:hover { transform:translate(3px,3px); box-shadow:4px 4px 0 var(--ink); background:var(--pink); }
.big-button span { padding-left:40px; font-size:21px; }
.on-air { display:flex; align-items:center; gap:12px; font-size:11px; }
.on-air b { color:#ff164c; animation:blink 1.2s step-end infinite; }
.wave { height:44px; display:flex; align-items:center; gap:3px; }
.wave i { width:4px; background:currentColor; display:block; animation:pulse .8s ease-in-out infinite alternate; }
.wave i:nth-child(3n) { animation-delay:.2s; }.wave i:nth-child(2n) { animation-delay:.45s; }
@keyframes pulse { to { transform:scaleY(.35); } } @keyframes blink { 50%{opacity:.25} }
.hero-art { min-height:710px; position:relative; overflow:hidden; background:var(--yellow); border-left:3px solid var(--ink); background-image:radial-gradient(var(--ink) 1.2px,transparent 1.2px); background-size:18px 18px; }
.bee { position:absolute; width:290px; height:400px; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-4deg); background:var(--yellow); border:8px solid var(--ink); border-radius:48% 48% 43% 43%; overflow:visible; z-index:3; box-shadow:12px 14px 0 rgba(46,69,255,.9); }
.stripe { position:absolute; left:-2%; width:104%; height:48px; background:var(--ink); z-index:1; }.s1{top:245px}.s2{top:335px}
.eye { position:absolute; width:37px;height:50px;border-radius:50%;background:var(--ink);top:90px;z-index:2}.eye:after{content:"";position:absolute;background:white;width:10px;height:14px;border-radius:50%;left:8px;top:7px}.eye.left{left:67px}.eye.right{right:67px}
.smile { position:absolute; width:70px;height:34px;border-bottom:8px solid var(--ink);border-radius:0 0 60px 60px;left:103px;top:153px;z-index:2 }
.antenna { position:absolute;width:8px;height:90px;background:var(--ink);top:-70px;z-index:-1}.antenna:after{content:"";position:absolute;width:24px;height:24px;border:6px solid var(--ink);background:var(--pink);border-radius:50%;top:-12px;left:-8px}.antenna.left{left:70px;transform:rotate(-19deg)}.antenna.right{right:70px;transform:rotate(19deg)}
.headphone-band { position:absolute; width:260px;height:160px;border:20px solid var(--blue);border-bottom:0;border-radius:150px 150px 0 0;left:7px;top:-35px;z-index:4 }
.headphone { position:absolute;width:49px;height:112px;background:var(--blue);border:7px solid var(--ink);top:78px;z-index:5}.headphone.left{left:-25px;border-radius:28px 8px 8px 28px}.headphone.right{right:-25px;border-radius:8px 28px 28px 8px}
.wing { position:absolute;width:150px;height:210px;background:rgba(255,255,255,.82);border:7px solid var(--ink);top:180px;z-index:-2}.wing.left{left:-112px;border-radius:80% 20% 70% 30%;transform:rotate(-18deg)}.wing.right{right:-112px;border-radius:20% 80% 30% 70%;transform:rotate(18deg)}
.mic { position:absolute; right:-95px;top:240px;background:var(--pink);border:7px solid var(--ink);width:62px;height:105px;border-radius:40px 40px 12px 12px;text-align:center;padding-top:15px;font-size:25px;z-index:6;transform:rotate(-12deg);box-shadow:8px 8px 0 var(--ink)}
.sticker,.burst,.name-tag { position:absolute; z-index:8; border:3px solid var(--ink); font-family:Arial Black, Impact, sans-serif; font-weight:1000; text-align:center; }
.sticker { padding:12px 16px; background:white; box-shadow:5px 5px 0 var(--ink); line-height:.9; }.sticker-one{left:7%;top:8%;transform:rotate(-9deg)}.sticker-two{right:5%;top:12%;background:var(--pink);transform:rotate(8deg)}
.burst { right:4%;bottom:12%;width:135px;height:135px;padding:28px 5px;background:var(--blue);color:white;clip-path:polygon(50% 0,61% 23%,80% 7%,82% 31%,100% 29%,88% 50%,100% 68%,77% 70%,79% 94%,60% 79%,48% 100%,39% 77%,15% 93%,19% 67%,0 63%,15% 47%,2% 26%,26% 28%,27% 4%,42% 22%);border:0;transform:rotate(9deg);line-height:.85}.burst strong{font-size:29px}
.name-tag { left:7%;bottom:8%;background:white;padding:10px 17px;transform:rotate(-5deg);box-shadow:6px 6px 0 var(--ink)}.name-tag small,.name-tag strong{display:block}.name-tag small{font:800 9px Arial;letter-spacing:1px}.name-tag strong{font-size:28px;letter-spacing:-2px}
.ticker { overflow:hidden;background:var(--pink);border-bottom:3px solid var(--ink);padding:14px 0;white-space:nowrap;font:1000 17px Arial Black, Impact,sans-serif;letter-spacing:.5px}.ticker div{width:max-content;animation:marquee 20s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}
.intro { padding:110px 5vw 120px;display:grid;grid-template-columns:.42fr 1fr .8fr;gap:4vw;align-items:start;background:white;border-bottom:3px solid var(--ink)}
.intro h2,.ways h2,.signup h2 { font-size:clamp(54px,7vw,108px); }.intro h2 span,.ways h2 span,.signup h2 span{font-size:.9em}.intro-copy{padding-top:20px;border-top:8px solid var(--yellow)}.intro-copy p{font-size:20px;line-height:1.35;margin:0 0 25px}.intro-copy p:first-child{font-weight:800}
.messages { display:grid;grid-template-columns:1fr 1fr;background:var(--blue);border-bottom:3px solid var(--ink) }
.phone-card { margin:8vw auto;width:min(420px,80%);border:4px solid var(--ink);border-radius:36px;padding:18px;background:white;box-shadow:16px 16px 0 var(--pink);transform:rotate(-3deg) }.phone-top{display:flex;justify-content:space-between;font-size:9px;padding:5px 4px 18px;border-bottom:2px solid var(--ink)}.avatar{width:56px;height:56px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);font:900 31px/49px Arial;text-align:center;margin:18px auto;box-shadow:4px 4px 0 var(--ink)}.bubble,.reply{padding:13px 15px;border:2px solid var(--ink);font-size:14px;line-height:1.35;margin:10px 25px 10px 0;border-radius:18px 18px 18px 4px;background:var(--yellow)}.bubble.small{width:76%}.reply{margin-left:75px;margin-right:0;border-radius:18px 18px 4px 18px;background:var(--blue);color:white}.textbar{margin-top:25px;border:2px solid var(--ink);border-radius:18px;padding:10px;color:#777;font-size:12px}.textbar span{float:right;background:var(--pink);color:var(--ink);border-radius:50%;padding:1px 5px;font-weight:bold}
.ways { background:var(--cream);padding:7vw 6vw;border-left:3px solid var(--ink)}.ways h2{margin:18px 0 45px}.way{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:19px 0;border-top:2px solid var(--ink)}.way>b{font:900 12px Arial;color:var(--blue)}.way h3{font:1000 18px Arial Black,Impact,sans-serif;margin:0 0 6px}.way p{margin:0;font-size:14px;line-height:1.4;max-width:480px}
.dj-section { padding:12vw 5vw;background:var(--ink);color:white;text-align:center;position:relative;overflow:hidden}.dj-section:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,229,0,.08) 30px 33px)}.quote-mark{font:200px/.5 Georgia;color:var(--pink);position:relative}.dj-section blockquote{font-size:clamp(41px,6vw,93px);position:relative}.dj-section blockquote span{color:var(--yellow)}.dj-section p{position:relative;max-width:680px;margin:45px auto 0;font-size:18px;line-height:1.5}
.signup { background:var(--yellow);padding:9vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end;border-bottom:3px solid var(--ink)}.signup-side>p{font-size:24px;line-height:1.3;font-weight:700;max-width:520px}form{margin-top:35px}label{display:block;font:900 10px Arial;letter-spacing:1.5px;margin-bottom:8px}.input-row{display:flex}.input-row input{flex:1;min-width:0;border:3px solid var(--ink);background:white;padding:18px;font:800 16px Arial;border-radius:0}.input-row button{border:3px solid var(--ink);border-left:0;background:var(--pink);font:900 13px Arial;padding:0 20px;cursor:pointer}.input-row button:hover{background:var(--blue);color:white}form small{display:block;margin-top:10px}.success{margin-top:30px;background:var(--blue);color:white;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:22px;font:900 17px Arial}
footer{min-height:110px;padding:25px 4vw;display:flex;justify-content:space-between;align-items:center;background:white;font:900 10px Arial;letter-spacing:1px}
@media(max-width:850px){.topline span:last-child{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding-top:60px}.hero-art{border-left:0;border-top:3px solid var(--ink);min-height:620px}.intro{grid-template-columns:1fr}.messages{grid-template-columns:1fr}.ways{border-left:0;border-top:3px solid var(--ink)}.signup{grid-template-columns:1fr}.bee{transform:translate(-50%,-50%) rotate(-4deg) scale(.8)}.burst{right:1%}.sticker-two{right:2%}}
@media(max-width:520px){nav{height:78px}.nav-cta{font-size:9px;padding:10px}.hero-copy{padding:45px 5vw 60px}h1{font-size:63px}.hero-art{min-height:540px}.bee{transform:translate(-50%,-50%) rotate(-4deg) scale(.67)}.sticker{font-size:11px}.burst{width:105px;height:105px;padding-top:22px;font-size:10px}.intro{padding:80px 6vw}.intro h2,.ways h2,.signup h2{font-size:51px}.phone-card{width:86%;margin:70px auto}.ways{padding:70px 6vw}.signup{padding:80px 6vw}.input-row{display:block}.input-row button{width:100%;border-left:3px solid var(--ink);border-top:0;padding:18px}footer{gap:25px;flex-wrap:wrap}.mini-wave{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wave i,.ticker div,.on-air b{animation:none}}