/* ===== Coded Mind - Premium Navy & Gold (v3) ===== */
/* Canvas is deep navy so gold reads as achievement and trust rather than
   decoration. Gold is reserved for CTAs, active states and the certificate
   story, so it keeps its value instead of turning the whole page into a
   gold box. Body copy stays high-contrast slate on navy. */

/* Fonts are self-hosted from the same files the certificate renderer already
   uses, so there is no Google Fonts request to block or slow down. */
@font-face {
  font-family: 'Playfair Display';
  src: url('backend/assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('backend/assets/fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('backend/assets/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('backend/assets/fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('backend/assets/fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('backend/assets/fonts/Lato-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  /* Light theme. Gold stays the action colour (filled buttons keep dark
     navy text on gold for an 8:1 contrast). Ink/gray are darkened so copy
     reads on white the same way it used to read on navy. */
  --gold: #d4af37;
  --gold-soft: #c99a2e;
  --gold-deep: #a8841c;

  --primary: #d4af37;
  --primary-dark: #a8841c;
  --secondary: #c9a961;
  --accent: #0891b2;     /* cyan darkened for text/icon contrast on white */

  --light: #ffffff;      /* page canvas */
  --surface: #ffffff;    /* card */
  --surface-2: #f4f7fc;  /* raised card */
  --dark: #334155;       /* body copy */
  --ink: #0f172a;        /* headings */
  --gray: #5b6b84;
  --gray-dim: #8290a6;

  --success: #0e9f6e;
  --warning: #c2740a;
  --danger: #dc2626;

  --gradient: linear-gradient(135deg, #e3c877 0%, #d4af37 55%, #b8941f 100%);
  --primary-gradient: linear-gradient(135deg, #e3c877 0%, #d4af37 100%);
  --secondary-gradient: linear-gradient(135deg, #ffffff 0%, #eef4fb 100%);

  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(168, 132, 28, 0.34);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 26px 60px rgba(15, 23, 42, 0.14);
  --border-radius: 14px;
  --transition: all 0.3s ease;
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.65;
  color: var(--dark);
  background-color: var(--light);
  background-image:
    radial-gradient(1100px 560px at 88% -12%, rgba(212, 175, 55, 0.10), transparent 62%),
    radial-gradient(820px 460px at -8% 28%, rgba(8, 145, 178, 0.07), transparent 58%);
  background-attachment: fixed;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700; line-height: 1.18; margin-bottom: 1rem; color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
p { margin-bottom: 1rem; color: var(--gray); }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(212, 175, 55, 0.32); color: #fff; }

.container {
  width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px;
}

.section-title {
  font-size: 2.5rem; text-align: center; margin-bottom: 1rem;
  color: var(--ink); position: relative;
}
.section-title::after {
  content: ''; position: absolute; bottom: -10px; left: 50%;
  transform: translateX(-50%); width: 80px; height: 3px;
  background: var(--gradient); border-radius: 3px;
}
.section-subtitle {
  font-size: 1.2rem; text-align: center; color: var(--gray);
  max-width: 700px; margin: 2rem auto 3rem; line-height: 1.6;
}

.text-center { text-align: center; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; background: var(--gradient); color: #0a1120;
  border-radius: 12px; font-weight: 700; border: none;
  cursor: pointer; transition: var(--transition); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.22);
  gap: 8px; text-decoration: none; letter-spacing: 0.1px;
}
.btn:hover {
  transform: translateY(-2px); box-shadow: 0 14px 30px rgba(212, 175, 55, 0.34);
  background: var(--primary-gradient);
}
.btn-outline {
  background: transparent; border: 1px solid var(--primary);
  color: var(--primary); box-shadow: none;
}
.btn-outline:hover { background: rgba(212, 175, 55, 0.12); color: var(--gold-soft); box-shadow: none; transform: translateY(-2px); }

.details-btn, .enroll-btn {
  display: inline-block; padding: 12px 30px;
  background: var(--gradient); color: #0a1120; border: none;
  border-radius: 30px; font-size: 1.1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: var(--transition);
  text-align: center;
}
.details-btn:hover, .enroll-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ===== CARD ===== */
.card {
  background: var(--surface); border-radius: var(--border-radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow); transition: var(--transition);
  overflow: hidden; height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(212, 175, 55, 0.35); }

.crystal-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px; padding: 25px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  transition: var(--transition); overflow: hidden; position: relative;
}
.crystal-card:hover { transform: translateY(-5px); }

/* ===== HEADER ===== */
.new-header, .header {
  background: rgba(11, 16, 32, 0.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.12); padding: 12px 0;
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  transition: var(--transition);
}
.new-header.scrolled, .header.scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.header-container {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 70px;
}
.logo-container {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.logo-container img {
  width: 56px; height: 56px; object-fit: contain;
  border-radius: 14px; display: block; flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.4));
}
.logo-text {
  font-size: 22px; font-weight: 700;
  background: var(--primary-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; text-decoration: none; line-height: 1.2;
  letter-spacing: -0.2px;
}
.nav-menu {
  display: flex; gap: 4px; align-items: center;
}
.nav-menu a {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  font-weight: 600; color: var(--dark); text-decoration: none;
  font-size: 0.92rem; letter-spacing: 0.01em;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-menu a i { font-size: 0.8rem; color: var(--gold-deep); transition: color 0.25s ease; }
.nav-menu a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 2px; background: var(--gradient); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease;
}
.nav-menu a:hover { color: var(--ink); background: rgba(15, 23, 42, 0.045); }
.nav-menu a:hover::after { transform: scaleX(1); }
.nav-menu a.active { color: var(--gold-deep); background: rgba(212, 175, 55, 0.10); }
.nav-menu a.active::after { transform: scaleX(1); }
.nav-menu a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.nav-menu .nav-lms { color: var(--ink); }

/* ===== MOBILE MENU ===== */
.hamburger {
  display: none; flex-direction: column; cursor: pointer;
  background: none; border: none; padding: 5px;
}
.hamburger span {
  width: 25px; height: 3px; background: var(--ink);
  margin: 3px 0; transition: var(--transition); display: block;
  border-radius: 2px;
}
.mobile-menu {
  display: none; background: #0e1729; padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-top: 1px solid var(--border);
}
.mobile-menu.active { display: block; }
.mobile-nav {
  display: flex; flex-direction: column; gap: 2px;
}
.mobile-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 6px; border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--dark); text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-nav a i {
  width: 20px; text-align: center; flex-shrink: 0;
  color: var(--gold-deep); font-size: 0.92rem;
}
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--gold-deep); padding-left: 14px; }
.mobile-nav-cta a { color: var(--ink); }
.mobile-nav-cta a i { color: var(--accent); }

/* ===== NAV AUTH (LMS login/register buttons) ===== */
.nav-auth {
  display: flex; align-items: center; gap: 10px; margin-left: 10px;
}
.nav-auth .btn { padding: 8px 16px; font-size: 0.85rem; }
.nav-auth .btn-outline { border-color: var(--primary); }
.nav-highlight {
  background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; font-weight: 700 !important;
}
.btn-sm { padding: 7px 14px; font-size: 0.83rem; }

/* ===== HERO SECTION ===== */
.hero {
  background:
    radial-gradient(900px 600px at 80% -20%, rgba(212, 175, 55, 0.18), transparent 62%),
    radial-gradient(700px 500px at 8% 108%, rgba(110, 198, 232, 0.12), transparent 58%),
    linear-gradient(150deg, #05090f 0%, #0b1526 48%, #0e1c30 100%);
  color: white; padding: 150px 0 96px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 75%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, transparent, var(--light));
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 1; max-width: 860px;
  margin: 0 auto; text-align: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(212, 175, 55, 0.1);
  padding: 8px 22px; border-radius: 50px; font-size: 0.82rem;
  margin-bottom: 24px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  color: var(--gold-soft);
}
.hero-title {
  font-size: 3.4rem; margin-bottom: 1.4rem; line-height: 1.1;
  font-weight: 700; letter-spacing: -0.5px; color: #fff;
}
.hero-title .grad { background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-description {
  font-size: 1.18rem; margin-bottom: 2.2rem; line-height: 1.7;
  max-width: 640px; margin-left: auto; margin-right: auto; color: rgba(219, 227, 240, 0.9);
}
.hero-buttons {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
/* Hero keeps navy text on the gold fill: white-on-gold fails contrast. */
.hero .btn { background: var(--gradient); color: #0a1120; box-shadow: 0 10px 26px rgba(212, 175, 55, 0.26); }
.hero .btn:hover { box-shadow: 0 16px 34px rgba(212, 175, 55, 0.4); }
.hero .btn-outline { border-color: rgba(212, 175, 55, 0.5); color: var(--gold-soft); background: rgba(212, 175, 55, 0.06); backdrop-filter: blur(8px); }
.hero .btn-outline:hover { background: rgba(212, 175, 55, 0.16); color: var(--gold-soft); }

/* Trust strip under the hero buttons. Social proof is the single biggest
   lever on whether a first-time visitor stays on the page. */
.hero-trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 34px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem; color: var(--gray);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 9px; }
.hero-trust i { color: var(--gold); font-size: 0.95rem; }

/* ===== STATS SECTION ===== */
.stats { padding: 80px 0; background: var(--light); }
.stats-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 30px;
}
.stat-card {
  text-align: center; padding: 40px 20px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--border-radius);
  transition: var(--transition);
}
.stat-card:hover { border-color: rgba(212, 175, 55, 0.5); transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4); }
.stat-number {
  font-size: 3rem; font-weight: 700;
  background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; margin-bottom: 10px;
}
.stat-text { color: var(--gray); font-weight: 500; font-size: 1.1rem; }

/* ===== WHY JOIN US ===== */
.why-cmti { padding: 100px 0; background: var(--surface); }
.benefits-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
}
.benefit-card { padding: 40px 30px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); }
.benefit-icon {
  width: 70px; height: 70px; margin: 0 auto 20px;
  background: var(--gradient); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.8rem;
  box-shadow: 0 12px 26px rgba(180, 132, 31, 0.45);
}
.benefit-card h3 { font-size: 1.4rem; margin-bottom: 15px; color: var(--ink); }

