/* ============================================================
   CLINI INDIA® — Expert UI Redesign  |  index.css  v3.0
   Design System: Royal Blue #00008C | Glassmorphism | Motion
   ============================================================ */

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

:root {
  /* Brand Colours */
  --ci-900:    #00003A;
  --ci-800:    #000060;
  --ci-700:    #00008C;   /* Primary brand */
  --ci-600:    #0000AF;
  --ci-500:    #0000D4;
  --ci-400:    #3333DD;
  --ci-300:    #6666E8;
  --ci-100:    #E8EEFF;
  --ci-50:     #F4F6FF;

  /* Accent / Teal */
  --teal:      #00C9B1;
  --teal-dark: #00A896;

  /* Amber CTA */
  --amber:     #F59E0B;
  --amber-dk:  #D97706;
  --amber-lt:  #FEF3C7;

  /* Neutrals */
  --white:     #FFFFFF;
  --gray-50:   #F8FAFC;
  --gray-100:  #F1F5F9;
  --gray-200:  #E2E8F0;
  --gray-400:  #94A3B8;
  --gray-500:  #64748B;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-800:  #1E293B;
  --gray-900:  #0F172A;

  /* Semantic */
  --success:   #10B981;
  --error:     #EF4444;

  /* Gradients */
  --grad-hero:   linear-gradient(135deg, #00003A 0%, #000060 40%, #00008C 70%, #0D1B6E 100%);
  --grad-card:   linear-gradient(135deg, rgba(0,0,140,.06) 0%, rgba(0,0,212,.04) 100%);
  --grad-amber:  linear-gradient(135deg, #F59E0B 0%, #EF6C00 100%);
  --grad-teal:   linear-gradient(135deg, #00C9B1 0%, #006FDE 100%);
  --grad-shine:  linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 16px rgba(0,0,140,.12), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 12px 40px rgba(0,0,140,.18), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:  0 24px 64px rgba(0,0,140,.22), 0 8px 24px rgba(0,0,0,.1);
  --shadow-glow:0 0 32px rgba(0,0,212,.3), 0 0 8px rgba(0,201,177,.15);
  --shadow-amber:0 8px 32px rgba(245,158,11,.35);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Motion */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:    180ms;
  --dur-mid:     320ms;
  --dur-slow:    500ms;

  /* Layout */
  --max-w:    1240px;
  --header-h: 76px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill:999px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-800);
  background: var(--white);
  overflow-x: hidden;
}

/* ── Scroll Animations ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-left  { opacity: 0; transform: translateX(-28px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal-left.in-view  { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(28px);  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal-right.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s !important; }
.reveal-delay-2 { transition-delay: .2s !important; }
.reveal-delay-3 { transition-delay: .3s !important; }
.reveal-delay-4 { transition-delay: .4s !important; }

/* ── Container ────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section-padding { padding: 96px 0; }

/* ── Typography ───────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }

.section-title-navy {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.17;
  color: #080F2D;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 16px;
}
.section-sub-desc {
  font-size: 1.05rem;
  color: #4A5568;
  max-width: 600px;
  margin: 0 auto 52px;
  line-height: 1.75;
  font-weight: 400;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: .925rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-mid) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-shine);
  opacity: 0;
  transition: opacity var(--dur-mid);
}
.btn:hover::after { opacity: 1; }

.btn-navy {
  background: var(--ci-700);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,140,.28);
}
.btn-navy:hover {
  background: var(--ci-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,140,.38);
}

.btn-amber {
  background: var(--grad-amber);
  color: var(--white);
  box-shadow: var(--shadow-amber);
}
.btn-amber:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(245,158,11,.45);
}

.btn-outline-navy {
  background: transparent;
  border-color: var(--ci-700);
  color: var(--ci-700);
}
.btn-outline-navy:hover {
  background: var(--ci-700);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-gray {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  color: var(--white);
  backdrop-filter: blur(8px);
}
.btn-outline-gray:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--white);
  color: var(--ci-700);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.18); }

.btn-text { background: transparent; color: var(--gray-600); border-color: transparent; padding: 10px 14px; }
.btn-text:hover { color: var(--ci-700); }

.btn-lg { font-size: 1rem; padding: 14px 32px; }
.w-full { width: 100%; }

/* ── Header ───────────────────────────────────────────────── */
.official-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,140,.08);
  transition: height var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid),
              background var(--dur-mid);
}
.official-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ci-700) 0%, var(--teal) 50%, var(--amber) 100%);
}
.official-header.shrunk {
  height: 60px;
  box-shadow: 0 4px 24px rgba(0,0,140,.10);
  background: rgba(255,255,255,.99);
}

.header-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

/* Logo */
.clini-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
}
.clini-logo-img {
  height: 44px;
  width: auto;
  transition: transform var(--dur-mid) var(--ease-spring);
}
.clini-logo-wrap:hover .clini-logo-img { transform: scale(1.04); }
.official-header.shrunk .clini-logo-img { height: 36px; }

/* Nav */
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-link {
  font-size: .9rem;
  font-weight: 500;
  color: var(--gray-600);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all var(--dur-fast);
  position: relative;
}
.top-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 16px; height: 2px;
  background: var(--ci-700);
  border-radius: 1px;
  transition: transform var(--dur-mid) var(--ease-spring);
}
.top-link:hover { color: var(--ci-700); background: var(--ci-50); }
.top-link:hover::after { transform: translateX(-50%) scaleX(1); }

.action-menu { display: flex; align-items: center; gap: 8px; }

/* Mobile */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--ci-700);
  border-radius: 1px;
  transition: all var(--dur-mid) var(--ease-in-out);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--ci-100);
  z-index: 999;
  padding: 16px 24px 24px;
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid);
}
.mobile-nav.open { display: block; transform: none; opacity: 1; }
.mobile-links { display: flex; flex-direction: column; gap: 2px; }
.mobile-link {
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 500;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  transition: all var(--dur-fast);
}
.mobile-link:hover { background: var(--ci-50); color: var(--ci-700); }
.mobile-auth-row { display: flex; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-100); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  background: #080f1e url('hero-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
}

/* Animated hex grid background */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Subtle left-side vignette so text stays readable over the BG image */
  background: linear-gradient(
    105deg,
    rgba(5,10,30,.55) 0%,
    rgba(5,10,30,.25) 50%,
    transparent 80%
  );
  pointer-events: none;
}

@keyframes hexDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 80px 184px; }
}

/* Glowing orbs */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Very subtle bottom fade only */
  background: linear-gradient(to top, rgba(5,10,30,.4) 0%, transparent 30%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
  padding: 72px 0 80px;
  position: relative;
  z-index: 1;
}

/* Floating hexagon decorations */
.hero-hex-float {
  position: absolute;
  border: 2px solid rgba(255,255,255,.1);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation: floatHex var(--dur, 8s) ease-in-out infinite;
}
.hero-hex-float:nth-child(1) { width:120px;height:120px; top:15%; left:5%;  --dur:9s; opacity:.3; animation-delay:-2s; }
.hero-hex-float:nth-child(2) { width:60px; height:60px;  top:60%; left:8%;  --dur:7s; opacity:.2; animation-delay:-4s; }
.hero-hex-float:nth-child(3) { width:80px; height:80px;  top:25%; right:3%; --dur:11s;opacity:.15;animation-delay:-1s; }

@keyframes floatHex {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-18px) rotate(3deg); }
  66%     { transform: translateY(10px) rotate(-2deg); }
}

.hero-content { color: var(--white); }

.official-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--teal);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  animation: pulseGlow 3s ease-in-out infinite;
}
.official-ribbon::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--teal);
  animation: dot-blink 1.5s ease-in-out infinite;
}
@keyframes dot-blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 rgba(0,201,177,0);} 50%{box-shadow:0 0 20px rgba(0,201,177,.12);} }

.hero-title {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .025em;
  margin-bottom: 20px;
  color: var(--white);
}
.blue-highlight { background: linear-gradient(90deg, #2563EB 0%, #0AAFB6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 520px;
}

.hero-bullets {
  list-style: none;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .95rem;
  color: rgba(255,255,255,.82);
}
.bullet-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px; height: 20px;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  margin-top: 2px;
  box-shadow: 0 0 10px rgba(0,201,177,.4);
}

.hero-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Hero Form Card ─────────────────────────────────────────── */
.hero-form-panel {
  position: relative;
  z-index: 2;
}
.form-card-inner {
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0,0,140,.08);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,140,.06);
  position: relative;
  overflow: hidden;
}
.form-card-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, #7C3AED 100%);
}
.form-card-inner h3 {
  font-size: 1.25rem;
  color: #080F2D;
  margin-bottom: 6px;
  font-weight: 700;
}
.form-card-inner h3 .counsel-teal {
  color: var(--teal);
}
.form-icon-wrap {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--teal) 0%, #7C3AED 100%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(10,175,182,.35);
}
.form-instructions {
  font-size: .83rem;
  color: #64748B;
  margin-bottom: 20px;
  line-height: 1.5;
}
.official-form { display: flex; flex-direction: column; gap: 14px; }
.form-row, .form-control-wrapper { display: flex; flex-direction: column; gap: 5px; }

.form-control-wrapper label {
  font-size: .78rem;
  font-weight: 700;
  color: #374151;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.form-control-wrapper input,
.form-control-wrapper select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: .88rem;
  color: #1E293B;
  background: #F8FAFC;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none;
  -webkit-appearance: none;
}
.form-control-wrapper input::placeholder { color: #94A3B8; }
.form-control-wrapper select { color: #475569; }
.form-control-wrapper select option { background: #FFFFFF; color: #1E293B; }
.form-control-wrapper input:focus,
.form-control-wrapper select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(10,175,182,.15);
  background: #FFFFFF;
}
.error-msg { font-size: .75rem; color: var(--error); min-height: 14px; }

.form-row-checkbox { display: flex; flex-direction: column; gap: 5px; }
.consent-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consent-label input[type=checkbox] { display: none; }
.checkbox-box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid #CBD5E1;
  border-radius: 4px;
  margin-top: 1px;
  position: relative;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.consent-label input:checked + .checkbox-box { background: var(--teal); border-color: var(--teal); }
.consent-label input:checked + .checkbox-box::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: .65rem;
  font-weight: 900;
}
.checkbox-text { font-size: .77rem; color: #475569; line-height: 1.5; font-weight: 500; }

/* ── Metrics Bar ─────────────────────────────────────────── */
.blue-metrics-bar {
  background: linear-gradient(90deg, #00006E 0%, #00008C 40%, #0000AF 70%, #00008C 100%);
  position: relative;
  overflow: hidden;
}
.blue-metrics-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,201,177,.12) 0%, transparent 50%, rgba(245,158,11,.08) 100%);
}
.bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.bar-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.12);
  transition: background var(--dur-mid);
}
.bar-item:last-child { border-right: none; }
.bar-item:hover { background: rgba(255,255,255,.06); }
.bar-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: transform var(--dur-mid) var(--ease-spring), background var(--dur-mid);
}
.bar-item:hover .bar-icon { transform: scale(1.08); background: rgba(255,255,255,.2); }
.bar-text { display: flex; flex-direction: column; gap: 2px; }
.bar-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--white); }
.bar-subtitle { font-size: .78rem; color: rgba(255,255,255,.65); }

/* ── Learn / Skills Section ──────────────────────────────── */
/* ─── LEARN & SKILLS SECTION ─────────────────────────────────────────────── */
.learn-section {
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.learn-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,140,.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.learn-section .container { position: relative; z-index: 1; }
.learn-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -180px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,0,140,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Section header */
.learn-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.learn-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ci-700);
  background: rgba(0,0,140,.07); padding: 6px 16px;
  border-radius: var(--radius-pill); margin-bottom: 16px;
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); display: inline-block;
  animation: idlePulse 2s ease-in-out infinite;
}
.learn-main-title {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800; color: var(--ci-900);
  line-height: 1.15; margin-bottom: 14px;
}
.learn-sub { font-size: 1rem; color: var(--gray-600); line-height: 1.7; }

