/* ============================================================
   BASE & RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-bn);
  font-size: var(--fs-body);
  color: var(--grey-900);
  background: var(--cloud);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[lang="bn"], .bn { font-family: var(--font-bn); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.bilingual-heading .bn-line { font-family: var(--font-bn); display: block; }
.bilingual-heading .en-line { font-family: var(--font-en); display: block; font-weight: 500; }

/* Visible, accessible focus state everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--cyan-spark);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 768px) { .container { padding: 0 var(--sp-7); } }

.section { padding: var(--section-pad) 0; position: relative; overflow: hidden; }
/* Alternating clean-white / soft-tint section striping (10MS-style rhythm).
   Any section can opt out with .section-plain, or force a tint with .section-tint. */
.section:nth-of-type(even) { background: var(--white); }
.section.section-tint { background: var(--cloud-tint); }
.section.section-plain { background: transparent; }
.section-head { max-width: 680px; margin: 0 0 var(--sp-8); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-bn); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad-brand);
}
.section-head p { color: var(--grey-700); font-size: var(--fs-body-lg); margin-top: var(--sp-3); }

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

.skip-link {
  position: absolute; top: -60px; left: var(--sp-5); z-index: 999;
  background: var(--ink-navy); color: var(--white); padding: 12px 20px;
  border-radius: var(--radius-sm); transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ============================================================
   LIQUID GLASS PRIMITIVES
   ============================================================ */
.glass {
  background: var(--glass-fill-light);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
}
.glass::before {
  /* subtle inner top highlight — the "light refraction" edge */
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 22%);
  pointer-events: none;
}
.glass-dark {
  background: var(--glass-fill-dark);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--glass-shadow-dark);
  color: var(--white);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-bn); font-weight: 600; font-size: var(--fs-body);
  padding: 14px 28px; border-radius: var(--radius-pill); border: none;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out);
  will-change: transform;
  min-height: 48px;
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--grad-brand);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(30, 79, 216, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30, 79, 216, 0.45); }

.btn-glass {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid rgba(255,255,255,0.7);
  color: var(--ink-navy);
  box-shadow: var(--glass-shadow);
}
.btn-glass:hover { transform: translateY(-2px); background: rgba(255,255,255,0.68); box-shadow: 0 10px 30px rgba(16,34,74,0.16); }

.btn-glass-dark {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--white);
}
.btn-glass-dark:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

.btn-ghost {
  background: transparent; color: var(--royal); padding: 14px 20px;
}
.btn-ghost:hover { background: rgba(30,79,216,0.08); }

/* ---- Register CTA — bright red pulsing pill, 10MS-style attention button.
   Used sparingly (one per view) for the highest-priority conversion action. ---- */
.btn-register {
  background: radial-gradient(circle at 35% 30%, #FF5A5F 0%, #D21F2E 55%, #7A0F1A 100%);
  color: var(--white); font-weight: 700;
  box-shadow: 0 0 0 0 rgba(210,31,46,0.55), 0 8px 20px rgba(122,15,26,0.35);
  animation: btn-register-pulse 2.4s ease-out infinite;
}
.btn-register:hover { transform: translateY(-2px); animation-play-state: paused; }
@keyframes btn-register-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(210,31,46,0.55), 0 8px 20px rgba(122,15,26,0.35); }
  70%  { box-shadow: 0 0 0 14px rgba(210,31,46,0), 0 8px 20px rgba(122,15,26,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(210,31,46,0), 0 8px 20px rgba(122,15,26,0.35); }
}
@media (prefers-reduced-motion: reduce) { .btn-register { animation: none; } }

.btn-sm { padding: 10px 20px; font-size: var(--fs-sm); min-height: 40px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-icon {
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
}

/* ---- Cards ---- */
.card {
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hi); }

.card-glass {
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; padding: 6px 14px;
  border-radius: var(--radius-pill); font-family: var(--font-bn);
  letter-spacing: 0.03em;
}
.badge-blue { background: rgba(30,79,216,0.1); color: var(--royal); }
/* badge-cyan is always placed over dark navy surfaces (hero, flagship, course
   thumbnails) — frosted-glass fill + light cyan text so it stays readable there,
   instead of the old dark-teal-on-near-transparent combo that nearly disappeared. */
.badge-cyan { background: rgba(255,255,255,0.16); color: #D8FBFF; border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.badge-live { background: #FFECEC; color: #D93636; }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D93636; animation: pulse-dot 1.6s infinite; }

/* ---- Discount percentage badge — used on course cards + enroll cards ---- */
.badge-discount {
  background: #FFECEC; color: #D93636; font-family: var(--font-data); font-weight: 700;
}

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- Utility ---- */
.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Orange glow accent — a warm counterpoint on light/white sections so
   they never read as flat. Used sparingly, one or two per page. ---- */
.orange-glow {
  position: absolute; border-radius: 50%; filter: blur(60px);
  background: var(--grad-glow-orange);
  pointer-events: none; z-index: 0;
}
.orange-glow.og-lg { width: 560px; height: 560px; }
.orange-glow.og-md { width: 420px; height: 420px; }
.section.has-glow > .container,
.section.has-glow > .section-head { position: relative; z-index: 1; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > * { transition-delay: calc(var(--stagger-i, 0) * 70ms); }

/* ---- Skeleton / loading ---- */
.skeleton {
  background: linear-gradient(90deg, var(--grey-100) 25%, #f0f4fa 37%, var(--grey-100) 63%);
  background-size: 400% 100%;
  animation: skeleton-shine 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Toast ---- */
.toast-stack {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(92vw, 400px);
}
.toast {
  padding: 14px 20px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 600;
  color: var(--white); box-shadow: var(--shadow-card-hi);
  animation: toast-in var(--dur-med) var(--ease-spring);
  display: flex; align-items: center; gap: var(--sp-3);
}
.toast-success { background: #1E9E6B; }
.toast-info { background: var(--ink-navy); }
.toast-error { background: #D93636; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast.leaving { animation: toast-out var(--dur-fast) var(--ease-out) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.96); } }


/* Phase 5: prevent guest registration CTA flash while Firebase auth state is resolving. */
html.auth-checking .btn-register { visibility:hidden !important; pointer-events:none !important; }
html.auth-signed-in .btn-register { display:none !important; }