/* ============================================================
   MOJARU-CLONE — style.css
   Mango Media Digital · Clone Website Lab
   Source of truth: _handoff/DESIGN-SYSTEM.md
   ============================================================ */

/* ============================================================
   0. FONT FACES — self-hosted, subsetted woff2. Thread 2 Rev 5.
   Only three weights exist: Hind Siliguri 700, Noto Sans Bengali
   400 and 600. Hind 500/600 and Noto 500/700 were dropped as dead
   weight — do not reference them anywhere below; the browser would
   synthesise the missing weight, which damages Bengali conjunct
   joins. Each family is split into a Bengali-script subset and a
   Latin subset via unicode-range, so the browser only downloads
   the ranges a given string actually uses.
   ============================================================ */
@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:700;
  font-display:swap;src:url('../assets/fonts/hindsiliguri-700-bengali.woff2') format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC,U+A8F1;}
@font-face{font-family:'Hind Siliguri';font-style:normal;font-weight:700;
  font-display:swap;src:url('../assets/fonts/hindsiliguri-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
  U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Noto Sans Bengali';font-style:normal;font-weight:400;
  font-display:swap;src:url('../assets/fonts/notosansbengali-400-bengali.woff2') format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC,U+A8F1;}
@font-face{font-family:'Noto Sans Bengali';font-style:normal;font-weight:400;
  font-display:swap;src:url('../assets/fonts/notosansbengali-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
  U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Noto Sans Bengali';font-style:normal;font-weight:600;
  font-display:swap;src:url('../assets/fonts/notosansbengali-600-bengali.woff2') format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC,U+A8F1;}
@font-face{font-family:'Noto Sans Bengali';font-style:normal;font-weight:600;
  font-display:swap;src:url('../assets/fonts/notosansbengali-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
  U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

/* ============================================================
   1. PALETTE — 5 values. Do not add a sixth. Derive instead.
   DESIGN-SYSTEM §1
   ============================================================ */
:root {
  --c-purple:      #532D80;  /* primary   — header bg, primary CTA, headline text */
  --c-gold:        #FFCE39;  /* secondary — accent words, circles, login pill */
  --c-purple-lift: #6F39B7;  /* tint      — hover for purple surfaces */
  --c-white:       #FFFFFF;  /* base surface */
  --c-ink:         #374151;  /* body text */

  /* Vendor mark — confined to WhatsApp glyph only, never a UI surface. Not a palette slot. */
  --vendor-whatsapp: #25D366;

  /* Surfaces */
  --surface-base:   var(--c-white);
  /* color-mix() fallback pair: static value first, mix second — an engine that
     can't parse color-mix() keeps line 1 instead of unsetting the property. */
  --surface-tint:   #F8F7FA;
  --surface-tint:   color-mix(in srgb, var(--c-purple)  4%, var(--c-white));
  --surface-brand:  var(--c-purple);

  /* Borders */
  --border-soft:    rgba(83, 45, 128, 0.12);
  --border-soft:    color-mix(in srgb, var(--c-purple) 12%, transparent);
  --border-strong:  rgba(83, 45, 128, 0.28);
  --border-strong:  color-mix(in srgb, var(--c-purple) 28%, transparent);
  --border-input:   rgba(55, 65, 81, 0.16);
  --border-input:   color-mix(in srgb, var(--c-ink)    16%, transparent);

  /* Text */
  --text-primary:   var(--c-ink);
  --text-muted:     #6F7682;
  --text-muted:     color-mix(in srgb, var(--c-ink) 72%, var(--c-white));
  --text-faint:     #91979F;
  --text-faint:     color-mix(in srgb, var(--c-ink) 55%, var(--c-white));
  --text-on-brand:  var(--c-white);
  --text-accent:    var(--c-gold);   /* ONLY on --c-purple */

  /* Interaction tints */
  --tint-purple-06: rgba(83, 45, 128, 0.06);
  --tint-purple-06: color-mix(in srgb, var(--c-purple)  6%, transparent);
  --tint-purple-12: rgba(83, 45, 128, 0.12);
  --tint-purple-12: color-mix(in srgb, var(--c-purple) 12%, transparent);
  --tint-purple-18: rgba(83, 45, 128, 0.18);
  --tint-purple-18: color-mix(in srgb, var(--c-purple) 18%, transparent);
  --disabled-fill:  #BEAFCF;
  --disabled-fill:  color-mix(in srgb, var(--c-purple) 38%, var(--c-white));

  /* Functional colours — OUTSIDE the 5-colour cap. Form validation + inline links only. */
  --fn-error:   #B91C1C;
  --fn-success: #22C55E;
  --fn-link:    var(--c-purple);
}

/* ============================================================
   2. TYPE SYSTEM — DESIGN-SYSTEM §2
   ============================================================ */
:root {
  --font-display: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --font-body:    'Noto Sans Bengali', 'Hind Siliguri', sans-serif;

  /* Fluid display tiers — clamp(min, rem + vw, max). §2.6 */
  --fs-h1:    clamp(2rem,      1.275rem + 3.094vw, 3.75rem);  /* 32 → 60 */
  --fs-h2:    clamp(1.625rem,  1.159rem + 1.989vw, 2.75rem);  /* 26 → 44 */
  --fs-h3:    clamp(1.375rem,  1.064rem + 1.326vw, 2.125rem); /* 22 → 34 */
  --fs-h4:    clamp(1.25rem,   1.043rem + 0.884vw, 1.75rem);  /* 20 → 28 */
  --fs-h5:    clamp(1.125rem,  1.021rem + 0.442vw, 1.375rem); /* 18 → 22 */
  --fs-title: clamp(1.0625rem, 0.985rem + 0.332vw, 1.25rem);  /* 17 → 20 */
  --fs-lead:  clamp(1.0625rem, 1.037rem + 0.111vw, 1.125rem); /* 17 → 18 */

  /* Fixed text tiers — never fluid, never below floor */
  --fs-body:  1rem;      /* 16px — hard floor at every width */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-xs:    0.75rem;   /* 12px */

  --tracking: normal;    /* 0 everywhere — non-negotiable, §2.8 */

  /* Line-heights — mobile-first, generous. §2.5 */
  --lh-h1:    1.46;   --lh-h2:    1.46;   --lh-h3:   1.48;
  --lh-h4:    1.50;   --lh-h5:    1.52;   --lh-title:1.54;
  --lh-lead:  1.62;   --lh-body:  1.66;   --lh-sm:   1.64;   --lh-xs: 1.62;
}

@media (min-width: 1280px) {
  :root {
    --lh-h1:    1.40;   --lh-h2:    1.40;   --lh-h3:   1.42;
    --lh-h4:    1.44;   --lh-h5:    1.46;   --lh-title:1.48;
    --lh-lead:  1.60;   --lh-body:  1.62;   --lh-sm:   1.60;   --lh-xs: 1.60;
  }
}

/* ============================================================
   3. SPACING SCALE — 4px base, 8px working step. DESIGN-SYSTEM §3
   ============================================================ */
:root {
  --sp-1:   4px;   /* hairline — icon nudges only */
  --sp-2:   8px;   /* DOMINANT gap */
  --sp-3:  12px;   /* measured outlier — legacy, do not propagate */
  --sp-4:  16px;   /* container side padding, medium gap */
  --sp-6:  24px;   /* card internal padding */
  --sp-8:  32px;   /* mobile section rhythm */
  --sp-12: 48px;
  --sp-16: 64px;   /* desktop section rhythm */
  --sp-20: 80px;
  --sp-24: 96px;

  /* Layout constants — measured */
  --container-max: 1440px;
  --container-pad: var(--sp-4);   /* 16px → 0 at 1536px */
  --header-h:      70px;          /* MOBILE */
  --section-y:     var(--sp-8);   /* 32px mobile */
}

@media (min-width: 1280px) {
  :root {
    --header-h:  88px;            /* DESKTOP */
    --section-y: var(--sp-16);    /* 64px */
  }
}
@media (min-width: 1536px) { :root { --container-pad: 0px; } }

html { scroll-padding-top: calc(var(--header-h) + var(--sp-4)); }

/* ============================================================
   4. SHARED COMPONENT TOKENS — DESIGN-SYSTEM §4
   ============================================================ */
:root {
  /* Radius — measured, by frequency */
  --r-card:   24px;
  --r-sm:      8px;
  --r-pill:  9999px;
  --r-chrome:  3px;
  --r-circle:  50%;

  /* Elevation */
  --shadow-card:       0 4px 6px rgb(0 0 0 / 0.10);
  --shadow-card-hover: 0 12px 24px rgba(83, 45, 128, 0.22);
  --shadow-card-hover: 0 12px 24px color-mix(in srgb, var(--c-purple) 22%, transparent);
  --shadow-nav:        0 2px 8px rgb(0 0 0 / 0.08);
  --shadow-fab:        0 6px 16px rgb(0 0 0 / 0.18);
  --shadow-fab-hover:  0 10px 24px rgba(83, 45, 128, 0.28);
  --shadow-fab-hover:  0 10px 24px color-mix(in srgb, var(--c-purple) 28%, transparent);

  /* Z-index — one scale, no ad-hoc values */
  --z-base:   1;
  --z-sticky: 50;
  --z-panel:  90;    /* full-page menu — sits UNDER the header */
  --z-header: 100;
  --z-fab:    120;   /* above header and panel */
  --z-modal:  200;

  /* Focus ring — legible on BOTH light and purple surfaces */
  --focus-ring: 0 0 0 6px rgba(83, 45, 128, 0.6);
  --focus-ring: 0 0 0 6px color-mix(in srgb, var(--c-purple) 60%, transparent);

  /* Motion tokens — DESIGN-SYSTEM §6 */
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;
  --dur-reveal: 900ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   5. RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

img, picture, svg { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-base);
  padding-top: var(--header-h);
  overflow-x: hidden;
}

/* ============================================================
   6. BENGALI RENDERING RULES — mandatory. DESIGN-SYSTEM §2.8
   ============================================================ */
html { font-feature-settings: normal; font-variant-ligatures: normal; }

:where(h1,h2,h3,h4,h5,p,li,a,button,label,input,textarea) {
  letter-spacing: normal;      /* NEVER a positive value */
  word-break: normal;          /* NEVER break-all */
  overflow-wrap: break-word;   /* safe */
  hyphens: none;               /* no Bengali hyphenation dictionary exists */
  text-transform: none;        /* NEVER uppercase */
}

:where(h1,h2,h3,h4,h5) {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-purple);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
/* h5 stays on --font-display (Hind Siliguri), which only ships weight 700 as of
   Rev 5's self-hosted subset — DESIGN-SYSTEM §2.7 calls for 600 here, but that
   weight doesn't exist in the loaded font and would be browser-synthesised,
   which damages Bengali conjunct joins. Held at 700, the one real weight, size
   is still the differentiator from h1–h4. Flagged for Thread 2. */
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 700; }

/* ============================================================
   7. FOCUS RING — shared, legible on both light and purple surfaces
   ============================================================ */
:where(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   8. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-modal);
  background: var(--c-purple);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-sm);
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus {
  top: var(--sp-4);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   9. REDUCED MOTION — mandatory. DESIGN-SYSTEM §6
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee { animation-play-state: paused !important; }
}

/* ============================================================
   Stage B–F component styles are appended below this line.
   ============================================================ */

/* ============================================================
   STAGE B.1 — HEADER / NAV — DESIGN-SYSTEM §5.5
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--surface-brand);
  z-index: var(--z-header);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-nav); }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.logo { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.logo-mark { height: 28px; width: auto; }
.logo-wordmark { height: 22px; width: auto; }
@media (min-width: 768px) {
  .logo-mark { height: 32px; }
  .logo-wordmark { height: 24px; }
}

/* Desktop nav group — category dropdown, search, links, language toggle.
   Hidden below 1280px per §7.2: moves into the full-page menu panel instead. */
.header-nav {
  display: none;
  align-items: center;
  gap: var(--sp-6);
  flex: 1;
  justify-content: center;
  min-width: 0;
}
@media (min-width: 1280px) { .header-nav { display: flex; } }

.category-dropdown { position: relative; flex-shrink: 0; }
.category-trigger {
  display: flex; align-items: center; gap: var(--sp-1);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-body); font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.category-trigger:hover { background: rgb(255 255 255 / 0.08); }
.category-trigger .chevron { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-standard); }
.category-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.category-panel {
  position: absolute; top: calc(100% + var(--sp-2)); left: 0;
  min-width: 240px;
  background: var(--surface-base);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  padding: var(--sp-2);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-4px); visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              visibility var(--dur-base);
}
.category-panel.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
.category-item {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-chrome);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.category-item:hover, .category-item:focus-visible { background: var(--tint-purple-06); color: var(--c-purple); }
.category-item--footer {
  border-top: 1px solid var(--border-soft);
  margin-top: var(--sp-1); padding-top: var(--sp-2);
  font-weight: 600; color: var(--c-purple);
}

