/* =====================================================================
   BayRen Education — Design System & Components
   Brand: Navy #0B2A49  •  Gold #D8B04C
   Pure CSS, no frameworks. Mobile-first, responsive, accessible.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --navy: #0B2A49;
  --navy-700: #0d3157;
  --navy-800: #08203a;
  --navy-900: #061626;
  --gold: #D8B04C;
  --gold-600: #c6a03c;
  --gold-300: #ecd79a;
  --gold-50: #faf4e1;

  /* Neutrals */
  --ink: #1c2733;
  --body: #41505f;
  --muted: #6b7888;
  --line: #e7ebf1;
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --white: #ffffff;
  --wa: #25d366;
  --wa-600: #1fb959;

  /* Youthful secondary accents — decorative ONLY (icon chips). Navy + gold stay
     the brand anchors: never used on text, buttons or the logo. */
  --accent-coral: #F26B5B;
  --accent-teal: #2FB4A6;
  --accent-sky: #3E8EDE;
  --accent-violet: #7C6BE0;
  --accent-green: #46C08B;

  /* Type — elegant serif display (Cormorant) paired with Inter for body/UI */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Bengali: use the reader's installed Bangla font (no webfont download = fast). */
  --font-bangla: 'Noto Sans Bengali', 'Hind Siliguri', 'Kohinoor Bangla', 'Nikosh', 'SolaimanLipi', 'Nirmala UI', var(--font-sans);

  /* Shape & motion */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(11, 42, 73, .06);
  --shadow: 0 14px 38px rgba(11, 42, 73, .12);
  --shadow-lg: 0 26px 60px rgba(11, 42, 73, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --container: 1180px;
  /* distance from the viewport edge to the 1180px content frame — lets a
     full-bleed section (the hero) line its text up with the header + sections. */
  --edge: max(22px, calc((100vw - var(--container)) / 2 + 22px));
  --header-h: 108px;
  --apps-h: 46px; /* practice-apps bar height (set to 0 when the bar is hidden) */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; font-weight: 400; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: .002em; }
h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: .004em; line-height: 1.06; }
h2.section-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.2rem); letter-spacing: .004em; line-height: 1.08; }
h3 { font-family: var(--font-sans); font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
p { color: var(--body); }
.lead { font-size: 1.16rem; color: var(--body); }

/* Serif eyebrow above section titles */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  color: var(--gold-600);
  letter-spacing: .16em;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #cdd8e6; }
.section--navy .section-title { color: #fff; }
.section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-head .section-title::after {
  content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-300)); margin: 16px auto 0;
}
.section-head .eyebrow { display: block; margin-bottom: 6px; }
.section-head p { margin-top: 14px; color: var(--muted); }
.text-center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--navy);
  display: inline-flex; align-items: center; gap: 10px;
  padding: calc(14px * var(--btn-scale, 1)) calc(26px * var(--btn-scale, 1)); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 90%, #fff) 0%, var(--btn-bg) 100%);
  font-weight: 700; font-size: calc(.98rem * var(--btn-scale, 1)); letter-spacing: .01em;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  will-change: transform;
}
.btn svg { width: 20px; height: 20px; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: calc(17px * var(--btn-scale, 1)) calc(34px * var(--btn-scale, 1)); font-size: calc(1.05rem * var(--btn-scale, 1)); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn--outline:hover { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--navy); }
.btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; }
.btn--wa:hover { --btn-bg: var(--wa-600); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(11,42,73,.08); border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 18px; }

/* Brand lockup — uses the real BayRen logo SVG */
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: var(--brand-logo-h, 56px); width: auto; display: block; transition: transform .3s var(--ease); }
.brand:hover .brand-logo { transform: translateY(-1px); }
.brand-logo--footer { height: var(--brand-logo-footer-h, 72px); }

/* Nav links */
.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-link {
  position: relative; padding: 10px 14px; border-radius: 8px;
  color: var(--navy); font-weight: 600; font-size: .98rem;
  transition: color .2s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 0; height: 3px; border-radius: 3px; background: var(--gold);
  transition: width .28s var(--ease);
}
.nav-link:hover { color: var(--gold-600); }
.nav-link:hover::after { width: 24px; }
.nav-link.active { color: var(--navy); }
.nav-link.active::after { width: 24px; }
/* active accent tab (like the reference) */
.nav-link.active::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px;
  background: var(--gold); border-radius: 0 0 4px 4px;
}

.nav-cta { display: flex; align-items: center; gap: 10px; }

