/* ==========================================================================
   1. GLOBAL DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Typography Scale */
  --font-size-h1: 2.5rem;
  --font-size-h2: 2.0rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body: 1.0rem;
  --font-size-small: 0.875rem;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Brand Colors (derived from the NextExc logo: violet -> cyan) */
  --color-primary: #6C2BD9;
  --color-primary-hover: #5620AD;
  --color-accent: #17C7E0;
  --color-dark-bg: #0c0c0c;
  --color-text-main: #1f1f1f;
  --color-text-muted: #5b626b;
  --color-border: #7d828a;
  --color-border-light: #e1e3e5;
  --color-white: #ffffff;

  /* Buttons */
  --btn-height-sm: 36px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;
  --btn-radius-round: 24px;
  --btn-radius-normal: 8px;

  --header-padding-x: 32px;

  /* Carousel tokens */
  --card-radius: 20px;
  --gap: 20px;
  --peek: 60px;
  --transition-speed: 500ms;
  --transition-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dark-text: #ffffff;
  --dark-muted: #cfcfcf;
  --blue-bg-1: var(--color-primary);
  --blue-bg-2: var(--color-accent);
  --blue-text: #ffffff;
  --btn-blue-text: var(--color-primary-hover);
}

/* ==========================================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-main);
  background-color: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* Hard safety net: nothing on this page — including the fixed-
     position course popover — should ever be able to grow a
     horizontal scrollbar. Without this, a position:fixed element
     that pokes even 1px past the viewport edge makes the whole
     page's scrollable width grow, which shows up as the entire
     page jumping sideways every time the popover opens/closes. */
  overflow-x: hidden;
}

h1, .h1 { font-size: var(--font-size-h1); font-weight: var(--fw-bold); line-height: 1.2; }
h2, .h2 { font-size: var(--font-size-h2); font-weight: var(--fw-bold); line-height: 1.25; }
h3, .h3 { font-size: var(--font-size-h3); font-weight: var(--fw-semibold); line-height: 1.3; }
h4, .h4 { font-size: var(--font-size-h4); font-weight: var(--fw-medium); line-height: 1.4; }
p { font-size: var(--font-size-body); color: var(--color-text-muted); }

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--header-padding-x);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  border-radius: var(--btn-radius-normal);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-sm { height: var(--btn-height-sm); padding: 0 16px; font-size: var(--font-size-small); }
.btn-md { height: var(--btn-height-md); padding: 0 24px; font-size: var(--font-size-body); }
.btn-lg { height: var(--btn-height-lg); padding: 0 32px; font-size: 1.125rem; }
.btn-primary { background-color: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background-color: var(--color-primary-hover); }
.btn-outline { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background-color: rgba(108, 43, 217, 0.06); }

/* ==========================================================================
   4. TOP BAR
   ========================================================================== */
.top-bar {
  background-color: var(--color-dark-bg);
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}
.top-nav-list {
  display: flex;
  list-style: none;
  height: 40px;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
}
.top-nav-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
  opacity: 0.9;
  background-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.top-nav-list li:first-child .top-nav-link { padding-left: 0; }
.top-nav-link:hover { background-color: #ffffff; color: var(--color-primary); opacity: 1; }
.top-nav-link.active { opacity: 1; color: #ffffff; font-weight: 700; background-color: transparent; }
.top-nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 4px;
  background-color: #ffffff;
  border-radius: 4px 4px 0 0;
}

/* ==========================================================================
   5. MAIN HEADER
   ========================================================================== */
.main-header {
  border-bottom: 1px solid var(--color-border-light);
  background-color: var(--color-white);
  height: 84px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 90;
}
.main-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.hamburger-bar { width: 22px; height: 2px; background-color: var(--color-text-main); transition: all 0.25s ease; transform-origin: center; }
.mobile-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-left { display: flex; align-items: center; gap: 28px; height: 100%; }

.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.brand-logo img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
}

.primary-nav { display: flex; align-items: center; gap: 24px; height: 100%; }

.explore-wrapper { position: static; height: 100%; display: flex; align-items: center; }
.explore-btn {
  background: none; border: none;
  font-family: var(--font-primary);
  font-size: 15px; font-weight: var(--fw-semibold);
  color: var(--color-text-main);
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.explore-btn:hover, .explore-wrapper:hover .explore-btn { color: var(--color-primary); background-color: rgba(108, 43, 217, 0.06); }
.chevron-icon { transition: transform 0.25s ease; }
.explore-wrapper:hover .chevron-icon, .explore-wrapper.active .chevron-icon { transform: rotate(180deg); }

.nav-link { color: var(--color-text-main); text-decoration: none; font-size: 15px; font-weight: var(--fw-medium); transition: color 0.2s ease; }
.nav-link:hover { color: var(--color-primary); }

/* ==========================================================================
   6. MEGA MENU
   ========================================================================== */
.mega-menu {
  position: absolute;
  top: 100%; left: 0;
  width: 100vw;
  background-color: var(--color-white);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}
.explore-wrapper:hover .mega-menu,
.explore-wrapper.active .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; }

.mega-menu-container { max-width: 1440px; margin: 0 auto; padding: 40px var(--header-padding-x) 28px; }
.mega-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 32px; }
.mega-menu-col { display: flex; flex-direction: column; gap: 24px; }
.mega-menu-section { display: flex; flex-direction: column; gap: 12px; }
.mega-menu-title { font-size: 16px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 12px; line-height: 1.2; }
.mega-menu-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.mega-menu-list a { color: #2a2b2e; text-decoration: none; font-size: 14px; font-weight: var(--fw-regular); line-height: 1.4; transition: color 0.15s ease; }
.mega-menu-list a:hover { color: var(--color-primary); text-decoration: underline; }
.mega-menu-view-all { color: var(--color-primary) !important; font-weight: var(--fw-medium) !important; text-decoration: underline !important; display: inline-block; margin-top: 4px; }
.mega-menu-view-all:hover { color: var(--color-primary-hover) !important; }
.mega-menu-footer { border-top: 1px solid var(--color-border-light); padding-top: 20px; font-size: 14px; color: var(--color-text-muted); }
.mega-menu-footer a { color: var(--color-primary); text-decoration: underline; font-weight: var(--fw-medium); }
.mega-menu-footer a:hover { color: var(--color-primary-hover); }

/* ==========================================================================
   7. NAV RIGHT / SEARCH  (login + join removed — search only, right-aligned)
   ========================================================================== */
.nav-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.search-form { width: 320px; }

/* --- Search results dropdown ---
   position:fixed + appended to <body> (see nav.js) so it always
   renders relative to the viewport, never clipped by a scrollable
   ancestor like the mobile menu panel. top/left/width are set
   inline by JS to track whichever search input is active. */
.search-results-dropdown {
  position: fixed;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
  z-index: 300;
}
.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 120ms ease;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f7f8f9; }
.search-result-title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-text-main); }
.search-result-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-no-results {
  padding: 16px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  text-align: center;
}
.search-input-wrapper { position: relative; display: flex; align-items: center; }
.search-input {
  width: 100%; height: 44px;
  padding: 8px 50px 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius-round);
  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  color: var(--color-text-main);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input::placeholder { color: var(--color-text-muted); }