.header-search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: rgb(255 255 255 / 0.12);
  border-radius: var(--r-pill);
  padding-inline: var(--sp-4);
  height: 40px;
  flex: 0 1 220px;
  min-width: 0;
}
.header-search .search-icon { width: 18px; height: 18px; color: var(--c-white); flex-shrink: 0; }
.header-search input {
  background: transparent; border: none; outline: none;
  color: var(--c-white); font-family: var(--font-body); font-size: var(--fs-sm);
  width: 100%; min-width: 0;
}
.header-search input::placeholder { color: rgb(255 255 255 / 0.7); }

.nav-links { display: flex; align-items: center; gap: var(--sp-6); flex-shrink: 0; }
.nav-links a {
  position: relative; display: inline-block;
  color: var(--c-white); font-family: var(--font-body);
  font-size: var(--fs-body); font-weight: 600;
  padding-block: var(--sp-1);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--c-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav-links a:hover { color: var(--c-gold); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--c-gold); }
.nav-links a:active { transform: translateY(1px); }

.lang-toggle {
  display: flex; align-items: center; gap: var(--sp-1);
  color: var(--c-white); font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600;
  padding: var(--sp-1) var(--sp-2);
  flex-shrink: 0;
}
.lang-toggle .lang-current { color: var(--c-gold); }
.lang-toggle .lang-sep, .lang-toggle .lang-other { opacity: 0.7; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* Primary/gold button geometry shared with future component work — §5.1 / §5.3 */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-gold); color: var(--c-purple);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600; font-size: var(--fs-body);
  transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn-gold:hover { background: color-mix(in srgb, var(--c-gold) 88%, var(--c-white)); transform: translateY(-1px); }