/* Two-column layout */
.learn-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.col-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-400);
  margin-bottom: 20px;
}

/* ── Outcome cards (left) ──────────────────────────── */
.learn-outcomes-col { display: flex; flex-direction: column; }
.outcome-card {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 22px;
  background: var(--white);
  border: 1.5px solid rgba(0,0,140,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0,0,140,.05);
  margin-bottom: 14px;
  transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
  animation: fadeSlideUp .5s var(--ease-in-out) both;
  animation-delay: var(--delay, 0s);
  cursor: default;
}
.outcome-card:hover {
  transform: translateX(6px);
  border-color: rgba(0,0,140,.2);
  box-shadow: 0 6px 24px rgba(0,0,140,.1);
}
.outcome-num {
  flex-shrink: 0;
  font-size: 1.35rem; font-weight: 900;
  color: transparent;
  background: linear-gradient(135deg, var(--ci-700), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  line-height: 1; min-width: 32px;
}
.outcome-body h4 {
  font-size: .95rem; font-weight: 700;
  color: var(--ci-900); margin-bottom: 4px;
}
.outcome-body p { font-size: .85rem; color: var(--gray-600); line-height: 1.6; margin: 0; }

/* ── Skill cards grid (right) ─────────────────────── */
.skills-col { display: flex; flex-direction: column; }
.skill-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.skill-card {
  background: var(--white);
  border: 1.5px solid rgba(0,0,140,.07);
  border-radius: var(--radius-lg);
  padding: 18px 16px 14px;
  box-shadow: 0 2px 10px rgba(0,0,140,.04);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
  animation: fadeSlideUp .5s var(--ease-in-out) both;
  animation-delay: var(--delay, 0s);
  cursor: default;
  position: relative; overflow: hidden;
}
.skill-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--c, var(--ci-700)), transparent);
  opacity: 0; transition: opacity .3s;
}
.skill-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,140,.1); border-color: rgba(0,0,140,.15); }
.skill-card:hover::after { opacity: 1; }
.skill-icon-wrap {
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--c, var(--ci-700)) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--c, var(--ci-700));
  flex-shrink: 0;
}
.skill-card-body h5 {
  font-size: .82rem; font-weight: 700;
  color: var(--ci-900); margin-bottom: 3px; line-height: 1.3;
}
.skill-card-body p { font-size: .76rem; color: var(--gray-500); line-height: 1.5; margin: 0; }
.skill-level-bar {
  height: 3px; background: var(--gray-100); border-radius: 99px; overflow: hidden;
}
.skill-level-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c, var(--ci-700)), color-mix(in srgb, var(--c, var(--ci-700)) 60%, white));
  border-radius: 99px;
  transition: width 1.2s var(--ease-in-out);
}
.skill-card.in-view .skill-level-fill { width: var(--w, 80%); }

/* Outcome badges row */
.outcome-badges {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-top: 4px;
}
.o-badge {
  background: linear-gradient(135deg, var(--ci-700), #0D1B6E);
  border-radius: var(--radius-md);
  padding: 16px 8px;
  text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.o-num { font-size: 1.4rem; font-weight: 900; color: var(--white); line-height: 1; }
.o-label { font-size: .68rem; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.7); text-transform: uppercase; }

/* Grid two-cols kept for other sections */
.grid-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.grid-two-cols.align-center { align-items: center; }

/* Legacy pills — keep for fallback */
.skills-pill-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.skill-pill {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: var(--ci-50); border: 1.5px solid var(--ci-100);
  color: var(--ci-700); border-radius: var(--radius-pill);
  font-size: .85rem; font-weight: 600;
  transition: all var(--dur-mid) var(--ease-spring);
}
.skill-pill:hover {
  background: var(--ci-700); color: var(--white); border-color: var(--ci-700);
  transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,140,.22);
}

@media (max-width: 900px) {
  .learn-two-col { grid-template-columns: 1fr; gap: 40px; }
  .skill-cards-grid { grid-template-columns: 1fr 1fr; }
  .outcome-badges { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 560px) {
  .skill-cards-grid { grid-template-columns: 1fr; }
  .outcome-badges { grid-template-columns: repeat(2,1fr); }
}

/* ── Tools Grid ──────────────────────────────────────────── */
.tools-section {
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.tools-section::before {
  content: '';
  position: absolute; inset: 0;
  background: none;
  pointer-events: none;
}
.tools-section .container { position: relative; z-index: 1; }
.tools-section .section-title-navy { color: #0B1F3A; }
.tools-section .section-sub-desc { color: #475569; }
.section-header-centered { text-align: center; }
.section-header-centered .delivery-eyebrow,
.delivery-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1.5px solid;
  margin-bottom: 18px;
}
.tools-grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}
/* Last row of 3 items centred (11 items = 4+4+3) */
.tools-grid-layout .tool-logo-box:nth-child(9) { grid-column: 1; }
.tools-grid-layout .tool-logo-box:nth-child(9)  ~ .tool-logo-box:nth-child(10) { grid-column: 2; }
.tools-grid-layout .tool-logo-box:nth-child(9)  ~ .tool-logo-box:nth-child(11) { grid-column: 3; }

.tool-logo-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 24px 20px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all var(--dur-mid) var(--ease-out);
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(6px);
}
.tool-logo-box::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,201,177,.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-mid);
}
.tool-logo-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(0,201,177,.3);
  background: rgba(255,255,255,.08);
  border-color: rgba(0,201,177,.3);
}
.tool-logo-box:hover::before { opacity: 1; }
.tool-logo-box p { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.55; position: relative; z-index: 1; margin: 0; }

/* Logo wrapper */
.tool-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-bottom: 4px;
}
.tool-brand-logo {
  height: 36px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: none;
  transition: transform var(--dur-mid) var(--ease-spring), filter var(--dur-mid);
}
.tool-brand-logo--wide {
  max-width: 130px;
  height: 32px;
}
.tool-logo-box:hover .tool-brand-logo {
  transform: scale(1.06);
  filter: none;
}

.t-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  position: relative;
  z-index: 1;
}
.t-color-green  { background: rgba(0,201,177,.15); color: #00C9B1; border: 1px solid rgba(0,201,177,.3); }
.t-color-blue   { background: rgba(59,130,246,.15); color: #93C5FD; border: 1px solid rgba(59,130,246,.3); }
.t-color-purple { background: rgba(139,92,246,.15); color: #C4B5FD; border: 1px solid rgba(139,92,246,.3); }
.t-color-cyan   { background: rgba(6,182,212,.15); color: #67E8F9; border: 1px solid rgba(6,182,212,.3); }
.t-color-orange { background: rgba(245,158,11,.15); color: #FCD34D; border: 1px solid rgba(245,158,11,.3); }

/* ── Curriculum ─────────────────────────────────────────── */
.curriculum-section { background: var(--ci-900); color: var(--white); }
.curriculum-section .section-title-navy { color: var(--white); }
.curriculum-section .section-sub-desc { color: rgba(255,255,255,.65); }

.curriculum-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.curriculum-sidebar {
  border-right: 1px solid rgba(255,255,255,.1);
  padding: 8px;
  background: rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.curriculum-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: rgba(255,255,255,.55);
  transition: all var(--dur-mid);
  position: relative;
  overflow: hidden;
}
.curriculum-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--teal);
  border-radius: 0 2px 2px 0;
  transition: transform var(--dur-mid) var(--ease-spring);
}
.curriculum-tab:hover { color: var(--white); background: rgba(255,255,255,.06); }
.curriculum-tab.active {
  color: var(--white);
  background: rgba(0,201,177,.12);
}
.curriculum-tab.active::before { transform: translateY(-50%) scaleY(1); }
.tab-module-num { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.tab-module-title { font-family: var(--font-display); font-size: .82rem; font-weight: 600; line-height: 1.35; }

.curriculum-details-panel { padding: 36px 40px; }
.curr-panel { animation: panelFadeIn var(--dur-mid) var(--ease-out); }
.curr-panel[hidden] { display: none; }
@keyframes panelFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.curr-panel h3 { font-size: 1.35rem; color: var(--white); margin-bottom: 10px; }
.curr-intro { font-size: .95rem; color: rgba(255,255,255,.65); margin-bottom: 28px; line-height: 1.65; }
.curr-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.highlight-box {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.highlight-box h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 14px; font-weight: 700; }
.curr-bullets-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.curr-bullets-list li { font-size: .88rem; color: rgba(255,255,255,.75); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.curr-bullets-list li::before { content:'›'; color: var(--teal); flex-shrink:0; font-size: 1.1rem; margin-top: -1px; }
.lab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(0,201,177,.1);
  border: 1px solid rgba(0,201,177,.25);
  border-radius: var(--radius-pill);
  font-size: .8rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 8px;
}
.lab-pill::before { content:'⚗'; font-size: .75rem; }

.curriculum-action-footer { text-align: center; margin-top: 32px; }

/* ── Simulator ──────────────────────────────────────────── */
.simulator-section { background: var(--gray-900); color: var(--white); position: relative; overflow: hidden; }
.simulator-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 500px at 50% 50%, rgba(0,0,140,.3) 0%, transparent 70%);
}
.simulator-section .section-title-navy { color: var(--white); }
.simulator-section .section-sub-desc { color: rgba(255,255,255,.6); }
.simulator-section .container { position: relative; z-index: 1; }

.simulator-wrapper {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  margin-top: 16px;
}

.sim-controls-panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  padding: 24px;
}
.sim-controls-panel h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); margin-bottom: 16px; font-weight: 700; }
.sim-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.sim-option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: rgba(255,255,255,.7);
  transition: all var(--dur-mid);
}
.sim-option-btn.active, .sim-option-btn:hover {
  background: rgba(0,0,140,.4);
  border-color: rgba(0,201,177,.4);
  color: var(--white);
}
.sim-icon-box {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .03em;
}
.bg-blue   { background: linear-gradient(135deg,#0000AF,#003FD4); }
.bg-purple { background: linear-gradient(135deg,#5B21B6,#7C3AED); }
.bg-green  { background: linear-gradient(135deg,#065F46,#059669); }

.sim-opt-text { display: flex; flex-direction: column; gap: 2px; }
.sim-opt-name { font-size: .9rem; font-weight: 600; }
.sim-opt-sub  { font-size: .75rem; color: rgba(255,255,255,.5); }

.sim-action-triggers { display: flex; flex-direction: column; gap: 10px; }

.sim-screen-panel {
  background: #050c1a;
  border: 1px solid rgba(0,201,177,.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,201,177,.05), inset 0 0 40px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
}
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(0,201,177,.05);
  border-bottom: 1px solid rgba(0,201,177,.15);
  font-family: 'Courier New', monospace;
  font-size: .75rem;
}
.screen-indicator { color: var(--teal); font-weight: 700; letter-spacing: .1em; }
.screen-patient { color: rgba(255,255,255,.4); }

.screen-viewport { position: relative; height: 300px; min-height: 300px; background: #030a14; overflow: hidden; flex-shrink: 0; }
.scanning-laser-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  box-shadow: 0 0 12px var(--teal);
  opacity: 0;
  animation: none;
  z-index: 10;
}
.scanning-laser-line.active {
  opacity: 1;
  animation: scanDown 2s linear infinite;
}
@keyframes scanDown { 0%{top:0%} 100%{top:100%} }

.viewport-inner { position: relative; height: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sim-canvas { display: none; max-width: 100%; }
.sim-canvas.active { display: block; }
.viewport-placeholder { text-align: center; color: rgba(255,255,255,.3); font-size: .9rem; line-height: 1.7; }
.viewport-placeholder strong { color: rgba(255,255,255,.6); }

.screen-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.metrics-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 12px; }
.metric-block { display: flex; flex-direction: column; gap: 4px; }
.mb-label { font-size: .7rem; color: rgba(255,255,255,.4); letter-spacing: .06em; text-transform: uppercase; }
.mb-val { font-family: 'Courier New', monospace; font-size: .95rem; color: var(--teal); font-weight: 700; }
.shap-explanation-box { background: rgba(0,201,177,.06); border: 1px solid rgba(0,201,177,.2); border-radius: var(--radius-md); padding: 12px 16px; font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.6; max-height: 80px; overflow-y: auto; }

/* ── Certificate ─────────────────────────────────────────── */
.certificate-section {
  background: linear-gradient(160deg, #EEF2FF 0%, #F0F9FF 40%, #E0F2FE 100%);
  position: relative;
  overflow: hidden;
}
.certificate-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,0,140,.06) 0%, transparent 70%);
  pointer-events: none;
}
.certificate-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,201,177,.05) 0%, transparent 70%);
  pointer-events: none;
}
.certificate-section .container { position: relative; z-index: 1; }
.cert-features { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: .93rem; color: var(--gray-700); line-height: 1.6; }
.f-bullet { flex-shrink:0; width:22px; height:22px; background:var(--success); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; margin-top:1px; }