.search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.search-submit-btn {
  position: absolute; right: 4px;
  width: 36px; height: 36px; border-radius: 50%;
  background-color: var(--color-primary); border: none; color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 0.2s ease;
}
.search-submit-btn:hover { background-color: var(--color-primary-hover); }

/* Mobile-only search, folded into the hamburger dropdown. Hidden on desktop. */
.mobile-only-block { display: none; }

/* ==========================================================================
   8. HERO CAROUSEL (banner-driven — see js/script.js)
   The whole section is hidden automatically via JS when the banners
   array is empty, and shown again the moment banners are added.
   ========================================================================== */
.carousel-section { width: 100%; padding: 48px 0; 
  /* background: #f7f9fc; */
 }
.carousel-section[hidden] { display: none; }

.carousel-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--card-radius);
}
.carousel-track {
  display: flex;
  gap: var(--gap);
  transition: transform var(--transition-speed) var(--transition-ease);
  will-change: transform;
}
.carousel-card {
  /* 2-up on desktop, with a small peek of the next card's edge —
     matches the reference (2 full cards + a sliver of the 3rd),
     while the viewport itself still spans the site's full
     standard content width via the .container wrapper. */
  flex: 0 0 calc(50% - (var(--gap) + var(--peek)) / 2);
  min-height: 280px;
  border-radius: var(--card-radius);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}
.card-content { flex: 1 1 55%; display: flex; flex-direction: column; justify-content: center; padding: 20px 44px; gap: 14px; z-index: 2; }
.card-brand { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; margin-bottom: 4px; }
.card-heading { font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.2; margin: 0; }
.card-description { font-size: 15px; line-height: 1.5; margin: 0; max-width: 420px; }
.card-cta {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; background: #ffffff; color: var(--btn-blue-text);
  font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 8px;
  border: none; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease;
  text-decoration: none;
}
.card-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.card-cta svg { width: 16px; height: 16px; }
.card-visual { flex: 1 1 45%; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.card-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.card--dark { background: linear-gradient(135deg, #1a1a1c 0%, #0c0c0d 100%); color: var(--dark-text); }
.card--dark .card-brand { color: var(--dark-text); }
.card--dark .card-description { color: var(--dark-muted); }
.card--dark .card-eyebrow { position: absolute; top: 28px; right: 40px; color: var(--dark-muted); font-size: 13px; text-align: right; z-index: 2; }
.instructor-tag {
  position: absolute; bottom: 20px; right: 24px;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 12px;
  padding: 6px 12px; border-radius: 999px; z-index: 2; backdrop-filter: blur(4px);
}

.card--blue { background: linear-gradient(120deg, var(--blue-bg-1) 0%, var(--blue-bg-2) 100%); color: var(--blue-text); }
.card--blue .card-description { color: rgba(255,255,255,0.9); }
.card--blue .card-cta { color: var(--color-primary-hover); }
.card--blue .card-visual::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 120, 170, 0.45) 0%, transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(255, 220, 140, 0.30) 0%, transparent 45%);
  z-index: 1;
}

.carousel-dots { width: 100%; margin: 18px 0 0; padding: 0; display: flex; gap: 8px; }
.carousel-dots[hidden] { display: none; }
.dot { height: 8px; width: 8px; border-radius: 999px; background: #c7ccd6; border: none; cursor: pointer; padding: 0; transition: width 300ms ease, background 300ms ease; }
.dot.active { width: 26px; background: #1a1a1c; }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.9); box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; transition: background 180ms ease;
}
.carousel-arrow:hover { background: #ffffff; }
.carousel-arrow.prev { left: 12px; }
.carousel-arrow.next { right: 12px; }
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow[hidden] { display: none; }

/* Empty state — shown only if you choose to render it instead of
   fully hiding the section; see EMPTY_STATE_MODE in script.js */
.carousel-empty {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  border: 1px dashed var(--color-border-light);
  border-radius: var(--card-radius);
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. TRENDING COURSES
   Cards render from the `courses` array in script.js. On hover
   (pointer devices only — see media query below) a shared popover
   is positioned over the card via JS. No price and no "Add to
   cart" in the popover; price stays on the closed card, and the
   popover action is always "Enroll now".
   ========================================================================== */
.courses-section { width: 100%; padding: 56px 24px 72px; }
.courses-header { margin-bottom: 24px; }
.courses-header h2 { font-size: 28px; font-weight: var(--fw-bold); color: var(--color-text-main); }

.courses-viewport {
  position: relative;
  max-width: 1392px;
  margin: 0 auto;
}
.courses-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}
.courses-track::-webkit-scrollbar { display: none; }

.courses-next {
  position: absolute;
  top: 40%;
  right: -8px;
  transform: translateY(-50%);
}

.course-card {
  position: relative;
  flex: 0 0 calc(25% - 15px);
  min-width: 240px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.course-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: rgba(255,255,255,0.92);
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.course-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-text-main);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-instructor { font-size: 13px; color: var(--color-text-muted); }

.course-rating-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.rating-score { font-size: 13px; font-weight: var(--fw-bold); color: #b45309; display: inline-flex; align-items: center; gap: 3px; }
.rating-score svg { width: 13px; height: 13px; fill: #eab308; stroke: none; }
.rating-count { font-size: 12px; color: var(--color-text-muted); border: 1px solid var(--color-border-light); border-radius: 4px; padding: 1px 6px; }

.course-badges { display: flex; gap: 6px; align-items: center; }
.badge-bestseller {
  background: #e7f3f4;
  color: #164e52;
  font-size: 12px;
  font-weight: var(--fw-bold);
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
}

.course-price { font-size: 16px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-top: 4px; }
.course-cta-line { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-primary); margin-top: 4px; }

/* --- Shared hover popover (positioned via JS, fixed to viewport) --- */
.course-popover {
  position: fixed;
  width: 320px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.22);
  padding: 20px;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-popover.visible { opacity: 1; visibility: visible; pointer-events: auto; }

.course-popover::before {
  content: "";
  position: absolute;
  top: 32px;
  width: 14px;
  height: 14px;
  background: var(--color-white);
  transform: rotate(45deg);
  box-shadow: -3px 3px 6px rgba(0,0,0,0.06);
}
.course-popover.arrow-left::before { left: -7px; }
.course-popover.arrow-right::before { right: -7px; }

.popover-title { font-size: 17px; font-weight: var(--fw-bold); color: var(--color-text-main); line-height: 1.3; }
.popover-meta-row { display: flex; align-items: center; gap: 10px; }
.popover-updated { font-size: 13px; color: var(--color-text-muted); }
.popover-submeta { font-size: 13px; color: var(--color-text-muted); }
.popover-desc { font-size: 13.5px; color: var(--color-text-main); line-height: 1.5; }
.popover-bullets { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.popover-bullets li { font-size: 13px; color: var(--color-text-main); display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.popover-bullets li svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; stroke: var(--color-primary); }
.popover-cta { width: 100%; height: 46px; margin-top: 4px; }

/* Popover only ever appears on devices with real hover + a fine
   pointer (mouse/trackpad). Touch devices skip straight to the
   card link instead of a hover state that can't exist for them. */
@media (hover: none), (pointer: coarse) {
  .course-popover { display: none !important; }
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .mega-menu-grid { gap: 24px; }
  .search-form { width: 260px; }
  .course-card { flex: 0 0 calc(33.333% - 14px); }
}

@media (max-width: 992px) {
  :root { --header-padding-x: 20px; --peek: 40px; }
  .mega-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-logo img { height: 26px; }
  .search-form { width: 200px; }
  .carousel-card { flex-basis: 100%; }
  .card-content { padding: 32px; }
  .card-visual { flex-basis: 40%; }
  .course-card { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; z-index: 90; }
  .main-header { height: 64px; }
  .main-header-container { position: relative; }
  .brand-logo img { height: 24px; }

  .nav-right { display: none; }

  .primary-nav {
    display: flex;
    position: absolute;
    top: 64px; left: 0;
    width: 100%;
    height: auto;              /* override the desktop height:100% rule above,
                                   which otherwise clips this to the 64px header
                                   height once the dropdown becomes absolute */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background-color: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0 0 18px 18px;
    gap: 2px;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.99);
    transform-origin: top center;
    transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 240ms;
    pointer-events: none;
  }
  .primary-nav.mobile-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Backdrop behind the open mobile menu — created by nav.js,
     tap-to-close, fades in/out with the menu. */
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, 0.35);
    z-index: 75;
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 240ms;
  }
  .mobile-nav-backdrop.visible { opacity: 1; visibility: visible; }

  .primary-nav .nav-link {
    padding: 14px 2px;
    border-bottom: 1px solid var(--color-border-light);
    width: 100%;
    transition: background-color 150ms ease, padding-left 150ms ease;
  }
  .primary-nav .nav-link:active { background-color: #f7f8f9; }

  .explore-wrapper { height: auto; width: 100%; flex-direction: column; align-items: flex-start; }
  .explore-btn {
    width: 100%; justify-content: space-between;
    padding: 14px 2px;
    border-bottom: 1px solid var(--color-border-light);
  }

  .mega-menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: none; width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
  }
  .explore-wrapper.active .mega-menu { max-height: 420px; overflow-y: auto; }
  .mega-menu-container { padding: 16px 0; }
  .mega-menu-grid { grid-template-columns: 1fr; gap: 20px; }

  .mobile-only-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
  }
  .search-form--mobile { width: 100%; }
  .mobile-only-block .search-input { height: 44px; }

  :root { --peek: 24px; --gap: 12px; }
  .carousel-section { padding: 24px 14px; }
  .carousel-viewport { border-radius: 14px; }
  .carousel-card { flex-direction: column; min-height: auto; border-radius: 14px; }
  .card-content { flex-basis: auto; padding: 18px 20px 15px; order: 1; gap: 10px; }
  .card-visual { flex-basis: auto; height: 140px; order: 2; }
  .card-heading { font-size: 20px; }
  .card-description { font-size: 13.5px; max-width: none; }
  .card-cta { font-size: 14px; padding: 10px 18px; }
  .card--dark .card-eyebrow { display: none; }
  .carousel-arrow { display: none !important; }
  .carousel-dots { padding: 0 20px; margin-top: 14px; }

  .lecture-row { flex-wrap: wrap; padding: 10px 14px; }
  .lecture-title { white-space: normal; }

  .courses-section { padding: 40px 14px 56px; }
  .courses-header { padding: 0 6px; margin-bottom: 16px; }
  .courses-header h2 { font-size: 22px; }
  .course-card { flex: 0 0 72%; min-width: 220px; }
  .courses-track { scroll-snap-type: x mandatory; }
  .course-card { scroll-snap-align: start; }
  .courses-next { display: none; }

  /* Same padding change as .courses-section above, at the same
     breakpoint, so Trending Courses and Skills-section cards never
     drift apart in width between 641px and 768px. */
  .skills-section { padding: 0 14px 48px; }
}

