/* ================================================================
   CorpStack — Main Stylesheet
   Variablz Corporation
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  background-color: var(--color-black);
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Lining figures everywhere: Raleway's default old-style numerals (dipping "3", "5", "9") read
     badly in headings with numbers. A feature setting, so tabular-nums elsewhere still applies. */
  font-feature-settings: "lnum" 1;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select   { font: inherit; }
p, h1, h2, h3, h4, h5, h6        { overflow-wrap: break-word; }

/* Lazy-load fade */
img[loading="lazy"]        { opacity: 0; transition: opacity 0.4s ease; }
img[loading="lazy"].loaded { opacity: 1; }

/* ── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

h1 { font-size: clamp(var(--text-3xl), 5vw,   var(--text-6xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-4xl)); }
h4 { font-size: clamp(var(--text-lg),  2vw,   var(--text-3xl)); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p  { margin-bottom: var(--space-4); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--ease-fast);
}
a:hover { opacity: 0.8; }

strong, b { font-weight: var(--font-weight-bold); }
em, i     { font-style: italic; }

/* ── Layout ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--wide { max-width: var(--max-wide); }

.section     { padding-block: var(--space-24); }
.section--sm { padding-block: var(--space-16); }
.section--lg { padding-block: var(--space-32); }

/* ── Navigation ─────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding: var(--space-3) 0;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
  padding: var(--space-2) 0;
}

/* Logged-in WP admin bar is also fixed to the viewport top with a higher z-index, so it covers
   this header outright rather than pushing it down (the `html { margin-top }` WP adds only moves
   normal-flow content, not other fixed elements). Re-anchor below it using the `.admin-bar` body
   class WP adds automatically, at the same 782px breakpoint WP's own admin bar CSS switches on. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  /* Same fix as #read-progress above — WP core makes #wpadminbar position:absolute (not
     fixed) at this width, so it scrolls away instead of permanently occupying 46px; offsetting
     our own fixed header to match leaves a dead gap above it once the page scrolls at all. */
  body.admin-bar .site-header { top: 0; }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.nav-logo img   { height: 44px; width: auto; }
.nav-logo-text  { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); }

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--space-1);
}
.nav-menu > li > a {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  transition: background 0.18s, color 0.18s;
  text-decoration: none;
}
.nav-menu > li > a:hover {
  background: var(--color-primary-10);
  color: var(--color-primary);
  opacity: 1;
}
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-page-ancestor > a {
  background: var(--color-primary-10);
  color: var(--color-primary);
  font-weight: 600;
}

/* Dropdowns (group labels render as buttons — inc/setup.php; opened by assets/js/main.js) */
.nav-menu > li.menu-item-has-children { position: relative; display: flex; align-items: center; }
.nav-menu__parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.nav-menu__subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text);
  cursor: pointer;
}
.nav-menu__chevron { flex-shrink: 0; transition: transform 0.18s ease; }
.nav-menu > li.is-open .nav-menu__chevron { transform: rotate(180deg); }
.nav-menu__parent:hover,
.nav-menu > li.is-open > .nav-menu__parent,
.nav-menu > li.current-menu-ancestor > .nav-menu__parent {
  background: var(--color-primary-10);
  color: var(--color-primary);
}
.nav-menu > li.current-menu-ancestor > .nav-menu__parent { font-weight: 600; }
.nav-menu__parent:focus-visible,
.nav-menu__subtoggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  min-width: 220px;
  margin: 0;
  padding: 14px 8px 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
/* The card is drawn by ::before so the 6px gap above it still counts as hover area. */
.nav-menu .sub-menu::before {
  content: "";
  position: absolute;
  inset: 6px 0 0;
  z-index: -1;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.nav-menu > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@media (hover: hover) and (min-width: 769px) {
  .nav-menu > li.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .nav-menu > li.menu-item-has-children:hover .nav-menu__chevron { transform: rotate(180deg); }
}
.nav-menu .sub-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu .current-menu-item > a {
  background: var(--color-primary-10);
  color: var(--color-primary);
  opacity: 1;
}
.nav-menu .sub-menu .current-menu-item > a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .nav-menu .sub-menu, .nav-menu__chevron { transition: none; }
}