.mock-certificate-card {
  background: linear-gradient(145deg, #FFFFF8 0%, #F8F4FF 100%);
  border-radius: var(--radius-xl);
  padding: 4px;
  box-shadow: var(--shadow-xl),
    0 0 0 1px rgba(0,0,140,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mock-certificate-card:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1.02); }
.cert-border-inner {
  border: 2px solid rgba(0,0,140,.12);
  border-radius: calc(var(--radius-xl) - 4px);
  padding: 36px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cert-border-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46' viewBox='0 0 40 46'%3E%3Cpath d='M20 0l20 11.5v23L20 46 0 34.5v-23z' fill='none' stroke='rgba(0,0,140,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.cert-header-logos { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.cert-logo-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 12px;
  border: 1.5px solid var(--ci-700);
  border-radius: var(--radius-pill);
  color: var(--ci-700);
  letter-spacing: .04em;
}
.cert-border-inner h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .2em; color: var(--gray-600); margin-bottom: 12px; font-weight: 600; }
.cert-award-to { font-size: .8rem; color: var(--gray-400); margin-bottom: 6px; }
.cert-border-inner h3 { font-size: 1.5rem; color: var(--ci-700); margin-bottom: 10px; }
.cert-award-reason { font-size: .8rem; color: var(--gray-600); margin-bottom: 8px; max-width: 340px; margin-inline: auto; }
.cert-border-inner h5 { font-size: 1rem; color: var(--ci-700); margin-bottom: 10px; }
.cert-dates { font-size: .78rem; color: var(--gray-500); margin-bottom: 24px; }
.cert-signatures-row { display: flex; gap: 32px; justify-content: center; }
.sig-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sig-line { width: 100px; height: 1px; background: var(--gray-400); }
.sig-col span { font-size: .7rem; color: var(--gray-500); text-align: center; }

/* ── Instructors ─────────────────────────────────────────── */
.instructors-section {
  background: #FFFFFF;
  color: #0B1F3A;
  position: relative;
  overflow: hidden;
}
.instructors-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 500px 350px at 80% 30%, rgba(0,201,177,.08) 0%, transparent 60%),
    radial-gradient(ellipse 300px 300px at 20% 80%, rgba(245,158,11,.05) 0%, transparent 60%);
  pointer-events: none;
}
.instructors-section .container { position: relative; z-index: 1; }
.instructors-section .section-title-navy { color: #0B1F3A; }
.instructors-section .section-sub-desc { color: #475569; }
.instructor-profile-card {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
  background: var(--white);
  border: none;
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  transition: box-shadow var(--dur-mid), transform var(--dur-mid);
}
.instructor-profile-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,.35); transform: translateY(-3px); }
.profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.profile-avatar-svg { width: 140px; height: 140px; border-radius: 50%; box-shadow: var(--shadow-md); }
.profile-bio-wrap h3 { font-size: 1.5rem; color: var(--ci-700); margin-bottom: 4px; }
.profile-subtitle { font-size: .83rem; color: var(--gray-500); display: block; margin-bottom: 14px; line-height: 1.5; }
.profile-text { font-size: .88rem; color: var(--gray-700); line-height: 1.7; margin-bottom: 20px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prof-stat-box {
  padding: 12px 20px;
  background: var(--ci-50);
  border: 1.5px solid rgba(0,0,140,.1);
  border-radius: var(--radius-md);
  font-size: .78rem;
  color: var(--gray-600);
  text-align: center;
}
.prof-stat-box strong { display: block; font-size: 1.25rem; color: var(--ci-700); font-family: var(--font-display); margin-bottom: 2px; }

/* ── Pricing ─────────────────────────────────────────────── */
/* ─── PRICING SECTION — Light Premium ────────────────────────────────────── */
.pricing-section {
  background: linear-gradient(180deg, #DBEAFE 0%, #EEF2FF 25%, #F0F9FF 60%, #FAFBFF 100%);
  color: #080F2D;
  position: relative;
  overflow: hidden;
}
.pricing-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.pricing-blob-1 {
  width: 450px; height: 450px;
  top: -100px; left: -100px;
  background: radial-gradient(circle, rgba(37,99,235,.2) 0%, transparent 70%);
}
.pricing-blob-2 {
  width: 350px; height: 350px;
  bottom: -80px; right: -80px;
  background: radial-gradient(circle, rgba(10,175,182,.15) 0%, transparent 70%);
}
.pricing-section .container { position: relative; z-index: 1; }

/* Eyebrow */
.pricing-label-row { text-align: center; margin-bottom: 40px; }
.pricing-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ci-700);
  background: rgba(0,0,140,.07);
  border: 1px solid rgba(0,0,140,.18);
  padding: 6px 18px; border-radius: 999px;
}
.pe-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ci-700); display: inline-block;
  animation: idlePulse 2s ease-in-out infinite;
}

/* Main grid */
.pricing-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: start;
}

/* ── Pricing card ─────────────────────────────────── */
.pricing-card {
  background: var(--white);
  border: 1.5px solid rgba(0,0,140,.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 4px 24px rgba(0,201,177,.12);
  position: relative;
}
.pc-top-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--teal), #F59E0B, var(--teal));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.pc-inner { padding: 36px 36px 32px; }

.pc-badge-row {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 22px;
}
.pc-live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.35);
  color: #F59E0B;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.live-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #F59E0B;
  display: inline-block;
  animation: idlePulse 1.8s ease-in-out infinite;
}
.pc-seats-left {
  font-size: .75rem; color: var(--gray-500);
  border: 1px solid rgba(0,0,140,.12);
  padding: 4px 12px; border-radius: 999px;
}

.pc-label {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 10px;
}

.pc-price-wrap { margin-bottom: 24px; }
.pc-original {
  font-size: 1rem; color: var(--gray-400);
  text-decoration: line-through;
  margin-bottom: 4px;
}
.pc-current {
  font-size: 3.2rem; font-weight: 900;
  color: var(--ci-900); line-height: 1;
  display: flex; align-items: flex-start; gap: 4px;
}
.pc-currency { font-size: 1.6rem; margin-top: 8px; font-weight: 700; color: var(--ci-900); }
.pc-gst { font-size: .85rem; color: var(--gray-400); font-weight: 400; align-self: flex-end; margin-bottom: 4px; margin-left: 6px; }
.pc-saving-pill {
  display: inline-flex;
  margin-top: 10px;
  background: rgba(0,201,177,.15);
  border: 1px solid rgba(0,201,177,.3);
  color: var(--teal);
  font-size: .75rem; font-weight: 700;
  padding: 4px 14px; border-radius: 999px;
}

.pc-divider { height: 1px; background: rgba(0,0,140,.08); margin: 20px 0; }

.pc-includes {
  list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px;
}
.pc-includes li {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: var(--gray-700); line-height: 1.45;
}
.pc-check { width: 20px; height: 20px; flex-shrink: 0; }

.pc-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, #3B4FCC 0%, #4F46E5 50%, #2563EB 100%);
  color: #FFFFFF;
  font-size: .95rem; font-weight: 800;
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: none; cursor: pointer;
  transition: transform .25s var(--ease-spring), box-shadow .25s, filter .25s;
  box-shadow: 0 8px 32px rgba(79,70,229,.35);
}
.pc-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(79,70,229,.5);
  filter: brightness(1.08);
}

.pc-trust {
  text-align: center; font-size: .73rem;
  color: var(--gray-400); margin-top: 14px;
}

/* ── Benefit pillars (right) ─────────────────────── */
.pricing-pillars { display: flex; flex-direction: column; gap: 16px; }
.pricing-pillars .col-label { color: var(--gray-400); }
.pillar-card {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 22px 20px;
  background: var(--white);
  border: 1.5px solid rgba(0,0,140,.08);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,140,.04);
  transition: background .3s, border-color .3s, transform .3s var(--ease-spring), box-shadow .3s;
  cursor: default;
}
.pillar-card:hover {
  background: #F8F9FF;
  border-color: rgba(0,0,140,.2);
  box-shadow: 0 8px 24px rgba(0,0,140,.1);
  transform: translateX(6px);
}
.pillar-icon {
  flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 12px;
  background: color-mix(in srgb, var(--ic, var(--teal)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic, var(--teal)) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--ic, var(--teal));
}
.pillar-body h4 { font-size: .95rem; font-weight: 700; color: var(--ci-900); margin-bottom: 5px; }
.pillar-body p  { font-size: .82rem; color: var(--gray-500); line-height: 1.6; margin: 0; }
.pillar-arrow {
  flex-shrink: 0; margin-left: auto;
  color: rgba(0,0,140,.2); font-size: 1.1rem;
  align-self: center;
  transition: color .3s, transform .3s;
}
.pillar-card:hover .pillar-arrow { color: var(--ci-700); transform: translateX(4px); }

/* Trust strip — 3 separate bordered boxes */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.trust-item {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 600; text-align: center;
  color: #374151;
  padding: 14px 12px;
  background: #FFFFFF;
  border: 1.5px solid rgba(0,0,140,.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,140,.05);
}
.trust-item svg { color: var(--ci-700); flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
  .pricing-main-grid { grid-template-columns: 1fr; }
  .trust-strip { flex-direction: row; justify-content: stretch; }
}

/* ── FAQ ─────────────────────────────────────────────────── */



/* ── Delivery — Online-only single layout ── */
.delivery-single-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: start;
  margin-top: 48px;
}
.delivery-single-card {
  background: linear-gradient(145deg, var(--ci-700), #000070);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 20px 50px rgba(0,0,140,.25);
  position: relative;
  overflow: hidden;
}
.delivery-single-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,201,177,.15), transparent 70%);
  pointer-events: none;
}
.dsc-icon-wrap {
  width: 60px; height: 60px;
  border-radius: var(--radius-lg);
  background: rgba(0,201,177,.15);
  border: 1.5px solid rgba(0,201,177,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
}
.dsc-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 10px;
}
.dsc-desc {
  font-size: .9rem;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  margin: 0;
}
.dsc-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.dsc-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dsc-stat strong {
  font-size: 1rem;
  font-weight: 900;
  color: var(--teal);
  display: block;
}
.dsc-stat span {
  font-size: .65rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Right features column */
.delivery-features-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.df-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--ci-100);
}
.df-item:last-child { border-bottom: none; }
.df-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--dfc, var(--ci-700)) 10%, white);
  border: 1.5px solid color-mix(in srgb, var(--dfc, var(--ci-700)) 20%, white);
  display: flex; align-items: center; justify-content: center;
  color: var(--dfc, var(--ci-700));
  flex-shrink: 0;
}
.df-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ci-700);
  margin-bottom: 4px;
}
.df-desc {
  font-size: .8rem;
  color: var(--gray-600);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .delivery-single-wrap { grid-template-columns: 1fr; }
  .dsc-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Hands-on Training Section ── */
.handson-section {
  background: linear-gradient(160deg, #F8F9FF 0%, #FFFFFF 50%, #F4F6FF 100%);
  position: relative;
}
.handson-grid {
  display: grid;
  grid-template-columns: 200px 220px 1fr;
  gap: 40px;
  align-items: start;
}

/* Left trust column */
.handson-left { display: flex; flex-direction: column; gap: 20px; }

.industry-faculty-card {
  background: var(--white);
  border: 2px solid var(--ci-100);
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,140,.06);
}
.ifc-icon { margin-bottom: 12px; }
.ifc-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ci-700);
  line-height: 1.25;
  margin: 0 0 14px;
}
.ifc-badge-icon { display: flex; justify-content: center; }