@media (max-width: 480px) {
  .top-nav-list { gap: 0; }
  .top-nav-link { font-size: 11px; padding: 0 10px; }
  .brand-logo img { height: 22px; }
  :root { --peek: 16px; --header-padding-x: 16px; }
  .carousel-card { min-height: 320px; }
  .card-visual { height: 120px; }
}
/* ==========================================================================
   10. COURSE DETAIL PAGE (course.html)
   Rendered entirely by course.js from the `courses` array in
   data.js. No pricing appears anywhere on this page by design —
   every CTA is "Enroll now", which opens the enroll modal
   (section 11 below) instead of a checkout flow.
   ========================================================================== */
.course-hero {
  background: linear-gradient(180deg, #0c0c0c 0%, #1a1a1c 100%);
  color: var(--color-white);
  padding: 32px 24px 56px;
}
.course-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}

.course-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--color-accent); margin-bottom: 18px; }
.course-breadcrumb span { color: rgba(255,255,255,0.4); }

.course-hero-title { font-size: 32px; font-weight: var(--fw-bold); line-height: 1.25; margin-bottom: 14px; }
.course-hero-subtitle { font-size: 16px; color: rgba(255,255,255,0.82); line-height: 1.55; margin-bottom: 18px; max-width: 640px; }

.course-hero-badges { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.badge-highest-rated { background: #fef3e2; color: #92400e; font-size: 12px; font-weight: var(--fw-bold); padding: 3px 8px; border-radius: 3px; }

.course-hero-instructor { font-size: 14px; color: rgba(255,255,255,0.85); margin-bottom: 10px; }
.course-hero-instructor a { color: var(--color-accent); text-decoration: underline; }

.course-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 20px; }
.course-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.course-hero-meta span svg { width: 15px; height: 15px; flex-shrink: 0; }

.course-hero-rating-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-rating-block { display: flex; flex-direction: column; gap: 3px; }
.hero-rating-top { display: flex; align-items: center; gap: 8px; }
.hero-rating-number { font-size: 18px; font-weight: var(--fw-bold); color: #f5c518; }
.hero-rating-stars { display: inline-flex; gap: 2px; }
.hero-rating-stars svg { width: 15px; height: 15px; fill: #f5c518; stroke: none; }
.hero-rating-count { font-size: 13px; color: var(--color-accent); text-decoration: underline; }
.course-hero-students { font-size: 13px; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 6px; }
.course-hero-students svg { width: 15px; height: 15px; flex-shrink: 0; }

/* --- Sidebar card: thumbnail + non-pricing feature list + Enroll --- */
.course-sidebar-card {
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  position: sticky;
  top: 24px;
}
.course-sidebar-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
  font-size: 30px;
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.course-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0,0,0,0.08);
  cursor: pointer;
}
.thumb-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: transform 150ms ease;
}
.thumb-play-overlay:hover .thumb-play-btn { transform: scale(1.06); }
.thumb-play-btn svg { width: 20px; height: 20px; fill: #1a1a1c; stroke: none; margin-left: 3px; }
.thumb-preview-label {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.course-sidebar-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.course-sidebar-includes { display: flex; flex-direction: column; gap: 10px; }
.course-sidebar-includes li { list-style: none; display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--color-text-main); }
.course-sidebar-includes li svg { flex-shrink: 0; width: 17px; height: 17px; stroke: var(--color-text-muted); margin-top: 1px; }

.course-enroll-btn { width: 100%; height: 50px; font-size: 16px; }

/* --- Body sections --- */
.course-body-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}
.course-body-section + .course-body-section { border-top: 1px solid var(--color-border-light); }
.course-body-inner { max-width: 800px; }
.course-section-title { font-size: 24px; font-weight: var(--fw-bold); margin-bottom: 20px; }

