/* ============================================================
   CODESTAN · MOBILE APP DEVELOPMENT — the floating phone lab
   ============================================================ */

/* ---------- shared section headers (mirror site conventions) ---------- */
.sec-eyebrow{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px;
}
.sec-head{max-width:760px;margin-inline:auto;text-align:center;margin-bottom:48px;position:relative;z-index:5}
.sec-head h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:14px}
.sec-head p{font-size:17px;color:var(--text-p2);line-height:1.55}
.glass{
  background:rgba(22,22,22,.78);border:1px solid var(--stroke);
  border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}

/* sticky scene scaffolding */
.md-space,.mi-space,.mj-space,.mx-space,.mf-space,.mc-space,.mb-space,
.mt-space,.mdd-space,.mr-space,.mcs-space,.mm-space,.mw-space{position:relative}
.md-sticky,.mi-sticky,.mj-sticky,.mx-sticky,.mf-sticky,.mc-sticky,.mb-sticky,
.mt-sticky,.mdd-sticky,.mr-sticky,.mcs-sticky,.mm-sticky,.mw-sticky{
  position:sticky;top:0;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.mi,.mj,.mx,.mf,.mc,.mb,.mt,.mdd,.mr,.mcs,.mm,.mw{background:var(--bg-first)}
.min,.msd{background:var(--bg-first);padding:110px 0}
.mi-sticky .sec-head,.mj-sticky .sec-head,.mx-sticky .sec-head,.mf-sticky .sec-head,
.mc-sticky .sec-head,.mb-sticky .sec-head,.mt-sticky .sec-head,.mdd-sticky .sec-head,
.mr-sticky .sec-head,.mcs-sticky .sec-head,.mm-sticky .sec-head,.mw-sticky .sec-head{
  margin-bottom:0;padding-top:calc(64px + 2.5vh);
}
.mi-sticky,.mj-sticky,.mx-sticky,.mf-sticky,.mc-sticky,.mb-sticky,
.mt-sticky,.mdd-sticky,.mr-sticky,.mm-sticky,.mw-sticky{justify-content:flex-start}

/* ============================================================
   OPENING · THE FLOATING PHONE LAB
   ============================================================ */
.md{position:relative;background:var(--bg-first);padding-top:120px}
.md-space{height:1120svh}
.md-sticky{justify-content:center}
.md-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 620px at 50% 46%, rgba(162,250,163,.06), transparent 62%),
    radial-gradient(1100px 700px at 50% 115%, rgba(162,250,163,.04), transparent 60%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:auto,auto,72px 72px,72px 72px;
  mask-image:radial-gradient(ellipse 90% 85% at 50% 50%, #000 40%, transparent 100%);
}
.md-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.md-particles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(162,250,163,.5);opacity:.5;
  animation:mdFloat var(--fd,9s) ease-in-out var(--fdel,0s) infinite alternate;
}
@keyframes mdFloat{
  0%{transform:translate(0,0);opacity:.15}
  50%{opacity:.55}
  100%{transform:translate(var(--fx,20px),var(--fy,-30px));opacity:.2}
}

