:root{
  --bg:#08080f; --bg-soft:#0e0e1a; --panel:rgba(20,20,34,.72);
  --text:#f4f4fb; --muted:#a2a2bd; --line:rgba(255,255,255,.09);
  --violet:#8b5cf6; --cyan:#22d3ee; --pink:#f472b6;
  --grad:linear-gradient(100deg,var(--violet),var(--cyan));
  --radius:20px; --max:1180px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.65);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--text); background:var(--bg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; padding-bottom:104px; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{line-height:1.1; margin:0; letter-spacing:-.02em}
button{font:inherit; color:inherit}

.orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.orbs span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.orbs span:nth-child(1){width:520px;height:520px;background:#5b21b6;top:-200px;left:-120px}
.orbs span:nth-child(2){width:460px;height:460px;background:#0e7490;top:120px;right:-160px;opacity:.38}
.orbs span:nth-child(3){width:520px;height:520px;background:#9d174d;bottom:-260px;left:30%;opacity:.28}

.site-header{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px clamp(20px,5vw,56px);
  background:rgba(8,8,15,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em}
.brand-mark{width:34px; height:34px}
.tag{font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:#0a0a12;
  background:var(--grad); padding:3px 8px; border-radius:999px; font-weight:800}
.site-header nav{display:flex; gap:clamp(14px,2.5vw,30px); font-size:14.5px; color:var(--muted)}
.site-header nav a{padding:6px 2px; border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--text); border-color:var(--cyan)}
@media (max-width:640px){.site-header nav{display:none}}

main{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,56px)}

.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding:clamp(48px,8vw,96px) 0 24px}
.eyebrow{margin:0 0 18px; font-size:12.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--cyan)}
.hero h1{font-size:clamp(34px,5.2vw,62px); font-weight:800; text-wrap:balance}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:22px 0 0; max-width:48ch; color:var(--muted); font-size:clamp(15px,1.6vw,18px)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
  font-weight:650; font-size:15px; border:1px solid transparent; cursor:pointer; transition:transform .18s, box-shadow .18s, background .18s}
.btn svg{width:19px; height:19px}
.btn.primary{background:var(--grad); color:#08080f; box-shadow:0 10px 30px -10px rgba(139,92,246,.8)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(34,211,238,.75)}
.btn.ghost{border-color:var(--line); background:rgba(255,255,255,.03); color:var(--text)}
.btn.ghost:hover{background:rgba(255,255,255,.08); transform:translateY(-2px)}
.stats{display:flex; gap:34px; margin:38px 0 0; padding:0}
.stats div{display:flex; flex-direction:column-reverse}
.stats dt{font-size:26px; font-weight:750}
.stats dd{margin:0; font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}

.hero-visual{position:relative; display:grid; place-items:center; min-height:360px}
.disc{
  width:min(340px,72vw); aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 210deg,#1a1a2e,#2a1f4d,#0e2a33,#1a1a2e);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), 0 30px 70px -30px rgba(139,92,246,.6);
  display:grid; place-items:center; position:relative; animation:spin 26s linear infinite;
}
.disc::before{content:""; position:absolute; inset:14%; border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px 7px)}
.disc::after{content:""; position:absolute; inset:38%; border-radius:50%; background:var(--grad); opacity:.85;
  box-shadow:0 0 40px rgba(34,211,238,.5)}