.btn-gold:active { transform: scale(0.97); }
/* Gold-core ring is illegible on a gold fill — this component inverts the shared
   focus ring to a white outline instead. DESIGN-SYSTEM §5.3. */
.btn-gold:focus-visible { outline: 3px solid var(--c-white); outline-offset: 2px; box-shadow: none; }
.btn-compact { padding: var(--sp-3) var(--sp-6); min-height: 44px; }

/* Hamburger — also the panel's close control, morphed in place. §7.5 */
.hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--c-gold);
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: background-color var(--dur-base) var(--ease-standard);
}
@media (min-width: 1280px) { .hamburger { display: none; } }
.hamburger-bars { position: relative; width: 20px; height: 14px; display: block; }
.hamburger-bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--c-purple);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard),
              top var(--dur-base) var(--ease-standard);
}
.hamburger-bars span:nth-child(1) { top: 0; }
.hamburger-bars span:nth-child(2) { top: 6px; }
.hamburger-bars span:nth-child(3) { top: 12px; }
.hamburger.is-open .hamburger-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hamburger.is-open .hamburger-bars span:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ============================================================
   STAGE B.2 — MOBILE MENU PANEL — full-page, DESIGN-SYSTEM §7.5
   ============================================================ */
body.menu-open { overflow: hidden; }

