:root{--pink:#ff2bd6;--cyan:#2dfcff;--violet:#8b3dff;--dark:#070016;--panel:#12052b;--text:#f8f5ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% 10%,#35106d 0,#100024 42%,#05000e 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif;min-height:100vh}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 7vw;border-bottom:1px solid rgba(45,252,255,.45);background:rgba(5,0,20,.82);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.brand{text-decoration:none;color:white;display:flex;flex-direction:column;line-height:.85;text-shadow:0 0 8px var(--cyan),0 0 18px var(--pink)}.brand-main{font-size:29px;font-weight:900;font-style:italic;letter-spacing:-1px}.brand-sub{font-size:10px;letter-spacing:5px;color:var(--cyan);margin-top:9px}.topbar nav{display:flex;gap:34px}.topbar nav a{color:#e8e3ff;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:2px}.topbar nav a:hover{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}.hero{min-height:650px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:60px 9vw 130px;isolation:isolate}.stars{position:absolute;inset:0;z-index:-5;background-image:radial-gradient(circle,#fff 1px,transparent 1.5px),radial-gradient(circle,var(--cyan) 1px,transparent 1.5px);background-size:67px 67px,93px 93px;background-position:5px 13px,30px 7px;opacity:.55}.sun{position:absolute;width:410px;height:410px;border-radius:50%;left:50%;top:80px;transform:translateX(-12%);z-index:-4;background:repeating-linear-gradient(to bottom,#ffda3d 0 18px,#ff8b32 18px 35px,#ff2c8f 35px 51px,transparent 51px 59px);filter:drop-shadow(0 0 45px #ff318f);clip-path:circle(50%)}.skyline{position:absolute;left:0;right:0;bottom:105px;height:200px;z-index:-3;background:linear-gradient(90deg,transparent 0 4%,#090014 4% 9%,transparent 9% 12%,#080013 12% 18%,transparent 18% 21%,#080013 21% 28%,transparent 28% 31%,#080013 31% 38%,transparent 38% 43%,#080013 43% 52%,transparent 52% 57%,#080013 57% 65%,transparent 65% 69%,#080013 69% 77%,transparent 77% 82%,#080013 82% 90%,transparent 90%);clip-path:polygon(0 55%,4% 55%,4% 30%,8% 30%,8% 60%,12% 60%,12% 38%,16% 38%,16% 68%,21% 68%,21% 20%,26% 20%,26% 55%,31% 55%,31% 42%,36% 42%,36% 70%,42% 70%,42% 25%,48% 25%,48% 58%,54% 58%,54% 36%,60% 36%,60% 65%,66% 65%,66% 15%,72% 15%,72% 55%,78% 55%,78% 32%,84% 32%,84% 63%,90% 63%,90% 24%,96% 24%,96% 52%,100% 52%,100% 100%,0 100%)}.grid{position:absolute;left:-20%;right:-20%;bottom:-210px;height:390px;z-index:-2;background-image:linear-gradient(rgba(255,43,214,.75) 1px,transparent 1px),linear-gradient(90deg,rgba(45,252,255,.6) 1px,transparent 1px);background-size:55px 32px;transform:perspective(260px) rotateX(58deg);transform-origin:top;box-shadow:0 -20px 80px rgba(255,43,214,.25)}.hero-copy{z-index:2;max-width:500px}.eyebrow{font-size:12px;letter-spacing:4px;color:var(--cyan);font-weight:800}.hero h1{font-size:clamp(48px,7vw,94px);line-height:.86;margin:14px 0 24px;font-style:italic;letter-spacing:-4px;text-shadow:4px 4px 0 #4215a7,0 0 18px #4517ff}.hero h1 span{color:var(--pink);text-shadow:3px 3px 0 #4818a9,0 0 22px var(--pink)}.intro{font-size:18px;line-height:1.7;color:#ded7ef}.player-wrap{text-align:center;z-index:3;justify-self:center}.play-button{width:210px;height:210px;border-radius:50%;border:5px solid var(--pink);background:rgba(7,0,22,.68);color:white;cursor:pointer;box-shadow:0 0 10px #fff,0 0 26px var(--pink),0 0 65px #762cff,inset 0 0 35px rgba(255,43,214,.45);transition:.2s transform,.2s box-shadow}.play-button:hover{transform:scale(1.04);box-shadow:0 0 15px #fff,0 0 38px var(--pink),0 0 85px #762cff}.play-icon{font-size:76px;display:block;margin-left:10px;text-shadow:0 0 18px white}.play-button.playing .play-icon{margin-left:0}.listen{font-size:35px;font-weight:1000;font-style:italic;letter-spacing:2px;margin-top:22px;text-shadow:0 0 9px var(--cyan),0 0 22px var(--pink)}.status{display:inline-block;margin-top:16px;padding:9px 18px;border:1px solid var(--cyan);border-radius:99px;color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:2px;box-shadow:0 0 14px rgba(45,252,255,.35)}.volume-row{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:20px}.volume-row input{accent-color:var(--pink);width:150px}.message{font-size:12px;color:#c8bfd9}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:35px 7vw 60px;background:linear-gradient(#080015,#05000c);border-top:1px solid rgba(255,43,214,.45)}.cards article{min-height:190px;text-align:center;padding:25px 20px;background:linear-gradient(145deg,rgba(27,5,62,.92),rgba(7,0,24,.94));border:1px solid rgba(45,252,255,.35);border-radius:10px;box-shadow:inset 0 0 25px rgba(139,61,255,.1),0 0 18px rgba(255,43,214,.08)}.cards .icon{font-size:40px;color:var(--pink);text-shadow:0 0 15px var(--pink)}.cards h2{font-size:14px;letter-spacing:3px;color:var(--cyan)}.cards p{font-size:13px;line-height:1.6;color:#bdb4cf}footer{text-align:center;padding:32px 20px 42px;background:#030008;border-top:1px solid rgba(45,252,255,.25);color:#847b98;font-size:11px}.footer-brand{font-size:20px;font-weight:900;font-style:italic;color:white;text-shadow:0 0 9px var(--pink);margin-bottom:12px}.footer-brand span{display:block;color:var(--cyan);font-size:8px;letter-spacing:5px;margin-top:5px}@media(max-width:800px){.topbar{height:auto;padding:18px 5vw;gap:18px}.brand-main{font-size:23px}.topbar nav{gap:15px}.topbar nav a{font-size:9px;letter-spacing:1px}.hero{grid-template-columns:1fr;text-align:center;padding:70px 7vw 120px;gap:45px}.hero-copy{margin:auto}.hero h1{letter-spacing:-2px}.sun{width:330px;height:330px;left:50%;top:310px;transform:translateX(-50%);opacity:.8}.play-button{width:175px;height:175px}.play-icon{font-size:60px}.cards{grid-template-columns:1fr 1fr}}@media(max-width:500px){.topbar nav a:nth-child(2){display:none}.cards{grid-template-columns:1fr}.listen{font-size:29px}}