.learn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  background: #f7f8f9;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 24px 28px;
}
.learn-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--color-text-main); }
.learn-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(108, 43, 217, 0.1);
  stroke: var(--color-primary);
  margin-top: 1px;
}

.includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.includes-item { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.includes-item svg { flex-shrink: 0; width: 19px; height: 19px; stroke: var(--color-text-muted); }

/* --- Course content accordion (native <details>) --- */
.content-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-text-muted); margin-bottom: 14px; }
.content-accordion { border: 1px solid var(--color-border-light); border-radius: 4px; overflow: hidden; }
.content-week { border-bottom: 1px solid var(--color-border-light); }
.content-week:last-child { border-bottom: none; }
.content-week summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  background: #f7f8f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
}
.content-week summary::-webkit-details-marker { display: none; }
.content-week summary .chev {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.content-week[open] summary .chev { transform: rotate(180deg); }
.content-week summary .week-meta { color: var(--color-text-muted); font-weight: var(--fw-regular); font-size: 13px; }
.content-week-body { padding: 0; }
.lecture-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px 11px 20px;
  font-size: 13.5px;
  border-top: 1px solid var(--color-border-light);
}
.lecture-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--color-text-main); }
.lecture-row-left svg { flex-shrink: 0; width: 17px; height: 17px; stroke: var(--color-text-muted); }
.lecture-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecture-preview { flex-shrink: 0; color: var(--color-primary); font-size: 12.5px; font-weight: var(--fw-semibold); text-decoration: underline; }
.lecture-duration { flex-shrink: 0; color: var(--color-text-muted); font-size: 12.5px; }

.requirements-list { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5; }

.description-block p { font-size: 14.5px; line-height: 1.65; color: var(--color-text-main); margin-bottom: 14px; }
.description-block.clamped { max-height: 130px; overflow: hidden; position: relative; }
.description-block.clamped::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 50px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 90%);
}
.show-more-btn { background: none; border: none; color: var(--color-primary); font-weight: var(--fw-semibold); font-size: 14px; cursor: pointer; padding: 8px 0; display: inline-flex; align-items: center; gap: 4px; }
.show-more-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.show-more-btn.expanded svg { transform: rotate(180deg); }

.instructor-card { display: flex; gap: 16px; }
.instructor-avatar {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  overflow: hidden;
}
.instructor-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instructor-info h3 { font-size: 18px; font-weight: var(--fw-bold); margin-bottom: 2px; }
.instructor-info .instructor-role { font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 10px; }
.instructor-stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--color-text-main); margin-bottom: 12px; }
.instructor-stats span { display: inline-flex; align-items: center; gap: 6px; }
.instructor-stats svg { width: 14px; height: 14px; stroke: var(--color-text-muted); }

.reviews-summary { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: var(--fw-bold); margin-bottom: 20px; }
.reviews-summary svg { width: 20px; height: 20px; fill: #eab308; stroke: none; }
.reviews-summary .reviews-count { font-size: 14px; font-weight: var(--fw-regular); color: var(--color-text-muted); }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.review-card { display: flex; flex-direction: column; gap: 8px; }
.review-head { display: flex; align-items: center; gap: 10px; }
.review-avatar { width: 34px; height: 34px; border-radius: 50%; background: #e1e3e5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--fw-bold); color: var(--color-text-muted); flex-shrink: 0; }
.review-name-row { display: flex; flex-direction: column; }
.review-name { font-size: 13.5px; font-weight: var(--fw-semibold); }
.review-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.review-stars { display: inline-flex; gap: 1px; }
.review-stars svg { width: 12px; height: 12px; fill: #eab308; stroke: none; }
.review-text { font-size: 13.5px; line-height: 1.55; color: var(--color-text-main); }

.related-courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* --- Responsive --- */
@media (max-width: 992px) {
  .course-hero-grid { grid-template-columns: 1fr; }
  .course-sidebar-card { position: static; max-width: 420px; }
  .learn-grid, .includes-grid, .reviews-grid { grid-template-columns: 1fr; }
  .related-courses-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .course-hero { padding: 24px 16px 40px; }
  .course-hero-title { font-size: 24px; }
  .course-body-section { padding: 28px 16px; }
  .course-section-title { font-size: 20px; }
  .learn-grid { padding: 18px 18px; grid-template-columns: 1fr; }
  .related-courses-grid { grid-template-columns: 1fr; }
  .instructor-card { flex-direction: column; }
}

/* ==========================================================================
   11. ENROLL MODAL
   Shared across pages. Opens on any "Enroll now" click. Submits
   the 5 fields below plus the selected course — see enroll.js.
   ========================================================================== */
.enroll-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease;
}
.enroll-modal-overlay.open { opacity: 1; visibility: visible; }

.enroll-modal {
  background: var(--color-white);
  border-radius: 12px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease;
}
.enroll-modal-overlay.open .enroll-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.enroll-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 4px;
}
.enroll-modal-header h3 { font-size: 19px; font-weight: var(--fw-bold); }
.enroll-modal-header p { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }
.enroll-modal-close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); flex-shrink: 0;
  transition: background-color 150ms ease;
}
.enroll-modal-close:hover { background: var(--color-border-light); }

