/* ==========================================================================
   /interview/ — নিয়োগ ও প্রশিক্ষণ পেজের শেয়ার্ড স্টাইল
   টোকেনগুলো মূল অ্যাপের redesign (src/assets/variables.css) ও
   /agentusermanuel, /pages-এর সাথে হুবহু এক — একই teal accent, একই ফন্ট-স্কেল।
   ========================================================================== */

:root{
  --paper:#f6f4ec; --surface:#fff; --surface-2:#fbfaf5;
  --ink:#1b2b26; --ink-soft:#48584f; --ink-dim:#7a8880;
  --line:#e2ded0; --line-soft:#edeade;
  --teal:#0d7a70; --teal-bright:#0d9488; --teal-dim:#e2f1ef;
  --gold:#b1791a; --gold-dim:#f7edd6;
  --good:#15803d; --good-dim:#e4f2e7;
  --warn:#b45309; --warn-dim:#fbeddb;
  --danger:#b91c1c; --danger-dim:#f8e3e1;
  --info:#1d4ed8; --info-dim:#e3edfe;
  --purple:#6d28d9; --purple-dim:#efe8fd;
  --tg:#1878a8; --tg-dim:#e3f2fb;
  --shadow:0 1px 2px rgba(27,43,38,.05),0 6px 20px rgba(27,43,38,.06);
  --shadow-hover:0 6px 18px rgba(27,43,38,.09),0 16px 34px rgba(27,43,38,.10);
  --radius:14px;
  --fs-2xs:11px; --fs-xs:12.5px; --fs-sm:14px; --fs-base:15px;
  --fs-md:16.5px; --fs-lg:19px; --fs-xl:23px; --fs-2xl:28px;
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101614; --surface:#17201d; --surface-2:#1b2521;
    --ink:#e9ece7; --ink-soft:#b3bdb6; --ink-dim:#83908a;
    --line:#2a3833; --line-soft:#212d29;
    --teal:#35c9ba; --teal-bright:#2dd4bf; --teal-dim:#123531;
    --gold:#e2ab54; --gold-dim:#33270f;
    --good:#4ade80; --good-dim:#12301d;
    --warn:#eab308; --warn-dim:#33260a;
    --danger:#f87171; --danger-dim:#341614;
    --info:#7da7ff; --info-dim:#16233f;
    --purple:#c4b5fd; --purple-dim:#241a3d;
    --tg:#4cb8e8; --tg-dim:#0e2a3a;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --shadow-hover:0 6px 20px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Hind Siliguri','Noto Sans Bengali','Kalpurush','SolaimanLipi',system-ui,sans-serif;
  font-size:18px; line-height:1.78;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;}
.wrap{max-width:880px; margin:0 auto; padding:0 20px 110px;}
.wrap-wide{max-width:1040px;}

/* ── টপ বার ───────────────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.top-in{max-width:1040px; margin:0 auto; padding:9px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-width:0;}
.brand img{width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--teal-bright); flex:none;}
.brand b{font-size:var(--fs-sm); font-weight:800; line-height:1.25; display:block;}
.brand span{font-size:var(--fs-2xs); color:var(--ink-dim); font-weight:600; display:block;}
.hot{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:800; color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-bright)); padding:9px 16px; border-radius:999px; text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); transition:transform .25s var(--ease-bounce),box-shadow .2s;}
.hot:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover);}

/* ── হিরো ─────────────────────────────────────────────────────────────── */
.hero{padding:46px 0 34px; border-bottom:2px solid var(--line); margin-bottom:10px;}
.hero-kicker{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:800; letter-spacing:.1em; color:var(--teal); background:var(--teal-dim); padding:6px 14px; border-radius:999px; margin-bottom:20px;}
.hero-kicker .dot{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent); animation:pulse 2s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
@media (prefers-reduced-motion:reduce){.hero-kicker .dot{animation:none;}}
.hero h1{font-size:clamp(30px,6vw,47px); line-height:1.2; font-weight:800; margin:0 0 16px; text-wrap:balance; letter-spacing:-.01em;}
.hero h1 .accent{color:var(--teal-bright);}
.hero .lede{font-size:var(--fs-lg); color:var(--ink-soft); margin:0; max-width:60ch;}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.hero-meta span{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-base); font-weight:600; background:var(--surface); border:1px solid var(--line); padding:8px 14px; border-radius:10px; box-shadow:var(--shadow);}
.hero-meta b{color:var(--teal); font-weight:800;}