.menu-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  height: calc(100dvh - var(--header-h));
  background: var(--surface-base);
  z-index: var(--z-panel);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft);
}
.menu-panel[hidden] { display: none; }
.menu-panel.is-open { opacity: 1; transform: translateY(0); }
.menu-panel.is-closing { transition-duration: 200ms; }

@media (min-width: 1280px) {
  /* The panel only ever activates below 1280px — belt-and-braces guard
     in case JS state and viewport disagree mid-resize. */
  .menu-panel { display: none !important; }
}

.menu-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.menu-item-link, .menu-item-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 64px;
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding-inline: var(--sp-4);
  font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--c-ink);
  opacity: 0; transform: translateY(8px);
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.menu-panel.is-open .menu-item-link,
.menu-panel.is-open .menu-item-trigger {
  opacity: 1; transform: translateY(0);
  transition: opacity 200ms var(--ease-out-soft), transform 200ms var(--ease-out-soft),
              background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.menu-item:nth-child(1) .menu-item-link, .menu-item:nth-child(1) .menu-item-trigger { transition-delay: 0ms; }
.menu-item:nth-child(2) .menu-item-link, .menu-item:nth-child(2) .menu-item-trigger { transition-delay: 30ms; }
.menu-item:nth-child(3) .menu-item-link, .menu-item:nth-child(3) .menu-item-trigger { transition-delay: 60ms; }
.menu-item:nth-child(4) .menu-item-link, .menu-item:nth-child(4) .menu-item-trigger { transition-delay: 90ms; }
.menu-item:nth-child(5) .menu-item-link, .menu-item:nth-child(5) .menu-item-trigger { transition-delay: 120ms; }

.menu-item-link:hover, .menu-item-trigger:hover { background: var(--tint-purple-06); border-color: var(--border-strong); }
.menu-item-link:active, .menu-item-trigger:active { transform: scale(0.99); }
.menu-item-link .chevron, .menu-item-trigger .chevron {
  width: 20px; height: 20px; color: var(--c-purple); flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-standard);
}
.menu-item-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.menu-item-link { text-decoration: none; }