/* ===== PROGRAMS ===== */
.programs { padding: 100px 0; background: var(--light); }
.program-categories {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
}
.program-card { padding: 40px 30px; text-align: center; background: var(--surface); border: 1px solid var(--border); }
.program-icon {
  width: 80px; height: 80px; margin: 0 auto 20px;
  background: var(--gradient); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 2rem;
  box-shadow: 0 14px 30px rgba(180, 132, 31, 0.45);
}
.program-title { font-size: 1.5rem; margin-bottom: 15px; color: var(--ink); }
.program-explore { margin-top: 20px; }

/* ===== ADVERTISEMENT ===== */
.advertisement {
  padding: 80px 0; background: var(--gradient); color: white; text-align: center;
  position: relative; overflow: hidden;
}
.advertisement::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.ad-content { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.ad-title { font-size: 2.5rem; margin-bottom: 1.5rem; color: #0f172a; }
.ad-subtitle {
  font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; line-height: 1.6; color: #0f172a;
}
.ad-highlights {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  margin-top: 40px;
}
.ad-highlight {
  background: rgba(255, 255, 255, 0.1); padding: 25px 20px;
  border-radius: var(--border-radius); width: 200px; text-align: center;
  backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);
}
.ad-highlight i { font-size: 2rem; margin-bottom: 15px; color: white; }

/* ===== CTA SECTION ===== */
.cta-section { padding: 100px 0; background: var(--surface); text-align: center; }
.cta-buttons {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 40px;
}

/* ===== CEO MESSAGE ===== */
.ceo-message { padding: 100px 0; background: var(--light); }
.ceo-container {
  max-width: 1000px; margin: 0 auto; background: var(--surface);
  border-radius: 20px; box-shadow: var(--shadow-lg);
  overflow: hidden; display: grid; grid-template-columns: 350px 1fr;
  border: 1px solid var(--border);
}
.ceo-image-wrapper {
  background: linear-gradient(150deg, #0e1c30 0%, #0e3a4d 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 30px; text-align: center;
  position: relative;
}
.ceo-image-wrapper::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212,175,55,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ceo-image-content { position: relative; z-index: 2; color: white; }
.ceo-profile-img {
  width: 150px; height: 150px; border-radius: 50%;
  border: 4px solid rgba(212, 175, 55, 0.5); object-fit: cover;
  margin-bottom: 20px;
}
.ceo-name { font-size: 1.5rem; font-weight: 700; color: white; }
.ceo-title { color: rgba(226, 232, 240, 0.8); font-size: 0.95rem; }
.ceo-content { padding: 50px; }
.ceo-greeting {
  font-size: 1.1rem; color: var(--accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
}
.ceo-heading { font-size: 2rem; color: var(--ink); margin-bottom: 25px; }
.ceo-text { color: var(--gray); line-height: 1.8; margin-bottom: 20px; font-size: 1.05rem; }
.ceo-signature { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.ceo-signature h4 { color: var(--ink); font-size: 1.2rem; }

/* ===== COURSE TRACK (MOVING) ===== */
.moving-courses { padding: 100px 0; background: var(--light); overflow: hidden; }
.course-track-container {
  overflow: hidden; position: relative; border-radius: var(--border-radius);
  box-shadow: var(--shadow); background: var(--surface);
  border: 1px solid var(--border); margin-top: 40px;
  padding: 20px; max-width: 1000px; margin-left: auto; margin-right: auto;
}
.course-track {
  display: flex; animation: scroll 30s linear infinite;
  gap: 30px; padding: 20px 0;
}
.course-track:hover { animation-play-state: paused; }
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-350px * 5 - 30px * 5)); }
}
.course-card { min-width: 350px; overflow: hidden; }
.course-image {
  height: 200px; background-size: cover; background-position: center;
  background-color: #16273f;
}
.card-content { padding: 25px; }
.course-title { font-size: 1.3rem; margin-bottom: 10px; color: var(--ink); }
.course-desc { color: var(--gray); margin-bottom: 20px; line-height: 1.6; }

/* ===== CULTURE ===== */
.culture { padding: 100px 0; background: var(--surface); }
.culture-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
}
.culture-img { height: 200px; width: 100%; object-fit: cover; }
.culture-content { padding: 20px; color: var(--dark); }

/* ===== HIGHLIGHTS ===== */
.highlights { padding: 100px 0; background: var(--light); }
.quote-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
}
.quote-card { padding: 40px 30px; background: var(--surface-2); border: 1px solid var(--border); }
.quote-text {
  font-style: italic; margin-bottom: 25px; position: relative;
  line-height: 1.7; color: var(--ink);
}
.quote-text::before {
  content: '"'; font-size: 4rem; position: absolute; top: -20px;
  left: -10px; color: rgba(212, 175, 55, 0.4); font-family: Georgia, serif;
}
.quote-author { display: flex; align-items: center; gap: 15px; }
.author-image {
  width: 60px; height: 60px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid var(--primary);
}

/* ===== FINAL CTA ===== */
.final-cta {
  padding: 100px 0; background: var(--gradient); color: white; text-align: center;
  position: relative; overflow: hidden;
}
.final-cta::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta .section-title { color: #0f172a; background: none; -webkit-text-fill-color: #0f172a; }
.final-cta .section-title::after { background: #0f172a; }
.final-cta .section-subtitle { color: rgba(255, 255, 255, 0.9); }
.final-cta .btn { background: #fff; color: #4338ca; box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.final-cta .btn:hover { background: #eef2ff; }
.final-cta .btn-outline { border-color: white; color: white; background: rgba(255,255,255,0.08); }
.final-cta .btn-outline:hover { background: white; color: var(--primary); }

/* ===== FOOTER ===== */
.site-footer {
  background: linear-gradient(180deg, #05090f 0%, #070d18 100%);
  color: white; padding: 60px 0 0; margin-top: 80px; font-size: 14px;
  border-top: 1px solid var(--border);
}
.footer-content {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.footer-col { margin-bottom: 30px; }
.footer-logo {
  display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
}
.footer-logo img { height: 66px; border-radius: 10px; }
.footer-logo h3 { color: white; font-size: 1.2rem; }
.footer-description { line-height: 1.6; margin-bottom: 25px; color: rgba(226, 232, 240, 0.75); }
.footer-social h4 { color: white; margin-bottom: 15px; font-size: 1rem; }
.social-icons { display: flex; gap: 15px; }
.social-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: rgba(255, 255, 255, 0.07);
  border-radius: 50%; color: white; transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.social-icons a:hover {
  background: var(--gradient); transform: translateY(-3px); border-color: transparent;
}
.footer-col h3 {
  color: white; font-size: 1.2rem; font-weight: 600;
  margin-bottom: 20px; position: relative; padding-bottom: 10px;
}
.footer-col h3::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 40px; height: 2px; background: var(--gradient); border-radius: 2px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: rgba(226, 232, 240, 0.75); transition: var(--transition); }
.footer-col ul li a:hover { color: var(--accent); padding-left: 5px; }
.contact-item {
  display: flex; align-items: flex-start; margin-bottom: 15px;
  gap: 10px; color: rgba(226, 232, 240, 0.75);
}
.contact-item i { color: var(--accent); margin-top: 2px; }
.contact-item a { color: rgba(226, 232, 240, 0.75); }
.contact-item a:hover { color: var(--accent); }
.newsletter h4 { color: white; margin-bottom: 15px; font-size: 1rem; }
.newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-form input {
  padding: 12px 15px; border: 1px solid var(--border);
  border-radius: 10px; background: rgba(255, 255, 255, 0.06);
  color: white; font-size: 14px;
}
.newsletter-form input::placeholder { color: rgba(148, 163, 184, 0.7); }
.newsletter-form button {
  padding: 12px 15px; border: none; border-radius: 10px;
  background: var(--gradient); color: white; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.newsletter-form button:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
}
.footer-bottom { background: rgba(0, 0, 0, 0.35); padding: 25px 0; margin-top: 60px; border-top: 1px solid var(--border); }
.footer-bottom-content {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 0 20px; flex-wrap: wrap; gap: 15px;
}
.legal-links { display: flex; gap: 20px; }
.legal-links a { color: rgba(226, 232, 240, 0.7); font-size: 14px; }
.legal-links a:hover { color: white; }
.copyright { color: rgba(226, 232, 240, 0.7); font-size: 14px; }

/* ===== COURSES PAGE ===== */
.courses-filter {
  max-width: 1200px; margin: 0 auto 40px; padding: 20px;
  background: var(--glass-bg); backdrop-filter: blur(12px);
  border-radius: 15px; border: 1px solid var(--border);
}
.search-box { position: relative; margin-bottom: 20px; }
.search-box input {
  width: 100%; padding: 15px 25px 15px 45px; border: 1px solid var(--border);
  border-radius: 30px; font-size: 16px;
  background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(5px);
  color: #fff; transition: var(--transition);
}
.search-box input::placeholder { color: var(--gray-dim); }
.search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25); }
.search-box i {
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%); color: var(--gray);
}
.category-filter-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding: 10px 5px;
  scrollbar-width: none;
}
.category-filter-scroll::-webkit-scrollbar { display: none; }
.category-btn {
  padding: 10px 20px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border); border-radius: 30px;
  cursor: pointer; transition: var(--transition); color: #fff;
  backdrop-filter: blur(5px); white-space: nowrap;
}
.category-btn.active, .category-btn:hover { background: var(--gradient); color: #fff; border-color: transparent; }

.courses-container {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: 30px; padding: 20px; max-width: 1200px; margin: 0 auto 60px;
}
.courses-container .course-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px; overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition); display: flex; flex-direction: column;
}
.courses-container .course-card:hover { transform: translateY(-10px); border-color: rgba(212, 175, 55, 0.4); box-shadow: var(--shadow-lg); }
.courses-container .course-card img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s; }
.courses-container .course-card:hover img { transform: scale(1.05); }
.course-card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.course-card-content h2 { font-size: 1.5rem; margin-bottom: 15px; color: var(--ink); }
.course-card-content p { color: var(--gray); margin-bottom: 25px; flex-grow: 1; }
.course-meta {
  display: flex; justify-content: space-between; margin-bottom: 20px;
  font-size: 0.9rem; color: var(--gray);
}
.course-meta span { display: flex; align-items: center; gap: 5px; }