.award-badge-card {
  background: var(--white);
  border: 2px solid #E8D5A0;
  border-radius: var(--radius-xl);
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(212,160,23,.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.laurel-svg { display: block; }
.award-badge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  line-height: 1.2;
}
.ab-no1 {
  display: block;
  font-size: .65rem;
  font-weight: 900;
  color: #B8860B;
  letter-spacing: .08em;
}
.ab-title {
  display: block;
  font-size: .62rem;
  font-weight: 800;
  color: var(--ci-700);
  line-height: 1.3;
  margin: 2px 0;
}
.ab-year {
  display: block;
  font-size: .7rem;
  font-weight: 900;
  color: #B8860B;
}

/* Middle photo column */
.handson-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hsp-top { display: flex; gap: 10px; }
.hsp-photo {
  flex: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 120px;
  background: var(--ci-50);
  border: 1.5px dashed var(--ci-100);
}
.hsp-placeholder {
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--gray-400);
  font-size: .7rem;
}
.hsp-award-card {
  background: var(--ci-700);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
}
.hsp-award-icon { font-size: 1.8rem; }
.hsp-award-title { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.hsp-award-sub { font-size: .72rem; color: rgba(255,255,255,.7); line-height: 1.4; }

/* Right content column */
.handson-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.handson-eyebrow span:first-child {
  font-size: .7rem;
  font-weight: 800;
  color: #C9A84C;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.handson-eyebrow-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #C9A84C, transparent);
  max-width: 80px;
  border-radius: 2px;
}
.handson-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--gray-900);
  margin: 0 0 10px;
  line-height: 1.2;
}
.handson-dots { color: var(--ci-700); }
.handson-underline {
  width: 60px;
  height: 4px;
  background: #C9A84C;
  border-radius: 2px;
  margin-bottom: 16px;
}
.handson-desc {
  font-size: .9rem;
  color: var(--gray-700);
  line-height: 1.7;
  margin-bottom: 14px;
}
.handson-subhead {
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 16px;
}
.handson-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.handson-topic {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ht-check {
  width: 22px;
  height: 22px;
  background: #C9A84C;
  color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
}
.ht-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 4px;
  line-height: 1.3;
}
.ht-desc {
  font-size: .75rem;
  color: var(--gray-600);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .handson-grid { grid-template-columns: 180px 1fr; }
  .handson-photos { display: none; }
}
@media (max-width: 700px) {
  .handson-grid { grid-template-columns: 1fr; }
  .handson-left { flex-direction: row; }
  .handson-topics { grid-template-columns: 1fr; }
}

/* ── Partners & Associates ── */
.partners-section {
  background: #F8FAFC;
  padding: 48px 0;
  border-top: 1px solid var(--ci-100);
  border-bottom: 1px solid var(--ci-100);
}
.partners-heading {
  text-align: center;
  font-size: .95rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 36px;
}
.partners-heading strong {
  color: var(--ci-700);
}
.partners-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  transition: opacity .25s;
}
.partner-item:hover { opacity: .75; }
.partner-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.pw-primary {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: .01em;
  display: block;
  text-align: center;
}
.pw-sub {
  font-size: .65rem;
  color: var(--ci-700);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
}
.partner-divider {
  width: 1px;
  height: 40px;
  background: var(--ci-100);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .partners-strip { gap: 24px; }
  .partner-divider { display: none; }
  .partner-item { padding: 12px 16px; }
}
@media (max-width: 500px) {
  .partners-strip { gap: 16px; }
  .partner-item { padding: 8px 12px; }
}

.faq-section {
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.faq-section::before {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,0,140,.04) 0%, transparent 70%);
  pointer-events: none;
}
.faq-section .container { position: relative; z-index: 1; }
.faq-accordion-group { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--white);
  border: 1px solid rgba(0,0,140,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur-mid);
  box-shadow: 0 1px 4px rgba(0,0,140,.04);
}
.faq-item:hover { border-color: rgba(0,0,140,.2); box-shadow: 0 4px 16px rgba(0,0,140,.08); }
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 600;
  color: var(--gray-800);
  transition: color var(--dur-fast);
  gap: 16px;
}
.faq-trigger:hover { color: var(--ci-700); }
.faq-trigger[aria-expanded="true"] { color: var(--ci-700); }
.faq-arrow {
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--gray-400);
  transition: transform var(--dur-mid) var(--ease-spring), color var(--dur-fast);
}
.faq-trigger[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); color: var(--ci-700); }
.faq-answer-panel { padding: 0 24px 20px; }
.faq-answer-panel p { font-size: .9rem; color: var(--gray-600); line-height: 1.7; }

/* ── Success Dialog ──────────────────────────────────────── */
.success-dialog {
  border: none;
  border-radius: var(--radius-xl);
  padding: 0;
  max-width: 440px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  animation: dialogIn var(--dur-mid) var(--ease-spring);
}
.success-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
@keyframes dialogIn { from{opacity:0;transform:scale(.92) translateY(16px);} to{opacity:1;transform:none;} }
.dialog-inner { padding: 44px 40px; text-align: center; }
.success-check-icon {
  width: 64px; height: 64px;
  background: var(--success);
  color: white;
  font-size: 1.6rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 24px rgba(16,185,129,.4);
  animation: checkBounce .6s var(--ease-spring);
}
@keyframes checkBounce { from{transform:scale(0);} 70%{transform:scale(1.2);} to{transform:scale(1);} }
.dialog-inner h3 { font-size: 1.4rem; color: var(--ci-700); margin-bottom: 10px; }
.dialog-inner p { font-size: .9rem; color: var(--gray-600); line-height: 1.65; margin-bottom: 24px; }
.user-highlight { color: var(--ci-700); font-weight: 700; }
.countdown-card {
  background: var(--ci-50);
  border: 1.5px solid var(--ci-100);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 24px;
}
.cd-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-600); display: block; margin-bottom: 10px; }
.countdown-digits { display: flex; gap: 14px; justify-content: center; }
.digit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--ci-700);
  color: white;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: .78rem;
}
.digit-box span { font-size: 1.6rem; font-weight: 800; line-height: 1; }

/* ── Footer ─────────────────────────────────────────────── */
.official-footer {
  background: var(--ci-900);
  color: rgba(255,255,255,.7);
  position: relative;
  overflow: hidden;
}
.official-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,201,177,.4), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  gap: 48px;
  padding: 64px 0 48px;
}
.footer-ci-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.footer-logo-img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.f-info-col h4, .f-disclaimer-col h4, .f-contact-col h4 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal);
  margin-bottom: 14px;
  font-weight: 700;
}
.f-info-col p, .f-disclaimer-col p, .f-contact-col p {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
}
.f-contact-col a { color: var(--teal); text-decoration: none; transition: color var(--dur-fast); }
.f-contact-col a:hover { color: var(--white); }

.org-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(0,201,177,.3);
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .06em;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
}
.fb-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.fb-inner p { font-size: .82rem; color: rgba(255,255,255,.4); }
.fb-links { display: flex; gap: 20px; }
.fb-links a { font-size: .8rem; color: rgba(255,255,255,.4); text-decoration: none; transition: color var(--dur-fast); }
.fb-links a:hover { color: var(--white); }


/* Instructor section overrides for dark bg */
.instructors-section .instructor-header .section-sub-desc { color: #475569; max-width: 560px; }
.instructors-section .slider-nav-btn { background: rgba(255,255,255,.08); color: var(--white); border-color: rgba(255,255,255,.25); }
.instructors-section .slider-nav-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.instructors-section .col-label { color: rgba(255,255,255,.35); }
/* ─── TRAINING DELIVERY SECTION ──────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR SLIDER
   ══════════════════════════════════════════════════════════════ */
.instructor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.instructor-header .section-sub-desc { max-width: 560px; }

.slider-nav-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 6px;
}
.slider-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  background: var(--white);
  color: var(--ci-700);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-mid) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.slider-nav-btn:hover {
  background: var(--ci-700);
  color: var(--white);
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}
.slider-nav-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

.instructor-slider-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.instructor-slider-track {
  display: flex;
  transition: transform .5s var(--ease-in-out);
  will-change: transform;
}
.instructor-slide {
  flex: 0 0 100%;
  width: 100%;
}

/* Profile card inside slider */
.instructor-profile-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: flex-start;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 40px;
  transition: box-shadow var(--dur-mid);
  margin: 2px;
  min-height: 440px;
}
.instructor-profile-card:hover { box-shadow: var(--shadow-lg); }

/* AI-generated profile photo */
.profile-photo {
  width: 200px;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 3px solid var(--ci-100);
  transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
  display: block;
}
.instructor-profile-card:hover .profile-photo {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* Fallback SVG avatar if photo missing */
.profile-avatar-svg {
  width: 200px; height: 200px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.profile-bio-wrap h3 {
  font-size: 1.6rem;
  color: var(--ci-700);
  margin-bottom: 6px;
}
.profile-subtitle {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-700);
  display: block;
  margin-bottom: 16px;
  line-height: 1.5;
}
.profile-text {
  font-size: .92rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 24px;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.prof-stat-box {
  padding: 14px 12px;
  background: var(--ci-50);
  border: 1.5px solid var(--ci-100);
  border-radius: var(--radius-md);
  font-size: .8rem;
  color: var(--gray-700);
  text-align: center;
  line-height: 1.4;
}
.prof-stat-box strong {
  display: block;
  font-size: 1.15rem;
  color: var(--ci-700);
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: 4px;
}

/* Dot indicators */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--gray-300);
  cursor: pointer;
  transition: all var(--dur-mid) var(--ease-spring);
  padding: 0;
}
.dot.active {
  background: var(--ci-700);
  width: 28px;
  border-radius: 5px;
}
.dot:hover { background: var(--ci-400); }

/* ══════════════════════════════════════════════════════════════
   SIMULATOR — Centered Idle CTA
   ══════════════════════════════════════════════════════════════ */
.viewport-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  z-index: 2;
}
.sim-idle-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  animation: idlePulse 3s ease-in-out infinite;
}
@keyframes idlePulse {
  0%,100% { opacity:.7; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.02); }
}
.sim-idle-icon {
  width: 72px; height: 72px;
  background: rgba(0,201,177,.1);
  border: 2px solid rgba(0,201,177,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  box-shadow: 0 0 24px rgba(0,201,177,.15);
  animation: iconGlow 2.5s ease-in-out infinite;
}
@keyframes iconGlow {
  0%,100% { box-shadow:0 0 24px rgba(0,201,177,.15); }
  50%      { box-shadow:0 0 40px rgba(0,201,177,.35); }
}
.sim-idle-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin: 0;
}
.sim-idle-sub {
  font-size: .85rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
  max-width: 300px;
  margin: 0;
}
.sim-idle-sub strong {
  color: var(--teal);
  font-weight: 600;
}

/* Responsive instructor slider */
@media (max-width: 768px) {
  .instructor-header { flex-direction: column; gap: 16px; }
  .instructor-profile-card { grid-template-columns: 1fr; text-align: center; }
  .profile-photo { width: 160px; height: 190px; margin: 0 auto; }
  .profile-stats { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   HERO REDESIGN — Dark Theme Additions
   ══════════════════════════════════════════════════════════════ */

/* Navbar — back to site link */
.btn-back-site {
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-500);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: color var(--dur-fast);
}
.btn-back-site:hover { color: var(--gray-800); }

/* Nav outline button for dark header */
.btn-outline-hero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ci-700);
  border: 1.5px solid var(--ci-700);
  background: transparent;
  padding: 7px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  white-space: nowrap;
}
.btn-outline-hero:hover {
  border-color: var(--ci-900);
  color: var(--ci-900);
  background: rgba(0,0,140,.04);
}

