.motion-section{background:#eee7fc;padding:90px 0;scroll-margin-top:90px}.motion-layout{display:grid;grid-template-columns:1fr 390px;gap:80px;align-items:center}.motion-copy h2{font-size:clamp(40px,5vw,68px);line-height:1.15;margin:20px 0}.motion-copy>p{line-height:1.9;max-width:470px}.motion-options{display:grid;gap:12px;margin:30px 0}.motion-options button{text-align:left;background:#faf7ff;border:1px solid #d8cbea;border-radius:20px;padding:18px 22px;color:#292036;font:inherit;cursor:pointer}.motion-options button[aria-pressed=true]{background:#7350d5;color:white;border-color:#7350d5}.motion-options strong,.motion-options small{display:block}.motion-options small{margin-top:5px;opacity:.8}.motion-replay{background:#d5f56a;border:0;border-radius:30px;padding:15px 24px;font:inherit;cursor:pointer}.motion-note{font-size:12px;opacity:.7}.demo-phone{width:100%;max-width:370px;margin:auto;position:relative;overflow:hidden;border:8px solid #292036;border-radius:38px;box-shadow:18px 24px 0 #d5f56a;box-sizing:content-box}.demo-stage{width:412px;height:892px;position:absolute;top:0;left:0;transform-origin:0 0;background:#faf7ff;font-family:Arial,'Microsoft YaHei',sans-serif;color:#292036}.demo-backplate{position:absolute;width:412px;height:892px;inset:0}.demo-stage .screen-pattern{pointer-events:none;z-index:1}.demo-controls{position:absolute;inset:0;z-index:2}.demo-tabs{position:absolute;left:24px;top:330px;width:364px;height:48px;display:flex;gap:8px;background:#faf7ff;border-radius:24px}.demo-tabs:before{content:'';position:absolute;inset:0 auto 0 0;width:80px;border-radius:24px;background:#7350d5;transform:translateX(var(--tab-x,0px));transition:transform .36s cubic-bezier(.2,0,0,1)}.demo-tabs button{position:relative;background:transparent;border:0;width:80px;flex-shrink:0;color:#625273;border-radius:24px;font-size:14px;cursor:pointer}.demo-tabs button[aria-pressed=true]{color:white}.demo-save{position:absolute;left:148px;top:652px;width:52px;height:52px;border:0;border-radius:50%;background:#eee7fc;color:#7350d5;cursor:pointer}.demo-save svg{width:22px;height:24px;fill:none;stroke:currentColor;stroke-width:2}.demo-save[aria-pressed=true] svg{fill:currentColor}.demo-toast{position:absolute;left:24px;top:724px;width:364px;height:52px;border-radius:18px;background:#292036;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-sizing:border-box;font-size:14px;opacity:0;pointer-events:none}.demo-toast.visible{opacity:1;pointer-events:auto;animation:toast-pop .5s both}.demo-toast button{background:none;color:#d5f56a;border:0;font:inherit;cursor:pointer}@keyframes toast-pop{0%{transform:translateY(180px);opacity:0}16%{opacity:1}52%{transform:translateY(-8px) rotate(-2.2deg)}70%{transform:translateY(0) rotate(1.6deg)}86%{transform:rotate(-.6deg)}100%{transform:translateY(0) rotate(0);opacity:1}}.demo-nav{position:absolute;left:220px;top:804px;width:82px;height:58px;border:0;background:transparent;cursor:pointer}.demo-hotspot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:28px}.demo-hotspot:focus-visible,.demo-nav:focus-visible{outline:4px solid #7350d5;outline-offset:3px}.demo-cycle{position:absolute;left:24px;top:240px;width:364px;height:56px;background:#eee7fc;border-radius:28px;display:flex;padding:4px;box-sizing:border-box}.demo-cycle:before{content:'';position:absolute;width:178px;height:48px;left:4px;top:4px;background:#7350d5;border-radius:24px;transform:translateX(var(--cycle-x,0px));transition:transform .36s cubic-bezier(.2,0,0,1)}.demo-cycle button{position:relative;width:50%;border:0;background:transparent;color:#625273;font-size:14px;cursor:pointer}.demo-cycle button[aria-pressed=true]{color:white}.demo-pay{position:absolute;left:24px;top:690px;width:364px;height:56px;border:0;border-radius:28px;background:#7350d5;color:white;font-size:16px;cursor:pointer}.demo-spinner{position:absolute;left:181px;top:280px;width:50px;height:50px;border:5px solid #ded4f2;border-top-color:#7350d5;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.demo-success{position:absolute;left:108px;top:180px;width:196px;height:196px;display:grid;place-items:center;background:#d5f56a;border-radius:50%;animation:success-pop .42s both}.demo-success svg{width:80px;fill:none;stroke:#7350d5;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}@keyframes success-pop{0%{transform:scale(.7);opacity:0}57%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}.demo-shapes{position:absolute;inset:0;background:#faf7ff;padding:70px 28px;box-sizing:border-box}.demo-shapes h3{font-size:54px;letter-spacing:-3px;line-height:1.1;margin:30px 0}.demo-shapes p{line-height:1.8;color:#625273}.morph-square{width:180px;height:180px;margin:100px auto 90px;background:#7350d5;animation:morph 1.4s both}.morph-line{height:5px;width:230px;background:#7350d5;margin:0 auto;animation:line-morph 1.4s both}@keyframes morph{0%{border-radius:0;transform:rotate(0)}28%{border-radius:0 85px;transform:rotate(-8deg)}64%{border-radius:90px;transform:rotate(8deg)}100%{border-radius:32px;transform:rotate(0)}}@keyframes line-morph{0%{height:5px;border-radius:0}64%{height:60px;border-radius:50%}100%{height:5px;border-radius:4px}}.demo-hint{font-size:13px;text-align:center;margin-top:28px;color:#625273}.demo-stage button:focus-visible{outline:3px solid #292036;outline-offset:2px}@media(max-width:800px){.motion-layout{grid-template-columns:1fr;gap:36px}.motion-section{padding:60px 0}.demo-phone{max-width:310px;width:calc(100% - 28px)}.motion-options{grid-template-columns:1fr 1fr}.motion-options button{padding:14px}.motion-options small{font-size:11px}}@media(prefers-reduced-motion:reduce){.demo-stage *, .demo-stage *:before{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}

.demo-cycle:before{border-radius:24px 8px 24px 8px;transition:transform .48s cubic-bezier(.2,0,0,1),border-radius .48s cubic-bezier(.2,0,0,1)}.demo-cycle[data-period="monthly"]:before{border-radius:8px 24px 8px 24px}.demo-cycle.morphing:before{animation:cycle-round .48s cubic-bezier(.2,0,0,1)}@keyframes cycle-round{45%{border-radius:24px}}

.demo-plan-mask{position:absolute;left:24px;top:308px;width:364px;height:172px;background:#faf7ff}.demo-plan-card{position:absolute;inset:0;overflow:hidden;background:#7350d5;color:#fff;border-radius:32px 8px 32px 8px;transition:border-radius .64s cubic-bezier(.22,1,.36,1);padding:28px 24px;box-sizing:border-box}.demo-plan-mask[data-period="monthly"] .demo-plan-card{border-radius:8px 32px 8px 32px}.demo-plan-card>strong{font-size:20px;line-height:24px}.plan-recommend{position:absolute;right:24px;top:24px;width:40px;height:36px;border-radius:20px;display:grid;place-items:center;background:#d5f56a;color:#292036;font-size:12px}.plan-price{position:absolute;left:24px;top:68px;opacity:0;transform:translateY(12px);transition:opacity .32s ease,transform .52s cubic-bezier(.22,1,.36,1);pointer-events:none}.plan-price b{font-size:44px;line-height:50px;letter-spacing:-1px}.plan-price>span{font-size:14px}.plan-price small{display:block;font-size:12px;line-height:18px;margin-top:12px}.demo-plan-mask[data-period="annual"] .annual-price,.demo-plan-mask[data-period="monthly"] .monthly-price{opacity:1;transform:translateY(0)}.demo-cycle:before{transition:transform .64s cubic-bezier(.22,1,.36,1),border-radius .64s cubic-bezier(.22,1,.36,1)}
.demo-plan-card:after{content:'';position:absolute;right:-10px;top:0;width:164px;height:100%;background:url('assets/container-pattern.svg') right center/180px 172px no-repeat;opacity:0;pointer-events:none;transition:opacity .25s}.patterns-on .demo-plan-card:after{opacity:.085}.demo-plan-card>strong,.demo-plan-card>.plan-price,.demo-plan-card>.plan-recommend{z-index:1;position:relative}.demo-plan-card>.plan-price,.demo-plan-card>.plan-recommend{position:absolute}.demo-toast{overflow:hidden;isolation:isolate}.demo-toast:before{content:'';position:absolute;right:34px;top:-25px;width:100px;height:100px;background:url('assets/container-pattern.svg') center/contain;opacity:0;z-index:-1;pointer-events:none}.patterns-on .demo-toast:before{opacity:.06}