.menu-accordion-panel {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-left: var(--sp-4);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-base) var(--ease-standard);
}
.menu-accordion-panel.is-open { max-height: 480px; }
.menu-accordion-panel[hidden] { display: none; }
.menu-accordion-panel li a {
  display: flex; align-items: center; min-height: 48px;
  background: var(--c-white);
  border-radius: var(--r-chrome);
  padding-inline: var(--sp-4);
  /* DESIGN-SYSTEM §7.5 calls for weight 500 here, but Noto Sans Bengali's
     self-hosted subset (Rev 5) only ships 400 and 600 — 500 would be
     browser-synthesised. Held at 400 to keep clear hierarchy against the
     600-weight parent items. Flagged for Thread 2. */
  font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--c-ink);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.menu-accordion-panel li a:hover { background: var(--tint-purple-06); }

.menu-lang-row { cursor: pointer; }

/* ============================================================
   STAGE B.3 — FLOATING ACTION BUTTONS — DESIGN-SYSTEM §5.9
   ============================================================ */
.fab-stack {
  position: fixed;
  /* §5.9 gives the offset as var(--sp-4) but annotates it "24px" — --sp-4 is
     16px in the §3 scale. --sp-6 (24px) matches both the stated comment and
     SPEC §9.5's measured 24px offset, so --sp-6 is used here. Logged in
     BUILD-LOG.md as a resolved DESIGN-SYSTEM token mismatch. */
  right: var(--sp-6);
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse;
  gap: var(--sp-3);
  z-index: var(--z-fab);
}

.fab {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  opacity: 0; transform: scale(0.8);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
@media (min-width: 768px) { .fab { width: 60px; height: 60px; } }

.fab-stack.is-visible .fab {
  opacity: 1; transform: scale(1);
  transition: opacity 400ms var(--ease-spring), transform 400ms var(--ease-spring);
}
.fab-stack.is-visible #fab-whatsapp { transition-delay: 0ms; }
.fab-stack.is-visible #fab-chat { transition-delay: 80ms; }

.fab-whatsapp {
  background: var(--c-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-fab);
}
.fab-whatsapp svg { width: 28px; height: 28px; }
.fab-whatsapp:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-fab-hover); }
.fab-whatsapp:active { transform: translateY(0) scale(0.94); transition-duration: var(--dur-fast); }