/* Rich dropdown (Crash Course): logo, name, a short line and the next start date (inc/programs.php). */
.nav-menu > li.menu-item--rich-group > .sub-menu { min-width: 390px; padding: 16px 10px 10px; }
@media (min-width: 769px) { .nav-rich__line { white-space: nowrap; } }
.nav-menu .sub-menu .menu-item--rich + .menu-item--rich { margin-top: 2px; }
.nav-menu .sub-menu .menu-item--rich > a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; white-space: normal; }
.nav-rich__logo { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; color: var(--color-primary); background: linear-gradient(160deg, var(--color-ns-mist), var(--color-ns-mist-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 24, 40, .08), 0 6px 12px -6px rgba(20, 24, 40, .22); transition: transform .18s ease, box-shadow .18s ease; }
.menu-item--rich:nth-child(2n) .nav-rich__logo { background: linear-gradient(160deg, var(--color-ns-sand), var(--color-ns-sand-2)); }
.nav-rich__logo img, .nav-rich__logo svg { width: 24px; height: 24px; object-fit: contain; }
.nav-rich__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.nav-rich__name { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.nav-rich__line { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--color-text-muted); }
.nav-rich__badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--color-cat-tools-accent); background: var(--color-secondary-10); border: 1px solid rgba(45, 155, 162, .28); white-space: nowrap; }
.nav-rich__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); }
.nav-rich__arrow { flex-shrink: 0; color: var(--color-primary); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.nav-menu .sub-menu .menu-item--rich > a:hover .nav-rich__arrow,
.nav-menu .sub-menu .menu-item--rich > a:focus-visible .nav-rich__arrow { opacity: 1; transform: none; }
.nav-menu .sub-menu .menu-item--rich > a:hover .nav-rich__logo { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 4px rgba(20, 24, 40, .08), 0 10px 16px -8px rgba(20, 24, 40, .28); }
.nav-menu .sub-menu .menu-item--rich > a:hover .nav-rich__name,
.nav-menu .sub-menu .menu-item--rich.current-menu-item > a .nav-rich__name { color: var(--color-primary); }
.nav-menu .sub-menu .menu-item--rich > a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.has-dark-header .site-header .nav-rich__name { color: #fff; }
.has-dark-header .site-header .nav-rich__line { color: rgba(255, 255, 255, .62); }
.has-dark-header .site-header .nav-rich__logo { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
@media (max-width: 768px) {
  .nav-menu > li.menu-item--rich-group > .sub-menu { min-width: 0; padding: 4px 0 8px 8px; }
  .nav-rich__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-rich__logo, .nav-rich__arrow { transition: none; } }

/* Dark header over a dark hero (body.has-dark-header — e.g. Analytics Professional) */
.has-dark-header .site-header .nav-logo-text { color: #fff; }
.has-dark-header .site-header .nav-menu > li > a { color: rgba(255, 255, 255, .78); }
.has-dark-header .site-header .nav-menu > li > a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.has-dark-header .site-header .nav-menu > li.current-menu-item > a,
.has-dark-header .site-header .nav-menu > li.current-page-ancestor > a { background: rgba(255, 255, 255, .1); color: #fff; }
.has-dark-header .site-header .nav-toggle__bar { background: #fff; }
.has-dark-header .site-header.scrolled {
  background: rgba(10, 12, 18, .78);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
@media (max-width: 768px) {
  .has-dark-header .site-header .nav-menu {
    background: rgba(16, 20, 27, .96);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
  }
}

/* Dark header dropdowns (body.has-dark-header) */
.has-dark-header .site-header .nav-menu__parent,
.has-dark-header .site-header .nav-menu__subtoggle { color: rgba(255, 255, 255, .78); }
.has-dark-header .site-header .nav-menu__parent:hover,
.has-dark-header .site-header .nav-menu > li.is-open > .nav-menu__parent,
.has-dark-header .site-header .nav-menu > li.current-menu-ancestor > .nav-menu__parent { background: rgba(255, 255, 255, .1); color: #fff; }
.has-dark-header .site-header .sub-menu::before {
  background: rgba(16, 20, 27, .96);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.has-dark-header .site-header .sub-menu a { color: rgba(255, 255, 255, .78); }
.has-dark-header .site-header .sub-menu a:hover,
.has-dark-header .site-header .sub-menu .current-menu-item > a { background: rgba(255, 255, 255, .08); color: #fff; }

/* Tablet widths: keep a six-item menu (Academy) on one line until the hamburger takes over. */
.nav-menu > li > a, .nav-menu__parent { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-inner { gap: var(--space-4); }
  .nav-menu { gap: 0; }
  .nav-menu > li > a, .nav-menu__parent { padding: 6px 9px; font-size: 13px; }
  .nav-menu__parent { gap: 4px; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .nav-menu > li > a, .nav-menu__parent { padding: 6px 7px; }
  .nav-logo-text { font-size: var(--text-lg); }
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-black);
  border-radius: var(--radius-full);
  transition: var(--ease-fast);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--ease-default);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--color-white);
}
a.btn--primary,
a.btn--primary:link,
a.btn--primary:visited,
a.btn--primary:hover,
a.btn--primary:active  { color: var(--color-white); }

a.btn--ghost,
a.btn--ghost:link,
a.btn--ghost:visited,
a.btn--ghost:hover     { color: var(--color-white); }

a.btn--secondary:hover,
a.btn--secondary:active { color: var(--color-white); }

/* CTA section: invert primary btn so it doesn't blend with gradient bg */
.cta-section .btn--primary,
.cta-section a.btn--primary:link,
.cta-section a.btn--primary:visited {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
.cta-section .btn--primary:hover,
.cta-section a.btn--primary:hover,
.cta-section a.btn--primary:active {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
  opacity: 1;
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

/* Every "Download …" action button site-wide uses this — the brand's secondary color,
   distinct from --color-primary used by registration/CTA buttons. */
.btn--download {
  background: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}
.btn--download:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--color-white);
}
a.btn--download,
a.btn--download:link,
a.btn--download:visited,
a.btn--download:hover,
a.btn--download:active { color: var(--color-white); }

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
}
.course-sidebar__body .btn--ghost {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-primary);
  opacity: 1;
}

.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  background-color: var(--color-white);
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(162, 45, 117, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 85% 70%, rgba(45, 155, 162, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 60% 15%, rgba(12, 208, 180, 0.04) 0%, transparent 55%);
}
.hero__content { position: relative; z-index: 1; max-width: 720px; }
.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  opacity: 0;
}
.hero__title    { margin-bottom: var(--space-6); opacity: 0; }
.hero__subtitle {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: var(--leading-loose);
  opacity: 0;
}
.hero__actions  { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; opacity: 0; }
.hero__bg       { position: absolute; inset: 0; z-index: 0; opacity: 0.12; }
.hero__bg img   { width: 100%; height: 100%; object-fit: cover; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--ease-default);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card__image            { aspect-ratio: 16/9; overflow: hidden; }
.card__image img        { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card__image img { transform: scale(1.03); }
.card__body             { padding: var(--space-6); }
.card__tag              {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.card__title   { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0; }

/* ── Grid ───────────────────────────────────────────────────────── */
.grid   { display: grid; gap: var(--space-8); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Course Cards — grid of compact cards, 3 per row ─────────────── */
.course-scroll-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 960px) {
  .course-scroll-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .course-scroll-track { grid-template-columns: 1fr; }
}

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--card-bg, var(--color-surface));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.06);
  transition: var(--ease-default);
}
/* Discount ribbon — a price-tag banner hung across the top-left corner, cropped by the card's
   own overflow:hidden rather than a footer pill, so a discount reads before anything else. */
.course-card__ribbon {
  position: absolute;
  top: 18px;
  left: -38px;
  z-index: 3;
  width: 150px;
  padding: 5px 0;
  text-align: center;
  transform: rotate(-45deg);
  transform-origin: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #4ade80, #16a34a);
  box-shadow: 0 2px 6px rgba(22,163,74,.35);
}
.course-card__header-arrow {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  color: #fff;
  transition: var(--ease-fast);
}
.course-card__icon-col:hover .course-card__header-arrow { background: #fff; color: var(--color-secondary); transform: translateX(2px); }
.course-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(45,155,162,0.28); }

.course-card__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card-bg, var(--color-surface)); }
.course-card__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Top: icon bar */
.course-card__icon-col {
  order: 3;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}
.course-card__icon-wrap { flex-shrink: 0; }
.course-card__icon-wrap svg { width: 28px; height: 28px; }
.course-card__header-text { min-width: 0; flex: 1; }
.course-card__icon-col .course-card__title {
  margin: 0;
  line-height: 1.25;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  white-space: normal;
  overflow-wrap: break-word;
}

/* Middle: body */
.course-card__body {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.course-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.course-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}
.course-card__title a { color: var(--color-black); }
.course-card__title a:hover { color: var(--color-primary); opacity: 1; }

.course-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Original course price — every card */
.course-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
}
.course-card__price-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.course-card__price-value {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.course-card__divider {
  height: 2px;
  border: none;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
  border-radius: 1px;
  opacity: 0.3;
  margin: var(--space-1) 0;
}

/* Bottom of body: tech logos (left) + pills stacked (right), divided by a vertical rule */
.course-card__footer-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: auto;
}

.course-card__tech {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.course-card__tech-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  width: max-content;
}
.course-card__tech[data-marquee-active] .course-card__tech-track {
  animation: course-card-tech-marquee linear infinite;
}
@keyframes course-card-tech-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.course-card__tech img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  padding: 4px;
  background: var(--color-white);
}

