/* ════════════════════════════════════════════════════════════════════
   হোম পাতার চলন্ত ফোন — “কীভাবে কাজ করে” ছবি দিয়ে (২০২৬-১০-২১)
   মালিক: “home page ta motion graphics diye aro attractive koro, app
   kivabe kaj kore tar kisu example image diye bujao sathe sound rakho.
   mobile screen image diye kivabe time save korbe, kosto lagob korbe”।

   দুটো অংশ, দুটোই `#screen-landing`-এর ভেতরে:
     ১. `.mx-stage` (হিরোর ডানে / ফোনে CTA-র নিচে) — একটা ফোন, যেখানে
        /editor-এর আসল “২ মিনিটে প্রশ্নপত্র” কার্ডের ধাপগুলো আঙুলের চাপসহ
        চলে: ক্লাস → অধ্যায় → পরীক্ষা → বানিয়ে দিন → বদলান → প্রিন্ট।
        শব্দ চালু করলে বাজনা + চাপের শব্দ + বাংলা কণ্ঠ (js/home/motion.js)।
     ২. `.mx-how` (`#lp-how`) — চারটা ছোট ফোন, প্রতিটায় একটা কাজ আর
        “আগে কত সময় · এখন কত” — শুধু CSS-এর লুপ, JS কেবল চালু/থামায়।

   🔴 ফোনের ভেতরের পর্দাগুলো (`.mx-illus`) **ছবি**, আসল বোতাম নয় —
      `aria-hidden`, ভেতরে `<button>`/`<a>`/`<p>` নেই। কারণ:
        · `#screen-landing p{font-size:max(14px,1em)}` সব `<p>`-কে ১৪px-এ
          তোলে — পর্দার ভেতরে `<p>` দিলে নকল ফোনের লেখা ফেটে যায়।
        · `audit-landing.mjs` `.mx-illus`-এর ভেতরের লেখা গোনে না (SVG-র
          মতোই ছবির অংশ); বাইরের সব লেখা ও বোতাম ১৪px/৪৪px মেঝে মানে।
   🔴 সব সিলেক্টর `mx-` দিয়ে শুরু — index.html-এর ৩,৪০০ লাইনের `<style>`-এ
      এই নামের কিছু নেই (মাপা ২১/১০)।
   ════════════════════════════════════════════════════════════════════ */

.mx-stage{
  --mx-g:#0F6E56; --mx-g2:#1E9E75; --mx-gd:#0B4F3E; --mx-mint:#7FD9C0;
  --mx-ink:#18263F; --mx-mute:#66766E; --mx-line:#E2ECE7; --mx-bg:#F3F7F5;
  --mx-k:1;                      /* ফোনের মাপ — ছোট পর্দায় নিচে কমে */
  position:relative; display:flex; flex-direction:column; align-items:center;
  max-width:440px; margin:0 auto; text-align:center;
}

