:root{
  --navy:#061a30; --blue:#0b3c68; --electric:#218cf2; --cream:#f3ecd5;
  --text:#f7f9fc; --muted:#aebfd1; --card:rgba(7,30,53,.78);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);
  background:
    radial-gradient(circle at 15% 10%,rgba(33,140,242,.20),transparent 28%),
    radial-gradient(circle at 85% 40%,rgba(10,83,142,.25),transparent 32%),
    linear-gradient(135deg,#03101f 0%,#061a30 45%,#02101e 100%);
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.26;
  background-image:linear-gradient(rgba(33,140,242,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(33,140,242,.08) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent 78%);
}
#preloader{
  position:fixed;z-index:9999;inset:0;background:#020e1a;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;transition:opacity .65s ease,visibility .65s ease;
}
body.loaded #preloader{opacity:0;visibility:hidden}
.loader-ring{width:170px;height:170px;border-radius:50%;padding:8px;display:grid;place-items:center;
  background:conic-gradient(var(--electric),var(--cream),var(--electric));animation:spin 1.5s linear infinite;
  box-shadow:0 0 45px rgba(33,140,242,.35)}
.loader-ring img{width:100%;height:100%;border-radius:50%;background:#061a30;animation:counterspin 1.5s linear infinite}
.loader-bars{display:flex;gap:5px;height:28px;align-items:center}.loader-bars span{width:5px;border-radius:8px;background:var(--cream);animation:eq .8s ease-in-out infinite}
.loader-bars span:nth-child(2){animation-delay:.1s}.loader-bars span:nth-child(3){animation-delay:.2s}.loader-bars span:nth-child(4){animation-delay:.3s}.loader-bars span:nth-child(5){animation-delay:.4s}
#preloader p{font-size:12px;letter-spacing:2px;color:var(--muted)}#preloader strong{color:var(--cream)}
.hero{position:relative;min-height:56vh;display:grid;place-items:center;padding:70px 22px 50px;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--electric),var(--cream),var(--electric),transparent)}
.hero-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:58px;max-width:1100px;width:100%}
.logo{width:min(360px,58vw);filter:drop-shadow(0 15px 30px rgba(0,0,0,.45))}
.hero-copy{max-width:650px}.eyebrow,.mini{display:block;color:var(--electric);font-weight:800;letter-spacing:3px;font-size:13px}
h1{font-size:clamp(43px,7vw,84px);line-height:.95;letter-spacing:2px;margin:12px 0 18px;color:var(--cream)}
h1 b{color:#fff}.hero-copy p{font-size:clamp(18px,2.2vw,25px);line-height:1.5;color:var(--muted)}
.glow{position:absolute;border-radius:50%;filter:blur(2px);border:1px solid rgba(33,140,242,.22)}
.glow-1{width:600px;height:600px;left:-330px;top:-220px}.glow-2{width:700px;height:700px;right:-390px;bottom:-470px}
main{max-width:1080px;margin:auto;padding:40px 20px 70px}.live-section,.social-section{text-align:center}
.section-title{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:20px}.section-title h2,h2{font-size:clamp(28px,4vw,42px);margin-top:5px;color:#fff}.live-dot{width:12px;height:12px;background:#ff3b3b;border-radius:50%;box-shadow:0 0 16px #ff3b3b;animation:pulse 1.2s infinite}
.player-card{margin:0 auto;max-width:900px;padding:15px;border:1px solid rgba(126,183,232,.25);border-radius:22px;background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.35);backdrop-filter:blur(12px)}
.equalizer{height:28px;display:flex;justify-content:center;align-items:center;gap:4px;margin-bottom:6px}.equalizer i{display:block;width:4px;border-radius:4px;background:var(--electric);animation:eq .75s ease-in-out infinite}.equalizer i:nth-child(2n){animation-delay:.12s}.equalizer i:nth-child(3n){animation-delay:.25s}.equalizer i:nth-child(4n){animation-delay:.38s}
.equalizer i:nth-child(1),.equalizer i:nth-child(7){height:12px}.equalizer i:nth-child(2),.equalizer i:nth-child(9){height:22px}.equalizer i:nth-child(3),.equalizer i:nth-child(8){height:16px}.equalizer i:nth-child(4),.equalizer i:nth-child(11){height:26px}.equalizer i:nth-child(5),.equalizer i:nth-child(10){height:19px}.equalizer i:nth-child(6),.equalizer i:nth-child(12){height:11px}
.app-section{margin:60px 0}.app-banner{position:relative;display:block;border-radius:24px;overflow:hidden;border:1px solid rgba(33,140,242,.45);box-shadow:0 20px 55px rgba(0,0,0,.4);transition:transform .3s ease,box-shadow .3s ease}.app-banner:hover{transform:translateY(-4px);box-shadow:0 25px 70px rgba(33,140,242,.18)}.app-banner img{display:block;width:100%;height:auto}.open-badge{position:absolute;right:20px;bottom:18px;padding:11px 17px;border-radius:999px;background:#218cf2;color:white;font-weight:900;font-size:12px;letter-spacing:1px;box-shadow:0 7px 22px rgba(0,0,0,.35)}
.social-section{padding-top:10px}.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:25px}.social{text-decoration:none;color:#fff;padding:24px 15px;border-radius:20px;background:rgba(6,28,49,.8);border:1px solid rgba(126,183,232,.2);display:grid;justify-items:center;gap:8px;transition:.25s}.social:hover{transform:translateY(-5px);border-color:rgba(33,140,242,.65);background:rgba(10,45,77,.9)}.social-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#123b60;font-size:25px;font-weight:900}.social span:nth-child(2){font-size:18px;font-weight:800}.social small{color:var(--muted)}footer{border-top:1px solid rgba(126,183,232,.18);display:flex;justify-content:center;align-items:center;gap:13px;padding:25px 20px 30px;text-align:left;color:var(--muted);background:rgba(1,12,23,.65)}footer img{width:48px;height:48px;border-radius:50%}footer strong{color:var(--cream);letter-spacing:1px}footer span{font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes counterspin{to{transform:rotate(-360deg)}}@keyframes eq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.15)}}@keyframes pulse{50%{transform:scale(1.35);opacity:.65}}
@media(max-width:760px){.hero{min-height:auto;padding-top:55px}.hero-inner{flex-direction:column;gap:25px;text-align:center}.logo{width:250px}.hero-copy{max-width:620px}.social-grid{grid-template-columns:1fr}.app-section{margin:42px 0}.open-badge{position:static;display:block;text-align:center;border-radius:0;padding:14px}.player-card{padding:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}