:root{--liquid-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
#mainNav{isolation:isolate;transition:background .8s,border-color .8s,box-shadow .8s!important;background:rgba(12,13,15,.9);box-shadow:0 8px 38px #0003}
#mainNav.flowing{background:rgba(18,20,24,.57)!important;border-color:#b8c6d05c;box-shadow:0 8px 40px #0005,inset 0 1px #fff2}
#mainNav::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(110deg,transparent 20%,#edf5ff18 43%,#fff3 49%,transparent 60%);opacity:0;transition:opacity .8s}#mainNav.flowing::before{opacity:1}
#mainNav::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#edf4ff,transparent);transform:scaleX(.3);opacity:.35;transition:transform 1s var(--liquid-ease),opacity 1s}
#mainNav.flowing::after{transform:scaleX(1);opacity:.85}
.logo,.hero-title span,.flogo{background:linear-gradient(115deg,#fff 10%,#9dabb8 28%,#fff 36%,#525e6b 47%,#f5faff 52%,#aab5c0 68%,#fff 82%);background-size:240% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:chrome-drift 12s ease-in-out infinite}
.logo em,.flogo em{color:inherit}
#hero{overflow:hidden;isolation:isolate}.hbg{animation:hero-breathe 22s ease-in-out infinite alternate;transform-origin:65% 45%;will-change:transform}
#hero::after{content:'';position:absolute;inset:-30%;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#e0eeff0b 46%,#ffffff12 50%,transparent 60%);transform:translateX(-45%) rotate(-8deg);animation:liquid-sweep 18s ease-in-out infinite;mix-blend-mode:screen}
.hcta,.hero-bottom{z-index:2}.gbg,.gbgm{animation:hero-breathe 26s ease-in-out infinite alternate}
.btn,.bvip,.bauth,.bcart{position:relative;overflow:hidden;isolation:isolate}.btn::after,.bvip::after{content:'';position:absolute;inset:-80% -30%;background:linear-gradient(110deg,transparent 35%,#fff6 50%,transparent 65%);transform:translateX(-120%);pointer-events:none;transition:transform .9s var(--liquid-ease)}
.btn:hover::after,.bvip:hover::after{transform:translateX(120%)}
.pc .pci{transition:border-color .4s,box-shadow .4s,transform .65s var(--liquid-ease)}.pc:hover .pci{box-shadow:0 16px 50px #0005,inset 0 0 0 1px #dce6f75c;transform:translateY(-3px)}
.vc,.stcard,.order-card{transition:transform .5s var(--liquid-ease),border-color .5s,box-shadow .5s}.vc:hover,.stcard:hover{border-color:#a9b7c5;box-shadow:0 14px 50px #0004;transform:translateY(-4px)}
.authbox,.pmbox,.ckbox,dialog{animation:surface-arrive .4s var(--liquid-ease)}
.motion-toggle{position:fixed;bottom:18px;left:18px;z-index:1100;background:#101216df;border:1px solid #626b76;color:#dce4ed;border-radius:999px;padding:9px 13px;font-size:12px;backdrop-filter:blur(12px)}
@keyframes chrome-drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hero-breathe{from{transform:scale(1.015) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.6%,.3%,0)}}
@keyframes liquid-sweep{0%,18%{transform:translateX(-45%) rotate(-8deg);opacity:0}35%,55%{opacity:1}75%,100%{transform:translateX(45%) rotate(-8deg);opacity:0}}
@keyframes surface-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hbg{will-change:auto}}
@media(max-width:760px){.motion-toggle{bottom:12px;left:12px;font-size:11px}.hbg{animation-duration:30s}}