.enroll-form { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.enroll-field { display: flex; flex-direction: column; gap: 6px; }
.enroll-field label { font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-text-main); }
.enroll-field input,
.enroll-field select,
.enroll-field textarea {
  font-family: var(--font-primary);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  color: var(--color-text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.enroll-field textarea { resize: vertical; min-height: 64px; font-family: var(--font-primary); }
.enroll-field input:focus,
.enroll-field select:focus,
.enroll-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.enroll-submit-btn { width: 100%; height: 48px; font-size: 15px; margin-top: 4px; }

.enroll-status {
  font-size: 13px;
  border-radius: 6px;
  padding: 10px 12px;
  display: none;
}
.enroll-status.show { display: block; }
.enroll-status.success { background: #e7f6ed; color: #166534; }
.enroll-status.error { background: #fdecec; color: #991b1b; }

@media (max-width: 480px) {
  .enroll-modal { max-width: 100%; border-radius: 10px; }
  .enroll-modal-header { padding: 18px 18px 4px; }
  .enroll-form { padding: 14px 18px 20px; }
}

/* ==========================================================================
   12. PROMO BANNER ("Reimagine your career" section)
   Sits between Trending Courses and whatever comes next. Visual
   panels on the right are gradient placeholders — swap them for
   real photos in .promo-visual whenever you have them; nothing
   else needs to change.
   ========================================================================== */
.promo-section { width: 100%; padding: 8px 24px 64px; }

.promo-card {
  max-width: 1392px;
  margin: 0 auto;
  background: linear-gradient(135deg, #14141a 0%, #1e1e26 100%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px;
  overflow: hidden;
}

.promo-content { flex: 1 1 44%; min-width: 0; }
.promo-heading { font-size: 30px; font-weight: var(--fw-bold); color: #fff; line-height: 1.25; margin-bottom: 14px; }
.promo-description { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; max-width: 460px; margin-bottom: 26px; }

.promo-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-bottom: 30px; }
.promo-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: var(--fw-semibold); color: #fff; }
.promo-feature-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.promo-feature-icon svg { width: 16px; height: 16px; }
.promo-feature-icon.icon-purple { background: #2c2a4a; color: #b4a9ff; }
.promo-feature-icon.icon-green  { background: #1c332b; color: #6ee7b7; }
.promo-feature-icon.icon-yellow { background: #3a2f14; color: #fbbf24; }
.promo-feature-icon.icon-teal   { background: #123334; color: #5eead4; }

.promo-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #14141a;
  font-weight: var(--fw-bold); font-size: 15px;
  padding: 0 26px; height: 46px; border-radius: 8px;
  text-decoration: none; transition: transform 150ms ease;
}
.promo-cta:hover { transform: translateY(-2px); }

/* --- Visual: 3 sample gradient panels + one decorative shape --- */
.promo-visual {
  flex: 1 1 50%;
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: 380px;
  min-width: 0;
}
.promo-visual-col {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-visual-tall  { flex: 0 0 22%; }
.promo-visual-large { flex: 0 0 42%; }
.promo-visual-small { flex: 0 0 26%; align-self: flex-end; height: 78%; }

.promo-gradient-1 { background: linear-gradient(160deg, #38bdf8 0%, #6d28d9 60%, #4c1d95 100%); }
.promo-gradient-2 { background: linear-gradient(150deg, #cbd5e1 0%, #94a3b8 100%); }
.promo-gradient-3 { background: linear-gradient(160deg, #a78bfa 0%, #6d28d9 100%); }
.promo-gradient-3 svg { width: 56px; height: 56px; opacity: 0.9; }

.promo-decor-shape {
  position: absolute;
  top: 16px;
  right: -14px;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 60%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(12deg);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.promo-decor-shape svg { width: 30px; height: 30px; color: #6d28d9; transform: rotate(-12deg); }

/* --- Responsive --- */
@media (max-width: 992px) {
  .promo-card { flex-direction: column; padding: 36px 28px; gap: 32px; }
  .promo-content { flex-basis: auto; width: 100%; }
  .promo-visual { flex-basis: auto; width: 100%; height: 300px; }
}

@media (max-width: 640px) {
  .promo-section { padding: 0 16px 48px; }
  .promo-card { padding: 28px 20px; border-radius: 18px; }
  .promo-heading { font-size: 24px; }
  .promo-features { grid-template-columns: 1fr; gap: 14px; }
  .promo-visual { height: 220px; gap: 10px; }
  .promo-decor-shape { width: 54px; height: 54px; top: 10px; right: -10px; }
  .promo-decor-shape svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   13. SKILLS SECTION ("Skills to transform your career and life")
   Reuses .courses-viewport / .courses-track / .course-card from the
   Trending Courses styles above — same card design on purpose.
   Tabs filter which cards render; see initSkillsSection() in
   script.js and SKILLS_TABS in data.js.
   ========================================================================== */
.skills-section { width: 100%; padding: 8px 24px 64px; }
.skills-header { margin-bottom: 6px; }
.skills-header h2 { font-size: 28px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 6px; }
.skills-header p { font-size: 14.5px; color: var(--color-text-muted); }

.skills-tabs {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border-light);
  margin: 22px 0 24px;
}
.skills-tabs::-webkit-scrollbar { display: none; }

.skills-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 0 0 14px;
  position: relative;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.skills-tab:hover { color: var(--color-text-main); }
.skills-tab.active {
  color: var(--color-text-main);
  font-weight: var(--fw-bold);
}
.skills-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
}

.skills-show-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
}
.skills-show-all svg { width: 15px; height: 15px; }
.skills-show-all:hover { text-decoration: underline; }

/* Matches .courses-section's own 768px padding change (see the
   max-width:768px block near line 700) so Trending Courses and
   Skills-section card widths never drift apart between 641–768px.
   Placed here, AFTER the base .skills-section rule above, since an
   earlier attempt positioned before that base rule was silently
   losing the cascade despite the narrower media condition. */
@media (max-width: 768px) {
  .skills-section { padding: 0 14px 48px; }
}

@media (max-width: 640px) {
  .skills-section { padding: 0 14px 48px; }
  .skills-header h2 { font-size: 22px; }
  .skills-tabs { gap: 20px; margin: 18px 0 18px; }
  .skills-tab { font-size: 14px; padding-bottom: 12px; }
}

/* ==========================================================================
   14. TRUST BAR ("Trusted by companies" strip)
   Auto-scrolling marquee — the logo list is rendered twice back
   to back in JS, and this animation scrolls exactly -50% (one
   full set) on a loop, so it resets with no visible seam. Pauses
   on hover/focus so it doesn't fight anyone trying to read a name.
   ========================================================================== */
.trust-section { width: 100%; padding: 44px 0; background: #f7f8f9; overflow: hidden; }
.trust-heading { text-align: center; font-size: 15px; color: var(--color-text-muted); margin-bottom: 28px; }

.trust-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.trust-marquee-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: trust-scroll 28s linear infinite;
}
.trust-marquee:hover .trust-marquee-track,
.trust-marquee:focus-within .trust-marquee-track { animation-play-state: paused; }

@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.trust-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--color-border-light);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.trust-logo:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.06); border-color: #d8dbe0; }

.trust-logo-mark {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}
.trust-logo-name { font-size: 15px; font-weight: var(--fw-semibold); color: #4b5563; white-space: nowrap; }
.trust-logo img { height: 24px; width: auto; display: block; filter: grayscale(100%); opacity: 0.75; }

@media (max-width: 640px) {
  .trust-section { padding: 32px 0; }
  .trust-heading { font-size: 13.5px; margin-bottom: 22px; padding: 0 20px; }
  .trust-marquee-track { gap: 32px; animation-duration: 20s; }
  .trust-logo { padding: 8px 14px; }
  .trust-logo-name { font-size: 13.5px; }
}

/* Respect reduced-motion preferences — freeze on a single frame
   instead of forcing an animation on people who've asked not to. */
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track { animation: none; }
}

/* ==========================================================================
   15. TESTIMONIALS ("Join others transforming their lives...")
   Full carousel: prev/next arrows page through the track, with
   dot indicators (reusing .carousel-dots/.dot from the hero
   carousel) tracking the current page. See initTestimonials() in
   script.js for the paging/dot logic.
   ========================================================================== */
.testimonials-section { width: 100%; padding: 56px 24px 20px; }
.testimonials-title { font-size: 26px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 24px; max-width: 700px; }

.testimonials-viewport { padding: 0 52px; }

.testimonials-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}
.testimonials-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex: 0 0 calc(25% - 15px);
  min-width: 250px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.testimonial-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.08); transform: translateY(-2px); }

.testimonial-quote-mark { font-size: 32px; line-height: 1; color: var(--color-primary); font-weight: var(--fw-bold); font-family: Georgia, serif; }
.testimonial-text { font-size: 14px; line-height: 1.6; color: var(--color-text-main); flex: 1; }

.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}
.testimonial-name { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--color-text-main); }
.testimonial-role { font-size: 12.5px; color: var(--color-text-muted); }

.testimonial-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: var(--fw-semibold);
  color: var(--color-primary); text-decoration: none;
}
.testimonial-link svg { width: 14px; height: 14px; }
.testimonial-link:hover { text-decoration: underline; }

/* --- Carousel arrows: positioned outside the card row, disable
       (fade + no pointer) at either end instead of disappearing --- */
.testimonials-prev { left: 0; }
.testimonials-next { right: 0; }
.testimonials-prev:disabled,
.testimonials-next:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.testimonials-dots { max-width: none; margin: 18px auto 0; padding: 0; justify-content: center; }

@media (max-width: 1200px) {
  .testimonial-card { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 992px) {
  .testimonial-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 640px) {
  .testimonials-section { padding: 40px 16px 8px; }
  .testimonials-title { font-size: 21px; }
  .testimonials-viewport { padding: 0 40px; }
  .testimonial-card { flex: 0 0 100%; min-width: 0; padding: 20px; }
}

/* ==========================================================================
   16. SITE FOOTER
   Rendered by footer.js into <footer id="siteFooter">. Present on
   every page (index.html, course.html, and any future page) —
   just add the placeholder + footer.js script tag.
   ========================================================================== */
.footer-section { width: 100%; background: #f7f8f9; }

.footer-top { padding: 56px 24px 40px; border-top: 1px solid var(--color-border-light); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }

.footer-col h4 { font-size: 15px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  font-size: 13.5px;
  color: #5b626b;
  text-decoration: none;
  line-height: 1.4;
  transition: color 150ms ease;
}
.footer-col a:hover { color: var(--color-primary); text-decoration: underline; }

.footer-bottom { padding-top: 40px; border-top: 1px solid var(--color-border-light); }

.footer-lower-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.footer-lower-cols { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 24px; flex: 1 1 560px; }

.footer-app-badges { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0c0c0c;
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
  width: 190px;
}
.app-badge svg { width: 24px; height: 24px; flex-shrink: 0; }
.app-badge span { display: flex; flex-direction: column; line-height: 1.2; font-size: 15px; font-weight: var(--fw-semibold); }
.app-badge small { font-size: 10px; font-weight: var(--fw-regular); opacity: 0.85; }

.footer-legal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 24px;
  border-top: 1px solid var(--color-border-light);
}
.footer-legal-row p { font-size: 13px; color: var(--color-text-muted); }

.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: #0c0c0c;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, transform 150ms ease;
}
.footer-social a:hover { background: var(--color-primary); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; fill: #fff; }

@media (max-width: 992px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-lower-cols { grid-template-columns: repeat(2, 1fr); flex-basis: 100%; }
  .footer-lower-grid { flex-direction: column; }
  .footer-app-badges { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .footer-top { padding: 40px 16px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-lower-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-legal-row { padding: 18px 16px; flex-direction: column; align-items: flex-start; }
  .app-badge { width: 100%; max-width: 220px; }
}

/* ==========================================================================
   17. STATS SECTION — animated count-up numbers (extras.js)
   ========================================================================== */
.stats-section { width: 100%; padding: 40px 24px; background: #ffffff; border-bottom: 1px solid var(--color-border-light); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-number {
  font-size: 36px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 14px; color: var(--color-text-muted); font-weight: var(--fw-medium); }

@media (max-width: 768px) {
  .stats-section { padding: 32px 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .stat-number { font-size: 28px; }
  .stat-label { font-size: 12.5px; }
}

/* ==========================================================================
   18. QUIZ TEASER + MODAL
   ========================================================================== */
.quiz-teaser-section { width: 100%; padding: 8px 24px 0; }
.quiz-teaser-card {
  max-width: 1392px;
  margin: 0 auto;
  background: linear-gradient(120deg, #f5f3ff 0%, #eef2ff 100%);
  border: 1px solid #e4defc;
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.quiz-teaser-icon {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.quiz-teaser-icon svg { width: 26px; height: 26px; }
.quiz-teaser-text { flex: 1 1 320px; min-width: 220px; }
.quiz-teaser-text h3 { font-size: 19px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 4px; }
.quiz-teaser-text p { font-size: 14px; color: var(--color-text-muted); }
.quiz-teaser-btn { flex-shrink: 0; height: 48px; padding: 0 26px; white-space: nowrap; }

@media (max-width: 640px) {
  .quiz-teaser-section { padding: 0 16px; }
  .quiz-teaser-card { padding: 22px 20px; flex-direction: column; align-items: flex-start; text-align: left; }
  .quiz-teaser-text { flex: 0 1 auto; min-width: 0; width: 100%; }
  .quiz-teaser-btn { width: 100%; text-align: center; justify-content: center; }
}

/* --- Quiz modal (reuses the enroll-modal visual language) --- */
.quiz-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 10, 12, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease;
}
.quiz-modal-overlay.open { opacity: 1; visibility: visible; }

.quiz-modal {
  background: var(--color-white);
  border-radius: 16px;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease;
}
.quiz-modal-overlay.open .quiz-modal { transform: translateY(0) scale(1); opacity: 1; }

.quiz-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 0;
}
.quiz-modal-header h3 { font-size: 18px; font-weight: var(--fw-bold); }
.quiz-modal-close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: background-color 150ms ease;
}
.quiz-modal-close:hover { background: var(--color-border-light); }

.quiz-progress { display: flex; gap: 6px; padding: 16px 24px 0; }
.quiz-progress-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--color-border-light); }
.quiz-progress-dot.done { background: var(--color-primary); }

.quiz-step { padding: 20px 24px 24px; }
.quiz-question { font-size: 17px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 16px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: block; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--color-border-light);
  border-radius: 10px; padding: 14px 16px;
  font-size: 14.5px; font-weight: var(--fw-medium); color: var(--color-text-main);
  cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease;
}
.quiz-option:hover { border-color: var(--color-primary); background: #f7f5ff; }

.quiz-result { padding: 8px 24px 24px; text-align: center; }
.quiz-result-label { font-size: 13px; color: var(--color-text-muted); margin-bottom: 6px; }
.quiz-result-title { font-size: 21px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 10px; }
.quiz-result-desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 20px; }
.quiz-result-thumb {
  width: 100%; aspect-ratio: 21/9; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: var(--fw-bold);
  margin-bottom: 20px;
}
.quiz-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.quiz-result-actions .btn { flex: 1; min-width: 150px; }
.quiz-retake-btn {
  background: none; border: 1.5px solid var(--color-border-light);
  color: var(--color-text-main); font-weight: var(--fw-semibold);
  border-radius: 8px; height: 46px; cursor: pointer;
}

/* ==========================================================================
   19. LIVE ENROLLMENT TICKER (extras.js) — floating toast, bottom-left
   ========================================================================== */
.enrollment-toast {
  position: fixed;
  bottom: 20px;
  left: 20px;
  max-width: 320px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 400;
  transform: translateY(16px);
  opacity: 0;
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease, visibility 320ms;
}
.enrollment-toast.visible { transform: translateY(0); opacity: 1; visibility: visible; }
.enrollment-toast-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}
.enrollment-toast-text { font-size: 12.5px; line-height: 1.4; color: var(--color-text-main); }
.enrollment-toast-text strong { font-weight: var(--fw-bold); }
.enrollment-toast-course { color: var(--color-primary); font-weight: var(--fw-semibold); }
.enrollment-toast-time { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.enrollment-toast-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 15px; line-height: 1;
  padding: 2px;
}

@media (max-width: 640px) {
  .enrollment-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ==========================================================================
   17. NEXTEXC ASSISTANT (chat widget)
   Built by chatbot.js. Launcher sits bottom-right (the enrollment
   toast in extras.js lives bottom-left, so they never collide).
   ========================================================================== */
.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(108, 43, 217, 0.4);
  z-index: 400;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.chat-launcher:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 36px rgba(108, 43, 217, 0.5); }
.chat-launcher svg { width: 26px; height: 26px; position: absolute; transition: opacity 150ms ease, transform 150ms ease; }
.chat-launcher-icon-close { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.chat-launcher.open .chat-launcher-icon-chat { opacity: 0; transform: rotate(45deg) scale(0.7); }
.chat-launcher.open .chat-launcher-icon-close { opacity: 1; transform: rotate(0) scale(1); }
.chat-launcher-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 140px);
  background: var(--color-white);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 399;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 220ms cubic-bezier(0.22,1,0.36,1), transform 220ms cubic-bezier(0.22,1,0.36,1), visibility 220ms;
}
.chat-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* Animated gradient border while the assistant is "typing" —
   a thin rotating gradient ring around the panel, subtle. */
.chat-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent), var(--color-primary));
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
  z-index: 5;
}
.chat-panel.chat-thinking::before {
  opacity: 1;
  animation: chat-border-flow 2.2s linear infinite;
}
@keyframes chat-border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.msg-fade-in { animation: chat-msg-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-panel-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.chat-panel-header::before {
  /* soft decorative glow, purely cosmetic */
  content: "";
  position: absolute;
  top: -40%; right: -15%;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.chat-panel-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 7px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18), 0 0 0 2.5px rgba(255,255,255,0.35);
  position: relative;
  z-index: 1;
}
.chat-panel-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chat-panel-title { font-size: 15.5px; font-weight: var(--fw-bold); letter-spacing: 0.1px; }
.chat-panel-status { font-size: 12px; opacity: 0.92; display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.chat-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: chat-status-pulse 2s infinite;
}
@keyframes chat-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.chat-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f7f8f9;
}

.chat-msg { max-width: 84%; font-size: 13.5px; line-height: 1.5; }
.chat-msg-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 4px 14px 14px 14px;
  padding: 11px 14px;
  color: var(--color-text-main);
}
.chat-msg-bot strong { display: block; font-size: 14px; margin-bottom: 2px; }
.chat-msg-bot p { color: var(--color-text-main); font-size: 13.5px; margin: 4px 0; }
.chat-msg-user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
  padding: 11px 14px;
}

