@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--primary: #220b5c;--primary-shadow: #140438;--accent: #d5d5f7;--dark: #3C3C3C;--gray: #6B7280;--light: #FFFFFF}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Fredoka,sans-serif;background-color:var(--light);color:var(--dark);line-height:1.5;overflow-x:hidden}.btn{display:inline-block;width:100%;max-width:350px;padding:1rem;border-radius:16px;font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;cursor:pointer;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);text-align:center;margin-bottom:1rem;position:relative;top:0}.btn:hover{transform:scale(1.02) translateY(-2px)}.btn-primary{background-color:var(--primary);color:#fff;border:none;border-bottom:5px solid var(--primary-shadow)}.btn-primary:active{border-bottom:0px;top:5px;transform:scale(.98)}.btn-secondary{background-color:#fff;color:var(--primary);border:2px solid #E5E7EB;border-bottom:5px solid #E5E7EB}.btn-secondary:active{border-bottom:2px solid #E5E7EB;top:3px}nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;background:#fff;border-bottom:2px solid #F3F4F6;height:80px;position:sticky;top:0;z-index:100}.hidden-left{opacity:0;transform:translate(-100px);transition:all 1s ease-out}.hidden-right{opacity:0;transform:translate(100px);transition:all 1s ease-out}.hidden-up{opacity:0;transform:translateY(50px);transition:all .8s ease-out}.show{opacity:1;transform:translate(0) translateY(0)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}.floating{animation:float 4s ease-in-out infinite}@keyframes spin-ccw{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.spin-left{animation:spin-ccw 10s linear infinite}@keyframes bounce-soft{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.bounce{animation:bounce-soft 2s ease-in-out infinite}@keyframes spin-cw{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin-right{animation:spin-cw 10s linear infinite}@keyframes float-magic{0%{transform:translateY(0) rotate(0) scale(.8);opacity:0}20%{opacity:1;transform:translateY(-20px) rotate(45deg) scale(1)}to{transform:translateY(-100px) rotate(180deg) scale(.8);opacity:0}}.magic-particle{position:absolute;animation:float-magic 4s ease-in-out infinite;opacity:0}.speed-1{animation-duration:3s}.speed-2{animation-duration:4s}.speed-3{animation-duration:5s}.delay-1{animation-delay:0s}.delay-2{animation-delay:1s}.delay-3{animation-delay:2s}.orbit-container{position:relative;width:100%;max-width:600px;aspect-ratio:1 / 1;margin:3rem auto;display:flex;justify-content:center;align-items:center}.orbit-ring{position:absolute;width:100%;height:100%;animation:spin-right 40s linear infinite}.orbit-center{width:280px;height:auto;z-index:20;position:relative;filter:drop-shadow(0 10px 20px rgba(34,11,92,.15))}.orbit-icon{position:absolute;width:75px;height:75px;left:50%;top:50%;margin-left:-37.5px;margin-top:-37.5px;animation:spin-left 40s linear infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.icon-pos-1{transform:rotate(0) translate(240px) rotate(0)}.icon-pos-2{transform:rotate(40deg) translate(240px) rotate(-40deg)}.icon-pos-3{transform:rotate(80deg) translate(240px) rotate(-80deg)}.icon-pos-4{transform:rotate(120deg) translate(240px) rotate(-120deg)}.icon-pos-5{transform:rotate(160deg) translate(240px) rotate(-160deg)}.icon-pos-6{transform:rotate(200deg) translate(240px) rotate(-200deg)}.icon-pos-7{transform:rotate(240deg) translate(240px) rotate(-240deg)}.icon-pos-8{transform:rotate(280deg) translate(240px) rotate(-280deg)}.icon-pos-9{transform:rotate(320deg) translate(240px) rotate(-320deg)}@keyframes spin-right{to{transform:rotate(360deg)}}@keyframes spin-left{to{transform:rotate(-360deg)}}@media(max-width:768px){.orbit-container{max-width:340px}.orbit-center{width:140px}.orbit-icon{width:50px;margin-left:-25px;margin-top:-25px}.icon-pos-1{transform:rotate(0) translate(130px) rotate(0)}.icon-pos-2{transform:rotate(40deg) translate(130px) rotate(-40deg)}.icon-pos-3{transform:rotate(80deg) translate(130px) rotate(-80deg)}.icon-pos-4{transform:rotate(120deg) translate(130px) rotate(-120deg)}.icon-pos-5{transform:rotate(160deg) translate(130px) rotate(-160deg)}.icon-pos-6{transform:rotate(200deg) translate(130px) rotate(-200deg)}.icon-pos-7{transform:rotate(240deg) translate(130px) rotate(-240deg)}.icon-pos-8{transform:rotate(280deg) translate(130px) rotate(-280deg)}.icon-pos-9{transform:rotate(320deg) translate(130px) rotate(-320deg)}}