/* ===== BANNER CAROUSEL ===== */
.banner-carousel {
  position: relative; height: 60vh; min-height: 400px;
  overflow: hidden; margin-bottom: 40px;
  border-radius: var(--border-radius); box-shadow: var(--shadow-lg);
}
.carousel-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.8s ease;
  display: flex; align-items: center;
}
.carousel-slide.active { opacity: 1; }
.carousel-slide::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right, rgba(7, 10, 22, 0.9), rgba(7, 10, 22, 0.35));
}
.slide-content {
  position: relative; z-index: 2; color: white;
  padding: 0 50px; max-width: 600px;
}
.slide-content h2 { font-size: 2.5rem; margin-bottom: 20px; color: white; }
.slide-content p { font-size: 1.2rem; margin-bottom: 30px; color: rgba(255,255,255,0.9); }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1); width: 50px; height: 50px;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 10;
  transition: var(--transition); color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.carousel-arrow:hover { background: rgba(212, 175, 55, 0.5); }
.carousel-arrow.prev { left: 20px; }
.carousel-arrow.next { right: 20px; }
.carousel-controls {
  position: absolute; bottom: 20px; left: 0; width: 100%;
  display: flex; justify-content: center; gap: 10px; z-index: 10;
}
.carousel-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: var(--transition);
}
.carousel-dot.active { background: var(--accent); transform: scale(1.3); }

/* ===== COURSE DETAIL PAGES ===== */
.course-hero {
  background:
    radial-gradient(700px 400px at 85% -30%, rgba(212, 175, 55, 0.35), transparent 60%),
    linear-gradient(145deg, #05090f 0%, #0e1c30 60%, #101d33 120%);
  color: white; padding: 150px 0 80px;
  position: relative; overflow: hidden;
}
.course-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212,175,55,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.course-hero .container { position: relative; z-index: 1; }
.course-hero h1 { font-size: 3rem; color: white; margin-bottom: 20px; }
.course-hero p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 0; }
.course-intro { margin-top: 20px; }
.course-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 20px; margin: 30px 0;
}
.highlight-card {
  background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--border-radius); padding: 20px; text-align: center;
}
.highlight-card h3 { color: white; font-size: 1rem; margin-bottom: 5px; }
.highlight-card p { color: rgba(255, 255, 255, 0.9); margin-bottom: 0; font-weight: 600; }
.cmti-badge {
  display: inline-block; background: var(--gradient);
  padding: 4px 12px; border-radius: 20px; font-size: 0.8rem;
  vertical-align: middle; margin-left: 8px; color: #fff;
}
.breadcrumb {
  padding: 15px 0; font-size: 0.9rem; color: var(--gray);
  margin-top: 20px;
}
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }
.cards-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px; margin-bottom: 40px;
}
.card-header {
  padding: 20px 25px; border-bottom: 1px solid var(--border);
}
.card-header h3 { margin-bottom: 0; color: var(--ink); font-size: 1.3rem; }
.card-body { padding: 25px; color: var(--dark); }
.card-body ul { padding-left: 20px; }
.card-body ul li {
  padding: 8px 0; border-bottom: 1px solid var(--border);
  color: var(--gray); font-size: 0.95rem; list-style: disc outside;
  margin-left: 18px;
}
.card-body ul li:last-child { border-bottom: none; }
.module-item {
  padding: 12px 15px; border-bottom: 1px solid var(--border);
  color: var(--gray); font-size: 0.95rem;
  transition: var(--transition);
}
.module-item:last-child { border-bottom: none; }
.module-item:hover { background: rgba(212, 175, 55, 0.08); color: var(--ink); }
.career-opportunities {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px; margin-bottom: 40px;
}
.career-item {
  background: var(--surface); padding: 25px; border-radius: var(--border-radius);
  border: 1px solid var(--border); transition: var(--transition);
}
.career-item:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, 0.4); }
.career-item h3 { font-size: 1.2rem; color: var(--accent); margin-bottom: 10px; }
.career-item p { color: var(--gray); margin-bottom: 0; font-size: 0.95rem; }
.payment-methods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px; margin-bottom: 40px;
}
.payment-option {
  background: var(--surface); padding: 25px; border-radius: var(--border-radius);
  border: 1px solid var(--border);
}
.payment-option h3 { font-size: 1.2rem; color: var(--accent); margin-bottom: 10px; }
.payment-option ul { padding-left: 20px; }
.payment-option ul li { padding: 5px 0; color: var(--gray); }
.testimonial-card .testimonial-text { padding-left: 20px; }
.testimonial-card .testimonial-author {
  display: flex; align-items: center; gap: 15px; margin-top: 15px;
}
.testimonial-card .author-avatar {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--primary);
}
.instructor-card { text-align: center; }
.instructor-card .instructor-image {
  width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
  margin: 20px auto; border: 4px solid var(--primary);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.3);
}
.author-info h4 { margin-bottom: 0; color: var(--ink); }
.author-info p { margin-bottom: 0; color: var(--gray); font-size: 0.9rem; }

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
  background: var(--gradient); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; visibility: hidden;
  transition: var(--transition); z-index: 99; border: none;
  box-shadow: 0 10px 24px rgba(180, 132, 31, 0.4);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); }

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--surface-2); color: #fff; padding: 15px 20px;
  border-radius: var(--border-radius); box-shadow: var(--shadow-lg);
  transform: translateY(100px); opacity: 0; transition: var(--transition);
  z-index: 1000; max-width: 300px;
  border-left: 3px solid var(--primary);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }

/* ===== LOADER ===== */
.loader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(11, 16, 32, 0.85); display: flex;
  align-items: center; justify-content: center; z-index: 9999;
  opacity: 0; visibility: hidden; transition: var(--transition);
  backdrop-filter: blur(4px);
}
.loader.active { opacity: 1; visibility: visible; }
.loader::after {
  content: ''; width: 50px; height: 50px;
  border: 4px solid rgba(212, 175, 55, 0.25); border-top-color: var(--primary);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.6s ease forwards; }

/* ===== ACCESSIBILITY ===== */
@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; }
}
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ===== COURSE DETAIL PAGES - INSTRUCTOR ===== */
.instructor-section { padding: 80px 0; background: var(--light); }
.instructor-container {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
}
.instructor-image { flex: 1; min-width: 300px; text-align: center; }
.instructor-image img {
  width: 250px; height: 250px; border-radius: 50%;
  object-fit: cover; border: 4px solid var(--primary); box-shadow: var(--shadow-lg);
}
.instructor-info { flex: 2; min-width: 300px; }
.instructor-info h3 { font-size: 1.8rem; color: var(--ink); margin-bottom: 15px; }