.chat-typing { display: flex; align-items: center; gap: 4px; padding: 14px 16px !important; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text-muted);
  display: inline-block;
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-schedule-card {
  margin-top: 8px;
  background: #f7f8f9;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-schedule-row { font-size: 12.5px; color: var(--color-text-main); }
.chat-schedule-row strong { font-weight: var(--fw-semibold); color: var(--color-text-muted); margin-right: 4px; }

.chat-list { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.chat-list li { font-size: 13px; color: var(--color-text-main); }

.chat-course-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
}
.chat-course-link:hover { text-decoration: underline; }

.chat-panel-quickreplies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
  flex-shrink: 0;
  background: #f7f8f9;
}
.chat-quick-reply {
  background: #fff;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.chat-quick-reply:hover { background: var(--color-primary); color: #fff; }

.chat-panel-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
  background: #fff;
}
.chat-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-family: var(--font-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chat-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.chat-send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}
.chat-send-btn:hover { background: var(--color-primary-hover); }
.chat-send-btn svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .chat-launcher { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .chat-panel {
    right: 12px;
    left: 12px;
    bottom: 84px;
    width: auto;
    max-width: none;
    height: min(560px, calc(100vh - 130px));
  }
}

/* ==========================================================================
   18. SUCCESS STORIES PAGE (success-stories.html)
   Same theme/tokens as the rest of the site — the dark card here
   reuses the exact same dark treatment already used for the hero
   carousel and course-detail hero, not a new theme.
   ========================================================================== */
