@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#080611;--panel:#110d1d;--text:#f8f4ff;--muted:#aaa2bd;--pink:#ff2bd6;--cyan:#28e7ff;--purple:#9b5cff;--line:#2c203d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% 0,#21103d 0,transparent 35%),var(--bg);color:var(--text);font-family:'Space Mono',monospace;line-height:1.65}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.06;background:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 4px)}
a{color:inherit;text-decoration:none}.site-header{height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(8,6,17,.9);backdrop-filter:blur(14px);z-index:10}.logo{font:900 32px Orbitron;color:var(--cyan);text-shadow:0 0 18px #28e7ff88}.logo span{color:var(--pink)}nav{display:flex;gap:28px}nav a{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:26px 0}nav a:hover,nav a.active{color:var(--text);text-shadow:0 0 12px var(--pink)}.menu-toggle{display:none;background:none;border:0;color:white;font-size:24px}
.hero{min-height:calc(100vh - 76px);padding:9vw 8vw;position:relative;overflow:hidden;display:flex;align-items:center}.hero-grid{position:absolute;inset:45% -10% -20%;background:linear-gradient(transparent 95%,#ff2bd655 96%),linear-gradient(90deg,transparent 95%,#ff2bd655 96%);background-size:60px 60px;transform:perspective(350px) rotateX(55deg);transform-origin:center top;opacity:.55}.hero-content{position:relative;z-index:2;max-width:760px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--cyan);font-weight:bold}.hero h1,.page-hero h1{font:900 clamp(65px,11vw,150px)/.85 Orbitron;margin:22px 0;text-shadow:7px 7px 0 #ff2bd622,0 0 40px #9b5cff66}.hero h1 span{color:var(--pink)}.lead{font-size:18px;max-width:640px;color:#d0c9dc}.hero-actions{display:flex;gap:14px;margin-top:35px}.btn{display:inline-block;padding:14px 22px;border:1px solid var(--pink);background:var(--pink);color:#100815;font-weight:bold;box-shadow:0 0 25px #ff2bd655}.btn.ghost{background:transparent;color:white;border-color:var(--cyan)}.cassette{position:absolute;right:8%;top:22%;width:310px;height:205px;background:linear-gradient(145deg,#27202e,#0d0a12);border:4px solid #594a63;border-radius:18px;transform:rotate(7deg);box-shadow:0 30px 70px #000,0 0 35px #9b5cff55}.cassette-label{position:absolute;left:58px;right:58px;top:52px;text-align:center;padding:13px;background:#ff2bd6;color:#160b18;font:bold 17px Orbitron;line-height:1.1;transform:rotate(-3deg)}.cassette-reel{position:absolute;bottom:25px;width:55px;height:55px;border-radius:50%;border:8px dotted #b9adbe;background:#111}.cassette-reel.left{left:38px}.cassette-reel.right{right:38px}
.section{padding:90px 8vw}.section-head{max-width:800px;margin-bottom:35px}.section h2{font:700 clamp(28px,4vw,48px) Orbitron;margin:10px 0}.cards{display:grid;gap:18px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}.card,.artist,.genre{background:linear-gradient(145deg,#151021,#0d0915);border:1px solid var(--line);padding:30px;min-height:230px;transition:.25s}.card:hover,.artist:hover,.genre:hover{transform:translateY(-6px);border-color:var(--pink);box-shadow:0 15px 40px #000}.card span,.artist-num,.genre>span{color:var(--pink);font:bold 13px Orbitron}.card h3,.artist h2,.genre h2{font:700 25px Orbitron}.glow-blue{border-top:2px solid var(--cyan)}.glow-purple{border-top:2px solid var(--purple)}.dark-band{background:#0b0812;border-block:1px solid var(--line)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick{padding:25px;border:1px solid var(--line);background:#100c19}.quick:hover{border-color:var(--cyan);box-shadow:0 0 25px #28e7ff22}.quick b{display:block;font:700 18px Orbitron;color:var(--pink)}.quick span{color:var(--muted);font-size:12px}
.page{min-height:calc(100vh - 150px)}.page-hero{padding:100px 8vw 50px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(52px,8vw,100px)}.page-hero p:not(.eyebrow){max-width:720px;color:var(--muted)}.artist p,.genre em{color:var(--cyan);font-style:normal;font-size:12px}.artist small{color:var(--muted)}.genre{min-height:250px}.genre h2{font-size:32px}.genre p{color:#d1c9db}.player{display:flex;justify-content:space-between;align-items:center;padding:30px;border:1px solid var(--cyan);background:#0d1019;box-shadow:0 0 30px #28e7ff15;margin-bottom:25px}.player h2{margin:5px 0;font-size:25px}.player p{margin:0;color:var(--pink)}.equalizer{height:70px;display:flex;gap:5px;align-items:center}.equalizer i{display:block;width:7px;background:var(--pink);height:15px}.equalizer.playing i{animation:beat .7s infinite alternate}.equalizer i:nth-child(2){animation-delay:.1s}.equalizer i:nth-child(3){animation-delay:.2s}.equalizer i:nth-child(4){animation-delay:.3s}.equalizer i:nth-child(5){animation-delay:.15s}.equalizer i:nth-child(6){animation-delay:.25s}@keyframes beat{to{height:65px}}.track{display:grid;grid-template-columns:60px 1fr 55px;align-items:center;border-bottom:1px solid var(--line);padding:18px 10px}.track b{color:#6d637c}.track span strong,.track span small{display:block}.track small{color:var(--muted);font-size:11px}.track button{border:1px solid var(--pink);background:transparent;color:var(--pink);width:38px;height:38px;border-radius:50%;cursor:pointer}.track button:hover{background:var(--pink);color:#100815}.timeline{max-width:950px;margin:auto}.timeline article{display:grid;grid-template-columns:130px 1fr;border-left:2px solid var(--purple);padding:0 0 45px 35px;position:relative}.timeline article:before{content:'';width:12px;height:12px;border-radius:50%;background:var(--pink);position:absolute;left:-7px;top:4px;box-shadow:0 0 18px var(--pink)}.timeline time{font:700 24px Orbitron;color:var(--cyan)}.timeline h2{font-size:23px;margin:0}.timeline p{color:var(--muted)}footer{padding:28px 8vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#70677e;font-size:10px;letter-spacing:1px}
@media(max-width:800px){nav{display:none;position:absolute;top:76px;left:0;right:0;background:#0b0812;padding:15px 8vw;border-bottom:1px solid var(--line);flex-direction:column;gap:0}nav.open{display:flex}nav a{padding:10px}.menu-toggle{display:block}.cassette{opacity:.22;right:-70px}.hero{padding:80px 8vw}.cards.three,.cards.two,.quick-grid{grid-template-columns:1fr}.section{padding:65px 7vw}.page-hero{padding:75px 7vw 35px}.player{align-items:flex-start;gap:20px}.equalizer{display:none}.timeline article{grid-template-columns:85px 1fr}.timeline time{font-size:17px}footer{flex-direction:column;gap:8px}}