/* ===== TESTIMONIALS ===== */
.testimonials-section { padding: 80px 0; background: var(--surface); }
.testimonials-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px;
}
.testimonial-card { padding: 30px; background: var(--surface-2); border: 1px solid var(--border); }
.testimonial-text {
  font-style: italic; margin-bottom: 20px; position: relative; padding-left: 20px;
}
.testimonial-text::before {
  content: '"'; font-size: 3rem; color: var(--primary);
  position: absolute; left: -10px; top: -20px; opacity: 0.5;
}
.testimonial-author { font-weight: 600; color: var(--ink); }

/* ===== FAQ ===== */
.faq-section { padding: 80px 0; background: var(--light); }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { margin-bottom: 15px; overflow: hidden; }
.faq-question {
  padding: 20px; background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; color: var(--ink);
  border-radius: var(--border-radius); transition: var(--transition);
}
.faq-question:hover { border-color: rgba(212, 175, 55, 0.4); }
.faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer p { color: var(--gray); }
.faq-active .faq-answer { max-height: 300px; padding: 20px; }

/* ===== REGISTRATION ===== */
.registration-section { padding: 80px 0; background: var(--gradient); color: white; text-align: center; position: relative; overflow: hidden; }
.registration-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.registration-section .container { position: relative; z-index: 1; }
.registration-section .section-title,
.registration-section .section-subtitle { color: white; }
.form-container {
  background: var(--surface); border-radius: var(--border-radius);
  overflow: hidden; box-shadow: var(--shadow-lg); margin-top: 30px;
  border: 1px solid var(--border);
}

/* ===== COURSE INFO SIDEBAR ===== */
.course-info-card { position: sticky; top: 100px; }
.course-details { margin-bottom: 25px; }
.course-detail-item {
  display: flex; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  color: var(--dark);
}
.course-detail-item:last-child { border-bottom: none; }
.detail-label { color: var(--gray); }
.detail-value { font-weight: 600; }
.course-price {
  font-size: 2.5rem; color: var(--accent);
  font-weight: 700; text-align: center; margin: 20px 0;
}
.payment-methods li {
  padding: 8px 0; display: flex; align-items: center;
}
.payment-methods li i { color: var(--accent); margin-right: 10px; width: 20px; }

/* ===== MODULES/CURRICULUM GRID ===== */
.modules-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px;
}
.module-card {
  padding: 20px; position: relative; border-left: 4px solid var(--primary);
  background: var(--surface); border-radius: 10px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.module-card h4 { font-size: 1.1rem; margin-bottom: 10px; color: var(--accent); }
.module-card p { color: var(--gray); font-size: 0.92rem; }

/* ===== ABOUT PAGE ===== */
.about-hero {
  background:
    radial-gradient(700px 400px at 80% -30%, rgba(212, 175, 55, 0.35), transparent 60%),
    linear-gradient(145deg, #05090f 0%, #0e1c30 60%, #101d33 120%);
  color: white;
  padding: 150px 0 80px; position: relative; overflow: hidden;
}
.about-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212,175,55,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.about-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.about-section { padding: 80px 0; background: var(--light); }
.about-section-alt { background: var(--surface); }
.about-content { max-width: 800px; margin: 0 auto; line-height: 1.8; font-size: 1.1rem; color: var(--gray); }

/* ===== CONTACT PAGE ===== */
.contact-hero {
  background:
    radial-gradient(700px 400px at 80% -30%, rgba(212, 175, 55, 0.35), transparent 60%),
    linear-gradient(145deg, #05090f 0%, #0e1c30 60%, #101d33 120%);
  color: white;
  padding: 150px 0 80px; position: relative; overflow: hidden;
}
.contact-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212,175,55,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ===== PAGE-SPECIFIC CONTAINERS ===== */
.content-page { padding: 140px 0 60px; max-width: 900px; margin: 0 auto; }
.content-page h1 { text-align: center; margin-bottom: 2rem; }
.content-page h2 { margin-top: 2rem; margin-bottom: 1rem; color: var(--accent); }
.content-page ul { list-style: disc; padding-left: 24px; }
.content-page ul li { color: var(--gray); }

/* ===== CAREERS / LMS ===== */
.careers-hero, .lms-hero {
  background:
    radial-gradient(700px 400px at 80% -30%, rgba(212, 175, 55, 0.35), transparent 60%),
    linear-gradient(145deg, #05090f 0%, #0e1c30 60%, #101d33 120%);
  color: white;
  padding: 150px 0 80px; text-align: center; position: relative; overflow: hidden;
}
.careers-hero::before, .lms-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212,175,55,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.careers-hero .container, .lms-hero .container { position: relative; z-index: 1; }

/* ===== ABOUT PAGE - MISSION/VISION ===== */
.mission-vision {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: 30px;
}
.mission-icon, .vision-icon {
  width: 70px; height: 70px; margin: 0 auto 20px;
  background: var(--gradient); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.8rem;
  box-shadow: 0 12px 26px rgba(180, 132, 31, 0.45);
}
.mission-card, .vision-card {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 36px 30px;
}
.mission-card h3, .vision-card h3 {
  font-size: 1.5rem; margin-bottom: 15px; color: var(--ink);
  text-align: center;
}
.mission-card p, .vision-card p {
  text-align: center; line-height: 1.8; color: var(--gray);
}

/* ===== ABOUT PAGE - VALUES ===== */
.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 30px;
}
.value-card { padding: 30px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); }
.value-icon {
  width: 60px; height: 60px; margin: 0 auto 15px;
  background: var(--gradient); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.5rem;
  box-shadow: 0 10px 22px rgba(180, 132, 31, 0.4);
}
.value-card h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }

/* ===== ABOUT PAGE - STATS ===== */
.stats-section {
  padding: 80px 0;
  background: var(--gradient); color: white;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 30px;
}
.stat-item { text-align: center; padding: 30px; }
.stat-item h3 {
  font-size: 3rem; font-weight: 700; margin-bottom: 10px;
}
.stat-item p { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; margin-bottom: 0; }

/* ===== ABOUT PAGE - TEAM ===== */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 30px;
}
.team-member { padding: 30px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.team-img {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 20px; border: 4px solid var(--primary);
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.3);
}
.team-info h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: 5px; }
.team-info p { color: var(--gray); margin-bottom: 5px; font-size: 0.95rem; }

/* ===== CONTACT PAGE ===== */
.contact-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.contact-content { padding: 80px 0; }
.contact-container {
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px; margin-top: 40px;
}
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-card { padding: 25px; text-align: center; background: var(--surface); border: 1px solid var(--border); }
.contact-icon {
  width: 60px; height: 60px; margin: 0 auto 15px;
  background: var(--gradient); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.5rem;
  box-shadow: 0 10px 22px rgba(180, 132, 31, 0.4);
}
.contact-card h3 { font-size: 1.2rem; color: var(--ink); margin-bottom: 10px; }
.contact-form { padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.contact-form h2 { font-size: 1.5rem; color: var(--ink); margin-bottom: 25px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; font-weight: 600; margin-bottom: 8px;
  color: var(--ink); font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 1rem;
  font-family: inherit; transition: var(--transition);
  background: rgba(255, 255, 255, 0.05); color: var(--dark);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-dim); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}
.form-group textarea { min-height: 150px; resize: vertical; }
.map-section { padding: 80px 0; }
.map-container {
  border-radius: var(--border-radius); overflow: hidden;
  box-shadow: var(--shadow); margin-top: 30px;
  border: 1px solid var(--border);
}
.map-container iframe { width: 100%; height: 400px; border: none; filter: invert(0.9) hue-rotate(180deg); }
.social-card { padding: 25px; text-align: center; background: var(--surface); border: 1px solid var(--border); }
.social-card h3 { font-size: 1.2rem; color: var(--ink); margin-bottom: 15px; }
.social-card .social-icons { justify-content: center; }

