/* ============================================================================
   Study Mate — About Us (CMS-চালিত). শুধু about.html লোড করে; style.css অপরিবর্তিত।
   ব্র্যান্ড টোকেন style.css থেকেই (--forest, --gold, --paper …), তাই ডার্ক-মোড স্বয়ংক্রিয়।
   ধারণা: প্রতিষ্ঠানের "প্রসপেক্টাস" — সেরিফ শিরোনাম, সোনালি সূক্ষ্ম রেখা, এবং একটাই স্মরণীয় অংশ: সংখ্যার "খতিয়ান" ব্যান্ড।
   ========================================================================== */
#abRoot { --ab-serif: "Noto Serif Bengali", "Tiro Bangla", Georgia, serif; --ab-gap: clamp(44px, 7vw, 84px); display: block; }
html[lang="en"] #abRoot { --ab-serif: "Playfair Display", Georgia, "Noto Serif Bengali", serif; }
html[lang="en"] #abRoot { font-family: "Inter", "Hind Siliguri", sans-serif; }
#abRoot[hidden] { display: none; }
.ab-wrap { max-width: var(--container, 1200px); margin: 0 auto; padding: 0 20px; }
.ab-sec { padding: var(--ab-gap) 0; }
.ab-sec + .ab-sec { padding-top: 0; }
.ab-sec.ab-stats + .ab-sec, .ab-hero + .ab-sec { padding-top: var(--ab-gap); }

/* সেকশনের শিরোনাম */
.ab-head { margin-bottom: clamp(22px, 4vw, 36px); max-width: 62ch; }
.ab-eyebrow { display: block; font: 600 .86rem/1.4 var(--font-body); color: var(--gold); letter-spacing: .02em; margin-bottom: 6px; }
.ab-h2 { font: 600 var(--fs-h2)/1.25 var(--ab-serif); color: var(--forest-text); margin: 0; }
.ab-sub { color: var(--ink-soft); margin: 10px 0 0; font-size: 1.02rem; line-height: 1.75; }
.ab-ink { color: var(--ink); }

/* হিরো */
.ab-hero { background: linear-gradient(165deg, var(--forest) 0%, var(--forest-deep) 100%); color: #fff; padding: clamp(48px, 9vw, 96px) 0 clamp(52px, 9vw, 100px); }
.ab-hero .ab-eyebrow { color: var(--gold-bright); }
.ab-hero h1 { font: 600 clamp(2.05rem, 6.2vw, 3.8rem)/1.15 var(--ab-serif); color: #fff; margin: 0; max-width: 18ch; text-wrap: balance; }
.ab-hero .ab-sub { color: rgba(255,255,255,.84); max-width: 54ch; font-size: clamp(1.02rem, 2.2vw, 1.2rem); margin-top: 16px; }
.ab-rule { display: block; width: 72px; height: 2px; background: var(--gold-bright); margin: 22px 0 0; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { .ab-rule { animation: abRule .9s var(--ease) .1s both; } }
@keyframes abRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* আমরা কারা */
.ab-who-grid { display: grid; gap: 22px; }
.ab-who-grid p { margin: 0 0 14px; line-height: 1.85; color: var(--ink-soft); font-size: 1.02rem; }
.ab-who-grid p:first-child { color: var(--ink); font-size: 1.14rem; }
@media (min-width: 860px) { .ab-who-grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } .ab-who-grid .ab-head { position: sticky; top: 96px; margin: 0; } }

/* সংখ্যার খতিয়ান */
.ab-stats { background: var(--paper-alt); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: clamp(36px, 6vw, 64px) 0; }
.ab-stats + .ab-sec { padding-top: var(--ab-gap); }
.ab-ledger { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.ab-ledger li { padding: 22px 18px; border-top: 1px solid var(--line); }
.ab-ledger li:nth-child(-n+2) { border-top: 0; }
.ab-ledger li:nth-child(even) { border-left: 1px solid var(--line); }
.ab-num { display: block; font: 600 clamp(2.4rem, 8.5vw, 4rem)/1 var(--ab-serif); color: var(--forest-text); letter-spacing: -.01em; }
.ab-lbl { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .95rem; }
@media (min-width: 760px) {
  .ab-ledger { grid-template-columns: repeat(var(--ab-cols, 4), 1fr); }
  .ab-ledger li, .ab-ledger li:nth-child(-n+2), .ab-ledger li:nth-child(even) { border: 0; border-left: 1px solid var(--line); padding: 8px 26px; }
  .ab-ledger li:first-child { border-left: 0; padding-left: 0; }
}

/* কার্ড-গ্রিড সাধারণ */
.ab-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.ab-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md, 16px); overflow: hidden; display: flex; flex-direction: column; }
.ab-card .ab-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ab-card h3 { font: 600 1.12rem/1.4 var(--ab-serif); color: var(--forest-text); margin: 0; }
.ab-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.ab-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--forest-soft); }
.ab-more { display: inline-block; margin-top: auto; padding-top: 8px; color: var(--forest-text); font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--gold); align-self: flex-start; }
.ab-center { text-align: center; margin-top: 26px; }