.fab-chat {
  background: var(--c-purple);
  border-radius: var(--r-circle);
  box-shadow: var(--shadow-fab);
  position: relative;
}
.fab-chat-icon, .fab-close-icon { width: 26px; height: 26px; }
.fab-chat:hover { background: var(--c-purple-lift); transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-fab-hover); }
.fab-chat:active { transform: translateY(0) scale(0.94); transition-duration: var(--dur-fast); }
.fab-chat[aria-expanded="true"] { background: var(--c-purple-lift); }

.fab-badge {
  position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fn-success);
  border: 2px solid var(--c-white);
}
.fab-chat[aria-expanded="true"] .fab-badge { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fab { opacity: 1; transform: none; }
  .fab-whatsapp:hover, .fab-chat:hover { transform: none; }
}

/* ============================================================
   STAGE B.4 — SELF-BUILT CHAT PANEL — D-008, no third-party widget
   ============================================================ */
.chat-panel {
  position: fixed;
  right: var(--sp-6);
  bottom: calc(56px + 60px + var(--sp-3) + var(--sp-6) + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 32px));
  max-height: 60vh;
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card-hover);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }

.chat-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-purple); color: var(--c-white);
  padding: var(--sp-4);
  flex-shrink: 0;
}
.chat-panel-title { font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--c-white); }
.chat-panel-close {
  color: var(--c-white); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-panel-close svg { width: 18px; height: 18px; }

.chat-panel-body { padding: var(--sp-4); flex: 1; overflow-y: auto; }
.chat-bubble {
  background: var(--surface-tint);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-sm);
  max-width: 85%;
  color: var(--c-ink);
}

.chat-panel-form {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.chat-panel-form input {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--border-input); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body); font-size: 16px;
}
.chat-panel-form input:focus {
  border-color: var(--c-purple); outline: none;
  box-shadow: 0 0 0 3px var(--tint-purple-18);
}
.chat-send {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.chat-send:hover { background: var(--c-purple-lift); }
.chat-send svg { width: 16px; height: 16px; }

/* ============================================================
   STAGE C.0 — SHARED BUTTONS — DESIGN-SYSTEM §5.1 / §5.2
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-8);
  min-height: 60px;
  background: var(--c-purple); color: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: background-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.btn-primary:hover { background: var(--c-purple-lift); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.btn-primary:active { background: var(--c-purple); transform: translateY(0) scale(0.98); box-shadow: none; transition-duration: var(--dur-fast); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
  background: var(--disabled-fill); color: var(--c-white); box-shadow: none; transform: none; cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-8);
  min-height: 60px;
  background: transparent; color: var(--c-purple);
  border: 1.5px solid var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.btn-secondary svg { width: 20px; height: 20px; color: var(--c-purple); flex-shrink: 0; }
.btn-secondary:hover { background: var(--tint-purple-06); border-color: var(--c-purple); transform: translateY(-2px); }
.btn-secondary:active { background: var(--tint-purple-12); transform: translateY(0) scale(0.98); }

.btn-link {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-purple);
  padding-block: var(--sp-1);
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-standard);
}
.btn-link:hover { color: var(--c-purple-lift); text-decoration: underline; }

/* ============================================================
   STAGE C.1 — HERO — DESIGN-SYSTEM §0 (Z-pattern), §7.2
   ============================================================ */
.hero { padding-block: var(--section-y); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: var(--sp-12); }
}

.hero-copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.hero-heading { margin: 0; }
.hero-heading .line { display: block; }
/* Accent word: gold ONLY on a purple field (palette hard rule #1). The hero
   sits on the default white/light surface, so the accent uses --c-purple-lift
   instead — DESIGN-SYSTEM §2.7. */
.hero-heading .accent { color: var(--c-purple-lift); }

