@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&display=swap);:root{--bg-dark:#0f172a;--bg-gradient:linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);--primary:#6366f1;--accent-1:#ef4444;--accent-2:#06b6d4;--accent-3:#d946ef;--accent-4:#f59e0b;--text-light:#f8fafc;--text-dim:#94a3b8;--glass:rgba(255, 255, 255, 0.05);--border:rgba(255, 255, 255, 0.1);--ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--duration-fast:0.2s;--duration-base:0.4s;--duration-slow:0.7s;--duration-xslow:1.2s}*,::after,::before{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background-color:var(--bg-dark);height:100%;scroll-behavior:smooth}#loading-screen{position:fixed;inset:0;background:var(--bg-dark);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;transition:opacity .6s,visibility .6s}#loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-logo{font-family:Outfit,sans-serif;font-size:2rem;font-weight:900;color:#fff;letter-spacing:3px;text-transform:uppercase;display:flex;align-items:center;gap:12px;animation:.6s forwards loadLogoFade;opacity:0;transform:translateY(10px)}.loader-logo i{background:linear-gradient(45deg,var(--accent-2),var(--accent-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:2s ease-in-out infinite loaderIconSpin}.loader-bars{display:flex;align-items:flex-end;gap:5px;height:40px}.loader-bar{width:6px;border-radius:3px;animation:1s ease-in-out infinite loaderBarBounce}.loader-bar:first-child{background:var(--accent-1);animation-delay:0s;height:60%}.loader-bar:nth-child(2){background:var(--accent-2);animation-delay:.1s;height:80%}.loader-bar:nth-child(3){background:var(--primary);animation-delay:.2s;height:100%}.loader-bar:nth-child(4){background:var(--accent-3);animation-delay:.3s;height:80%}.loader-bar:nth-child(5){background:var(--accent-4);animation-delay:.4s;height:60%}.loader-text{font-family:Outfit,sans-serif;font-size:.85rem;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;animation:.6s .3s forwards loadLogoFade;opacity:0}@keyframes loadLogoFade{to{opacity:1;transform:translateY(0)}}@keyframes loaderIconSpin{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}@keyframes loaderBarBounce{0%,100%{transform:scaleY(.5);opacity:.6}50%{transform:scaleY(1);opacity:1}}.cursor-glow{position:fixed;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.08) 0,transparent 70%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}body{background:var(--bg-gradient);background-attachment:fixed;background-size:cover;color:var(--text-light);min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;font-family:Outfit,sans-serif;position:relative}.bg-circle{position:fixed;width:600px;height:600px;filter:blur(120px);border-radius:50%;opacity:.15;z-index:0;pointer-events:none}.bg-circle-1{top:-200px;left:-200px;background:var(--accent-3);animation:10s infinite alternate blobPulse}.bg-circle-2{bottom:-200px;right:-200px;background:var(--primary);animation:10s infinite alternate-reverse blobPulse}#particles-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4}nav{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 5%;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(15,23,42,.7);position:sticky;top:0;z-index:999;border-bottom:1px solid var(--border);animation:navSlideDown var(--duration-slow) var(--ease-out-expo) both;animation-delay:.1s}@keyframes navSlideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}nav.scrolled{padding:.9rem 5%;background:rgba(15,23,42,.92);transition:padding .3s,background .3s}.logo{font-size:1.5rem;font-weight:900;letter-spacing:1px;color:#fff;display:flex;align-items:center;gap:10px;text-decoration:none;z-index:1001;transition:transform var(--duration-fast) var(--ease-spring)}.logo:hover{transform:scale(1.05)}.logo i{background:linear-gradient(45deg,var(--accent-2),var(--accent-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:transform .4s var(--ease-spring)}.logo:hover i{transform:rotate(20deg) scale(1.15)}.nav-links{display:flex;gap:2rem;list-style:none}.nav-links li{position:relative}.nav-links a{text-decoration:none;color:var(--text-dim);font-weight:500;font-size:.9rem;transition:color var(--duration-fast) ease;text-transform:uppercase;letter-spacing:1px;padding-bottom:3px;position:relative}.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:linear-gradient(90deg,var(--accent-2),var(--accent-3));border-radius:2px;transition:width .3s var(--ease-out-expo)}.nav-links a:hover{color:var(--text-light)}.nav-links a:hover::after{width:100%}.menu-toggle{display:none;font-size:1.5rem;cursor:pointer;color:var(--text-light);z-index:1001;transition:transform .3s var(--ease-spring)}.menu-toggle:hover{transform:scale(1.1)}.hero{flex:1;display:flex;align-items:center;justify-content:center;padding:4rem 5%;gap:4rem;width:100%;max-width:1400px;margin:0 auto;position:relative;z-index:1}.hero-visual{flex:1;display:flex;justify-content:center;align-items:center;animation:heroFadeUp var(--duration-xslow) var(--ease-out-expo) both;animation-delay:.6s}.mascot-container{width:320px;height:320px;background:var(--glass);border:1px solid var(--border);border-radius:40px;display:flex;justify-content:center;align-items:center;animation:6s ease-in-out infinite float;box-shadow:0 20px 50px rgba(0,0,0,.3);position:relative;backdrop-filter:blur(5px);cursor:pointer;transition:box-shadow .4s ease,border-color .4s ease,transform .4s var(--ease-spring)}.mascot-container:hover{box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 40px rgba(99,102,241,.25),inset 0 0 30px rgba(99,102,241,.05);border-color:rgba(99,102,241,.4);animation-play-state:paused}.mascot-img{width:65%;height:65%;object-fit:contain;border-radius:30%;filter:drop-shadow(0 0 30px rgba(99, 102, 241, .4));transition:transform .5s var(--ease-spring),filter .5s ease}.mascot-container:hover .mascot-img{transform:scale(1.08) rotate(5deg);filter:drop-shadow(0 0 45px rgba(99, 102, 241, .7))}.mascot-badge{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(8px);transition:transform .4s var(--ease-spring),box-shadow .4s ease}.mascot-badge:hover{transform:scale(1.25)!important;box-shadow:0 8px 25px rgba(0,0,0,.4)}.mascot-badge-music{top:-22px;right:-22px;font-size:1.4rem;color:#fff;animation:4s ease-in-out infinite reverse float}.mascot-badge-sliders{bottom:-22px;left:-22px;font-size:1.2rem;color:var(--accent-2);animation:5s ease-in-out infinite float}.hero-content{flex:1;text-align:left}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-2);margin-bottom:1.2rem;animation:heroFadeUp var(--duration-xslow) var(--ease-out-expo) both;animation-delay:.5s}.hero-badge i{font-size:.7rem;animation:2s ease-in-out infinite ping}.hero-title{font-size:4.5rem;font-weight:900;line-height:1.05;margin-bottom:1.2rem;text-transform:uppercase;background:linear-gradient(to right,#fff 40%,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:heroFadeUp var(--duration-xslow) var(--ease-out-expo) both;animation-delay:.65s}.title-cursor{display:inline-block;width:3px;height:.9em;background:var(--accent-2);margin-left:4px;border-radius:2px;vertical-align:middle;animation:1s step-end infinite blink}.hero-subtitle{font-size:1.15rem;color:var(--text-dim);margin-bottom:2.5rem;max-width:550px;line-height:1.7;animation:heroFadeUp var(--duration-xslow) var(--ease-out-expo) both;animation-delay:.8s}.platform-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2.5rem;animation:heroFadeUp var(--duration-xslow) var(--ease-out-expo) both;animation-delay:.9s}.chip{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;background:var(--glass);border:1px solid var(--border);font-size:.78rem;font-weight:600;color:var(--text-dim);backdrop-filter:blur(4px);transition:.25s;cursor:default}.chip:hover{background:rgba(255,255,255,.1);color:var(--text-light);transform:translateY(-2px);border-color:rgba(255,255,255,.2)}.chip i{font-size:.9rem}.chip-spotify{color:#1db954;border-color:rgba(29,185,84,.2)}.chip-spotify:hover{background:rgba(29,185,84,.1);border-color:rgba(29,185,84,.4)}.chip-yt{color:red;border-color:rgba(255,0,0,.2)}.chip-yt:hover{background:rgba(255,0,0,.1);border-color:rgba(255,0,0,.4)}.chip-apple{color:#fc3c44;border-color:rgba(252,60,68,.2)}.chip-apple:hover{background:rgba(252,60,68,.1);border-color:rgba(252,60,68,.4)}.chip-sc{color:#f50;border-color:rgba(255,85,0,.2)}.chip-sc:hover{background:rgba(255,85,0,.1);border-color:rgba(255,85,0,.4)}.chip-deezer{color:#ef60a3;border-color:rgba(239,96,163,.2)}.chip-deezer:hover{background:rgba(239,96,163,.1);border-color:rgba(239,96,163,.4)}.button-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:450px;animation:heroFadeUp var(--duration-xslow) var(--ease-out-expo) both;animation-delay:1s}.btn{padding:1rem 1.25rem;border-radius:12px;text-decoration:none;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;text-transform:uppercase;font-size:.85rem;letter-spacing:.5px;position:relative;overflow:hidden;cursor:pointer;transition:transform .3s var(--ease-spring),box-shadow .3s ease,filter .3s ease}.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .3s;border-radius:inherit}.btn:hover::before{background:rgba(255,255,255,.08)}.btn:active{transform:scale(.96) translateY(1px)!important}.btn:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.12)}.btn-img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4);transition:transform .4s var(--ease-spring)}.btn:hover .btn-img{transform:rotate(-10deg) scale(1.1)}.btn-1{background:var(--accent-1);box-shadow:0 4px 20px rgba(239,68,68,.25)}.btn-1:hover{box-shadow:0 8px 30px rgba(239,68,68,.45)}.btn-2{background:var(--accent-2);box-shadow:0 4px 20px rgba(6,182,212,.25)}.btn-2:hover{box-shadow:0 8px 30px rgba(6,182,212,.45)}.stats-section{position:relative;z-index:1;padding:4rem 5%;max-width:1400px;margin:0 auto;width:100%}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.stat-card{background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:2rem;text-align:center;backdrop-filter:blur(8px);position:relative;overflow:hidden;cursor:default;transition:transform .4s var(--ease-spring),border-color .3s ease,box-shadow .4s ease;opacity:0;transform:translateY(40px)}.stat-card.revealed{animation:revealUp .7s var(--ease-out-expo) forwards}.stat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0,transparent 100%);opacity:0;transition:opacity .3s}.stat-card:hover::before{opacity:1}.stat-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);box-shadow:0 20px 40px rgba(0,0,0,.3),0 0 30px rgba(99,102,241,.1)}.stat-icon{font-size:2.5rem;margin-bottom:1rem;display:block}.stat-number{font-size:3rem;font-weight:900;line-height:1;background:linear-gradient(to right,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.stat-label{font-size:.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}.features-section{position:relative;z-index:1;padding:4rem 5%;max-width:1400px;margin:0 auto;width:100%}.section-header{text-align:center;margin-bottom:3rem;opacity:0;transform:translateY(30px)}.section-header.revealed{animation:revealUp .7s var(--ease-out-expo) forwards}.section-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent-3);margin-bottom:1rem}.section-title{font-size:2.5rem;font-weight:900;background:linear-gradient(to right,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.feature-card{background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:2rem;position:relative;overflow:hidden;cursor:default;backdrop-filter:blur(8px);opacity:0;transform:translateY(50px);transition:transform .4s var(--ease-spring),border-color .3s ease,box-shadow .4s ease}.feature-card.revealed{animation:revealUp .7s var(--ease-out-expo) forwards}.feature-card:hover{transform:translateY(-8px) scale(1.01);border-color:var(--card-color,rgba(255,255,255,.2));box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 30px var(--card-glow,rgba(99,102,241,.1))}.feature-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,var(--card-glow,rgba(99,102,241,.08)) 0,transparent 60%);opacity:0;transition:opacity .4s}.feature-card:hover::after{opacity:1}.feature-icon{font-size:2.2rem;margin-bottom:1.2rem;display:block;transition:transform .4s var(--ease-spring)}.feature-card:hover .feature-icon{transform:scale(1.15) rotate(-5deg)}.feature-title{font-size:1.1rem;font-weight:700;color:var(--text-light);margin-bottom:.6rem}.feature-desc{font-size:.9rem;color:var(--text-dim);line-height:1.65}footer{position:relative;z-index:1;text-align:center;padding:3rem 5%;border-top:1px solid var(--border);color:var(--text-dim);font-size:.85rem;background:rgba(15,23,42,.5);backdrop-filter:blur(10px);opacity:0;transform:translateY(20px)}footer.revealed{animation:revealUp .6s var(--ease-out-expo) forwards}.footer-links{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;flex-wrap:wrap}.footer-links a{color:var(--text-dim);text-decoration:none;font-size:.85rem;transition:color .2s}.footer-links a:hover{color:var(--text-light)}.nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(2px)}.nav-overlay.active{opacity:1;visibility:visible}#scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--accent-2),var(--accent-3),var(--accent-1));z-index:9998;transition:width .1s linear;border-radius:0 2px 2px 0;box-shadow:0 0 10px var(--accent-3)}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(2deg)}}@keyframes blobPulse{0%{opacity:.1;transform:scale(1)}100%{opacity:.3;transform:scale(1.2)}}@keyframes heroFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes revealUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@keyframes ping{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}@media (max-width:968px){.hero{flex-direction:column-reverse;text-align:center;padding-bottom:4rem;padding-top:3rem}.hero-content{align-items:center;display:flex;flex-direction:column}.hero-title{font-size:3rem}.mascot-container{width:220px;height:220px}.hero-subtitle{text-align:center}.platform-chips{justify-content:center}.button-grid{max-width:380px}.stats-grid{grid-template-columns:repeat(3,1fr)}.features-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.menu-toggle{display:block}.nav-links{position:fixed;top:0;right:0;width:75%;height:100vh;background:rgba(15,23,42,.95);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);flex-direction:column;justify-content:center;align-items:center;padding:2rem;gap:2rem;transform:translateX(100%);transition:transform .4s var(--ease-out-expo);box-shadow:-10px 0 30px rgba(0,0,0,.5);z-index:1000}.nav-links.active{transform:translateX(0)}.nav-links a{font-size:1.1rem;padding:.5rem 0}.features-grid,.stats-grid{grid-template-columns:1fr}.cursor-glow{display:none}}@media (max-width:480px){.button-grid{grid-template-columns:1fr;width:100%}.hero-title{font-size:2.4rem}.section-title{font-size:2rem}.stat-number{font-size:2.5rem}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}