/* ===== CONTACT: WhatsApp routes =====
   WhatsApp is the channel this audience actually replies on, so it is a
   first-class way to submit the form rather than a link in a sidebar. */
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.contact-actions .btn { flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
/* The brand green, not the site gold: this button is a recognisable WhatsApp
   action and a student looking for it should not have to hunt for it. */
.btn-wa { background: #25d366; color: #052e16; border: 1px solid #25d366; font-weight: 700; }
.btn-wa:hover:not(:disabled) { background: #1eb455; border-color: #1eb455; color: #052e16; transform: translateY(-2px); }
.btn-wa:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-wa i { font-size: 1.1em; }

/* Quick-reply chips. Kept small and stacked so the card does not grow taller
   than the ones beside it on desktop. */
.wa-quick { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.wa-chip {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; font: inherit; font-size: 0.85rem; text-align: left;
  color: var(--dark); background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.28); border-radius: 9px;
  cursor: pointer; transition: var(--transition);
}
.wa-chip i { color: #25d366; flex: none; width: 16px; text-align: center; }
.wa-chip:hover { background: rgba(37, 211, 102, 0.16); border-color: #25d366; color: var(--ink); }
.wa-chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Inline form feedback. A class rather than inline styles so the colours live
   with the rest of the theme and survive a change of palette. */
.contact-status {
  display: none; margin-top: 14px; padding: 12px 14px;
  border-radius: 10px; font-size: 0.92rem; line-height: 1.5;
}
.contact-status.ok { display: block; color: #34d399; background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.4); }
.contact-status.err { display: block; color: #f87171; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.4); }

/* Directions note under the map. The embed is an approximate pin, so this says
   so and offers the exact fix: asking for a live location on WhatsApp. */
.map-note { margin: 16px 0 0; font-size: 0.9rem; color: var(--gray); text-align: center; }
.map-note i { color: var(--gold); margin-right: 4px; }
.map-note a { color: #25d366; font-weight: 600; }
.map-note a:hover { text-decoration: underline; }


/* ===== CAREERS PAGE ===== */
.career-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.career-hero .btn-outline { border-color: rgba(255,255,255,0.5); color: white; }
.career-hero .btn-outline:hover { background: rgba(255,255,255,0.15); color: white; }
.why-join-section { padding: 100px 0; background: var(--surface); }
.openings-section { padding: 100px 0; background: var(--light); }
.jobs-container { display: flex; flex-direction: column; gap: 25px; }
.job-card { padding: 30px; background: var(--surface); border: 1px solid var(--border); }
.job-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 15px; flex-wrap: wrap; gap: 15px;
}
.job-header h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: 0; }
.job-meta { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 15px; }
.job-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(212, 175, 55, 0.12);
  border-radius: 20px; font-size: 0.85rem; color: var(--gray);
  border: 1px solid rgba(212, 175, 55, 0.25);
}
.job-tag i { color: var(--accent); }
.job-description p { margin-bottom: 0; color: var(--gray); line-height: 1.7; }
.culture-section { padding: 100px 0; background: var(--surface); }
.culture-content { padding: 20px; }
.culture-content h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }
.process-section { padding: 100px 0; background: var(--light); }
.process-container {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.process-step { padding: 30px; text-align: center; flex: 1; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.step-number {
  width: 50px; height: 50px; margin: 0 auto 15px;
  background: var(--gradient); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.5rem; font-weight: 700;
  box-shadow: 0 10px 22px rgba(180, 132, 31, 0.4);
}
.process-step h3 { font-size: 1.2rem; color: var(--ink); margin-bottom: 10px; }
.process-step p { color: var(--gray); margin-bottom: 0; font-size: 0.9rem; }
.testimonial-author {
  display: flex; align-items: center; gap: 15px; margin-top: 20px;
}
.testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.testimonial-info h4 { margin-bottom: 0; color: var(--ink); font-size: 1rem; }
.testimonial-info p { margin-bottom: 0; color: var(--gray); font-size: 0.85rem; }
.contact-career-section {
  padding: 80px 0; background: var(--gradient); color: white; text-align: center; position: relative; overflow: hidden;
}
.contact-career-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.contact-career-section .container { position: relative; z-index: 1; }
.contact-career-section .section-title { color: white; }
.contact-career-section .section-title::after { background: white; }
.contact-career-section .section-subtitle { color: rgba(255, 255, 255, 0.9); }

/* ===== LMS PAGE ===== */
.lms-page { padding: 140px 0 60px; }
.lms-header {
  background: var(--gradient); color: white;
  padding: 150px 0 80px; text-align: center;
}
.lms-login {
  max-width: 450px; margin: 0 auto;
  background: var(--surface); padding: 40px; border-radius: var(--border-radius);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.lms-login h2 { text-align: center; color: var(--ink); margin-bottom: 30px; }
.lms-login input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 12px; font-size: 1rem;
  margin-bottom: 15px; font-family: inherit; background: rgba(255, 255, 255, 0.05); color: var(--dark);
}
.lms-login input::placeholder { color: var(--gray-dim); }
.lms-login input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}
.lms-btn {
  display: block; width: 100%; padding: 14px; border: none;
  border-radius: 12px; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: var(--transition); margin-bottom: 10px;
  text-align: center; text-decoration: none;
}
.lms-btn-primary { background: var(--gradient); color: white; }
.lms-btn-secondary { background: var(--secondary); color: white; }
.lms-btn-danger { background: var(--danger); color: white; }
.lms-msg { text-align: center; color: var(--danger); margin-top: 10px; font-size: 0.9rem; }
.lms-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 30px; padding: 40px 0;
}

/* ===== 404 PAGE ===== */
.error-page {
  min-height: 70vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 100px 20px;
}
.error-code {
  font-size: 8rem; font-weight: 800;
  background: var(--primary-gradient); -webkit-background-clip: text;
  background-clip: text; color: transparent; line-height: 1;
  margin-bottom: 1rem;
}
.error-message h2 { font-size: 2rem; color: var(--ink); margin-bottom: 1rem; }
.error-message p { font-size: 1.1rem; color: var(--gray); margin-bottom: 2rem; max-width: 500px; }

/* ===== FLOATING SHAPES (hero decorations) ===== */
.hero-visual {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
}
.floating-shape {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.shape-1 { width: 300px; height: 300px; top: -100px; right: -50px; }
.shape-2 { width: 200px; height: 200px; bottom: -50px; left: -30px; }
.shape-3 { width: 150px; height: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ===== FOOTER SOCIAL (alternate class) ===== */
.footer-social-icons { display: flex; gap: 15px; }
.footer-social-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: rgba(255, 255, 255, 0.07);
  border-radius: 50%; color: white; transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-social-icons a:hover {
  background: var(--gradient); transform: translateY(-3px); border-color: transparent;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .section-title { font-size: 2.2rem; }
  .hero-title { font-size: 3rem; }
  .nav-menu { display: none; }
  .hamburger { display: flex; }
  .ceo-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .section-title { font-size: 2rem; }
  .hero { padding: 150px 0 80px; }
  .hero-title { font-size: 2.5rem; }
  .hero-description { font-size: 1.1rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .program-categories, .benefits-container, .culture-container, .quote-cards,
  .stats-container, .modules-container { grid-template-columns: 1fr; }
  .ad-highlights { flex-direction: column; align-items: center; }
  .course-card { min-width: 280px; }
  .footer-bottom-content { flex-direction: column; text-align: center; }
  .legal-links { justify-content: center; }
  .banner-carousel { height: 50vh; min-height: 350px; }
  .slide-content h2 { font-size: 2rem; }
  .courses-container { grid-template-columns: 1fr; }
  .ceo-image-wrapper { padding: 60px 30px; min-height: 300px; }
  .ceo-content { padding: 40px 30px; }
  .ceo-heading { font-size: 1.5rem; }
  .instructor-container { flex-direction: column; text-align: center; }
  .nav-auth { display: none; }
  .logo-container img { width: 48px; height: 48px; }
  .logo-text { font-size: 17px; }
}

@media (max-width: 576px) {
  .container { width: 95%; }
  .section-title { font-size: 1.8rem; }
  .hero-title { font-size: 2rem; }
}

/* ===== PRINT ===== */
@media print {
  .new-header, .site-header, .banner-carousel, .courses-filter,
  .back-to-top, .site-footer { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}

/* ===== ENROLLMENT FORM (dark variant) ===== */
.form-container { position: relative; }
.form-container[data-cmti-form],
.form-container[data-standalone] {
  background: transparent; box-shadow: none; overflow: visible;
  margin-top: 30px; border-radius: 24px;
}
.cm-form {
  position: relative;
  background: #0e1729;
  border-radius: 24px;
  overflow: visible;
  text-align: left;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.35);
}
.cm-form::before {
  content: '';
  position: absolute; inset: -2px;
  background: linear-gradient(135deg, #d4af37, #d4af37, #b8941f, #e3c877);
  background-size: 300% 300%;
  border-radius: 26px;
  z-index: -1;
  opacity: 0.8;
  animation: cmFormBorder 8s ease infinite;
}
@keyframes cmFormBorder {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cm-form-head {
  position: relative;
  padding: 34px 36px 30px;
  background:
    radial-gradient(circle at 85% -20%, rgba(227, 200, 119, 0.35), transparent 45%),
    linear-gradient(140deg, #05090f 0%, #16273f 55%, #101d33 100%);
  color: #fff;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}
.cm-form-head::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px; right: -90px; bottom: -140px;
  background: radial-gradient(circle, rgba(110, 198, 232, 0.4), transparent 70%);
  border-radius: 50%;
}
.cm-form-head .cm-form-icon {
  position: relative; z-index: 1;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  font-size: 1.5rem;
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
}
.cm-form-head h3 {
  position: relative; z-index: 1;
  font-size: 1.7rem; margin-bottom: 6px; color: #fff;
}
.cm-form-head .cm-form-sub {
  position: relative; z-index: 1;
  color: rgba(226, 232, 240, 0.85); font-size: 0.95rem; margin: 0;
}
.cm-form-head .cm-form-badges {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.cm-form-head .cm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em;
}
.cm-form-body { padding: 32px 36px 36px; }
.cm-form-steps {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 26px;
}
.cm-step { display: flex; align-items: center; gap: 8px; }
.cm-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #16273f; color: var(--accent);
  font-size: 0.78rem; font-weight: 700;
  border: 2px solid transparent; transition: var(--transition);
}
.cm-step-label { font-size: 0.78rem; font-weight: 600; color: var(--gray); }
.cm-step.active .cm-step-dot {
  background: var(--gradient); color: #fff;
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.45);
}
.cm-step.active .cm-step-label { color: var(--ink); }
.cm-step-line { flex: 1; height: 3px; background: rgba(148, 163, 184, 0.2); border-radius: 3px; }
.cm-step.done .cm-step-dot { background: var(--success); color: #070d18; }

.cm-form-panel { display: none; animation: cmFadeUp 0.4s ease; }
.cm-form-panel.active { display: block; }
@keyframes cmFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.cm-field { margin-bottom: 18px; position: relative; }
.cm-field label {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 0.9rem; color: var(--ink); margin-bottom: 8px;
}
.cm-field label .req { color: var(--danger); }
.cm-field label i.fas, .cm-field label i.far { color: var(--accent); font-size: 0.82rem; }
.cm-input-wrap { position: relative; }
.cm-input-wrap > i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--gray); font-size: 1rem; pointer-events: none; z-index: 2;
  transition: var(--transition);
}
.cm-form textarea + i, .cm-input-wrap.textarea > i { top: 18px; transform: none; }
.cm-field input,
.cm-field select,
.cm-field textarea {
  width: 100%;
  padding: 14px 16px 14px 46px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 0.97rem;
  font-family: inherit;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.05);
  transition: var(--transition);
  appearance: none; -webkit-appearance: none;
}
.cm-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}
.cm-field input::placeholder,
.cm-field textarea::placeholder { color: var(--gray-dim); }
.cm-field textarea { min-height: 110px; resize: vertical; padding-left: 46px; }
.cm-field input:focus,
.cm-field select:focus,
.cm-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(212, 175, 55, 0.06);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}
.cm-input-wrap:focus-within > i { color: var(--accent); }
.cm-field.has-error input,
.cm-field.has-error select,
.cm-field.has-error textarea {
  border-color: var(--danger);
  background: rgba(248, 113, 113, 0.08);
  animation: cmShake 0.3s ease;
}
.cm-field.has-error label { color: var(--danger); }
@keyframes cmShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.cm-error-msg {
  display: none;
  font-size: 0.78rem; color: var(--danger); font-weight: 600; margin-top: 6px;
}
.cm-field.has-error .cm-error-msg { display: block; }
.cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cm-choice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 12px; margin-bottom: 18px;
}
.cm-choice {
  position: relative;
}
.cm-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cm-choice span {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 10px;
  border: 1px solid var(--border); border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); cursor: pointer;
  font-size: 0.83rem; font-weight: 600; color: var(--ink);
  text-align: center; transition: var(--transition);
}
.cm-choice span i { font-size: 1.15rem; color: var(--accent); transition: var(--transition); }
.cm-choice input:checked + span {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(110, 198, 232, 0.14));
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
}
.cm-choice input:checked + span i { color: var(--primary-gradient); }
.cm-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.cm-summary {
  background: linear-gradient(135deg, #142038, #16273f);
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.cm-summary h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; margin-bottom: 14px; color: var(--ink);
}
.cm-summary h4 i { color: var(--accent); }
.cm-summary-list { display: grid; gap: 10px; }
.cm-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 0.9rem;
}
.cm-summary-row .k { color: var(--gray); font-weight: 600; }
.cm-summary-row .v { color: var(--ink); font-weight: 700; text-align: right; }

.cm-nav { display: flex; gap: 12px; margin-top: 8px; }
.cm-btn {
  border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 0.97rem;
  padding: 15px 30px; border-radius: 14px;
  transition: var(--transition);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.cm-btn-next {
  flex: 1;
  background: var(--gradient); color: #fff;
  box-shadow: 0 12px 26px rgba(212, 175, 55, 0.4);
  position: relative; overflow: hidden;
}
.cm-btn-next::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: 0.5s;
}
.cm-btn-next:hover::after { left: 120%; }
.cm-btn-next:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(212, 175, 55, 0.5); }
.cm-btn-prev {
  background: transparent; color: var(--accent);
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.cm-btn-prev:hover { border-color: var(--accent); background: rgba(110, 198, 232, 0.1); }
.cm-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.cm-btn-submit {
  width: 100%;
  background: linear-gradient(135deg, #10b981, #d4af37);
  color: #fff;
  box-shadow: 0 12px 26px rgba(16, 185, 129, 0.35);
}
.cm-btn-submit:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(16, 185, 129, 0.45); }

.cm-privacy {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.8rem; color: var(--gray); margin-top: 16px;
}
.cm-privacy i { color: var(--success); margin-top: 2px; }

.cm-form-loader {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(11, 16, 32, 0.9);
  border-radius: 24px;
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
  backdrop-filter: blur(3px);
}
.cm-form.sending .cm-form-loader { display: flex; }
.cm-spinner {
  width: 54px; height: 54px;
  border: 5px solid rgba(148, 163, 184, 0.2); border-top-color: var(--primary);
  border-radius: 50%;
  animation: cmSpin 0.8s linear infinite;
}
@keyframes cmSpin { to { transform: rotate(360deg); } }
.cm-form-loader p { margin: 0; font-weight: 600; color: var(--ink); }

.cm-success-panel {
  display: none;
  padding: 56px 36px;
  text-align: center;
}
.cm-form.success .cm-success-panel { display: block; animation: cmFadeUp 0.5s ease; }
.cm-form.success .cm-form-body,
.cm-form.success .cm-form-head { display: none; }
.cm-success-ring {
  width: 96px; height: 96px; margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #d4af37);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.6rem;
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.4);
  animation: cmPop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes cmPop { from { transform: scale(0); } to { transform: scale(1); } }
.cm-success-panel h3 { font-size: 1.7rem; color: var(--ink); margin-bottom: 10px; }
.cm-success-panel p { color: var(--gray); max-width: 440px; margin: 0 auto 10px; }
.cm-success-panel .cm-ref {
  display: inline-block; margin-top: 14px;
  background: rgba(212, 175, 55, 0.12); border: 1px dashed var(--primary);
  color: var(--accent); font-weight: 700;
  padding: 9px 18px; border-radius: 10px; font-size: 0.9rem;
}
.cm-success-actions { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cm-success-actions a {
  padding: 13px 26px; border-radius: 12px; font-weight: 700; font-size: 0.92rem;
  background: var(--gradient); color: #fff;
  box-shadow: 0 10px 22px rgba(180, 132, 31, 0.4);
}
.cm-success-actions a.alt { background: transparent; color: var(--accent); border: 1px solid var(--primary); box-shadow: none; }

/* ===== Standalone register page ===== */
.register-hero {
  background:
    radial-gradient(700px 400px at 80% -30%, rgba(212, 175, 55, 0.35), transparent 60%),
    linear-gradient(145deg, #05090f 0%, #0e1c30 60%, #101d33 120%);
  color: #fff;
  padding: 150px 0 70px; text-align: center;
  position: relative; overflow: hidden;
}
.register-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212,175,55,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.register-hero .container { position: relative; z-index: 1; }
.register-hero .hero-badge {
  display: inline-block; background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 18px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: 18px; position: relative; z-index: 1;
}
.register-hero h1 { color: #fff; position: relative; z-index: 1; }
.register-hero p {
  color: rgba(226, 232, 240, 0.9); max-width: 620px;
  margin: 0 auto; font-size: 1.1rem; position: relative; z-index: 1;
}
.register-why {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
  margin-top: 34px; position: relative; z-index: 1;
}
.register-why .rw-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.92rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 9px 18px; border-radius: 999px; color: var(--ink);
}
.register-why .rw-item i { color: var(--accent); }
.register-section { padding: 70px 0 90px; }
.register-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px;
  align-items: start;
}
.register-side-card {
  background: var(--surface); border-radius: 20px; padding: 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border); margin-bottom: 22px;
}
.register-side-card h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.15rem; color: var(--ink); margin-bottom: 16px;
}
.register-side-card h3 i { color: var(--accent); }
.register-side-card ul { display: grid; gap: 13px; }
.register-side-card li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.92rem; color: var(--dark); font-weight: 500;
}
.register-side-card li i { color: var(--success); margin-top: 3px; }
.register-side-card .contact-line {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 0.93rem; color: var(--dark); font-weight: 600;
}
.register-side-card .contact-line:last-child { border-bottom: none; }
.register-side-card .contact-line i {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(110, 198, 232, 0.15));
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.faq-section .faq-item .faq-question { cursor: pointer; }

