:root{--ink:#191424;--muted:#776f85;--pink:#ffb4d6;--cream:#fff5d8;--violet:#cbc4ff;--card:rgba(255,255,255,.72)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:"Trebuchet MS","Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 18% 20%,#ffd6ea,transparent 28%),radial-gradient(circle at 80% 8%,#cbc4ff,transparent 28%),linear-gradient(135deg,#fff8ee,#f7edff);overflow-x:hidden}
header{width:min(1120px,calc(100vw - 34px));margin:22px auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid rgba(25,20,36,.12);border-radius:28px;background:rgba(255,255,255,.58);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-weight:900}.brand span{width:44px;height:44px;display:grid;place-items:center;border-radius:16px;background:#171225;color:white}
nav{display:flex;gap:8px;flex-wrap:wrap}nav a,.buttons a{padding:10px 14px;border-radius:999px;border:1px solid rgba(25,20,36,.12);background:white;color:inherit;text-decoration:none}
.hero{width:min(1120px,calc(100vw - 34px));margin:0 auto;min-height:640px;display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}.kicker{text-transform:uppercase;letter-spacing:.22em;color:#8a4b6b;font-weight:900;font-size:12px}h1{margin:0;font-size:clamp(42px,7vw,84px);line-height:.93;letter-spacing:-.07em}.lead{font-size:19px;line-height:1.75;color:var(--muted);max-width:590px}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.buttons a:first-child{background:#171225;color:white}
.player{min-height:420px;padding:30px;border-radius:38px;background:var(--card);box-shadow:0 28px 80px rgba(25,20,36,.14);border:1px solid rgba(25,20,36,.1);animation:float 5s ease-in-out infinite}.disc{width:230px;height:230px;margin:18px auto 34px;border-radius:50%;background:radial-gradient(circle,#171225 0 18%,#ffb4d6 19% 34%,#171225 35% 39%,#cbc4ff 40% 100%);box-shadow:inset 0 0 0 16px rgba(255,255,255,.22);animation:spin 10s linear infinite}.track{display:flex;justify-content:space-between;gap:18px}.track span{color:var(--muted)}.bars{height:72px;margin-top:20px;display:flex;align-items:end;gap:10px}.bars i{width:100%;border-radius:999px;background:#171225;animation:beat 1.2s ease-in-out infinite}.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:70%;animation-delay:.1s}.bars i:nth-child(3){height:45%;animation-delay:.2s}.bars i:nth-child(4){height:88%;animation-delay:.3s}.bars i:nth-child(5){height:55%;animation-delay:.4s}.bars i:nth-child(6){height:35%;animation-delay:.5s}
.cards,.page{width:min(1120px,calc(100vw - 34px));margin:0 auto 58px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cards article,.list{padding:26px;border-radius:28px;background:var(--card);border:1px solid rgba(25,20,36,.1);box-shadow:0 16px 44px rgba(25,20,36,.08)}.cards span{color:#8a4b6b;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:900}.cards p,.list p{color:var(--muted);line-height:1.65}.page{padding-top:48px}.list{display:grid;gap:12px;max-width:760px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-10px) rotate(1deg)}}@keyframes beat{50%{transform:scaleY(.55)}}@media(max-width:820px){header,.hero{grid-template-columns:1fr;flex-direction:column;align-items:flex-start}.hero{min-height:auto;padding:48px 0}.cards{grid-template-columns:1fr}.player{min-height:330px}.disc{width:180px;height:180px}}