:root{
  --bg:#0a0a0a; --bg2:#111; --card:#161616; --line:#262626;
  --text:#f2f2f0; --muted:#8d8d88; --accent:#c6ff1a;
  --display:"Space Grotesk",Inter,sans-serif; --mono:"Roboto Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:84px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.container{width:min(1200px,92%);margin-inline:auto}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:18px 4%;transition:.3s}
.nav.scrolled{background:rgba(10,10,10,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-block:12px}
.logo{font:700 20px var(--display);letter-spacing:.08em}
.logo span{color:var(--accent);margin:0 2px}
.nav-links{display:flex;gap:32px;align-items:center;font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.nav-links a:not(.btn):hover{color:var(--accent)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger i{position:absolute;left:8px;right:8px;height:2px;background:var(--text);transition:.3s}
.burger i:first-child{top:15px}.burger i:last-child{top:23px}
.burger[aria-expanded=true] i:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:last-child{top:19px;transform:rotate(-45deg)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#000;font:700 14px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:16px 28px;border-radius:999px;transition:.25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px -8px var(--accent)}
.btn-sm{padding:9px 18px;font-size:12px}
.btn-ghost{background:transparent;color:var(--text);border:1px solid #555}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.link-arrow{font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border-bottom:1px solid transparent;transition:.2s}
.link-arrow:hover{border-color:var(--accent)}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:140px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.08);animation:zoom 18s ease-out forwards}
@keyframes zoom{to{transform:scale(1)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.1) 40%,var(--bg) 100%),linear-gradient(90deg,rgba(10,10,10,.8),transparent 70%)}
.hero-inner{position:relative}
.eyebrow{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(1.6)}}
.hero-title{font:700 clamp(64px,13vw,200px)/.88 var(--display);letter-spacing:-.04em;text-transform:uppercase;margin-bottom:36px}
.hero-title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--text)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.scroll-hint{position:absolute;right:4%;bottom:40px;font:500 11px var(--mono);letter-spacing:.3em;writing-mode:vertical-rl;color:var(--muted)}

/* MARQUEE */
.marquee{overflow:hidden;background:var(--accent);color:#000;border-block:1px solid #000;padding:14px 0;transform:rotate(-1deg);margin:-20px -2% 20px;position:relative;z-index:2}
.marquee-track{display:flex;gap:40px;width:max-content;animation:scroll 28s linear infinite;font:700 22px var(--display);white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:clamp(80px,12vw,160px) 0}
.section-alt{background:var(--bg2);border-block:1px solid var(--line)}
.section-head{margin-bottom:60px}
h2{font:700 clamp(40px,7vw,96px)/.95 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.muted{color:var(--muted);margin-top:20px;max-width:42ch}

/* RELEASES */
.release{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.release-cover{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(198,255,26,.25);cursor:pointer}
.release-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.release-cover:hover img{transform:scale(1.05)}
.play-fab{position:absolute;inset:auto 20px 20px auto;width:68px;height:68px;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center;transition:.25s}
.release-cover:hover .play-fab{transform:scale(1.12)}
.release-meta .type{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.release-meta h3{font:700 clamp(44px,6vw,84px)/1 var(--display);text-transform:uppercase;letter-spacing:-.03em;margin:10px 0}
.release-meta .by{font-size:20px;color:var(--muted);margin-bottom:34px}
.release-meta .by b{color:var(--text)}
.stream{display:flex;flex-wrap:wrap;gap:10px}
.stream a{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);padding:12px 20px;border-radius:999px;transition:.2s}
.stream a:hover{border-color:var(--accent);color:var(--accent)}

/* ROSTER */
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.artist{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.3s}
.artist:hover{border-color:var(--accent);transform:translateY(-6px)}
.artist-img{position:relative;aspect-ratio:4/3.2;overflow:hidden}
.artist-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(.6) contrast(1.1);transition:.5s}
.artist:hover .artist-img img{filter:none;transform:scale(1.05)}
.artist-img.empty{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#141414,#141414 12px,#191919 12px,#191919 24px);font:700 120px var(--display);color:var(--line)}
.tag{position:absolute;top:16px;left:16px;background:var(--accent);color:#000;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border-radius:999px}
.artist-body{padding:28px}
.artist-body h3{font:700 36px var(--display);text-transform:uppercase;margin-bottom:10px}
.artist-body p{color:var(--muted);margin-bottom:20px}
.artist-body strong{color:var(--text)}

/* ABOUT */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
.about-text p{font-size:20px;color:#bdbdb7;margin-bottom:40px}
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);padding-top:30px}
.stats b{display:block;font:700 48px var(--display);color:var(--accent)}
.stats span{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

/* FORM */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:start}
.form{display:grid;gap:18px}
.form label{display:grid;gap:8px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.form input,.form textarea{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:14px 16px;color:var(--text);font:400 16px Inter,sans-serif;transition:.2s;resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--accent)}
.form .btn{justify-self:start}
.form-note{color:var(--accent);font-size:14px;min-height:1.4em}

/* FOOTER */
.footer{padding:100px 0 40px}
.footer-mail{display:block;font:700 clamp(28px,6vw,84px)/1 var(--display);letter-spacing:-.03em;margin-bottom:80px;word-break:break-all;transition:.2s}
.footer-mail:hover{color:var(--accent)}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:30px;color:var(--muted);font-size:14px}
.socials{display:flex;gap:22px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.socials a:hover{color:var(--accent)}

/* PLAYER */
.player{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(960px,94%);z-index:45;display:flex;align-items:center;gap:14px;background:rgba(22,22,22,.92);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;padding:10px 18px 10px 10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.player[hidden]{display:none}
.player img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.p-info{display:grid;min-width:90px;line-height:1.3}
.p-info b{font-size:15px}.p-info span{font-size:12px;color:var(--muted)}
.p-btn{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center;flex:none}
.p-time{font:400 12px var(--mono);color:var(--muted);min-width:34px}
#pSeek{flex:1}
.p-vol{width:80px}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--line);border-radius:4px;cursor:pointer;accent-color:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--accent)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:860px){
  .burger{display:block}
  .nav-links{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:28px;font-size:20px;transform:translateX(100%);transition:.4s;z-index:-1}
  .nav-links.open{transform:none}
  .release,.about,.demo{grid-template-columns:1fr}
  .scroll-hint,.p-vol,.p-info span{display:none}
  .player{gap:10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}