.course-card__pills {
  flex-shrink: 0;
  margin-left: auto; /* stays on the right even when the card has no tech logos */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid rgba(0,0,0,0.06);
}
.course-card__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: rgba(0,0,0,0.05);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Bottom: action bar */
.course-card__action {
  flex-shrink: 0;
  width: 100%;
  padding: 0 var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-2);
}
.course-card__price {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}
.course-card__price--free { color: #2e7d32; }
.course-card__batch-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 100%;
  margin: 0;
}
/* "Registration open" — white pill so it stands out on every category tint, brand teal text. */
.course-card__batch-status--open {
  color: var(--color-cat-tools-accent);
  background: #fff;
  border: 1px solid rgba(45,155,162,.35);
  box-shadow: 0 1px 3px rgba(45,155,162,.18);
}
.course-card__batch-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(45,155,162,.22);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .course-card__batch-status-dot { animation: batch-status-pulse 1.8s ease-in-out infinite; }
}
.course-card__batch-status-date { font-weight: 600; opacity: .85; }
@keyframes batch-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.course-card__batch-status--next {
  color: #1e3a8a;
  background: linear-gradient(135deg, #dbeafe, #c7d9fb);
  box-shadow: 0 1px 3px rgba(30,58,138,.12);
}
.course-card__batch-status--next svg { flex-shrink: 0; opacity: .8; }
.course-card__batch-status--prebook {
  color: #6b21a8;
  background: linear-gradient(135deg, #f3e8ff, #ead6fd);
  box-shadow: 0 1px 3px rgba(107,33,168,.15);
}
.course-card__batch-status--prebook svg { flex-shrink: 0; }
/* Overlaid on the card, not stacked in its normal flow — a per-card presence/absence of this
   badge must never change the card's own height, which is exactly what made grid rows
   misalign when it lived in the footer instead. Right side so it never meets the discount
   ribbon's top-left corner. */
.course-card__seats {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 1px 3px rgba(225,29,72,.25);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.course-card__seats--urgent {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  box-shadow: 0 1px 3px rgba(153,27,27,.35);
  animation: batch-status-pulse 1.8s ease-in-out infinite;
}
.course-card__action .btn { width: 100%; justify-content: center; text-align: center; }
.course-card__details-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}
.course-card__details-link:hover { color: var(--color-primary); opacity: 1; }

/* ── Filter Bar (Academy) ───────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); }
.filter-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--ease-fast);
  background: transparent;
  color: var(--color-text);
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ── Social Share (floating) ────────────────────────────────────── */
.social-share {
  position: fixed;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: var(--z-raised);
}
.social-share__btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--ease-fast);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-base);
}
.social-share__btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: scale(1.1);
  opacity: 1;
}

/* ── Notification Bar ───────────────────────────────────────────── */
.notification-bar {
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-3) var(--space-12);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  position: relative;
  z-index: var(--z-nav);
  overflow: hidden;
}
.notification-bar__close {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
  padding: var(--space-1);
  opacity: 0.8;
}
.notification-bar__close:hover { opacity: 1; }

/* ── Counters ───────────────────────────────────────────────────── */
.stats-grid {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-item .counter {
  display: block;
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  line-height: 1;
}
.stat-item .stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ── Newsletter CTA ─────────────────────────────────────────────── */
.newsletter-block {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  text-align: center;
  color: var(--color-white);
}
.newsletter-block h2 { color: var(--color-white); margin-bottom: var(--space-4); }
.newsletter-block p  { color: rgba(255,255,255,0.85); margin-bottom: var(--space-6); }

.newsletter-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--text-base);
  outline: none;
}
.newsletter-form input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}

/* ── Footer ─────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
#main, .site-main { margin-bottom: 0; padding-bottom: 0; }
#force-footer { display: none !important; }

.site-footer {
  background: var(--color-black);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-12) 0 var(--space-6);
}

/* Grid: brand col + 3 nav cols */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-6);
}

/* Brand */
.footer-brand__logo { margin-bottom: var(--space-4); }
.footer-brand__logo img { max-height: 40px; width: auto; }
.footer-brand__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.45);
  line-height: var(--leading-relaxed);
  max-width: 240px;
  margin: 0;
}

/* Nav columns */
.footer-col__title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.footer-col__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col__links a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col__links a:hover { color: rgba(255, 255, 255, 0.9); opacity: 1; }

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-bottom > p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}
.footer-bottom > p a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-bottom > p a:hover { color: rgba(255, 255, 255, 0.8); opacity: 1; }

.footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-5);
}
.footer-legal-links a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal-links a:hover { color: rgba(255, 255, 255, 0.7); opacity: 1; }

.footer-copyright {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin: 0;
}

/* ── Breadcrumbs ────────────────────────────────────────────────── */
.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.breadcrumbs a { color: var(--color-primary); }

/* ── Animation initial states (GSAP reveals) ────────────────────── */
.anim-fade-up,
.anim-fade-in,
.anim-slide-left,
.anim-slide-right { visibility: hidden; }

