/* Mobile-app landing page. Base colours, typography and shared controls are
   inherited from webadvert.css; shared header styles come from custom-software.css. */
.ma-hero { position: relative; overflow: hidden; padding: clamp(62px,10vw,112px) 0; background: radial-gradient(ellipse 58% 74% at 5% 0%,rgba(4,117,182,.17),transparent 68%),radial-gradient(ellipse 48% 72% at 98% 88%,rgba(26,174,143,.17),transparent 66%),var(--paper); }
.ma-hero::after { content: ''; position: absolute; top: -340px; right: 10%; width: 620px; height: 620px; border: 1px solid rgba(4,117,182,.07); border-radius: 50%; pointer-events: none; }
.ma-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(300px,.92fr); align-items: center; gap: clamp(34px,8vw,110px); }
.ma-copy h1 { max-width: 11ch; margin: 0 0 18px; font-family: var(--f-d); font-size: clamp(2.3rem,1.5rem + 3.4vw,4.4rem); font-weight: 600; line-height: 1.01; letter-spacing: -.05em; }
.ma-copy > p { max-width: 57ch; color: var(--ink-2); font-size: clamp(1rem,.94rem + .35vw,1.16rem); }
.ma-hero-actions { justify-content: flex-start; margin-top: 30px; }
.ma-phone-wrap { position: relative; min-height: 480px; display: grid; place-items: center; }
.ma-phone { position: relative; width: 256px; height: 485px; padding: 14px; border: 8px solid #102331; border-radius: 35px; color: #eaf9ff; background: linear-gradient(160deg,#0a5073 0%,#097f8c 56%,#10a77c 100%); box-shadow: 0 24px 55px rgba(10,72,97,.31), inset 0 0 0 1px rgba(255,255,255,.12); transform: rotate(6deg); overflow: hidden; }
.ma-phone::before { content: ''; position: absolute; width: 150px; height: 150px; top: 56px; right: -78px; border-radius: 50%; background: rgba(255,255,255,.11); }
.ma-phone-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: rgba(234,249,255,.78); font-size: 9px; font-weight: 700; }
.ma-phone-top i { width: 50px; height: 14px; border-radius: 99px; background: #0a2635; }
.ma-phone-top b { width: 28px; height: 10px; border: 1px solid rgba(234,249,255,.7); border-radius: 3px; }
.ma-app-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 23px; font-size: 12px; }
.ma-app-head span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.15); }
.ma-app-head i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #72efb9; box-shadow: 0 0 0 4px rgba(114,239,185,.16); }
.ma-screen-copy { position: relative; z-index: 1; margin-top: 37px; }
.ma-screen-copy small { display: block; color: rgba(234,249,255,.7); font-size: 10px; }
.ma-screen-copy strong { display: block; margin-top: 5px; font-family: var(--f-d); font-size: 21px; font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
.ma-screen-cards { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 25px; }
.ma-screen-cards > div { min-height: 114px; padding: 12px 10px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(4,28,39,.22); }
.ma-screen-cards span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: rgba(255,255,255,.15); }
.ma-screen-cards b { display: block; margin-top: 18px; font-size: 12px; }
.ma-screen-cards small { display: block; margin-top: 3px; color: rgba(234,249,255,.68); font-size: 8.5px; line-height: 1.35; }
.ma-screen-line { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 22px; }
.ma-screen-line i { height: 8px; border-radius: 99px; background: rgba(255,255,255,.15); }
.ma-screen-line i:nth-child(2) { width: 78%; } .ma-screen-line i:nth-child(3) { width: 58%; }
.ma-screen-nav { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-around; height: 55px; color: rgba(234,249,255,.65); border-top: 1px solid rgba(255,255,255,.14); background: rgba(4,30,40,.18); }
.ma-phone .ico { width: 17px; height: 17px; }
.ma-float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid rgba(4,117,182,.12); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.93); box-shadow: var(--e-2); font-size: 11px; font-weight: 700; }
.ma-float-a { left: -10px; top: 90px; } .ma-float-b { right: -31px; bottom: 85px; }
.ma-float .ico { color: var(--brand); }