/* ── বোতাম ────────────────────────────────────────────────────────────── */
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-size:var(--fs-md); font-weight:800; padding:13px 24px; border-radius:12px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease-bounce),box-shadow .2s,background .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-bright)); color:#fff; box-shadow:var(--shadow);}
.btn-primary:hover{box-shadow:var(--shadow-hover);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow);}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal);}
.btn-sm{font-size:var(--fs-sm); padding:9px 16px; border-radius:10px;}
.btn-tg{background:#229ed9; color:#fff; box-shadow:var(--shadow); font-weight:800;}
.btn-tg:hover{box-shadow:var(--shadow-hover); background:#1c8dc4;}
.btn-block{width:100%;}

/* টেলিগ্রাম গ্রুপ ও বটের কলআউট — পেজের প্রধান CTA, হিরোর ঠিক নিচে */
.tg-box{background:var(--tg-dim); border:2px solid color-mix(in srgb,var(--tg) 42%,transparent); border-radius:18px; padding:24px 26px; margin:30px 0 10px; box-shadow:var(--shadow);}
.tg-box h2{margin:0 0 8px; font-size:clamp(var(--fs-lg),4vw,26px); font-weight:800; display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--ink);}
.tg-box p{margin:0 0 8px; color:var(--ink-soft); font-size:var(--fs-md);}
.tg-box p strong{color:var(--ink);}
.tg-btns{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:18px 0 0;}
.tg-btns .btn{width:100%;}
.tg-or{margin:16px 0 0; padding-top:14px; border-top:1px dashed color-mix(in srgb,var(--tg) 38%,transparent); font-size:var(--fs-base); color:var(--ink-soft);}
.tg-or a{color:var(--tg); font-weight:800; text-decoration:none; white-space:nowrap;}

/* ── সেকশন ────────────────────────────────────────────────────────────── */
.sec{scroll-margin-top:70px; margin:52px 0;}
.sec-head{display:flex; align-items:center; gap:15px; margin-bottom:8px; padding-bottom:15px; border-bottom:2px solid var(--line-soft);}
.sec-ico{flex:none; width:50px; height:50px; border-radius:13px; display:grid; place-items:center; font-size:25px; background:var(--teal-dim); border:1px solid var(--line);}
.sec-head h2{font-size:clamp(var(--fs-xl),4.4vw,29px); font-weight:800; margin:0; line-height:1.3; text-wrap:balance;}
.sec-head .sub{display:block; font-size:var(--fs-base); font-weight:600; color:var(--ink-dim); margin-top:1px;}
.sec-body{padding-top:18px;}
.sec-body>p{margin:0 0 16px; color:var(--ink-soft);}
.sec-body>p strong, .card strong, li strong{color:var(--ink); font-weight:700;}
h3.sub-h{font-size:var(--fs-lg); font-weight:800; margin:32px 0 8px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
h3.sub-h .badge{font-size:var(--fs-2xs); font-weight:800; background:var(--gold-dim); color:var(--gold); padding:3px 10px; border-radius:999px;}
/* সংখ্যা-চিপ — বাংলা ডিজিটে কিক্যাপ ইমোজি (১️⃣) বৈধ নয়, তাই CSS দিয়ে করা */
.num-chip{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--teal); color:#fff; font-size:var(--fs-md); font-weight:800; line-height:1;}
.card h4 .num-chip{width:29px; height:29px; font-size:var(--fs-base); border-radius:9px;}

/* ── সূচি ─────────────────────────────────────────────────────────────── */
.toc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:34px 0 12px; box-shadow:var(--shadow);}
.toc h2{font-size:var(--fs-sm); letter-spacing:.1em; color:var(--ink-dim); font-weight:800; margin:0 0 12px;}
.toc ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:2px 20px; counter-reset:toc;}
.toc a{display:flex; align-items:baseline; gap:11px; padding:7px 8px; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--fs-md); transition:background .15s,color .15s,transform .25s var(--ease-bounce);}
.toc a:hover{background:var(--teal-dim); color:var(--teal); transform:translateX(3px);}
.toc a::before{counter-increment:toc; content:counter(toc,bengali) "."; color:var(--gold); font-weight:800; font-variant-numeric:tabular-nums; min-width:1.7em; text-align:right;}

