:root{--bg:#090912;--panel:#111122;--panel2:#17172b;--text:#f7f4ff;--muted:#a8a5c4;--p:#8b5cf6;--pink:#ec4899;--cyan:#38bdf8;--line:#262641}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% -10%,#21163c 0,#090912 42%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
a{color:inherit;text-decoration:none}.container{width:min(1180px,92%);margin:auto}
header{position:sticky;top:0;z-index:50;background:rgba(9,9,18,.84);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;gap:24px}.brand img{width:190px;display:block}.navlinks{display:flex;gap:18px;margin-left:auto}.navlinks a{color:#c8c5df;font-weight:650}.navlinks a:hover{color:#fff}.search{width:220px;background:#151529;border:1px solid var(--line);border-radius:999px;padding:11px 15px;color:#fff;outline:0}
.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;background:linear-gradient(90deg,var(--p),var(--pink));color:#fff;box-shadow:0 10px 28px rgba(139,92,246,.22)}.btn.secondary{background:#1a1a30;border:1px solid var(--line);box-shadow:none}
.hero{min-height:590px;display:grid;align-items:center;background:linear-gradient(90deg,rgba(9,9,18,.98) 0%,rgba(9,9,18,.68) 48%,rgba(9,9,18,.22) 100%),url('../images/hero.jpg') center/cover;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(48px,7vw,86px);line-height:.95;margin:20px 0 18px;letter-spacing:-4px}.hero p{max-width:620px;color:#c9c5df;font-size:19px;line-height:1.7}.tag{display:inline-flex;padding:8px 13px;border:1px solid #4c3d70;background:#1b1530;border-radius:999px;color:#d9ccff;font-weight:800;font-size:13px}
.actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
section{padding:76px 0}.sectionhead{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.sectionhead h2{font-size:32px;margin:0}.sectionhead p{color:var(--muted);margin:7px 0 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:linear-gradient(180deg,#16162a,#10101e);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s;box-shadow:0 16px 50px rgba(0,0,0,.18)}.card:hover{transform:translateY(-5px);border-color:#4d3d78}.cover{aspect-ratio:16/10;background-size:cover;background-position:center}.cardbody{padding:18px}.cardbody h3{margin:0 0 7px;font-size:20px}.muted{color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{padding:11px 15px;border:1px solid var(--line);background:#121225;border-radius:999px;color:#cfcbe6}.chip:hover{border-color:#6b4ba7}
.player{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(12,12,25,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:12px}.playerin{display:flex;align-items:center;gap:14px}.nowcover{width:48px;height:48px;border-radius:9px;object-fit:cover}.track{min-width:170px}.track b{display:block}.track span{color:var(--muted);font-size:13px}.controls{display:flex;gap:8px}.icon{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#18182c;color:#fff;cursor:pointer}.play{background:linear-gradient(90deg,var(--p),var(--pink));border:0}.progress{flex:1}.progress input{width:100%}input[type=range]{accent-color:#a855f7}.volume{width:120px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:22px;border:1px solid var(--line);background:#101020;border-radius:16px}.stat strong{font-size:31px;display:block}.stat span{color:var(--muted)}
.newsletter{padding:34px;border:1px solid #392f55;background:linear-gradient(110deg,#17112c,#121227);border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.newsletter form{display:flex;gap:8px}.newsletter input{padding:13px 16px;border-radius:11px;border:1px solid var(--line);background:#0d0d19;color:#fff;min-width:260px}
footer{border-top:1px solid var(--line);padding:45px 0 120px;color:var(--muted)}.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.social{display:flex;gap:10px}.social a{padding:9px 12px;border:1px solid var(--line);border-radius:10px}
.mobile{display:none}@media(max-width:850px){.navlinks,.search{display:none}.mobile{display:block;margin-left:auto}.grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.hero{min-height:540px}.newsletter{display:block}.newsletter form{margin-top:20px}}@media(max-width:560px){.grid{grid-template-columns:1fr}.hero h1{font-size:54px}.stats{grid-template-columns:1fr 1fr}.volume{display:none}.track{min-width:110px}.newsletter input{min-width:0;width:100%}.newsletter form{display:block}.newsletter .btn{margin-top:8px;width:100%}}