/* Mobile app development pages: showcase layout. Loaded only on those pages. */
.mx-hero{position:relative;overflow:hidden;color:#fff;padding:8.5rem 0 4.5rem;background:radial-gradient(70% 80% at 85% 0,#6C2DB3 0,transparent 60%),radial-gradient(60% 70% at 0 100%,#3b1670 0,transparent 65%),linear-gradient(160deg,#150B26,#240F44 60%,#2A1250)}
.mx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.mx-orb-a{width:360px;height:360px;right:-80px;top:80px;background:#b06bf0}
.mx-orb-b{width:300px;height:300px;left:-100px;bottom:-60px;background:#5C239A}
.mx-hero .wrap{position:relative;z-index:1}
.mx-crumbs{margin-bottom:1.6rem;font-size:.85rem}
.mx-crumbs,.mx-crumbs *{color:rgba(255,255,255,.72)!important}.mx-crumbs a:hover{color:#fff!important}
.mx-hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.mx-hero-grid{grid-template-columns:1.05fr .95fr;gap:4rem}}
.mx-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#e5d4fb}
.mx-h1{margin:1.1rem 0 0;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.025em;font-weight:700;color:#fff}
.mx-h1 .gradient-text{background:linear-gradient(100deg,#d9b8ff,#b06bf0 55%,#8f4be0);-webkit-background-clip:text;background-clip:text;color:transparent}
.mx-lead{margin:1.4rem 0 0;max-width:36rem;font-size:1.12rem;line-height:1.65;color:rgba(255,255,255,.82)}
.mx-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.mx-ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
.mx-ghost:hover{background:rgba(255,255,255,.16)!important}
.mx-badges{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:1.8rem 0 0;padding:0;list-style:none;font-size:.9rem;color:rgba(255,255,255,.85)}
.mx-badges li{display:flex;align-items:center;gap:.4rem}.mx-badges svg{width:1.05rem;height:1.05rem;color:#b9ff7a}
.mx-media{position:relative;padding:0 0 1.6rem}
.mx-photo{position:relative;aspect-ratio:4/3.3;overflow:hidden;border-radius:32px;border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 8px rgba(255,255,255,.06)}
.mx-photo img{width:100%;height:100%;object-fit:cover}
.mx-float{position:absolute;display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1.05rem;border-radius:18px;background:#fff;color:#150B26;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);font-size:.78rem}
.mx-float b{font-size:.92rem}.mx-float span{color:#6b5a84}
.mx-float-a{flex-direction:row;gap:.4rem;left:-1rem;top:2rem;padding:.55rem .7rem}
.mx-float-a .x-tool{box-shadow:none;border-color:#eadff8}
.mx-float-b{right:-.6rem;top:46%}.mx-float-c{left:1.2rem;bottom:0}
@media(max-width:640px){.mx-hero{padding:7rem 0 3rem}.mx-float-a{left:.4rem}.mx-float-b{right:.4rem;top:auto;bottom:3.4rem}.mx-float-c{left:.4rem}}
/* stats band */
.mx-stats{background:#150B26;color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.mx-stats ul{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;padding:0;list-style:none}
@media(min-width:900px){.mx-stats ul{grid-template-columns:repeat(4,1fr)}}
.mx-stats li{padding:1.5rem 1rem;text-align:center}
.mx-stats b{display:block;font-size:clamp(1.15rem,2.6vw,1.6rem);font-weight:700;color:#d9b8ff}
.mx-stats span{display:block;margin-top:.2rem;font-size:.82rem;color:rgba(255,255,255,.7)}
.mx-stats li:nth-child(5){display:none}
@media(min-width:900px){.mx-stats li:nth-child(5){display:block}.mx-stats ul{grid-template-columns:repeat(4,1fr)}.mx-stats li:nth-child(5){grid-column:auto}}
/* overview split */
.mx-split{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1024px){.mx-split{grid-template-columns:.9fr 1.1fr;gap:4rem}}
.mx-split-img{overflow:hidden;border-radius:28px;box-shadow:0 30px 60px -30px rgba(66,26,120,.5)}
.mx-split-img img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
.mx-checks{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.mx-checks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.97rem}.mx-checks svg{flex:none;width:1.15rem;height:1.15rem;margin-top:.2rem;color:#5C239A}
/* service cards with images */
.mx-svc-grid{display:grid;gap:1.3rem;grid-template-columns:1fr}
@media(min-width:640px){.mx-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mx-svc-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.mx-svc-grid{grid-template-columns:repeat(4,1fr)}}
.mx-svc{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#fff;border:1px solid rgba(21,11,38,.08);text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.mx-svc:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(66,26,120,.55)}
.mx-svc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#f4ecfd}
.mx-svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.mx-svc:hover .mx-svc-img img{transform:scale(1.05)}
.mx-svc-body{display:flex;flex-direction:column;gap:.55rem;padding:1.25rem 1.3rem 1.4rem;flex:1}
.mx-svc-body .x-ico{margin-top:-2.4rem;position:relative;box-shadow:0 10px 24px -8px rgba(92,35,154,.6)}
.mx-svc h3{margin:.2rem 0 0;font-size:1.12rem;line-height:1.25}
.mx-svc p{margin:0;font-size:.92rem;line-height:1.55;color:#4a3a63}
.mx-svc .x-more{margin-top:auto;padding-top:.4rem}
.mx-svc-cta{justify-content:center;gap:.9rem;padding:1.8rem;background:linear-gradient(150deg,#6C2DB3,#2A1250);color:#fff;border:0}
.mx-svc-cta h3{font-size:1.35rem;color:#fff}.mx-svc-cta p{color:rgba(255,255,255,.82)}
/* options */
.mx-options{display:grid;gap:1.3rem}
@media(min-width:900px){.mx-options{grid-template-columns:repeat(3,1fr)}}
.mx-opt{padding:1.8rem;border-radius:26px;background:#fff;border:1px solid rgba(21,11,38,.09);box-shadow:0 20px 40px -30px rgba(66,26,120,.5)}
.mx-opt:nth-child(2){background:linear-gradient(170deg,#faf5ff,#f1e6fd);border-color:#d9b8ff}
.mx-opt h3{margin:0;font-size:1.35rem}.mx-opt-sub{margin:.2rem 0 1rem;color:#6b5a84;font-size:.9rem;font-weight:600}
.mx-opt ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.mx-opt li{display:flex;gap:.55rem;font-size:.95rem}.mx-opt li svg{flex:none;width:1.1rem;height:1.1rem;margin-top:.2rem;color:#5C239A}
.mx-opt-watch{margin:1.2rem 0 0;padding-top:1rem;border-top:1px dashed rgba(21,11,38,.15);font-size:.88rem;color:#4a3a63}
/* tech stack */
.mx-stack{padding:5rem 0;color:#fff;background:radial-gradient(60% 60% at 100% 0,#4a1c7e 0,transparent 60%),linear-gradient(160deg,#150B26,#2A1250)}
.mx-stack .x-head p{color:rgba(255,255,255,.75)}.mx-light{color:#fff!important}
.mx-marq{margin:.5rem 0 2.2rem;padding:.4rem 0}
.mx-bigtool{padding:.9rem 1.4rem!important;font-size:1.02rem!important;border-radius:18px!important;background:#fff!important;color:#150B26!important;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.mx-bigtool img{width:34px!important;height:34px!important}
.mx-stack-grid{display:grid;gap:1.1rem}
@media(min-width:700px){.mx-stack-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.mx-stack-grid{grid-template-columns:repeat(3,1fr)}}
.mx-stack-card{padding:1.4rem 1.5rem;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.mx-stack-card h3{margin:0 0 .9rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#d9b8ff}
.mx-stack-card .x-tools{margin:0!important;justify-content:flex-start!important}
/* steps */
.mx-steps{display:grid;gap:1.1rem;margin:0;padding:0;list-style:none;counter-reset:s}
@media(min-width:760px){.mx-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.mx-steps{grid-template-columns:repeat(5,1fr)}}
.mx-steps li{position:relative;padding:1.6rem 1.3rem;border-radius:24px;background:#fff;border:1px solid rgba(21,11,38,.09);box-shadow:0 20px 40px -32px rgba(66,26,120,.55)}
.mx-num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:14px;background:linear-gradient(135deg,#7a35c4,#431a78);color:#fff;font-weight:700}
.mx-steps h3{margin:.9rem 0 .35rem;font-size:1.1rem}.mx-steps p{margin:0;font-size:.92rem;line-height:1.55;color:#4a3a63}
/* mid band */
.mx-band{padding:3.2rem 0;color:#fff;background:linear-gradient(120deg,#5C239A,#2A1250)}
.mx-band .wrap{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between}
.mx-band h2{margin:0;max-width:34rem;font-size:clamp(1.4rem,3.2vw,2rem);line-height:1.2;color:#fff}.mx-band p{margin:.5rem 0 0;color:rgba(255,255,255,.82)}
.mx-band-btns{display:flex;flex-wrap:wrap;gap:.8rem}
.mx-svc .x-more{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
@media(min-width:1100px){.mx-stack-card:last-child:nth-child(3n+2){grid-column:span 2}}
.mx-marq+.mx-marq{margin-top:-.6rem}.mx-stack{padding-bottom:4.2rem}
.mx-step-img{display:block;aspect-ratio:16/10;margin:-1.6rem -1.3rem 1rem;overflow:hidden;border-radius:24px 24px 0 0;background:#f4ecfd}
.mx-step-img img{width:100%;height:100%;object-fit:cover}
.mx-steps li .mx-num{margin-top:-2.3rem;position:relative;box-shadow:0 10px 22px -8px rgba(92,35,154,.7);border:3px solid #fff}
@media(min-width:1024px){.mx-split-rev{grid-template-columns:1.05fr .95fr}.mx-split-rev .mx-duo{order:2}}
.mx-duo{position:relative;padding:0 0 3.5rem}
.mx-duo-a{display:block;overflow:hidden;border-radius:28px;box-shadow:0 30px 60px -30px rgba(66,26,120,.5)}
.mx-duo-a img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
.mx-duo-b{position:absolute;right:-.8rem;bottom:0;width:52%;overflow:hidden;border-radius:22px;border:6px solid #fff;box-shadow:0 24px 50px -20px rgba(21,11,38,.5)}
.mx-duo-b img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:640px){.mx-duo-b{right:0}}

/* Hero v2: code photo as the background, dark shadow over the left half */
.mx-hero{background:#150B26 var(--mx-bg,none) center right/cover no-repeat;min-height:640px}
.mx-hero .mx-orb{display:none}
.mx-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(21,11,38,.98) 0%,rgba(21,11,38,.94) 30%,rgba(28,12,52,.78) 50%,rgba(36,15,68,.32) 72%,rgba(36,15,68,.12) 100%),linear-gradient(180deg,rgba(21,11,38,.55) 0%,transparent 28%,transparent 75%,rgba(21,11,38,.7) 100%)}
.mx-hero-grid{grid-template-columns:1fr}
@media(min-width:1024px){.mx-hero-grid{grid-template-columns:1.1fr .9fr;min-height:480px}}
.mx-media{position:relative;min-height:420px;padding:0}
.mx-float{box-shadow:0 20px 44px -14px rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.mx-float-a{left:auto;right:6%;top:8%}
.mx-float-b{right:0;top:36%}
.mx-float-c{left:10%;top:56%;bottom:auto}
.mx-float-d{right:8%;bottom:6%}
@media(max-width:1023px){.mx-media{min-height:0;display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}.mx-float{position:static}.mx-shade{background:linear-gradient(180deg,rgba(21,11,38,.93),rgba(21,11,38,.86))}}