/* ── কার্ড ────────────────────────────────────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); margin:18px 0;}
.card>:first-child{margin-top:0;} .card>:last-child{margin-bottom:0;}
.card h4{font-size:var(--fs-md); font-weight:800; margin:0 0 8px; display:flex; align-items:center; gap:8px;}
.card p{margin:0 0 10px; color:var(--ink-soft); font-size:var(--fs-md);}
.card-teal{background:var(--teal-dim); border-color:color-mix(in srgb,var(--teal) 28%,transparent);}
.card-gold{background:var(--gold-dim); border-color:color-mix(in srgb,var(--gold) 30%,transparent);}
.card-good{background:var(--good-dim); border-color:color-mix(in srgb,var(--good) 28%,transparent);}
.card-warn{background:var(--warn-dim); border-color:color-mix(in srgb,var(--warn) 30%,transparent);}
.card-danger{background:var(--danger-dim); border-color:color-mix(in srgb,var(--danger) 28%,transparent);}
.card-info{background:var(--info-dim); border-color:color-mix(in srgb,var(--info) 26%,transparent);}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}

/* ── ধাপ-রোডম্যাপ ─────────────────────────────────────────────────────── */
.ladder{list-style:none; margin:24px 0 8px; padding:0; position:relative;}
.ladder::before{content:""; position:absolute; left:29px; top:24px; bottom:24px; width:2px; background:linear-gradient(180deg,var(--teal-bright),var(--gold)); opacity:.35;}
.ladder>li{position:relative; padding:0 0 18px 76px; min-height:60px;}
.ladder .rung{position:absolute; left:0; top:2px; width:58px; height:58px; border-radius:17px; display:grid; place-items:center; background:var(--surface); border:2px solid var(--teal-bright); box-shadow:var(--shadow); font-size:var(--fs-xl); font-weight:800; color:var(--teal); z-index:1;}
.ladder .locked .rung{border-color:var(--line); color:var(--ink-dim); background:var(--surface-2);}
.step-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); transition:transform .25s var(--ease-bounce),box-shadow .2s,border-color .2s;}
a.step-card{display:block; text-decoration:none; color:inherit; border-color:color-mix(in srgb,var(--teal) 35%,transparent);}
a.step-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--teal-bright);}
.step-card h3{margin:0 0 4px; font-size:var(--fs-lg); font-weight:800; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.step-card p{margin:0; color:var(--ink-soft); font-size:var(--fs-md);}
.step-card .go{display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-weight:800; font-size:var(--fs-base); color:var(--teal);}
.tag{font-size:var(--fs-2xs); font-weight:800; padding:3px 10px; border-radius:999px; white-space:nowrap;}
.tag-open{background:var(--good-dim); color:var(--good);}
.tag-lock{background:var(--line-soft); color:var(--ink-dim);}
.tag-gold{background:var(--gold-dim); color:var(--gold);}
.tag-teal{background:var(--teal-dim); color:var(--teal);}

/* ── তালিকা ───────────────────────────────────────────────────────────── */
.ticks{list-style:none; margin:12px 0; padding:0;}
.ticks li{position:relative; padding:5px 0 5px 32px; color:var(--ink-soft); font-size:var(--fs-md);}
.ticks li::before{content:"✓"; position:absolute; left:2px; top:5px; color:var(--good); font-weight:800;}
.ticks.cross li::before{content:"✕"; color:var(--danger);}
.ticks.dot li::before{content:"◆"; color:var(--gold); font-size:11px; top:8px;}
.numbered{list-style:none; margin:14px 0; padding:0; counter-reset:n;}
.numbered>li{position:relative; padding:2px 0 14px 46px; color:var(--ink-soft); font-size:var(--fs-md);}
.numbered>li::before{counter-increment:n; content:counter(n,bengali); position:absolute; left:0; top:2px; width:31px; height:31px; border-radius:9px; display:grid; place-items:center; background:var(--teal-dim); color:var(--teal); font-weight:800; font-size:var(--fs-base);}
.numbered>li b{display:block; color:var(--ink);}

/* ── টেবিল ────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); background:var(--surface);}
table{width:100%; border-collapse:collapse; font-size:var(--fs-md); min-width:420px;}
th,td{padding:11px 15px; text-align:left; border-bottom:1px solid var(--line-soft);}
th{background:var(--surface-2); font-weight:800; font-size:var(--fs-sm); color:var(--ink-dim); white-space:nowrap;}
tr:last-child td{border-bottom:none;}
td:first-child{font-weight:700; color:var(--ink); white-space:nowrap;}

/* ── প্রশ্নোত্তর ──────────────────────────────────────────────────────── */
details.faq{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:10px 0; box-shadow:var(--shadow); overflow:hidden;}
details.faq summary{cursor:pointer; padding:15px 20px; font-weight:700; font-size:var(--fs-md); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; transition:background .15s;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; flex:none; width:26px; height:26px; border-radius:8px; background:var(--teal-dim); color:var(--teal); display:grid; place-items:center; font-weight:800; font-size:18px; transition:transform .2s;}
details.faq[open] summary::after{content:"−"; transform:rotate(180deg);}
details.faq summary:hover{background:var(--surface-2);}
details.faq .ans{padding:0 20px 17px; color:var(--ink-soft); font-size:var(--fs-md);}
details.faq .ans>:first-child{margin-top:0;} details.faq .ans>:last-child{margin-bottom:0;}

/* ── উদ্ধৃতি / কলআউট ─────────────────────────────────────────────────── */
blockquote{margin:20px 0; padding:16px 20px; border-right:4px solid var(--gold); background:var(--gold-dim); border-radius:0 12px 12px 0; font-size:var(--fs-lg); font-weight:600; color:var(--ink);}
blockquote p{margin:0;}
.note{display:flex; gap:12px; align-items:flex-start; padding:15px 18px; border-radius:12px; margin:18px 0; font-size:var(--fs-md); border:1px solid;}
.note .ni{flex:none; font-size:20px; line-height:1.4;}
.note-warn{background:var(--warn-dim); border-color:color-mix(in srgb,var(--warn) 32%,transparent); color:var(--ink);}
.note-info{background:var(--info-dim); border-color:color-mix(in srgb,var(--info) 28%,transparent); color:var(--ink);}
.note-teal{background:var(--teal-dim); border-color:color-mix(in srgb,var(--teal) 30%,transparent); color:var(--ink);}
.note>div>:first-child{margin-top:0;} .note>div>:last-child{margin-bottom:0;}

/* ── ফুটার ────────────────────────────────────────────────────────────── */
.foot{border-top:2px solid var(--line); margin-top:56px; padding:30px 0 10px; text-align:center; color:var(--ink-dim); font-size:var(--fs-base);}
.foot a{color:var(--teal); font-weight:700; text-decoration:none;}
.foot-cta{background:linear-gradient(135deg,var(--teal),var(--teal-bright)); color:#fff; border-radius:20px; padding:34px 26px; text-align:center; margin:50px 0 0; box-shadow:var(--shadow-hover);}
.foot-cta h2{margin:0 0 10px; font-size:clamp(var(--fs-xl),5vw,30px); font-weight:800; color:#fff;}
.foot-cta p{margin:0 auto 20px; max-width:48ch; opacity:.94; font-size:var(--fs-md);}
.foot-cta .btn-white{background:#fff; color:var(--teal); font-size:var(--fs-lg); padding:14px 30px;}
.foot-cta .btn-white:hover{box-shadow:0 10px 30px rgba(0,0,0,.2);}

/* ── ধাপ-পেজের নিজস্ব ─────────────────────────────────────────────────── */
.step-hero{padding:34px 0 26px; border-bottom:2px solid var(--line);}
.crumb{font-size:var(--fs-sm); color:var(--ink-dim); padding:14px 0 0;}
.crumb a{color:var(--ink-dim); text-decoration:none;}
.crumb a:hover{color:var(--teal);}
.step-badge{display:inline-flex; align-items:center; gap:9px; background:var(--teal); color:#fff; font-weight:800; font-size:var(--fs-sm); padding:7px 16px; border-radius:999px; margin-bottom:16px;}
.script{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow); margin:24px 0; font-size:19px;}
.script h2{font-size:var(--fs-xl); font-weight:800; margin:34px 0 12px; line-height:1.35; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.script h2:first-child{margin-top:0;}
.script h3{font-size:var(--fs-lg); font-weight:800; margin:26px 0 8px;}
.script p{margin:0 0 15px; color:var(--ink-soft);}
.script p.hl{color:var(--ink); font-weight:600;}
.script ul{margin:12px 0 16px; padding:0; list-style:none;}
.script ul li{padding:4px 0 4px 4px; color:var(--ink-soft);}
.script hr{border:none; border-top:1px solid var(--line-soft); margin:30px 0;}
.script .say{background:var(--teal-dim); border-radius:12px; padding:14px 18px; margin:16px 0; font-weight:600; color:var(--ink);}
/* ── সংলাপ (ডায়ালগ) — বক্তৃতা নয়, কথোপকথন হিসেবে পড়া যায় ────────────── */
.dlg{margin:16px 0 20px; display:flex; flex-direction:column; gap:11px;}
.dlg-row{display:flex; gap:10px; align-items:flex-start; max-width:90%;}
.dlg-row.them{align-self:flex-end; flex-direction:row-reverse;}
.dlg-who{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:17px; background:var(--teal-dim); border:1px solid var(--line);}
.dlg-row.them .dlg-who{background:var(--surface-2);}
.bub{padding:11px 16px; border-radius:15px; font-size:.97em; line-height:1.72; color:var(--ink);}
.bub .nm{display:block; font-size:var(--fs-xs); font-weight:800; opacity:.7; margin-bottom:1px; letter-spacing:.02em;}
.bub-me{background:var(--teal-dim); border:1px solid color-mix(in srgb,var(--teal) 26%,transparent); border-bottom-left-radius:5px;}
.bub-them{background:var(--surface-2); border:1px solid var(--line); border-bottom-right-radius:5px;}
.dlg-cue{margin:4px 0 0 44px; font-size:var(--fs-sm); color:var(--ink-dim); font-style:italic;}
.dlg-row.them + .dlg-cue{margin:4px 44px 0 0; text-align:right;}

/* দৃশ্য/পরিস্থিতির শিরোনাম */
.scene{display:flex; align-items:center; gap:10px; margin:30px 0 4px; font-weight:800;
  font-size:var(--fs-md); color:var(--ink); background:var(--gold-dim);
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent); padding:10px 16px; border-radius:11px;}
.scene .tag{margin-right:auto;}

/* আকর্ষণের ধাপ-লেবেল */
.akorshon{display:inline-flex; align-items:center; gap:8px; margin:24px 0 6px; font-weight:800;
  font-size:var(--fs-base); color:var(--teal); background:var(--teal-dim); padding:5px 14px; border-radius:999px;}

.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px;}
.pill{font-size:var(--fs-sm); font-weight:700; background:var(--surface); border:1px solid var(--line); padding:6px 13px; border-radius:999px; color:var(--ink-soft);}

/* পুরুষ / মহিলা সম্ভাষণ সুইচ */
.gender-switch{display:inline-flex; gap:5px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:13px; padding:5px; margin:10px 0 16px; box-shadow:var(--shadow);}
.gs-btn{font:inherit; font-size:var(--fs-base); font-weight:800; padding:9px 20px; border:none;
  border-radius:9px; background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:background .2s,color .2s;}
.gs-btn:hover{color:var(--teal);}
.gs-btn[aria-pressed="true"]{background:var(--teal); color:#fff; cursor:default;}
.gv[hidden]{display:none;}

.step-nav{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin:40px 0 0; padding-top:24px; border-top:2px solid var(--line);}

/* ধাপ-সুইচার — প্রতিটি ধাপ-পেজের উপরে, চারটি ধাপেই যাওয়া যায় */
.step-switch{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 2px;}
.step-switch .ss-lbl{font-size:var(--fs-sm); font-weight:800; color:var(--ink-dim); margin-left:2px;}
.step-switch .ss{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-md);
  font-weight:800; text-decoration:none; box-shadow:var(--shadow);
  transition:transform .25s var(--ease-bounce),border-color .2s,color .2s,background .2s;}
.step-switch .ss:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-2px);}
.step-switch .ss[aria-current="page"]{background:var(--teal); border-color:var(--teal); color:#fff; cursor:default;}
.step-switch .ss[aria-current="page"]:hover{transform:none;}
.step-switch .ss-all{width:auto; padding:0 15px; font-size:var(--fs-sm); font-weight:700;}
@media (max-width:420px){.step-switch .ss{width:36px; height:36px;} .step-switch .ss-all{padding:0 11px;}}

@media (max-width:560px){
  body{font-size:17px;}
  .wrap{padding:0 15px 90px;}
  .ladder>li{padding-left:64px;}
  .ladder::before{left:24px;}
  .ladder .rung{width:48px; height:48px; border-radius:14px; font-size:var(--fs-lg);}
  .script{padding:20px 17px; font-size:18px;}
  .sec-ico{width:44px; height:44px; font-size:22px;}
  .hero{padding:34px 0 28px;}
}

@media print{
  .top,.step-nav,.foot-cta,.crumb,.no-print{display:none !important;}
  body{background:#fff; font-size:14pt;}
  .script{box-shadow:none; border:none; padding:0;}
  a{text-decoration:none; color:#000;}
}

/* ── ট্রেনিং ভিডিও কার্ড (/training/) ────────────────────────────────── */
/* ▶️ চাপ না দেওয়া পর্যন্ত ভিডিও লোড হয় না — শুধু হালকা থাম্বনেইল দেখায়,
   তাই পেজ খুললেই মোবাইল ডেটা খরচ হয় না। */
.vid{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); margin:24px 0 34px;}
.vid-frame{position:relative; display:block; width:100%; padding:0; border:0; margin:0;
  aspect-ratio:16/9; background:#000; cursor:pointer; overflow:hidden;}
.vid-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.vid-frame video{width:100%; height:100%; display:block; background:#000;}
.vid-play{position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.10); transition:background .2s;}
.vid-frame:hover .vid-play{background:rgba(0,0,0,.02);}
.vid-play .ply{width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; font-size:30px; color:var(--teal); padding-left:5px;
  box-shadow:0 6px 26px rgba(0,0,0,.4); transition:transform .25s var(--ease-bounce);}
.vid-frame:hover .vid-play .ply{transform:scale(1.09);}
.vid-tip{position:absolute; right:12px; bottom:12px; padding:6px 13px; border-radius:999px;
  color:#fff; font-size:var(--fs-2xs); font-weight:700; background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);}
.vid-meta{padding:20px 22px;}
.vid-meta h3{margin:0 0 6px; font-size:var(--fs-lg); font-weight:800; line-height:1.35;}
.vid-meta p{margin:0; color:var(--ink-soft); font-size:var(--fs-md);}
.vid-badges{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0;}
.vid-badges span{font-size:var(--fs-2xs); font-weight:800; padding:4px 11px; border-radius:999px;
  background:var(--teal-dim); color:var(--teal);}
.vid-badges span.gold{background:var(--gold-dim); color:var(--gold);}
.vid-soon{border:2px dashed var(--line); border-radius:var(--radius); padding:26px 22px;
  text-align:center; color:var(--ink-dim); background:var(--surface-2); margin:24px 0;}
.vid-soon b{display:block; color:var(--ink-soft); font-size:var(--fs-md); margin-bottom:4px;}

/* ── ট্রেনিং ভিডিওর তালিকা (কার্ড গ্রিড, /training/) ─────────────────── */
.vid-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px; margin:26px 0 10px;}
.vid-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .25s var(--ease-bounce),box-shadow .2s,border-color .2s;}
.vid-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--teal-bright);}
.vid-card-img{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;}
.vid-card-img img{width:100%; height:100%; object-fit:cover; display:block;}
.vid-card-img .ply{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.93); display:grid;
  place-items:center; font-size:23px; color:var(--teal); padding-left:4px;
  box-shadow:0 4px 18px rgba(0,0,0,.35); transition:transform .25s var(--ease-bounce);}
.vid-card:hover .ply{transform:translate(-50%,-50%) scale(1.1);}
.vid-card-img .dur{position:absolute; right:9px; bottom:9px; background:rgba(0,0,0,.78); color:#fff;
  font-size:var(--fs-2xs); font-weight:700; padding:3px 9px; border-radius:6px;}
.vid-card-body{padding:17px 19px 19px; display:flex; flex-direction:column; flex:1;}
.vid-card-body h3{margin:0 0 7px; font-size:var(--fs-md); font-weight:800; line-height:1.4;}
.vid-card-body p{margin:0 0 13px; color:var(--ink-soft); font-size:var(--fs-base); flex:1;}
.vid-card-body .go{font-weight:800; font-size:var(--fs-base); color:var(--teal);}
.vid-num{align-self:flex-start; background:var(--teal-dim); color:var(--teal); font-size:var(--fs-2xs);
  font-weight:800; padding:3px 11px; border-radius:999px; margin-bottom:9px;}

/* ভিডিও-পেজের সুইচার (ধাপ-সুইচারের মতো) */
.vid-switch{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 2px;}
.vid-switch .ss-lbl{font-size:var(--fs-sm); font-weight:800; color:var(--ink-dim); margin-right:2px;}