.page-mobile-app-development { --ma-ink: #19151f; --ma-soft: #6f6878; --ma-paper: #f7f6f9; --ma-card: #fff; }.ma-phone { --pw: 280px; position: relative; flex-shrink: 0; width: var(--pw); aspect-ratio: 9 / 19; padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .165); background: linear-gradient(150deg, #3a3144, #0b0710 38%, #1d1527); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .55), 0 60px 90px -46px rgba(10, 6, 16, .9); }
.ma-phone::before { content: ""; position: absolute; right: -2px; top: 24%; width: 3px; height: 11%; border-radius: 0 3px 3px 0; background: #2a2233; }
.ma-phone__screen { position: relative; height: 100%; overflow: hidden; container-type: inline-size; border-radius: calc(var(--pw) * .135); background: var(--ma-paper); color: var(--ma-ink); font-family: var(--font-body); text-align: left; }
.ma-phone__status { position: absolute; inset: 0 0 auto; z-index: 4; display: flex; align-items: center; justify-content: space-between; height: 11cqi; padding: 1.4cqi 8cqi 0; font: 600 4.1cqi / 1 var(--font-body); }
.ma-phone__island { position: absolute; left: 50%; top: 2.8cqi; width: 27cqi; height: 7.6cqi; translate: -50% 0; border-radius: 99px; background: #050307; }
.ma-phone__sys { display: flex; align-items: flex-end; gap: .9cqi; height: 3cqi; }
.ma-phone__sys i { width: 1.1cqi; border-radius: 1px; background: currentColor; }
.ma-phone__sys i:nth-child(1) { height: 45%; }
.ma-phone__sys i:nth-child(2) { height: 70%; }
.ma-phone__sys i:nth-child(3) { width: 5.6cqi; height: 100%; border-radius: .9cqi; }.ma-app,
.ma-bs__ui { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 3.6cqi; padding: 15cqi 5.5cqi 22cqi; }
.ma-app__hello { display: grid; gap: .6cqi; margin: 0; }
.ma-app__hello span { font-size: 3.6cqi; color: var(--ma-soft); }
.ma-app__hello b { font: 900 8.4cqi / .9 var(--font-heading); text-transform: uppercase; }
.ma-app__next { display: grid; justify-items: start; gap: 1.2cqi; padding: 5cqi; border-radius: 5cqi; background: radial-gradient(ellipse 90% 90% at 90% 0%, var(--dc-purple-bright), var(--dc-purple) 60%); color: #fff; box-shadow: 0 5cqi 10cqi -6cqi rgba(103, 33, 223, .7); }
.ma-app__label { font: 500 2.9cqi / 1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.ma-app__class { font: 900 8cqi / .95 var(--font-heading); text-transform: uppercase; }
.ma-app__meta { font-size: 3.5cqi; opacity: .85; }
.ma-app__btn { margin-top: 2cqi; padding: 2.2cqi 4.6cqi; border-radius: 99px; background: var(--dc-lime); color: var(--dc-purple-black); font: 700 3.5cqi / 1 var(--font-body); }
.ma-app__h { margin: 1cqi 0 0; font: 500 3cqi / 1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ma-soft); }
.ma-app__list { display: grid; align-content: start; }
.ma-app__list li { display: grid; grid-template-columns: 10cqi minmax(0, 1fr) auto; align-items: center; gap: 3cqi; padding: 3cqi 0; border-bottom: 1px solid rgba(25, 21, 31, .08); }
.ma-app__list time { font: 500 3.2cqi / 1 var(--font-mono); color: var(--ma-soft); }
.ma-app__list span { display: grid; gap: .6cqi; min-width: 0; }
.ma-app__list b { font-size: 4cqi; font-weight: 600; }
.ma-app__list em { font-size: 3.2cqi; font-style: normal; color: var(--ma-soft); }
.ma-app__list i { width: 6cqi; height: 6cqi; border-radius: 50%; border: 1px solid rgba(103, 33, 223, .35); background: radial-gradient(circle, var(--dc-purple) 0 22%, transparent 26%); }
.ma-app__tabs { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3cqi 3cqi 7cqi; border-top: 1px solid rgba(25, 21, 31, .07); background: rgba(255, 255, 255, .92); }
.ma-app__tabs span { display: grid; justify-items: center; gap: 1.2cqi; font-size: 2.9cqi; font-weight: 500; color: var(--ma-soft); }
.ma-app__tabs i { width: 5.2cqi; height: 5.2cqi; border-radius: 1.5cqi; border: 1.5px solid currentColor; }
.ma-app__tabs .is-on { color: var(--dc-purple); }
.ma-app__tabs .is-on i { background: currentColor; }.ma-push { position: absolute; left: 3.4cqi; right: 3.4cqi; top: 12cqi; z-index: 5; display: grid; grid-template-columns: 9cqi minmax(0, 1fr); align-items: start; gap: 3cqi; padding: 3.4cqi; border-radius: 5.5cqi; background: rgba(250, 249, 252, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4cqi 12cqi -4cqi rgba(20, 13, 29, .5), 0 0 0 1px rgba(25, 21, 31, .06); font-size: 3.4cqi; line-height: 1.3; }
.ma-push__icon { display: grid; place-items: center; width: 9cqi; height: 9cqi; border-radius: 2.4cqi; background: var(--dc-purple); }
.ma-push__icon svg { width: 58%; }
.ma-push__txt { display: grid; min-width: 0; }
.ma-push__top { display: flex; justify-content: space-between; font-size: 2.9cqi; color: var(--ma-soft); text-transform: uppercase; letter-spacing: .06em; }
.ma-push__top b { font-weight: 600; }
.ma-push__top em { font-style: normal; text-transform: none; letter-spacing: 0; }
.ma-push__txt > b { font-weight: 700; }
.ma-push__txt > span:last-child { color: #3d3645; }.is-motion .ma-push { opacity: 0; transform: translateY(-150%); }
.is-motion .ma-hero.is-live .ma-push { animation: maPush 10s var(--ease-expo) .9s infinite; }
@keyframes maPush {
0% { opacity: 0; transform: translateY(-150%); }
7%, 64% { opacity: 1; transform: none; }
74%, 100% { opacity: 0; transform: translateY(-150%); }
}.ma-hero__glow { position: absolute; inset: -20% -10% auto 40%; height: 100%; background: radial-gradient(closest-side, rgba(123, 44, 240, .32), transparent); pointer-events: none; }
.ma-hero__main { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.ma-hero__copy { display: grid; justify-items: start; gap: 20px; }
.ma-hero__title { --fit: 6.9; }
.ma-hero__lead { max-width: 31em; }
.ma-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ma-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }.ma-hero__stage { position: relative; display: grid; justify-items: center; margin: 0; padding: 4% 0 0; }
.ma-hero__device { position: relative; z-index: 2; transform: perspective(1400px) rotateY(calc(var(--ry, 0) * 1deg)) rotateX(calc(var(--rx, 0) * 1deg)); transition: transform .9s var(--ease-expo); }
.ma-phone--hero { --pw: min(270px, 66vw); }
.ma-hero__sketch { position: absolute; left: 0; top: 16%; z-index: 1; width: min(58%, 340px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 70px -40px rgba(10, 6, 16, .9); rotate: -5deg; }
.ma-hero__sketch img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.8); }
.ma-hero__sketch span { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(20, 13, 29, .82); color: #fff; font-size: .6875rem; }
.ma-hero__illus { justify-self: end; margin-top: 14px; }@media (max-width: 599px) {
.ma-hero__sketch { top: 22%; width: 54%; }
.ma-hero__device { margin-left: 26%; }
}@media (min-width: 600px) and (max-width: 1023px) {
.ma-hero__device { margin-left: 18%; }
}@media (min-width: 1024px) {
.ma-hero__main { grid-template-columns: minmax(0, 6.2fr) minmax(0, 4.8fr); }
.ma-hero__title { --fit: 12.2; }
.ma-phone--hero { --pw: clamp(200px, min(20vw, calc((100svh - 250px) / 2.11)), 300px); }
.ma-hero__stage { padding-top: 0; }
.ma-hero__device { margin-left: 30%; }
.ma-hero__sketch { top: 12%; width: 62%; }
}.ma-jobs__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: clamp(28px, 4vw, 48px); }
.ma-jobs__tabs[hidden] { display: none; }
.ma-jobs__tab { position: relative; display: grid; align-content: start; gap: 4px; min-height: 44px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-md); color: var(--fg-2); text-align: left; transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out), color .35s var(--ease-out); }
.ma-jobs__tab span { color: var(--fg-3); }
.ma-jobs__tab b { font: 900 clamp(1rem, .85rem + .5vw, 1.35rem) / 1 var(--font-heading); text-transform: uppercase; color: var(--fg); }
.ma-jobs__tab em { font-size: .8125rem; font-style: normal; color: var(--fg-3); }
.ma-jobs__tab[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ma-jobs__tab[aria-selected="true"] span { color: var(--accent); }
@media (hover: hover) { .ma-jobs__tab:hover { border-color: var(--fg-3); } }.ma-jobs__panels { display: grid; gap: clamp(56px, 7vw, 96px); }
.ma-job { display: grid; gap: 32px; align-items: center; }
.ma-job[hidden] { display: none; }
.ma-job__device { display: grid; justify-items: center; gap: 14px; padding: clamp(24px, 3vw, 40px) 16px; border-radius: 14px; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(123, 44, 240, .16), transparent 70%), var(--panel); }
.ma-phone--flow { --pw: min(250px, 64vw); }.ma-fs__app { position: absolute; inset: 0; }
.ma-fs__bar { position: absolute; inset: 11cqi 0 auto; display: flex; align-items: center; gap: 3cqi; padding: 3cqi 5.5cqi; font: 600 4.2cqi / 1 var(--font-body); }
.ma-fs__bar i { width: 5cqi; height: 5cqi; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; scale: .6; }
.ma-fs { position: absolute; inset: 24cqi 5.5cqi 8cqi; display: grid; align-content: start; gap: 4cqi; opacity: 0; transform: translateX(10%); visibility: hidden; transition: opacity .45s var(--ease-out), transform .7s var(--ease-expo), visibility 0s linear .45s; }
.ma-job[data-screen="0"] .ma-fs[data-n="0"],
.ma-job[data-screen="1"] .ma-fs[data-n="1"],
.ma-job[data-screen="2"] .ma-fs[data-n="2"] { opacity: 1; transform: none; visibility: visible; transition: opacity .45s var(--ease-out) .1s, transform .7s var(--ease-expo) .1s, visibility 0s; }
.ma-fs__title { font: 900 7.6cqi / .95 var(--font-heading); text-transform: uppercase; }
.ma-fs__list { display: grid; gap: 2.4cqi; }
.ma-fs__list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3cqi; padding: 4cqi; border-radius: 3.6cqi; background: var(--ma-card); box-shadow: 0 1px 0 rgba(25, 21, 31, .06), 0 3cqi 8cqi -6cqi rgba(38, 23, 53, .35); }
.ma-fs__list span { font-size: 4cqi; font-weight: 600; }
.ma-fs__list em { font-size: 3.3cqi; font-style: normal; color: var(--ma-soft); }
.ma-fs__cta { position: relative; display: block; margin-top: 3cqi; padding: 4cqi; border-radius: 99px; background: var(--dc-purple); color: #fff; font: 700 4cqi / 1 var(--font-body); text-align: center; }
.ma-fs__done,
.ma-fs__pass { display: grid; justify-items: center; gap: 3cqi; margin-top: 10cqi; text-align: center; }
.ma-fs__done b,
.ma-fs__pass b { font: 900 7.4cqi / .95 var(--font-heading); text-transform: uppercase; }
.ma-fs__done span,
.ma-fs__pass span { max-width: 80%; font-size: 3.8cqi; color: var(--ma-soft); }
.ma-fs__tick { display: grid; place-items: center; width: 20cqi; height: 20cqi; border-radius: 50%; background: var(--dc-lime); color: var(--dc-purple-black); }
.ma-fs__tick .icon { width: 9cqi; height: 9cqi; }
.ma-fs__pass { margin-top: 4cqi; padding: 6cqi 5cqi; border-radius: 5cqi; background: radial-gradient(ellipse 90% 80% at 90% 0%, var(--dc-purple-bright), var(--dc-purple-dark) 70%); color: #fff; }
.ma-fs__pass span { color: rgba(255, 255, 255, .72); }
.ma-fs__code { width: 44cqi; aspect-ratio: 1; border: 3cqi solid #fff; border-radius: 2cqi; background: repeating-conic-gradient(#19151f 0 25%, #fff 0 50%) 0 0 / 7cqi 7cqi, #fff; box-shadow: inset 0 0 0 5cqi #fff; }.ma-fs .is-tap::after { content: ""; position: absolute; right: 7cqi; top: 50%; width: 9cqi; height: 9cqi; margin-top: -4.5cqi; border-radius: 50%; background: rgba(103, 33, 223, .22); box-shadow: 0 0 0 1.5px var(--dc-purple); opacity: 0; }
.ma-fs__cta.is-tap::after { right: 50%; margin-right: -4.5cqi; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 1.5px #fff; }
.ma-job.is-playing[data-screen="0"] .ma-fs[data-n="0"] .is-tap::after,
.ma-job.is-playing[data-screen="1"] .ma-fs[data-n="1"] .is-tap::after { animation: maTap 1s var(--ease-out) 1.1s both; }
@keyframes maTap {
0% { opacity: 0; transform: scale(1.8); }
40% { opacity: 1; transform: scale(1); }
70% { opacity: 1; transform: scale(.82); }
100% { opacity: 0; transform: scale(1.3); }
}.ma-job__copy { display: grid; align-content: start; gap: 14px; }
.ma-job__for { color: var(--accent); }
.ma-job__name { font: 900 clamp(1.9rem, 1rem + 2.6vw, 3.2rem) / .95 var(--font-heading); text-transform: uppercase; }
.ma-job__spec { display: grid; margin: 6px 0 0; border-bottom: 1px solid var(--line); }
.ma-job__spec > div { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.ma-job__spec dt { color: var(--fg-3); }
.ma-job__spec dd { margin: 0; font-size: 1.0625rem; color: var(--fg); }
.ma-job__links { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-job__steps { display: grid; gap: 6px; margin-top: 6px; }
.ma-job__step { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--fg-2); font-size: .9375rem; font-weight: 500; text-align: left; transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out), color .35s var(--ease-out); }
.ma-job__step span { color: var(--fg-3); }
.ma-job__step:disabled { cursor: default; }
.ma-job__step.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--fg); }
.ma-job__step.is-on span { color: var(--accent); }
@media (hover: hover) { .ma-job__step:not(:disabled):hover { border-color: var(--fg-3); color: var(--fg); } }@media (min-width: 600px) {
.ma-job__spec > div { grid-template-columns: 9.5em minmax(0, 1fr); align-items: baseline; }
}@media (min-width: 768px) {
.ma-jobs__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ma-job { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); }
}@media (min-width: 1024px) {
.ma-phone--flow { --pw: clamp(220px, min(19vw, calc((100svh - 230px) / 2.11)), 270px); }
}.ma-decide__grid { display: grid; gap: 24px; }
.ma-quiz { padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.ma-quiz[hidden] { display: none; }
.ma-quiz__title { margin-bottom: 6px; color: var(--accent); }
.ma-quiz__q { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ma-quiz__q p { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); font-size: 1rem; line-height: 1.45; color: var(--fg); }
.ma-quiz__q p span { padding-top: .2em; color: var(--fg-3); }
.ma-quiz__btns { display: flex; gap: 8px; margin-top: 12px; padding-left: 2.4em; }
.ma-quiz__btns button { min-width: 84px; min-height: 44px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); color: var(--fg-2); font-weight: 600; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out); }
.ma-quiz__btns button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--bg); }
@media (hover: hover) { .ma-quiz__btns button[aria-pressed="false"]:hover { border-color: var(--fg-3); color: var(--fg); } }
.ma-quiz__out { min-height: 3em; margin-top: 18px; font-weight: 600; color: var(--fg-2); }
.ma-quiz__out b { color: var(--accent); }.ma-opts { display: grid; gap: 12px; }
.ma-opt { position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--line-2); border-radius: 14px; transition: border-color .45s var(--ease-out), background-color .45s var(--ease-out), opacity .45s var(--ease-out), transform .6s var(--ease-expo); }
.ma-opt__glyph { position: relative; display: block; width: 64px; height: 44px; margin-bottom: 6px; }
.ma-opt__glyph i { position: absolute; bottom: 0; width: 22px; height: 40px; border: 1.5px solid var(--accent); border-radius: 5px; }
.ma-opt__glyph--native i:first-child { left: 0; }
.ma-opt__glyph--native i:last-child { left: 34px; border-radius: 7px; border-style: dashed; }
.ma-opt__glyph--cross i:first-child { left: 8px; }
.ma-opt__glyph--cross i:last-child { left: 22px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ma-opt__glyph--web i:first-child { left: 0; width: 60px; height: 40px; border-radius: 4px; }
.ma-opt__glyph--web i:last-child { left: 0; bottom: 30px; width: 60px; height: 10px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ma-opt__name { font: 900 clamp(1.4rem, 1rem + 1vw, 2rem) / 1 var(--font-heading); text-transform: uppercase; }
.ma-opt__tag { color: var(--fg-3); }
.ma-opt__best { color: var(--fg); }
.ma-opt__trade { font-size: .9375rem; color: var(--fg-3); }
.ma-opt__trade::before { content: "Trade-off: "; color: var(--fg-2); }
.ma-opts[data-pick] .ma-opt { opacity: .5; }
.ma-opts[data-pick="native"] [data-ma-opt="native"],
.ma-opts[data-pick="cross"] [data-ma-opt="cross"],
.ma-opts[data-pick="web"] [data-ma-opt="web"] { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-4px); }
.ma-decide__note { margin-top: 20px; font-size: .9375rem; color: var(--fg-3); }@media (min-width: 768px) {
.ma-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}@media (min-width: 1024px) {
.ma-decide__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
}.ma-build__grid { display: grid; gap: 32px; }
.ma-build__aside { display: none; }
.ma-stages { display: grid; border-bottom: 1px solid var(--line); }
.ma-stage { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px 16px; padding: 28px 0; border-top: 1px solid var(--line); transition: opacity .5s var(--ease-out); }
.ma-stage > :not(.ma-stage__n) { grid-column: 2; }
.ma-stage__n { grid-row: 1 / span 3; padding-top: .45em; color: var(--accent); }
.ma-stage__name { font: 900 clamp(1.6rem, 1rem + 1.8vw, 2.8rem) / .95 var(--font-heading); text-transform: uppercase; }
.ma-stage__copy { max-width: 34em; color: var(--fg-2); }
.ma-stage__gets { display: inline-flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: 10px; margin-top: 6px; padding: 8px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius-pill); font-size: .9375rem; color: var(--fg); }
.ma-stage__gets span { color: var(--accent); }.ma-phone--build { --pw: clamp(220px, min(20vw, calc((100svh - 230px) / 2.11)), 280px); }
.ma-bs { position: absolute; inset: 0; }
.ma-bs > * { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility 0s linear .5s; }
.ma-bs__map { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6cqi; padding: 16cqi 8cqi; background: radial-gradient(rgba(25, 21, 31, .14) 1px, transparent 1.4px) 0 0 / 5cqi 5cqi, #f1eef5; }
.ma-bs__map span { position: relative; padding: 4cqi 6cqi; border-radius: 1.4cqi; background: #efffc6; box-shadow: 0 2cqi 5cqi -3cqi rgba(38, 23, 53, .45); font: 600 4.2cqi / 1.1 var(--font-body); rotate: calc((var(--k) - 1.5) * 1.6deg); }
.ma-bs__map span + span::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 6cqi; background: var(--ma-soft); }
.ma-bs__build { position: absolute; right: 5.5cqi; top: 13.5cqi; z-index: 2; padding: 1.4cqi 2.6cqi; border-radius: 99px; background: var(--dc-purple-black); color: var(--dc-lime); font-size: 2.9cqi; opacity: 0; transition: opacity .4s var(--ease-out); }
.ma-bs__ui { transition: opacity .5s var(--ease-out), filter .5s var(--ease-out); }
.ma-bs__ui .ma-app__hello { padding-right: 30cqi; }
.ma-bs__test { position: absolute; inset: auto 0 0; z-index: 3; display: grid; gap: 2cqi; padding: 6cqi 5.5cqi 9cqi; border-radius: 6cqi 6cqi 0 0; background: #fff; box-shadow: 0 -6cqi 16cqi -8cqi rgba(20, 13, 29, .45); }
.ma-bs__test li { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; font-size: 3.8cqi; }
.ma-bs__test b { padding: 1cqi 2.6cqi; border-radius: 99px; background: #e9fbb5; color: #2c3b00; font-size: 3cqi; font-weight: 700; }
.ma-bs__store { position: absolute; inset: 0; display: grid; grid-template-columns: 22cqi minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-content: start; gap: 1.6cqi 4cqi; padding: 17cqi 5.5cqi 6cqi; background: #fff; }
.ma-bs__icon { grid-row: 1 / span 3; display: grid; place-items: center; width: 22cqi; aspect-ratio: 1; border-radius: 5.4cqi; background: linear-gradient(145deg, var(--dc-purple-bright), var(--dc-purple-dark)); }
.ma-bs__icon svg { width: 56%; }
.ma-bs__store > b { font: 900 6.6cqi / 1 var(--font-heading); text-transform: uppercase; }
.ma-bs__store > span:not(.ma-bs__icon):not(.ma-bs__shots) { font-size: 3.3cqi; color: var(--ma-soft); }
.ma-bs__store em { justify-self: start; margin-top: 1cqi; padding: 1.8cqi 5cqi; border-radius: 99px; background: var(--dc-purple); color: #fff; font: 700 3.6cqi / 1 var(--font-body); font-style: normal; }
.ma-bs__shots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqi; margin-top: 6cqi; }
.ma-bs__shots i { aspect-ratio: 9 / 17; border-radius: 3cqi; background: linear-gradient(180deg, var(--dc-purple) 0 34%, #f1eef5 34%); box-shadow: 0 0 0 1px rgba(25, 21, 31, .08); }
.ma-bs__shots i:nth-child(2) { background: linear-gradient(180deg, #f1eef5 0 12%, var(--dc-lime) 12% 30%, #f1eef5 30%); }
.ma-bs__shots i:nth-child(3) { background: linear-gradient(180deg, var(--dc-purple-dark) 0 60%, #f1eef5 60%); }.ma-bs[data-stage="map"] .ma-bs__map,
.ma-bs:not([data-stage="map"]):not([data-stage="release"]) .ma-bs__ui,
.ma-bs[data-stage="test"] .ma-bs__test,
.ma-bs[data-stage="release"] .ma-bs__store { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out), visibility 0s; }
.ma-bs[data-stage="build"] .ma-bs__build { opacity: 1; }
.ma-bs[data-stage="test"] .ma-bs__ui { filter: brightness(.9); }.ma-bs[data-stage="proto"] .ma-bs__ui { filter: grayscale(1); }
.ma-bs[data-stage="proto"] .ma-bs__ui :is(b, span, time, em, p) { border-radius: 1cqi; background-color: #dcd8e2; color: transparent; box-shadow: none; }
.ma-bs[data-stage="proto"] .ma-app__next { background: #ece9f0; box-shadow: none; }
.ma-bs[data-stage="proto"] .ma-app__tabs i { background: none; border-color: #c9c4d1; }.ma-bs[data-stage="design"] :is(.ma-app__next, .ma-app__list li, .ma-app__tabs, .ma-app__hello) { outline: 1px dashed #ff4fd8; outline-offset: .8cqi; }.ma-build__now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; width: 100%; color: var(--fg-2); }
.ma-build__now [data-ma-now] { color: var(--accent); }@media (min-width: 1024px) {
.ma-build__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.ma-build__aside { display: block; align-self: stretch; }
.ma-build__sticky { position: sticky; top: calc(var(--header-h) + 32px); display: grid; justify-items: center; gap: 18px; }
.ma-stage { min-height: min(56svh, 520px); align-content: center; padding-block: 40px; }
.ma-build.is-live .ma-stage:not(.is-on) { opacity: .38; }
}.ma-sys__map { position: relative; display: grid; gap: 28px; }
.ma-sys__hub { display: grid; justify-items: center; align-content: center; gap: 10px; justify-self: center; width: 180px; aspect-ratio: 9 / 16; border-radius: 30px; background: radial-gradient(ellipse 80% 60% at 50% 20%, #2d1b45, var(--dc-purple-black) 72%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 0 0 10px rgba(20, 13, 29, .14), 0 40px 70px -30px rgba(20, 13, 29, .8); color: #fff; text-align: center; }
.ma-sys__glyph { width: 56px; }
.ma-sys__hub b { font: 900 1.35rem / 1 var(--font-heading); text-transform: uppercase; }
.ma-sys__hub .t-mono { color: var(--dc-lime); }
.ma-sys__nodes { position: relative; display: grid; gap: 10px; padding-left: 28px; }
.ma-sys__nodes::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--dc-lime), rgba(197, 244, 61, .2)); }
.ma-node { position: relative; display: grid; gap: 4px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-md); background: rgba(20, 13, 29, .3); }
.ma-node::before { content: ""; position: absolute; left: -25px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--dc-lime); box-shadow: 0 0 0 4px rgba(197, 244, 61, .18); }
.ma-node__n { color: var(--dc-lime); }
.ma-node__name { font: 900 1.15rem / 1 var(--font-heading); text-transform: uppercase; }
.ma-node__what { font-size: .9375rem; line-height: 1.45; color: var(--fg-2); }.ma-sys__related { margin-top: clamp(40px, 5vw, 72px); }
.ma-sys__related h3 { margin-bottom: 12px; color: var(--fg-2); }
.ma-sys__related ul { display: grid; border-bottom: 1px solid var(--line-2); }
.ma-sys__related a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 64px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.ma-sys__related b { font: 900 clamp(1.1rem, .9rem + .6vw, 1.5rem) / 1 var(--font-heading); text-transform: uppercase; }
.ma-sys__related span { grid-column: 1; font-size: .9375rem; color: var(--fg-2); }
.ma-sys__related .icon { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; transition: transform .5s var(--ease-expo); }
@media (hover: hover) { .ma-sys__related a:hover .icon { transform: translate(3px, -3px); } }@media (min-width: 768px) {
.ma-sys__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
.ma-sys__nodes::before,
.ma-node::before { display: none; }
.ma-sys__related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-bottom: 0; }
}@media (min-width: 1024px) {
.ma-sys__map { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: repeat(8, auto); column-gap: 72px; row-gap: 0; align-items: center; }
.ma-sys__hub { grid-column: 2; grid-row: 1 / -1; width: clamp(190px, 15vw, 240px); }
.ma-sys__nodes { display: contents; }
.ma-node { margin-block: 6px; }
.ma-node:nth-child(1) { grid-area: 1 / 1 / span 2; }
.ma-node:nth-child(2) { grid-area: 3 / 1 / span 2; }
.ma-node:nth-child(3) { grid-area: 5 / 1 / span 2; }
.ma-node:nth-child(4) { grid-area: 7 / 1 / span 2; }
.ma-node:nth-child(5) { grid-area: 2 / 3 / span 2; }
.ma-node:nth-child(6) { grid-area: 4 / 3 / span 2; }
.ma-node:nth-child(7) { grid-area: 6 / 3 / span 2; }
.ma-node:nth-child(-n + 4) { text-align: right; }
.ma-node::after { content: ""; position: absolute; top: 50%; width: 72px; height: 1px; background: linear-gradient(90deg, rgba(197, 244, 61, .25), var(--dc-lime)); transform-origin: right; }
.ma-node:nth-child(-n + 4)::after { left: 100%; }
.ma-node:nth-child(n + 5)::after { right: 100%; background: linear-gradient(90deg, var(--dc-lime), rgba(197, 244, 61, .25)); transform-origin: left; }
.is-motion .ma-node::after { transform: scaleX(0); transition: transform .8s var(--ease-expo) calc(.25s + var(--k) * .08s); }
.is-motion .ma-sys.is-on .ma-node::after { transform: none; }
}.ma-after__grid { display: grid; gap: clamp(40px, 5vw, 72px); }
.ma-rel { display: grid; gap: 16px; justify-items: start; }
.ma-rel__list { position: relative; display: grid; width: 100%; }
.ma-rel__list::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.ma-rel__item { position: relative; display: grid; gap: 8px; padding: 18px 0 22px 36px; }
.ma-rel__item::before { content: ""; position: absolute; left: 0; top: 24px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--fg-3); background: var(--bg); }
.ma-rel__item.is-live::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
.ma-rel__v { color: var(--accent); }
.ma-rel__label { font: 900 clamp(1.4rem, 1rem + 1.2vw, 2.2rem) / 1 var(--font-heading); text-transform: uppercase; }
.ma-rel__notes { display: grid; gap: 6px; }
.ma-rel__notes li { position: relative; padding-left: 20px; color: var(--fg-2); }
.ma-rel__notes li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.ma-care__title { margin-bottom: 8px; color: var(--fg-2); }
.ma-care__list { display: grid; border-bottom: 1px solid var(--line); }
.ma-care__list li { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--line); }
.ma-care__list b { font: 900 1.15rem / 1 var(--font-heading); text-transform: uppercase; }
.ma-care__list span { color: var(--fg-2); }@media (min-width: 1024px) {
.ma-after__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
}.ma-work__intro { display: grid; gap: 18px; justify-items: start; }
.ma-work__intro .link { min-height: 44px; }
.ma-work__cases { display: grid; gap: 16px; }@media (min-width: 768px) {
.ma-work__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}@media (min-width: 1024px) {
.ma-work .chapter__head > .ma-work__intro { grid-column: 2; }
}@media (prefers-reduced-motion: reduce) {
.ma-hero__device { transform: none; }
.ma-fs,
.ma-bs > *,
.ma-opt { transition: none; }
}