:root{
	--bg:#0f1724;
	--card:#0b1220;
	--accent:#7c3aed;
	--accent-2:#4f46e5;
	--muted:#9aa4b2;
	--glass: rgba(255,255,255,0.03);
	--glass-strong: rgba(255,255,255,0.06);
}
*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html,body{height:100%}
body{font-family:Inter,Segoe UI,Roboto,Arial; background:radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.06), transparent 6%), radial-gradient(900px 400px at 90% 90%, rgba(79,70,229,0.04), transparent 8%), linear-gradient(180deg,var(--bg),#071022);color:#e6eef8;line-height:1.6;letter-spacing:0.1px}
.hero, .nav, .card, .mock-player{will-change:transform,opacity}
.logo img{width:52px;height:52px;object-fit:cover;border-radius:10px;vertical-align:middle;margin-right:10px;box-shadow:0 10px 30px rgba(124,58,237,0.18);animation:logoFloat 4s ease-in-out infinite}
.logo .brand{font-weight:700;font-size:1.1rem;vertical-align:middle;display:inline-block;animation:textGlow 3.6s ease-in-out infinite}
.logo.no-logo .brand{transform:none}


body{animation:pageFade .6s ease both}
@keyframes pageFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


@keyframes logoFloat{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(-3deg)}100%{transform:translateY(0) rotate(0deg)}}


@keyframes textGlow{0%{text-shadow:0 0 0 rgba(124,58,237,0)}50%{text-shadow:0 6px 18px rgba(124,58,237,0.25)}100%{text-shadow:0 0 0 rgba(124,58,237,0)}}


.hero-left h1,.lead,.hero-cta,.features-list{opacity:0;transform:translateY(12px);animation:slideInUp .7s ease both}
.hero-left h1{animation-delay:.05s}
.lead{animation-delay:.12s}
.hero-cta{animation-delay:.18s}
.features-list{animation-delay:.24s}
@keyframes slideInUp{to{opacity:1;transform:none}}


.btn-primary{position:relative;overflow:hidden}
.btn-primary:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0));pointer-events:none;mix-blend-mode:overlay}
.btn-primary{box-shadow:0 8px 30px rgba(124,58,237,0.18);transition:transform .18s,box-shadow .18s}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(124,58,237,0.28)}


.mock-player .cover{animation:coverPulse 3s ease-in-out infinite}
@keyframes coverPulse{0%{filter:brightness(1)}50%{filter:brightness(1.06)}100%{filter:brightness(1)}}


.card{transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(2,6,23,0.6),0 6px 18px rgba(124,58,237,0.08)}


.hero-right{position:relative}
.hero-right:before{content:"";position:absolute;inset:-20px -40px -40px -20px;background:radial-gradient(ellipse at 10% 20%, rgba(124,58,237,0.12), transparent 10%),radial-gradient(ellipse at 90% 80%, rgba(79,70,229,0.10), transparent 10%);z-index:-1;border-radius:18px;animation:bgShift 8s linear infinite}
@keyframes bgShift{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}


.container{max-width:1100px;margin:0 auto;padding:28px}