.hero-subheading {
  font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 600;
  line-height: var(--lh-lead); color: var(--c-ink);
  max-width: 46ch;
}

.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.hero-trust { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); }

.hero-visual { position: relative; }

/* Decorative circles — pure ornament, hidden below the menu breakpoint per §7.2 */
.hero-circle { display: none; }
@media (min-width: 1280px) {
  .hero-circle {
    display: block; position: absolute; border-radius: 50%;
    background: var(--c-gold); opacity: 0.9; z-index: 0;
  }
  .hero-circle--a { width: 70px; height: 70px; top: -24px; right: 36px; }
  .hero-circle--b { width: 40px; height: 40px; bottom: 16px; left: -12px; }
}

/* Photo cluster — one centred card <1280px, three overlapping ≥1280px. §7.2:
   "Do not shrink three overlapping cards into 375px." */
.hero-photo-cluster { position: relative; }
.hero-photo-card {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
  width: 100%;
}
.hero-photo-card svg { width: 100%; height: 100%; display: block; }
.hero-photo-card--2, .hero-photo-card--3 { display: none; }

@media (min-width: 1280px) {
  .hero-photo-cluster { height: 380px; }
  .hero-photo-card { position: absolute; aspect-ratio: auto; }
  .hero-photo-card--1 { top: 0; left: 18%; width: 230px; height: 260px; z-index: 3; }
  .hero-photo-card--2 { display: block; top: 70px; left: 0; width: 180px; height: 220px; z-index: 2; }
  .hero-photo-card--3 { display: block; top: 110px; right: 0; width: 180px; height: 220px; z-index: 1; }
}

.hero-badge { display: none; }
@media (min-width: 1280px) {
  .hero-badge {
    display: flex; align-items: center;
    position: absolute;
    background: var(--c-white);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-purple);
    box-shadow: var(--shadow-card);
    z-index: 4;
    white-space: nowrap;
  }
  .hero-badge--a { top: 6px; left: -24px; }
  .hero-badge--b { bottom: 44px; right: -16px; }
  .hero-badge--c { bottom: -12px; left: 28%; }
}

/* ============================================================
   STAGE C.2 — ALL COURSES — DESIGN-SYSTEM §2, §5.7, §5.8
   ============================================================ */
.all-courses {
  background: var(--c-purple);
  padding-block: var(--section-y);
}
.all-courses h2 { color: var(--c-white); }
.all-courses-sub {
  font-family: var(--font-body); font-size: var(--fs-lead);
  color: rgb(255 255 255 / 0.85);
  margin-top: var(--sp-2);
}
/* §5.2: secondary button inverts on a purple field — this section IS one below 1280px */
.all-courses .btn-secondary { border-color: var(--c-white); color: var(--c-white); }
.all-courses .btn-secondary svg { color: var(--c-white); }
.all-courses .btn-secondary:hover { background: rgb(255 255 255 / 0.1); border-color: var(--c-white); }
.all-courses .carousel-progress { background: rgb(255 255 255 / 0.25); }
.all-courses .carousel-progress-fill { background: var(--c-white); }

@media (min-width: 1280px) {
  .all-courses { background: transparent; }
  .all-courses h2 { color: var(--c-purple); }
  .all-courses-sub { color: var(--text-muted); }
  .all-courses .btn-secondary { border-color: var(--border-strong); color: var(--c-purple); }
  .all-courses .btn-secondary svg { color: var(--c-purple); }
  .all-courses .btn-secondary:hover { background: var(--tint-purple-06); border-color: var(--c-purple); }
  .all-courses .carousel-progress { background: var(--border-soft); }
  .all-courses .carousel-progress-fill { background: var(--c-purple); }
}

/* Category pills — §5.7 */
.category-pills {
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: var(--sp-6);
  scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--r-pill);
  padding: 10px 20px; min-height: 40px;
  background: var(--c-white); border: 1px solid var(--border-soft); color: var(--c-ink);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.pill:hover { background: var(--tint-purple-06); border-color: var(--border-strong); transform: translateY(-1px); }