/* ── Page-transition overlay: CSS fallback in case GSAP CDN fails ── */
@keyframes cs-overlay-hide { to { opacity: 0; visibility: hidden; } }
.page-transition { animation: cs-overlay-hide 0.4s 0.15s ease forwards; }

/* ── Skip Link ──────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-nav) + 10);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  transition: top 0.2s ease;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--color-white); opacity: 1; }

/* ── Read Progress Bar ──────────────────────────────────────────── */
#read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  z-index: calc(var(--z-nav) + 1);
  transition: width 0.1s linear;
  pointer-events: none;
}
body.admin-bar #read-progress { top: 32px; }
@media screen and (max-width: 782px) {
  /* WP core switches #wpadminbar from position:fixed to position:absolute at this width — it
     scrolls away with the page instead of staying pinned, so offsetting our own fixed bar to
     sit below it (like the desktop rule above does) leaves a permanent gap once the visitor
     scrolls even slightly. Keep it flush with the true top of the viewport here instead. */
  body.admin-bar #read-progress { top: 0; }
}

/* ── Section Separator ──────────────────────────────────────────── */
.section-separator {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
  margin: 0;
}

/* ── Cards Grid ──────────────────────────────────────────────────── */
.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: center;
}
.cards-grid > * {
  flex: 1 1 260px;
  max-width: 360px;
}

/* ── Team Card ───────────────────────────────────────────────────── */
.team-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--ease-default);
  position: relative;
  z-index: 0;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.team-card__photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-shade);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.team-card:hover .team-card__photo img { transform: scale(1.05); }
.team-card__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.team-card__body { padding: var(--space-5); }
.team-card__name {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}
.team-card__role {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-card__social {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}
.team-card__social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: var(--ease-fast);
  text-decoration: none;
}
.team-card__social-link:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  opacity: 1;
}
@media (max-width: 768px) {
  .team-card__bio { -webkit-line-clamp: 4; }
}

/* ── Default Page Header ─────────────────────────────────────────── */
.page-header {
  padding: calc(var(--space-24) + 80px) 0 var(--space-12);
  background: linear-gradient(135deg, var(--color-shade) 0%, var(--color-white) 100%);
  border-bottom: 1px solid var(--color-border);
}
.page-header__title {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
}

/* Default page content */
.page-content { max-width: 860px; }
.page-content p,
.page-content li { line-height: var(--leading-loose); }
.page-content h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.page-content h3 { margin-top: var(--space-8);  margin-bottom: var(--space-3); }
/* Policy pages (single-vc_policy.php): tables fit the column and wrap their text. */
.page-content ul + p, .page-content p + ul, .page-content table + p { margin-top: var(--space-4); }
.page-content table { width: 100%; max-width: 100%; margin: var(--space-4) 0; border-collapse: collapse; font-size: var(--text-sm); table-layout: auto; }
.page-content th, .page-content td { padding: 10px 14px; text-align: left; vertical-align: top; border: 1px solid var(--color-border); white-space: normal; overflow-wrap: break-word; line-height: 1.5; }
.page-content thead th { background: var(--color-surface); font-weight: 700; }
@media (max-width: 480px) { .page-content th, .page-content td { padding: 7px 8px; font-size: .8125rem; hyphens: auto; -webkit-hyphens: auto; } }
/* Policy text is full of numbered sections and figures: headings use Inter (Raleway's old-style
   numerals read badly) and smaller sizes than the marketing pages. */