.nav{backdrop-filter: blur(8px);background:linear-gradient(180deg,rgba(8,12,20,0.45),rgba(6,8,14,0.18));border-bottom:1px solid rgba(255,255,255,0.03);position:sticky;top:0;z-index:60}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.menu-toggle{display:none;background:none;border:0;color:var(--muted);font-size:1.2rem}
.nav-links{list-style:none;display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;transition:all .18s}
.nav-links a:hover{color:#fff;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));transform:translateY(-2px)}
.btn-invite{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#02262b;padding:10px 14px;border-radius:12px;font-weight:700;box-shadow:0 12px 40px rgba(78,225,255,0.12), inset 0 -6px 18px rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.06)}
:root{
	--bg:#071026;
	--card:rgba(6,8,20,0.45);
	--accent:#4EE1FF; 
	--accent-2:#7DF9FF; 
	--accent-3:#9B8CFF; 
	--muted:rgba(190,210,220,0.72);
	--glass: rgba(255,255,255,0.04);
	--glass-strong: rgba(255,255,255,0.08);
	--neon: rgba(78,225,255,0.12);
}

body{font-family:Inter,Segoe UI,Roboto,Arial; background:
	radial-gradient(1000px 480px at 8% 12%, rgba(78,225,255,0.03), transparent 8%),
	radial-gradient(800px 380px at 92% 88%, rgba(155,140,255,0.03), transparent 8%),
	linear-gradient(180deg,var(--bg),#020517);
	color:rgba(230,238,248,0.98);line-height:1.6;letter-spacing:0.12px}

.hero{padding:72px 0}
.logo img{width:52px;height:52px;object-fit:cover;border-radius:12px;vertical-align:middle;margin-right:10px;box-shadow:0 10px 40px rgba(78,225,255,0.08);animation:logoFloat 4s ease-in-out infinite}
.logo .brand{font-weight:800;font-size:1.12rem;vertical-align:middle;display:inline-block;animation:textGlow 3.6s ease-in-out infinite}
.hero-inner{display:flex;gap:36px;align-items:center}
@keyframes textGlow{0%{text-shadow:0 0 0 rgba(78,225,255,0)}50%{text-shadow:0 10px 28px rgba(78,225,255,0.12)}100%{text-shadow:0 0 0 rgba(78,225,255,0)}}
.hero-left{flex:1}
.hero-right{width:380px}

.readable{color:rgba(230,238,248,0.98);text-shadow:0 1px 0 rgba(0,0,0,0.6)}
.lead.readable{color:rgba(190,210,220,0.95);text-shadow:none}
.meta .title.readable{color:#eafcff}
.meta .artist.readable{color:rgba(200,220,230,0.8)}


@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes floatSlow{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes neonPulse{0%{filter:drop-shadow(0 0 0 rgba(78,225,255,0))}50%{filter:drop-shadow(0 10px 30px rgba(78,225,255,0.12))}100%{filter:drop-shadow(0 0 0 rgba(78,225,255,0))}}


.hero-left h1{animation:fadeUp .9s cubic-bezier(.2,.9,.2,1) both}
.lead{animation:fadeUp 1.05s .08s cubic-bezier(.2,.9,.2,1) both}
.mock-player{animation:fadeUp 1s .12s both}
.card{animation:fadeUp .9s .14s both}
.logo img{animation:floatSlow 5s ease-in-out infinite}
.logo .brand{animation:neonPulse 4s ease-in-out infinite}


a:focus,button:focus,input:focus{outline:2px solid rgba(125,230,255,0.12);outline-offset:3px}


h1,h2,h3,h4{color:#eafcff}
h1{font-weight:800}


.note, .meta .artist, .footer-inner{color:rgba(180,200,215,0.78)}
.btn-primary{box-shadow:0 12px 44px rgba(78,225,255,0.12), inset 0 -6px 18px rgba(0,0,0,0.08);transition:transform .14s,box-shadow .14s;border:1px solid rgba(255,255,255,0.06);font-weight:700}
.lead{color:var(--muted);margin-top:12px;max-width:52ch}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(78,225,255,0.12),0 6px 18px rgba(0,0,0,0.6)}
.btn-primary:after{content:"";position:absolute;inset:-1px;border-radius:12px;padding:1px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);pointer-events:none;z-index:0}
.btn{display:inline-block;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#ffffff !important;padding:14px 20px;border-radius:14px;position:relative;z-index:5}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 64px rgba(78,225,255,0.14), inset 0 -8px 24px rgba(0,0,0,0.12)}


.hero-cta{display:flex;gap:12px;align-items:center}


.nav-links a{color:rgba(225,245,250,0.92);padding:8px 12px}
.nav-links a:hover{color:#021216;background:linear-gradient(90deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));}


.btn-outline{border:1px solid rgba(255,255,255,0.08);padding:10px 16px;border-radius:12px;color:rgba(230,240,246,0.9);background:transparent}
.hero-right:before{content:"";position:absolute;inset:-24px -44px -44px -24px;background:radial-gradient(ellipse at 8% 18%, rgba(78,225,255,0.06), transparent 12%),radial-gradient(ellipse at 92% 82%, rgba(155,140,255,0.05), transparent 12%);z-index:-1;border-radius:18px;animation:bgShift 10s linear infinite}

.hero-right:after{content:"";position:absolute;right:6px;top:-12px;width:140%;height:140%;z-index:-1;pointer-events:none;filter:blur(10px);opacity:0.9;clip-path:polygon(0% 10%,12% 0%,28% 6%,44% 0%,60% 14%,74% 6%,88% 18%,100% 12%,100% 100%,0% 100%);background:linear-gradient(120deg,rgba(127,230,255,0.04),rgba(155,140,255,0.03));transform:rotate(-6deg)}
.btn-outline{border:1px solid rgba(255,255,255,0.06);padding:10px 16px;border-radius:10px;color:var(--muted);margin-left:10px}
.features-list{margin-top:14px;display:flex;gap:12px;color:var(--muted);list-style:none}
.mock-player{background:linear-gradient(180deg, rgba(10,12,18,0.35), rgba(6,8,12,0.25));padding:12px;border-radius:12px;display:flex;gap:12px;align-items:center;box-shadow:0 30px 80px rgba(0,0,0,0.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.03)}
.mock-player .cover{width:56px;height:56px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.6);object-fit:cover;border:1px solid rgba(255,255,255,0.04)}
.mock-player .meta{min-width:0;flex:1}
.meta .title{font-weight:700;font-size:1rem;color:#eafcff}
.meta .artist{color:var(--muted);font-size:0.85rem;margin-top:4px}

.player-controls{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.controls{display:flex;align-items:center;gap:6px;justify-content:center}
.controls .icon{background:transparent;border:0;color:var(--muted);font-size:1rem;padding:6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.controls .icon svg{display:block;width:18px;height:18px;fill:currentColor}
.controls .play{font-size:1.6rem;color:#05202a;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:40px;height:40px;padding:0;border-radius:999px;box-shadow:0 8px 20px rgba(78,225,255,0.10);border:1px solid rgba(255,255,255,0.04);display:inline-grid;place-items:center}
.controls .play svg{width:14px;height:14px}
.controls .play .pause-icon{display:none}
.controls .play.playing .play-icon{display:none}
.controls .play.playing .pause-icon{display:block}
.extra-icons{display:none}
.time{color:var(--muted);font-size:0.85rem;margin-left:0;margin-top:6px;text-align:center}
.progress-wrap{width:100%;height:6px;background:rgba(255,255,255,0.02);border-radius:999px;margin-top:12px;cursor:pointer;overflow:hidden}
.progress{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;transition:width .12s linear}
.features-list li{background:rgba(255,255,255,0.02);padding:8px 12px;border-radius:999px}
.card{transition:transform .28s,box-shadow .28s,background .28s}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.006));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);backdrop-filter:blur(6px)}
.mock-player{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:14px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.card:hover{transform:translateY(-10px);box-shadow:0 26px 60px rgba(2,6,23,0.65),0 8px 28px rgba(78,225,255,0.06)}
.card:before{content:"";position:absolute;pointer-events:none;inset:0;border-radius:12px;background:linear-gradient(120deg,rgba(255,255,255,0.02),transparent 20%);mix-blend-mode:overlay}
.mock-player .cover{width:84px;height:84px;background:linear-gradient(135deg,#ff7bac,#7c3aed);border-radius:12px;box-shadow:0 12px 40px rgba(124,58,237,0.12)}
.mock-player img.cover{width:84px;height:84px;object-fit:cover;border-radius:12px;display:block}
.hero-left h1{font-size:2.4rem;line-height:1.02;letter-spacing:-0.6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.meta .title{font-weight:700}
.features-list li{background:linear-gradient(180deg,rgba(255,255,255,0.012),rgba(255,255,255,0.006));padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.02)}
.meta .artist{color:var(--muted);font-size:0.9rem;margin-top:6px}
.command-card{background:linear-gradient(180deg,rgba(255,255,255,0.012),rgba(255,255,255,0.006));padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);backdrop-filter:blur(4px)}
.controls{margin-top:10px}
.controls{display:flex;align-items:center;gap:10px}
.time{color:var(--muted);font-size:0.9rem;margin-left:6px}
.progress-wrap{width:100%;height:8px;background:rgba(255,255,255,0.02);border-radius:999px;margin-top:10px;cursor:pointer;overflow:hidden}
.progress{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;transition:width .12s linear}


.small-controls{display:none}
.toast{position:fixed;right:20px;bottom:20px;background:linear-gradient(180deg,rgba(5,7,12,0.9),rgba(2,4,8,0.9));padding:12px 16px;border-radius:12px;color:#e6f9ff;opacity:0;transform:translateY(12px);box-shadow:0 18px 56px rgba(2,6,23,0.75);border:1px solid rgba(78,225,255,0.06);transition:all .28s cubic-bezier(.2,.9,.2,1);z-index:100}
.icon{background:none;border:0;color:var(--muted);font-size:1rem;margin-right:6px}


.hero-inner{position:relative;padding:26px;border-radius:18px}
.hero-inner:before{content:"";position:absolute;inset:-22px -26px -26px -26px;background:linear-gradient(180deg,rgba(255,255,255,0.018),rgba(255,255,255,0.006));backdrop-filter:blur(14px);border-radius:22px;box-shadow:0 40px 90px rgba(4,8,20,0.7),0 6px 20px rgba(78,225,255,0.03);border:1px solid rgba(255,255,255,0.04);z-index:-2}
.hero-inner:after{content:"";position:absolute;inset:-22px -26px -26px -26px;background:linear-gradient(120deg,rgba(127,230,255,0.02),transparent 25%);border-radius:22px;mix-blend-mode:overlay;pointer-events:none;z-index:-1}


.nav{backdrop-filter: blur(14px);background:linear-gradient(180deg,rgba(4,6,12,0.28),rgba(2,3,6,0.18));border-radius:14px;margin:12px 18px;position:sticky;top:8px;z-index:60;border:1px solid rgba(255,255,255,0.04);box-shadow:0 14px 40px rgba(0,0,0,0.6),0 6px 24px rgba(78,225,255,0.02)}


.mock-player{box-shadow:0 20px 60px rgba(2,6,23,0.75);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.035);position:relative;overflow:hidden}
.mock-player:after{content:"";position:absolute;right:-40%;top:-30%;width:220px;height:220px;background:radial-gradient(circle at 30% 30%, rgba(78,225,255,0.06), transparent 30%);filter:blur(18px);pointer-events:none}
.mock-player .cover{box-shadow:0 18px 50px rgba(78,225,255,0.06);border:1px solid rgba(255,255,255,0.03)}


.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.006));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(10px);overflow:hidden}
.card:before{content:"";position:absolute;left:-40%;top:-10%;width:120%;height:140%;background:linear-gradient(120deg,rgba(127,230,255,0.02),rgba(155,140,255,0.01));transform:skewY(-6deg);pointer-events:none}
.card .card-inner{position:relative;z-index:2}
.card:hover{transform:translateY(-10px);box-shadow:0 26px 60px rgba(2,6,23,0.65),0 8px 28px rgba(78,225,255,0.06)}


.search-pill{display:block;background:linear-gradient(180deg,rgba(255,255,255,0.012),rgba(255,255,255,0.006));padding:16px 18px;border-radius:999px;border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(12px);box-shadow:0 10px 40px rgba(2,6,23,0.6),inset 0 2px 8px rgba(255,255,255,0.02)}
.search-pill input{background:transparent;border:0;color:var(--muted);width:100%;outline:none;font-size:1rem}


.features-list li{box-shadow:inset 0 -6px 18px rgba(0,0,0,0.45)}


.site-footer{background:linear-gradient(180deg,transparent,rgba(0,0,0,0.14));border-top:1px solid rgba(255,255,255,0.03)}


.toast{border:1px solid rgba(78,225,255,0.06);box-shadow:0 20px 60px rgba(0,0,0,0.7)}


.section{padding:48px 0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}


.mock-player{display:flex;align-items:center;gap:16px;position:relative;padding:18px}
.mock-player .cover{width:84px;height:84px;flex:0 0 84px;border-radius:12px}
.mock-player .meta{flex:1;min-width:0;padding-right:80px}
.player-controls{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:120px}
.player-controls .controls{position:relative;width:0;height:0}
.controls .play{position:absolute;right:18px;left:auto;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(255,255,255,0.06);box-shadow:0 14px 34px rgba(78,225,255,0.12);background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:10}
.controls .play svg{width:14px;height:14px}
.controls .play.playing .play-icon{display:none}
.controls .play.playing .pause-icon{display:block}
.player-controls .time{order:2;text-align:right}
.progress-wrap{width:100%;margin-top:12px}
.mock-player .progress-wrap{margin-left:0;margin-right:0}


@media(max-width:520px){
	.mock-player{flex-direction:column;align-items:center}
	.controls .play{position:static;transform:none;left:auto;top:auto;margin-top:-10px}
	.player-controls{align-items:center}
	.player-controls .time{text-align:center}
}

.command-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.command-card{background:rgba(255,255,255,0.02);padding:14px;border-radius:8px}
.command-card h4{margin-bottom:6px}
.note{margin-top:12px;color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:24px}
.footer-inner{display:flex;justify-content:space-between;color:var(--muted);align-items:center}

.toast{position:fixed;right:20px;bottom:20px;background:linear-gradient(180deg,#0b1220,#071022);padding:12px 16px;border-radius:12px;color:#fff;opacity:0;transform:translateY(12px);box-shadow:0 12px 36px rgba(2,6,23,0.6);border:1px solid rgba(124,58,237,0.06);transition:all .28s cubic-bezier(.2,.9,.2,1);z-index:100}
.toast.show{opacity:1;transform:translateY(0)}


@media(max-width:900px){
	.hero-inner{flex-direction:column;align-items:flex-start}
	.hero-right{width:100%}
	.grid{grid-template-columns:repeat(2,1fr)}
	.nav-links{display:none;position:absolute;right:12px;top:64px;background:var(--card);padding:12px;border-radius:8px;flex-direction:column}
	.menu-toggle{display:inline-block}
}
@media(max-width:520px){
	.grid{grid-template-columns:1fr}
	.command-grid{grid-template-columns:1fr}
	.features-list{flex-direction:column}
}


.hero-left{position:relative;z-index:3}
.hero-left h1{
	
	background: linear-gradient(90deg,var(--accent-3, var(--accent)),var(--accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: rgba(230,238,248,0.96);
	text-shadow: 0 6px 22px rgba(2,6,10,0.6), 0 1px 0 rgba(0,0,0,0.6);
	filter: none;
}
.hero-left .lead{color:rgba(200,220,230,0.92);z-index:3}


@media(max-width:900px){
	.hero-left h1{color:rgba(180,245,255,0.95);-webkit-text-fill-color:transparent}
}