/* ===== mobile-apps page layer (extends css/style.css tokens) ===== */
.mstage{position:relative;width:100%;max-width:400px;justify-self:center;padding:5.5rem 0 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.mth{position:absolute;top:0;left:0;right:14%;z-index:3;background:var(--card);border:1px solid var(--line);border-radius:22px 22px 22px 5px;padding:.85rem 1rem;font:500 .82rem/1.45 var(--m);box-shadow:0 24px 50px -24px rgba(20,16,80,.45);min-height:4.6rem}
.mth small{display:block;color:var(--v);margin-bottom:.3rem}
.mph{position:relative;width:min(236px,62vw);aspect-ratio:9/18.5;border-radius:38px 38px 38px 10px;background:#0D1021;padding:9px;box-shadow:0 50px 80px -30px rgba(20,16,80,.6);animation:bob 7s ease-in-out infinite}
.mph::before{content:"";position:absolute;top:16px;left:50%;translate:-50% 0;width:58px;height:14px;border-radius:9px;background:#0D1021;z-index:2}
.mscr{height:100%;border-radius:30px 30px 30px 6px;background:var(--bg);padding:2.2rem .8rem .8rem;display:flex;flex-direction:column;gap:.6rem;overflow:hidden}
.blk{background:var(--line);border-radius:14px;transition:background .9s,transform .9s cubic-bezier(.2,.9,.2,1)}
.mscr .h{flex:none;height:26px;width:62%;display:flex;align-items:center;padding-left:.6rem;font:800 .8rem var(--d);color:transparent;transition:color .6s .4s,background .9s}
.mph.built .h{color:var(--fg);background:transparent}
.mscr .hc{flex:1.3;border-radius:20px 20px 20px 5px}.mph.built .hc{background:linear-gradient(140deg,var(--v),var(--a));transform:rotate(-2deg) scale(1.03)}
.mscr .row{flex:1;display:flex;gap:.55rem}.row .blk{flex:1}
.mph.built .r1{background:var(--p);border-radius:50% 50% 14px 14px}.mph.built .r2{background:color-mix(in srgb,var(--v) 30%,var(--card));border-radius:14px 14px 50% 50%}
.mscr .go2{flex:none;height:34px;border-radius:999px}.mph.built .go2{background:var(--fg)}
.tabs{flex:none;display:flex;justify-content:space-around;padding-top:.2rem}.tabs i{width:16px;height:16px;border-radius:50%;background:var(--line);transition:background .6s}.mph.built .tabs i:first-child{background:var(--v)}
.mst{font:600 .78rem var(--m);color:var(--mut)}.mst::before{content:"$ ";color:var(--a)}
.fl{position:absolute;display:grid;place-items:center;font:700 .85rem var(--m);animation:bob 6s ease-in-out infinite}
.fl.a{right:-1%;top:34%;width:76px;height:76px;background:linear-gradient(135deg,var(--v),var(--a));color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fl.b{left:-3%;top:52%;width:70px;height:70px;background:var(--fg);color:var(--a);border-radius:30% 70% 60% 40%/50% 40% 60% 50%;animation-delay:-2s}
.fl.c{right:4%;bottom:10%;width:64px;height:64px;background:var(--p);color:var(--fg);clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);animation-delay:-3s}

.m-pad{padding-top:0}
.sdx{background:var(--fg);color:var(--bg);overflow:hidden}
.sdx::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--bg) 14%,transparent) 1.2px,transparent 1.5px) 0 0/30px 30px;-webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
.sdx>.wrap{position:relative}.sdx .eyebrow,.sdx .lead{color:color-mix(in srgb,var(--bg) 68%,transparent)}
.orbw{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:3rem}
.orb{--S:min(440px,86vw);position:relative;width:var(--S);height:var(--S);margin:auto}
.orb svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;fill:none;overflow:visible}
.orb .t{stroke:color-mix(in srgb,var(--bg) 25%,transparent);stroke-width:.5;stroke-dasharray:1 2.2}
.orb .pg{stroke:url(#og);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s cubic-bezier(.2,.9,.2,1)}
.ctr{position:absolute;inset:27%;display:grid;place-content:center;text-align:center;color:#fff;z-index:1}
.ctr::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--v),var(--a));animation:morph 10s ease-in-out infinite;border-radius:38% 62% 63% 37%/41% 44% 56% 59%}
.ctr b{font:800 clamp(2.4rem,9vw,3.4rem)/1 var(--d)}.ctr small{font:600 .78rem var(--m);margin-top:.3rem}
.nd{position:absolute;left:calc(50% - 30px);top:calc(50% - 30px);width:60px;height:60px;border:0;cursor:pointer;background:color-mix(in srgb,var(--bg) 16%,var(--fg));color:var(--bg);font:700 .9rem var(--m);transform:rotate(var(--t)) translateY(calc(var(--S)*-.43)) rotate(calc(var(--t)*-1));transition:background .4s,color .4s,scale .5s cubic-bezier(.2,.9,.2,1)}
.nd:nth-of-type(1){clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.nd:nth-of-type(2){border-radius:38% 62% 63% 37%/41% 44% 56% 59%}.nd:nth-of-type(3){clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.nd:nth-of-type(4){clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}.nd:nth-of-type(5){border-radius:50% 50% 50% 8%}.nd:nth-of-type(6){border-radius:50%}
.nd:hover{scale:1.12}.nd.dn{color:var(--a)}.nd.on{background:linear-gradient(135deg,var(--v),var(--a));color:#fff;scale:1.3;z-index:2}
.nd:focus-visible{outline:3px solid var(--a)}
.pnl{min-height:400px;background:color-mix(in srgb,var(--bg) 7%,transparent);border:1px dashed color-mix(in srgb,var(--bg) 30%,transparent);border-radius:32px 32px 32px 8px;padding:clamp(1.4rem,4vw,2.4rem)}
.pnl>*{opacity:0;translate:0 14px;animation:in .55s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--j)*.07s)}
.pnl .ph2{font:600 .8rem var(--m);color:var(--a)}.pnl h3{font-size:clamp(2.2rem,5vw,3.2rem);margin:.4rem 0 .6rem}
.pnl p{color:color-mix(in srgb,var(--bg) 75%,transparent);max-width:44ch}
.pnl ul{list-style:none;padding:0;margin:1.3rem 0;display:grid;gap:.55rem;font:500 .9rem var(--m)}.pnl li::before{content:"+ ";color:var(--a)}
.pnl .chips2{display:flex;gap:.6rem;flex-wrap:wrap}.chips2 span{font:600 .8rem var(--m);padding:.5rem .9rem;border-radius:11px 11px 11px 2px;background:color-mix(in srgb,var(--v) 40%,transparent)}
.loop{font:500 .78rem var(--m);color:var(--a);margin-top:1.4rem}
.sdx .pills span{background:color-mix(in srgb,var(--bg) 10%,transparent);border-color:color-mix(in srgb,var(--bg) 25%,transparent)}
@media(max-width:900px){.orbw{grid-template-columns:1fr}}

.thk{background:var(--fg);color:var(--bg);border-radius:56px 56px 56px 12px;padding:clamp(2rem,6vw,4.5rem);display:grid;grid-template-columns:1fr 1fr;gap:3rem;position:relative;overflow:hidden}
.thk::before{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-170px;background:linear-gradient(135deg,var(--v),var(--a));border-radius:38% 62% 63% 37%/41% 44% 56% 59%;animation:morph 10s ease-in-out infinite;opacity:.85}
.thk>*{position:relative}.thk .lead{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.flow{list-style:none;padding:0;margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem;font:600 .82rem var(--m)}
.flow li{padding:.5rem .8rem;border-radius:10px 10px 10px 2px;background:color-mix(in srgb,var(--bg) 12%,transparent)}.flow li:not(:last-child)::after{content:" →";color:var(--a)}
.ideabox{display:grid;gap:.9rem;align-content:center}.ideabox textarea{min-height:140px;resize:vertical}
.ideabox .qs{display:flex;flex-wrap:wrap;gap:.5rem}.qs button{font:500 .78rem var(--m);padding:.45rem .8rem;border-radius:10px 10px 10px 2px;border:1px dashed color-mix(in srgb,var(--bg) 40%,transparent);background:none;color:var(--bg);cursor:pointer}.qs button:hover{border-color:var(--a);color:var(--a)}
.thk .btn{background:var(--a);color:#0D1021;justify-content:center;box-shadow:none}
.mfab{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);z-index:45;translate:0 140%;transition:translate .5s cubic-bezier(.2,.9,.2,1);border-radius:18px 18px 4px 18px;box-shadow:0 18px 40px -12px var(--v)}.mfab.show{translate:0}
@media(max-width:860px){.thk{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pnl>*{opacity:1;translate:none}}

/* explorer (shared) */
.ucw,.roi{display:grid;grid-template-columns:1.2fr .8fr;gap:1.4rem;margin-top:1.6rem}
.uf{display:grid;gap:.6rem;align-content:start}
.us{display:flex;gap:1rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px 22px 22px 6px;padding:1rem 1.2rem;opacity:0;translate:0 10px;animation:in .5s forwards;animation-delay:calc(var(--j)*.1s)}
.us b{flex:none;width:44px;height:44px;display:grid;place-items:center;font:700 .8rem var(--m);color:#fff;background:var(--v);border-radius:12px 12px 12px 3px}
.us:nth-child(2) b{border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,var(--v),var(--a))}.us:nth-child(3) b{border-radius:50%;background:var(--p);color:var(--fg)}
.us small{display:block;font:500 .72rem var(--m);color:var(--mut)}.us p{font-weight:600;line-height:1.35}
.ur{background:var(--fg);color:var(--bg);border-radius:32px 32px 32px 8px;padding:1.6rem;display:flex;flex-direction:column;gap:1rem;justify-content:space-between}
.ur p{color:color-mix(in srgb,var(--bg) 78%,transparent)}.ur .tg{font:600 .78rem var(--m);color:var(--a)}
.ur .btn,.rout .btn{background:var(--a);color:#0D1021;box-shadow:none;justify-content:center}
@media(max-width:860px){.ucw,.roi{grid-template-columns:1fr}}