:root { --ink:#111318; --muted:#6c7179; --line:#e7e8ea; --lime:#c8ff24; --blue:#1664ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Manrope, sans-serif; }
a { color:inherit; }
.site-header { height:96px; padding:0 max(5vw,24px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand img, footer img { display:block; width:134px; height:auto; }
.chat-link { text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.04em; border-bottom:1px solid; padding-bottom:4px; }
.chat-link span, .cta a span { color:var(--blue); margin-left:5px; }
main { overflow:hidden; }
.hero { position:relative; min-height:610px; padding:110px max(7vw,28px) 90px; background:linear-gradient(115deg,#fff 58%,#f5f6f8 58%); }
.hero:after { content:"26"; position:absolute; right:2vw; top:5px; font-size:min(35vw,500px); line-height:1; font-weight:800; letter-spacing:-.09em; color:transparent; -webkit-text-stroke:2px #e5e7ea; z-index:0; }
.hero>* { position:relative; z-index:1; }
.eyebrow,.kicker { font-family:"DM Mono",monospace; text-transform:uppercase; font-size:12px; letter-spacing:.16em; font-weight:500; }
.eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow span { width:28px; height:3px; background:var(--lime); }
h1 { margin:22px 0 26px; max-width:850px; font-size:clamp(58px,9vw,132px); line-height:.87; letter-spacing:-.07em; }
h1 em { color:var(--blue); font-style:normal; }
.intro { max-width:560px; color:var(--muted); font-size:18px; line-height:1.7; }
.scroll-cue { display:inline-flex; gap:16px; margin-top:35px; text-decoration:none; font-size:13px; font-weight:700; }
.scroll-cue span { color:var(--blue); }
.music { max-width:1180px; margin:auto; padding:105px 28px 130px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:42px; }
.section-heading h2,.cta h2 { margin:5px 0 0; font-size:clamp(44px,7vw,82px); letter-spacing:-.06em; line-height:1; }
.section-heading>p { color:var(--muted); font-size:12px; }.section-heading>p span { color:var(--lime); margin:0 8px; }
.kicker { margin:0; color:var(--muted); }
.featured-track { position:relative; min-height:380px; padding:50px; display:grid; grid-template-columns:1fr auto; align-items:center; color:white; background:var(--ink); overflow:hidden; }
.featured-copy { position:relative; z-index:2; align-self:start; }
.tag { display:inline-block; background:var(--lime); color:var(--ink); padding:7px 10px; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }
.track-number { font:400 11px "DM Mono",monospace; color:#8b9098; }
.featured-copy .track-number { margin-top:58px; }
.track h3 { margin:0; font-size:24px; letter-spacing:-.025em; }.featured-copy h3 { font-size:clamp(42px,6vw,70px); }
.track-note,.track-title p { color:#989da5; font-size:12px; }
.video-link { display:inline-flex; align-items:center; gap:7px; margin-top:7px; color:var(--blue); font:600 11px "DM Mono",monospace; letter-spacing:.03em; text-decoration:none; }
.video-link span { transition:transform .2s; }.video-link:hover span { transform:translate(2px,-2px); }
.video-link--light { margin-top:10px; color:var(--lime); }
.play-button { flex:0 0 auto; width:48px; height:48px; border:0; border-radius:50%; display:grid; place-items:center; background:var(--ink); cursor:pointer; transition:transform .2s,background .2s; }
.play-button:hover { transform:scale(1.07); background:var(--blue); }.play-button--large { position:relative; z-index:2; width:80px; height:80px; background:var(--lime); }.play-button--large:hover { background:white; }
.play-icon { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid white; margin-left:3px; }.play-button--large .play-icon { border-left-color:var(--ink); }
.is-playing .play-icon { width:12px; height:14px; border:0; margin:0; background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%); color:white; }.featured-track.is-playing .play-icon { color:var(--ink); }
.featured-art { position:absolute; right:11%; top:24px; width:330px; height:330px; border:1px solid #35383d; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.featured-art span { color:#23262b; font-size:128px; font-weight:800; letter-spacing:-.09em; }.featured-art i { position:absolute; width:1px; height:100%; background:#292c31; transform:rotate(calc(var(--i)*25deg)); }.featured-art i:nth-of-type(1){--i:1}.featured-art i:nth-of-type(2){--i:2}.featured-art i:nth-of-type(3){--i:3}.featured-art i:nth-of-type(4){--i:4}.featured-art i:nth-of-type(5){--i:5}
.progress-wrap { grid-column:1/-1; align-self:end; display:flex; align-items:center; gap:14px; z-index:3; font:400 10px "DM Mono",monospace; color:#a4a8ae; }
.progress { appearance:none; width:100%; height:2px; background:#464a51; accent-color:var(--lime); cursor:pointer; }.progress::-webkit-slider-thumb { appearance:none; width:9px; height:9px; border-radius:50%; background:var(--lime); }
.new-heading { display:flex; align-items:center; gap:25px; margin:60px 0 16px; }.new-heading div { height:1px; flex:1; background:var(--line); }
.track-row { position:relative; display:flex; align-items:center; gap:24px; min-height:96px; border-bottom:1px solid var(--line); transition:padding .2s; }.track-row:hover { padding-left:8px; }.track-row .track-number { width:20px; }.track-title { flex:1; }.track-title h3 small { font-size:11px; color:var(--blue); font-family:"DM Mono",monospace; text-transform:uppercase; margin-left:10px; }.track-title p { margin:4px 0 0; }.track-row>.duration { font:400 11px "DM Mono",monospace; color:#8b9098; }.track-row .progress { position:absolute; bottom:-1px; left:0; height:2px; opacity:0; }.track-row.is-playing .progress { opacity:1; }
.cta { padding:110px 28px; text-align:center; background:#f5f6f8; }.cta h2 { margin:18px 0 24px; }.cta>p:not(.kicker) { color:var(--muted); }.cta a { display:inline-block; margin-top:22px; padding:17px 24px; background:var(--ink); color:white; text-decoration:none; font-size:13px; font-weight:700; }
footer { display:flex; justify-content:space-between; align-items:center; padding:42px max(5vw,24px); }footer p { color:var(--muted); font-size:11px; }
@media(max-width:700px){.site-header{height:78px}.brand img{width:110px}.hero{min-height:550px;padding-top:90px}.hero:after{top:90px;font-size:60vw}.section-heading>p{display:none}.featured-track{min-height:440px;padding:30px;grid-template-columns:1fr auto}.featured-art{right:-100px;top:70px}.featured-copy .track-number{margin-top:48px}.track-row{gap:14px}.track-row .play-button{width:42px;height:42px}.track-title h3{font-size:18px}.track-title h3 small{display:block;margin:2px 0 0}.music{padding-left:18px;padding-right:18px}footer{flex-direction:column;gap:15px}.cta h2{font-size:52px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}