.policy-page .page-header__title { font-family: var(--font-primary); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.policy-page .page-content h2 { font-family: var(--font-primary); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.policy-page .page-content h3 { font-family: var(--font-primary); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); font-weight: 700; line-height: 1.35; }
/* Policy points are numbered (1, 2, 3 … within each section) so they can be referred to. */
.policy-page .page-content ul { list-style: decimal; padding-left: 1.75em; }
.policy-page .page-content ul ul { list-style: lower-alpha; }
.policy-page .page-content li::marker { font-weight: 600; color: var(--color-text-muted); }
.policy-page .page-content li + li { margin-top: var(--space-2); }
.policy-version { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.policy-notice { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-10); }
.policy-notice a { font-weight: 600; margin-left: var(--space-2); }

/* ── Section Header ──────────────────────────────────────────────── */
.section-header {
  margin-bottom: var(--space-12);
}
.section-subtext {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 640px;
  margin-inline: auto;
}

/* ── Testimonial Cards ───────────────────────────────────────────── */
.testimonials-section { background: var(--color-white); }

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: var(--ease-default);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.testimonial-card__rating { display: flex; align-items: center; gap: 2px; }

.testimonial-card__quote {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-loose);
  flex: 1;
  margin: 0;
  font-style: italic;
  position: relative;
  padding-left: var(--space-4);
}
.testimonial-card__quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -4px;
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.3;
  font-style: normal;
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-primary);
}
.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}
.testimonial-card__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.testimonial-linkedin-link { color: #0a66c2; display: inline-flex; align-items: center; margin-left: var(--space-2); }
.testimonial-linkedin-link:hover { opacity: 0.8; }

/* ── Testimonial card — full (used on all-testimonials page) ─────── */
.testimonial-card--full .testimonial-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.testimonial-card__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.testimonial-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  text-decoration: none;
  transition: var(--ease-fast);
}
.testimonial-card__link--linkedin  { color: #0a66c2; background: rgba(10,102,194,0.08); }
.testimonial-card__link--youtube   { color: #ff0000; background: rgba(255,0,0,0.08); }
.testimonial-card__link--facebook  { color: #1877f2; background: rgba(24,119,242,0.08); }
.testimonial-card__link--gmail     { color: #ea4335; background: rgba(234,67,53,0.08); }
.testimonial-card__link--twitter   { color: #1da1f2; background: rgba(29,161,242,0.08); }
.testimonial-card__link--instagram { color: #c13584; background: rgba(193,53,132,0.08); }
.testimonial-card__link--source    { color: var(--color-text-muted); background: rgba(0,0,0,0.05); }
.testimonial-card__link:hover { opacity: 0.8; }

.testimonial-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
}

/* ── Channel badge ───────────────────────────────────────────────── */
.testimonial-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.06);
  color: var(--color-text-muted);
}
.testimonial-channel-badge--linkedin    { background: rgba(10,102,194,0.1);  color: #0a66c2; }
.testimonial-channel-badge--youtube     { background: rgba(255,0,0,0.1);     color: #cc0000; }
.testimonial-channel-badge--google-maps { background: rgba(66,133,244,0.1);  color: #1a73e8; }
.testimonial-channel-badge--website     { background: rgba(45,155,162,0.1);  color: var(--color-secondary); }
.testimonial-channel-badge--direct      { background: rgba(162,45,117,0.1);  color: var(--color-primary); }

/* ── All-Testimonials Page Body: main + right sidebar (mirrors Apps page) ── */
.testimonials-page-body {
  display: grid;
  grid-template-columns: 1fr 220px;
  align-items: start;
  gap: var(--space-8);
}
.testimonials-page-main { min-width: 0; }
.testimonials-page-sidebar { position: sticky; top: var(--space-8); }

.testimonials-sidebar-widget {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
}
.testimonials-sidebar-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-shade, #f5f5f5);
}
.testimonials-sidebar-widget__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}
.testimonials-course-clear {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.testimonials-course-clear:hover { text-decoration: underline; }

.testimonials-course-list { display: flex; flex-direction: column; padding: var(--space-2) 0; }

.testimonials-course-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 9px var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .13s;
}
.testimonials-course-btn:hover { background: var(--color-shade, #f5f5f5); }

.testimonials-course-btn__name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}
.testimonials-course-btn__count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-shade, #f0f0f0);
  border-radius: var(--radius-full, 999px);
  padding: 1px 7px;
}
.testimonials-course-btn__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .13s, border-color .13s;
  color: transparent;
}

.testimonials-course-btn.is-active .testimonials-course-btn__name { color: var(--color-primary); font-weight: 600; }
.testimonials-course-btn.is-active .testimonials-course-btn__count { background: var(--color-primary-10, rgba(0,120,215,.1)); color: var(--color-primary); }
.testimonials-course-btn.is-active .testimonials-course-btn__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.testimonials-course-btn.is-active { background: var(--color-primary-10, rgba(0,120,215,.06)); }

/* Vertical (masonry-style) wrap — items flow down each column so a taller
   card never leaves a gap under the shorter cards beside it, unlike a grid
   row which is only as tall as its shortest sibling. column-count itself is
   driven by --tcols (JS, set to min(3, visible-card-count)) rather than a
   hardcoded 3 — CSS multi-column's own auto-balance doesn't reliably collapse
   to fewer columns once items are hidden via a filter, so JS decides instead. */
.testimonials-all-grid {
  column-count: var(--tcols, 3);
  column-gap: var(--space-6);
  column-fill: balance;
}
.testimonials-all-grid__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--space-6);
  display: inline-block;
  width: 100%;
}

@media (max-width: 1024px) {
  .testimonials-page-body { grid-template-columns: 1fr; }
  .testimonials-page-sidebar { position: static; }
  .testimonials-all-grid { column-count: min(var(--tcols, 3), 2); }
}
@media (max-width: 900px) {
  .testimonials-sidebar-widget { border-radius: var(--radius-md, 8px); }
  .testimonials-course-list { flex-direction: row; flex-wrap: wrap; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .testimonials-course-btn { width: auto; padding: 6px 10px; border-radius: 20px; border: 1.5px solid var(--color-border); background: var(--color-white); gap: var(--space-2); }
  .testimonials-course-btn:hover { background: var(--color-shade); }
  .testimonials-course-btn.is-active { background: var(--color-primary-10); border-color: var(--color-primary); }
  .testimonials-course-btn__check { display: none; }
}
@media (max-width: 640px) {
  .testimonials-all-grid { column-count: 1; }
}

/* ── Filter-btn channel icons ────────────────────────────────────── */
.filter-btn svg { vertical-align: middle; margin-right: 4px; }

/* ── Star Rating (global) ────────────────────────────────────────── */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.star-rating svg { display: inline-block; }

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

.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-white     { color: var(--color-white); }
.text-center    { text-align: center; }

.bg-primary   { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-shade     { background-color: var(--color-shade); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid--4      { grid-template-columns: repeat(2, 1fr); }
  .grid--3      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-menu      { display: none; flex-direction: column; position: absolute; top: calc(100% + 8px); left: var(--space-4); right: var(--space-4); background: var(--color-white); padding: var(--space-3); border-radius: var(--radius-xl); box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid var(--color-border); gap: 2px; }
  .nav-menu.is-open { display: flex; }
  .nav-menu > li > a { width: 100%; border-radius: var(--radius-lg); padding: 10px 16px; }
  .nav-menu      { align-items: stretch; }
  .nav-menu > li > a { justify-content: flex-start; }
  .nav-menu > li.menu-item-has-children { flex-wrap: wrap; }
  .nav-menu__parent { width: 100%; justify-content: space-between; min-height: 44px; border-radius: var(--radius-lg); padding: 10px 16px; }
  .nav-menu > li.menu-item-has-children > a { flex: 1; width: auto; }
  .nav-menu__subtoggle { width: 44px; height: 44px; margin: 0; }
  .nav-menu .sub-menu { position: static; display: none; flex-basis: 100%; min-width: 0; padding: 2px 0 6px 12px; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-menu .sub-menu::before { display: none; }
  .nav-menu > li.is-open > .sub-menu { display: block; }
  .nav-menu .sub-menu a { padding: 10px 16px; min-height: 44px; display: flex; align-items: center; white-space: normal; }
  .nav-toggle    { display: flex; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .section         { padding-block: var(--space-16); }
  .grid--2,
  .grid--3,
  .grid--4         { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr; }
  .social-share    { display: none; }
  .newsletter-form { flex-direction: column; }
}


/* ── Reduced Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .anim-fade-up,
  .anim-fade-in,
  .anim-slide-left,
  .anim-slide-right { visibility: visible; }
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .notification-bar,
  .social-share,
  .filter-bar,
  .nav-toggle,
  #read-progress,
  .page-transition { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a    { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; }
}

/* ── Course Listing Layout (courses left, sidebars right) ────────── */
.course-listing-layout {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}
.course-listing-main { flex: 1; min-width: 0; }

.course-cat-sidebars {
  flex-shrink: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--space-8);
}

.course-cat-sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--sidebar-accent, var(--color-primary));
  transition: box-shadow 0.2s ease;
}
.course-cat-sidebar:hover { box-shadow: var(--shadow-md); }

.course-cat-sidebar[style*="display:none"] { display: none !important; }

.course-cat-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.course-cat-sidebar__icon { flex-shrink: 0; display: flex; }
.course-cat-sidebar__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  margin: 0;
  line-height: 1.4;
}

.course-cat-sidebar__list {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.course-cat-sidebar__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.course-cat-sidebar__check { flex-shrink: 0; margin-top: 1px; display: flex; }

@media (max-width: 960px) {
  .course-listing-layout { flex-direction: column; }
  /* the layout keeps align-items:flex-start, and .course-card is an inline-size container (zero
     intrinsic width) — without this the course column shrank to 2px on phones and tablets */
  .course-listing-main { width: 100%; }
  .course-cat-sidebars { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; }
  .course-cat-sidebar { flex: 1; min-width: 220px; }
}
@media (max-width: 640px) {
  .course-cat-sidebars { flex-direction: column; }
  .course-cat-sidebar { min-width: unset; }
}

/* ── Course Tools & Technologies ────────────────────────────────── */
.course-tools {
  margin-bottom: var(--space-10);
}
.course-tools__heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
}
.course-tools__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.course-tools__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 80px;
}
.course-tools__item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px;
  background: var(--color-white);
}
.course-tools__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
}