.stories-hero-section { width: 100%; padding: 40px 24px 8px; background: #f7f9fc; }
.stories-hero-header { text-align: center; max-width: 620px; margin: 0 auto 32px; }
.stories-hero-header h1 { font-size: 34px; font-weight: var(--fw-bold); color: var(--color-text-main); margin-bottom: 10px; }
.stories-hero-header p { font-size: 15px; color: var(--color-text-muted); }

.stories-featured-card {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #1a1a1c 0%, #0c0c0d 100%);
  border-radius: var(--card-radius);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
.stories-featured-media { position: relative; min-height: 320px; }
.stories-featured-content { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: #fff; }
.stories-featured-badge {
  display: inline-flex; width: fit-content;
  background: rgba(255,255,255,0.12);
  color: var(--color-accent);
  font-size: 12px; font-weight: var(--fw-bold);
  padding: 4px 10px; border-radius: 4px;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.stories-featured-content h3 { font-size: 26px; font-weight: var(--fw-bold); }
.stories-featured-role { font-size: 14px; color: rgba(255,255,255,0.75); }
.stories-featured-role strong { color: #fff; }
.stories-featured-package { font-size: 28px; font-weight: var(--fw-bold); color: var(--color-accent); margin: 4px 0; }
.stories-featured-quote { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); font-style: italic; max-width: 420px; }
.stories-featured-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; width: fit-content;
  background: #fff; color: var(--color-primary);
  font-size: 13.5px; font-weight: var(--fw-bold);
  padding: 10px 18px; border-radius: 8px;
  text-decoration: none;
  transition: transform 150ms ease;
}
.stories-featured-link:hover { transform: translateY(-2px); }
.stories-featured-link svg { width: 15px; height: 15px; }

/* --- Placements grid --- */
.stories-grid-section { width: 100%; padding: 56px 24px; }
.stories-grid-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.stories-grid-header h2 { font-size: 26px; font-weight: var(--fw-bold); color: var(--color-text-main); }
.stories-viewall-btn { height: 42px; padding: 0 20px; }

.stories-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.story-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.story-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,0.1); transform: translateY(-3px); }
.story-card-avatar {
  width: 100%; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; font-weight: var(--fw-bold);
}
.story-card-body { padding: 16px; }
.story-card-name-row { display: flex; align-items: center; gap: 6px; }
.story-card-name { font-size: 15px; font-weight: var(--fw-bold); color: var(--color-text-main); }
.story-card-name-row svg { width: 15px; height: 15px; color: var(--color-primary); }
.story-card-role { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.story-card-company { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-text-main); margin-bottom: 6px; }
.story-card-company svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.story-card-package { font-size: 15px; font-weight: var(--fw-bold); color: var(--color-primary); margin-bottom: 10px; }
.story-card-link { font-size: 12px; font-weight: var(--fw-semibold); color: var(--color-text-muted); text-decoration: none; display: inline-block; border-top: 1px solid var(--color-border-light); padding-top: 8px; width: 100%; }
.story-card-link:hover { color: var(--color-primary); }

.stories-meta-row { max-width: 1200px; margin: 28px auto 0; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--color-text-main); }
.stories-meta-avatars { display: flex; }
.stories-meta-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: var(--fw-bold);
  margin-left: -10px;
}
.stories-meta-avatars .stories-meta-avatar:first-child { margin-left: 0; }
.stories-meta-row strong { color: var(--color-primary); }