/* কোর্স */
.ab-fee { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; font-family: var(--font-body); }
.ab-fee b { font-size: 1.25rem; color: var(--forest-text); }
.ab-fee s { color: var(--ink-soft); font-size: .9rem; }
.ab-badge { align-self: flex-start; font-size: .78rem; padding: 3px 10px; border-radius: 999px; background: var(--forest-soft); color: var(--forest-text); font-weight: 600; }

/* বিষয় */
.ab-subjects { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ab-subjects { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ab-subjects { grid-template-columns: repeat(6, 1fr); } }
.ab-subj { border: 1px solid var(--line); background: var(--white); border-radius: 14px; padding: 18px 14px 16px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.ab-subj i { font: 600 1.9rem/1 var(--ab-serif); color: var(--gold); font-style: normal; }
.ab-subj span { font-weight: 600; color: var(--forest-text); line-height: 1.35; }
.ab-subj small { display: block; color: var(--ink-soft); font-weight: 400; margin-top: 2px; font-size: .82rem; }

/* শিক্ষক */
.ab-teachers { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ab-photo { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; display: block; background: var(--forest-soft); }
.ab-ph { aspect-ratio: 4 / 5; display: grid; place-items: center; background: linear-gradient(160deg, var(--forest-soft), var(--paper-alt)); color: var(--forest-text); font: 600 3rem var(--ab-serif); }
.ab-role { color: var(--gold); font-weight: 600; font-size: .92rem; }
.ab-meta { color: var(--ink-soft); font-size: .88rem; }
.ab-bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* বই */
.ab-books { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .ab-books { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .ab-books { grid-template-columns: repeat(5, 1fr); } }
.ab-book { display: flex; flex-direction: column; gap: 8px; color: inherit; }
.ab-cover { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 4px 10px 10px 4px; background: var(--forest-soft); box-shadow: inset 6px 0 8px -6px rgba(0,0,0,.35), var(--shadow-soft); border: 1px solid var(--line); }
.ab-book b { font: 600 .98rem/1.4 var(--ab-serif); color: var(--forest-text); }
.ab-book span { color: var(--ink-soft); font-size: .85rem; }
.ab-price { color: var(--ink) !important; font-weight: 700; font-size: .95rem !important; }

/* অবকাঠামো — ছবিনির্ভর */
.ab-infra { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ab-tile { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--forest-soft); }
.ab-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-tile div { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; color: #fff; background: linear-gradient(0deg, rgba(6,34,24,.88), transparent); }
.ab-tile h3 { font: 600 1.05rem var(--ab-serif); margin: 0; color: #fff; }
.ab-tile p { margin: 4px 0 0; font-size: .88rem; color: rgba(255,255,255,.85); line-height: 1.5; }

/* গ্যালারি */
.ab-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ab-tab { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-soft); font: 600 .9rem var(--font-body); cursor: pointer; }
.ab-tab[aria-selected="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }
.ab-tab:focus-visible, .ab-thumb:focus-visible, .ab-lb button:focus-visible, .ab-btn:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; }
.ab-gal { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .ab-gal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ab-gal { grid-template-columns: repeat(4, 1fr); } }
.ab-thumb { padding: 0; border: 0; background: var(--forest-soft); border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; position: relative; display: block; }
.ab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font-size: .8rem; color: #fff; text-align: left; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
.ab-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(4,18,12,.92); display: grid; place-items: center; padding: 16px; }
.ab-lb figure { margin: 0; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ab-lb img { max-width: 94vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.ab-lb figcaption { color: #fff; font-size: .95rem; text-align: center; }
.ab-lb button { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; cursor: pointer; }

/* মিশন-ভিশন-মূল্যবোধ */
.ab-mv { display: grid; gap: 16px; }
@media (min-width: 800px) { .ab-mv { grid-template-columns: 1fr 1fr; } }
.ab-panel { background: var(--forest-soft); border-left: 3px solid var(--forest); border-radius: 4px 16px 16px 4px; padding: 24px 24px 26px; }
.ab-panel.ab-vision { background: var(--gold-soft); border-left-color: var(--gold); }
.ab-panel h3 { font: 600 1.3rem var(--ab-serif); color: var(--forest-text); margin: 0 0 10px; }
.ab-panel p { margin: 0; line-height: 1.85; color: var(--ink); }
.ab-values { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ab-values li { padding-left: 18px; position: relative; }
.ab-values li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.ab-values b { display: block; color: var(--forest-text); font-family: var(--ab-serif); }
.ab-values span { color: var(--ink-soft); font-size: .93rem; line-height: 1.65; }
.ab-vh { font: 600 1.15rem var(--ab-serif); color: var(--forest-text); margin: 30px 0 0; }

/* যোগাযোগ / CTA */
.ab-cta { background: linear-gradient(160deg, var(--forest), var(--forest-deep)); color: #fff; border-radius: 24px; padding: clamp(28px, 6vw, 56px); }
.ab-cta h2 { font: 600 var(--fs-h2)/1.25 var(--ab-serif); color: #fff; margin: 0; }
.ab-cta p { color: rgba(255,255,255,.84); max-width: 52ch; margin: 10px 0 0; line-height: 1.75; }
.ab-social { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.ab-social a { color: var(--gold-bright); font-weight: 600; font-size: .95rem; border-bottom: 1px solid transparent; }
.ab-social a:hover { border-bottom-color: var(--gold-bright); }

/* বোতাম (পেজ-নিজস্ব, style.css-এর .btn-এর সাথে মেলানো) */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 26px; border-radius: 999px; font: 700 .95rem var(--font-body); border: 1.5px solid transparent; transition: transform .2s var(--ease), background .2s var(--ease); }
.ab-btn:hover { transform: translateY(-1px); }
.ab-btn-gold { background: linear-gradient(155deg, var(--gold-bright), var(--gold)); color: var(--forest-deep); }
.ab-btn-line { border-color: rgba(255,255,255,.55); color: #fff; }
.ab-btn-wa { background: #25D366; color: #06331a; }

/* প্রিভিউ রিবন */
.ab-prev { position: sticky; top: 0; z-index: 50; background: var(--gold-bright); color: var(--forest-deep); text-align: center; padding: 8px 14px; font-weight: 700; font-size: .9rem; }

/* পুরনো পেজ লুকানো (ক্যাশ থাকলে ফ্ল্যাশ এড়াতে) */
html.ab-pre #abLegacy { display: none; }
@media (prefers-reduced-motion: reduce) { .ab-btn { transition: none; } }

/* ============================================================================
   Stage 2 — প্রিমিয়াম পরিসংখ্যান · লেভেল-ভিত্তিক বিষয় · শিক্ষক কারোসেল/প্রোফাইল (সব টোকেন style.css থেকে; ডার্ক-মোড স্বয়ংক্রিয়)
   ========================================================================== */
html.ab-lock { overflow: hidden; }
.ab-gsep { display: block; position: relative; width: 64px; height: 9px; margin: 12px auto 10px; }
.ab-gsep::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); }
.ab-gsep::after { content: ""; position: absolute; left: 50%; top: 1px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 3px var(--white); }
.ab-gsep-l { width: 100%; margin: 12px 0 8px; }
.ab-gsep-l::after { left: 0; margin-left: 0; }

/* পরিসংখ্যান */
.ab-pstats-sec { background: linear-gradient(180deg, var(--paper-alt), var(--paper)); border-block: 1px solid var(--line); padding: var(--ab-gap) 0 !important; }
.ab-pstats { --c: 2; --g: 14px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }   /* অসম্পূর্ণ শেষ সারি মাঝখানে থাকে */
.ab-pstat { flex: 0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c)); min-width: 0; position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 28px 12px 22px; text-align: center; box-shadow: 0 12px 30px -18px rgba(11, 56, 43, .35); transition: transform .35s ease, box-shadow .35s ease; }
.ab-pstat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ab-pstat:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(11, 56, 43, .4); }
.ab-pnum { display: block; font: 700 clamp(2.15rem, 8vw, 3.4rem)/1.1 var(--ab-serif); color: var(--forest-text); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.ab-plbl { display: block; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
@media (min-width: 760px) { .ab-pstats { --c: var(--ab-cols, 4); --g: 20px; } .ab-pstat { padding: 34px 16px 26px; } }

/* লেভেল-ভিত্তিক বিষয় */
.ab-lvgrid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.ab-lvcard { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px 16px; box-shadow: 0 14px 32px -22px rgba(11, 56, 43, .4); }
.ab-lvcard::before { content: ""; position: absolute; left: 20px; top: -1px; width: 56px; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; }
.ab-lvhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ab-lvhead h3 { font: 600 1.18rem/1.4 var(--ab-serif); color: var(--forest-text); margin: 0; }
.ab-lvcount { font: 600 .78rem var(--font-body); color: var(--gold); background: rgba(189, 152, 84, .14); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.ab-lvlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
.ab-lvlist li { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--line); color: var(--ink); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ab-lvlist em { font: 600 .76rem var(--ab-serif); font-style: normal; color: var(--gold); min-width: 1.7em; }
@media (min-width: 520px) { .ab-lvlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ab-lvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .ab-lvcard { padding: 26px 26px 18px; } }

/* শিক্ষক কারোসেল */
.ab-tcar { position: relative; }
.ab-tcar-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 2px 20px; }
.ab-tcar-track::-webkit-scrollbar { display: none; }
.ab-tcar-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 14px; }
.ab-tcard { flex: 0 0 clamp(238px, 76vw, 296px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; cursor: pointer; box-shadow: 0 14px 30px -20px rgba(11, 56, 43, .45); transition: transform .3s ease, box-shadow .3s ease; }
.ab-tcard:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -20px rgba(11, 56, 43, .5); }
.ab-tphoto { position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; display: grid; place-items: center; border-bottom: 3px solid var(--gold); background: linear-gradient(160deg, var(--forest-soft), var(--paper-alt)); }
.ab-tbg { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(20px) saturate(1.15); opacity: .5; }
.ab-tfg { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.ab-tphoto .ab-tfg { position: absolute; inset: 0; }   /* কার্ডে ছবি ঘরের ভেতরেই পুরোটা ফিট হবে (লম্বা ছবিও কাটা পড়বে না) */   /* সম্পূর্ণ ছবি — ক্রপ নয়, বিকৃতি নয় */
.ab-tinit { font: 600 3.2rem var(--ab-serif); color: var(--forest-text); }
.ab-tbody { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 20px; flex: 1; }
.ab-tbody h3 { font: 600 1.1rem/1.35 var(--ab-serif); color: var(--forest-text); margin: 0; }
.ab-tbody .ab-bio { -webkit-line-clamp: 3; margin: 6px 0 12px; color: var(--ink-soft); font-size: .92rem; line-height: 1.65; }
.ab-tsubj { color: var(--forest-text); font-weight: 600; }
.ab-tbtn { margin-top: auto; align-self: flex-start; border: 1.5px solid var(--forest); background: transparent; color: var(--forest-text); padding: 9px 18px; border-radius: 999px; font: 600 .88rem var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.ab-tbtn:hover, .ab-tbtn:focus-visible { background: var(--forest); color: #fff; }
.ab-tnav { position: absolute; top: 34%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--forest-text); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 0 0 3px; }
.ab-tnav:hover { background: var(--forest); color: #fff; }
.ab-tprev { left: -8px; } .ab-tnext { right: -8px; }
.ab-tnav-off .ab-tnav { display: none; }
@media (max-width: 600px) { .ab-tnav { width: 36px; height: 36px; font-size: 1.3rem; top: 30%; } .ab-tprev { left: -4px; } .ab-tnext { right: -4px; } }

/* শিক্ষকের বিস্তারিত প্রোফাইল (মডাল) */
.ab-tm { position: fixed; inset: 0; z-index: 400; background: rgba(6, 22, 16, .74); display: flex; align-items: center; justify-content: center; padding: 18px; overflow-y: auto; }
.ab-tm-box { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); width: 100%; max-width: 940px; max-height: calc(100dvh - 36px); overflow: auto; background: var(--white); border-radius: 24px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); }
.ab-tm-photo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: hidden; background: linear-gradient(160deg, var(--forest-soft), var(--paper-alt)); }
.ab-tm-photo .ab-tfg { height: auto; max-height: 82vh; }   /* বড় ছবি — স্বাভাবিক অনুপাত */
.ab-tm-photo .ab-tinit { font-size: 5rem; padding: 40px 0; }
.ab-tm-x { position: absolute; top: 10px; right: 10px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(11, 56, 43, .88); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; }
.ab-tm-info { padding: 28px 26px 30px; min-width: 0; }
.ab-tm-name { font: 600 clamp(1.3rem, 4vw, 1.65rem)/1.3 var(--ab-serif); color: var(--forest-text); margin: 0 0 10px; padding-right: 34px; }
.ab-tm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ab-tm-pill { background: var(--paper-alt); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .82rem; color: var(--ink-soft); }
.ab-tm-sec h4 { font: 600 .76rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 18px 0 7px; }
.ab-tm-text { white-space: pre-line; color: var(--ink); line-height: 1.85; margin: 0; overflow-wrap: anywhere; }
.ab-tm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-tm-chips li { background: var(--paper-alt); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: .86rem; color: var(--forest-text); }
@media (max-width: 720px) {
  .ab-tm { padding: 0; align-items: flex-end; }
  .ab-tm-box { grid-template-columns: minmax(0, 1fr); max-height: 94dvh; border-radius: 22px 22px 0 0; }
  .ab-tm-photo .ab-tfg { max-height: 46vh; }
  .ab-tm-info { padding: 22px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) { .ab-pstat, .ab-tcard { transition: none; } .ab-tcar-track { scroll-behavior: auto; } }

/* ============================================================================
   Stage 3 — প্রিমিয়াম হিরো · Center-focus (Coverflow) ক্যারোসেল · কোর্স-কার্ড · শিক্ষক-কার্ড (রেফারেন্স) · সোশ্যাল
   ========================================================================== */
/* হিরো */
.ab-hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 88% -8%, rgba(217, 168, 78, .30), transparent 62%), radial-gradient(700px 380px at -6% 110%, rgba(31, 138, 99, .35), transparent 60%), linear-gradient(165deg, #174B3C 0%, #0B382B 100%); }
.ab-hero::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 22px 22px; pointer-events: none; }
.ab-hero .ab-wrap { position: relative; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; justify-items: start; }
.ab-hero-logo { width: clamp(120px, 34vw, 144px); aspect-ratio: 1; border-radius: 50%; padding: 4px; background: linear-gradient(150deg, #E7C987, #BD9854 55%, #8a6a2c); box-shadow: 0 14px 38px rgba(0, 0, 0, .35); }
.ab-hero-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; object-position: center; padding: 7%; box-sizing: border-box; background: #fff; display: block; }   /* পুরো লোগো দেখা যায় — ক্রপ নয় (লোগো-ফাইল পোর্ট্রেট, তাই contain) */
.ab-hero h1 { max-width: 20ch; }
.ab-hero .ab-rule { display: block; width: 64px; height: 3px; border-radius: 3px; margin: 18px 0 4px; background: linear-gradient(90deg, #E7C987, #BD9854); }
@media (min-width: 900px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; }
  .ab-hero-logo { order: 2; justify-self: center; width: min(300px, 26vw); padding: 6px; box-shadow: 0 0 0 10px rgba(231, 201, 135, .12), 0 0 0 22px rgba(231, 201, 135, .06), 0 24px 60px rgba(0, 0, 0, .4); }
  .ab-hero-txt { order: 1; }
}
.ab-enter .ab-hero-logo, .ab-enter .ab-hero-txt > * { opacity: 0; transform: translateY(16px); }
.ab-enter.ab-in .ab-hero-logo, .ab-enter.ab-in .ab-hero-txt > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.ab-enter.ab-in .ab-hero-txt > *:nth-child(2) { transition-delay: .08s; } .ab-enter.ab-in .ab-hero-txt > *:nth-child(3) { transition-delay: .16s; }
.ab-enter.ab-in .ab-hero-txt > *:nth-child(4) { transition-delay: .24s; } .ab-enter.ab-in .ab-hero-txt > *:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .ab-enter .ab-hero-logo, .ab-enter .ab-hero-txt > * { opacity: 1; transform: none; transition: none !important; } }

/* Center-focus ক্যারোসেল (কোর্স + শিক্ষক) */
.ab-cf { --cw: clamp(246px, 72vw, 392px); --dx: calc(var(--cw) * .84); --sc: .84; position: relative; outline: none; }
.ab-cf-t { --cw: clamp(248px, 74vw, 330px); --dx: calc(var(--cw) * .88); --sc: .86; }
.ab-cf-stage { display: grid; place-items: start center; overflow: hidden; padding: 18px 0 26px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ab-cf-item { grid-area: 1 / 1; width: var(--cw); transition: transform .62s cubic-bezier(.22, .8, .24, 1), opacity .5s ease, filter .5s ease; will-change: transform, opacity; }
.ab-cf-item[data-pos="c"] { transform: none; opacity: 1; z-index: 3; }
.ab-cf-item[data-pos="l"] { transform: translateX(calc(var(--dx) * -1)) scale(var(--sc)); opacity: .86; filter: saturate(.85); z-index: 2; }
.ab-cf-item[data-pos="r"] { transform: translateX(var(--dx)) scale(var(--sc)); opacity: .86; filter: saturate(.85); z-index: 2; }
.ab-cf-item[data-pos="xl"] { transform: translateX(calc(var(--dx) * -1.7)) scale(.7); opacity: 0; z-index: 1; pointer-events: none; }
.ab-cf-item[data-pos="xr"] { transform: translateX(calc(var(--dx) * 1.7)) scale(.7); opacity: 0; z-index: 1; pointer-events: none; }
.ab-cf-nav { position: absolute; top: 42%; z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--forest-text); font-size: 1.6rem; line-height: 1; padding: 0 0 3px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); transition: background .2s, color .2s; }
.ab-cf-nav:hover, .ab-cf-nav:focus-visible { background: var(--forest); color: #fff; }
.ab-cf-prev { left: max(4px, calc(50% - var(--cw) * 1.5 - 28px)); } .ab-cf-next { right: max(4px, calc(50% - var(--cw) * 1.5 - 28px)); }
@media (max-width: 700px) { .ab-cf-nav { width: 38px; height: 38px; font-size: 1.35rem; top: 36%; } .ab-cf-prev { left: 2px; } .ab-cf-next { right: 2px; } }
.ab-cf-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ab-cf-dot { width: 9px; height: 9px; padding: 0; border-radius: 99px; border: 0; background: var(--line); cursor: pointer; transition: width .3s, background .3s; }
.ab-cf-dot[aria-current="true"] { width: 26px; background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .ab-cf-item { transition: none !important; } .ab-cf-dot { transition: none; } }

/* কোর্স-কার্ড (হোমপেজের oc-card ভাষা: ১৬:৯ ছবি, সোনালি রিং, চলমান-ব্যাজ) */
.ab-cc { display: flex; flex-direction: column; background: var(--white); border-radius: 22px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 16px 38px -18px rgba(11, 56, 43, .5), 0 0 0 1px rgba(189, 152, 84, .35); }
.ab-cf-item[data-pos="c"] .ab-cc { box-shadow: 0 26px 56px -20px rgba(11, 56, 43, .6), 0 0 0 2px var(--gold); }
.ab-cc-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--forest-mid, #174B3C), var(--forest-deep, #0B382B)); overflow: hidden; }
.ab-cc-ph { position: absolute; inset: 0; display: grid; place-items: center; font: 600 3rem var(--ab-serif); color: rgba(255, 255, 255, .5); }
.ab-cc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ab-cc:hover .ab-cc-img { transform: scale(1.04); }
.ab-cc-badge { position: absolute; z-index: 2; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; font: 700 .76rem var(--font-body); padding: 5px 12px; border-radius: 999px; background: rgba(6, 34, 24, .82); color: #fff; backdrop-filter: blur(4px); }
.ab-cc-badge.s-ongoing::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #59e08f; }
.ab-cc-badge.s-closed { background: rgba(110, 27, 44, .92); } .ab-cc-badge.s-upcoming { background: rgba(185, 138, 62, .96); color: #1d1405; }
.ab-cc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ab-cc-lv { align-self: flex-start; font: 600 .72rem var(--font-body); letter-spacing: .04em; color: var(--gold); background: rgba(189, 152, 84, .14); padding: 3px 10px; border-radius: 999px; }
.ab-cc-body h3 { font: 600 1.05rem/1.4 var(--ab-serif); color: var(--forest-text); margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ab-cc-fee { display: flex; align-items: baseline; gap: 8px; } .ab-cc-fee b { font-size: 1.15rem; color: var(--forest-text); } .ab-cc-fee s { color: var(--ink-soft); font-size: .86rem; }
.ab-cc-go { margin-top: 4px; font-weight: 700; font-size: .86rem; color: var(--forest-text); }

/* শিক্ষক-কার্ড (রেফারেন্স: গ্র্যাডিয়েন্ট হেডার + ওভারল্যাপ গোল ছবি) */
.ab-bgs-forest { --g1: #1d5a47; --g2: #0B382B; } .ab-bgs-emerald { --g1: #2aa076; --g2: #0f5a43; } .ab-bgs-gold { --g1: #E1BE78; --g2: #9c7a35; } .ab-bgs-royal { --g1: #3b5fc0; --g2: #1b2f72; }
.ab-bgs-sky { --g1: #5aa7e0; --g2: #1c74c4; } .ab-bgs-plum { --g1: #8a4a9d; --g2: #4a2058; } .ab-bgs-sunset { --g1: #ef8d45; --g2: #b8431f; } .ab-bgs-slate { --g1: #5a6e7c; --g2: #27333d; }
[class*="ab-bgs-"] { background-image: linear-gradient(135deg, var(--g1), var(--g2)); }
.ab-tc { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; cursor: pointer; box-shadow: 0 16px 38px -20px rgba(11, 56, 43, .5); }
.ab-cf-item[data-pos="c"] .ab-tc { box-shadow: 0 26px 56px -22px rgba(11, 56, 43, .6), 0 0 0 2px rgba(189, 152, 84, .55); }
.ab-tc-head { align-self: stretch; height: 104px; }
.ab-tc-photo { width: 124px; height: 124px; margin-top: -62px; border-radius: 50%; border: 4px solid var(--white); box-shadow: 0 0 0 3px var(--gold), 0 12px 28px -8px rgba(0, 0, 0, .45); overflow: hidden; background: var(--paper-alt); z-index: 1; display: grid; place-items: center; flex: 0 0 auto; }
.ab-tc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-tc-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px 4px; width: 100%; }
.ab-tc-name { font: 600 1.18rem/1.35 var(--ab-serif); color: var(--forest-text); margin: 0; }
.ab-tc-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(23, 75, 60, .1); color: var(--forest-text); border-radius: 999px; padding: 4px 13px; font: 600 .82rem var(--font-body); } .ab-tc-pill svg { width: 14px; height: 14px; }
.ab-tc-role { font: 600 .84rem var(--font-body); color: var(--ink); } .ab-tc-sp { font-size: .8rem; color: var(--ink-soft); } .ab-tc-exp { font: 600 .8rem var(--font-body); color: var(--gold); }
.ab-tc-bio { margin: 2px 0 0; font-size: .86rem; line-height: 1.65; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ab-tc-foot { padding: 8px 18px 20px; width: 100%; }
.ab-tc-btn { width: 100%; border: 1.5px solid var(--forest); background: transparent; color: var(--forest-text); border-radius: 999px; padding: 10px 16px; font: 600 .88rem var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.ab-tc-btn:hover, .ab-tc-btn:focus-visible { background: var(--forest); color: #fff; }
.ab-tinit { font: 600 2.6rem var(--ab-serif); color: var(--forest-text); }
/* সোশ্যাল */
.ab-soc { display: flex; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ab-soc-a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; transition: transform .2s; } .ab-soc-a:hover, .ab-soc-a:focus-visible { transform: translateY(-2px); }
.ab-soc-youtube { background: #e62117; } .ab-soc-facebook { background: #1877f2; } .ab-soc-linkedin { background: #0a66c2; } .ab-soc-instagram { background: linear-gradient(45deg, #f9a43d, #e1306c 55%, #833ab4); }
.ab-soc-l { justify-content: flex-start; } .ab-soc-l .ab-soc-a { width: auto; height: auto; border-radius: 999px; padding: 8px 16px 8px 12px; display: inline-flex; gap: 8px; align-items: center; font: 600 .86rem var(--font-body); }
/* প্রোফাইল মডাল: ছবির নিচে টিন্ট (ব্যাকগ্রাউন্ড-স্টাইল), ওপরে পুরো ছবি */
.ab-tm-photo[class*="ab-bgs-"] { background-image: linear-gradient(135deg, var(--g1), var(--g2)); }
.ab-tm-photo .ab-tbg { opacity: .35; }
@media (max-width: 380px) { .ab-tc-photo { width: 110px; height: 110px; margin-top: -55px; } .ab-tc-head { height: 92px; } }
/* মডাল/লাইটবক্স <body>-তে বসে (#abRoot-এর বাইরে) — তাই সেরিফ ফন্ট-ভ্যারিয়েবল এখানেও দিতে হয় */
.ab-tm, .ab-lb { --ab-serif: "Noto Serif Bengali", "Tiro Bangla", Georgia, serif; }
html[lang="en"] .ab-tm, html[lang="en"] .ab-lb { --ab-serif: "Playfair Display", Georgia, "Noto Serif Bengali", serif; }

/* ============================================================================
   Stage 3 — বাকি সেকশনের প্রিমিয়াম পলিশ (শুধু #abRoot-এর ভেতরে; বিদ্যমান ক্লাস-নাম অপরিবর্তিত)
   ========================================================================== */
#abRoot .ab-head { position: relative; } 
#abRoot .ab-head .ab-h2::after, #abRoot .ab-eyebrow + h2::after { content: ""; display: block; width: 52px; height: 3px; border-radius: 3px; margin-top: 12px; background: linear-gradient(90deg, #E7C987, #BD9854); }
#abRoot .ab-center .ab-h2::after { margin-inline: auto; }
/* আমাদের পরিচিতি */
#abRoot .ab-who p, #abRoot .ab-who .ab-who-p { font-size: 1.04rem; line-height: 1.9; }
#abRoot .ab-who > * > p:first-of-type, #abRoot .ab-who-p:first-of-type { border-left: 3px solid var(--gold); padding-left: 18px; color: var(--ink); }
/* মিশন ও ভিশন */
#abRoot .ab-mv .ab-panel { position: relative; padding: 30px 28px 28px; border-radius: 22px; box-shadow: 0 18px 40px -26px rgba(11, 56, 43, .5); overflow: hidden; }
#abRoot .ab-mv .ab-panel::before { content: "“"; position: absolute; right: 18px; top: -6px; font: 700 6rem/1 var(--ab-serif); color: rgba(189, 152, 84, .22); pointer-events: none; }
#abRoot .ab-mv .ab-panel h3 { font: 600 1.25rem var(--ab-serif); color: var(--forest-text); margin: 0 0 8px; }
#abRoot .ab-values { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; counter-reset: v; }
#abRoot .ab-values li { counter-increment: v; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 18px 18px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 28px -22px rgba(11, 56, 43, .5); }
#abRoot .ab-values li::before { content: "0" counter(v); font: 600 .8rem var(--ab-serif); color: var(--gold); letter-spacing: .08em; }
#abRoot .ab-values li b { font: 600 1.05rem var(--ab-serif); color: var(--forest-text); }
/* সুবিধা */
#abRoot .ab-fac .ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; align-items: start; }
#abRoot .ab-fac .ab-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 14px 32px -22px rgba(11, 56, 43, .5); transition: transform .3s, box-shadow .3s; }
#abRoot .ab-fac .ab-card::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #E7C987, #BD9854); }
#abRoot .ab-fac .ab-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -22px rgba(11, 56, 43, .55); }
#abRoot .ab-fac .ab-img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; }
#abRoot .ab-fac .ab-body { padding: 18px 20px 20px; } #abRoot .ab-fac .ab-body h3 { font: 600 1.08rem var(--ab-serif); color: var(--forest-text); margin: 0 0 6px; }
/* বই */
#abRoot .ab-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
#abRoot .ab-book { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgba(11, 56, 43, .5); transition: transform .3s; }
#abRoot .ab-book:hover { transform: translateY(-5px); }
#abRoot .ab-book .ab-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--paper-alt); margin-bottom: 8px; }
#abRoot .ab-book b { font: 600 .98rem/1.4 var(--ab-serif); color: var(--forest-text); } #abRoot .ab-price { font-weight: 700; color: var(--gold); }
/* অবকাঠামো */
#abRoot .ab-infra { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
#abRoot .ab-tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 34px -22px rgba(11, 56, 43, .55); }
#abRoot .ab-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } #abRoot .ab-tile:hover img { transform: scale(1.05); }
/* যোগাযোগ + সোশ্যাল */
#abRoot .ab-cta { position: relative; overflow: hidden; background: radial-gradient(520px 260px at 90% -10%, rgba(217, 168, 78, .28), transparent 62%), linear-gradient(150deg, #174B3C, #0B382B); border-radius: 28px; padding: clamp(28px, 6vw, 52px); }
#abRoot .ab-cta h2 { font-family: var(--ab-serif); }
#abRoot .ab-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
#abRoot .ab-social a { color: #fff; font: 600 .86rem var(--font-body); padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(231, 201, 135, .5); transition: background .2s, color .2s; }
#abRoot .ab-social a:hover { background: #E7C987; color: #0B382B; }
@media (prefers-reduced-motion: reduce) { #abRoot .ab-card, #abRoot .ab-book, #abRoot .ab-tile img { transition: none !important; } }