@media (max-width: 992px) {
  .register-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cm-form-head, .cm-form-body, .cm-success-panel { padding-left: 22px; padding-right: 22px; }
  .cm-row { grid-template-columns: 1fr; gap: 0; }
  .cm-step-label { display: none; }
  .cm-nav { flex-direction: column-reverse; }
  .cm-btn { width: 100%; }
  .register-hero { padding-top: 130px; }
}

/* ==========================================================================
   PRO COMPONENT LAYER (v2.1)
   Shared utilities + lazy video facade + polish added during the pro refactor.
   ========================================================================== */

/* Anchor scroll offset under the sticky header */
section[id], div[id] { scroll-margin-top: 96px; }

/* Dark-theme scrollbars (WebKit + Firefox) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #070d18; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.55), rgba(110, 198, 232, 0.45));
  border-radius: 8px; border: 2px solid #070d18;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #d4af37, #d4af37); }
* { scrollbar-width: thin; scrollbar-color: #a8841c #070d18; }

/* Reusable gradient text */
.text-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Filigree divider used under section titles */
.divider {
  height: 3px; width: 88px; margin: 18px auto;
  background: var(--gradient); border-radius: 99px;
}

/* ===== Lazy (click-to-play) video facade ===== */
.lazy-video {
  position: relative;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(560px 320px at 72% -20%, rgba(212, 175, 55, 0.35), transparent 62%),
    radial-gradient(420px 260px at 15% 115%, rgba(110, 198, 232, 0.25), transparent 55%),
    linear-gradient(140deg, #070d18 0%, #0e1c30 55%, #0c1728 100%);
  overflow: hidden;
  isolation: isolate;
}
.lazy-video::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 78%);
  z-index: -1;
}
.lazy-video .lazy-label {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(226, 232, 240, 0.85); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.03em; text-shadow: 0 2px 10px rgba(0,0,0,0.6); pointer-events: none;
}
.lazy-video .lazy-play {
  width: 82px; height: 82px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.7rem;
  box-shadow: 0 16px 44px rgba(180, 132, 31, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;
}
.lazy-video .lazy-play::after {
  content: '';
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.45);
  animation: lazyPulse 2.2s ease-out infinite;
}
@keyframes lazyPulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.lazy-video:hover .lazy-play {
  transform: scale(1.08);
  box-shadow: 0 20px 54px rgba(180, 132, 31, 0.7);
}
.lazy-video:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lazy-video.loaded .lazy-play,
.lazy-video.loaded .lazy-label { display: none; }
.lazy-video.loaded { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .lazy-video .lazy-play::after { animation: none; display: none; }
}