.pill:active { transform: scale(0.96); }
.pill[aria-selected="true"] { background: var(--c-purple); color: var(--c-white); border-color: transparent; }
.pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--tint-purple-12); color: var(--c-purple);
  font-family: var(--font-body); font-size: var(--fs-xs);
  padding: 2px 8px;
}
.pill[aria-selected="true"] .pill-count { background: var(--c-gold); color: var(--c-purple); }

/* Carousel — hand-rolled scroll-snap, Swiper explicitly rejected. §5.8 */
.carousel { position: relative; margin-top: var(--sp-4); }
.carousel-track {
  display: flex; gap: var(--sp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--container-pad);
  padding-bottom: var(--sp-2);
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-controls { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); }
.carousel-arrow {
  width: 48px; height: 48px; border-radius: var(--r-circle);
  background: var(--c-white); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-purple); box-shadow: var(--shadow-card);
  flex-shrink: 0;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow:hover { background: var(--tint-purple-06); border-color: var(--border-strong); transform: scale(1.06); }
.carousel-arrow:active { transform: scale(0.94); }
.carousel-arrow:disabled { opacity: 0.35; pointer-events: none; }
/* Hidden below 768px — touch users swipe; 48px buttons steal fold space. §5.8 */
@media (max-width: 767px) { .carousel-arrow { display: none; } }

.carousel-progress { flex: 1; height: 4px; background: var(--border-soft); border-radius: var(--r-pill); overflow: hidden; }
.carousel-progress-fill { height: 100%; background: var(--c-purple); width: 0%; transition: width var(--dur-fast) linear; }

/* Course card — §5.4 */
.course-card {
  scroll-snap-align: start; flex: 0 0 auto;
  width: clamp(260px, 78vw, 320px);
  background: var(--c-white);
  border-radius: var(--r-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--border-strong); }
.course-card:hover .course-card-media svg { transform: scale(1.04); }
.course-card:active { transform: translateY(-1px) scale(0.995); }
.course-card:focus-within { box-shadow: var(--shadow-card-hover), var(--focus-ring); }

.course-card-media { position: relative; aspect-ratio: 280 / 180; overflow: hidden; }
.course-card-media svg { width: 100%; height: 100%; display: block; transition: transform var(--dur-slow) var(--ease-standard); }

.badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
}
/* Functional colours are quarantined off cards (§1) — badges stay inside the
   5-colour system. "আসন প্রায় শেষ" reads as urgency through its copy, not a
   borrowed red, matching the disabled/sold-out exception's spirit without
   reproducing its exact --fn-error treatment on an actively purchasable card. */
.badge-live { background: var(--c-purple); color: var(--c-white); }
.badge-recorded { background: var(--c-purple-lift); color: var(--c-white); }
.badge-free, .badge-urgency { background: var(--c-gold); color: var(--c-purple); }

.course-card-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.course-card-title {
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700;
  line-height: var(--lh-title); color: var(--c-ink);
}
.course-card-meta { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); }
.course-card-rating { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.course-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.course-card-price { display: flex; align-items: baseline; gap: var(--sp-2); font-family: var(--font-body); }
.price-now { font-weight: 700; color: var(--c-purple); font-size: var(--fs-lead); }
.price-was { font-size: var(--fs-sm); color: var(--text-faint); text-decoration: line-through; }

.all-courses-cta { display: flex; justify-content: center; margin-top: var(--sp-8); }

/* ============================================================
   STAGE C.3 — GOAL BANNER — DESIGN-SYSTEM §3 (spacing), §5.1/§5.2
   ============================================================ */
.goal-banner { padding-block: var(--section-y); }
.goal-banner-inner {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-8);
  background: var(--surface-tint);
  border-radius: var(--r-card);
  padding: var(--sp-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .goal-banner-inner { grid-template-columns: 1.2fr 1fr; padding: var(--sp-12); }
}
.goal-banner-copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.goal-banner-sub { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-ink); }
.goal-banner-body { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); }
.goal-banner-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2); }
.goal-banner-visual svg { width: 100%; height: auto; }
@media (max-width: 1023px) { .goal-banner-visual { display: none; } }