/* The world illustrations are real images and lightweight, transform-only motion. */
.motion-stage{
  position:relative;isolation:isolate;min-width:0;height:590px;overflow:hidden;
  border-radius:32px;background:#f1f1f4;box-shadow:0 1px 0 #fff inset;
}
.motion-stage:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.motion-stage:after{content:"";position:absolute;inset:0;border:1px solid #00000008;border-radius:inherit;pointer-events:none;z-index:8}
.motion-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:portraitDrift 18s ease-in-out infinite alternate;transform-origin:50% 45%;will-change:transform}
.motion-stage .motion-card{position:absolute;z-index:3;padding:19px 21px;border:1px solid #ffffffb3;border-radius:20px;background:#fffffff2;color:#1d1d1f;box-shadow:0 14px 38px #11111b12;animation:audienceFloat 6s ease-in-out infinite;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.motion-card small{display:block;color:#656569;font-size:10px;line-height:1.4;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.motion-card strong{display:block;margin-top:8px;font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.035em}
.motion-card em{display:block;margin-top:5px;font-size:11px;line-height:1.5;font-style:normal;color:#64646b}
.motion-stage .motion-one{left:25px;top:95px;animation-delay:-1.5s}
.motion-stage .motion-two{right:24px;top:205px;animation-delay:-3.5s}
.motion-stage .motion-three{left:29px;bottom:77px;animation-delay:-4.6s}
.motion-stage .motion-four{right:25px;bottom:49px;animation-delay:-2.4s}
.motion-label{position:absolute;left:25px;top:26px;z-index:4;display:inline-flex;align-items:center;gap:8px;background:#ffffffed;border:1px solid #fff9;border-radius:99px;padding:8px 12px;color:#1d1d1f;font-size:10px;font-weight:600;letter-spacing:.05em}
.motion-label i{width:6px;height:6px;display:block;background:#ff6a29;border-radius:50%;box-shadow:0 0 0 4px #ff6a2914}
.motion-stage .motion-center{left:25px;right:25px;bottom:25px;top:auto;width:auto;transform:none;padding:24px;background:#ffffffed;animation:audienceFloat 7s ease-in-out infinite!important}
.motion-stage .motion-center small{color:#64646b}
.motion-stage .motion-center strong{font-size:26px;line-height:1.08;color:#1d1d1f;letter-spacing:-.045em;margin:8px 0 10px;font-weight:600}
.motion-stage .motion-center em{font-size:11px;color:#64646b}
.motion-card-icon{display:flex;width:31px;height:31px;align-items:center;justify-content:center;border-radius:9px;background:#f0f0f3;color:#1d1d1f;font-size:17px;margin-bottom:15px}
.motion-card-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Business: a decorative live order book behind the existing finance cards. */
.motion-stage.business-motion{background:#f4f4f7!important}
.motion-stage.business-motion .motion-card:not(.motion-center){background:rgba(255,255,255,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.business-motion:before{background:none}
.business-exchange{position:absolute;inset:0;z-index:0;overflow:hidden;color:#1d1d1f;pointer-events:none;font-variant-numeric:tabular-nums;background:radial-gradient(ellipse at 75% 0%,#ffffff,transparent 65%),linear-gradient(145deg,#f4f4f7,#e9eaee)}
.exchange-header{position:absolute;top:28px;left:174px;right:24px;display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
.exchange-header>strong{font-size:23px;font-weight:750;letter-spacing:-.06em;line-height:1}
.exchange-name{color:#686871;font-size:8px;font-weight:650;line-height:1.3;letter-spacing:.09em}
.exchange-live{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:20px;background:#16744712;color:#167447;font-size:9px;font-weight:700;letter-spacing:.04em}
.exchange-live i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:exchangeLive 2.8s ease-in-out infinite}
.exchange-market{position:absolute;top:73px;left:230px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.exchange-symbol{color:#73737c;font-size:8px;letter-spacing:.08em;white-space:nowrap}
.exchange-price{color:#167447;font:600 19px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.055em;white-space:nowrap;transition:color .4s}
.exchange-price[data-direction="down"]{color:#bc3453}
.exchange-depth{position:absolute;top:107px;left:226px;width:calc(100% - 248px);height:61px;overflow:hidden;border:1px solid #1d1d1f14;border-radius:10px;background:#ffffff70}
.exchange-grid{fill:none;stroke:#1d1d1f12;stroke-width:1;stroke-dasharray:2 4}
.exchange-bid-area{fill:#16744716}.exchange-ask-area{fill:#bc345316}
.exchange-bid-line,.exchange-ask-line{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.exchange-bid-line{stroke:#167447}.exchange-ask-line{stroke:#bc3453}
.exchange-book{position:absolute;top:204px;left:24px;right:24px;font:500 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
.exchange-columns,.exchange-row{display:grid;grid-template-columns:1fr 52px 70px;align-items:center;gap:8px;text-align:right}
.exchange-columns{height:29px;color:#686871;border-bottom:1px solid #1d1d1f14;font-size:8px;letter-spacing:.04em}
.exchange-columns>:first-child{text-align:left}
.exchange-row{position:relative;height:25px;margin-top:5px;padding:0 7px;color:#167447}
.exchange-row[data-side="ask"]{color:#bc3453}
.exchange-row>i{position:absolute;inset:0;transform:scaleX(var(--depth));transform-origin:right;background:#16744718;border-radius:4px;transition:transform 1.1s cubic-bezier(.22,1,.36,1),background .7s}
.exchange-row[data-side="ask"]>i{background:#bc345316}
.exchange-row>span{position:relative}
.exchange-row [data-volume]{color:#64646d}
.exchange-side{font-size:7px;letter-spacing:.1em;text-align:left;opacity:.8}
.exchange-row.is-cancelled>i{background:#bc345340}
.exchange-row.is-traded>i{background:#16744735}
.exchange-balance{position:absolute;left:24px;right:24px;top:422px;display:flex;justify-content:space-between;color:#167447;font:500 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em}
.exchange-balance>span:nth-child(2){color:#bc3453}
.exchange-balance b{font-weight:500}
.exchange-balance>i{position:absolute;top:15px;left:0;right:0;height:3px;background:#bc345388;border-radius:8px;overflow:hidden}
.exchange-balance>i>b{display:block;height:100%;width:52%;background:#167447;transition:width 1.2s ease}
.business-exchange[data-running="false"] .exchange-live i{animation-play-state:paused}
@keyframes exchangeLive{0%,100%{opacity:.55;box-shadow:0 0 0 0 #16744700}50%{opacity:1;box-shadow:0 0 0 4px #16744712}}
@media(min-width:801px) and (max-width:1050px){.exchange-header{left:162px;right:17px;gap:7px}.exchange-header>strong{font-size:20px}.exchange-market{left:192px;right:18px;top:78px}.exchange-symbol{display:none}.exchange-market{justify-content:flex-end}.exchange-depth{left:192px;width:calc(100% - 210px);height:109px}.exchange-book{top:231px;left:18px;right:18px}.exchange-balance{top:439px}}
@media(max-width:520px){.exchange-header{top:53px;left:20px;right:20px;justify-content:space-between;gap:8px}.exchange-header>strong{font-size:16px}.exchange-name{margin-right:auto;font-size:7px;line-height:1}.exchange-name br{display:none}.exchange-live{padding:3px 6px;font-size:8px}.exchange-market{top:54px;left:auto;right:76px}.exchange-price{font-size:12px}.exchange-symbol{display:none}.exchange-depth{top:141px;left:18px;width:calc(100% - 36px);height:93px}.exchange-book{top:253px;left:18px;right:18px;font-size:9px}.exchange-columns{grid-template-columns:1fr 44px 62px}.exchange-row{grid-template-columns:1fr 44px 62px;height:25px;margin-top:7px}.exchange-balance{top:493px;left:18px;right:18px}}
@media(prefers-reduced-motion:reduce){.exchange-live i{animation:none}.exchange-row>i,.exchange-price,.exchange-balance>i>b{transition:none}}
.business-orbit{position:absolute;width:410px;height:410px;left:50%;top:45%;border:1px solid #ffffffbd;border-radius:50%;transform:translate(-50%,-50%)}
.business-orbit:before,.business-orbit:after{content:"";position:absolute;inset:40px;border:1px solid #fff9;border-radius:50%}
.business-orbit:after{inset:82px;background:#ffffff12}
.motion-stage.business-motion .motion-one{left:22px;top:94px;width:183px}
.motion-stage.business-motion .motion-two{right:22px;top:175px;width:171px}
.motion-stage.business-motion .motion-three{left:32px;bottom:188px;width:178px;padding:16px 19px}
.motion-stage.business-motion .motion-center{background:#202126;color:#fff;border-color:#ffffff1c;padding:25px 26px}
.motion-stage.business-motion .motion-center small{color:#bbbbc2}
.motion-stage.business-motion .motion-center strong{color:#fff;font-size:23px;margin:8px 0}
.motion-stage.business-motion .motion-center em{color:#bbbbc2}
.finance-sparkline{width:138px;height:47px;margin-top:13px;overflow:visible}
.finance-sparkline path{fill:none;stroke:#ff6a29;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:210;stroke-dashoffset:210;animation:drawFinance 6s ease-in-out infinite}
.finance-sparkline line{stroke:#e3e3e8;stroke-width:1}
.finance-sparkline circle{fill:#ff6a29;animation:financeDot 6s ease-in-out infinite}
.workflow-track{display:flex;gap:5px;margin-top:13px}
.workflow-track i{width:24px;height:5px;border-radius:9px;background:#ff6a29;animation:workflowStep 3.8s ease-in-out infinite}
.workflow-track i:nth-child(2){animation-delay:.35s}.workflow-track i:nth-child(3){animation-delay:.7s}.workflow-track i:nth-child(4){animation-delay:1.05s}
.business-hub{position:absolute;right:20px;top:50%;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#ffffff12;border:1px solid #ffffff30;transform:translateY(-50%)}
.business-hub svg{width:31px;height:31px;stroke:#ff6a29;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;animation:hubTurn 12s linear infinite}
.business-motion .motion-center strong,.business-motion .motion-center em{padding-right:64px}
/* Creative: keep the artist in the foreground, with a moving audio signature. */
.motion-stage.creative-motion{background:#d0cbc8!important}
.motion-stage.creative-motion:before{background:linear-gradient(180deg,#18181b00 45%,#18181b45 100%)!important}
.creative-motion .motion-photo{object-position:50% 35%}
.motion-stage.creative-motion .motion-one{left:21px;top:190px;padding:14px 17px;max-width:151px}
.creative-motion .motion-one strong{font-size:14px;margin-top:5px}
.creative-motion .motion-one small{font-size:9px}
.motion-stage.creative-motion .motion-center{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#ffffffe8}
.creative-motion .motion-center strong{max-width:220px}
.creative-bars{display:flex;align-items:center;gap:5px;height:67px;flex:none;padding:0 1px;margin:0;width:88px}
.creative-bars i{display:block;width:6px;height:100%;background:#ff6a29;border-radius:8px;transform-origin:center;animation:audioLevel 1.7s ease-in-out infinite}
.creative-bars i:nth-child(1){height:33%;animation-delay:-.6s}.creative-bars i:nth-child(2){height:61%;animation-delay:-1.4s}.creative-bars i:nth-child(3){height:84%;animation-delay:-.2s}.creative-bars i:nth-child(4){height:100%;animation-delay:-1s}.creative-bars i:nth-child(5){height:71%;animation-delay:-.5s}.creative-bars i:nth-child(6){height:91%;animation-delay:-1.2s}.creative-bars i:nth-child(7){height:43%;animation-delay:-.8s}.creative-bars i:nth-child(8){height:23%;animation-delay:-.3s}
/* Athlete: a quiet career card and an animated training pulse. */
.motion-stage.sport-motion{background:#d8d7d1}
.sport-motion .motion-photo{object-position:50% 40%}
.sport-motion:before{background:linear-gradient(180deg,#1c1f2900 48%,#1c1f2950 100%)}
.motion-stage.sport-motion .motion-two{top:114px;right:22px;padding:15px 18px;max-width:174px}
.sport-motion .motion-two strong{font-size:14px}.sport-motion .motion-two small{font-size:9px}
.motion-stage.sport-motion .motion-center{display:flex;justify-content:space-between;align-items:center;gap:15px}
.sport-ring{position:relative;flex:none;width:75px;height:75px;border:5px solid #1d1d1f0c;border-radius:50%;animation:athleteBreath 4.4s ease-in-out infinite}
.sport-ring:before{content:"";position:absolute;inset:-5px;border:5px solid transparent;border-top-color:#ff6a29;border-right-color:#ff6a29;border-bottom-color:#ff6a29;border-radius:50%;transform:rotate(-35deg);animation:athleteArc 6s ease-in-out infinite}
.sport-ring svg{position:absolute;inset:16px;width:33px;height:33px;fill:none;stroke:#1d1d1f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes audienceFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes portraitDrift{0%{transform:scale(1.005) translateY(0)}100%{transform:scale(1.045) translateY(-4px)}}
@keyframes audioLevel{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
@keyframes drawFinance{0%,10%{stroke-dashoffset:210;opacity:.35}50%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.35}}
@keyframes financeDot{0%,35%,100%{opacity:0}50%,85%{opacity:1}}
@keyframes workflowStep{0%,100%{opacity:.24}40%,70%{opacity:1}}
@keyframes hubTurn{to{transform:rotate(360deg)}}
@keyframes athleteBreath{50%{transform:scale(.93)}}
@keyframes athleteArc{50%{transform:rotate(25deg)}}
@media(min-width:801px) and (max-width:1050px){.motion-stage{height:560px}.motion-stage.business-motion .motion-one{width:162px;left:16px}.motion-stage.business-motion .motion-two{width:152px;right:16px;top:225px}.motion-stage.business-motion .motion-three{left:18px;bottom:153px;width:157px}.motion-stage .motion-center{left:17px;right:17px;padding:20px}.motion-stage .motion-center strong{font-size:23px}.creative-bars{width:69px;gap:4px}.creative-bars i{width:5px}.sport-ring{width:63px;height:63px}.sport-ring svg{inset:12px;width:29px;height:29px}}
@media(max-width:800px){.motion-stage{height:580px;max-width:580px;width:100%;margin-inline:auto}.motion-stage .motion-center{left:25px;right:25px}.creative-motion .motion-photo{object-position:50% 28%}}
@media(max-width:800px){
  .motion-stage.business-motion{height:460px}
  .motion-stage.business-motion .motion-center{display:none}
  .motion-stage.business-motion .motion-three{bottom:48px}
}
@media(max-width:520px){.motion-stage{height:480px;border-radius:26px}.motion-label{left:20px;top:21px}.motion-stage .motion-center{left:18px;right:18px;bottom:19px;padding:20px}.motion-stage .motion-center strong{font-size:24px}.motion-stage.business-motion .motion-one{left:18px;top:80px;width:158px;padding:17px}.motion-stage.business-motion .motion-two{top:177px;right:18px;width:149px;padding:16px}.motion-stage.business-motion .motion-three{left:20px;bottom:153px;width:165px;padding:14px 17px}.business-motion .motion-card em{font-size:10px}.finance-sparkline{height:39px;width:122px}.motion-stage.business-motion .motion-center{padding:21px}.motion-stage.business-motion .motion-center strong{font-size:21px}.business-hub{width:50px;height:50px;right:17px}.business-hub svg{width:25px;height:25px}.business-motion .motion-center strong,.business-motion .motion-center em{padding-right:47px}.motion-stage.creative-motion .motion-one{top:170px;left:17px;padding:12px 14px;max-width:138px}.creative-motion .motion-photo{object-position:50% 35%}.creative-bars{width:76px;gap:4px;height:58px}.creative-bars i{width:5px}.motion-stage.sport-motion .motion-two{top:84px;right:17px;padding:12px 15px;max-width:156px}.sport-ring{width:65px;height:65px}.sport-ring svg{inset:13px;width:29px;height:29px}}
@media(max-width:520px){
  .motion-stage.business-motion{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;height:auto;padding:80px 18px 26px}
  .motion-stage.business-motion .motion-card{position:relative;inset:auto;min-width:0;width:min(100%,220px)}
  .motion-stage.business-motion .motion-two{justify-self:end}
  .motion-stage.business-motion .motion-center{width:100%}
}
@media(prefers-reduced-motion:reduce){.motion-stage .motion-card,.motion-photo,.creative-bars i,.sport-ring,.sport-ring:before,.finance-sparkline path,.finance-sparkline circle,.workflow-track i,.business-hub svg{animation:none!important;transform:none;translate:none;will-change:auto}.finance-sparkline path{stroke-dashoffset:0}.finance-sparkline circle{opacity:1}.business-hub{transform:translateY(-50%)}}