/* ── ফোনের খোলস — নকশা ৩০০×৬২০-এ, ছোট পর্দায় scale ─────────────── */
.mx-phone-wrap{
  width:calc(300px * var(--mx-k)); height:calc(620px * var(--mx-k));
  position:relative; flex:none;
  animation:mxFloat 7s ease-in-out infinite;
}
@keyframes mxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.mx-phone{
  position:absolute; left:0; top:0; width:300px; height:620px;
  transform:scale(var(--mx-k)); transform-origin:0 0;
  border-radius:44px; padding:9px;
  background:linear-gradient(145deg,#2b3a35,#0c1714 60%,#1d2a26);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08) inset,0 0 0 2px #050a09;
}
.mx-phone::before{ /* ক্যামেরার ফুটো */
  content:""; position:absolute; top:19px; left:50%; width:74px; height:20px; margin-left:-37px;
  background:#050a09; border-radius:12px; z-index:9;
}
.mx-screen{
  position:relative; width:282px; height:602px; border-radius:36px; overflow:hidden;
  background:var(--mx-bg); color:var(--mx-ink);
  font-family:'Hind Siliguri',sans-serif; font-size:11px; line-height:1.45; text-align:left;
  -webkit-user-select:none; user-select:none;
}
.mx-screen *{box-sizing:border-box}

/* স্ট্যাটাস বার + অ্যাপের টপবার (আসল /editor-এর মতো: “ম” লোগো, সবুজ) */
.mx-sb{height:34px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 22px 4px; font-size:10.5px; font-weight:700; background:#fff}
.mx-sb .ti{font-size:12px; margin-left:3px}
.mx-top{height:44px; display:flex; align-items:center; gap:8px; padding:0 12px; background:#fff; border-bottom:1px solid var(--mx-line)}
.mx-logo{width:28px; height:28px; border-radius:8px; background:var(--mx-g); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center}
.mx-tt{font-weight:700; font-size:12.5px}
.mx-clock{margin-left:auto; display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px; background:#FFF4D6; color:#7a5200; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums}
.mx-clock .ti{font-size:13px}
.mx-stage.mx-done .mx-clock{background:#DDF5EA; color:var(--mx-g)}

.mx-view{position:absolute; left:0; right:0; top:78px; bottom:52px; overflow:hidden}
.mx-scroll{padding:10px 10px 30px; transition:transform .7s cubic-bezier(.3,.7,.2,1)}

/* ── দ্রুত প্রশ্নপত্রের কার্ড (`28-quick.js`-এর হুবহু লেখা) ───────── */
.mx-qk{background:#fff; border:1px solid var(--mx-line); border-radius:14px; padding:12px 11px 10px;
  box-shadow:0 2px 8px rgba(1,62,47,.05); transition:opacity .35s ease, transform .45s ease}
.mx-h{font-size:15px; font-weight:800; margin-bottom:2px}
.mx-sub{color:var(--mx-mute); font-size:10px; margin-bottom:8px}
.mx-row{display:flex; gap:8px; padding:8px 0; border-top:1px dashed var(--mx-line)}
.mx-n{flex:none; width:19px; height:19px; border-radius:50%; background:#E7F3EE; color:var(--mx-g); font-weight:800; font-size:10px; display:flex; align-items:center; justify-content:center}
.mx-rb{flex:1; min-width:0}
.mx-l{font-weight:700; font-size:11.5px; margin-bottom:5px}
.mx-g2{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mx-sel{display:flex; align-items:center; justify-content:space-between; gap:4px; height:28px; padding:0 8px;
  border:1px solid #D5E2DC; border-radius:8px; background:#fff; color:var(--mx-mute); font-size:10.5px; white-space:nowrap; overflow:hidden;
  transition:border-color .25s, background .25s, color .25s}
.mx-sel::after{content:"⌄"; font-size:11px; line-height:0; margin-top:-4px}
.mx-sel.on{color:var(--mx-ink); font-weight:700; border-color:var(--mx-g2); background:#F1FAF6}
.mx-hint{color:var(--mx-mute); font-size:10px}
.mx-chips{display:none; flex-wrap:wrap; gap:5px}
.mx-qk.k-sub .mx-chips{display:flex}
.mx-qk.k-sub .mx-hint{display:none}
.mx-chip{padding:4px 8px; border-radius:999px; border:1px solid #D5E2DC; background:#fff; font-size:10px; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, transform .2s}
.mx-chip.on{background:var(--mx-g); border-color:var(--mx-g); color:#fff; font-weight:700}
.mx-ex{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mx-exb{border:1px solid #D5E2DC; border-radius:9px; padding:5px 7px; background:#fff; transition:all .25s}
.mx-exb b{display:block; font-size:11px}
.mx-exb span{display:block; font-size:9.5px; color:var(--mx-g); font-weight:700}
.mx-exb.on{border:2px solid var(--mx-g); background:#EEF7F3; padding:4px 6px}
.mx-go{display:flex; align-items:center; justify-content:center; gap:6px; height:38px; margin-top:8px; border-radius:10px;
  background:var(--mx-gd); color:#fff; font-weight:800; font-size:12.5px; transition:transform .15s, filter .2s}
.mx-go.press{transform:scale(.96); filter:brightness(1.2)}
.mx-note{margin-top:6px; text-align:center; font-size:9.5px; color:var(--mx-mute)}
.mx-note b{color:var(--mx-g)}

/* বানানোর পর কার্ড সরে যায়, কাগজ আসে */
.mx-stage.k-gen .mx-qk{opacity:0; transform:translateY(-16px) scale(.97); position:absolute; left:10px; right:10px; pointer-events:none}

/* ── প্রশ্নপত্র (সাদা কাগজ) ─────────────────────────────────────── */
.mx-paper{display:none; background:#fff; border-radius:6px; padding:11px 11px 14px;
  box-shadow:0 6px 18px -8px rgba(1,62,47,.25); border:1px solid #EDF1EF;
  font-family:'SolaimanLipi','Hind Siliguri',sans-serif; font-size:10.5px}
.mx-stage.k-gen .mx-paper{display:block; animation:mxPaperIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes mxPaperIn{from{opacity:0; transform:translateY(40px) scale(.96)}to{opacity:1; transform:none}}
.mx-ph{text-align:center; border-bottom:1.5px solid var(--mx-ink); padding-bottom:6px; margin-bottom:6px}
.mx-ph b{display:block; font-size:13px}
.mx-ph span{display:block; font-size:10px}
.mx-pm{display:flex !important; justify-content:space-between; font-size:9.5px !important; margin-top:3px}
.mx-sec{font-weight:800; font-size:10.5px; margin:6px 0 4px; color:var(--mx-gd)}
.mx-q{position:relative; padding:4px 5px; margin:0 -5px 2px; border-radius:6px;
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s, background .25s, box-shadow .25s}
.mx-q.in{opacity:1; transform:none}
.mx-q.sel{background:#EEF7F3; box-shadow:0 0 0 1.5px var(--mx-g2)}
.mx-q.flip{animation:mxFlip .5s ease}
@keyframes mxFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg); opacity:.3}100%{transform:rotateX(0)}}
.mx-op{display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:0 12px; padding-left:12px; font-size:10px; color:#3a4a44}
.mx-cqp{display:block; padding-left:12px; font-size:10px; color:#3a4a44}
.mx-cqp span{display:block}

/* ── নিচের শিট (ক্লাস/বিষয়ের তালিকা) · প্রশ্নের মেনু · টোস্ট ────── */
.mx-sheet{position:absolute; left:0; right:0; bottom:0; z-index:5; background:#fff; border-radius:18px 18px 0 0;
  padding:10px 12px 60px; box-shadow:0 -10px 30px rgba(0,0,0,.18); transform:translateY(105%); transition:transform .35s cubic-bezier(.3,.8,.2,1)}
.mx-sheet.on{transform:none}
.mx-sheet::before{content:""; display:block; width:36px; height:4px; border-radius:2px; background:#D5E2DC; margin:0 auto 8px}
.mx-sh-t{font-weight:800; font-size:12px; margin-bottom:6px}
.mx-sh-i{display:flex; align-items:center; justify-content:space-between; height:34px; padding:0 10px; border-radius:9px; font-size:12px; transition:background .2s}
.mx-sh-i.on{background:#E7F3EE; color:var(--mx-g); font-weight:800}
.mx-sh-i.on::after{content:"✓"}
.mx-dim{position:absolute; inset:0; z-index:4; background:rgba(10,25,20,.28); opacity:0; transition:opacity .3s; pointer-events:none}
.mx-sheet.on ~ .mx-dim{opacity:1}

.mx-qmenu{position:absolute; z-index:6; right:14px; display:flex; gap:4px; padding:4px; border-radius:11px; background:var(--mx-ink);
  box-shadow:0 8px 20px rgba(0,0,0,.3); opacity:0; transform:translateY(6px) scale(.9); transition:opacity .2s, transform .2s}
.mx-qmenu.on{opacity:1; transform:none}
.mx-qmenu span{display:inline-flex; align-items:center; gap:3px; color:#fff; font-size:10.5px; font-weight:700; padding:5px 8px; border-radius:8px}
.mx-qmenu span:first-child{background:var(--mx-g2)}

.mx-act{position:absolute; left:8px; right:8px; bottom:58px; z-index:3; display:flex; gap:6px; padding:6px; border-radius:13px;
  background:rgba(255,255,255,.96); box-shadow:0 8px 24px -6px rgba(1,62,47,.35); border:1px solid var(--mx-line);
  transform:translateY(130%); opacity:0; transition:transform .45s cubic-bezier(.3,.8,.2,1), opacity .3s}
.mx-stage.k-gen .mx-act{transform:none; opacity:1}
.mx-stage.k-end .mx-act{transform:translateY(130%); opacity:0}
.mx-act span{flex:1; height:32px; display:flex; align-items:center; justify-content:center; gap:4px; border-radius:9px; font-weight:800; font-size:11px; transition:transform .15s, filter .2s}
.mx-a1{background:#EEF2F0; color:var(--mx-ink)}
.mx-a2{background:var(--mx-gd); color:#fff}
.mx-act span.press{transform:scale(.94); filter:brightness(1.25)}

.mx-toast{position:absolute; left:50%; top:88px; z-index:7; transform:translate(-50%,-14px); opacity:0; white-space:nowrap;
  background:var(--mx-ink); color:#fff; font-weight:700; font-size:11px; padding:7px 12px; border-radius:999px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5); transition:opacity .3s, transform .35s cubic-bezier(.3,.8,.2,1)}
.mx-toast.on{opacity:1; transform:translate(-50%,0)}
.mx-busy{position:absolute; inset:78px 0 52px; z-index:4; display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(243,247,245,.85); font-weight:800; font-size:12px; color:var(--mx-g); opacity:0; pointer-events:none; transition:opacity .25s}
.mx-busy.on{opacity:1}
.mx-spin{width:18px; height:18px; border-radius:50%; border:3px solid #CFE6DC; border-top-color:var(--mx-g); animation:mxSpin .7s linear infinite}
@keyframes mxSpin{to{transform:rotate(360deg)}}

/* ── আসল অ্যাপের নিচের বার ────────────────────────────────────── */
.mx-nav{position:absolute; left:0; right:0; bottom:0; height:52px; z-index:2; background:#fff; border-top:1px solid var(--mx-line);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; text-align:center; font-size:9px; color:var(--mx-mute)}
.mx-nav span{display:flex; flex-direction:column; align-items:center; gap:1px}
.mx-nav .ti{font-size:16px}
.mx-nav .mx-plus{width:34px; height:34px; margin:-14px auto 0; border-radius:50%; background:var(--mx-gd); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(11,79,62,.4)}
.mx-nav .on{color:var(--mx-g); font-weight:700}

/* ── শেষ দৃশ্য: কাগজ বেরিয়ে আসে + সময়ের তুলনা ───────────────────── */
.mx-end{position:absolute; inset:78px 0 0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:0 18px; background:radial-gradient(120% 80% at 50% 0%,#E3F6EE 0%,#F3F7F5 60%); opacity:0; pointer-events:none; transition:opacity .4s}
.mx-stage.k-end .mx-end{opacity:1}
.mx-doc{width:132px; height:170px; background:#fff; border-radius:4px; padding:10px 9px; box-shadow:0 18px 34px -12px rgba(1,62,47,.45);
  transform:translateY(60px) rotate(-4deg) scale(.8); opacity:0; transition:transform .7s cubic-bezier(.2,.9,.25,1.2), opacity .4s}
.mx-stage.k-end .mx-doc{transform:rotate(-3deg); opacity:1}
.mx-doc b{display:block; text-align:center; font-size:8.5px; border-bottom:1px solid var(--mx-ink); padding-bottom:3px; margin-bottom:5px}
/* `> i` — নইলে PDF ব্যাজের আইকনটাও (`<i class="ti">`) লাইন হয়ে যেত */
.mx-doc > i{display:block; height:4px; border-radius:2px; background:#C8D6CF; margin:5px 0}
.mx-doc > i:nth-child(3n){width:70%} .mx-doc > i:nth-child(3n+1){width:88%}
.mx-doc .pdf{position:absolute; right:-12px; bottom:-10px; width:36px; height:36px; border-radius:10px; background:#D93A2B; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 6px 14px rgba(217,58,43,.45)}
.mx-doc{position:relative}
.mx-ok{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:800; color:var(--mx-g);
  transform:scale(.6); opacity:0; transition:transform .45s .35s cubic-bezier(.2,.9,.3,1.4), opacity .3s .35s}
.mx-ok .ti{font-size:22px}
.mx-stage.k-end .mx-ok{transform:none; opacity:1}
.mx-cmp{width:100%; background:#fff; border:1px solid var(--mx-line); border-radius:12px; padding:9px 10px 6px}
.mx-cr{display:flex; align-items:center; gap:7px; margin-bottom:6px; font-size:10.5px; font-weight:700}
.mx-cr > span{width:52px; flex:none; color:var(--mx-mute)}
.mx-cr .bar{flex:1; height:18px; border-radius:6px; background:#EEF3F1; overflow:hidden}
.mx-cr .bar i{display:flex; align-items:center; justify-content:flex-end; height:100%; width:0; padding-right:6px; border-radius:6px;
  color:#fff; font-style:normal; font-size:10px; white-space:nowrap; transition:width 1.2s .6s cubic-bezier(.2,.7,.2,1)}
.mx-cr .old i{background:linear-gradient(90deg,#E07A5F,#C0442E)}
.mx-cr .new i{background:linear-gradient(90deg,#1E9E75,#0D6E52); justify-content:flex-start; padding:0 0 0 6px; overflow:visible; color:var(--mx-g)}
.mx-stage.k-end .mx-cr .old i{width:100%}
.mx-stage.k-end .mx-cr .new i{width:6%}
.mx-cr .new i em{font-style:normal; margin-left:calc(100% + 4px); white-space:nowrap}

/* ── আঙুল ─────────────────────────────────────────────────────── */
.mx-finger{position:absolute; left:0; top:0; z-index:20; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 34%,rgba(255,255,255,.55) 35% 62%,rgba(255,255,255,0) 63%);
  box-shadow:0 6px 18px rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:transform .6s cubic-bezier(.45,.05,.2,1), opacity .3s}
.mx-finger.on{opacity:1}
.mx-finger::after{content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(255,255,255,.9); opacity:0}
.mx-finger.tap::after{animation:mxRipple .45s ease-out}
@keyframes mxRipple{0%{opacity:1; transform:scale(.6)}100%{opacity:0; transform:scale(2.1)}}
.mx-finger.tap{filter:brightness(.9)}

/* ── ফোনের পাশের ভাসমান ব্যাজ (শুধু চওড়া পর্দায়) ───────────────── */
.mx-badge{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:14px;
  background:rgba(255,255,255,.97); color:var(--mx-ink); font-weight:700; font-size:14px; white-space:nowrap;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.55); opacity:0; transform:translateY(12px) scale(.92);
  transition:opacity .45s, transform .55s cubic-bezier(.2,.9,.3,1.3)}
.mx-badge .ti{font-size:19px; color:var(--mx-g2)}
/* 🔴 ফোনের বাইরে বসে — ভেতরে ঢুকলে শেষ দৃশ্যের সময়ের বার ঢেকে যেত (মাপা ২১/১০) */
.mx-b1{left:-88px; top:calc(120px * var(--mx-k))}
.mx-b2{right:-92px; top:calc(260px * var(--mx-k))}
.mx-b3{left:-96px; top:calc(470px * var(--mx-k))}
.mx-stage[data-scene="1"] .mx-b1,.mx-stage[data-scene="2"] .mx-b1,.mx-stage[data-scene="3"] .mx-b1,
.mx-stage[data-scene="2"] .mx-b2,.mx-stage[data-scene="3"] .mx-b2,
.mx-stage[data-scene="3"] .mx-b3{opacity:1; transform:none}
@media (max-width:1180px){ .mx-badge{display:none} }

/* ── ফোনের নিচে: চলতি ধাপের লেখা + শব্দের বোতাম + ধাপের বোতাম ────── */
.mx-cap{min-height:52px; margin:18px 0 10px; padding:0 6px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16.5px; font-weight:700; line-height:1.5; text-shadow:0 2px 14px rgba(0,0,0,.35)}
.mx-cap span{display:inline-block; animation:mxCap .45s ease}
@keyframes mxCap{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.mx-ctrl{display:flex; flex-direction:column; align-items:center; gap:12px; width:100%}
.mx-snd{display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 22px; border-radius:999px; cursor:pointer;
  border:1.5px solid rgba(127,217,192,.6); background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:15.5px; font-weight:800;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, transform .15s, border-color .2s}
.mx-snd:hover{background:rgba(255,255,255,.18); transform:translateY(-1px)}
.mx-snd .ti{font-size:20px}
.mx-snd.on{background:#F7DC9A; border-color:#F7DC9A; color:#3d2a00}
.mx-snd:not(.on){animation:mxNudge 2.8s ease-in-out 2s infinite}
@keyframes mxNudge{0%,86%,100%{box-shadow:0 0 0 0 rgba(127,217,192,0)}92%{box-shadow:0 0 0 9px rgba(127,217,192,.22)}}
.mx-eq{display:none; align-items:flex-end; gap:2px; height:16px}
.mx-eq i{width:3px; border-radius:2px; background:currentColor; animation:mxEq .9s ease-in-out infinite}
.mx-eq i:nth-child(2){animation-delay:-.3s} .mx-eq i:nth-child(3){animation-delay:-.6s}
@keyframes mxEq{0%,100%{height:4px}50%{height:15px}}
.mx-snd.on .mx-eq{display:inline-flex}
.mx-steps{display:flex; justify-content:center; gap:6px; flex-wrap:wrap}
.mx-steps button{position:relative; overflow:hidden; min-width:72px; min-height:44px; padding:0 12px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:rgba(232,248,243,.85); font:inherit; font-size:14px; font-weight:700}
.mx-steps button b{display:inline-block; margin-right:4px; color:var(--mx-mint)}
.mx-steps button.on{background:rgba(127,217,192,.2); border-color:rgba(127,217,192,.7); color:#fff}
.mx-steps button.on::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--mx-mint);
  transform-origin:0 50%; animation:mxBar var(--mx-dur,6s) linear forwards}
.mx-stage.mx-paused .mx-steps button.on::after{animation-play-state:paused}
@keyframes mxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mx-snd:focus-visible,.mx-steps button:focus-visible{outline:3px solid #F7DC9A; outline-offset:2px}

/* 🔴 চওড়া পর্দায় গ্রিড ছিল `align-items:center` — ৮০০px লম্বা ফোনের পাশে লেখা মাঝে নেমে
   ১৩৬৬×৭৬৮-এ “বিনামূল্যে শুরু করুন” প্রথম পর্দার নিচে চলে যেত (মাপা ২১/১০)। লেখা ওপরে,
   আর কম উচ্চতার পর্দায় ফোন ছোট। */
@media (min-width:901px){
  #screen-landing .lp-hero-grid.mx-grid{align-items:start}
  #screen-landing .lp-hero-grid.mx-grid > div:first-child{padding-top:34px}
}
@media (min-width:901px) and (max-height:940px){ .mx-stage{--mx-k:.84} .mx-cap{margin-top:12px; min-height:46px} }
@media (min-width:901px) and (max-height:800px){ .mx-stage{--mx-k:.76} }
@media (max-width:900px){
  .mx-stage{margin-top:6px}
}
@media (max-width:420px){
  .mx-stage{--mx-k:.86}
  .mx-cap{font-size:15.5px; min-height:48px; margin-top:14px}
  .mx-steps button{min-width:64px; padding:0 9px}
}
@media (max-width:350px){ .mx-stage{--mx-k:.78} }

/* ════════════════════════════════════════════════════════════════════
   ২. “কীভাবে কাজ করে” — চারটা ছোট ফোন (`#lp-how .mx-how`)
   ════════════════════════════════════════════════════════════════════ */
.mx-how{--mx-g:#0F6E56; --mx-g2:#1E9E75; --mx-gd:#0B4F3E; --mx-ink:#18263F; --mx-mute:#66766E; --mx-line:#E2ECE7}
.mx-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1180px; margin:0 auto}
@media (max-width:1060px){ .mx-cards{grid-template-columns:repeat(2,1fr); max-width:640px} }
a.mx-card{display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; color:inherit; text-align:center;
  background:#fff; border:1px solid #DCECE4; border-radius:22px; padding:20px 16px 18px; box-shadow:0 6px 22px rgba(1,62,47,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
a.mx-card:hover,a.mx-card:focus-visible{transform:translateY(-4px); box-shadow:0 18px 36px -10px rgba(1,62,47,.18); border-color:var(--mx-g2)}
a.mx-card:focus-visible{outline:3px solid var(--mx-g2); outline-offset:2px}
.mx-mini{position:relative; width:168px; height:318px; flex:none; border-radius:28px; padding:6px;
  background:linear-gradient(145deg,#2b3a35,#0c1714 60%,#1d2a26); box-shadow:0 20px 40px -18px rgba(1,62,47,.55)}
.mx-mini::before{content:""; position:absolute; top:12px; left:50%; width:44px; height:12px; margin-left:-22px; background:#050a09; border-radius:8px; z-index:9}
.mx-ms{position:relative; width:156px; height:306px; border-radius:23px; overflow:hidden; background:#F3F7F5;
  font-family:'Hind Siliguri',sans-serif; font-size:9px; line-height:1.4; text-align:left; color:var(--mx-ink)}
.mx-ms *{box-sizing:border-box}
.mx-mh{height:46px; padding:24px 10px 0; background:#fff; border-bottom:1px solid var(--mx-line); font-weight:800; font-size:10px; display:flex; align-items:center; gap:5px}
.mx-mh .lg{width:16px; height:16px; border-radius:5px; background:var(--mx-g); color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center}
.mx-ct{font-weight:800; font-size:16px; color:var(--mx-ink); margin-top:4px}
.mx-cd{font-size:14.5px; color:#4a5a52; line-height:1.6; margin:0}
.mx-ba{display:flex; flex-direction:column; gap:6px; width:100%; margin-top:2px}
.mx-ba > span{display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:11px; font-size:14px; font-weight:700; text-align:left}
.mx-ba .ti{font-size:18px; flex:none}
.mx-ba .bf{background:#FDF0EC; color:#9A3412}
.mx-ba .af{background:#E7F6EF; color:#0D6E52}
.mx-ba b{margin-left:auto; white-space:nowrap}
.mx-total{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; max-width:760px; margin:30px auto 0; padding:18px 22px;
  border-radius:20px; background:linear-gradient(135deg,#013E2F,#0F6E56); color:#fff; text-align:left; box-shadow:0 20px 40px -18px rgba(1,62,47,.6)}
.mx-total .big{font-size:40px; font-weight:800; line-height:1; color:#F7DC9A; font-variant-numeric:tabular-nums}
.mx-total .big small{font-size:18px; margin-left:4px; color:#fff}
.mx-total .lbl{font-size:15px; line-height:1.6; max-width:420px; color:rgba(232,248,243,.92)}
.mx-total .ti{font-size:38px; color:#7FD9C0}
.mx-fine{text-align:center; margin-top:12px; color:#66766E; font-size:14px}

/* ছোট পর্দায় পাশাপাশি সরানো যায় (পাতা আড়াআড়ি স্ক্রল করে না — শুধু সারিটা) */
@media (max-width:620px){
  .mx-cards{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin:0 -5vw; padding:6px 5vw 16px; scrollbar-width:none}
  .mx-cards::-webkit-scrollbar{display:none}
  a.mx-card{flex:0 0 78%; scroll-snap-align:center}
  .mx-total{gap:12px; padding:16px}
  .mx-total .big{font-size:34px}
}
.mx-swipe{display:none; text-align:center; color:#66766E; font-size:14px; margin-top:4px}
@media (max-width:620px){ .mx-swipe{display:block} }

/* ── চারটা ছোট পর্দার লুপ — `.mx-how.mx-js .mx-card.run` হলে তবেই চলে।
   JS না চললে কোনো animation নেই, আর ছবিটা “শেষ অবস্থায়” স্থির থাকে
   (কাগজ তৈরি · প্রশ্ন উঠেছে · নম্বর এসেছে) — ফাঁকা দেখায় না। ── */
.mx-a{animation-duration:6.5s; animation-iteration-count:infinite; animation-timing-function:ease; animation-fill-mode:both; animation-play-state:paused}
.mx-how:not(.mx-js) .mx-a{animation-name:none !important}
.mx-card.run .mx-a{animation-play-state:running}

/* A — দ্রুত প্রশ্নপত্র: তিনটা বাছাই জ্বলে → বোতাম → কাগজ ওঠে */
.mxA-body{padding:8px}
.mxA-pick{display:flex; align-items:center; justify-content:space-between; height:24px; padding:0 8px; margin-bottom:5px; border-radius:7px;
  background:#fff; border:1px solid #D5E2DC; font-weight:700}
.mxA-pick b{color:var(--mx-g)}
.mxA-p1{animation-name:mxApk1} .mxA-p2{animation-name:mxApk2} .mxA-p3{animation-name:mxApk3}
@keyframes mxApk1{0%,8%{background:#fff; border-color:#D5E2DC}12%,100%{background:#EEF7F3; border-color:#1E9E75}}
@keyframes mxApk2{0%,20%{background:#fff; border-color:#D5E2DC}24%,100%{background:#EEF7F3; border-color:#1E9E75}}
@keyframes mxApk3{0%,32%{background:#fff; border-color:#D5E2DC}36%,100%{background:#EEF7F3; border-color:#1E9E75}}
.mxA-go{height:26px; margin-top:7px; border-radius:8px; background:var(--mx-gd); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; animation-name:mxAgo}
@keyframes mxAgo{0%,42%,48%,100%{transform:none}45%{transform:scale(.92); filter:brightness(1.3)}}
.mxA-paper{position:absolute; left:8px; right:8px; bottom:8px; top:118px; background:#fff; border-radius:6px; padding:8px; box-shadow:0 8px 20px -8px rgba(1,62,47,.35); animation-name:mxApaper}
@keyframes mxApaper{0%,48%{transform:translateY(110%); opacity:0}56%,92%{transform:none; opacity:1}100%{transform:none; opacity:0}}
.mxA-paper b{display:block; text-align:center; font-size:9px; border-bottom:1px solid var(--mx-ink); padding-bottom:3px; margin-bottom:5px}
.mx-ln{display:block; height:4px; border-radius:2px; background:#C9D7D0; margin:6px 0}
.mx-ln.s{width:62%} .mx-ln.m{width:80%}
.mxA-ok{position:absolute; right:12px; bottom:14px; width:30px; height:30px; border-radius:50%; background:var(--mx-g2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; animation-name:mxAok}
@keyframes mxAok{0%,62%{transform:scale(0)}68%{transform:scale(1.25)}72%,92%{transform:scale(1)}100%{transform:scale(1); opacity:0}}
.mx-tapdot{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 3px 10px rgba(0,0,0,.35); z-index:5; opacity:0; animation-name:mxAtap}
@keyframes mxAtap{
  0%{left:70%; top:62px; opacity:0}
  6%{left:70%; top:62px; opacity:1} 10%{transform:scale(.75)} 13%{transform:none}
  18%{left:70%; top:91px} 22%{transform:scale(.75)} 25%{transform:none}
  30%{left:70%; top:120px} 34%{transform:scale(.75)} 37%{transform:none}
  41%{left:50%; top:154px; opacity:1} 45%{transform:scale(.75)} 48%{transform:none; opacity:1}
  54%,100%{left:50%; top:154px; opacity:0}}

/* B — ছবি থেকে প্রশ্ন: ক্যামেরার ফ্রেমে বইয়ের পাতা → আলো ঝলক → দাগ টানা → প্রশ্নের কার্ড */
.mxB-cam{position:absolute; inset:46px 0 0; background:#1b2420}
.mxB-page{position:absolute; left:22px; right:22px; top:30px; height:190px; background:#FBF6EA; border-radius:4px; padding:12px 12px; transform:rotate(-3deg);
  box-shadow:0 10px 24px rgba(0,0,0,.4); animation-name:mxBpage}
@keyframes mxBpage{0%,52%{opacity:1; transform:rotate(-3deg)}60%,100%{opacity:0; transform:rotate(-3deg) scale(.9)}}
.mxB-page .mx-ln{background:#9AA59F; height:3.5px; margin:7px 0}
.mxB-corner{position:absolute; inset:20px 12px 70px; border:2px solid transparent; animation-name:mxBcorner;
  background:
    linear-gradient(#7FD9C0,#7FD9C0) 0 0/18px 2px no-repeat, linear-gradient(#7FD9C0,#7FD9C0) 0 0/2px 18px no-repeat,
    linear-gradient(#7FD9C0,#7FD9C0) 100% 0/18px 2px no-repeat, linear-gradient(#7FD9C0,#7FD9C0) 100% 0/2px 18px no-repeat,
    linear-gradient(#7FD9C0,#7FD9C0) 0 100%/18px 2px no-repeat, linear-gradient(#7FD9C0,#7FD9C0) 0 100%/2px 18px no-repeat,
    linear-gradient(#7FD9C0,#7FD9C0) 100% 100%/18px 2px no-repeat, linear-gradient(#7FD9C0,#7FD9C0) 100% 100%/2px 18px no-repeat}
@keyframes mxBcorner{0%,14%{transform:scale(1.06); opacity:.6}20%,52%{transform:none; opacity:1}60%,100%{opacity:0}}
.mxB-flash{position:absolute; inset:0; background:#fff; opacity:0; animation-name:mxBflash}
@keyframes mxBflash{0%,20%{opacity:0}22%{opacity:.85}30%,100%{opacity:0}}
.mxB-scan{position:absolute; left:16px; right:16px; height:3px; top:26px; border-radius:2px; background:#7FD9C0; box-shadow:0 0 14px 4px rgba(127,217,192,.7); opacity:0; animation-name:mxBscan}
@keyframes mxBscan{0%,30%{top:26px; opacity:0}32%{opacity:1}50%{top:206px; opacity:1}52%,100%{top:206px; opacity:0}}
.mxB-shut{position:absolute; bottom:18px; left:50%; width:40px; height:40px; margin-left:-20px; border-radius:50%; border:3px solid #fff; background:rgba(255,255,255,.3); animation-name:mxBshut}
@keyframes mxBshut{0%,16%,24%,100%{transform:none}20%{transform:scale(.82)}}
.mxB-out{position:absolute; inset:46px 0 0; padding:9px 8px; background:#F3F7F5; animation-name:mxBout}
@keyframes mxBout{0%,56%{opacity:0}62%,94%{opacity:1}100%{opacity:0}}
.mxB-q{background:#fff; border:1px solid var(--mx-line); border-radius:8px; padding:6px 7px; margin-bottom:6px; animation-name:mxBq}
.mxB-q:nth-child(2){animation-name:mxBq2} .mxB-q:nth-child(3){animation-name:mxBq3}
@keyframes mxBq{0%,60%{opacity:0; transform:translateY(10px)}65%,100%{opacity:1; transform:none}}
@keyframes mxBq2{0%,65%{opacity:0; transform:translateY(10px)}70%,100%{opacity:1; transform:none}}
@keyframes mxBq3{0%,70%{opacity:0; transform:translateY(10px)}75%,100%{opacity:1; transform:none}}
.mxB-q i{display:inline-block; font-style:normal; font-size:8px; font-weight:800; padding:1px 6px; border-radius:6px; background:#E7F3EE; color:var(--mx-g); margin-bottom:3px}
.mxB-q .mx-ln{margin:4px 0}
.mxB-op{display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; font-size:8px; color:#55635d}
.mxB-tag{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); white-space:nowrap; background:var(--mx-ink); color:#fff; font-weight:700; font-size:8.5px; padding:4px 9px; border-radius:999px}

/* C — চ্যাটে বলুন: লেখা টাইপ হয় → “…” → উত্তরে প্রশ্ন */
.mxC-body{position:absolute; inset:46px 0 34px; padding:10px 8px; display:flex; flex-direction:column; gap:7px}
.mxC-me{align-self:flex-end; max-width:84%; background:#0F6E56; color:#fff; padding:6px 8px; border-radius:11px 11px 3px 11px; font-weight:600; animation-name:mxCme}
@keyframes mxCme{0%,4%{clip-path:inset(0 100% 0 0 round 11px)}26%,96%{clip-path:inset(0 0 0 0 round 11px)}100%{clip-path:inset(0 0 0 0 round 11px); opacity:0}}
.mxC-dots{align-self:flex-start; display:flex; gap:3px; padding:7px 9px; background:#fff; border-radius:11px; border:0 solid var(--mx-line); opacity:0; height:0; padding:0 9px; overflow:hidden; animation-name:mxCdots}
@keyframes mxCdots{0%,30%{opacity:0; height:0; padding:0 9px; border-width:0}32%,44%{opacity:1; height:21px; padding:7px 9px; border-width:1px}46%,100%{opacity:0; height:0; padding:0 9px; border-width:0}}
.mxC-dots i{width:5px; height:5px; border-radius:50%; background:#9AB1A7}
.mxC-bot{align-self:flex-start; width:88%; background:#fff; border:1px solid var(--mx-line); border-radius:11px 11px 11px 3px; padding:7px 8px; animation-name:mxCbot}
@keyframes mxCbot{0%,44%{opacity:0; transform:translateY(8px)}50%,96%{opacity:1; transform:none}100%{opacity:0}}
.mxC-bot .it{display:flex; gap:4px; margin-bottom:4px}
.mxC-bot .it:nth-child(2){animation-name:mxCit1} .mxC-bot .it:nth-child(3){animation-name:mxCit2} .mxC-bot .it:nth-child(4){animation-name:mxCit3}
@keyframes mxCit1{0%,52%{opacity:0}56%,100%{opacity:1}}
@keyframes mxCit2{0%,58%{opacity:0}62%,100%{opacity:1}}
@keyframes mxCit3{0%,64%{opacity:0}68%,100%{opacity:1}}
.mxC-bot .it b{color:var(--mx-g)}
.mxC-word{display:inline-flex; align-items:center; gap:3px; margin-top:3px; padding:3px 8px; border-radius:7px; background:#2B579A; color:#fff; font-weight:800; font-size:8.5px; animation-name:mxCword}
@keyframes mxCword{0%,72%{opacity:0; transform:scale(.8)}76%,80%{opacity:1; transform:scale(1.1)}84%,100%{opacity:1; transform:none}}
.mxC-in{position:absolute; left:6px; right:6px; bottom:6px; height:24px; border-radius:12px; background:#fff; border:1px solid var(--mx-line); display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 10px; color:#9AA59F}
.mxC-in .snd{width:18px; height:18px; border-radius:50%; background:var(--mx-g); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px}

/* D — OMR খাতা: ক্যামেরা ধরলেই সারি সারি টিক → নম্বর */
.mxD-cam{position:absolute; inset:46px 0 0; background:#1b2420}
.mxD-sheet{position:absolute; left:18px; right:18px; top:18px; height:212px; background:#fff; border-radius:4px; padding:10px 10px; box-shadow:0 10px 24px rgba(0,0,0,.4)}
.mxD-sheet::before,.mxD-sheet::after{content:""; position:absolute; width:9px; height:9px; background:#111; top:5px}
.mxD-sheet::before{left:5px} .mxD-sheet::after{right:5px}
.mxD-r{position:relative; display:flex; align-items:center; gap:5px; height:18px; font-size:7.5px; font-weight:700; color:#555}
.mxD-r em{width:12px; font-style:normal; text-align:right}
.mxD-r i{width:11px; height:11px; border-radius:50%; border:1.2px solid #8a948f}
.mxD-r i.f{background:#1a1a1a; border-color:#1a1a1a}
.mxD-r s{position:absolute; right:-2px; width:13px; height:13px; border-radius:50%; background:#1E9E75; color:#fff; font-size:8px; text-decoration:none; display:flex; align-items:center; justify-content:center}
.mxD-r s.x{background:#D93A2B}
.mxD-r:nth-child(1) s{animation-name:mxDt1} .mxD-r:nth-child(2) s{animation-name:mxDt2} .mxD-r:nth-child(3) s{animation-name:mxDt3}
.mxD-r:nth-child(4) s{animation-name:mxDt4} .mxD-r:nth-child(5) s{animation-name:mxDt5} .mxD-r:nth-child(6) s{animation-name:mxDt6}
.mxD-r:nth-child(7) s{animation-name:mxDt7} .mxD-r:nth-child(8) s{animation-name:mxDt8} .mxD-r:nth-child(9) s{animation-name:mxDt9}
.mxD-r:nth-child(10) s{animation-name:mxDt10}
@keyframes mxDt1{0%,22%{transform:scale(0)}25%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt2{0%,25%{transform:scale(0)}28%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt3{0%,28%{transform:scale(0)}31%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt4{0%,31%{transform:scale(0)}34%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt5{0%,34%{transform:scale(0)}37%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt6{0%,37%{transform:scale(0)}40%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt7{0%,40%{transform:scale(0)}43%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt8{0%,43%{transform:scale(0)}46%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt9{0%,46%{transform:scale(0)}49%,94%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mxDt10{0%,49%{transform:scale(0)}52%,94%{transform:scale(1)}100%{transform:scale(0)}}
.mxD-frame{position:absolute; left:10px; right:10px; top:10px; height:228px; border:2px solid #7FD9C0; border-radius:8px; animation-name:mxDframe}
@keyframes mxDframe{0%,8%{transform:scale(1.08); opacity:0}16%,54%{transform:none; opacity:1; border-color:#7FD9C0}58%,94%{opacity:1; border-color:#1E9E75}100%{opacity:0}}
.mxD-score{position:absolute; left:50%; bottom:22px; transform:translateX(-50%) scale(0); background:#fff; border-radius:12px; padding:6px 12px; text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.4); transform:translateX(-50%); animation-name:mxDscore}
@keyframes mxDscore{0%,56%{transform:translateX(-50%) scale(0)}62%{transform:translateX(-50%) scale(1.15)}66%,94%{transform:translateX(-50%) scale(1)}100%{transform:translateX(-50%) scale(0)}}
.mxD-score b{display:block; font-size:16px; color:var(--mx-g); line-height:1.1; white-space:nowrap}
.mxD-score span{display:block; font-size:8px; color:#55635d; font-weight:700; white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .mx-phone-wrap,.mx-snd{animation:none !important}
  .mx-how .mx-a{animation-name:none !important}
}