/* Hamburger */
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 10px; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 2.5px; border-radius: 3px; background: var(--navy);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { position: absolute; transform: translateY(-8px); }
.nav-toggle span::after { position: absolute; transform: translateY(8px); }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: rotate(45deg); }
.nav-toggle.open span::after { transform: rotate(-45deg); }

/* ---------- Practice-apps bar (second header row) ---------- */
.apps-bar {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-800) 100%);
  border-bottom: 2px solid var(--gold);
}
.apps-bar-inner { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.apps-label {
  flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-300);
}
/* Wrap the pills onto a second row instead of hiding the last ones past a
   scrollable (and scrollbar-hidden) edge, so every practice app is always
   visible — especially on phones. site.js keeps --apps-h in step with the bar's
   real height, so the fixed header never covers a wrapped row. */
.apps-list {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; min-width: 0;
}
.app-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  color: #d7e2ef; font-weight: 600; font-size: .875rem; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.app-link svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.app-link:hover { background: rgba(255,255,255,.1); color: #fff; }

/* push content below fixed header (nav row + apps bar) */
main { padding-top: calc(var(--header-h) + var(--apps-h, 46px)); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--bg); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -8%; top: -14%; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; max-width: 60vw;
  background: radial-gradient(circle, rgba(216,176,76,.12), transparent 66%);
}
/* The logo panel is deliberately the narrower column — it's a backdrop for the
   mark, not a second content column, and at 1fr it read as an oversized block
   beside the headline. */
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: stretch; }
.hero-media { position: relative; min-height: var(--hero-min-h, 540px); background: var(--hero-bg, var(--bg-soft)); }
/* soft backdrop behind the hero image: gold glow + faint dot grid (sits under the image) */
.hero-media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(440px 440px at 50% 44%, rgba(216,176,76,.16), transparent 70%),
    radial-gradient(rgba(11,42,73,.06) 1px, transparent 1.4px);
  background-size: auto, 22px 22px;
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 33% center; box-sizing: border-box; }
/* Right padding = the content-frame gutter, so the headline, buttons and copy
   line up with the header's right edge and every section below (the old fixed
   70px let the text spill wider than the rest of the page). */
.hero-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 56px) var(--edge) clamp(30px, 4vw, 56px) clamp(26px, 4vw, 60px); }
.hero-body .eyebrow { display: block; margin-bottom: 10px; }
.hero-body h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); color: var(--navy); }
.hero-body h1 .hl { color: var(--gold-600); font-style: italic; }
.hero-body .lead { margin: 16px 0 26px; max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* ---------- Stats band (navy social-proof strip under the hero) ---------- */
.stat-band { position: relative; padding: clamp(30px, 4.5vw, 52px) 0; }
/* subtle swoosh flowing the white hero down into the navy band */
.stat-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 36px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath fill='%230B2A49' d='M0,36 L0,16 C300,0 560,2 720,14 C900,27 1160,30 1440,10 L1440,36 Z'/%3E%3C/svg%3E") center bottom / 100% 36px no-repeat;
}
.stat-band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 16px; }
.stat-band .stat { text-align: center; position: relative; padding: 4px 10px; }
.stat-band .stat::before {
  content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 12px; opacity: .9;
  background: center/contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd79a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.1 8.6 22 9.3 17 14.1 18.2 21 12 17.6 5.8 21 7 14.1 2 9.3 8.9 8.6'/%3E%3C/svg%3E");
}
.stat-band .stat:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd79a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5Z'/%3E%3Cpath d='M6 12.5V17c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5'/%3E%3C/svg%3E"); }
.stat-band .stat:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd79a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.stat-band .stat:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd79a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E"); }
.stat-band .stat b { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 4vw, 3.1rem); color: #fff; display: block; line-height: 1; }
.stat-band .stat span { display: block; margin-top: 7px; color: var(--gold-300); font-size: .92rem; letter-spacing: .01em; }

