
/* Mobile app cinematic showcase */
.mobile-experience{position:relative;overflow:hidden;background:radial-gradient(circle at 68% 52%,#34235b 0,transparent 35%),linear-gradient(180deg,#110b25,#190f34 56%,#110b25);border-block:1px solid #ffffff12}
.mobile-experience:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 40% 45%,#7b5bda1b 0 1px,transparent 2px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
.mobile-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:7%;min-height:700px}
.mobile-copy{position:relative;z-index:3}.mobile-copy h2{font-size:clamp(47px,5vw,80px);line-height:1.2;letter-spacing:-.045em;margin:22px 0}.mobile-copy h2 span{color:#a68bf3}.mobile-copy>p{max-width:500px;line-height:2;color:#bfb8d1;font-size:17px}.mobile-benefits{margin:28px 0 32px;display:grid;gap:13px}.mobile-benefits>div{display:flex;align-items:center;gap:17px;color:#ede9f6}.mobile-benefits b{color:#a68bf3;font-size:13px;letter-spacing:.08em}
.phone-stage{--phone-shift:0px;--phone-tilt:0deg;position:relative;min-height:645px;perspective:1100px;isolation:isolate}
.phone-halo{position:absolute;width:480px;height:480px;background:radial-gradient(circle,#9065ff55,transparent 64%);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);filter:blur(25px);z-index:-1}
.phone{position:absolute;width:255px;height:526px;padding:9px;border-radius:42px;background:linear-gradient(125deg,#b9a6e5,#282038 19%,#73648c 48%,#100e19 80%,#aca0c3);box-shadow:0 48px 85px #03000c88,inset 0 0 0 1px #ffffff72;overflow:hidden;will-change:transform}
.phone-front{z-index:2;top:48px;left:35%;transform:translate3d(0,var(--front-shift,0px),0) rotate(-8deg) rotateY(var(--phone-tilt));animation:phoneFloatFront 6s ease-in-out infinite}
.phone-back{top:100px;left:5%;transform:translate3d(0,var(--back-shift,0px),0) rotate(13deg) rotateY(-9deg);animation:phoneFloatBack 7s ease-in-out infinite}
.phone-camera{position:absolute;width:76px;height:21px;background:#090810;border-radius:18px;top:17px;left:50%;transform:translateX(-50%);z-index:3}
.phone-screen{height:100%;border-radius:34px;overflow:hidden;background:#f5f2fb;color:#180e30;padding:53px 15px 14px;position:relative;text-align:right}
.phone-mini-top{display:flex;justify-content:space-between;direction:ltr;align-items:center;font-size:9px;letter-spacing:.08em;font-weight:700;color:#746a90}
.app-welcome{font-size:25px;font-weight:800;margin-top:34px}.app-welcome span{color:#8060d5;float:left}.app-sub{font-size:11px;color:#766b89;margin:6px 0 22px}.app-feature{position:relative;background:linear-gradient(130deg,#7052cc,#ab8bf6);height:159px;padding:16px;border-radius:20px;color:white;overflow:hidden}.app-feature:after{content:"";position:absolute;width:175px;height:175px;left:-42px;bottom:-88px;background:#ffffff35;border-radius:50%}.app-feature-icon{font-size:22px;display:block}.app-feature small{font-size:10px;display:block;margin:6px 0}.app-feature strong{font-size:16px;line-height:1.5}.app-feature-arrow{position:absolute;bottom:15px;left:17px}.app-list-title{display:flex;justify-content:space-between;font-size:14px;font-weight:750;margin:26px 0 12px}.app-list-title span{font-size:10px;color:#8464d8}.app-row{display:flex;align-items:center;gap:11px;background:white;border-radius:14px;margin-bottom:9px;padding:10px;font-size:12px;font-weight:700}.app-row>b{background:#efe7ff;color:#7857cf;padding:7px;border-radius:10px}.app-row div{flex:1}.app-row small{display:block;color:#988daa;font-size:9px;margin-top:2px}.app-row>span{color:#a795c5}.app-tabs{display:flex;position:absolute;inset-inline:12px;bottom:12px;background:#fff;border-radius:16px;justify-content:space-around;padding:8px 0;color:#7d5ed5}.app-tabs span{display:grid;text-align:center;font-size:17px}.app-tabs small{font-size:8px;color:#685e74}
.phone-screen-secondary{background:#17102b;color:#fff;padding-top:62px}.phone-screen-secondary .phone-mini-top{color:#aa98d5}.phone-screen-heading{font-size:21px;font-weight:800;margin:42px 0 24px}.phone-graph{height:145px;display:flex;gap:10px;align-items:end;padding:10px;background:#302249;border-radius:18px}.phone-graph i{display:block;flex:1;height:var(--h,50%);background:linear-gradient(#b99bff,#7753d8);border-radius:8px 8px 2px 2px}.phone-graph i:nth-child(2){--h:73%}.phone-graph i:nth-child(3){--h:45%}.phone-graph i:nth-child(4){--h:88%}.phone-graph i:nth-child(5){--h:64%}.phone-graph i:nth-child(6){--h:96%}.phone-graph i:nth-child(7){--h:77%}.phone-stat-line{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff19;padding:18px 2px;font-size:13px;color:#b8afcc}.phone-stat-line b{color:#fff}
.phone-float{position:absolute;border:1px solid #ffffff42;background:#24163bd9;backdrop-filter:blur(15px);color:#f7f2ff;padding:12px 17px;border-radius:14px;font-size:12px;box-shadow:0 16px 40px #0a061d55;z-index:4;animation:tagFloat 4s ease-in-out infinite}.phone-float-one{right:3%;top:20%}.phone-float-two{left:4%;bottom:17%;animation-delay:1.7s}.phone-pagination{position:absolute;bottom:25px;right:42%;display:flex;gap:7px}.phone-pagination span{width:6px;height:6px;background:#675787;border-radius:6px}.phone-pagination .active{width:22px;background:#9f80ef}
@keyframes phoneFloatFront{0%,100%{translate:0 0}50%{translate:0 -16px}}@keyframes phoneFloatBack{0%,100%{translate:0 0}50%{translate:0 13px}}@keyframes tagFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:900px){.mobile-grid{grid-template-columns:1fr;gap:10px}.mobile-copy{padding-top:25px}.phone-stage{min-height:640px;max-width:530px;width:100%;margin:auto}}
@media(max-width:520px){.mobile-copy h2{font-size:47px}.phone-stage{min-height:520px;transform:scale(.8);transform-origin:top center;margin-bottom:-100px}.phone{width:245px;height:510px}.phone-front{left:32%}.phone-back{left:-6%}.phone-float-one{right:-5%}}
@media(prefers-reduced-motion:reduce){.phone-front,.phone-back,.phone-float{animation:none!important}.phone{transition:none!important}}