/* Shared status chip */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 7px 14px; border-radius: 999px;
  font-size: 0.83rem; font-weight: 600; color: var(--ink);
}
.chip i { color: var(--accent); }

/* ===== Zebra-striped interactive table rows (catalog detail) ===== */
.table-hover tbody tr { transition: background 0.15s ease; }
[data-lms-link] { cursor: pointer; }

/* ===== RETENTION: resume strip (logged-in students only) ===== */
/* Sits above the header on every page for a signed-in student, so returning
   to the site costs one click instead of three navigations and a search. */
.resume-bar-global {
  background: linear-gradient(90deg, #0b1526 0%, #101d33 100%);
  border-bottom: 1px solid var(--border-strong);
  position: relative; z-index: 1200;
}
.rbg-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 0;
}
.rbg-inner > i { color: var(--gold); font-size: 1.15rem; flex: 0 0 auto; }
.rbg-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.rbg-text strong {
  display: block; font-size: .9rem; color: var(--ink); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rbg-text span { font-size: .78rem; color: var(--gray-dim); }
.rbg-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--gradient); color: #0a1120;
  padding: 9px 20px; border-radius: 999px;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  transition: var(--transition);
}
.rbg-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3); }
@media (max-width: 700px) {
  .rbg-text span { display: none; }
  .rbg-btn { padding: 8px 15px; }
}

/* ===== Print polish ===== */
@media print {
  header, .new-header, .site-header, .page-header, .video-stage,
  .banner-carousel, .courses-filter, .back-to-top, .site-footer, .wa-float,
  .lazy-video .lazy-play, .lazy-video .lazy-label {
    display: none !important;
  }
  .lazy-video { background: #fff !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8rem; color: #555; }
  .container { width: 100%; max-width: 100%; }
}

/* ===== SERVICES PAGE =====
   services.html was the only page written against a .page-hero / .blog-card
   component set that never made it into this file, so it rendered as unstyled
   flow. These are the shared primitives it needed, built from the same tokens
   as everything else rather than a one-off palette. */

/* Generic subpage hero - also used by the about/contact/careers static pages,
   which were already carrying an orphan .page-hero class. */
.page-hero {
  position: relative; padding: 92px 0 68px; text-align: center;
  background:
    radial-gradient(760px 340px at 50% 0%, rgba(212, 175, 55, 0.13), transparent 70%),
    var(--secondary-gradient);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-hero h1 { font-size: 3rem; margin: 14px 0 10px; }
.page-hero .lead {
  font-size: 1.14rem; color: var(--dark); max-width: 720px;
  margin: 0 auto; line-height: 1.7; opacity: .92;
}
.page-hero .hero-badge { display: inline-block; }
.page-hero-eyebrow {
  margin-top: 18px; font-size: .88rem; color: var(--gray);
}
.page-hero-eyebrow strong { color: var(--gold-soft); font-weight: 700; }

.lead { font-size: 1.08rem; line-height: 1.75; }
.section-tight { padding: 64px 0; }
.section-surface { background: var(--surface); }
.section-light { background: var(--light); }

/* ===== SERVICE CARDS ===== */
.svc-grid {
  display: grid; gap: 22px; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.svc-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--border-radius); padding: 30px 28px 26px;
  position: relative; overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.svc-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gradient); opacity: 0; transition: opacity .3s ease;
}
.svc-card:hover {
  transform: translateY(-4px); border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.svc-card:hover::before { opacity: 1; }

.svc-icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 18px;
  background: var(--glass-bg); border: 1px solid var(--border-strong); color: var(--gold-soft);
}
.svc-card h3 { font-size: 1.28rem; margin-bottom: 8px; }
.svc-card > p { font-size: .95rem; margin-bottom: 16px; }

.svc-list { margin-bottom: 20px; flex: 1; }
.svc-list li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: .9rem; color: var(--gray); line-height: 1.55;
}
.svc-list li::before {
  content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; left: 0; top: 0; color: var(--gold); font-size: .8rem;
}
.svc-card .btn { align-self: flex-start; }

/* Grouped offering: a labelled block so web/digital work reads as its own
   line of business rather than more tax cards. */
.svc-group + .svc-group { margin-top: 64px; }
.svc-group-head { max-width: 720px; margin: 0 auto; text-align: center; }
.svc-group-tag {
  display: inline-block; font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft);
  border: 1px solid var(--border-strong); background: var(--glass-bg);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.svc-group-head h2 { margin-bottom: 10px; }

/* ===== DIRECT CONTACT CHANNELS =====
   The old CTA sent visitors to contact.html, whose form has no action and no
   JS handler, so a "get in touch" click could not reach a human. These link
   straight to a channel that answers. */