/* Nav enroll button */
.btn-nav-enroll {
  padding: 8px 20px !important;
  font-size: .85rem !important;
  border-radius: var(--radius-md) !important;
}

/* Top nav links — white on dark */
/* top-link: see original definition above */

/* Hero tagline */
.hero-tagline {
  font-size: 1.22rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.tag-teal { color: var(--teal); }

/* Bullet icons — teal circle with SVG */
.bullet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: rgba(10,175,182,.2);
  border: 1.5px solid rgba(10,175,182,.4);
  border-radius: 50%;
  color: var(--teal);
  margin-top: 1px;
}

/* Ghost outline CTA button (dark) */
.btn-outline-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.btn-outline-ghost:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.4);
}

/* Form input icon wrapper */
.input-icon-wrap {
  position: relative;
}
.input-icon-wrap .input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  pointer-events: none;
}
.input-icon-wrap input,
.input-icon-wrap select {
  padding-left: 38px !important;
}

/* Teal span in form heading */
.counsel-teal { color: var(--teal); }

/* Shrunk header stays dark */
.official-header.shrunk {
  background: rgba(255,255,255,.98) !important;
}

/* Ensure logo visible on dark bg */
.official-header.shrunk .clini-logo-img { height: 36px; filter: brightness(1.15); }

/* ── hero-section — ensure bg shows on @media override ── */
@media (max-width: 768px) {
  .btn-back-site { display: none; }
  .btn-outline-hero { display: none; }
  .hero-tagline { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   DELIVERY SECTION — Online Live Cohort Training Redesign
   ══════════════════════════════════════════════════════════════ */
.delivery-section {
  background: linear-gradient(160deg, #EEF2FF 0%, #F0F9FF 40%, #E0F2FE 100%);
  position: relative;
  overflow: hidden;
}
.delivery-section::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 340px; height: 340px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230'%3E%3Cpath d='M100 0l100 57.7v115.5L100 231 0 173.2V57.7z' fill='none' stroke='rgba(99,102,241,.12)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}
.delivery-section::after {
  content: '';
  position: absolute;
  top: 40px; right: -60px;
  width: 220px; height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230'%3E%3Cpath d='M100 0l100 57.7v115.5L100 231 0 173.2V57.7z' fill='none' stroke='rgba(99,102,241,.1)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* Live badge */
.dlv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.25);
  color: #7C3AED;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* Section title */
.dlv-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #080F2D;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 16px;
}
.dlv-gradient {
  background: linear-gradient(90deg, #2563EB 0%, #0AAFB6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}
.dlv-subtitle {
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 12px;
}
.dlv-underline {
  width: 48px; height: 3px;
  background: #7C3AED;
  border-radius: 2px;
  margin: 0 auto 40px;
}

/* 4 feature icons row */
.dlv-features-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 48px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  overflow: hidden;
}
.dlv-feat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 16px;
  font-size: .85rem;
  font-weight: 600;
  color: #1E293B;
  text-align: center;
  line-height: 1.4;
  border-right: 1px solid #E2E8F0;
}
.dlv-feat-item:last-child { border-right: none; }
.dlv-feat-icon {
  width: 54px; height: 54px;
  background: var(--fib);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Main 2-col grid */
.dlv-main-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}

/* Left feature list card */
.dlv-list-card {
  background: white;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dlv-list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.dlv-li-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--licb);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dlv-li-title {
  font-size: .95rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
}
.dlv-li-desc {
  font-size: .82rem;
  color: #64748B;
  line-height: 1.5;
}

/* Right laptop image */
.dlv-laptop-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlv-laptop-img {
  width: 100%;
  max-width: 620px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  display: block;
}
.dlv-badge {
  position: absolute;
  background: white;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  font-size: .8rem;
  white-space: nowrap;
}
.dlv-badge strong { display: block; font-size: .88rem; color: #0F172A; font-weight: 700; }
.dlv-badge span   { display: block; font-size: .74rem; color: #64748B; }
.dlv-badge-top    { top: 12px; right: -10px; }
.dlv-badge-bottom { bottom: 20px; right: -10px; }

/* Bottom stats bar */
.dlv-stats-bar {
  background: white;
  border-radius: 20px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.dlv-stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  border-right: 1px solid #E2E8F0;
}
.dlv-stat-item:first-child { padding-left: 0; }
.dlv-stat-item:last-child  { border-right: none; }
.dlv-stat-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dlv-stat-item strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}
.dlv-stat-item span {
  display: block;
  font-size: .8rem;
  color: #64748B;
  margin-bottom: 8px;
}
.dlv-stat-line {
  height: 3px;
  width: 36px;
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .dlv-main-grid { grid-template-columns: 1fr; }
  .dlv-laptop-wrap { order: -1; }
  .dlv-badge-top, .dlv-badge-bottom { display: none; }
}
@media (max-width: 768px) {
  .dlv-features-row { flex-wrap: wrap; }
  .dlv-feat-item { flex: 1 1 calc(50% - 1px); border-bottom: 1px solid #E2E8F0; }
  .dlv-feat-item:nth-child(odd) { border-right: 1px solid #E2E8F0; }
  .dlv-feat-item:last-child, .dlv-feat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  .dlv-stats-bar { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .dlv-stat-item { border-right: none; padding: 0; }
}

/* ══════════════════════════════════════════════════════════════
   CERTIFICATE SECTION FIX
   ══════════════════════════════════════════════════════════════ */
.certificate-section {
  background: linear-gradient(160deg, #EEF2FF 0%, #F0F9FF 40%, #E0F2FE 100%);
  position: relative;
  overflow: hidden;
}
.cert-text-col { display: flex; flex-direction: column; gap: 16px; }
.cert-text-col .section-title-navy { margin-bottom: 8px; }
.cert-image-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.cert-real-image {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,140,.08);
  display: block;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform .5s ease;
}
.cert-real-image:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1.02);
}
.cert-image-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,140,.82);
  color: white;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

/* Fallback when certificate.png is missing — show a styled mock */
.cert-real-image[src="certificate.png"] {
  /* Still render the box even if image 404s */
  min-height: 320px;
  background: linear-gradient(145deg, #FFFFF8, #F0F4FF);
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS SECTION — Full CSS
   ══════════════════════════════════════════════════════════════ */
.testimonials-section {
  background: linear-gradient(160deg, #0B1F3A 0%, #0D2550 50%, #0B1F3A 100%);
  position: relative;
  overflow: hidden;
}
.testimonials-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 80% 20%, rgba(10,175,182,.08) 0%, transparent 65%),
    radial-gradient(ellipse 400px 300px at 10% 80%, rgba(124,58,237,.07) 0%, transparent 65%);
  pointer-events: none;
}
.testimonials-section .container { position: relative; z-index: 1; }

/* Slider wrapper */
.testi-slider-wrap { position: relative; margin-top: 40px; margin-bottom: 32px; }
.testi-slider-viewport { overflow: hidden; border-radius: 20px; }
.testi-slider-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}

/* Each slide holds 3 cards */
.testi-slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  min-width: 100%;
  padding: 4px;
}

/* Individual card */
.testi-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(12px);
  transition: background .3s, border-color .3s;
}
.testi-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(10,175,182,.3);
}

/* Card top row */
.testi-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.testi-name {
  font-size: .9rem;
  font-weight: 700;
  color: white;
  margin: 0 0 2px;
  line-height: 1.3;
}
.testi-role {
  font-size: .74rem;
  color: rgba(255,255,255,.45);
  margin: 0 0 4px;
}
.testi-stars {
  font-size: .9rem;
  color: #F59E0B;
  letter-spacing: 1px;
}
.testi-g-icon {
  margin-left: auto;
  flex-shrink: 0;
  opacity: .85;
}
.testi-quote {
  font-size: .85rem;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.testi-new-badge {
  display: inline-block;
  background: var(--teal);
  color: white;
  font-size: .58rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: .04em;
  margin-left: 4px;
}

/* Nav controls */
.testi-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.testi-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}
.testi-nav-btn:hover {
  background: rgba(10,175,182,.25);
  border-color: var(--teal);
  color: white;
}
.testi-dots { display: flex; gap: 8px; align-items: center; }
.tdot {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.25);
  transition: background .3s, width .3s;
  cursor: pointer;
}
.tdot.active {
  background: var(--teal);
  width: 26px;
}

