/* Mobile App Development page – prefix ma- (device-showcase design) */
.ma-sec{padding:96px 0}
.ma-kick{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E3001D;margin-bottom:14px}
.ma-head{max-width:800px;margin:0 auto 52px;text-align:center}
.ma-head-l{margin-left:0;text-align:left}
.ma-head h2,.ma-why-l h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:600;line-height:1.18;letter-spacing:-.01em;color:#0b0b10;margin:0 0 16px}
.ma-head p,.ma-why-l>p{font-size:1.05rem;line-height:1.75;color:#555;margin:0}
.ma-btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 30px;font-weight:600;font-size:15px;transition:.25s;border:1px solid transparent}
.ma-btn-red{background:#E3001D;color:#fff}.ma-btn-red:hover{background:#fff;color:#E3001D}
.ma-btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}.ma-btn-ghost:hover{background:#fff;color:#000}

/* hero */
.ma-hero{position:relative;background:#07070c;color:#fff;padding:150px 0 0;overflow:hidden;isolation:isolate;text-align:center}
.ma-glow{position:absolute;left:50%;top:38%;width:1000px;height:760px;transform:translate(-50%,-30%);background:radial-gradient(closest-side,rgba(227,0,29,.5),rgba(227,0,29,.12) 55%,transparent 75%);z-index:-1}
.ma-crumbs{font-size:13px;color:#8d8d99;margin-bottom:22px}.ma-crumbs a{color:#fff}.ma-crumbs span{margin:0 8px}
.ma-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:500;margin-bottom:22px}
.ma-pill i{color:#ff6b7d}
.ma-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:600;line-height:1.1;letter-spacing:-.02em;max-width:900px;margin:0 auto 20px;color:#fff}
.ma-hero h1 em{font-style:normal;background:linear-gradient(100deg,#ff8d9b,#E3001D 55%,#ff7a3d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ma-lead{font-size:1.1rem;line-height:1.75;color:#c4c4cf;max-width:680px;margin:0 auto 30px}
.ma-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:26px}
.ma-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center}
.ma-tags li{font-size:14px;color:#b8b8c4;position:relative;padding-left:16px}
.ma-tags li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:#E3001D}
.ma-stage{position:relative;height:420px;margin-top:56px;display:flex;justify-content:center;align-items:flex-start;gap:34px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.ma-phone{flex:none;width:236px;height:490px;border-radius:40px;background:#15151d;padding:9px;border:2px solid #2b2b38;box-shadow:0 40px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .4s}
.ma-p1{transform:translateY(60px) rotate(-6deg)}
.ma-p2{transform:translateY(0);z-index:2;box-shadow:0 40px 90px rgba(227,0,29,.35),0 0 0 1px rgba(255,255,255,.08)}
.ma-p3{transform:translateY(60px) rotate(6deg)}
.ma-hero:hover .ma-p1{transform:translateY(48px) rotate(-8deg)}.ma-hero:hover .ma-p3{transform:translateY(48px) rotate(8deg)}
.ma-scr{position:relative;height:100%;border-radius:32px;background:#fff;color:#0b0b10;overflow:hidden;padding:36px 14px 14px;text-align:left;font-size:12px}
.ma-scr-red{background:linear-gradient(180deg,#E3001D 0,#a3001a 46%,#fff 46%)}
.ma-notch{position:absolute;left:50%;top:8px;width:70px;height:18px;border-radius:12px;background:#15151d;transform:translateX(-50%)}
.ma-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ma-top b{font-size:14px}.ma-top i{color:#888}
.ma-scr-red .ma-top,.ma-scr-red .ma-top i{color:#fff}
.ma-kpi{background:linear-gradient(135deg,#E3001D,#8a0012);color:#fff;border-radius:16px;padding:12px 14px;margin-bottom:12px}
.ma-kpi span{display:block;font-size:11px;opacity:.85}.ma-kpi strong{font-size:24px;display:block;line-height:1.2}
.ma-kpi svg{width:100%;height:34px;margin-top:4px}
.ma-bars{display:flex;align-items:flex-end;gap:7px;height:86px;margin-bottom:12px}
.ma-bars i{flex:1;background:#f1d3d8;border-radius:6px 6px 2px 2px}.ma-bars i:nth-child(4),.ma-bars i:nth-child(6){background:#E3001D}
.ma-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #eee}
.ma-row span{width:26px;height:26px;border-radius:8px;background:#fff0f2}.ma-row p{flex:1;margin:0}.ma-row b{color:#E3001D}
.ma-hero-card{background:#0b0b10;color:#fff;border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.ma-hero-card small{opacity:.7;display:block}.ma-hero-card strong{font-size:22px;display:block;margin:2px 0}.ma-hero-card span{font-size:11px;opacity:.7}
.ma-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ma-grid div{background:#fff;border:1px solid #eee;border-radius:14px;padding:12px 8px;text-align:center;font-weight:500;font-size:11px;box-shadow:0 6px 14px rgba(0,0,0,.05)}
.ma-grid i{display:block;color:#E3001D;font-size:16px;margin-bottom:6px}
.ma-list span{display:block;height:34px;border-radius:10px;background:#f4f4f7;margin-bottom:8px}
.ma-nav{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-around;background:#0b0b10;color:#fff;border-radius:16px;padding:12px 0}
.ma-nav i:first-child{color:#ff6b7d}
.ma-bub{max-width:82%;padding:9px 12px;border-radius:14px;margin-bottom:9px;font-size:11.5px;line-height:1.4}
.ma-l{background:#f2f2f6;border-radius:14px 14px 14px 4px}.ma-r{background:#E3001D;color:#fff;margin-left:auto;border-radius:14px 14px 4px 14px}
.ma-map{height:104px;border-radius:14px;margin:8px 0;background:linear-gradient(135deg,#e8eef6,#d7e2ee);display:grid;place-items:center;position:relative}
.ma-map::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.7) 14px 16px);border-radius:14px}
.ma-map i{position:relative;color:#E3001D;font-size:26px}
.ma-input{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;background:#f4f4f7;border-radius:14px;padding:11px 14px;color:#888}.ma-input i{color:#E3001D}

/* kinds */
.ma-kinds{background:#fff}
.ma-kinds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ma-kinds-grid article{border:1px solid #ececf2;border-radius:22px;padding:30px 24px;background:#f7f7fa;transition:.25s}
.ma-kinds-grid article:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.08);background:#fff;border-color:#ffb3bd}
.ma-kinds-grid span{width:54px;height:54px;border-radius:16px;background:#0b0b10;color:#fff;display:grid;place-items:center;font-size:20px;margin-bottom:18px;transition:.25s}
.ma-kinds-grid article:hover span{background:#E3001D}
.ma-kinds-grid h3{font-size:1.15rem;font-weight:600;margin:0 0 8px;color:#0b0b10}
.ma-kinds-grid p{margin:0;color:#5a5a66;line-height:1.65;font-size:.95rem}

/* services wall */
.ma-services{background:#f5f5f8}
.ma-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ma-wall article{position:relative;background:#fff;border:1px solid #ececf2;border-radius:20px;padding:26px 22px 24px;overflow:hidden;transition:.3s;min-height:230px;outline:0}
.ma-wall article::after{content:'';position:absolute;inset:auto -30% -60% auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(227,0,29,.18),transparent 70%);opacity:0;transition:.3s}
.ma-wall article:hover,.ma-wall article:focus{transform:translateY(-6px);border-color:#E3001D;box-shadow:0 22px 44px rgba(227,0,29,.12)}
.ma-wall article:hover::after,.ma-wall article:focus::after{opacity:1}
.ma-n{position:absolute;right:18px;top:12px;font-size:2.3rem;font-weight:700;line-height:1;color:rgba(11,11,16,.06)}
.ma-wall i{color:#E3001D;font-size:24px;margin-bottom:16px;display:block}
.ma-wall h3{font-size:1.05rem;font-weight:600;margin:0 0 8px;color:#0b0b10;position:relative}
.ma-wall p{margin:0;color:#5a5a66;line-height:1.6;font-size:.92rem;position:relative}

/* strip */
.ma-strip{background:#E3001D;color:#fff;overflow:hidden;padding:16px 0}
.ma-strip-track{display:flex;gap:42px;width:max-content;animation:maScroll 36s linear infinite}
.ma-strip span{font-size:1rem;font-weight:600;white-space:nowrap;letter-spacing:.03em}
.ma-strip span::after{content:'\25C6';margin-left:42px;opacity:.6;font-size:.6em;vertical-align:2px}
@keyframes maScroll{to{transform:translateX(-50%)}}

/* process timeline */
.ma-process{background:#07070c;color:#fff;position:relative;overflow:hidden}
.ma-process::before{content:'';position:absolute;width:700px;height:700px;right:-280px;top:-260px;background:radial-gradient(circle,rgba(227,0,29,.3),transparent 65%)}
.ma-process .container{position:relative}
.ma-process .ma-head h2{color:#fff}.ma-process .ma-head p{color:#b8b8c4}
.ma-tl{list-style:none;margin:0 auto;padding:0;max-width:980px;position:relative}
.ma-tl::before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:linear-gradient(#E3001D,rgba(227,0,29,.1));transform:translateX(-50%)}
.ma-tl li{position:relative;width:50%;padding:0 54px 40px 0;text-align:right}
.ma-tl li.r{margin-left:50%;padding:0 0 40px 54px;text-align:left}
.ma-step{position:absolute;top:0;right:-20px;width:40px;height:40px;border-radius:50%;background:#E3001D;display:grid;place-items:center;font-weight:700;box-shadow:0 0 0 8px #07070c,0 0 24px rgba(227,0,29,.6)}
.ma-tl li.r .ma-step{right:auto;left:-20px}
.ma-tl small{display:block;color:#ff8d9b;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.ma-tl h3{font-size:1.3rem;font-weight:600;margin:0 0 8px;color:#fff}
.ma-tl p{margin:0;color:#c4c4cf;line-height:1.7}

/* models: expanding cards */
.ma-models{background:#fff}
.ma-flex{display:flex;gap:14px;height:340px}
.ma-flex article{flex:1;position:relative;border-radius:24px;background:#f5f5f8;border:1px solid #ececf2;padding:28px 24px;overflow:hidden;cursor:pointer;transition:flex .45s cubic-bezier(.3,.8,.3,1),background .3s,color .3s;outline:0;display:flex;flex-direction:column}
.ma-flex article.on{flex:3;background:linear-gradient(160deg,#0b0b10,#2a000a);color:#fff;border-color:#0b0b10}
.ma-flex i{font-size:24px;color:#E3001D;margin-bottom:14px}
.ma-flex h3{font-size:1.2rem;font-weight:600;margin:0 0 10px;white-space:nowrap}
.ma-more{opacity:0;max-height:0;transition:opacity .3s .1s}
.ma-flex article.on .ma-more{opacity:1;max-height:300px}
.ma-more p{margin:0 0 14px;color:#c9c9d6;line-height:1.7;font-size:.95rem}
.ma-more b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff8d9b;margin-bottom:4px}
.ma-more span{color:#fff;font-size:.95rem}

/* industries */
.ma-ind{background:#f5f5f8}
.ma-ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ma-ind-grid div{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #ececf2;border-radius:16px;padding:18px 20px;font-weight:500;color:#0b0b10;transition:.25s}
.ma-ind-grid div:hover{transform:translateY(-4px);border-color:#E3001D;box-shadow:0 16px 34px rgba(0,0,0,.07)}
.ma-ind-grid i{width:42px;height:42px;border-radius:12px;background:#fff0f2;color:#E3001D;display:grid;place-items:center;font-size:16px;flex:none}

/* why */
.ma-why{background:#07070c;color:#fff;position:relative;overflow:hidden}
.ma-why::before{content:'';position:absolute;width:680px;height:680px;left:-260px;bottom:-260px;background:radial-gradient(circle,rgba(227,0,29,.3),transparent 65%)}
.ma-why-in{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;position:relative}
.ma-why-l h2{color:#fff}.ma-why-l>p{color:#c4c4cf;margin-bottom:26px}
.ma-facts{list-style:none;margin:0 0 30px;padding:0;display:flex;gap:40px}
.ma-facts b{display:block;font-size:2.4rem;font-weight:700;color:#E3001D;line-height:1.1}
.ma-facts span{font-size:.9rem;color:#b8b8c4}
.ma-why-r{display:grid;gap:14px}
.ma-why-r article{display:flex;gap:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px 24px;transition:.25s}
.ma-why-r article:hover{border-color:rgba(227,0,29,.7);background:rgba(227,0,29,.08)}
.ma-why-r article>span{flex:none;width:48px;height:48px;border-radius:14px;background:#E3001D;display:grid;place-items:center;font-size:18px}
.ma-why-r h3{font-size:1.1rem;font-weight:600;margin:0 0 5px;color:#fff}
.ma-why-r p{margin:0;color:#c4c4cf;font-size:.94rem;line-height:1.65}

@media(max-width:1100px){.ma-wall,.ma-ind-grid{grid-template-columns:repeat(3,1fr)}.ma-kinds-grid{grid-template-columns:1fr 1fr}.ma-p1,.ma-p3{display:none}}
@media(max-width:991px){
  .ma-sec{padding:68px 0}
  .ma-hero{padding:120px 0 0}
  .ma-stage{height:380px}
  .ma-why-in{grid-template-columns:1fr;gap:34px}
  .ma-wall,.ma-ind-grid{grid-template-columns:1fr 1fr}
  .ma-flex{flex-direction:column;height:auto}
  .ma-flex article,.ma-flex article.on{flex:none}
  .ma-more{opacity:1;max-height:none;margin-top:6px}
  .ma-flex article:not(.on){background:#f5f5f8;color:#0b0b10}
  .ma-flex article:not(.on) .ma-more p{color:#5a5a66}.ma-flex article:not(.on) .ma-more b{color:#E3001D}.ma-flex article:not(.on) .ma-more span{color:#0b0b10}
}
@media(max-width:720px){
  .ma-tl::before{left:20px}
  .ma-tl li,.ma-tl li.r{width:100%;margin-left:0;padding:0 0 34px 60px;text-align:left}
  .ma-step,.ma-tl li.r .ma-step{left:0;right:auto}
}
@media(max-width:600px){
  .ma-kinds-grid,.ma-wall,.ma-ind-grid{grid-template-columns:1fr}
  .ma-phone{width:210px;height:440px}
  .ma-stage{height:340px}
  .ma-facts{gap:26px}
}
@media(prefers-reduced-motion:reduce){.ma-strip-track{animation:none}.ma-hero:hover .ma-p1,.ma-hero:hover .ma-p3{transform:none}}