.svc-channels {
  display: grid; gap: 16px; margin: 2.2rem auto 0; max-width: 820px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.svc-channel {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; color: var(--ink);
  transition: var(--transition);
}
.svc-channel:hover {
  border-color: var(--border-strong); background: var(--surface);
  transform: translateY(-2px);
}
.svc-channel i { font-size: 1.3rem; color: var(--gold); }
.svc-channel strong { display: block; font-size: .95rem; }
.svc-channel span { font-size: .84rem; color: var(--gray); }

/* ===== MISC SIZES ===== */
.btn-lg { padding: 15px 34px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* ===== FLOATING WHATSAPP =====
   Bottom-left on purpose. The bottom-right corner is already taken by
   .back-to-top (30/30) and #aiCoachFab (20/20), which overlap each other.
   WhatsApp green is used regardless of the navy/gold palette: the colour is
   how people recognise the channel, and recolouring it would hurt. */
.wa-float {
  position: fixed; left: 20px; bottom: 20px; z-index: 998;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff; text-decoration: none;
  padding: 12px 20px 12px 16px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; line-height: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float i { font-size: 1.5rem; }
.wa-float:hover {
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .46);
}
.wa-float:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* On a phone the label costs more room than it earns. */
@media (max-width: 700px) {
  .wa-float {
    left: 14px; bottom: 14px; padding: 0;
    width: 54px; height: 54px; justify-content: center; border-radius: 50%;
  }
  .wa-float span { display: none; }
  .wa-float i { font-size: 1.7rem; }
}

@media (max-width: 700px) {
  .page-hero { padding: 64px 0 48px; }
  .page-hero h1 { font-size: 2.2rem; }
  .svc-grid { grid-template-columns: 1fr; }
}

/* Language notice on lessons whose only video track is Urdu.
   330-odd lessons across the safety courses fall back to the Urdu track, and
   the page is otherwise entirely in English, so the switch used to happen
   without warning. */
.audio-language-notice {
    margin: 10px 0 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    background: rgba(110, 198, 232, .08);
    color: var(--gray);
    font-size: .9rem;
    line-height: 1.5;
    border-radius: 0 6px 6px 0;
}
.audio-language-notice i { color: var(--accent); margin-right: 6px; }
.audio-language-notice strong { color: var(--ink); }

/* Written lessons: readings and exercises that replaced media-less video slots.
   The brief is the lesson, so it gets a full reading column rather than being
   squeezed under a player. */
.written-lesson {
    background: var(--surface);
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 16px;
    padding: 26px 30px 28px;
}
.written-lesson.notes { margin-top: 14px; padding: 18px 22px 20px; }
.written-lesson-head {
    display: flex; align-items: center; gap: 9px;
    font-size: .74rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--accent);
    padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid rgba(148,163,184,.14);
}
.written-lesson.notes .written-lesson-head { font-size: .7rem; margin-bottom: 12px; padding-bottom: 10px; }
.written-lesson-body {
    color: var(--dark); line-height: 1.75; font-size: .96rem;
    white-space: normal; word-wrap: break-word;
}
.written-lesson-body p { margin: 0 0 12px; }
.written-lesson-hint {
    margin: 20px 0 0; padding: 12px 15px;
    background: rgba(110,198,232,.08);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    color: var(--gray); font-size: .88rem; line-height: 1.6;
}
.written-lesson-hint i { color: var(--accent); margin-right: 6px; }
.written-lesson-hint strong { color: var(--ink); }

/* Sidebar label for a non-video lesson */
.ltitle .ltag {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    background: rgba(110,198,232,.14); color: var(--accent);
    border-radius: 4px; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
}

/* ==========================================================================
   LIGHT (WHITE) THEME OVERRIDES
   The original sheet was built dark-first, so the tokens above flip most of
   the site to white by themselves. What remains are the places that hardcode
   the old navy: the frosted header, every navy hero, the carousel overlay,
   the footer, the dark form panel and the translucent white-on-dark fills.
   These rules sit last in the cascade so they win. Gold bands
   (.advertisement, .final-cta, .stats-section, .lms-header, buttons…) keep
   their white text and are deliberately NOT touched here.
   ========================================================================== */

/* ---- Header / mobile menu ---- */
.new-header, .header {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.new-header.scrolled, .header.scrolled {
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.12);
}
.mobile-menu {
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

/* ---- Glass helpers defined against the old dark canvas ---- */
.crystal-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--border);
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.10);
}
.chip {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--border);
}

/* ---- All navy heroes -> light gradient with dark ink ---- */
.hero,
.course-hero,
.about-hero,
.contact-hero,
.careers-hero,
.lms-hero,
.register-hero {
  background:
    radial-gradient(900px 520px at 84% -22%, rgba(212, 175, 55, 0.16), transparent 62%),
    radial-gradient(700px 500px at 6% 112%, rgba(8, 145, 178, 0.10), transparent 58%),
    linear-gradient(150deg, #ffffff 0%, #f3f7fd 52%, #e9f1fb 100%);
  color: var(--ink);
}
.hero-title,
.course-hero h1,
.register-hero h1,
.slide-content h2 { color: var(--ink); }
.hero-description,
.course-hero p,
.register-hero p { color: var(--dark); }
.highlight-card h3 { color: var(--ink); }
.highlight-card p { color: var(--dark); }
.highlight-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
}

/* ---- Hero decorative shapes: white-on-white is invisible ---- */
.floating-shape {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.14);
}

/* ---- Register hero extras ---- */
.register-hero .hero-badge {
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--border-strong);
  color: var(--gold-soft);
}
.register-why .rw-item {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border);
  color: var(--ink);
}

/* ---- Career hero outline button ---- */
.career-hero .btn-outline {
  border-color: var(--primary); color: var(--gold-deep); background: rgba(212, 175, 55, 0.06);
}
.career-hero .btn-outline:hover {
  background: rgba(212, 175, 55, 0.16); color: var(--gold-deep);
}

/* ---- Carousel overlay + controls ---- */
.carousel-slide::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.28));
}
.slide-content { color: var(--ink); }
.slide-content p { color: var(--dark); }
.carousel-arrow {
  background: rgba(15, 23, 42, 0.06); color: var(--ink);
  border: 1px solid rgba(15, 23, 42, 0.12);
}
.carousel-arrow:hover { background: rgba(212, 175, 55, 0.35); }
.carousel-dot { background: rgba(15, 23, 42, 0.22); }

/* ---- CEO panel ---- */
.ceo-image-wrapper { background: linear-gradient(150deg, #eef4fc 0%, #dcebf8 100%); }
.ceo-image-content { color: var(--ink); }
.ceo-name { color: var(--ink); }
.ceo-title { color: var(--gray); }

/* ---- Footer -> light ---- */
.site-footer {
  background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
  color: var(--dark);
}
.footer-logo h3,
.footer-social h4,
.footer-col h3,
.newsletter h4 { color: var(--ink); }
.footer-description,
.footer-col ul li a,
.contact-item,
.contact-item a,
.legal-links a,
.copyright { color: var(--gray); }
.contact-item a:hover,
.footer-col ul li a:hover,
.legal-links a:hover { color: var(--gold-deep); }
.social-icons a,
.footer-social-icons a {
  background: rgba(15, 23, 42, 0.04);
  color: var(--ink);
  border: 1px solid var(--border);
}
.newsletter-form input {
  background: #ffffff; color: var(--ink);
  border: 1px solid var(--border);
}
.newsletter-form input::placeholder { color: var(--gray-dim); }
.footer-bottom { background: rgba(15, 23, 42, 0.03); }

/* ---- Courses filter ---- */
.search-box input { background: rgba(15, 23, 42, 0.03); color: var(--ink); }
.category-btn { background: rgba(15, 23, 42, 0.03); color: var(--dark); }
.course-image { background-color: #eef2f8; }

/* ---- Contact map: drop the dark inversion ---- */
.map-container iframe { filter: none; }
.contact-status.ok { color: var(--success); background: rgba(14, 159, 110, 0.10); border: 1px solid rgba(14, 159, 110, 0.35); }
.contact-status.err { color: var(--danger); background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.30); }

/* ---- Toast + loader ---- */
.toast { color: var(--ink); }
.loader { background: rgba(255, 255, 255, 0.85); }

/* ---- Forms (contact / lms / generic) ---- */
.form-group input,
.form-group select,
.form-group textarea,
.lms-login input { background: rgba(15, 23, 42, 0.03); }
.stat-card:hover { box-shadow: var(--shadow-lg); }

/* ---- Enrollment form (cm-form) ---- */
.cm-form {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.cm-form-head {
  background:
    radial-gradient(circle at 85% -20%, rgba(227, 200, 119, 0.28), transparent 45%),
    linear-gradient(140deg, #f8fbff 0%, #e9f1fb 100%);
  color: var(--ink);
}
.cm-form-head::after { background: radial-gradient(circle, rgba(8, 145, 178, 0.16), transparent 70%); }
.cm-form-head h3 { color: var(--ink); }
.cm-form-head .cm-form-sub { color: var(--gray); }
.cm-form-head .cm-form-icon {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--border);
}
.cm-form-head .cm-badge {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--border);
  color: var(--ink);
}
.cm-step-dot { background: #eef2f8; color: var(--accent); }
.cm-step-line { background: rgba(15, 23, 42, 0.12); }
.cm-field input,
.cm-field select,
.cm-field textarea,
.cm-choice span { background: rgba(15, 23, 42, 0.03); }
.cm-summary { background: linear-gradient(135deg, #f6f9fe, #eef4fb); }
.cm-form-loader { background: rgba(255, 255, 255, 0.92); }

/* ---- Lazy video facade -> light ---- */
.lazy-video {
  background:
    radial-gradient(560px 320px at 72% -20%, rgba(212, 175, 55, 0.22), transparent 62%),
    radial-gradient(420px 260px at 15% 115%, rgba(8, 145, 178, 0.14), transparent 55%),
    linear-gradient(140deg, #ffffff 0%, #eef4fb 55%, #e6eef9 100%);
}
.lazy-video .lazy-label { color: var(--gray); text-shadow: none; }

/* ---- Resume strip (retention bar) ---- */
.resume-bar-global {
  background: linear-gradient(90deg, #ffffff 0%, #eef4fb 100%);
  border-bottom: 1px solid var(--border);
}

/* ---- Selection on gold ---- */
::selection { background: rgba(212, 175, 55, 0.30); color: var(--ink); }


/* CMTI-LEMON-MILK-BEGIN */
@font-face{font-family:'Lemon Milk';src:url('/assets/fonts/lemonmilk-bold.woff2') format('woff2'),url('/assets/fonts/lemonmilk-bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
h1,h2,h3,.logo,.brand,.site-title{font-family:'Lemon Milk','Poppins','Segoe UI',Arial,sans-serif;letter-spacing:.02em}
/* CMTI-LEMON-MILK-END */