@media (max-width: 900px) {
  .testi-slide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .testi-slide { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   CERTIFICATE — missing column rules
   ══════════════════════════════════════════════════════════════ */
.cert-graphic-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On mobile stack vertically */
@media (max-width: 768px) {
  .grid-two-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cert-real-image {
    transform: none !important;
  }
}

/* Ensure reveal-left/right show even before IntersectionObserver fires
   (fallback for browsers/cases where observer misses) */
@media (prefers-reduced-motion: reduce) {
  .reveal-left, .reveal-right, .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   TOOLS YOU'LL MASTER SECTION
   ══════════════════════════════════════════════════════════════ */
.tools-section {
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.tools-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(79,70,229,.07) 0%, transparent 70%);
  pointer-events: none;
}
.tools-section::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(13,181,163,.06) 0%, transparent 70%);
  pointer-events: none;
}
.tools-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ci-700);
  background: rgba(0,0,140,.07);
  border: 1.5px solid rgba(0,0,140,.12);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
}
.tools-highlight { background: linear-gradient(90deg, #2563EB 0%, #0AAFB6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 48px 0 40px;
}
.tool-card {
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid rgba(0,0,0,.07);
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,140,.08);
  border-color: rgba(37,99,235,.22);
}
.tool-logo {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 2px;
}
.tool-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Special logo bg colors */
.tool-logo-chatgpt { background: #f0faf8; }
.tool-logo-excel { background: #f0faf2; }
.tool-logo-claude { background: #fdf6ed; border-radius: 50%; }
.tool-logo-gemini { background: #e8f0fe; border-radius: 50%; }
.tool-logo-notion { background: #fff; border: 1.5px solid #e5e5e5; }
.tool-logo-anthropic { background: transparent; }
.tool-logo-promptlab { background: transparent; }
.tool-logo-vapi { background: #e6faf8; border-radius: 12px; padding: 8px 10px; width: auto; height: 56px; }
.tool-logo-bolt { background: #e9faf0; border-radius: 12px; padding: 8px 10px; width: auto; height: 56px; }
.tool-logo-make { background: transparent; }
.tool-name {
  font-size: .93rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.tool-badge {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tool-desc {
  font-size: .80rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.tool-line {
  width: 32px;
  height: 3px;
  border-radius: 99px;
  margin-top: 4px;
}

/* Bottom stats bar */
.tools-stats-bar {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid rgba(0,0,0,.07);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.tools-stats-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  font-size: .88rem;
  color: #444;
  line-height: 1.5;
}
.tools-stats-icon {
  width: 52px; height: 52px;
  background: #EEF2FF;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tools-stats-divider {
  width: 1px;
  height: 52px;
  background: rgba(0,0,0,.08);
  flex-shrink: 0;
}
.tools-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.tools-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-num {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}
.stat-lbl {
  font-size: .78rem;
  color: #666;
  margin: 0;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .tools-stats-bar { flex-wrap: wrap; gap: 20px; }
  .tools-stats-divider { display: none; }
}
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-stats-bar { padding: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR SHOWCASE — single instructor
   ══════════════════════════════════════════════════════════════ */
.instructors-section {
  background: #FFFFFF;
  position: relative;
}
.teal-highlight { background: linear-gradient(90deg, #2563EB 0%, #0AAFB6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Main card */
.instructor-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
  background: #fff;
  border-radius: 28px;
  border: 1.5px solid rgba(0,0,0,.07);
  box-shadow: 0 8px 40px rgba(0,0,140,.07);
  padding: 48px;
  margin-top: 48px;
  position: relative;
  overflow: hidden;
}
.instructor-showcase::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 340px; height: 340px;
  background: radial-gradient(circle at top right, rgba(10,175,182,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Photo column */
.ins-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.ins-photo-frame {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.ins-photo {
  width: 220px;
  height: 220px;
  border-radius: 24px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 3px solid rgba(0,0,140,.1);
  box-shadow: 0 12px 40px rgba(0,0,140,.14);
}
.ins-photo-fallback {
  width: 220px;
  height: 220px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--teal), var(--ci-700));
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 800;
  color: white;
  letter-spacing: .05em;
}
.ins-photo-badge {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ci-700);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,140,.25);
}

/* Credential pills */
.ins-cred-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.ins-pill {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 999px;
}
.pill-navy  { background: rgba(0,0,140,.08);  color: var(--ci-700); }
.pill-teal  { background: rgba(10,175,182,.1); color: #0a8a90; }
.pill-violet{ background: rgba(124,58,237,.08);color: #6d28d9; }

/* Bio column */
.ins-bio-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ins-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ins-name {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--ci-700);
  margin: 0;
}
.ins-social-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #e8eef8;
  color: var(--ci-700);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.ins-social-btn:hover { background: var(--ci-700); color: white; transform: translateY(-2px); }

.ins-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--teal);
  margin: -8px 0 0;
  line-height: 1.5;
}
.ins-bio {
  font-size: .93rem;
  color: #444;
  line-height: 1.75;
  margin: 0;
}

/* Expertise tags */
.ins-expertise-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ins-tag {
  font-size: .78rem;
  font-weight: 500;
  color: #333;
  background: #F1F5F9;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 8px;
  padding: 5px 12px;
  transition: background .2s;
}
.ins-tag:hover { background: #E2E8F0; }

/* Stats row */
.ins-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(135deg, #F0F4FF, #F5F0FF);
  border-radius: 16px;
  padding: 20px 28px;
  margin-top: 4px;
}
.ins-stat {
  flex: 1;
  text-align: center;
}
.ins-stat-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ci-700);
  margin: 0;
  line-height: 1.1;
}
.ins-stat-lbl {
  font-size: .72rem;
  color: #666;
  margin: 4px 0 0;
}
.ins-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(0,0,0,.1);
}

/* Responsive */
@media (max-width: 900px) {
  .instructor-showcase {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 32px;
  }
  .ins-photo-col { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .ins-photo-frame { width: 160px; height: 160px; }
  .ins-photo, .ins-photo-fallback { width: 160px; height: 160px; }
}
@media (max-width: 640px) {
  .ins-stats-row { flex-wrap: wrap; gap: 16px; padding: 16px; }
  .ins-stat-divider { display: none; }
  .ins-photo-col { flex-direction: column; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS — title highlight on dark background
   ══════════════════════════════════════════════════════════════ */
.testi-title-highlight {
  background: linear-gradient(90deg, #38BDF8 0%, #0AAFB6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS — Google rating strip
   ══════════════════════════════════════════════════════════════ */
.testi-rating-strip {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 20px 32px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.trs-score {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.trs-stars {
  font-size: 1.2rem;
  color: #FBBF24;
  margin-top: 4px;
  letter-spacing: .05em;
}
.trs-label {
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  margin: 0;
  line-height: 1.5;
}
.trs-label strong {
  color: #fff;
  font-weight: 700;
}
.trs-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}
.trs-platforms {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: rgba(255,255,255,.75);
}
.trs-platforms span:last-child {
  color: #fff !important;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   PROGRAM ELIGIBILITY
   ══════════════════════════════════════════════════════════════ */
.eligibility-section {
  background: linear-gradient(170deg, #0D1D45 0%, #1A3278 35%, #1D4ED8 70%, #2563EB 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.eligibility-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.eligibility-section::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.eligibility-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 1;
}

/* Left col */
.elig-left {
  flex-shrink: 0;
  max-width: 300px;
}
.elig-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.elig-title {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.elig-highlight {
  background: linear-gradient(90deg, #93C5FD 0%, #5EEAD4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.elig-desc {
  font-size: .9rem;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
  margin: 0;
}

/* Right col — tag cloud */
.elig-right { flex: 1; }
.elig-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.elig-tag {
  display: inline-block;
  background: rgba(255,255,255,.92);
  color: #1E3A8A;
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.6);
  transition: background .2s, transform .2s;
  cursor: default;
}
.elig-tag:hover {
  background: #fff;
  transform: translateY(-2px);
}
.elig-tag-wide {
  background: transparent;
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.35);
  font-style: italic;
  font-weight: 500;
}
.elig-tag-wide:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 860px) {
  .eligibility-inner {
    flex-direction: column;
    gap: 32px;
  }
  .elig-left { max-width: 100%; }
}

/* ── Pricing section — dark bg overrides ──────────── */
.pricing-section .section-title-navy {
  color: var(--white);
}
.pricing-section .section-sub-desc {
  color: rgba(255,255,255,.72);
}
.pricing-section .pricing-pillars .col-label {
  color: rgba(255,255,255,.45);
}
.pillar-body h4 { color: #0B1F3A; }
.pillar-body p  { color: #4A5568; }

/* FAQ on white — ensure correct text */
.faq-section .section-title-navy { color: #080F2D; }
.faq-section .section-sub-desc   { color: #4A5568; }
.faq-q { color: #080F2D; font-weight: 700; }
.faq-a { color: #374151; }

/* Learn section on white */
.learn-section .section-title-navy { color: #080F2D; }
.learn-section .section-sub-desc   { color: #4A5568; }

/* Partners on off-white */
.partners-section .section-title-navy { color: #080F2D; }

/* ── Pricing section — LIGHT bg overrides (replaces dark ones) ── */
.pricing-section .section-title-navy { color: #080F2D; }
.pricing-section .section-sub-desc { color: #4A5568; }
.pricing-section .pricing-pillars .col-label { color: #080F2D; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.pricing-section .col-label { color: #080F2D !important; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* Col label underline accent for "WHAT MAKES THIS DIFFERENT" */
.pricing-pillars .col-label {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.pricing-pillars .col-label::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--ci-700), var(--teal));
  border-radius: 2px;
}

/* Pillar card on light bg */
.pricing-section .pillar-card {
  background: #FFFFFF;
  border-color: rgba(0,0,140,.08);
}
.pricing-section .pillar-card:hover {
  background: #F8F9FF;
  border-color: rgba(0,0,140,.2);
}

/* Pricing card shadow on light bg */
.pricing-section .pricing-card {
  box-shadow: 0 20px 60px rgba(0,0,140,.12), 0 4px 16px rgba(0,0,140,.06);
}

/* pc-seats-left and pc-trust on white card */
.pc-seats-left { color: var(--gray-500); border-color: rgba(0,0,140,.12); }
.pc-trust { color: var(--gray-400); }
.pc-divider { background: rgba(0,0,140,.08); }

/* ════════════════════════════════════════════════════════
   FONT SCALE SYSTEM — Plus Jakarta Sans + Inter
   ════════════════════════════════════════════════════════ */

/* ── H1 Hero Headline ───────────────────────────────── */
.hero-headline,
.hero-headline h1 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(2.625rem, 5.5vw, 4.5rem); /* 42px → 72px */
  font-weight: 800;
  line-height: 1.083;           /* 78/72 */
  letter-spacing: -0.03em;
}

/* Hero gradient highlight words */
.blue-highlight,
.teal-highlight,
.tools-highlight {
  font-family: inherit;
  font-weight: 800;
  background: linear-gradient(90deg, #2F80FF 0%, #7B61FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── H2 Section Titles ──────────────────────────────── */
.section-title-navy {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);  /* 32px → 48px */
  font-weight: 700;
  line-height: 1.167;           /* 56/48 */
  letter-spacing: -0.025em;
}

/* ── H3 Card / Sub-section Titles ──────────────────── */
h3,
.h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* 20px → 28px */
  font-weight: 700;
  line-height: 1.286;           /* 36/28 */
  letter-spacing: -0.015em;
}

/* ── H4 Feature Card Titles ─────────────────────────── */
h4,
.h4,
.pillar-body h4,
.dlv-li-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.375rem); /* 16px → 22px */
  font-weight: 600;
  line-height: 1.364;           /* 30/22 */
  letter-spacing: -0.01em;
}

/* ── Section Labels / Eyebrow Pills ─────────────────── */
.delivery-eyebrow,
.tools-eyebrow,
.pricing-eyebrow,
.section-eyebrow,
.cert-eyebrow,
.pricing-eyebrow,
[class$="-eyebrow"] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;         /* 13px */
  font-weight: 700;
  letter-spacing: 0.125em;     /* 2px */
  text-transform: uppercase;
}

/* ── Body Large — Hero description ──────────────────── */
.hero-sub,
.hero-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, 2vw, 1.375rem); /* 16px → 22px */
  font-weight: 400;
  line-height: 1.636;           /* 36/22 */
}

/* ── Body Regular ───────────────────────────────────── */
.section-sub-desc,
.sub-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem); /* 15px → 18px */
  font-weight: 400;
  line-height: 1.667;           /* 30/18 */
}

/* ── Small Description — Cards, footers ─────────────── */
.pillar-body p,
.tool-card p,
.card-desc,
.faq-answer-panel p,
.pc-includes li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;              /* 16px */
  font-weight: 400;
  line-height: 1.625;           /* 26/16 */
}

/* ── Primary CTA Button ─────────────────────────────── */
.btn,
.pc-cta-btn,
.hero-cta-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.125rem;          /* 18px */
  font-weight: 700;
  line-height: 1.333;
  letter-spacing: -0.005em;
}

/* ── Secondary CTA Button ───────────────────────────── */
.btn-secondary,
.hero-cta-secondary {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;         /* 17px */
  font-weight: 600;
  line-height: 1.333;
}

/* ── Navigation ─────────────────────────────────────── */
.nav-link,
.navbar a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;              /* 16px */
  font-weight: 600;
}

/* ── Form Labels ────────────────────────────────────── */
.form-label,
label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;         /* 13px */
  font-weight: 700;
  letter-spacing: 0.0625em;    /* 1px */
  text-transform: uppercase;
}

/* ── Form Input Text ────────────────────────────────── */
input, select, textarea {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;              /* 16px */
  font-weight: 400;
}

/* ── Pricing Price Number ───────────────────────────── */
.pc-current {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem); /* 40px → 72px */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pc-original {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.5rem;            /* 24px */
  font-weight: 500;
  text-decoration: line-through;
}
.pc-currency {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Metric / Stat Numbers ───────────────────────────── */
.bar-num,
.stat-num,
.dlv-stat strong,
.metric-num {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── Responsive tweaks ──────────────────────────────── */
@media (max-width: 768px) {
  .section-title-navy {
    font-size: 2rem;
    letter-spacing: -0.02em;
  }
  h3, .h3 { font-size: 1.375rem; }
  h4, .h4, .pillar-body h4 { font-size: 1rem; }
  .hero-sub, .hero-desc { font-size: 1rem; line-height: 1.6; }
  .section-sub-desc { font-size: 0.9375rem; }
  .pc-current { font-size: 3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPLETE MOBILE RESPONSIVE SYSTEM
   Breakpoints: 1024 | 768 | 640 | 480 | 375
   ═══════════════════════════════════════════════════════════════ */

/* ── Global spacing tightening on mobile ──────────────────── */
@media (max-width: 768px) {
  .section-padding { padding: 64px 0; }
  .container { padding: 0 18px; }

  .section-header-centered { margin-bottom: 36px; }
  .section-sub-desc { font-size: 1rem; }
}
@media (max-width: 480px) {
  .section-padding { padding: 48px 0; }
  .container { padding: 0 16px; }
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .official-header { padding: 0 16px; height: 64px; }
  .clini-logo-text { font-size: .9rem; }
  .top-nav { display: none; }
  .action-menu .btn-back-site,
  .action-menu .btn-outline-hero { display: none; }
  .btn-nav-enroll { font-size: .78rem; padding: 8px 14px; }
  .menu-toggle { display: flex; }
  .top-nav { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 0 60px;
  }
  .hero-form-panel { order: 2; max-width: 520px; margin: 0 auto; width: 100%; }
  .hero-content { order: 1; text-align: center; }
  .hero-cta-buttons { justify-content: center; }
  .hero-tagline { justify-content: center; text-align: center; }
}
@media (max-width: 768px) {
  .hero-section { min-height: auto; padding-top: 64px; }
  .hero-grid { padding: 40px 0 48px; gap: 32px; }
  .hero-content h1,
  .hero-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.12; }
  .hero-subtitle { font-size: 1rem !important; line-height: 1.6; }
  .hero-form-panel { max-width: 100%; }
  .hero-cta-buttons { flex-direction: column; gap: 10px; }
  .hero-cta-buttons .btn { width: 100%; justify-content: center; }
  .hero-hex-float { display: none; }
  .hero-tagline { flex-wrap: wrap; gap: 6px; font-size: .8rem; }
}
@media (max-width: 480px) {
  .hero-grid { padding: 32px 0 40px; }
  .form-card-inner { padding: 24px 18px; }
}

/* ══════════════════════════════════════════════════════════════
   METRICS / STATS BAR
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .bar-item { padding: 20px 16px; }
  .bar-item:nth-child(1),
  .bar-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .bar-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
  .bar-item:nth-child(even) { border-right: none; }
  .bar-num { font-size: 1.4rem; }
  .bar-title { font-size: .88rem; }
}
@media (max-width: 480px) {
  .bar-grid { grid-template-columns: repeat(2, 1fr); }
  .bar-num { font-size: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   LEARN SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .learn-two-col { grid-template-columns: 1fr; gap: 32px; }
  .grid-two-cols { grid-template-columns: 1fr; gap: 32px; }
  .outcome-badges { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .skill-cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .outcome-card { padding: 16px; }
}
@media (max-width: 480px) {
  .skill-cards-grid { grid-template-columns: 1fr; }
  .outcome-badges { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════════
   DELIVERY SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dlv-main-grid { grid-template-columns: 1fr; gap: 32px; }
  .dlv-laptop-wrap { order: -1; max-width: 480px; margin: 0 auto; }
  .dlv-features-row { flex-direction: column; gap: 0; }
  .dlv-feat-item { border-right: none !important; border-bottom: 1px solid #E2E8F0; padding: 16px 20px; }
  .dlv-feat-item:last-child { border-bottom: none; }
  .dlv-stats-bar { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .dlv-stat-item { border-right: none; }
  .delivery-eyebrow { font-size: .7rem; }
  .dlv-title { font-size: clamp(1.6rem,5vw,2.2rem); }
}
@media (max-width: 480px) {
  .dlv-stats-bar { grid-template-columns: repeat(2,1fr); }
  .dlv-stat-item:nth-child(odd) { border-right: 1px solid rgba(0,0,140,.08); }
}

/* ══════════════════════════════════════════════════════════════
   CURRICULUM SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .curriculum-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .curriculum-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .curriculum-sidebar::-webkit-scrollbar { display: none; }
  .cur-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: .78rem;
    padding: 10px 14px;
  }
  .cur-content-panel { padding: 24px 20px; }
  .curr-highlights { grid-template-columns: 1fr; gap: 12px; }
  .tab-module-title { font-size: .82rem; }
}
@media (max-width: 640px) {
  .cur-tab-btn { font-size: .72rem; padding: 9px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   TOOLS SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tool-card { padding: 16px 12px; }
  .tool-logo { width: 48px; height: 48px; }
}
@media (max-width: 400px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   SIMULATOR SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .simulator-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sim-controls-panel { order: 2; }

  .sim-options { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sim-option-btn { flex: 1 1 calc(50% - 4px); }
}
@media (max-width: 640px) {
  .sim-option-btn { flex: 1 1 100%; }

}

/* ══════════════════════════════════════════════════════════════
   CERTIFICATE SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .certificate-section .grid-two-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cert-graphic-col { order: -1; max-width: 480px; margin: 0 auto; }
  .cert-real-image {
    transform: none !important;
  }
  .cert-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .cert-features { grid-template-columns: 1fr; gap: 10px; }
  .cert-text-col { text-align: center; align-items: center; }
  .cert-eyebrow { align-self: center; }
}

/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .instructor-showcase {
    grid-template-columns: 1fr;
    padding: 28px 20px;
    gap: 24px;
    margin-top: 32px;
    text-align: center;
  }
  .ins-photo-col {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .ins-photo-frame,
  .ins-photo,
  .ins-photo-fallback { width: 160px; height: 160px; border-radius: 20px; }
  .ins-cred-pills { align-items: center; }
  .ins-name { font-size: 1.5rem; }
  .ins-stats-row { justify-content: center; flex-wrap: wrap; gap: 14px; padding: 16px; }
  .ins-stat-divider { display: none; }
  .ins-bio { font-size: .9rem; }
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .testi-slide { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .testi-card:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .testi-slide { grid-template-columns: 1fr; gap: 14px; }
  .testi-card:nth-child(3),
  .testi-card:nth-child(2) { display: none; }
  .testi-controls { gap: 12px; }
  .trs-wrap { flex-direction: column; gap: 12px; text-align: center; }
  .trs-stars-col,
  .trs-text-col { align-items: center; }
}
@media (max-width: 480px) {
  .testimonials-section .section-title-navy { font-size: 1.75rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   ELIGIBILITY SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .eligibility-inner { flex-direction: column; gap: 28px; }
  .elig-left { max-width: 100%; text-align: center; }
  .elig-eyebrow { margin: 0 auto 12px; }
  .elig-tags { justify-content: center; }
  .elig-tag { font-size: .78rem; }
}

/* ══════════════════════════════════════════════════════════════
   PRICING SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pricing-main-grid { grid-template-columns: 1fr; gap: 28px; }
  .pc-current { font-size: clamp(2.4rem, 8vw, 3.2rem); }
  .trust-strip { flex-direction: row; gap: 8px; }
  .trust-item { font-size: .72rem; padding: 10px 8px; }
}
@media (max-width: 640px) {
  .pc-inner { padding: 24px 20px; }
  .pc-current { font-size: 2.6rem; }
  .trust-strip { gap: 6px; }
  .trust-item { flex: 1 1 calc(33% - 4px); min-width: 90px; }
  .pillar-card { padding: 16px 14px; gap: 12px; }
  .pricing-label-row { margin-bottom: 28px; }
}
@media (max-width: 480px) {
  .trust-strip { flex-wrap: wrap; }
  .trust-item { flex: 1 1 calc(50% - 4px); }
}

/* ══════════════════════════════════════════════════════════════
   PARTNERS SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .partners-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    justify-items: center;
  }
  .partner-divider { display: none; }
  .partner-item { border-right: none; padding: 0; }
}
@media (max-width: 640px) {
  .partners-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .partners-heading { font-size: 1rem; margin-bottom: 28px; }
}
@media (max-width: 400px) {
  .partners-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   FAQ SECTION
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .faq-trigger { font-size: .9rem; padding: 16px 18px; }
  .faq-answer-panel { padding: 0 18px 16px; }
  .faq-answer-panel p { font-size: .875rem; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER / BOTTOM NAV
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
}

/* ══════════════════════════════════════════════════════════════
   UTILITY — hide horizontal overflow on mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .hero-hex-float,
  .pricing-blob,


  /* Section header text align */
  .section-header-centered {
    text-align: center;
    padding: 0 8px;
  }
  .section-title-navy { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }

  /* Reduce card paddings */
  .outcome-card { padding: 16px; }
  .skill-card   { padding: 16px; }
  .tool-card    { padding: 16px 12px; }
  .faq-item     { border-radius: 12px; }

  /* CTA buttons full-width */
  .pc-cta-btn { font-size: 1rem; padding: 15px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   SMALL MOBILE 375px polish
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  .container { padding: 0 14px; }
  .section-title-navy { font-size: 1.5rem !important; }
  .section-sub-desc   { font-size: .9375rem; }
  .bar-num { font-size: 1.15rem; }
  .bar-title { font-size: .78rem; }
  .btn-nav-enroll { font-size: .72rem; padding: 7px 11px; }
  .pricing-eyebrow { font-size: .66rem; letter-spacing: .1em; }
  .pc-current { font-size: 2.2rem; }
  .instructor-showcase { padding: 20px 14px; }
  .ins-photo-frame,
  .ins-photo { width: 130px; height: 130px; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE FORM & HERO FORM CARD FIXES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .form-card-inner { padding: 24px 18px; }
  .form-card-inner h3 { font-size: 1.1rem; }
  .form-instructions { font-size: .8rem; }
  .official-form { gap: 12px; }
  .form-control-wrapper input, .form-control-wrapper select { font-size: 16px !important; } /* prevent iOS zoom */
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV — bar color on white navbar
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bar { background: var(--ci-700); }
  .mobile-nav {
    top: 64px;
    background: #fff;
    z-index: 999;
    width: 100%;
    left: 0; right: 0;
    border-bottom: 1px solid rgba(0,0,140,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  .mobile-link { font-size: .95rem; font-weight: 600; color: #1E293B; padding: 13px 16px; }
  .mobile-auth-row { padding: 14px 16px 18px; border-top: 1px solid rgba(0,0,140,.08); }
  .mobile-auth-row .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER SPACING MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-header-centered { margin-bottom: 32px; }
  .section-header-centered .section-sub-desc { max-width: 100%; }
  .section-sub-desc[style] { margin-left: 0 !important; max-width: 100% !important; }

  /* Prevent 3D perspective transforms on mobile (cert image) */
  .cert-real-image {
    transform: none !important;
    transition: none !important;
  }

  /* Testi section padding */
  .testimonials-section .section-padding { padding: 56px 0; }
  .testimonials-section .section-header-centered { margin-bottom: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   TOOLS STATS BAR MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Remove white-space constraint so text wraps */
  .tools-stat-item { white-space: normal !important; }

  /* Stack description + stat items in a clean layout */
  .tools-stats-bar {
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 20px 18px !important;
  }
  .tools-stats-divider { display: none !important; }

  /* Description row takes full width */
  .tools-stats-left {
    width: 100% !important;
    flex: 0 0 100% !important;
    align-items: flex-start !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(0,0,0,.07);
    margin-bottom: 4px;
  }
  .tools-stats-icon {
    width: 40px !important; height: 40px !important;
  }
  .tools-stats-left p { font-size: .84rem !important; line-height: 1.55 !important; }

  /* 3 stat items side-by-side below the description */
  .tools-stat-item {
    flex: 1 1 30% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 14px 6px !important;
  }
  .tools-stat-icon {
    width: 36px !important; height: 36px !important;
  }
  .stat-num { font-size: 1rem !important; }
  .stat-lbl { font-size: .7rem !important; white-space: normal !important; line-height: 1.3 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CURRICULUM MOBILE — tab scrollbar hint
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .curriculum-section .section-title-navy { font-size: 1.6rem; }
  .cur-content-panel { padding: 20px 16px; }
  .cur-tab-btn { min-width: 120px; }
  .curr-highlights { grid-template-columns: 1fr; }
  .curr-bullets-list li { font-size: .84rem; }
}


/* ══════════════════════════════════════════════════════════════
   HERO MOBILE — corrected class names + overflow fix
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px;
    padding: 48px 0 52px;
  }
  .hero-form-panel { order: 2; width: 100%; max-width: 520px; margin: 0 auto; }
  .hero-content { order: 1; text-align: center; }
  .hero-cta-buttons { justify-content: center; }
  .hero-tagline { text-align: center; }
  .hero-bullets { text-align: left; max-width: 480px; margin: 0 auto 24px; }
}

@media (max-width: 768px) {
  .hero-section { min-height: auto; padding-top: 64px; }
  .hero-grid { padding: 36px 0 44px; gap: 28px; }
  .hero-title { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; line-height: 1.12 !important; }
  .hero-subtitle { font-size: .97rem !important; line-height: 1.65; }
  .hero-tagline { font-size: .85rem; flex-wrap: wrap; gap: 4px; justify-content: center; }
  .hero-cta-buttons { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero-cta-buttons .btn { width: 100%; justify-content: center; text-align: center; }
  .hero-form-panel { max-width: 100%; }
  .hero-bullets { max-width: 100%; }
  .hero-bullets li { font-size: .9rem; }
  .official-ribbon { font-size: .7rem; margin-bottom: 12px; }
  .hero-hex-float { display: none; }
  /* Prevent any child from overflowing */
  .hero-content > * { max-width: 100%; }
}

@media (max-width: 480px) {
  .hero-grid { padding: 28px 0 36px; gap: 24px; }
  .hero-title { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
  .form-card-inner { padding: 22px 16px; }
  .hero-cta-buttons .btn { font-size: .9rem; padding: 13px 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH — targeted fixes from screenshot audit
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO — hide heavy text on mobile, keep it clean ────── */
@media (max-width: 768px) {
  /* Hide long description paragraph — H1 + tagline says it all */
  .hero-subtitle { display: none; }
  /* Hide 3 bullet points — creates too much scroll before CTAs */
  .hero-bullets  { display: none; }
  /* Tighten ribbon pill */
  .official-ribbon { font-size: .68rem; padding: 5px 12px; margin-bottom: 10px; }
  /* Give H1 more room to breathe */
  .hero-title { margin-bottom: 12px; }
  /* Tagline tighter */
  .hero-tagline { margin-bottom: 20px; font-size: .88rem; }
  /* CTAs full-width, stacked */
  .hero-cta-buttons { flex-direction: column; gap: 10px; }
  .hero-cta-buttons .btn { width: 100%; justify-content: center; font-size: .9rem; padding: 13px 20px; }
}

/* ── 2. DELIVERY FEATURES — fix 2×2 grid (override wrong 1-col rule) */
@media (max-width: 768px) {
  .dlv-features-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 0 !important;
  }
  .dlv-feat-item {
    flex: unset !important;
    padding: 20px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-size: .78rem;
  }
  .dlv-feat-item:nth-child(odd)  { border-right: 1px solid #E2E8F0 !important; }
  .dlv-feat-item:nth-child(3),
  .dlv-feat-item:nth-child(4)    { border-bottom: none !important; }
  .dlv-feat-icon { width: 44px; height: 44px; border-radius: 12px; }
}

/* ── 3. DELIVERY STATS — compact 2×2 on mobile ─────────────── */
@media (max-width: 768px) {
  .dlv-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px 16px;
  }
  .dlv-stat-item {
    padding: 0 !important;
    border-right: none !important;
    align-items: flex-start;
    gap: 10px;
  }
  .dlv-stat-icon { width: 40px; height: 40px; flex-shrink: 0; }
  .dlv-stat-item strong { font-size: 1rem; }
  .dlv-stat-item span   { font-size: .72rem; }
}

/* ── 4. CURRICULUM TABS — better horizontal scroll ──────────── */
@media (max-width: 768px) {
  .curriculum-sidebar {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    gap: 6px;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .curriculum-sidebar::-webkit-scrollbar { display: none; }
  .curriculum-tab {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: unset;
    padding: 8px 14px;
    border-left: none !important;
    border-bottom: 2px solid transparent;
    border-radius: 8px;
  }
  .curriculum-tab.active {
    border-bottom-color: var(--teal);
  }
  .tab-module-num { display: none; } /* hide "MODULE 1" label in horizontal scroll */
  .tab-module-title { font-size: .78rem; }
  .curriculum-container { grid-template-columns: 1fr !important; }
  .cur-content-panel,
  .curriculum-details-panel { padding: 20px 16px; }
  .curr-highlights { grid-template-columns: 1fr; gap: 10px; }
}

/* ── 5. TOOLS SECTION — 2×2 on small mobile ────────────────── */
@media (max-width: 480px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .tool-card  { padding: 14px 10px; }
  .tool-logo  { width: 40px; height: 40px; }
  .tool-name  { font-size: .78rem; }
}

/* ── 6. SECTION TITLE sizes — prevent overflow ──────────────── */
@media (max-width: 480px) {
  .section-title-navy { font-size: 1.6rem !important; letter-spacing: -.02em; }
  .section-sub-desc   { font-size: .9rem; }
  .section-padding    { padding: 44px 0; }
}

/* ── 7. PRICING — compact on mobile ────────────────────────── */
@media (max-width: 480px) {
  .pc-current  { font-size: 2.4rem; }
  .pc-inner    { padding: 20px 16px; }
  .pillar-card { padding: 14px 12px; gap: 10px; }
  .pillar-body h4 { font-size: .85rem; }
  .pillar-body p  { font-size: .78rem; }
  .trust-item  { font-size: .7rem; padding: 9px 6px; }
}

/* ── 8. INSTRUCTOR CARD — tighter on small screens ──────────── */
@media (max-width: 480px) {
  .instructor-showcase { padding: 20px 14px; margin-top: 24px; }
  .ins-photo, .ins-photo-frame { width: 120px; height: 120px; }
  .ins-name { font-size: 1.3rem; }
  .ins-bio  { font-size: .85rem; }
}

/* ── 9. TESTIMONIALS — 1 card only on mobile ────────────────── */
@media (max-width: 640px) {
  .testi-slide { grid-template-columns: 1fr !important; }
  .testi-card:not(:first-child) { display: none; }
  .testi-card { padding: 20px 18px; }
}

/* ── 10. GENERAL — prevent any element causing horizontal scroll */
@media (max-width: 768px) {
  .hero-section,
  .learn-section,
  .delivery-section,
  .curriculum-section,
  .tools-section,
  .certificate-section,
  .instructors-section,
  .testimonials-section,
  .eligibility-section,
  .pricing-section,
  .partners-section,
  .faq-section { overflow-x: hidden; }

  img { max-width: 100%; height: auto; }
}


/* ═══════════════════════════════════════════════════════════════
   INSTRUCTOR SECTION — MOBILE REDESIGN
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Card — tighter padding */
  .instructor-showcase {
    grid-template-columns: 1fr !important;
    padding: 24px 18px !important;
    gap: 20px !important;
    margin-top: 24px;
    border-radius: 20px;
  }

  /* Photo col — horizontal strip: photo left, pills right */
  .ins-photo-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
  }
  .ins-photo-frame { width: 90px !important; height: 90px !important; flex-shrink: 0; }
  .ins-photo,
  .ins-photo-fallback { width: 90px !important; height: 90px !important; border-radius: 16px !important; }
  .ins-photo-badge { font-size: .6rem !important; padding: 3px 8px !important; bottom: -8px !important; }

  /* Pills — wrap next to photo */
  .ins-cred-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }
  .ins-pill { font-size: .68rem !important; padding: 4px 10px !important; }

  /* Name row — tighter */
  .ins-name-row { margin-bottom: 4px; align-items: center; }
  .ins-name { font-size: 1.25rem !important; }
  .ins-social-btn { width: 28px; height: 28px; }

  /* Title — smaller */
  .ins-title { font-size: .82rem !important; margin-bottom: 10px; line-height: 1.4; }

  /* Bio — hide second paragraph on mobile */
  .ins-bio:nth-of-type(2) { display: none; }
  .ins-bio:nth-of-type(1) { font-size: .85rem !important; line-height: 1.6; margin-bottom: 12px; }

  /* Expertise tags — show only first 4, hide last 2 */
  .ins-tag:nth-child(n+5) { display: none; }
  .ins-expertise-row { gap: 6px; margin-bottom: 14px; }
  .ins-tag { font-size: .72rem !important; padding: 5px 10px !important; }

  /* Stats — 2×2 grid instead of horizontal row */
  .ins-stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    padding: 0 !important;
    background: rgba(0,0,140,.06) !important;
    border-radius: 14px !important;
    overflow: hidden;
  }
  .ins-stat {
    background: linear-gradient(135deg, #F0F4FF, #F5F0FF);
    padding: 14px 10px !important;
    text-align: center;
  }
  .ins-stat-divider { display: none !important; }
  .ins-stat-num { font-size: 1rem !important; }
  .ins-stat-lbl { font-size: .65rem !important; color: #64748B; }
}

/* ── Section header — hide long subtitle on mobile ────────── */
@media (max-width: 480px) {
  .instructors-section .section-sub-desc { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 44px 20px 36px !important;
  }

  /* Logo + heading row compact */
  .footer-ci-logo { margin-bottom: 10px !important; }
  .footer-logo-img { height: 30px !important; }

  .f-info-col h4,
  .f-disclaimer-col h4,
  .f-contact-col h4 {
    font-size: .72rem !important;
    margin-bottom: 10px !important;
  }

  .f-info-col p,
  .f-disclaimer-col p,
  .f-contact-col p {
    font-size: .82rem !important;
    line-height: 1.6 !important;
  }

  /* Contact col: phone + email side by side */
  .f-contact-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .f-contact-col p { margin: 0 !important; }

  /* ISO stamp */
  .org-stamp {
    margin-top: 16px !important;
    font-size: .72rem !important;
    padding: 7px 14px !important;
    display: inline-block;
  }

  /* Footer bottom bar: stack vertically */
  .footer-bottom { padding: 16px 0 !important; }
  .fb-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 0 20px !important;
  }
  .fb-inner p { font-size: .75rem !important; }
  .fb-links {
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .fb-links a { font-size: .75rem !important; }
}

@media (max-width: 480px) {
  .footer-grid { padding: 36px 16px 28px !important; gap: 28px !important; }
  .fb-links { gap: 12px !important; }
  /* Disclaimer col: trim long text slightly */
  .f-disclaimer-col p { font-size: .78rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO BUTTONS — MOBILE POLISH
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 2px !important;
  }
  .hero-cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: .95rem !important;
    padding: 15px 20px !important;
    border-radius: 50px !important;
    letter-spacing: .01em !important;
  }
  /* Primary amber button — make it pop */
  .hero-cta-buttons .btn-amber {
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 16px 24px !important;
    box-shadow: 0 8px 28px rgba(245,158,11,.35) !important;
  }
  /* Ghost outline button — slightly smaller */
  .hero-cta-buttons .btn-outline-ghost {
    font-size: .9rem !important;
    padding: 13px 20px !important;
  }
}

@media (max-width: 390px) {
  .hero-cta-buttons .btn-amber { font-size: .92rem !important; padding: 14px 18px !important; }
  .hero-cta-buttons .btn-outline-ghost { font-size: .84rem !important; padding: 12px 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM SELECT WRAPPER — Professional Role dropdown
   ═══════════════════════════════════════════════════════════════ */
.select-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.select-wrapper select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important; /* room for chevron */
  cursor: pointer;
}
.select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.select-wrapper select:focus + .select-chevron {
  transform: translateY(-50%) rotate(180deg);
  stroke: var(--teal);
}

/* Mobile: make the select control itself big & readable */
@media (max-width: 768px) {
  .select-wrapper select {
    font-size: 1rem !important;       /* prevents iOS auto-zoom (must be ≥16px) */
    padding: 14px 44px 14px 14px !important;
    border-radius: 10px !important;
    min-height: 52px !important;
    color: #1E293B !important;
    background: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    /* ensure the native popup options inherit a reasonable size */
    font-family: var(--font-body) !important;
  }
  /* Scale the chevron icon */
  .select-chevron {
    width: 18px !important;
    height: 18px !important;
    right: 14px !important;
  }
}

@media (max-width: 390px) {
  .select-wrapper select {
    font-size: 1rem !important;
    padding: 13px 42px 13px 12px !important;
    min-height: 50px !important;
  }
}