/* Workforce showcase: readable product imagery with restrained ambient motion. */
.mobile-showcase{position:relative;background:#0b1322;padding:100px 0 90px;isolation:isolate}
.mobile-showcase:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 76% 48%,#20456a66,transparent 48%),radial-gradient(ellipse at 8% 100%,#143e4738,transparent 48%);pointer-events:none}
.mobile-showcase .mobile-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:55px;align-items:center}
.mobile-copy{position:relative;z-index:6}
.mobile-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;color:#93b6f7;font-size:10px;letter-spacing:2px;margin-bottom:24px}
.mobile-copy .eyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:#61d8c0;box-shadow:0 0 15px #61d8c077}
.mobile-copy h2{font-size:clamp(38px,4.05vw,57px);line-height:1.09;letter-spacing:-2.4px;margin:0;max-width:530px}
.mobile-copy h2 .mobile-title-line{display:block;color:#f0f4ff}
.mobile-copy h2 .mobile-title-accent{display:block;color:#8ab8ff;margin-top:8px;text-wrap:balance}
.mobile-copy>p{color:#a6b6cc;font-size:14px;line-height:1.85;max-width:415px;margin:25px 0}
.mobile-pills{gap:8px;margin:24px 0 30px}
.mobile-pills span{border-color:#ffffff15;background:#ffffff03;color:#b0c2d9;border-radius:30px;padding:8px 12px;font-size:10px}
.mobile-copy .button{background:#558bf1;border:1px solid #83b0ff66;box-shadow:0 6px 28px #367cff26;border-radius:8px;padding:16px 20px;font-size:12px;transition:background .25s,box-shadow .25s,transform .25s}
.mobile-copy .button:hover{background:#6a9df8;box-shadow:0 8px 35px #367cff40;transform:translateY(-2px)}
.mobile-copy .button:focus-visible{outline:2px solid #b2ceff;outline-offset:5px}
.mobile-showcase .device-stage{height:610px;width:100%;max-width:600px;margin:auto;perspective:1500px;overflow:visible}
.device-stage .device-orbit{width:420px;height:420px;top:90px;left:50%;margin-left:-210px;border-color:#7caaff22;box-shadow:0 0 0 45px #5f9bff05,0 0 0 90px #5f9bff03;opacity:1;animation:orbitDevice 35s linear infinite}
.device-stage .device-orbit:after{top:62px;left:51px;width:5px;height:5px;background:#84afff;box-shadow:0 0 16px #84afff}
.mobile-halo{position:absolute;left:50%;top:50%;width:350px;height:470px;margin:-235px 0 0 -175px;background:radial-gradient(ellipse,#4a88ef35,transparent 68%);filter:blur(20px);pointer-events:none;animation:mobileHalo 9s ease-in-out infinite}
.device-stage .phone-hardware{width:265px;height:560px;border-radius:42px;padding:4px;background:linear-gradient(115deg,#b4c4d9,#304664 16%,#0a1321 48%,#7b90aa 78%,#1d324c);box-shadow:0 30px 65px #0008,0 0 0 1px #9eb9dc1a,1px 0 0 #b4c2d566 inset;transform:rotateY(-8deg) rotateZ(2deg);animation:mobilePhoneFloat 9s ease-in-out infinite;z-index:3}
.device-stage .phone-hardware .device-phone{border-radius:38px}
.phone-hardware .phone-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#ffffff14 45%,transparent 60%);pointer-events:none}
.mobile-feature{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;max-width:200px;padding:13px 16px;background:linear-gradient(120deg,#1b2b41f5,#122037f5);border:1px solid #9ab9e329;border-radius:13px;box-shadow:0 14px 35px #0004;backdrop-filter:blur(16px);animation:mobileCardFloat 7s ease-in-out infinite}
.mobile-feature-icon{display:grid;place-items:center;flex:none;width:31px;height:34px;color:#90b9ff;background:#78aaff14;border:1px solid #78aaff20;border-radius:9px}
.mobile-feature-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mobile-feature b{display:block;font-size:11px;line-height:1.5;font-weight:500;color:#e7f0ff;white-space:nowrap}
.mobile-feature small{display:block;font-size:9px;line-height:1.5;color:#9eb1cb;margin-top:3px;white-space:nowrap}
.mobile-feature-attendance{left:-8px;top:135px;animation-delay:-2s}
.mobile-feature-leave{right:-12px;top:55px;animation-delay:-4s}
.mobile-feature-payslips{right:-3px;bottom:95px;animation-delay:-1s}
.mobile-feature-leave .mobile-feature-icon{color:#73dcc1;background:#53ccb112;border-color:#53ccb124}
.mobile-feature-payslips .mobile-feature-icon{color:#c0adff;background:#b499ff12;border-color:#b499ff24}
.device-stage .device-badge{position:absolute;left:50%;bottom:0;transform:translateX(-50%);animation:none;max-width:none;width:max-content;background:transparent;border:0;padding:0;text-align:center;box-shadow:none;backdrop-filter:none;color:#a5b5cc;font-size:10px;letter-spacing:.2px}
.device-stage .device-badge b{font-weight:400}
.device-stage .device-badge span{color:#637b9d;font-size:9px;margin-top:5px;letter-spacing:1px;text-transform:uppercase}
.mobile-copy.visible .mobile-title-line,.mobile-copy.visible .mobile-title-accent{animation:mobileTextIn .85s cubic-bezier(.2,.8,.2,1) both}
.mobile-copy.visible .mobile-title-line:nth-child(2){animation-delay:.1s}
.mobile-copy.visible .mobile-title-accent{animation-delay:.2s}
.device-stage.visible{animation:mobileStageIn 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes mobileTextIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes mobileStageIn{from{opacity:0;translate:0 35px}to{opacity:1;translate:0 0}}
@keyframes mobilePhoneFloat{0%,100%{transform:rotateY(-8deg) rotateZ(2deg) translateY(0)}50%{transform:rotateY(-3deg) rotateZ(0) translateY(-12px)}}
@keyframes mobileCardFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes mobileHalo{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}
@media(min-width:801px) and (max-width:1100px){.mobile-showcase .mobile-grid{gap:25px;grid-template-columns:1fr 1fr}.mobile-feature{padding:10px;gap:7px}.mobile-feature-attendance{left:-5px;top:140px}.mobile-feature-leave{right:-5px;top:60px}.mobile-feature-payslips{right:-5px;bottom:85px}.mobile-feature b{font-size:10px}.mobile-feature small{font-size:8px}.device-stage .phone-hardware{width:240px;height:510px}.mobile-showcase .device-stage{height:565px}.mobile-copy h2{font-size:43px}}
@media(max-width:800px){.mobile-showcase{padding:70px 0 55px}.mobile-showcase .mobile-grid{grid-template-columns:1fr;gap:25px}.mobile-copy{max-width:560px}.mobile-copy h2{font-size:clamp(36px,7vw,48px);letter-spacing:-1.8px;max-width:500px}.mobile-copy>p{max-width:465px}.mobile-showcase .device-stage{height:595px;max-width:530px;margin:15px auto 0}.mobile-feature-attendance{left:0;top:150px}.mobile-feature-leave{right:0;top:70px}.mobile-feature-payslips{right:0;bottom:95px}}
@media(max-width:480px){.mobile-showcase{padding-top:60px}.mobile-copy .eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:20px}.mobile-copy h2{font-size:38px}.mobile-copy>p{font-size:13px;margin-top:22px}.mobile-pills{gap:6px;margin:20px 0 25px}.mobile-pills span{font-size:9px;padding:7px 10px}.mobile-copy .button{font-size:11px;padding:14px 17px}.mobile-showcase .device-stage{height:535px}.device-stage .phone-hardware{width:218px;height:463px;border-radius:37px}.device-stage .phone-hardware .device-phone{border-radius:33px}.device-stage .device-orbit{width:300px;height:300px;margin-left:-150px;top:110px;box-shadow:0 0 0 30px #5f9bff05,0 0 0 60px #5f9bff03}.mobile-feature{padding:9px 10px;gap:7px;border-radius:10px}.mobile-feature b{font-size:9px}.mobile-feature small{font-size:8px}.mobile-feature-icon{width:25px;height:28px}.mobile-feature-icon svg{width:15px;height:15px}.mobile-feature-attendance{left:-5px;top:120px}.mobile-feature-leave{right:-5px;top:28px}.mobile-feature-payslips{right:-5px;bottom:65px}.device-stage .device-badge{font-size:9px;bottom:0}.device-stage .device-badge span{font-size:8px}}
@media(max-width:360px){.mobile-copy h2{font-size:34px}.mobile-feature small{display:none}.mobile-feature{padding:8px}.mobile-showcase .device-stage{height:520px}}
@media(prefers-reduced-motion:reduce){.mobile-showcase *,.mobile-showcase *:before,.mobile-showcase *:after{animation:none!important;transition:none!important}.mobile-showcase .phone-hardware{transform:none}.mobile-copy .mobile-title-line,.mobile-copy .mobile-title-accent{opacity:1;transform:none}.mobile-showcase .reveal{opacity:1;transform:none}.device-stage{translate:none!important}}
.motion-off .mobile-showcase .mobile-title-line,.motion-off .mobile-showcase .mobile-title-accent{animation:none!important;opacity:1;transform:none}
.motion-off .mobile-showcase .device-stage{animation:none!important;opacity:1;translate:none!important}
/* Dimensional handset and separate foreground feature planes. */
.mobile-showcase .device-stage{perspective:1200px;perspective-origin:50% 42%;transform-style:preserve-3d;isolation:auto}
.mobile-showcase .device-stage:before{content:'';position:absolute;left:20%;right:20%;bottom:43px;height:60px;border-radius:50%;background:radial-gradient(ellipse,#0009,transparent 70%);filter:blur(12px);transform:rotateX(68deg) translateZ(-35px);animation:mobile3dShadow 9s ease-in-out infinite;pointer-events:none}
.mobile-showcase .phone-hardware{transform-style:preserve-3d;animation:mobile3dHandset 9s cubic-bezier(.45,0,.55,1) infinite;box-shadow:9px 4px 0 -3px #20344a,14px 7px 0 -6px #6a8099,0 35px 55px #0008,0 0 55px #4e9cdb14}
.mobile-showcase .phone-hardware:before{content:'';position:absolute;inset:0;border-radius:inherit;transform:translateZ(-12px);background:linear-gradient(125deg,#8ea1b7,#16263b 24%,#050c16 65%,#617b95);box-shadow:0 0 0 1px #90a7bf55}
.mobile-showcase .phone-hardware:after{content:'';position:absolute;top:6%;bottom:6%;right:-2px;width:2px;background:linear-gradient(transparent,#ccdded99,transparent);border-radius:5px;transform:translateZ(2px);pointer-events:none}
.mobile-showcase .phone-preview:after{background:linear-gradient(115deg,transparent 25%,#ffffff22 47%,transparent 65%);animation:mobile3dReflection 9s ease-in-out infinite}
.mobile-showcase .device-orbit{top:auto;bottom:42px;height:170px;transform:rotateX(67deg);animation:mobile3dOrbit 18s linear infinite;border-color:#82baff3d;box-shadow:0 0 0 28px #5f9bff05,0 0 45px #5f9bff0c}
.mobile-showcase .mobile-feature{transform-style:preserve-3d;box-shadow:5px 6px 0 -2px #0c1729,0 22px 35px #0005;border-color:#8dbbf23b;animation:mobile3dFeature 9s ease-in-out infinite}
.mobile-feature-attendance{--mobile-depth:65px;--mobile-angle:-9deg;animation-delay:-1s!important}
.mobile-feature-leave{--mobile-depth:45px;--mobile-angle:9deg;animation-delay:-3s!important}
.mobile-feature-payslips{--mobile-depth:80px;--mobile-angle:7deg;animation-delay:-5s!important}
@keyframes mobile3dHandset{0%,100%{transform:translate3d(0,0,15px) rotateX(4deg) rotateY(-17deg) rotateZ(2deg)}50%{transform:translate3d(0,-15px,35px) rotateX(2deg) rotateY(12deg) rotateZ(-2deg)}}
@keyframes mobile3dFeature{0%,100%{transform:translate3d(0,0,var(--mobile-depth)) rotateY(var(--mobile-angle))}50%{transform:translate3d(0,-12px,calc(var(--mobile-depth) + 15px)) rotateY(0)}}
@keyframes mobile3dOrbit{from{transform:rotateX(67deg) rotateZ(0)}to{transform:rotateX(67deg) rotateZ(360deg)}}
@keyframes mobile3dShadow{0%,100%{opacity:.7;scale:1}50%{opacity:.4;scale:.85}}
@keyframes mobile3dReflection{0%,100%{opacity:.25;translate:-12px 0}50%{opacity:.8;translate:12px 0}}
@media(max-width:480px){.mobile-showcase .device-stage{perspective:1400px}.mobile-feature-attendance{--mobile-depth:18px;--mobile-angle:-5deg}.mobile-feature-leave{--mobile-depth:12px;--mobile-angle:5deg}.mobile-feature-payslips{--mobile-depth:22px;--mobile-angle:4deg}.mobile-showcase .mobile-feature small{display:none}.mobile-showcase .device-orbit{height:130px;bottom:40px}.mobile-showcase .device-stage:before{bottom:40px}}
@media(prefers-reduced-motion:reduce){.mobile-showcase .phone-hardware,.mobile-showcase .mobile-feature,.mobile-showcase .device-orbit,.mobile-showcase .device-stage:before,.mobile-showcase .phone-preview:after{animation:none!important;transform:none!important}.mobile-showcase .device-orbit{transform:rotateX(67deg)!important}}
.motion-off .mobile-showcase .phone-hardware,.motion-off .mobile-showcase .mobile-feature{animation:none!important;transform:none!important}