.ma-fit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.ma-fit-card { padding: 21px 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--e-1); }
.ma-fit-card > span,.ma-capability-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; color: var(--brand); background: linear-gradient(135deg,rgba(4,117,182,.12),rgba(26,174,143,.08)); }
.ma-fit-card h3 { margin-top: 17px; font-family: var(--f-d); font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.ma-fit-card p { margin-top: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.ma-capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ma-capability { padding: 27px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--e-1); }
.ma-capability h3 { margin-top: 18px; font-family: var(--f-d); font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.ma-capability p { margin-top: 7px; color: var(--ink-2); font-size: 14px; line-height: 1.62; }
.ma-capability ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 13px; margin-top: 20px; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.ma-capability li { position: relative; padding-left: 17px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.ma-capability li::before { content: ''; position: absolute; top: .5em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.ma-lifecycle { background: radial-gradient(ellipse 60% 80% at 0% 50%,rgba(4,117,182,.08),transparent 68%),var(--paper); }
.ma-lifecycle-in { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: clamp(32px,8vw,96px); align-items: start; }
.ma-lifecycle h2 { max-width: 10ch; margin-top: 10px; font-family: var(--f-d); font-size: clamp(1.8rem,1.25rem + 2.2vw,3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; }
.ma-lifecycle > div > p { max-width: 44ch; margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.ma-lifecycle-list { display: grid; gap: 11px; }
.ma-lifecycle-list > div { display: grid; grid-template-columns: 43px minmax(0,1fr); column-gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.78); box-shadow: var(--e-1); }
.ma-lifecycle-list span { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg,rgba(4,117,182,.12),rgba(26,174,143,.08)); color: var(--brand); font-family: var(--f-d); font-size: 14px; font-weight: 600; }
.ma-lifecycle-list strong { align-self: end; font-family: var(--f-d); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.ma-lifecycle-list p { grid-column: 2; margin-top: 4px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.ma-process .lp-step { background: rgba(255,255,255,.8); }
.ma-process .lp-step h3 { font-family: var(--f-d); font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.lp-final .lp-eyebrow { color: #aee9ff; border-color: rgba(174,233,255,.22); background: rgba(174,233,255,.1); }

@media (max-width: 900px) { .ma-hero-in { grid-template-columns: minmax(0,1fr) minmax(285px,.82fr); gap: 34px; } .ma-fit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .ma-hero { padding: 38px 0 43px; } .ma-hero-in { grid-template-columns: 1fr; gap: 27px; } .ma-copy h1 { max-width: 13ch; font-size: clamp(2rem,1.4rem + 4vw,2.65rem); } .ma-copy > p { font-size: 14px; } .ma-hero-actions { margin-top: 21px; } .ma-hero-actions .lp-btn { flex: 1 1 0; padding: 12px 11px; font-size: 13px; } .ma-phone-wrap { min-height: 420px; } .ma-phone { width: 226px; height: 430px; transform: rotate(4deg); } .ma-screen-copy { margin-top: 26px; } .ma-screen-copy strong { font-size: 18px; } .ma-screen-cards { margin-top: 19px; } .ma-screen-cards > div { min-height: 101px; } .ma-float-b { right: -3px; bottom: 48px; } .ma-float-a { left: 0; top: 72px; } .ma-fit-grid,.ma-capability-grid { grid-template-columns: 1fr; } .ma-fit-card { padding: 17px; } .ma-fit-card h3 { margin-top: 13px; } .ma-capability { padding: 21px 18px; } .ma-capability h3 { margin-top: 14px; font-size: 19px; } .ma-capability ul { grid-template-columns: 1fr; margin-top: 16px; } .ma-lifecycle-in { grid-template-columns: 1fr; gap: 27px; } .ma-lifecycle h2 { max-width: 14ch; } }
@media (max-width: 390px) { .ma-phone-wrap { min-height: 390px; } .ma-phone { width: 207px; height: 395px; padding: 12px; } .ma-screen-copy { margin-top: 22px; } .ma-screen-cards > div { min-height: 88px; } .ma-screen-cards b { margin-top: 11px; } .ma-float { padding: 8px 9px; font-size: 10px; } }