/* AX-HD-2: one header look for every page (public header + funnel header). Namespaced axh- so it never clashes with page styles.
   Tokens match the classroom/community (public/ax-nav/nav.css). Header font: Noto Sans Bengali + Anek Bangla; the Latin site name: Manrope. */
:root{--axh-bg:rgba(251,248,241,.93);--axh-line:#ECE6D8;--axh-ink:#10192B;--axh-ink2:#2D3748;--axh-mute:#4A5568;--axh-soft:#6B7485;--axh-navy:#14233A;--axh-gold:#C9A134;--axh-goldt:#7A5A0E;--axh-goldl:#F3D98B;--axh-sandl:#E6DDC8;--axh-font:'Noto Sans Bengali','Anek Bangla','Hind Siliguri',system-ui,sans-serif;--axh-en:'Manrope','Noto Sans Bengali',system-ui,sans-serif}
.axh{position:relative;z-index:200;background:#FBF8F1;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--axh-line);font-family:var(--axh-font);transition:box-shadow .3s}
.axh::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,161,52,.55),transparent);opacity:.7;pointer-events:none}
.axh--sticky{position:sticky;top:0}
.axh.is-scrolled{background:var(--axh-bg);box-shadow:0 10px 30px -18px rgba(16,25,43,.45)}  /* solid at the top (dark pages stay ivory), glass once scrolling */
.axh-in{max-width:1280px;margin:0 auto;padding:0 16px;height:72px;display:flex;align-items:center;gap:20px;box-sizing:border-box;transition:height .3s}
.axh.is-scrolled .axh-in{height:60px}
@media(min-width:1024px){.axh-in{padding:0 40px}}
.axh a{-webkit-tap-highlight-color:transparent}
.axh :focus-visible{outline:3px solid var(--axh-gold);outline-offset:2px}

/* brand block: identical in every shape */
.axh-brand{display:flex;align-items:center;gap:11px;text-decoration:none!important;color:var(--axh-ink)!important;min-width:0;flex-shrink:1}
.axh-logo{height:40px;width:auto;max-width:150px;border-radius:10px;flex-shrink:0;display:block}
.axh-mark{width:40px;height:40px;border-radius:12px;background:var(--axh-navy);color:var(--axh-goldl);display:flex;align-items:center;justify-content:center;font-family:var(--axh-en);font-weight:800;font-size:14px;letter-spacing:.02em;position:relative;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(243,217,139,.35)}
.axh-mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--axh-gold);border:2.5px solid #FBF8F1}
.axh-name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.axh-name b{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axh-name b.is-latin{font-family:var(--axh-en);font-weight:800;letter-spacing:-.01em}
.axh-name small{font-size:11.5px;color:var(--axh-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.axh-name em{display:none;font-style:normal;font-size:11.5px;font-weight:700;color:var(--axh-goldt);line-height:1.1;margin-top:2px}
.axh-name em.is-latin{font-family:var(--axh-en);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase}
.axh-name .axh-n2{display:none}

/* right side */
.axh-r{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.axh-cta{position:relative;overflow:hidden;height:42px;padding:0 18px;border-radius:12px;background:var(--axh-navy);color:#FBF8F1!important;font-size:15px;font-weight:600;text-decoration:none!important;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.axh-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(20,35,58,.7)}
.axh-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(243,217,139,.45),transparent);animation:axhShine 3.6s ease-in-out infinite;pointer-events:none}
.axh-cta svg{width:16px;height:16px;flex-shrink:0}
.axh-live{display:flex;align-items:center;gap:8px;margin:0 auto;height:34px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--axh-line);font-size:13.5px;color:var(--axh-ink2);white-space:nowrap}
.axh-live b{color:var(--axh-goldt);font-weight:700}
.axh-dot{width:8px;height:8px;border-radius:50%;background:var(--axh-gold);flex-shrink:0;animation:axhPulse 2.2s ease-out infinite}
@keyframes axhShine{0%{transform:translateX(-160%) skewX(-20deg)}55%,100%{transform:translateX(360%) skewX(-20deg)}}
@keyframes axhPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,161,52,.6)}50%{box-shadow:0 0 0 7px rgba(201,161,52,0)}}