/* ── No site header (course detail page) ────────────────────────── */
.no-site-header .site-header { display: none; }

/* ── Testimonial Channel Filter Bar ─────────────────────────────── */
.testimonial-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.testimonial-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.testimonial-filter-btn__icon { display: flex; align-items: center; flex-shrink: 0; }
.testimonial-filter-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  background: rgba(0,0,0,0.07);
  color: inherit;
  margin-left: 2px;
}

/* All button */
.testimonial-filter-btn.active,
.testimonial-filter-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(162,45,117,0.25);
}
.testimonial-filter-btn.active .testimonial-filter-btn__count,
.testimonial-filter-btn:hover .testimonial-filter-btn__count {
  background: rgba(255,255,255,0.25);
}

/* LinkedIn */
.testimonial-filter-btn--linkedin { --ch-color: #0a66c2; border-color: rgba(10,102,194,0.3); color: #0a66c2; }
.testimonial-filter-btn--linkedin svg { fill: #0a66c2; }
.testimonial-filter-btn--linkedin.active,
.testimonial-filter-btn--linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; box-shadow: 0 2px 8px rgba(10,102,194,0.3); }
.testimonial-filter-btn--linkedin.active svg,
.testimonial-filter-btn--linkedin:hover svg { fill: #fff; }

/* YouTube */
.testimonial-filter-btn--youtube { --ch-color: #ff0000; border-color: rgba(255,0,0,0.25); color: #cc0000; }
.testimonial-filter-btn--youtube svg { fill: #cc0000; }
.testimonial-filter-btn--youtube.active,
.testimonial-filter-btn--youtube:hover { background: #ff0000; border-color: #ff0000; color: #fff; box-shadow: 0 2px 8px rgba(255,0,0,0.25); }
.testimonial-filter-btn--youtube.active svg,
.testimonial-filter-btn--youtube:hover svg { fill: #fff; }

/* Google Maps */
.testimonial-filter-btn--google-maps { border-color: rgba(66,133,244,0.3); color: #4285f4; }
.testimonial-filter-btn--google-maps svg { fill: #ea4335; }
.testimonial-filter-btn--google-maps.active,
.testimonial-filter-btn--google-maps:hover { background: #4285f4; border-color: #4285f4; color: #fff; box-shadow: 0 2px 8px rgba(66,133,244,0.3); }
.testimonial-filter-btn--google-maps.active svg,
.testimonial-filter-btn--google-maps:hover svg { fill: #fff; }

/* Website */
.testimonial-filter-btn--website { border-color: rgba(0,150,136,0.3); color: #00897b; }
.testimonial-filter-btn--website svg { stroke: #00897b; fill: none; }
.testimonial-filter-btn--website.active,
.testimonial-filter-btn--website:hover { background: #00897b; border-color: #00897b; color: #fff; box-shadow: 0 2px 8px rgba(0,150,136,0.25); }
.testimonial-filter-btn--website.active svg,
.testimonial-filter-btn--website:hover svg { stroke: #fff; }

/* Direct */
.testimonial-filter-btn--direct { border-color: rgba(103,58,183,0.3); color: #673ab7; }
.testimonial-filter-btn--direct svg { stroke: #673ab7; fill: none; }
.testimonial-filter-btn--direct.active,
.testimonial-filter-btn--direct:hover { background: #673ab7; border-color: #673ab7; color: #fff; box-shadow: 0 2px 8px rgba(103,58,183,0.25); }
.testimonial-filter-btn--direct.active svg,
.testimonial-filter-btn--direct:hover svg { stroke: #fff; }

/* ================================================================
   Why Choose Us Section
   ================================================================ */
.why-choose-us-section { background: var(--color-surface); }
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (max-width: 640px) {
  .why-us-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* One brand accent per card, cycling primary → secondary → support. */
.why-us-card { --why-accent: var(--color-primary); --why-tint: var(--color-primary-10); }
.why-us-card:nth-child(3n+2) { --why-accent: var(--color-secondary); --why-tint: var(--color-secondary-10); }
.why-us-card:nth-child(3n+3) { --why-accent: var(--color-support); --why-tint: var(--color-support-10); }
.why-us-card {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  align-items: center;
  align-content: start;
  box-shadow: 0 1px 2px rgba(50,50,50,.04), 0 4px 12px rgba(50,50,50,.04);
}
.why-us-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--why-accent);
  transform: scaleX(0);
  transform-origin: left;
}
.why-us-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--why-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--why-accent);
  flex-shrink: 0;
}
.why-us-card__title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text);
}
.why-us-card__desc {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: var(--text-base, 1rem);
  line-height: 1.65;
  margin: var(--space-1) 0 0;
  max-width: 62ch;
}
.why-us-card:hover { border-color: var(--why-accent); }
.why-us-card:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .why-us-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .why-us-card::before { transition: transform .25s ease; }
  .why-us-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(50,50,50,.04), 0 12px 28px rgba(50,50,50,.08);
  }
}
@media (max-width: 640px) {
  .why-us-card { padding: var(--space-6); }
  .why-us-card__icon { width: 44px; height: 44px; }
  .why-us-card__desc { font-size: var(--text-sm, .9375rem); }
}

/* ================================================================
   Community Section
   ================================================================ */
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
@media (max-width: 900px) {
  .community-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .community-grid { grid-template-columns: 1fr; }
}
.community-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.25s ease;
}
.community-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.community-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.community-card__content { flex: 1; min-width: 0; }
.community-card__name {
  display: block;
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  color: var(--color-heading);
}
.community-card__count {
  display: block;
  font-size: var(--text-sm, .875rem);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.community-card__join {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm, .875rem);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.community-card:hover .community-card__join {
  opacity: 1;
  transform: translateX(0);
}
/* Brand-colored icon + border per platform */
.community-card--discord:hover  { border-color: #5865F2; }
.community-card--discord .community-card__icon  { color: #5865F2; }
.community-card--telegram:hover { border-color: #2AABEE; }
.community-card--telegram .community-card__icon { color: #2AABEE; }
.community-card--whatsapp:hover { border-color: #25D366; }
.community-card--whatsapp .community-card__icon { color: #25D366; }
.community-card--youtube:hover  { border-color: #FF0000; }
.community-card--youtube .community-card__icon  { color: #FF0000; }
.community-card--slack:hover    { border-color: #4A154B; }
.community-card--slack .community-card__icon    { color: #4A154B; }
.community-card--instagram:hover { border-color: #E1306C; }
.community-card--instagram .community-card__icon { color: #E1306C; }
.community-card--reddit:hover   { border-color: #FF4500; }
.community-card--reddit .community-card__icon   { color: #FF4500; }
.community-card--twitter:hover  { border-color: #000; }
.community-card--twitter .community-card__icon  { color: #000; }
.community-card--facebook:hover { border-color: #1877F2; }
.community-card--facebook .community-card__icon { color: #1877F2; }
.community-card--linkedin:hover { border-color: #0A66C2; }
.community-card--linkedin .community-card__icon { color: #0A66C2; }

/* ================================================================
   Awards & Recognition Section
   ================================================================ */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (max-width: 1024px) {
  .awards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .awards-grid { grid-template-columns: 1fr; }
}
.award-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.award-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.award-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.award-card__image {
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt, #f8f9fc);
  min-height: 110px;
  filter: grayscale(1) opacity(.65);
  transition: filter 0.4s ease;
}
.award-card:hover .award-card__image { filter: none; }
.award-card__image img {
  max-height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.award-card__image--placeholder { color: var(--color-text-muted); }
.award-card__body {
  padding: var(--space-4) var(--space-5) var(--space-6);
}
.award-card__title {
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  margin: 0 0 var(--space-1);
  color: var(--color-heading);
}
.award-card__by {
  font-size: var(--text-sm, .875rem);
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.award-card__desc {
  font-size: var(--text-sm, .875rem);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}
.award-card__year {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(var(--color-primary-rgb,59,130,246),.1);
  color: var(--color-primary);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ================================================================
   Testimonials Marquee (academy page)
   ================================================================ */
.testimonials-marquee {
  overflow: hidden;
  width: 100%;
  padding: var(--space-4) 0 var(--space-2);
  cursor: default;
}
.testimonials-marquee__track {
  display: flex;
  gap: var(--space-6);
  width: max-content;
  animation: testimonials-scroll 44s linear infinite;
}
.testimonials-marquee:hover .testimonials-marquee__track {
  animation-play-state: paused;
}
@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.testimonials-marquee .testimonial-card {
  width: 340px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .testimonials-marquee .testimonial-card { width: 280px; }
}
.testimonials-marquee .anim-fade-up {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
/* Wraps the marquee's second (loop-seamlessness) copy — invisible to the flex layout on
   desktop, hidden outright on mobile (see the .testimonials-section override below). */
.testimonials-marquee__dup { display: contents; }
/* Fade edges */
.testimonials-marquee::before,
.testimonials-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.testimonials-marquee { position: relative; }
.testimonials-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg, #fff), transparent);
}
.testimonials-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg, #fff), transparent);
}

/* Course page's testimonial marquee — smaller footprint than the full landing-page section,
   since it's sitting inside a course page rather than being its own dedicated section. */
.course-testimonials .testimonials-marquee {
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--space-2) 0;
}
.course-testimonials .testimonials-marquee .testimonial-card {
  width: 280px;
}

/* Testimonials, mobile only — on both the Academy landing page and individual course pages,
   the horizontal auto-scroll marquee has no room to breathe at phone width, so it becomes a
   plain vertical list inside a fixed-height, scrollable box instead. */
@media (max-width: 640px) {
  .testimonials-section .testimonials-marquee,
  .course-testimonials .testimonials-marquee {
    /* Capped well under a phone's viewport height (never more than half of it) so enough of
       the page — heading above, next section below — stays visible around the box; otherwise
       it fills the whole screen and a user's scroll gesture has nowhere to land except inside
       it, making the page feel stuck. */
    max-height: min(50vh, 340px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Scrolls by touch/drag same as ever — just no visible scrollbar track/thumb. */
    scrollbar-width: none;
    background: transparent;
    padding: 0;
  }
  .testimonials-section .testimonials-marquee::-webkit-scrollbar,
  .course-testimonials .testimonials-marquee::-webkit-scrollbar {
    display: none;
  }
  .testimonials-section .testimonials-marquee__track,
  .course-testimonials .testimonials-marquee__track {
    flex-direction: column;
    width: 100%;
    padding-inline: 4px;
    animation: none;
  }
  .testimonials-section .testimonials-marquee .testimonial-card,
  .course-testimonials .testimonials-marquee .testimonial-card {
    width: 100%;
  }
  .testimonials-section .testimonials-marquee__dup,
  .course-testimonials .testimonials-marquee__dup {
    display: none;
  }
  /* Fade overlays collapsed — with the marquee's own background now transparent (see above),
     a fade-to-var(--color-bg) bar no longer makes sense here. */
  .testimonials-section .testimonials-marquee::before,
  .testimonials-section .testimonials-marquee::after,
  .course-testimonials .testimonials-marquee::before,
  .course-testimonials .testimonials-marquee::after {
    height: 0;
  }
}
/* .course-testimonials' actual padding comes from academy.css (loads after this file, so it
   wins the cascade regardless of anything set here) — see the padding: var(--space-4) rule
   there instead of duplicating/fighting it here. */
.course-testimonials .section-header.text-center.anim-fade-up {
  margin-bottom: 1.2rem;
}

/* ================================================================
   Free Courses Section (landing page)
   ================================================================ */
.free-courses-section { background: var(--color-surface-alt, #f8f9fc); }

/* ================================================================
   Free Course Square Cards + Marquee
   ================================================================ */
.free-courses-section { background: var(--color-surface-alt, #f8f9fc); }

.free-courses-marquee {
  overflow: hidden;
  width: 100%;
  padding: var(--space-4) 0 var(--space-2);
  position: relative;
}
.free-courses-marquee::before,
.free-courses-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.free-courses-marquee::before { left: 0; background: linear-gradient(to right, var(--color-surface-alt, #f8f9fc), transparent); }
.free-courses-marquee::after  { right: 0; background: linear-gradient(to left, var(--color-surface-alt, #f8f9fc), transparent); }

.free-courses-marquee__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: free-courses-scroll 36s linear infinite;
}
.free-courses-marquee:hover .free-courses-marquee__track {
  animation-play-state: paused;
}
@keyframes free-courses-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Square card */
.free-course-card {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.free-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}
.free-course-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--card-bg, #dbeeff);
  text-decoration: none;
}
.free-course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  display: block;
  transition: transform 0.3s ease;
}
.free-course-card:hover .free-course-card__thumb img { transform: scale(1.06); }
.free-course-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--card-accent, #a22d75);
}
.free-course-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: rgba(0,0,0,.3);
  color: #fff;
}
.free-course-card__play svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.free-course-card:hover .free-course-card__play { opacity: 1; }
.free-course-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--card-accent, #a22d75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}
.free-course-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.free-course-card__title {
  font-size: var(--text-sm, .9rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.free-course-card__title a { color: var(--color-heading); text-decoration: none; }
.free-course-card__title a:hover { color: var(--color-primary); }
.free-course-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted);
}
.free-course-card__meta span { display: flex; align-items: center; gap: 4px; }
.free-course-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm, .875rem);
  font-weight: 700;
  color: var(--card-accent, var(--color-primary));
  text-decoration: none;
  transition: gap 0.2s ease;
}
.free-course-card__cta:hover { gap: 8px; }

/* Free filter button */
.filter-btn--free {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-btn--free svg { color: #ff0000; fill: #ff0000; }
.filter-btn--free.active,
.filter-btn--free:hover { border-color: #ff0000 !important; color: #ff0000 !important; background: rgba(255,0,0,.06) !important; }

/* ================================================================
   Academy Home polish
   ================================================================ */
/* Balanced line breaks: no single orphan word on a section heading or intro's last line. */
.section-header h2,
.section-subtext { text-wrap: balance; }
.hero__subtitle,
.about-section__body { text-wrap: pretty; }

/* Home "Choose Your Career" and Community grids: centre an incomplete last row instead of
   leaving it hanging on the left (e.g. 4 courses in a 3-column grid). */
.courses-section .course-scroll-track,
.community-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.courses-section .course-scroll-track > * { flex: 0 0 calc((100% - 2 * var(--space-6)) / 3); min-width: 0; }
.community-grid > * { flex: 0 0 calc((100% - 2 * var(--space-5)) / 3); min-width: 0; }
@media (max-width: 960px) {
  .courses-section .course-scroll-track > * { flex-basis: calc((100% - var(--space-6)) / 2); }
}
@media (max-width: 900px) {
  .community-grid > * { flex-basis: calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 640px) {
  .courses-section .course-scroll-track > * { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .community-grid > * { flex-basis: 100%; }
}

/* Seats badge: on cards with a cover image it sat in the image's top-right corner, on top of
   the "Live Course" label printed in every course image. Straddle the image's bottom edge
   instead — clear of the artwork and the description, still the first thing the eye meets
   after the image. Cards without an image keep the corner position. */
.course-card:has(.course-card__thumb) { container-type: inline-size; }
.course-card:has(.course-card__thumb) .course-card__seats {
  top: calc(100cqw * 9 / 16);
  right: var(--space-4);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--card-bg, var(--color-surface)), 0 2px 6px rgba(225,29,72,.25);
}

/* Hero abstract analytics illustration (shown when the page has no background image). */
.hero__art {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: max(0px, calc((100vw - 1280px) / 2 - 60px));
  width: min(40vw, 560px);
  transform: translateY(-46%);
  pointer-events: none;
}
.hero__art svg { display: block; width: 100%; height: auto; }
.hero__art .hero-art__panel { filter: drop-shadow(0 10px 24px rgba(50,50,50,.07)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-art__panel { animation: hero-art-float 7s ease-in-out infinite; transform-box: fill-box; }
  .hero-art__panel--b { animation-delay: -2s; }
  .hero-art__panel--c { animation-delay: -4s; animation-duration: 8s; }
  .hero-art__panel--d { animation-delay: -1s; animation-duration: 6s; }
  .hero-art__line { stroke-dasharray: 320; stroke-dashoffset: 320; animation: hero-art-draw 1.6s .4s ease-out forwards; }
  .hero-art__bar { transform-box: fill-box; transform-origin: bottom; animation: hero-art-grow .9s ease-out both; }
  .hero-art__bar:nth-child(2) { animation-delay: .08s; }
  .hero-art__bar:nth-child(3) { animation-delay: .16s; }
  .hero-art__bar:nth-child(4) { animation-delay: .24s; }
  .hero-art__bar:nth-child(5) { animation-delay: .32s; }
}
@keyframes hero-art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hero-art-draw  { to { stroke-dashoffset: 0; } }
@keyframes hero-art-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Below desktop the text needs the full width: fade the art into a soft backdrop. */
@media (max-width: 1300px) {
  .hero__art { width: 72vw; right: -22vw; opacity: .22; }
}
@media (max-width: 640px) {
  .hero__art { width: 120vw; right: -50vw; top: 30%; opacity: .16; }
}
.course-card:has(.course-card__thumb):has(.course-card__seats) .course-card__body { padding-top: var(--space-5); }