.disc-label{position:relative; z-index:1; font-size:13px; font-weight:800; letter-spacing:.18em; text-align:center; color:#08080f}
@keyframes spin{to{transform:rotate(360deg)}}
.eq{position:absolute; bottom:6px; right:0; display:flex; gap:5px; align-items:flex-end; height:74px}
.eq i{width:7px; border-radius:4px; background:var(--grad); height:18%; opacity:.85; animation:bar 1.1s ease-in-out infinite alternate; animation-play-state:paused}
body.playing .eq i{animation-play-state:running}
.eq i:nth-child(2n){animation-duration:.9s} .eq i:nth-child(3n){animation-duration:1.35s}
.eq i:nth-child(4n){animation-duration:.75s} .eq i:nth-child(5n){animation-duration:1.2s}
@keyframes bar{from{height:14%}to{height:100%}}

.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:56px 0 24px}
.section-head h2{font-size:clamp(26px,3.4vw,38px)}
.section-head p{margin:0; color:var(--muted); font-size:13.5px; text-transform:uppercase; letter-spacing:.12em}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:20px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .22s, border-color .22s, box-shadow .22s}
.card:hover{transform:translateY(-6px); border-color:rgba(139,92,246,.55); box-shadow:var(--shadow)}
.card.active{border-color:rgba(34,211,238,.7); box-shadow:0 0 0 1px rgba(34,211,238,.35), var(--shadow)}
.cover{position:relative; aspect-ratio:1; overflow:hidden; background:#12121f}
.cover img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.card:hover .cover img{transform:scale(1.06)}
.play-btn{position:absolute; right:12px; bottom:12px; width:46px; height:46px; border-radius:50%;
  border:0; display:grid; place-items:center; cursor:pointer; color:#08080f; background:var(--grad);
  box-shadow:0 8px 24px -6px rgba(0,0,0,.7); opacity:0; transform:translateY(8px); transition:.2s}
.card:hover .play-btn,.card.active .play-btn,.play-btn:focus-visible{opacity:1; transform:none}
.play-btn svg{width:20px; height:20px}
.card-body{padding:14px 16px 16px}
.card-body h3{font-size:16.5px; font-weight:700}
.card-body p{margin:4px 0 0; color:var(--muted); font-size:13px}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.features article{padding:22px; border-radius:var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.025)}
.features h3{font-size:17px; margin-bottom:8px}
.features p{margin:0; color:var(--muted); font-size:14.5px}

footer{margin-top:72px; padding:26px clamp(20px,5vw,56px) 40px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px}
footer p{margin:0}
.footer-note{margin-top:6px; opacity:.7}

.player{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid;
  grid-template-columns:minmax(150px,1fr) auto minmax(200px,1.4fr) auto; align-items:center; gap:18px;
  padding:10px clamp(16px,3vw,32px); background:rgba(12,12,22,.86); backdrop-filter:blur(20px);
  border-top:1px solid var(--line); box-shadow:0 -18px 40px -30px #000;
}
.p-track{display:flex; align-items:center; gap:12px; min-width:0}
.p-track img{width:48px; height:48px; border-radius:10px; object-fit:cover; flex:none}
.p-meta{display:flex; flex-direction:column; min-width:0}
.p-meta strong{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-meta span{font-size:12px; color:var(--muted)}
.p-controls{display:flex; align-items:center; gap:6px}
.p-controls button{width:38px; height:38px; border-radius:50%; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--text); transition:background .18s}
.p-controls button:hover{background:rgba(255,255,255,.08)}
.p-controls svg{width:20px; height:20px}
.play-main{width:46px!important; height:46px!important; background:var(--grad)!important; color:#08080f!important}
.play-main .ic-pause{display:none}
body.playing .play-main .ic-play{display:none}
body.playing .play-main .ic-pause{display:block}
.p-seek{display:flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; font-size:12px; color:var(--muted)}
input[type=range]{-webkit-appearance:none; appearance:none; background:transparent; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:5px; border-radius:99px; background:rgba(255,255,255,.16)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:13px; height:13px; margin-top:-4px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(139,92,246,.45)}
input[type=range]::-moz-range-track{height:5px; border-radius:99px; background:rgba(255,255,255,.16)}
input[type=range]::-moz-range-thumb{width:13px; height:13px; border:0; border-radius:50%; background:#fff}
#seek{flex:1; min-width:90px}
.p-volume{display:flex; align-items:center; gap:8px}
.p-volume button{width:34px; height:34px; border:0; background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center}
.p-volume button svg{width:19px; height:19px}
#volume{width:86px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:28px}
  .hero-visual{min-height:280px; order:-1}
  .player{grid-template-columns:1fr auto; grid-template-areas:"track controls" "seek seek"; row-gap:8px}
  .p-track{grid-area:track} .p-controls{grid-area:controls} .p-seek{grid-area:seek}
  .p-volume{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}