/* AX-HD-2b: focus (checkout/payment) and minimal (thank-you, download, error) shapes */
.axh--fixed{position:fixed;top:0;left:0;right:0}
.axh-back{width:40px;height:40px;border-radius:12px;border:1px solid var(--axh-sandl);background:#fff;color:var(--axh-ink)!important;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none!important;transition:border-color .2s}
.axh-back:hover{border-color:var(--axh-gold)}
.axh-back svg{width:18px;height:18px}
.axh-steps{display:flex;align-items:center;gap:10px;margin:0 auto;padding:0;list-style:none;font-size:14px;color:var(--axh-soft)}
.axh-step{display:flex;align-items:center;gap:8px;white-space:nowrap}
.axh-step i{font-style:normal;width:25px;height:25px;border-radius:50%;border:1.5px solid var(--axh-sandl);background:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--axh-soft)}
.axh-step.is-done i{background:#0B7A55;border-color:#0B7A55;color:#fff}
.axh-step.is-on{color:var(--axh-ink);font-weight:700}
.axh-step.is-on i{background:var(--axh-navy);border-color:var(--axh-navy);color:var(--axh-goldl)}
.axh-sep{width:34px;height:1.5px;background:var(--axh-sandl)}
.axh-sep.is-done{background:#0B7A55}
.axh-safe{height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#ECFDF3;border:1px solid #B7E4CC;color:#0B7A55;font-size:13.5px;font-weight:700;white-space:nowrap}
.axh-safe svg{width:16px;height:16px;flex-shrink:0}
.axh-ghost{height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--axh-sandl);background:#fff;color:var(--axh-ink)!important;font-size:14.5px;font-weight:600;text-decoration:none!important;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:border-color .2s}
.axh-ghost:hover{border-color:var(--axh-gold)}
.axh-ghost .axn-ic,.axh-ghost svg{width:18px;height:18px;color:var(--axh-goldt);flex-shrink:0}
.axh-prog{display:none}

/* AX-HD-2c: classroom / community / course player use the same look. Their own layout (height, sidebar offsets, sticky)
   stays as it was — only colour, hairline, font, brand block and buttons change. No backdrop-filter here: it would trap
   position:fixed popups (bell, sheets) inside the header. */
.axh.axh--area,.axh.axh--player{position:sticky;top:0;z-index:60;-webkit-backdrop-filter:none;backdrop-filter:none;background:#FBF8F1;transition:none}
.axh-area{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:#FBF1D6;border:1px solid #EBD9A6;color:var(--axh-goldt);font-size:12px;font-weight:700;white-space:nowrap;flex-shrink:0;font-family:var(--axh-font)}
.axh--area .cx-nav a,.axh--area .st-nav a{position:relative;font-family:var(--axh-font);font-weight:600;color:var(--axh-mute);background:transparent;border-radius:10px}
.axh--area .cx-nav a:hover,.axh--area .st-nav a:hover{color:var(--axh-ink);background:rgba(255,255,255,.75)}
.axh--area .cx-nav a.is-on{color:var(--axh-ink);background:transparent;font-weight:700}
.axh--area .cx-nav a.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;background:var(--axh-gold)}
.axh--area .cx-ib,.axh--area .st-ib{width:40px;height:40px;border:1px solid var(--axh-line);border-radius:12px;background:#fff;color:var(--axh-ink2)}
.axh--area .cx-ib:hover,.axh--area .st-ib:hover{border-color:var(--axh-gold);background:#fff}
.axh--area .cx-me{width:40px;height:40px;box-shadow:0 0 0 1.5px var(--axh-gold)}
.axh--area .st-me{background:#fff;border-color:var(--axh-line)}
.axh--area .st-av{box-shadow:0 0 0 1.5px var(--axh-gold)}
.axh--player{border-bottom:1px solid var(--axh-line)}
.axh-brand--mark{flex:0 0 auto}
.axh--area .st-top-l{gap:14px}
.axh-brand--mark .axh-logo{height:36px;max-width:110px}
.axh-brand--mark .axh-mark{width:36px;height:36px;border-radius:11px;font-size:12.5px}
.axh-brand--mark .axh-mark::after{width:9px;height:9px;border-width:2px}
@media(max-width:1023px){
  .axh-area{display:none}
  .axh-brand--mark{display:none}
}

/* the small home link at the bottom of a page whose header is switched off (no dead end) */
/* own ivory pill so it shows on dark pages too; big bottom space so a page's fixed buy bar never covers it */
.axh-foot{display:flex;justify-content:center;padding:24px 16px calc(104px + env(safe-area-inset-bottom,0px));font-family:var(--axh-font)}
.axh-foot a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 7px;border-radius:999px;background:#FBF8F1;border:1px solid var(--axh-line);color:var(--axh-ink)!important;font-size:14px;font-weight:600;text-decoration:none!important;box-shadow:0 8px 20px -12px rgba(16,25,43,.5)}
.axh-foot a:hover{border-color:var(--axh-gold)}
.axh-foot .axh-mark{width:26px;height:26px;border-radius:8px;font-size:10px}
.axh-foot .axh-mark::after{display:none}

@media(max-width:1023px){
  .axh-in{height:60px;gap:10px}
  .axh.is-scrolled .axh-in{height:56px}
  .axh-mark{width:36px;height:36px;border-radius:11px;font-size:12.5px}
  .axh-mark::after{width:9px;height:9px;border-width:2px}
  .axh-logo{height:36px;max-width:120px}
  .axh-name small,.axh-name .axh-n1{display:none}
  .axh-name .axh-n2{display:block}
  .axh-name em{display:block}
  .axh-name b{font-size:15px;line-height:1.05}
  .axh-live{display:none}
  .axh-cta{height:40px;padding:0 15px;font-size:14px;border-radius:11px}
  .axh--funnel .axn-sw{display:none}
  .axh-steps{display:none}
  .axh-safe{height:34px;padding:0 11px;font-size:12.5px}
  .axh-back{width:36px;height:36px;border-radius:11px}
  .axh-ghost{height:38px;padding:0 12px;font-size:14px}
  .axh-ghost--wide span{display:none}
  .axh-ghost--wide{padding:0 10px}
  .axh-prog{display:block;padding:6px 16px 0}
  .axh-prog-l{display:block;font-size:12px;color:var(--axh-soft);line-height:1.4}
  .axh-prog-l b{color:var(--axh-ink)}
  .axh-prog-bar{display:block;height:3px;margin:6px -16px 0;background:var(--axh-line);position:relative}
  .axh-prog-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#0B7A55,#3BA57A);border-radius:0 2px 2px 0}
}
@media(max-width:380px){.axh-cta svg{display:none}.axh-safe svg{display:none}.axh--focus .axh-name em{display:none}}
@media (prefers-reduced-motion:reduce){.axh-cta::after,.axh-dot{animation:none}.axh,.axh-in{transition:none}}
@media print{.axh{display:none!important}}

/* AX-LANG-1: বাং | EN switch (header, footer, menus) */
.axl-sw{display:inline-flex;align-items:center;background:#F4EFE3;border:1px solid #E6DDC8;border-radius:11px;padding:3px;gap:2px;font-family:'Manrope','Noto Sans Bengali',system-ui,sans-serif;flex-shrink:0}
.axl-sw a{height:30px;min-width:40px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#4A5568!important;text-decoration:none!important;white-space:nowrap;transition:background .2s,color .2s}
.axl-sw a.axl-bn{font-family:'Noto Sans Bengali','Anek Bangla',system-ui,sans-serif}
.axl-sw a:hover{color:#10192B!important}
.axl-sw a.is-on{background:#fff;color:#10192B!important;box-shadow:0 4px 10px -6px rgba(16,25,43,.4),inset 0 -2px 0 #C9A134}
.axl-sw a:focus-visible{outline:3px solid #C9A134;outline-offset:2px}
.axl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:14px;background:#FBF8F1;border:1px solid #ECE6D8;margin:8px 0;font-family:'Noto Sans Bengali','Anek Bangla','Manrope',system-ui,sans-serif}
.axl-lab{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:#10192B}
.axl-lab svg{width:18px;height:18px;color:#7A5A0E}
.x2f .axl-sw{background:rgba(255,255,255,.06);border-color:rgba(212,175,55,.3)}
.x2f .axl-sw a{color:#C9CDD8!important}
.x2f .axl-sw a.is-on{background:#F5F1E6;color:#0B1B33!important}
@media (max-width:1023px){.axh .axl-sw.axl-top{display:none}}
/* AX-LANG-SW (owner picked ক২): one small button in the top bars — shows only the language it switches to */
.axl-one{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px 0 9px;border-radius:11px;background:#fff;border:1px solid #E6DDC8;color:#10192B!important;text-decoration:none!important;font-weight:700;font-size:13px;flex-shrink:0;box-shadow:0 1px 0 rgba(16,25,43,.04);transition:border-color .2s,box-shadow .2s}
.axl-one svg{width:16px;height:16px;color:#7A5A0E;flex-shrink:0}
.axl-one .axl-lt{font-family:'Manrope','Noto Sans Bengali',system-ui,sans-serif;letter-spacing:.02em}
.axl-one .axl-lb{font-family:'Noto Sans Bengali','Anek Bangla',system-ui,sans-serif;font-size:13.5px}
.axl-one:hover{border-color:#C9A134;box-shadow:0 8px 18px -12px rgba(122,90,14,.55)}
.axl-one:focus-visible{outline:3px solid #C9A134;outline-offset:2px}
.axl-tip{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#10192B;color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;font-family:'Noto Sans Bengali','Manrope',system-ui,sans-serif;z-index:5}
.axl-tip::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;background:#10192B;transform:translateX(-50%) rotate(45deg)}
.axl-one:hover .axl-tip,.axl-one:focus-visible .axl-tip{opacity:1}
@media (max-width:1023px){.axh .axl-one.axl-top{display:none}}
/* AX-LANG-SW ক২: classroom/community bars on laptops under 1680px use the phone-style name (AchieveX + area underneath), so nothing gets cut */
@media (min-width:1024px) and (max-width:1679px){
  .axh--area .axh-name small,.axh--area .axh-name .axh-n1,.axh--area .axh-area{display:none}
  .axh--area .axh-name .axh-n2,.axh--area .axh-name em{display:block}
  .axh--area .axh-brand,.axh--area .axh-name{flex-shrink:0}
}
/* the community bar keeps the same width on big screens and has its own menu, so it always uses the short name on desktop */
@media (min-width:1680px){
  .cx-top.axh--area .axh-name small,.cx-top.axh--area .axh-name .axh-n1,.cx-top.axh--area .axh-area{display:none}
  .cx-top.axh--area .axh-name .axh-n2,.cx-top.axh--area .axh-name em{display:block}
  .cx-top.axh--area .axh-brand,.cx-top.axh--area .axh-name{flex-shrink:0}
}