/* ---------- Feature grid ("What we offer") ---------- */
.grid { display: grid; gap: 28px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.feature {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature::before {
  content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--gold);
  opacity: 0; transform: scaleX(.4); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.feature:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.feature:hover::before { opacity: 1; transform: scaleX(1); }
.feature .ic {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px;
  display: grid; place-items: center; background: var(--gold-50); color: var(--gold-600);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.feature:hover .ic { transform: rotate(-6deg) scale(1.08); background: var(--navy); color: var(--gold); }
.feature .ic svg { width: 32px; height: 32px; }
.feature h3 { margin-bottom: 8px; font-size: 1.12rem; }
.feature p { font-size: .96rem; color: var(--muted); }
/* Youthful per-card icon colour (decorative chips only; text/logo untouched) */
.feature .ic { background: var(--chip-bg, var(--gold-50)); color: var(--chip-fg, var(--gold-600)); }
.feature:hover .ic { background: var(--chip-fg, var(--navy)); color: #fff; }
.feature:nth-child(1) { --chip-fg: var(--accent-coral);  --chip-bg: color-mix(in srgb, var(--accent-coral) 14%, #fff); }
.feature:nth-child(2) { --chip-fg: var(--accent-teal);   --chip-bg: color-mix(in srgb, var(--accent-teal) 14%, #fff); }
.feature:nth-child(3) { --chip-fg: var(--accent-sky);    --chip-bg: color-mix(in srgb, var(--accent-sky) 14%, #fff); }
.feature:nth-child(4) { --chip-fg: var(--accent-violet); --chip-bg: color-mix(in srgb, var(--accent-violet) 14%, #fff); }

/* ---------- Practice-zone cards (links to the practice web apps) ---------- */
.app-card {
  position: relative; overflow: hidden; display: block;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.app-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold-300));
  opacity: 0; transition: opacity .3s var(--ease);
}
.app-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.app-card:hover::before { opacity: 1; }
.app-card .ic {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gold-50); color: var(--gold-600); margin-bottom: 16px;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.app-card:hover .ic { background: var(--navy); color: var(--gold); transform: scale(1.06); }
.app-card .ic svg { width: 26px; height: 26px; }
.app-card h3 { font-size: 1.14rem; display: flex; align-items: center; gap: 8px; }
.app-card h3 .ext { width: 15px; height: 15px; color: var(--muted); opacity: 0; transform: translate(-4px, 4px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.app-card:hover h3 .ext { opacity: 1; transform: none; }
.app-card p { font-size: .95rem; color: var(--muted); margin-top: 7px; }
.app-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: .9rem; color: var(--gold-600); }
.app-open svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.app-card:hover .app-open svg { transform: translateX(4px); }
/* Youthful per-card icon colour (decorative chips only) */
.app-card .ic { background: var(--chip-bg, var(--gold-50)); color: var(--chip-fg, var(--gold-600)); }
.app-card:hover .ic { background: var(--chip-fg, var(--navy)); color: #fff; }
.app-card:nth-child(1) { --chip-fg: var(--accent-coral);  --chip-bg: color-mix(in srgb, var(--accent-coral) 14%, #fff); }
.app-card:nth-child(2) { --chip-fg: var(--accent-teal);   --chip-bg: color-mix(in srgb, var(--accent-teal) 14%, #fff); }
.app-card:nth-child(3) { --chip-fg: var(--accent-sky);    --chip-bg: color-mix(in srgb, var(--accent-sky) 14%, #fff); }
.app-card:nth-child(4) { --chip-fg: var(--accent-violet); --chip-bg: color-mix(in srgb, var(--accent-violet) 14%, #fff); }
.app-card:nth-child(5) { --chip-fg: var(--accent-green);  --chip-bg: color-mix(in srgb, var(--accent-green) 14%, #fff); }
.app-card:nth-child(6) { --chip-fg: var(--gold-600);      --chip-bg: var(--gold-50); }

/* ---------- Course cards ---------- */
.course-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.course-top { position: relative; padding: 26px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-800) 100%); color: #fff; }
.course-top .ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: rgba(216,176,76,.18); color: var(--gold); margin-bottom: 16px; }
.course-top .ic svg { width: 28px; height: 28px; }
.course-top h3 { color: #fff; font-size: 1.25rem; }
.course-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { font-size: .76rem; font-weight: 600; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--gold-300); }
.course-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.course-body p { font-size: .97rem; }
.course-points { display: flex; flex-direction: column; gap: 9px; }
.course-points li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--body); }
.course-points li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a03c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.course-body .btn { margin-top: auto; }

/* ---------- Coach cards ---------- */
.coach-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.coach-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.coach-photo { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px; overflow: hidden; border: 4px solid var(--gold-50); box-shadow: var(--shadow-sm); position: relative; }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; color: #fff; }
.coach-card h3 { font-size: 1.18rem; }
.coach-role { color: var(--gold-600); font-weight: 600; font-size: .92rem; margin-top: 2px; }
.coach-card p { font-size: .94rem; color: var(--muted); margin-top: 12px; }
.coach-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 16px; }
.coach-tags .chip { background: var(--gold-50); color: var(--gold-600); }

/* ---------- Testimonials carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 2px 8px;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.testimonial { scroll-snap-align: start; }
.bubble {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 30px; box-shadow: var(--shadow-sm); position: relative;
}
.bubble::after { content: ""; position: absolute; left: 40px; bottom: -13px; width: 26px; height: 26px; background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.bubble .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; }
.bubble p { color: var(--ink); font-size: 1.02rem; }
.t-person { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-left: 6px; }
.t-person .pic { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--gold-50); }
.t-person .pic img { width: 100%; height: 100%; object-fit: cover; }
.t-person b { color: var(--navy); display: block; font-size: .98rem; }
.t-person span { color: var(--muted); font-size: .86rem; }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.carousel-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); color: var(--navy); box-shadow: var(--shadow-sm); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.carousel-btn:hover { background: var(--navy); color: var(--gold); transform: translateY(-2px); }
.carousel-dots { display: flex; gap: 8px; align-items: center; }
.carousel-dots button { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: all .25s var(--ease); }
.carousel-dots button.active { background: var(--gold); width: 26px; border-radius: 6px; }

/* ---------- Watch & social section ---------- */
.video-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.video-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #11365d, var(--navy-900)); box-shadow: var(--shadow-lg); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.08);
}
.video-thumb .rays { position: absolute; inset: 0; opacity: .25; background:
  radial-gradient(120px 120px at 50% 70%, rgba(216,176,76,.6), transparent 70%); }
.play-btn { width: 86px; height: 86px; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(216,176,76,.45); transition: transform .25s var(--ease); position: relative; z-index: 1; }
.video-thumb:hover .play-btn { transform: scale(1.08); }
.play-btn svg { width: 34px; height: 34px; margin-left: 4px; }
.video-cap { position: absolute; left: 22px; bottom: 18px; color: #fff; font-weight: 600; font-size: .9rem; z-index: 1; }
.video-copy .eyebrow { display: block; margin-bottom: 6px; }
.video-copy h2 { color: #fff; }
.section--navy .video-copy p { color: #aebed1; margin: 16px 0 26px; }

.social-row { display: flex; flex-wrap: wrap; gap: 14px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; font-weight: 600; font-size: .92rem;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.social-btn svg { width: 20px; height: 20px; }
.social-btn:hover { transform: translateY(-3px); background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-800) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 60px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 360px; height: 360px; background: radial-gradient(circle, rgba(216,176,76,.5), transparent 65%); }
.cta-band::after { content: ""; position: absolute; left: -8%; top: -55%; width: 300px; height: 300px; pointer-events: none; background: radial-gradient(circle, rgba(216,176,76,.22), transparent 65%); }
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: #c2cfde; max-width: 52ch; margin: 14px auto 26px; position: relative; }
.cta-band .btn { position: relative; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #9fb0c4; padding: 64px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .9fr 1fr .9fr 1.2fr; gap: 32px; }
.footer-motto { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.18rem; color: var(--gold-300); margin-top: 16px; }
.footer-brand p { color: #8ba0b7; margin-top: 10px; font-size: .95rem; max-width: 34ch; }
.footer-brand .brand-logo--footer { height: var(--brand-logo-footer-h, 72px); }
.footer-col h4 { color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: inline-block; padding: 5px 0; color: #9fb0c4; transition: color .2s var(--ease), transform .2s var(--ease); }
.footer-col a:hover { color: var(--gold); transform: translateX(3px); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: .95rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #fff; transition: background .25s var(--ease), transform .25s var(--ease); }
.footer-social a svg { width: 19px; height: 19px; }
.footer-social a:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .88rem; color: #7c91a8; }
.footer-bottom a:hover { color: var(--gold); }

/* ---------- Floating buttons ---------- */
.fab-wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 28px rgba(37,211,102,.45);
  transition: transform .25s var(--ease);
}
.fab-wa svg { width: 32px; height: 32px; }
.fab-wa:hover { transform: scale(1.1); }
.fab-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

.to-top {
  position: fixed; right: 24px; bottom: 92px; z-index: 89;
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--gold);
  display: grid; place-items: center; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--navy-700); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-800) 100%); color: #fff; padding: clamp(54px, 8vw, 96px) 0; text-align: center; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; left: 50%; top: -48%; transform: translateX(-50%);
  width: 900px; height: 900px; max-width: 130vw; pointer-events: none;
  background:
    repeating-conic-gradient(from 90deg at 50% 58%, rgba(236,215,154,.06) 0deg 3.5deg, transparent 3.5deg 11deg),
    radial-gradient(circle at 50% 56%, rgba(216,176,76,.22), transparent 58%);
  -webkit-mask: radial-gradient(circle at 50% 56%, #000 0%, transparent 62%);
  mask: radial-gradient(circle at 50% 56%, #000 0%, transparent 62%);
}
.page-hero .eyebrow { color: var(--gold-300); position: relative; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 6px; position: relative; }
.page-hero p { color: #b9c7d8; max-width: 60ch; margin: 16px auto 0; position: relative; }
.breadcrumb { position: relative; margin-top: 18px; font-size: .9rem; color: #91a5bd; }
.breadcrumb a:hover { color: var(--gold); }

/* ---------- Prose (About / Privacy) ---------- */
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-family: var(--font-sans); font-weight: 700; color: var(--navy); font-size: 1.5rem; margin: 38px 0 12px; }
.prose h3 { margin: 26px 0 8px; }
.prose p { margin-bottom: 14px; }
.prose ul.bullets { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.prose ul.bullets li { position: relative; padding-left: 26px; }
.prose ul.bullets li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.value-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 10px; }
.value { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.value .ic { width: 50px; height: 50px; border-radius: 12px; background: var(--gold-50); color: var(--gold-600); display: grid; place-items: center; margin-bottom: 14px; }
.value .ic svg { width: 26px; height: 26px; }
.value h3 { font-size: 1.08rem; }
.value p { font-size: .94rem; color: var(--muted); margin-top: 6px; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

/* ---------- Mobile nav panel ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .apps-bar-inner { gap: 10px; padding-top: 5px; padding-bottom: 5px; }
  .apps-label { display: none; }
  .nav-menu {
    position: fixed; inset: calc(var(--header-h) + var(--apps-h, 46px)) 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 2px; background: #fff; padding: 14px 18px 22px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); transform: translateY(-130%); transition: transform .35s var(--ease), visibility .35s;
    z-index: -1; visibility: hidden;
  }
  .nav-menu.open { transform: translateY(0); visibility: visible; }
  .nav-link { padding: 14px 12px; border-radius: 10px; }
  .nav-link::after, .nav-link.active::before { display: none; }
  .nav-link.active { background: var(--gold-50); color: var(--gold-600); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .carousel-track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { min-height: 300px; order: -1; }
  .video-grid { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .eyebrow { font-size: .78rem; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .carousel-track { grid-auto-columns: 88%; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .brand-logo { height: 64px; }
  /* Collapse the header WhatsApp button to an icon to save space */
  .nav-cta .btn .cta-label { display: none; }
  .nav-cta .btn { padding: 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .fab-wa::after { display: none; }
}

/* ---------- Hero service pillars (echo the cover's three services) ---------- */
.hero-pillars { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 30px; }
.hero-pillars span {
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--navy);
  background: var(--gold-50); border: 1px solid var(--gold-300);
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}

/* ---------- IELTS Master Course (flagship) ---------- */
.mc-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: stretch; }
.mc-card { border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.mc-card--primary { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold); }

.mc-price { display: flex; flex-direction: column; gap: 2px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed var(--line); }
.mc-price-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.mc-price-value { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1; color: var(--navy); }
.mc-price-sub { font-size: .92rem; color: var(--body); margin-top: 6px; }

.mc-facts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.mc-facts li { position: relative; padding-left: 32px; color: var(--body); line-height: 1.45; }
.mc-facts li b { color: var(--navy); }
.mc-facts li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 999px;
  background: var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a03c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  border: 1px solid var(--gold-300);
}
.mc-offline { margin: 16px 0 0; font-size: .92rem; color: var(--muted); text-align: center; }
.mc-offline a { color: var(--navy); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--gold-300); }
.mc-offline a:hover { color: var(--gold-600); }

.mc-card--bangla { background: var(--navy); color: #eaf1fb; font-family: var(--font-bangla); display: flex; flex-direction: column; }
.mc-bn-title { font-family: var(--font-bangla); color: var(--gold-300); font-size: 1.5rem; margin: 0 0 18px; font-weight: 700; }
.mc-bn-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 13px; }
.mc-bn-list li { position: relative; padding-left: 30px; line-height: 1.5; }
.mc-bn-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 999px;
  background: rgba(216,176,76,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd79a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.mc-bn-note { font-size: .96rem; line-height: 1.65; color: #cdd9ec; margin: 0 0 12px; }
.mc-bn-note b { color: #fff; }
.mc-bn-cta { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); color: var(--gold-300); }

@media (max-width: 820px) {
  .mc-grid { grid-template-columns: 1fr; gap: 18px; }
}