/* --- Outcomes by course --- */
.stories-bycourse-section { width: 100%; padding: 56px 24px; background: #f7f8f9; }
.stories-bycourse-section h2 { font-size: 26px; font-weight: var(--fw-bold); color: var(--color-text-main); text-align: center; margin-bottom: 8px; }
.stories-bycourse-sub { text-align: center; font-size: 14px; color: var(--color-text-muted); max-width: 520px; margin: 0 auto 28px; }
.stories-bycourse-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bycourse-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--color-border-light);
  border-radius: 10px; padding: 12px; text-decoration: none;
  transition: box-shadow 150ms ease;
}
.bycourse-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.bycourse-thumb {
  width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--fw-bold); font-size: 15px;
  overflow: hidden;
}
.bycourse-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bycourse-body h4 { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-text-main); line-height: 1.3; margin-bottom: 3px; }
.bycourse-body p { font-size: 12px; color: var(--color-text-muted); }

/* --- CTA --- */
.stories-cta-section { width: 100%; padding: 64px 24px; }
.stories-cta-inner {
  max-width: 700px; margin: 0 auto; text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: var(--card-radius);
  padding: 48px 32px;
  color: #fff;
}
.stories-cta-inner h2 { font-size: 26px; font-weight: var(--fw-bold); margin-bottom: 8px; }
.stories-cta-inner p { color: rgba(255,255,255,0.9); font-size: 14.5px; margin-bottom: 22px; }
.stories-cta-btn { background: #fff; color: var(--color-primary); height: 48px; padding: 0 28px; }
.stories-cta-btn:hover { background: #f7f8f9; }

/* --- Responsive --- */
@media (max-width: 992px) {
  .stories-featured-card { grid-template-columns: 1fr; }
  .stories-featured-media { min-height: 220px; }
  .stories-grid { grid-template-columns: repeat(2, 1fr); }
  .stories-bycourse-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stories-hero-header h1 { font-size: 26px; }
  .stories-featured-content { padding: 28px 24px; }
  .stories-featured-content h3 { font-size: 21px; }
  .stories-featured-package { font-size: 22px; }
  .stories-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stories-bycourse-grid { grid-template-columns: 1fr; }
  .stories-grid-header { flex-direction: column; align-items: flex-start; }
  .stories-cta-inner { padding: 32px 22px; }
}

/* ==========================================================================
   19. SITE-WIDE ANIMATION LAYER
   Driven by animations.js — see that file for which elements get
   tagged with these classes. Pure motion layer only: no layout,
   color, or content changes live here, so nothing about the site's
   look changes when this section is deleted, only the motion does.
   ========================================================================== */

/* --- Single-element scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* --- Staggered grid/track children --- */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0) scale(1); }

/* Marquee children are already animating horizontally — a
   transform-based reveal would fight that, so fade only. */
.trust-marquee-track.reveal-stagger > * {
  transform: none !important;
}
.trust-marquee-track.reveal-stagger.in-view > * { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   PREMIUM MICRO-INTERACTIONS
   Elevated hover/press polish on the interactive elements that
   already exist — buttons, cards, nav links, thumbnails. Same
   components, smoother and more considered motion.
   ========================================================================== */

/* --- Buttons: lift + soft shadow + diagonal shine sweep --- */
.btn-primary, .card-cta, .promo-cta, .stories-cta-btn,
.course-enroll-btn, .popover-cta, .quiz-teaser-btn, .btn-outline {
  position: relative;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 220ms ease;
}
.btn-primary::after, .course-enroll-btn::after, .popover-cta::after,
.quiz-teaser-btn::after, .promo-cta::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 650ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn-primary:hover::after, .course-enroll-btn:hover::after, .popover-cta:hover::after,
.quiz-teaser-btn:hover::after, .promo-cta:hover::after { left: 130%; }
.btn-primary:hover, .course-enroll-btn:hover, .quiz-teaser-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(108, 43, 217, 0.28);
}
.btn-primary:active, .course-enroll-btn:active, .quiz-teaser-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(108, 43, 217, 0.22);
}
.btn-outline:hover { transform: translateY(-1px); }

/* --- Cards: smoother, slightly more premium lift than before --- */
.course-card, .story-card, .testimonial-card, .bycourse-card {
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 380ms ease;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border-color: transparent;
}
.story-card:hover { transform: translateY(-5px); }

/* Thumbnail zoom-on-hover — subtle, premium portfolio feel */
.course-thumb img, .story-card-avatar, .bycourse-thumb img {
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.course-card:hover .course-thumb img { transform: scale(1.06); }
.bycourse-card:hover .bycourse-thumb img { transform: scale(1.1); }

/* --- Nav links: animated underline sweep --- */
.primary-nav > .nav-link {
  position: relative;
}
.primary-nav > .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--color-primary);
  transition: right 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.primary-nav > .nav-link:hover::after { right: 0; }

/* --- Logo: gentle scale on hover --- */
.brand-logo img { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.brand-logo:hover img { transform: scale(1.04); }

/* --- Chat launcher: slightly springier hover than before --- */
.chat-launcher { transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 280ms ease; }

/* --- Stat numbers: soft glow pulse the moment they finish
   counting up, drawing the eye without being gimmicky --- */
.stat-number { transition: text-shadow 600ms ease; }
.stat-number.pulse-glow { text-shadow: 0 0 18px rgba(108, 43, 217, 0.35); }

/* --- Skill tabs: smoother active-state underline transition --- */
.skills-tab::after { transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }

@media (max-width: 640px) {
  /* Keep grid stagger snappier on mobile — long delays feel sluggish
     on a single-column list you're scrolling through quickly. */
  .reveal-stagger > * { transition-duration: 480ms; }
}

/* ==========================================================================
   20. PREMIUM INTERACTIONS (premium-fx.js)
   Still the same light theme throughout — the spotlight/particle
   effects only touch elements that were ALREADY dark cards
   (hero carousel, course-detail hero, promo banner, featured
   success story), nothing new is recolored.
   ========================================================================== */

/* --- Tilt cards: smooth spring-back when the JS listener detaches --- */
.course-card, .story-card, .bycourse-card {
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 380ms ease;
  transform-style: preserve-3d;
}

/* --- Magnetic buttons --- */
.btn-primary, .promo-cta, .stories-cta-btn, .course-enroll-btn, .quiz-teaser-btn {
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 220ms ease;
}

/* --- Cursor spotlight glow --- */
.spotlight-surface { position: relative; overflow: hidden; }
.spotlight-surface::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    circle 220px at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 2;
}
.spotlight-surface:hover::before { opacity: 1; }
/* keep real content above the glow layer */
.spotlight-surface > *:not(.particle-canvas) { position: relative; z-index: 3; }

/* --- Particle constellation canvas --- */
.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
}

/* --- Word-by-word text reveal --- */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(4px);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.words-in-view .word-reveal { opacity: 1; transform: translateY(0); filter: blur(0); }

/* --- Shimmer flash on newly rendered cards --- */
.shimmer-flash { position: relative; overflow: hidden; }
.shimmer-flash::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: shimmer-sweep 900ms ease-out;
  pointer-events: none;
  z-index: 5;
}
@keyframes shimmer-sweep {
  from { left: -150%; }
  to { left: 150%; }
}

/* --- Gradient text shimmer for small badges --- */
.badge-bestseller, .badge-highest-rated, .stories-featured-badge {
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .word-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .shimmer-flash::after { display: none; }
  .particle-canvas { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .spotlight-surface::before { display: none; }
}