/* ---------- the phone ---------- */
.mp{
  position:absolute;left:50%;top:49%;
  transform:translate(-50%,-50%);
  will-change:transform;z-index:6;
}
.mp-frame{
  position:relative;width:min(300px,64vw);aspect-ratio:300/610;
  border-radius:46px;padding:11px;
  background:linear-gradient(160deg,#3a3a3a,#191919 30%,#101010 70%,#2a2a2a);
  box-shadow:
    0 50px 130px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 110px rgba(162,250,163,calc(.10 + var(--alive,0) * .18));
  will-change:box-shadow;
}
.mp-side{position:absolute;background:#2e2e2e;border-radius:3px}
.mp-side-v1{left:-2.5px;top:120px;width:3px;height:34px}
.mp-side-v2{left:-2.5px;top:165px;width:3px;height:34px}
.mp-side-p{right:-2.5px;top:140px;width:3px;height:52px}
.mp-screen{
  position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:#0b0d0b;
}
.mp-statusbar{
  position:relative;z-index:8;height:44px;display:flex;align-items:center;
  justify-content:space-between;padding:6px 22px 0;
  font-size:12.5px;font-weight:700;color:#e8e8e8;
}
.mp-island{
  position:absolute;left:50%;top:9px;transform:translateX(-50%);
  width:88px;height:24px;border-radius:14px;background:#000;
  border:1px solid rgba(255,255,255,.05);
}
.mp-sig{display:flex;align-items:center;gap:4px}
.mp-sig b{display:block;background:#d8d8d8;border-radius:1px}
.mp-sig b:nth-child(1){width:14px;height:9px;clip-path:polygon(0 100%,0 55%,25% 55%,25% 100%,33% 100%,33% 38%,58% 38%,58% 100%,66% 100%,66% 20%,92% 20%,92% 100%)}
.mp-sig b:nth-child(2){width:12px;height:9px;clip-path:polygon(50% 100%,6% 52%,20% 38%,50% 66%,80% 38%,94% 52%)}
.mp-sig b:nth-child(3){width:20px;height:9px;border-radius:2.5px;background:none;border:1.4px solid #d8d8d8;position:relative}
.mp-sig b:nth-child(3)::after{content:"";position:absolute;inset:1.6px;width:70%;background:var(--brand);border-radius:1px}
.mp-cursor{
  position:absolute;left:50%;top:46%;width:3px;height:26px;border-radius:2px;
  background:var(--brand);transform:translate(-50%,-50%);
  box-shadow:0 0 18px rgba(162,250,163,.8);
  animation:mdBlink 1.1s steps(1) infinite;z-index:3;
}
@keyframes mdBlink{50%{opacity:0}}

/* installed dock */
.mp-dock{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:7;
  height:52px;border-radius:20px;
  background:rgba(28,30,28,.82);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;gap:7px;
  opacity:0;transform:translateY(12px);
}
.mp-dock i{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:#242624;border:1px solid #333;
  display:none;align-items:center;justify-content:center;
  opacity:0;transform:scale(.4);
}
.mp-dock i.is-in{display:flex;animation:dockIn .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes dockIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.mp-dock i svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-livebadge{
  position:absolute;top:52px;left:50%;transform:translate(-50%,-8px);z-index:9;
  display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
  background:rgba(10,12,10,.85);border:1px solid var(--brand-line);
  font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--brand);
  opacity:0;transition:all .5s var(--ease);
}
.mp-livebadge b{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand);animation:mdPulseDot 1.6s ease-in-out infinite}
@keyframes mdPulseDot{50%{opacity:.4}}
.mp-livebadge.is-on{opacity:1;transform:translate(-50%,0)}
.mp-glowpulse{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(300px 300px at 50% 42%,rgba(162,250,163,.14),transparent 70%);
}

/* ---------- module orbit cards ---------- */
.mdc{position:absolute;inset:0;z-index:5;pointer-events:none}
.mdc-card{
  position:absolute;display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:13px;
  background:rgba(24,26,24,.85);border:1px solid #2f322f;
  font-size:11.5px;font-weight:700;color:#b9bbb9;letter-spacing:.02em;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  will-change:transform,opacity;white-space:nowrap;
}
.mdc-card i{width:22px;height:22px;border-radius:7px;background:#222622;border:1px solid #343834;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mdc-card i svg{width:12px;height:12px;stroke:#8fa591;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mdc-card.is-armed{border-color:var(--brand-line);color:#e6f3e6;box-shadow:0 0 30px rgba(162,250,163,.22),0 12px 34px rgba(0,0,0,.5)}
.mdc-card.is-armed i svg{stroke:var(--brand)}
.md-links{position:absolute;inset:0;z-index:4;pointer-events:none;width:100%;height:100%}
.md-links line{stroke:rgba(162,250,163,.35);stroke-width:1.2;stroke-dasharray:4 6}

/* ---------- in-phone module demos ---------- */
.mp-mod{
  position:absolute;inset:44px 0 0 0;z-index:4;padding:16px 18px 70px;
  opacity:0;pointer-events:none;
}
.mp-mod.is-active{opacity:1}
.pm-line{display:block;height:9px;border-radius:5px;background:#2b2e2b}
.pm-line.w30{width:30%}.pm-line.w35{width:35%}.pm-line.w40{width:40%}.pm-line.w45{width:45%}
.pm-line.w50{width:50%}.pm-line.w55{width:55%}.pm-line.w60{width:60%}
.pm-line.w65{width:65%}.pm-line.w70{width:70%}.pm-line.w90{width:90%}
.mp-mod.is-active .pm-line{animation:pmLineIn .5s var(--ease) both}
@keyframes pmLineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* auth */
.pm-auth{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:22px}
.pm-logo{width:54px;height:54px;border-radius:16px;background:linear-gradient(150deg,#2c332c,#1a1e1a);border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center;box-shadow:0 0 34px rgba(162,250,163,.25)}
.pm-logo i{width:24px;height:24px;border-radius:8px;background:var(--brand);opacity:.9}
.pm-field{width:100%;height:34px;border-radius:11px;background:#161816;border:1px solid #2a2d2a}
.pm-btnmain{width:100%;height:36px;border-radius:12px;background:var(--brand);box-shadow:0 6px 22px rgba(162,250,163,.35)}
.pm-faceid svg{width:42px;height:42px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-mod.is-active .pm-farc{stroke-dasharray:30;stroke-dashoffset:30;animation:pmDash 1.2s var(--ease) .3s forwards}
@keyframes pmDash{to{stroke-dashoffset:0}}

/* profile */
.pm-prof{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:14px}
.pm-avatar{width:62px;height:62px;border-radius:50%;background:#242824;border:2px solid var(--brand-line);display:flex;align-items:center;justify-content:center}
.pm-avatar i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#dfe9df 26%,transparent 27%),radial-gradient(circle at 50% 88%,#dfe9df 42%,transparent 43%)}
.pm-prow{display:flex;gap:8px;width:100%;justify-content:center}
.pm-prow i{width:56px;height:40px;border-radius:11px;background:#171916;border:1px solid #282b28}
.pm-pcards{display:flex;gap:8px;width:100%}
.pm-pcards span{flex:1;height:64px;border-radius:13px;background:#151714;border:1px solid #262926}

/* search */
.pm-search{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.pm-sbar{display:flex;align-items:center;gap:8px;height:38px;border-radius:12px;background:#161916;border:1px solid #2b2e2b;padding:0 12px}
.pm-sbar svg{width:14px;height:14px;stroke:var(--brand);fill:none;stroke-width:2.2;stroke-linecap:round}
.pm-sbar b{flex:1;height:8px;border-radius:4px;background:#2c2f2c}
.pm-sugg{display:flex;gap:6px;flex-wrap:wrap}
.pm-sugg i{width:30%;height:22px;border-radius:99px;background:#1c221c;border:1px solid var(--brand-line);opacity:.85}
.pm-sres{display:flex;flex-direction:column;gap:8px}
.pm-sres span{height:44px;border-radius:12px;background:#141614;border:1px solid #262926}

/* maps */
.pm-map{position:relative;height:100%}
.pm-mapsvg{width:100%;height:100%;border-radius:14px;background:#101310}
.pm-mroad{stroke:#232723;stroke-width:7;stroke-linecap:round}
.pm-mroute{stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340}
.mp-mod.is-active .pm-mroute{animation:pmRoute 2.4s var(--ease) .2s forwards}
@keyframes pmRoute{to{stroke-dashoffset:0}}
.pm-mpin{fill:var(--brand)}
.pm-mdot{fill:#fff;opacity:.9}
.pm-mperm{position:absolute;top:10px;left:10px;display:flex;gap:6px;align-items:center;background:rgba(14,16,14,.9);border:1px solid var(--brand-line);border-radius:99px;padding:5px 10px}
.pm-mperm i{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.pm-mperm b{width:70px;height:7px;border-radius:4px;background:#2c322c}

/* orders */
.pm-orders{display:flex;flex-direction:column;gap:9px}
.pm-oc{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:#141614;border:1px solid #262926;opacity:0;transform:translateX(-14px)}
.mp-mod.is-active .pm-oc{animation:pmSlideIn .45s var(--ease) forwards}
.mp-mod.is-active .pm-oc:nth-child(2){animation-delay:.14s}
.mp-mod.is-active .pm-oc:nth-child(3){animation-delay:.28s}
@keyframes pmSlideIn{to{opacity:1;transform:none}}
.pm-oc i{width:34px;height:34px;border-radius:10px;background:#1e241e;border:1px solid var(--brand-line);flex-shrink:0}
.pm-oc span{flex:1;display:flex;flex-direction:column;gap:5px}
.pm-oc em{width:9px;height:9px;border-radius:50%;background:var(--brand);opacity:.8}
.pm-otime{display:flex;justify-content:space-between;padding:4px 6px}
.pm-otime b{width:24%;height:6px;border-radius:3px;background:#262a26}

/* tracking */
.pm-track{position:relative;height:100%;display:flex;flex-direction:column}
.pm-trsvg{width:100%;flex:1;border-radius:14px;background:#101310}
.pm-trpath{stroke:#2a2f2a;stroke-width:3;stroke-dasharray:6 7;fill:none}
.pm-truck rect{fill:var(--brand)}
.pm-teta{display:flex;flex-direction:column;gap:6px;padding:12px 4px 0}
.pm-teta b{font-size:22px;font-weight:900;color:var(--brand)}

/* payments */
.pm-pay{display:flex;flex-direction:column;gap:9px}
.pm-pm{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:13px;background:#141614;border:1px solid #262926;opacity:0;transform:translateY(10px)}
.mp-mod.is-active .pm-pm{animation:pmUp .4s var(--ease) forwards}
.mp-mod.is-active .pm-pm:nth-child(2){animation-delay:.13s}
.mp-mod.is-active .pm-pm:nth-child(3){animation-delay:.26s}
.mp-mod.is-active .pm-receipt{animation:pmUp .4s var(--ease) .42s forwards}
@keyframes pmUp{to{opacity:1;transform:none}}
.pm-pp,.pm-gp{font-weight:800;font-size:13px;color:#e8e8e8}
.pm-check{width:18px;height:18px;border-radius:50%;border:1.6px solid var(--brand);position:relative}
.pm-check::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brand);transform:scale(0);animation:pmPop .3s var(--ease) .6s forwards}
@keyframes pmPop{to{transform:scale(1)}}
.pm-receipt{opacity:0;display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px;border-radius:13px;background:#101a10;border:1px dashed var(--brand-line)}
.pm-receipt b{width:26px;height:26px;border-radius:50%;background:var(--brand);box-shadow:0 0 20px rgba(162,250,163,.5)}

/* notifications */
.pm-notif{display:flex;flex-direction:column;gap:9px}
.pm-push{display:flex;align-items:center;gap:10px;padding:11px;border-radius:14px;background:rgba(26,29,26,.95);border:1px solid #2c302c;opacity:0;transform:translateY(-16px)}
.mp-mod.is-active .pm-push{animation:pmDrop .5s var(--ease) forwards}
.mp-mod.is-active .pm-push.p2{animation-delay:.2s}
.mp-mod.is-active .pm-push.p3{animation-delay:.4s}
@keyframes pmDrop{to{opacity:1;transform:none}}
.pm-push i{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,#2c332c,#1a1e1a);border:1px solid var(--brand-line);flex-shrink:0}
.pm-push span{flex:1;display:flex;flex-direction:column;gap:5px}
.pm-badge{font-style:normal;font-size:10px;font-weight:800;background:var(--brand);color:#0c130c;border-radius:99px;padding:2px 7px}

/* wishlist */
.pm-wish{display:flex;flex-direction:column;gap:12px}
.pm-wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pm-wgrid span{aspect-ratio:1;border-radius:13px;background:#141614;border:1px solid #262926;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6)}
.mp-mod.is-active .pm-wgrid span{animation:pmPop .4s var(--ease) forwards}
.mp-mod.is-active .pm-wgrid span:nth-child(2){animation-delay:.08s}
.mp-mod.is-active .pm-wgrid span:nth-child(3){animation-delay:.16s}
.mp-mod.is-active .pm-wgrid span:nth-child(4){animation-delay:.24s}
.mp-mod.is-active .pm-wgrid span:nth-child(5){animation-delay:.32s}
.mp-mod.is-active .pm-wgrid span:nth-child(6){animation-delay:.4s}
.pm-heart{width:16px;height:16px;background:var(--brand);clip-path:path("M8 14.5C3.5 11 1 8.3 1 5.5 1 3 3 1 5.5 1 6.8 1 7.9 1.6 8 2.4 8.1 1.6 9.2 1 10.5 1 13 1 15 3 15 5.5c0 2.8-2.5 5.5-7 9z");transform:scale(1.1)}
.pm-wcols{display:flex;gap:8px}
.pm-wcols b{flex:1;height:26px;border-radius:99px;background:#1c221c;border:1px solid var(--brand-line)}

/* chat / ai */
.pm-chat,.pm-ai{display:flex;flex-direction:column;gap:9px}
.pm-msg{max-width:78%;padding:10px 12px;border-radius:14px;opacity:0;transform:translateY(8px)}
.mp-mod.is-active .pm-msg{animation:pmUp .4s var(--ease) forwards}
.mp-mod.is-active .pm-msg:nth-of-type(2){animation-delay:.18s}
.mp-mod.is-active .pm-msg:nth-of-type(3){animation-delay:.36s}
.pm-msg.in{align-self:flex-start;background:#1b1e1b;border:1px solid #2a2d2a;border-end-start-radius:4px}
.pm-msg.out{align-self:flex-end;background:#17251a;border:1px solid var(--brand-line);border-end-end-radius:4px}
.pm-msg .pm-line{background:#313631}
.pm-msg.out .pm-line{background:#3d5640}
.pm-typing{display:flex;gap:4px;padding:8px 12px;align-self:flex-start;background:#1b1e1b;border-radius:14px;width:fit-content;opacity:0}
.mp-mod.is-active .pm-typing{animation:pmUp .3s var(--ease) .55s forwards}
.pm-typing i{width:6px;height:6px;border-radius:50%;background:#8a8f8a;animation:pmType 1s ease-in-out infinite}
.pm-typing i:nth-child(2){animation-delay:.15s}.pm-typing i:nth-child(3){animation-delay:.3s}
@keyframes pmType{50%{transform:translateY(-4px);opacity:.5}}
.pm-cbar{display:flex;align-items:center;gap:8px;margin-top:auto}
.pm-cbar b{flex:1;height:34px;border-radius:99px;background:#151815;border:1px solid #282b28}
.pm-cbar i{width:34px;height:34px;border-radius:50%;background:var(--brand)}
.pm-ahi{display:flex;align-items:center;gap:10px}
.pm-orb{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d6ffd6,var(--brand) 55%,#1d3a22);box-shadow:0 0 26px rgba(162,250,163,.55);animation:pmOrb 2.4s ease-in-out infinite}
@keyframes pmOrb{50%{transform:scale(1.12)}}
.pm-aichips{display:flex;gap:6px}
.pm-aichips span{flex:1;height:24px;border-radius:99px;background:#1a211a;border:1px solid var(--brand-line)}

/* camera */
.pm-cam{display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;justify-content:center}
.pm-cframe{position:relative;width:74%;aspect-ratio:1;border-radius:18px;background:#0f120f;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pm-cc{position:absolute;width:22px;height:22px;border:2.5px solid var(--brand)}
.pm-cc.c1{top:10px;left:10px;border-right:0;border-bottom:0;border-start-start-radius:8px}
.pm-cc.c2{top:10px;right:10px;border-left:0;border-bottom:0;border-start-end-radius:8px}
.pm-cc.c3{bottom:10px;left:10px;border-right:0;border-top:0;border-end-start-radius:8px}
.pm-cc.c4{bottom:10px;right:10px;border-left:0;border-top:0;border-end-end-radius:8px}
.pm-scan{position:absolute;left:8%;right:8%;height:2px;background:var(--brand);box-shadow:0 0 14px var(--brand);animation:pmScan 1.8s ease-in-out infinite}
@keyframes pmScan{0%,100%{top:12%}50%{top:86%}}
.pm-qr{width:56%;fill:#3d4a3d}
.pm-cbtn{width:52px;height:52px;border-radius:50%;border:4px solid #e8e8e8;background:transparent;position:relative}
.pm-cbtn::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#e8e8e8}

/* analytics */
.pm-ana{display:flex;flex-direction:column;gap:12px}
.pm-akpis{display:flex;gap:8px}
.pm-akpis span{flex:1;padding:10px;border-radius:13px;background:#141714;border:1px solid #262a26;display:flex;flex-direction:column;gap:6px}
.pm-akpis b{font-size:19px;font-weight:900;color:var(--brand)}
.pm-akpis i{width:60%;height:6px;border-radius:3px;background:#2b2f2b}
.pm-achart{width:100%;border-radius:13px;background:#101310}
.pm-aline{stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260}
.mp-mod.is-active .pm-aline{animation:pmRoute 1.6s var(--ease) .15s forwards}
.pm-aarea{fill:rgba(162,250,163,.09);opacity:0}
.mp-mod.is-active .pm-aarea{animation:pmFade .6s ease .9s forwards}
@keyframes pmFade{to{opacity:1}}
.pm-abars{display:flex;gap:7px;align-items:flex-end;height:52px}
.pm-abars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--brand),#2c4a2f);transform:scaleY(0);transform-origin:bottom}
.mp-mod.is-active .pm-abars i{animation:pmBar .5s var(--ease) forwards}
.mp-mod.is-active .pm-abars i:nth-child(1){animation-delay:.1s;height:40%}
.mp-mod.is-active .pm-abars i:nth-child(2){animation-delay:.2s;height:62%}
.mp-mod.is-active .pm-abars i:nth-child(3){animation-delay:.3s;height:52%}
.mp-mod.is-active .pm-abars i:nth-child(4){animation-delay:.4s;height:84%}
.mp-mod.is-active .pm-abars i:nth-child(5){animation-delay:.5s;height:100%}
@keyframes pmBar{to{transform:scaleY(1)}}

/* offline */
.pm-off{display:flex;flex-direction:column;gap:14px;align-items:center;padding-top:16px}
.pm-offchip{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:#1a1d1a;border:1px solid #343834;font-size:12px;font-weight:800;color:#d8d8d8}
.pm-offchip i{width:8px;height:8px;border-radius:50%;background:#ffb35c}
.pm-off.is-online .pm-offchip{border-color:var(--brand-line);color:var(--brand)}
.pm-off.is-online .pm-offchip i{background:var(--brand)}
.pm-sync{display:flex;flex-direction:column;align-items:center;gap:4px}
.pm-sync svg{width:44px;height:44px;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pm-syncarc{stroke-dasharray:96;stroke-dashoffset:96}
.mp-mod.is-active .pm-syncarc{animation:pmSync 2.6s linear infinite}
@keyframes pmSync{to{stroke-dashoffset:-96}}
.pm-sync span{font-size:12px;font-weight:800;color:var(--brand)}
.pm-offrows{display:flex;flex-direction:column;gap:8px;width:100%}

/* settings */
.pm-set{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.pm-srow{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:13px;background:#141614;border:1px solid #262926;opacity:0;transform:translateX(-12px)}
.mp-mod.is-active .pm-srow{animation:pmSlideIn .4s var(--ease) forwards}
.mp-mod.is-active .pm-srow:nth-child(2){animation-delay:.1s}
.mp-mod.is-active .pm-srow:nth-child(3){animation-delay:.2s}
.mp-mod.is-active .pm-srow:nth-child(4){animation-delay:.3s}
.pm-toggle{width:40px;height:22px;border-radius:99px;background:#242724;position:relative;flex-shrink:0}
.pm-toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#8a8d8a;transition:all .3s var(--ease)}
.mp-mod.is-active .pm-srow:nth-child(odd) .pm-toggle{background:#1e3a24}
.mp-mod.is-active .pm-srow:nth-child(odd) .pm-toggle::after{left:21px;background:var(--brand)}

/* ---------- floating dashboards (opening) ---------- */
.md-eng,.md-store,.md-grow{
  position:absolute;z-index:7;padding:16px 18px;width:250px;
  opacity:calc(var(--d,0));transform:translateY(calc((1 - var(--d,0)) * 18px));
  pointer-events:none;will-change:opacity,transform;
}
.md-eng{inset-inline-start:5.5%;top:21%}
.md-eng-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--text-p2);margin-bottom:12px}
.md-eng-led{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand);animation:mdPulseDot 1.4s infinite}
.md-eng-status{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.md-eng-status b{font-size:15px;font-weight:900;color:var(--brand);letter-spacing:.08em}
.md-eng-bar{height:5px;border-radius:3px;background:#262926;overflow:hidden}
.md-eng-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:3px}
.md-eng-rows{display:flex;flex-direction:column;gap:8px}
.md-eng-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-p2)}
.md-eng-row b{font-size:14px;font-weight:800;color:#e8e8e8;font-variant-numeric:tabular-nums}

.md-store{inset-inline-end:5.5%;top:18%}
.md-st-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.md-st-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,#2c332c,#171b17);border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.md-st-icon i{width:18px;height:18px;border-radius:6px;background:var(--brand)}
.md-st-head b{display:block;font-size:14px;font-weight:800}
.md-st-head span{font-size:10.5px;color:var(--text-p2)}
.md-st-status b{font-size:15px;font-weight:900;letter-spacing:.1em;color:var(--brand)}
.md-st-badges{display:flex;gap:8px;margin-top:12px}
.md-st-badge{flex:1;text-align:center;padding:8px 6px;border-radius:10px;background:#101310;border:1px solid #2b2e2b;font-size:10.5px;font-weight:800;color:#d5d8d5}

.md-grow{width:236px}
.md-grow-a{inset-inline-start:5.5%;bottom:36%}
.md-grow-b{inset-inline-end:5.5%;bottom:13%;width:224px}
.md-g-lbl{display:block;font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--text-p2);margin-bottom:6px}
.md-g-num{display:block;font-size:30px;font-weight:900;color:var(--brand);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.md-g-chart{width:100%;margin-top:8px}
.md-g-line{stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:calc(220 * (1 - var(--d,0)))}
.md-g-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-p2)}
.md-g-row + .md-g-row{border-top:1px solid #242724}
.md-g-row b{font-size:15px;font-weight:900;color:#ecedec;font-variant-numeric:tabular-nums}

/* ---------- captions / rail / status / hero ---------- */
.md-acts{position:absolute;z-index:8;inset-inline-start:7%;bottom:10%;max-width:430px;width:min(430px,86vw);pointer-events:none}
.md-act{position:absolute;bottom:0;inset-inline-start:0;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);width:100%}
.md-act.is-on{opacity:1;transform:none}
.md-act-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--brand);text-transform:uppercase;margin-bottom:10px}
.md-act h3{font-size:clamp(21px,2.4vw,29px);font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.md-act p{font-size:14.5px;line-height:1.6;color:var(--text-p2);margin:0}
.md-rail{position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);z-index:8;display:flex;flex-direction:column;gap:12px}
.md-rail i{width:7px;height:7px;border-radius:50%;background:#3a3d3a;transition:all .3s var(--ease);position:relative}
.md-rail i.is-on{background:var(--brand);box-shadow:0 0 12px var(--brand);transform:scale(1.3)}
.md-rail i.is-done{background:#57795c}
.md-rail span{position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%);font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--text-ph);white-space:nowrap;opacity:0;transition:opacity .3s}
.md-rail i.is-on span{opacity:1;color:var(--brand)}
.md-status{
  position:absolute;left:50%;bottom:4.2%;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;
  background:rgba(18,20,18,.85);border:1px solid #2d302d;
  font-size:10.5px;font-weight:900;letter-spacing:.18em;color:#9fb3a1;
}
.md-status i{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand);animation:mdPulseDot 1.6s infinite}

.md-hero{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);z-index:9;text-align:center;max-width:760px;width:92%;opacity:0}
.md-hero-eyebrow{display:inline-block;margin-bottom:16px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.md-hero h1{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-bottom:18px}
.md-hero p{font-size:17px;line-height:1.65;color:var(--text-p2);max-width:560px;margin:0 auto}
.md-hero-cue{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-ph)}
.md-hero-cue::after{content:"";width:1.5px;height:44px;background:linear-gradient(var(--brand),transparent);animation:mdCue 1.8s var(--ease) infinite}
@keyframes mdCue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   SECTION 01 · FROM IDEA TO APP
   ============================================================ */
.mi-space{height:340svh}
.mi-stage{position:relative;flex:1;width:100%;min-height:0}
.mi-phone{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:150px;aspect-ratio:150/306;border-radius:30px;padding:7px;
  background:linear-gradient(160deg,#3a3a3a,#161616);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(162,250,163,.1);
  z-index:4;
}
.mi-phone::after{content:"";position:absolute;inset:7px;border-radius:24px;background:#0b0d0b}
.mi-phisland{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:44px;height:12px;border-radius:8px;background:#000;z-index:3}
.mi-phbulb{position:absolute;inset:7px;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:24px}
.mi-phbulb svg{width:34px;height:34px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(162,250,163,.6))}
.mi-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.mi-lines line{stroke:rgba(162,250,163,.4);stroke-width:1.1}
.mi-items{position:absolute;inset:0;z-index:3}
.mi-item{
  position:absolute;padding:10px 13px;border-radius:12px;max-width:170px;
  background:rgba(26,28,26,.92);border:1px solid #2e322e;
  font-size:11.5px;font-weight:700;color:#b7bab7;line-height:1.35;
  box-shadow:0 14px 36px rgba(0,0,0,.5);
  transform:translate(var(--tx,0px), var(--ty,0px));
  will-change:transform;white-space:normal;
}
.mi-item i{display:inline-block;width:8px;height:8px;border-radius:3px;background:#3c403c;margin-inline-end:7px;vertical-align:1px}
.mi-item.is-linked{border-color:var(--brand-line);color:#e2efe2}
.mi-item.is-linked i{background:var(--brand)}
.mi-strategy{
  position:absolute;left:50%;top:auto;bottom:4.5%;transform:translate(-50%,0) scale(.8);z-index:5;
  padding:9px 20px;border-radius:99px;background:rgba(14,20,14,.9);border:1px solid var(--brand-line);
  font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--brand);opacity:0;
}
/* lerp helpers are not native CSS — computed in JS instead */

/* ============================================================
   SECTION 02 · USER JOURNEY
   ============================================================ */
.mj-space{height:420svh}
.mj-stage{position:relative;flex:1;width:100%;min-height:0}
.mj-phone{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:4;
  width:170px;aspect-ratio:170/340;border-radius:32px;padding:8px;
  background:linear-gradient(160deg,#3a3a3a,#161616);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(162,250,163,.1);
}
.mj-screen{position:absolute;inset:8px;border-radius:25px;background:#0b0d0b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.mj-screen b{width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#263126,#151a15);border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center}
.mj-screen b svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mj-screen span{font-size:12px;font-weight:800;color:#e2e5e2;letter-spacing:.04em}
.mj-ring{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(600px,88vw);z-index:2;overflow:visible}
.mj-track{stroke:#242724;stroke-width:1.5;stroke-dasharray:3 7}
.mj-flow{stroke:var(--brand);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(162,250,163,.6))}
.mj-nodes{position:absolute;inset:0;z-index:3;pointer-events:none}
.mj-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;
  transform:translate(-50%,-50%);
}
.mj-node i{
  width:40px;height:40px;border-radius:50%;background:#1a1d1a;border:1.6px solid #313531;
  display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease);
}
.mj-node i svg{width:18px;height:18px;stroke:#767b76;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.mj-node span{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--text-ph);transition:color .3s;white-space:nowrap}
.mj-node.is-on i{border-color:var(--brand);background:#17251a;box-shadow:0 0 26px rgba(162,250,163,.4)}
.mj-node.is-on i svg{stroke:var(--brand)}
.mj-node.is-on span{color:var(--brand)}
.mj-node.is-done i{border-color:#3d5741}
.mj-node.is-done i svg{stroke:#6f9576}
.mj-node.is-done span{color:#7d8a7d}
.mj-travelers i{
  position:absolute;width:10px;height:10px;border-radius:50%;z-index:5;
  background:var(--brand);box-shadow:0 0 14px var(--brand);
  transform:translate(-50%,-50%);left:50%;top:54%;
}
.mj-metric{position:absolute;left:50%;top:calc(54% + min(200px, 21svh));transform:translateX(-50%);z-index:6;padding:13px 22px;text-align:center}
.mj-metric span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--text-p2);text-transform:uppercase;margin-bottom:4px}
.mj-metric b{font-size:27px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ============================================================
   SECTION 03 · INTERACTION LAB
   ============================================================ */
.mx-space{height:760svh}
.mx-stage{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.mx-phone{
  position:relative;width:min(270px,58vw);aspect-ratio:270/545;border-radius:44px;padding:10px;
  background:linear-gradient(160deg,#3a3a3a,#161616);
  box-shadow:0 46px 110px rgba(0,0,0,.7),0 0 90px rgba(162,250,163,.1);
}
.mx-screen{position:absolute;inset:10px;border-radius:35px;background:#0b0d0b;overflow:hidden}
.mx-demo{position:absolute;inset:0;opacity:0;pointer-events:none;padding:54px 16px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.mx-demo.is-on{opacity:1}
.mx-chip{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:9px;padding:9px 18px;border-radius:99px;
  background:rgba(18,20,18,.88);border:1px solid var(--brand-line);
  font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--brand);white-space:nowrap;
}
.mx-chip i{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand);animation:mdPulseDot 1.5s infinite}
.mx-dots{position:absolute;left:50%;bottom:2.4%;transform:translateX(-50%);display:flex;gap:5px;z-index:8}
.mx-dots i{width:5px;height:5px;border-radius:50%;background:#353835;transition:all .3s}
.mx-dots i.is-on{background:var(--brand)}
.mx-dots i.is-done{background:#57795c}
/* demo atoms */
.pm-swipecard{position:relative;width:70%;height:56%}
.pm-swipecard span{position:absolute;inset:0;border-radius:18px;background:#171a17;border:1px solid #2b2e2b;display:flex;align-items:center;justify-content:center}
.pm-swipecard span i{width:44%;height:55%;border-radius:12px;background:#232723}
.pm-swipecard span:nth-child(2){transform:rotate(-5deg) scale(.96);opacity:.7}
.mx-demo.is-on .pm-swipecard span:nth-child(1){animation:mxSwipe 2.2s var(--ease) infinite}
@keyframes mxSwipe{0%{transform:none;opacity:1}35%{transform:translateX(120%) rotate(10deg);opacity:0}36%{transform:translateX(-120%) rotate(-10deg);opacity:0}70%,100%{transform:none;opacity:1}}
.pm-pull{width:80%;display:flex;flex-direction:column;gap:8px}
.pm-pullarrow{align-self:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--brand);border-top-color:transparent;animation:pmSpin 1.1s linear infinite}
@keyframes pmSpin{to{transform:rotate(360deg)}}
.pm-pull span{height:44px;border-radius:12px;background:#141714;border:1px solid #262a26}
.mx-demo.is-on .pm-pull{animation:mxPull 2.2s var(--ease) infinite}
@keyframes mxPull{0%,100%{transform:translateY(0)}30%{transform:translateY(16px)}60%{transform:translateY(0)}}
.pm-sheet{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:22px 22px 0 0;background:#161916;border-top:1px solid #2d302d;padding:18px;display:flex;flex-direction:column;gap:10px;transform:translateY(102%)}
.mx-demo.is-on .pm-sheet{animation:mxSheet 2.6s var(--ease) infinite}
@keyframes mxSheet{0%{transform:translateY(102%)}25%,70%{transform:translateY(0)}95%,100%{transform:translateY(102%)}}
.pm-sheet::before{content:"";width:38px;height:4px;border-radius:2px;background:#3a3d3a;align-self:center}
.pm-sheet i{height:36px;border-radius:11px;background:#1d201d;border:1px solid #2a2d2a}
.pm-finger{width:64px;height:64px;border-radius:50%;border:2px solid #2e322e;display:flex;align-items:center;justify-content:center;position:relative}
.pm-finger svg{width:34px;height:34px;stroke:#5b605b;fill:none;stroke-width:1.7;stroke-linecap:round}
.mx-demo.is-on .pm-finger{border-color:var(--brand);box-shadow:0 0 30px rgba(162,250,163,.35)}
.mx-demo.is-on .pm-finger svg{stroke:var(--brand)}
.mx-demo.is-on .pm-finger::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.6px solid var(--brand-line);animation:pmRing 1.6s ease-out infinite}
@keyframes pmRing{from{transform:scale(.7);opacity:1}to{transform:scale(1.35);opacity:0}}
.pm-voice{display:flex;align-items:center;gap:5px;height:60px}
.pm-voice i{width:6px;border-radius:3px;background:var(--brand);animation:mxVoice 1s ease-in-out infinite}
.pm-voice i:nth-child(1){height:14px}.pm-voice i:nth-child(2){height:30px;animation-delay:.1s}
.pm-voice i:nth-child(3){height:44px;animation-delay:.2s}.pm-voice i:nth-child(4){height:26px;animation-delay:.3s}
.pm-voice i:nth-child(5){height:38px;animation-delay:.4s}.pm-voice i:nth-child(6){height:18px;animation-delay:.5s}
.pm-voice i:nth-child(7){height:30px;animation-delay:.6s}
@keyframes mxVoice{50%{transform:scaleY(.4)}}
.pm-drag{width:80%;display:flex;flex-direction:column;gap:9px}
.pm-drag span{height:46px;border-radius:12px;background:#141714;border:1px solid #262a26}
.pm-drag span.is-moving{border-color:var(--brand);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.mx-demo.is-on .pm-drag span.is-moving{animation:mxDrag 2.4s var(--ease) infinite}
@keyframes mxDrag{0%,100%{transform:translateY(0);order:0}45%,55%{transform:translateY(55px) scale(1.03)}90%{transform:translateY(0)}}
.pm-dark{position:absolute;inset:0;background:#0b0d0b}
.pm-darkpanel{width:80%;display:flex;flex-direction:column;gap:9px;position:relative}
.pm-darkpanel span{height:40px;border-radius:12px;background:#e8eae6;animation:mxDark 2.6s var(--ease) infinite}
.pm-darkpanel span:nth-child(2){width:70%}
@keyframes mxDark{0%,25%{background:#e8eae6}55%,90%{background:#1d201d}100%{background:#e8eae6}}
.pm-haptic{display:flex;flex-direction:column;align-items:center;gap:10px}
.pm-hbtn{width:120px;height:44px;border-radius:13px;background:var(--brand)}
.mx-demo.is-on .pm-hbtn{animation:mxTap 1.8s var(--ease) infinite}
@keyframes mxTap{0%,100%{transform:scale(1)}8%{transform:scale(.92)}16%{transform:scale(1)}}
.pm-waves{display:flex;gap:8px}
.pm-waves i{width:34px;height:34px;border-radius:50%;border:1.6px solid var(--brand-line);opacity:0}
.mx-demo.is-on .pm-waves i{animation:pmRing 1.8s ease-out infinite}
.mx-demo.is-on .pm-waves i:nth-child(2){animation-delay:.3s}
.mx-demo.is-on .pm-waves i:nth-child(3){animation-delay:.6s}

/* ============================================================
   SECTION 04 · APP PERFORMANCE
   ============================================================ */
.mf-space{height:430svh}
.mf-stage{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;gap:6vw}
.mf-phone{
  position:relative;width:min(220px,42vw);aspect-ratio:220/446;border-radius:38px;padding:9px;flex-shrink:0;
  background:linear-gradient(160deg,#3a3a3a,#161616);
  box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 80px rgba(162,250,163,.1);
  transform:perspective(1100px) rotateY(calc(-14deg * var(--tilt,0))) rotateX(4deg);
  transition:transform .1s linear;will-change:transform;
}
.mf-screen{position:absolute;inset:9px;border-radius:29px;background:#0b0d0b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.mf-spark{width:78%}
.mf-sparkline{stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:calc(220 * (1 - var(--sp,0)));filter:drop-shadow(0 0 6px rgba(162,250,163,.5))}
.mf-fpsring{position:relative;width:92px;height:92px}
.mf-fpsring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mf-ringbg{stroke:#222622;stroke-width:6}
.mf-ringfg{stroke:var(--brand);stroke-width:6;stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:calc(188.5 * (1 - var(--fps,0)));filter:drop-shadow(0 0 8px rgba(162,250,163,.5))}
.mf-fpsring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#ecedec;font-variant-numeric:tabular-nums}
.mf-dash{display:grid;grid-template-columns:repeat(2,minmax(180px,240px));gap:14px}
.mf-metric{padding:14px 16px;border-radius:15px;background:rgba(22,22,22,.8);border:1px solid var(--stroke);backdrop-filter:blur(10px)}
.mf-metric span{display:block;font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--text-p2);text-transform:uppercase;margin-bottom:6px}
.mf-metric b{font-size:23px;font-weight:900;color:#ecedec;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mf-metric b em{font-style:normal;font-size:12px;color:var(--text-p2);font-weight:700;margin-inline-start:3px}
.mf-metric .mf-mbar{height:4px;border-radius:2px;background:#242724;margin-top:9px;overflow:hidden}
.mf-metric .mf-mbar i{display:block;height:100%;background:var(--brand);border-radius:2px;width:calc(var(--v,0) * 100%)}

/* ============================================================
   SECTION 05 · BUSINESS CHALLENGES (Before → Engineering → Result)
   ============================================================ */
.mc-space{height:560svh}
.mc-sticky{justify-content:flex-start;padding-bottom:3vh}
.mc-hud{width:min(1160px,94vw);margin-top:2.2vh;position:relative;z-index:5}
.mc-progress{display:flex;align-items:center;gap:16px}
.mc-progress > span:first-child{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--text-ph);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-bar{flex:1;height:3px;border-radius:2px;background:#242724;overflow:hidden}
.mc-bar span{display:block;height:100%;width:0;background:var(--brand);border-radius:2px}
.mc-phases{display:flex;gap:14px;align-items:center;margin-inline-start:8px}
.mc-phases i{display:flex;align-items:center;gap:7px;font-style:normal}
.mc-phases i b{width:8px;height:8px;border-radius:50%;background:#353835;transition:all .3s var(--ease)}
.mc-phases i span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-ph);transition:color .3s}
.mc-phases i.is-done b{background:#57795c}
.mc-phases i.is-done span{color:#6f806f}
.mc-phases i.is-on b{background:var(--brand);box-shadow:0 0 12px var(--brand)}
.mc-phases i.is-on span{color:var(--brand)}
.mc-grid{
  flex:1;width:min(1160px,94vw);min-height:0;display:grid;
  grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;padding:2vh 0 3vh;
}
.mc-scene-wrap{position:relative;aspect-ratio:16/10.6;max-height:56svh;border-radius:22px;overflow:hidden;background:#101210;border:1px solid #262a26}
.mc-scene-bg{position:absolute;inset:0;background:radial-gradient(420px 260px at 50% 45%,rgba(162,250,163,.05),transparent 70%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:auto,46px 46px,46px 46px}
.mc-scene{position:absolute;inset:0}
.mc-scene svg{position:absolute;inset:0;width:100%;height:100%}
.mc-copy{display:flex;flex-direction:column;gap:16px;position:relative}
.mc-kicker{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--text-ph);margin-bottom:10px;text-transform:uppercase}
.mc-kicker-good{color:var(--brand)}
.mc-kicker-mid{color:var(--text-p2)}
.mc-kicker-mid::after{content:"";display:inline-block;width:22px;height:2px;background:var(--brand);margin-inline-start:9px;vertical-align:middle;animation:mcMidDash 1.2s var(--ease) infinite}
@keyframes mcMidDash{0%{transform:scaleX(0);transform-origin:left}55%{transform:scaleX(1);transform-origin:left}56%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.mc-copy h3{font-size:clamp(19px,2vw,24px);font-weight:900;line-height:1.2;letter-spacing:-.01em}
.mc-bad h3{color:var(--text-p2)}
.mc-bad{opacity:calc(.9 * var(--pbad,1));max-height:calc(var(--pbad,1) * 220px);overflow:hidden;transform:translateY(calc((1 - var(--pbad,1)) * -12px))}
.mc-mid{opacity:var(--pmid,0);max-height:calc(var(--pmid,0) * 150px);overflow:hidden;transform:translateY(calc((1 - var(--pmid,0)) * 10px))}
.mc-mid p{font-size:14.5px;color:var(--text-p2);line-height:1.6;margin:0;max-width:36ch}
.mc-good{opacity:var(--pgood,0);transform:translateY(calc((1 - var(--pgood,0)) * 16px))}
.mc-flip{color:var(--brand);opacity:calc(var(--pmid,0) * .9);max-height:calc(var(--pmid,0) * 56px);overflow:hidden}
.mc-flip svg{width:20px;height:40px;display:block;margin-inline-start:6px}
[dir="rtl"] .mc-flip svg{transform:scaleX(-1)}
.mc-metric{display:flex;align-items:baseline;gap:12px;margin-top:12px}
.mc-metric strong{font-size:clamp(30px,3.4vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.mc-metric span{font-size:12.5px;color:var(--text-ph);font-weight:600;max-width:150px;line-height:1.4}
.mc-metric-bad strong{color:#7d7d7d}
.mc-metric-good strong{color:var(--brand);text-shadow:0 0 34px rgba(162,250,163,.4)}
.mc-metric-good strong.is-mid{color:#9a9a9a;text-shadow:none}
.mc-good.is-live .mc-metric-good strong{animation:mcGlow 2.6s ease-in-out infinite}
@keyframes mcGlow{50%{text-shadow:0 0 46px rgba(162,250,163,.6)}}
/* scene layer palettes */
.mc-scene [data-l="prob"]{filter:grayscale(1) brightness(.94)}
.mc-scene [data-l="sol"]{filter:drop-shadow(0 0 26px rgba(162,250,163,.10))}
/* scene atoms */
.mcs-curve{stroke:#4a4d4a;stroke-width:3;fill:none;stroke-linecap:round}
.mcs-curve-good{stroke:var(--brand);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 * (1 - var(--s,0)));filter:drop-shadow(0 0 10px rgba(162,250,163,.5))}
.mcs-area{fill:rgba(162,250,163,.08);opacity:var(--s,0)}
.mcs-grid-l{stroke:#1f221f;stroke-width:1}
.mcs-lbl{font-size:9px;fill:#5c605c;font-weight:700;letter-spacing:.08em}
.mcs-lbl-g{font-size:9px;fill:var(--brand);font-weight:800;letter-spacing:.08em;opacity:var(--s,0)}
.mcs-gauge-bg{stroke:#262926;stroke-width:9;fill:none;stroke-linecap:round}
.mcs-gauge-fg{stroke:var(--brand);stroke-width:9;fill:none;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 * (1 - var(--s,0)));filter:drop-shadow(0 0 12px rgba(162,250,163,.55))}
.mcs-needle{stroke:#d8d8d8;stroke-width:3.4;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 92%;transform:rotate(calc(-58deg + var(--s,0) * 110deg))}
.mcs-star{fill:#2c2f2c;stroke:#3a3d3a;stroke-width:1.4;transform-box:fill-box;transform-origin:center}
.mcs-star.is-lit{fill:var(--brand);stroke:var(--brand);filter:drop-shadow(0 0 10px rgba(162,250,163,.6))}
.mcs-step{fill:#181b18;stroke:#2c2f2c;stroke-width:1.4;rx:10}
.mcs-step.is-done{fill:#152015;stroke:var(--brand-line)}
.mcs-step-txt{font-size:9.5px;fill:#838783;font-weight:700}
.mcs-step.is-done + .mcs-step-txt{fill:var(--brand)}
.mcs-arrow{stroke:#3a3d3a;stroke-width:2;stroke-dasharray:4 5}
.mcs-arrow.is-flow{stroke:var(--brand);stroke-dasharray:100;stroke-dashoffset:calc(100 * (1 - var(--s,0)))}
.mcs-bar{fill:#3d403d;transform-box:fill-box;transform-origin:bottom;transform:scaleY(var(--sy,1))}
.mcs-bar-g{fill:var(--brand);transform-box:fill-box;transform-origin:bottom;transform:scaleY(var(--s,0));filter:drop-shadow(0 0 8px rgba(162,250,163,.4))}
.mcs-user{fill:#5c605c}
.mcs-user-g{fill:var(--brand)}

/* ============================================================
   SECTION 06 · HOW WE BUILD
   ============================================================ */
.mb-space{height:480svh}
.mb-stage{position:relative;flex:1;width:min(1160px,94vw);min-height:0;display:flex;align-items:center;gap:6vw;padding-bottom:4vh}
.mb-track{position:relative;flex:0 0 min(360px,40vw);height:min(62svh,560px)}
.mb-spine{position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:#242724;border-radius:2px;overflow:hidden}
.mb-spine i{display:block;width:100%;height:100%;background:var(--brand);transform-origin:top;transform:scaleY(var(--fill,0));box-shadow:0 0 12px rgba(162,250,163,.6)}
.mb-nodes{position:absolute;inset:0}
.mb-node{position:absolute;left:0;right:0;display:flex;align-items:center;gap:14px;transform:translateY(var(--ny))}
.mb-node i{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;background:#1a1d1a;border:1.6px solid #313531;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#767b76;font-style:normal;
  transition:all .4s var(--ease);
}
.mb-node span{font-size:13.5px;font-weight:700;color:var(--text-ph);transition:color .3s}
.mb-node.is-on i{border-color:var(--brand);background:#17251a;color:var(--brand);box-shadow:0 0 24px rgba(162,250,163,.45)}
.mb-node.is-on span{color:#ecedec}
.mb-node.is-done i{border-color:#3d5741;background:#162015;color:#6f9576}
.mb-node.is-done span{color:#7d8a7d}
.mb-detail{flex:1;max-width:460px;padding:30px 32px;position:relative}
.mb-stepno{position:absolute;top:18px;inset-inline-end:22px;font-size:44px;font-weight:900;color:rgba(162,250,163,.14);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mb-detail h3{font-size:26px;font-weight:900;letter-spacing:-.01em;margin-bottom:10px}
.mb-detail p{font-size:14.5px;line-height:1.65;color:var(--text-p2);margin:0;min-height:72px}
.mb-stepdots{display:flex;gap:6px;margin-top:18px}
.mb-stepdots i{width:16px;height:4px;border-radius:2px;background:#2c2f2c;transition:background .3s}
.mb-stepdots i.is-on{background:var(--brand)}
.mb-stepdots i.is-done{background:#57795c}

/* ============================================================
   SECTION 07 · TECHNOLOGY ECOSYSTEM
   ============================================================ */
.mt-space{height:520svh}
.mt-stage{position:relative;flex:1;width:min(1160px,94vw);min-height:0;display:flex;align-items:center;gap:3vw;padding-bottom:4vh}
.mt-field{position:relative;flex:1;height:min(60svh,560px)}
.mt-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.mt-lines line{stroke:rgba(162,250,163,.32);stroke-width:1.1;stroke-dasharray:5 6}
.mt-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:110px;aspect-ratio:110/224;border-radius:24px;padding:6px;
  background:linear-gradient(160deg,#3a3a3a,#161616);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 50px rgba(162,250,163,.14);
}
.mt-core::after{content:"";position:absolute;inset:6px;border-radius:18px;background:#0b0d0b}
.mt-core span{position:absolute;inset:6px;z-index:2;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:900;letter-spacing:.1em;color:var(--brand);text-transform:uppercase;text-align:center}
.mt-nodes{position:absolute;inset:0;z-index:4}
.mt-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
.mt-node i{
  width:46px;height:46px;border-radius:15px;background:#191c19;border:1.5px solid #2e322e;
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:10px;font-weight:900;color:#8b8f8b;letter-spacing:.02em;text-align:center;line-height:1.15;padding:4px;
  transition:all .45s var(--ease);
}
.mt-node span{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--text-ph);transition:color .3s;white-space:nowrap}
.mt-node.is-on i{border-color:var(--brand);background:#17251a;color:var(--brand);box-shadow:0 0 26px rgba(162,250,163,.4)}
.mt-node.is-on span{color:var(--brand)}
.mt-node.is-done i{border-color:#3d5741;background:#162015;color:#7ca184}
.mt-node.is-done span{color:#7d8a7d}
.mt-panel{flex:0 0 300px;padding:24px 26px}
.mt-p-kicker{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.18em;color:var(--text-ph);margin-bottom:10px}
.mt-panel h3{font-size:22px;font-weight:900;letter-spacing:-.01em;margin-bottom:8px;color:var(--brand)}
.mt-panel p{font-size:13.5px;line-height:1.6;color:var(--text-p2);margin:0 0 12px;min-height:88px}
.mt-p-tag{display:inline-block;padding:5px 12px;border-radius:99px;background:#162015;border:1px solid var(--brand-line);font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--brand);text-transform:uppercase}

/* ============================================================
   SECTION 08 · DEVICE ECOSYSTEM
   ============================================================ */
.mdd-space{height:380svh}
.mdd-stage{position:relative;flex:1;width:min(1160px,94vw);min-height:0;padding-bottom:4vh}
.mdd-sync{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.mdd-sync line{stroke:rgba(162,250,163,.34);stroke-width:1.2;stroke-dasharray:5 7}
.mdd-sync circle{fill:var(--brand);filter:drop-shadow(0 0 8px var(--brand))}
.mdd-cloud{
  position:absolute;left:50%;top:16%;transform:translate(-50%,-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.mdd-cloud svg{width:52px;height:52px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 16px rgba(162,250,163,.5))}
.mdd-cloud span{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--text-p2);text-transform:uppercase}
.mdd-devs{position:absolute;inset:0;z-index:3}
.mdd-dev{
  position:absolute;transform:translate(-50%,-50%);
  background:linear-gradient(160deg,#353535,#151515);padding:6px;
  box-shadow:0 26px 66px rgba(0,0,0,.6);
  opacity:calc(.35 + var(--d,0) * .65);
}
.mdd-dev .mdd-scr{position:relative;width:100%;height:100%;overflow:hidden;background:#0b0d0b}
.mdd-dev .mdd-ui{position:absolute;inset:0;padding:8%;display:flex;flex-direction:column;gap:7%;opacity:var(--d,0)}
.mdd-ui i{display:block;border-radius:4px;background:#242824}
.mdd-ui i.g{background:var(--brand);opacity:.85}
.mdd-dev span{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--text-ph);white-space:nowrap;text-transform:uppercase}
.mdd-dev.is-on span{color:var(--brand)}
.mdd-dev-android{width:132px;aspect-ratio:132/270;border-radius:20px;left:16%;top:66%}
.mdd-dev-android .mdd-scr{border-radius:14px}
.mdd-dev-iphone{width:138px;aspect-ratio:138/280;border-radius:24px;left:34%;top:62%}
.mdd-dev-iphone .mdd-scr{border-radius:18px}
.mdd-dev-iphone::after{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:36px;height:9px;border-radius:6px;background:#000;z-index:2}
.mdd-dev-tablet{width:190px;aspect-ratio:190/140;border-radius:16px;left:57%;top:64%}
.mdd-dev-tablet .mdd-scr{border-radius:10px}
.mdd-dev-fold{width:206px;aspect-ratio:206/150;border-radius:18px;left:79%;top:60%}
.mdd-dev-fold .mdd-scr{border-radius:12px}
.mdd-dev-fold::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1.5px;background:rgba(255,255,255,.08);z-index:2}
.mdd-dev-watch{width:74px;aspect-ratio:74/88;border-radius:22px;left:91%;top:78%}
.mdd-dev-watch .mdd-scr{border-radius:16px}

/* ============================================================
   SECTION 09 · REAL FEATURES
   ============================================================ */
.mr-space{height:430svh}
.mr-stage{position:relative;flex:1;width:min(1060px,94vw);min-height:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-bottom:4vh}
.mr-tabs{display:flex;gap:10px;justify-content:center}
.mr-tab{
  padding:9px 20px;border-radius:99px;border:1px solid #2e322e;background:rgba(22,24,22,.7);
  font-size:12.5px;font-weight:800;color:var(--text-p2);letter-spacing:.04em;transition:all .35s var(--ease);
}
.mr-tab.is-on{border-color:var(--brand);color:var(--brand);background:#152015;box-shadow:0 0 26px rgba(162,250,163,.18)}
.mr-tab.is-done{color:#7d8a7d;border-color:#333}
.mr-board{position:relative;padding:34px 30px 30px;min-height:min(48svh,420px);overflow:hidden}
.mr-actors{position:relative;display:flex;justify-content:space-between;z-index:3}
.mr-actor{display:flex;flex-direction:column;align-items:center;gap:9px;width:19%}
.mr-actor i{
  width:54px;height:54px;border-radius:17px;background:#191d19;border:1.6px solid #2f332f;
  display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease);
}
.mr-actor i svg{width:24px;height:24px;stroke:#7b807b;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.mr-actor span{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--text-p2);text-align:center}
.mr-actor.is-on i{border-color:var(--brand);background:#17251a;box-shadow:0 0 28px rgba(162,250,163,.35)}
.mr-actor.is-on i svg{stroke:var(--brand)}
.mr-actor.is-done i{border-color:#3d5741}
.mr-actor.is-done i svg{stroke:#6f9576}
.mr-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.mr-wires line{stroke:#2a2e2a;stroke-width:1.6;stroke-dasharray:4 6}
.mr-wires line.is-flow{stroke:rgba(162,250,163,.55)}
.mr-token{position:absolute;z-index:5;width:22px;height:22px;transform:translate(-50%,-50%);left:0;top:0;transition:none}
.mr-token i{display:block;width:100%;height:100%;border-radius:50%;background:var(--brand);box-shadow:0 0 22px var(--brand)}
.mr-steps{position:relative;z-index:3;margin-top:30px;display:flex;gap:8px}
.mr-step{
  flex:1;padding:11px 12px;border-radius:12px;background:#151815;border:1px solid #262a26;
  font-size:11px;font-weight:700;color:var(--text-p2);line-height:1.4;transition:all .35s var(--ease);
}
.mr-step.is-on{border-color:var(--brand);color:#eaf3ea;background:#152015}
.mr-step.is-done{border-color:#33473a;color:#7d8a7d}

/* ============================================================
   SECTION 10 · CASE STUDIES
   ============================================================ */
.mcs-space{height:430svh}
.mcs-sticky{justify-content:flex-start;gap:0}
.mcase{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.mcase.is-on{opacity:1;pointer-events:auto}
.mcase-inner{flex:1;width:min(1060px,94vw);min-height:0;display:grid;grid-template-columns:1.05fr 1fr;gap:5vw;align-items:center;padding-bottom:5vh}
.mcase-visual{position:relative;aspect-ratio:16/11;max-height:52svh;border-radius:22px;overflow:hidden;background:#101210;border:1px solid #262a26}
.mcase-visual .mcs-scene-bg{position:absolute;inset:0;background:radial-gradient(400px 260px at 50% 40%,rgba(162,250,163,.06),transparent 70%)}
.mcase-phone{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1/2.02;border-radius:22%/11%;padding:2.4%;background:linear-gradient(160deg,#383838,#151515);box-shadow:0 26px 70px rgba(0,0,0,.6)}
.mcase-phone i{position:absolute;inset:2.4%;border-radius:20%/10%;background:#0b0d0b;overflow:hidden}
.mcase-phone .mcp-ui{position:absolute;inset:6%;display:flex;flex-direction:column;gap:7%}
.mcp-ui b{display:block;border-radius:5px;background:#242824;height:8%}
.mcp-ui b.g{background:var(--brand);height:14%;box-shadow:0 0 20px rgba(162,250,163,.4)}
.mcp-ui span{display:flex;gap:5%;height:26%}
.mcp-ui span b{flex:1;height:100%}
.mcase-kpis{position:absolute;left:7%;bottom:7%;right:7%;display:flex;gap:9px;z-index:2}
.mcase-kpi{flex:1;padding:10px 12px;border-radius:12px;background:rgba(16,18,16,.88);border:1px solid #2a2e2a}
.mcase-kpi b{display:block;font-size:17px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.mcase-kpi span{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--text-p2);text-transform:uppercase}
.mcase-copy h3{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.015em;margin-bottom:6px}
.mcase-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--brand);text-transform:uppercase;margin-bottom:14px}
.mcase-rows{margin-top:18px;display:flex;flex-direction:column}
.mcase-row{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:11px 2px;border-top:1px solid #222422;opacity:.32;transform:translateX(8px);transition:all .45s var(--ease)}
.mcase-row.is-on{opacity:1;transform:none}
.mcase-row b{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--brand);text-transform:uppercase;padding-top:2px}
.mcase-row p{font-size:13.5px;line-height:1.55;color:var(--text-p1);margin:0}
.mcs-nav{position:absolute;bottom:3.4%;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:6}
.mcs-nav i{width:22px;height:4px;border-radius:2px;background:#2c2f2c;transition:background .3s}
.mcs-nav i.is-on{background:var(--brand)}

/* ============================================================
   SECTION 11 · MOBILE INSIGHTS
   ============================================================ */
.min-wrap{display:grid;grid-template-columns:minmax(240px,320px) 1fr 1fr;gap:26px;align-items:stretch}
.min-list{display:flex;flex-direction:column;gap:8px}
.min-item{
  text-align:start;padding:15px 18px;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(22,22,22,.6);cursor:pointer;transition:all .3s var(--ease);
  font-size:14.5px;font-weight:700;color:var(--text-p1);
}
.min-item:hover{border-color:#3a3d3a}
.min-item.is-sel{border-color:var(--brand);color:var(--brand);background:#142014;box-shadow:0 0 30px rgba(162,250,163,.12)}
.min-diagram{position:relative;border-radius:18px;background:#101210;border:1px solid #262a26;overflow:hidden;min-height:340px}
.min-diagram svg{position:absolute;inset:0;width:100%;height:100%}
.min-body{padding:26px 28px;border-radius:18px;background:rgba(22,22,22,.6);border:1px solid var(--stroke)}
.min-body h3{font-size:21px;font-weight:900;margin-bottom:10px;letter-spacing:-.01em}
.min-body p{font-size:14px;line-height:1.7;color:var(--text-p2);margin:0 0 14px}
.min-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.min-body li{font-size:13px;color:var(--text-p1);padding-inline-start:18px;position:relative}
.min-body li::before{content:"";position:absolute;inset-inline-start:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--brand)}
/* diagram atoms */
.mind-l{stroke:var(--brand);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320}
.min-diagram.is-in .mind-l{animation:mindDraw 1.6s var(--ease) forwards}
@keyframes mindDraw{to{stroke-dashoffset:0}}
.mind-b{fill:#1d211d;stroke:#2e322e;stroke-width:1.4}
.mind-bg{fill:#152015;stroke:var(--brand-line);stroke-width:1.4}
.mind-t{font-size:10px;fill:#8d918d;font-weight:700;letter-spacing:.05em}
.mind-tg{font-size:10px;fill:var(--brand);font-weight:800;letter-spacing:.05em}
.mind-c{fill:var(--brand)}
.mind-bar{fill:#3d5741;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.min-diagram.is-in .mind-bar{animation:mindBar .7s var(--ease) forwards}
.min-diagram.is-in .mind-bar:nth-of-type(2){animation-delay:.1s}
.min-diagram.is-in .mind-bar:nth-of-type(3){animation-delay:.2s}
.min-diagram.is-in .mind-bar:nth-of-type(4){animation-delay:.3s}
.min-diagram.is-in .mind-bar:nth-of-type(5){animation-delay:.4s}
@keyframes mindBar{to{transform:scaleY(1)}}

/* ============================================================
   SECTION 12 · MARKETPLACE CONNECTION
   ============================================================ */
.mm-space{height:340svh}
.mm-sticky{justify-content:flex-start}
.mm-stage{position:relative;flex:1;width:min(1060px,94vw);min-height:0;display:grid;grid-template-columns:1fr 130px 1fr;gap:0;align-items:center;padding-bottom:5vh}
.mm-col-lbl{display:block;text-align:center;font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--text-ph);text-transform:uppercase;margin-bottom:16px}
.mm-col > div{display:flex;flex-direction:column;gap:12px}
.mm-pair{padding:13px 16px;border-radius:14px;background:rgba(22,24,22,.75);border:1px solid #2b2f2b;font-size:13.5px;font-weight:800;color:var(--text-p1);display:flex;align-items:center;gap:10px;transition:all .4s var(--ease)}
.mm-pair i{width:9px;height:9px;border-radius:3px;background:#3c403c;flex-shrink:0;transition:background .3s}
.mm-pair.is-on{border-color:var(--brand-line);color:#eaf3ea;background:#142014;box-shadow:0 0 26px rgba(162,250,163,.12)}
.mm-pair.is-on i{background:var(--brand)}
.mm-beams{position:relative;height:100%}
.mm-beams svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mm-beams path{stroke:var(--brand);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;filter:drop-shadow(0 0 8px rgba(162,250,163,.5))}
.mm-beams path.is-drawn{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease)}
.mm-pulse{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 16px var(--brand);left:50%;top:0;transform:translate(-50%,-50%);opacity:0}
.mm-cta{position:absolute;bottom:2.4%;left:50%;transform:translateX(-50%)}

/* ============================================================
   SECTION 13 · WHY CODESTAN
   ============================================================ */
.mw-space{height:430svh}
.mw-stage{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.mw-bgnum{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:min(38svh,380px);font-weight:900;color:rgba(162,250,163,.05);letter-spacing:-.04em;pointer-events:none;font-variant-numeric:tabular-nums}
.mw-inner{position:relative;z-index:2;display:flex;align-items:center;gap:5vw;max-width:900px;width:90%}
.mw-glyph{width:min(220px,30vw);aspect-ratio:1;flex-shrink:0;position:relative}
.mw-glyph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mw-copy h3{font-size:clamp(28px,3.4vw,44px);font-weight:900;letter-spacing:-.02em;margin-bottom:14px}
.mw-copy p{font-size:16.5px;line-height:1.65;color:var(--text-p2);margin:0;max-width:46ch}
.mw-rail{position:absolute;inset-inline-end:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:3}
.mw-rail i{width:7px;height:7px;border-radius:50%;background:#353835;transition:all .3s}
.mw-rail i.is-on{background:var(--brand);box-shadow:0 0 12px var(--brand)}
.mw-rail i.is-done{background:#57795c}
/* glyph atoms */
.mwg-l{stroke:var(--brand);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;filter:drop-shadow(0 0 10px rgba(162,250,163,.45))}
.mw-glyph.is-in .mwg-l{animation:mwgDraw 1.3s var(--ease) forwards}
@keyframes mwgDraw{to{stroke-dashoffset:0}}
.mwg-c{fill:var(--brand);opacity:0}
.mw-glyph.is-in .mwg-c{animation:pmFade .5s ease .7s forwards}
.mwg-spin{transform-box:fill-box;transform-origin:center}
.mw-glyph.is-in .mwg-spin{animation:pmSpin 8s linear infinite}

/* ============================================================
   SECTION 14 · SUCCESS DASHBOARD
   ============================================================ */
.msd-board{padding:30px;border-radius:24px}
.msd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.msd-kpi{padding:16px 18px;border-radius:15px;background:#151815;border:1px solid #262a26}
.msd-kpi span{display:block;font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--text-p2);text-transform:uppercase;margin-bottom:7px}
.msd-kpi b{font-size:26px;font-weight:900;color:#ecedec;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.msd-kpi b.g{color:var(--brand)}
.msd-kpi em{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--brand);margin-top:5px}
.msd-main{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.msd-chart-wrap{padding:20px;border-radius:16px;background:#101210;border:1px solid #262a26}
.msd-chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.msd-chart-head span{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--text-p2);text-transform:uppercase}
.msd-chart-head b{font-size:26px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.msd-line{stroke:var(--brand);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;filter:drop-shadow(0 0 10px rgba(162,250,163,.5))}
.msd-area{fill:rgba(162,250,163,.08);opacity:0}
.msd-board.is-in .msd-line{animation:mindDraw 2.2s var(--ease) .2s forwards}
.msd-board.is-in .msd-area{animation:pmFade 1s ease 1.4s forwards}
.msd-side{display:flex;flex-direction:column;gap:18px}
.msd-funnel{padding:18px;border-radius:16px;background:#101210;border:1px solid #262a26;flex:1;display:flex;flex-direction:column;gap:8px}
.msd-side-lbl{display:block;font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--text-p2);text-transform:uppercase;margin-bottom:8px}
.msd-frow{display:flex;align-items:center;gap:10px}
.msd-frow i{height:22px;border-radius:6px;background:linear-gradient(90deg,var(--brand),#3d5741);transform-origin:inline-start;transform:scaleX(0)}
.msd-board.is-in .msd-frow i{animation:mindBarX .8s var(--ease) forwards}
.msd-board.is-in .msd-frow:nth-child(3) i{animation-delay:.12s}
.msd-board.is-in .msd-frow:nth-child(4) i{animation-delay:.24s}
.msd-board.is-in .msd-frow:nth-child(5) i{animation-delay:.36s}
@keyframes mindBarX{to{transform:scaleX(1)}}
.msd-frow span{font-size:11px;font-weight:700;color:var(--text-p2);white-space:nowrap}
.msd-heat-wrap{padding:18px;border-radius:16px;background:#101210;border:1px solid #262a26}
.msd-heat{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.msd-heat i{aspect-ratio:1;border-radius:3px;background:#1e211e;opacity:0;transform:scale(.5)}
.msd-board.is-in .msd-heat i{animation:msdCell .4s var(--ease) forwards}
@keyframes msdCell{to{opacity:1;transform:scale(1)}}
.msd-heat i.h1{background:#2c3f2e}.msd-heat i.h2{background:#3d5741}.msd-heat i.h3{background:#6f9576}.msd-heat i.h4{background:var(--brand)}

/* ============================================================
   SECTION 15 · FINAL CTA
   ============================================================ */
.mfin{position:relative;background:var(--bg-first);overflow:hidden;padding:130px 0 120px}
.mfin-stage{position:relative;width:min(1160px,94vw);margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:7vw}
.mfin-modules{position:absolute;inset:0;pointer-events:none;z-index:1}
.mfin-mod{position:absolute;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;background:rgba(24,26,24,.85);border:1px solid var(--brand-line);font-size:10.5px;font-weight:800;color:#cfe4cf;box-shadow:0 0 26px rgba(162,250,163,.12)}
.mfin-mod i{width:18px;height:18px;border-radius:6px;background:#1c241c;display:flex;align-items:center;justify-content:center}
.mfin-mod i svg{width:10px;height:10px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mfin-links{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.mfin-links line{stroke:rgba(162,250,163,.3);stroke-width:1.1;stroke-dasharray:4 6}
.mfin-phone{position:relative;z-index:3;width:min(240px,52vw);animation:mfinFloat 5s ease-in-out infinite}
.mfin-phone .mp-frame{width:100%}
@keyframes mfinFloat{50%{transform:translateY(-14px)}}
.mfin-app{position:absolute;inset:44px 0 0 0;padding:18px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:11px}
.mfin-applogo{width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#2c332c,#171b17);border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(162,250,163,.3)}
.mfin-applogo i{width:20px;height:20px;border-radius:7px;background:var(--brand)}
.mfin-mini{display:flex;gap:7px;width:100%}
.mfin-mini span{flex:1;height:44px;border-radius:11px;background:#151815;border:1px solid #262a26}
.mfin-chart{display:flex;gap:6px;align-items:flex-end;height:56px;width:100%}
.mfin-chart i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--brand),#2c4a2f);animation:mfinBar 2.2s ease-in-out infinite}
.mfin-chart i:nth-child(1){height:34%}.mfin-chart i:nth-child(2){height:58%;animation-delay:.15s}
.mfin-chart i:nth-child(3){height:44%;animation-delay:.3s}.mfin-chart i:nth-child(4){height:76%;animation-delay:.45s}
.mfin-chart i:nth-child(5){height:62%;animation-delay:.6s}.mfin-chart i:nth-child(6){height:96%;animation-delay:.75s}
@keyframes mfinBar{50%{transform:scaleY(.82)}}
.mfin-chart i{transform-origin:bottom}
.mfin-copy{position:relative;z-index:3;max-width:480px}
.mfin-copy h2{font-size:clamp(34px,4.2vw,54px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.mfin-copy p{font-size:17px;line-height:1.65;color:var(--text-p2);margin-bottom:30px}
.mfin-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.mfin-all{font-size:14px;font-weight:700;color:var(--text-p2);text-decoration:none;border-bottom:1px solid #3a3d3a;padding-bottom:2px;transition:color .3s,border-color .3s}
.mfin-all:hover{color:var(--brand);border-color:var(--brand)}
.mfin .mp-livebadge{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   RESPONSIVE · ≤ 900px
   ============================================================ */
@media (max-width:900px){
  .md-space{height:960svh}
  .mp-frame{width:min(240px,58vw)}
  .mdc-card{font-size:10px;padding:7px 10px;gap:6px}
  .mdc-card i{width:18px;height:18px}
  .md-eng,.md-store{top:9%;bottom:auto;width:208px;padding:12px 14px;background:rgba(22,22,22,.94)}
  .md-eng{inset-inline-start:4%}
  .md-store{inset-inline-end:4%;top:auto;bottom:32%}
  .md-grow-a{inset-inline-start:4%;bottom:32%;top:auto;width:200px;background:rgba(22,22,22,.94)}
  .md-grow-b{display:none}
  .md-acts{inset-inline-start:5%;inset-inline-end:5%;bottom:3.5%;max-width:none}
  .md-act h3{font-size:19px}
  .md-act p{font-size:13px}
  .md-rail{inset-inline-end:10px;gap:10px}
  .md-rail span{display:none}
  .md-status{display:none}
  .md-hero{top:62%}
  .md-hero h1{font-size:clamp(28px,7.6vw,38px)}
  .md-hero p{font-size:14.5px}

  .sec-head{margin-bottom:20px;padding-inline:5vw}
  .sec-head p{font-size:14.5px}
  .mi-sticky .sec-head,.mj-sticky .sec-head,.mx-sticky .sec-head,.mf-sticky .sec-head,
  .mc-sticky .sec-head,.mb-sticky .sec-head,.mt-sticky .sec-head,.mdd-sticky .sec-head,
  .mr-sticky .sec-head,.mcs-sticky .sec-head,.mm-sticky .sec-head,.mw-sticky .sec-head{padding-top:calc(58px + 1.5vh)}

  .mi-space{height:300svh}
  .mi-item{font-size:10px;max-width:120px;padding:8px 10px}
  .mi-phone{width:110px}
  .mi-strategy{top:auto;bottom:5%;font-size:9.5px}

  .mj-space{height:380svh}
  .mj-ring{width:min(430px,96vw)}
  .mj-node i{width:30px;height:30px}
  .mj-node i svg{width:14px;height:14px}
  .mj-node span{font-size:8.5px}
  .mj-phone{width:120px}
  .mj-metric{top:auto;bottom:6%;padding:10px 16px}
  .mj-metric b{font-size:21px}

  .mx-space{height:640svh}
  .mx-chip{bottom:8%}
  .mx-dots{display:none}

  .mf-space{height:400svh}
  .mf-stage{flex-direction:column;gap:24px}
  .mf-phone{width:150px}
  .mf-dash{grid-template-columns:repeat(2,minmax(140px,1fr));gap:10px;width:94vw}
  .mf-metric{padding:11px 13px}
  .mf-metric b{font-size:18px}

  .mc-space{height:520svh}
  .mc-progress{flex-wrap:wrap}
  .mc-phases{gap:11px;margin-inline-start:0}
  .mc-phases i span{display:none}
  .mc-phases i b{width:9px;height:9px}
  .mc-grid{grid-template-columns:1fr;gap:18px;align-items:start;padding-top:1.5vh}
  .mc-scene-wrap{max-width:520px;margin-inline:auto;width:100%;aspect-ratio:16/9.4}
  .mc-copy{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
  .mc-bad,.mc-good{flex:1;min-width:calc(var(--pbad,1) * 190px)}
  .mc-bad{flex-grow:var(--pbad,1)}
  .mc-mid{flex:1 1 100%;order:10}
  .mc-flip{transform:rotate(-90deg)}
  [dir="rtl"] .mc-flip{transform:rotate(-90deg)}
  .mc-flip svg{margin:0}
  .mc-copy h3{font-size:16px}
  .mc-metric strong{font-size:26px}
  .mc-metric span{font-size:11px}

  .mb-space{height:430svh}
  .mb-stage{flex-direction:column;gap:18px;justify-content:center}
  .mb-track{flex:0 0 auto;width:min(300px,72vw);height:38svh}
  .mb-detail{max-width:min(520px,92vw);padding:18px 22px}
  .mb-detail h3{font-size:20px}
  .mb-detail p{font-size:13px;min-height:58px}

  .mt-space{height:470svh}
  .mt-stage{flex-direction:column;gap:14px;justify-content:center}
  .mt-field{width:100%;height:38svh;flex:none}
  .mt-panel{flex:none;width:min(440px,92vw);padding:14px 18px}
  .mt-panel p{min-height:0;font-size:12.5px}
  .mt-node i{width:38px;height:38px;font-size:8.5px}

  .mdd-space{height:340svh}
  .mdd-cloud{top:20%}
  .mdd-cloud svg{width:38px;height:38px}
  .mdd-dev-android{left:13%;width:88px;top:72%}
  .mdd-dev-iphone{left:31%;width:92px;top:68%}
  .mdd-dev-tablet{left:53%;width:118px;top:73%}
  .mdd-dev-fold{left:74%;width:126px;top:70%}
  .mdd-dev-watch{left:91%;width:50px;top:84%}

  .mr-space{height:400svh}
  .mr-board{padding:20px 14px 16px}
  .mr-actor i{width:40px;height:40px;border-radius:13px}
  .mr-actor i svg{width:18px;height:18px}
  .mr-actor span{font-size:9px}
  .mr-steps{flex-wrap:wrap}
  .mr-step{flex:1 1 45%;font-size:10px;padding:9px 10px}
  .mr-tabs{gap:7px}
  .mr-tab{padding:7px 14px;font-size:11px}

  .mcs-space{height:390svh}
  .mcase{overflow-y:auto}
  .mcase-inner{flex:0 1 auto;grid-template-columns:1fr;gap:12px;align-content:start;min-height:0;padding-top:150px;padding-bottom:9vh}
  .mcase-visual{max-width:300px;margin-inline:auto;width:100%;aspect-ratio:16/10.5;max-height:23svh;flex-shrink:0}
  .mcase-kpis{position:static;margin-top:6px}
  .mcase-kpi{padding:7px 9px}
  .mcase-kpi b{font-size:13.5px}
  .mcase-copy h3{font-size:21px}
  .mcase-row{grid-template-columns:92px 1fr;padding:9px 2px}
  .mcase-row p{font-size:12.5px}
  .mcase-rows{margin-top:10px}

  .min,.msd{padding:80px 0}
  .min-wrap{grid-template-columns:1fr}
  .min-diagram{min-height:250px}

  .mm-space{height:300svh}
  .mm-stage{grid-template-columns:1fr 52px 1fr}
  .mm-pair{font-size:11px;padding:10px 11px;gap:7px}
  .mm-col-lbl{font-size:9px}

  .mw-space{height:390svh}
  .mw-inner{flex-direction:column;text-align:center;gap:18px}
  .mw-glyph{width:130px}
  .mw-copy p{font-size:14px}
  .mw-bgnum{font-size:200px}
  .mw-rail{inset-inline-end:12px}

  .msd-board{padding:16px}
  .msd-kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .msd-kpi b{font-size:20px}
  .msd-main{grid-template-columns:1fr}

  .mfin{padding:90px 0 80px}
  .mfin-stage{flex-direction:column-reverse;gap:44px;text-align:center}
  .mfin-copy{max-width:520px}
  .mfin-btns{justify-content:center}
  .mfin-mod{display:none}
  .mfin-links{display:none}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .md-space,.mi-space,.mj-space,.mx-space,.mf-space,.mc-space,.mb-space,
  .mt-space,.mdd-space,.mr-space,.mcs-space,.mm-space,.mw-space{height:auto;display:block}
  .md-sticky,.mi-sticky,.mj-sticky,.mx-sticky,.mf-sticky,.mc-sticky,.mb-sticky,
  .mt-sticky,.mdd-sticky,.mr-sticky,.mcs-sticky,.mm-sticky,.mw-sticky{position:static;min-height:0;overflow:visible;padding:70px 0}
  /* opening: static final state */
  .md-sticky{position:relative;height:100svh;display:flex;align-items:center;justify-content:center}
  .md-particles,.mdc,.md-links,.md-acts,.md-rail,.md-status,.md-eng,.md-store,.md-grow{display:none}
  .mp{position:relative;left:auto;top:auto;transform:none;flex-shrink:0}
  .mp-cursor{display:none}
  .mp .mp-frame{width:min(218px,50vw)}
  .mp-mod{padding:12px 12px 58px;inset:36px 0 0 0}
  .mp-dock{opacity:1;transform:none}
  .mp-livebadge{opacity:1;transform:translate(-50%,0)}
  .md-hero{position:static;transform:none;opacity:1;margin:26px auto 0}
  .md-hero-sub{margin-bottom:0}
  .md-hero h1{font-size:clamp(30px,3.6vw,44px)}
  .md-hero-cue{margin-top:18px}
  .md-sticky{flex-direction:column}
  /* challenges: static after state */
  .mc-bad{opacity:0;max-height:0}
  .mc-mid,.mc-flip{opacity:0;max-height:0}
  .mc-good{opacity:1;transform:none}
  .mc-phases i:nth-child(1) b,.mc-phases i:nth-child(2) b{background:#57795c}
  .mc-phases i:nth-child(3) b{background:var(--brand);box-shadow:0 0 12px var(--brand)}
  .mc-phases i:nth-child(3) span{color:var(--brand)}
  .mc-grid{align-items:center}
  /* absolute-centered stages collapse to 0 height when static — give them room */
  .mi-stage{flex:0 0 auto;min-height:min(660px,150vw)}
  .mj-stage{flex:0 0 auto;min-height:min(680px,104vw)}
  .mdd-stage{flex:0 0 auto;min-height:min(660px,150vw)}
  /* journey: all nodes lit */
  .mj-node i{border-color:#3d5741}
  .mj-node i svg{stroke:#6f9576}
  .mj-travelers{display:none}
  /* timeline: all done */
  .mb-spine i{transform:scaleY(1)}
  .mb-node i{border-color:#3d5741;background:#162015;color:#6f9576}
  .mb-node span{color:#9aa89a}
  .mb-stepdots i{background:#57795c}
  /* tech: all nodes done */
  .mt-node i{border-color:#3d5741;background:#162015;color:#7ca184}
  .mt-node span{color:#7d8a7d}
  /* devices: all on */
  .mdd-dev{opacity:1}
  .mdd-dev .mdd-ui{opacity:1}
  /* scenarios: first scenario fully lit */
  .mr-actor i{border-color:#3d5741}
  .mr-actor i svg{stroke:#6f9576}
  .mr-step{opacity:1}
  /* principles: static grid */
  .mw-bgnum,.mw-rail{display:none}
  .mw-inner{flex-wrap:wrap;justify-content:center;gap:18px;max-width:1100px}
  /* success dashboard fully drawn */
  .msd-line{stroke-dashoffset:0}
  .msd-area{opacity:1}
  .msd-frow i{transform:scaleX(1)}
  .msd-heat i{opacity:1;transform:none}
  .mfin-mod{display:flex}
  .mfin-links{display:block}
  /* kill keyframes */
  *,*::before,*::after{animation:none!important;transition:none!important}
  .md-sticky .mp-frame{box-shadow:0 50px 130px rgba(0,0,0,.72),0 0 110px rgba(162,250,163,.2)}
}