/* ============================================================================
   Credible Academy — style.css
   Design system reused from the existing site (Bootstrap 5 + custom tokens).
   Loaded on every page after the Bootstrap CDN stylesheet.
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  --ca-navy: #101b3d;
  --ca-navy-soft: #1e2a52;
  --ca-blue: #2f5cf0;
  --ca-green: #16a34a;
  --ca-green-light: #e7f8ef;
  --ca-gray-700: #475569;
  --ca-gray-500: #64748b;
  --ca-gray-100: #f4f6fb;
  --ca-border: #e6e9f2;
  --ca-radius-lg: 20px;
  --ca-radius-md: 14px;
  --ca-radius-sm: 10px;
  --ca-shadow: 0 12px 30px rgba(16, 27, 61, 0.08);
  --ca-font-heading: "Poppins", "Segoe UI", sans-serif;
  --ca-font-body: "Inter", "Segoe UI", sans-serif;

  /* ---- Glassmorphism / gradient accent tokens (see MODERN GLASS LAYER) --- */
  --ca-teal: #0ea5a4;
  --ca-purple: #7c5cff;
  --ca-glass-bg: rgba(255, 255, 255, 0.68);
  --ca-glass-bg-strong: rgba(255, 255, 255, 0.82);
  --ca-glass-border: rgba(255, 255, 255, 0.55);
  --ca-glass-shadow: 0 8px 32px rgba(16, 27, 61, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --ca-gradient-brand: linear-gradient(135deg, #16a34a 0%, #0ea5a4 55%, #2f5cf0 100%);
  --ca-gradient-navy: linear-gradient(135deg, #0a1330 0%, #1e2a52 50%, #2f5cf0 130%);
}

body {
  font-family: var(--ca-font-body);
  color: var(--ca-gray-700);
  padding-top: 82px; /* offset for fixed navbar */
}

h1, h2, h3, h4, h5, h6,
.ca-font-heading {
  font-family: var(--ca-font-heading);
  color: var(--ca-navy);
  font-weight: 700;
}

a { text-decoration: none; }

.ca-section { padding: 88px 0; }
.ca-section-sm { padding: 48px 0; }
@media (max-width: 991.98px) {
  .ca-section { padding: 64px 0; }
  .ca-section-sm { padding: 40px 0; }
}
@media (max-width: 575.98px) {
  .ca-section { padding: 48px 0; }
  .ca-section-sm { padding: 32px 0; }
}

/* Hero gets its own slightly tighter rhythm: generous top (first thing seen)
   but a shorter bottom since the stats bar sits right underneath it. */
.ca-hero-section { padding: 56px 0 36px; }
@media (max-width: 991.98px) {
  .ca-hero-section { padding: 40px 0 28px; }
}
@media (max-width: 575.98px) {
  .ca-hero-section { padding: 32px 0 24px; }
}

/* Mentor snippet photo: subtle hover, no rotation/tilt */
.ca-mentor-photo { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.ca-mentor-photo:hover { transform: scale(1.02); }

/* ---- Testimonial carousel controls (subtle, brand-colored) ---------------- */
.ca-testimonial-carousel .carousel-item { transition: transform .5s ease-in-out; }
.ca-carousel-nav-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--ca-border);
  background: #fff;
  color: var(--ca-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ca-carousel-nav-btn:hover { background: var(--ca-navy); border-color: var(--ca-navy); color: #fff; transform: translateY(-2px); }
.ca-carousel-indicators { gap: 8px; }
.ca-carousel-indicators [data-bs-target] {
  width: 9px; height: 9px;
  border-radius: 50%;
  background-color: var(--ca-border);
  opacity: 1;
  border: none;
  text-indent: -9999px;
}
.ca-carousel-indicators [data-bs-target].active { background-color: var(--ca-green); width: 22px; border-radius: 5px; }
@media (prefers-reduced-motion: reduce) {
  .ca-testimonial-carousel .carousel-item { transition: none; }
}
.ca-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ca-green);
}
.ca-bg-light { background: var(--ca-gray-100); }
.ca-bg-navy { background: var(--ca-navy); color: #cbd3e6; }
.ca-bg-navy h1, .ca-bg-navy h2, .ca-bg-navy h3 { color: #fff; }

/* ---- Buttons ---------------------------------------------------------- */
.ca-btn-dark, .btn.ca-btn-dark {
  background: var(--ca-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.15s ease;
}
.ca-btn-dark:hover { background: #0a1330; color: #fff; transform: translateY(-2px); }

.ca-btn-outline, .btn.ca-btn-outline {
  background: #fff;
  color: var(--ca-navy);
  border: 1.5px solid var(--ca-border);
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ca-btn-outline:hover { border-color: var(--ca-navy); color: var(--ca-navy); transform: translateY(-2px); }

.ca-btn-green, .btn.ca-btn-green {
  background: var(--ca-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
}
.ca-btn-green:hover { background: #128a3e; color: #fff; }

/* ---- Navbar ------------------------------------------------------------- */
.ca-navbar {
  background: #fff;
  padding: 16px 0;
  transition: box-shadow 0.2s ease, padding 0.2s ease;
  border-bottom: 1px solid transparent;
}
.ca-navbar-scrolled {
  box-shadow: 0 6px 24px rgba(16, 27, 61, 0.08);
  padding: 10px 0;
  border-bottom: 1px solid var(--ca-border);
}
.ca-navbar .nav-link {
  color: var(--ca-navy);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem !important;
}
.ca-navbar .nav-link.active,
.ca-navbar .nav-link:hover { color: var(--ca-green); }
.ca-navbar .dropdown-menu {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  box-shadow: var(--ca-shadow);
}
.ca-navbar .dropdown-item:active,
.ca-navbar .dropdown-item:hover { background: var(--ca-green-light); color: var(--ca-navy); }

/* ---- Badges --------------------------------------------------------- */
.ca-badge-iso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ca-green-light);
  color: var(--ca-green);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
}

/* ---- Hero ------------------------------------------------------------- */
.ca-hero-heading { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.15; }
.ca-hero-heading .ca-word-rotate {
  color: var(--ca-green);
  display: inline-block;
  transition: opacity 0.2s ease;
}
.ca-word-fade { opacity: 0; }

.ca-hero-image-wrap {
  position: relative;
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
}
.ca-hero-image-wrap img {
  border-radius: var(--ca-radius-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dot-grid background texture, used on the homepage hero section */
.ca-dot-bg {
  position: relative;
  background-image: radial-gradient(rgba(16, 27, 61, 0.14) 1.5px, transparent 1.5px);
  background-size: 36px 36px;;
}

/* Typewriter cursor next to the rotating course word in the hero heading */
.ca-type-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--ca-green);
  margin-left: 4px;
  vertical-align: middle;
  animation: caCursorBlink 0.9s step-end infinite;
}
@keyframes caCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes caChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.ca-live-coding-chip {
  animation: caChipFloat 4s ease-in-out infinite;
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: #fff;
  border-radius: var(--ca-radius-md);
  box-shadow: var(--ca-shadow);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Base icon-box look, used wherever a more specific rule doesn't override it
   (e.g. plain .ca-card icon boxes on the homepage "Why Choose Us" cards and
   the trainer page's education list). */
.ca-icon-box {
  width: 44px; height: 44px;
  background: var(--ca-green-light);
  color: var(--ca-green);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.ca-live-coding-chip .ca-icon-box {
  width: 42px; height: 42px;
  background: var(--ca-green-light);
  color: var(--ca-green);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 0;
}

/* ---- Trust badge — EXACT finalized animation spec ---------------------- */
.trust-badge-floating {
  background: #fff;
  border-radius: var(--ca-radius-md);
  box-shadow: var(--ca-shadow);
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.trust-badge-floating .d-flex img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.5);
  animation: avatarPop 0.4s ease-out forwards,
             avatarRing 4.5s ease-out infinite;
}
.trust-badge-floating .d-flex img:first-child { margin-left: 0; }
.trust-badge-floating .d-flex img:nth-child(1) { animation-delay: 0.1s, 1s; }
.trust-badge-floating .d-flex img:nth-child(2) { animation-delay: 0.35s, 2.5s; }
.trust-badge-floating .d-flex img:nth-child(3) { animation-delay: 0.6s, 4s; }

@keyframes avatarPop {
  to { opacity: 1; transform: scale(1); }
}

@keyframes avatarRing {
  0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(25, 135, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  margin-right: 5px;
  position: relative;
}
.live-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: liveDotPulse 1.6s ease-out infinite;
}
@keyframes liveDotPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* ---- End trust badge spec ------------------------------------------------ */

/* ---- Stats bar ---------------------------------------------------------- */
.ca-stats-bar {
  background: var(--ca-navy);
  border-radius: var(--ca-radius-lg);
  color: #fff;
  padding: 40px;
  box-shadow: 0 20px 44px rgba(16,27,61,0.22);
}
.ca-stats-bar .ca-stat-num { font-size: 2.2rem; font-weight: 800; color: #fff; }
.ca-stats-bar .ca-stat-label { color: #9aa5c4; font-size: 0.9rem; }

/* ---- Cards: courses, gallery, testimonials ------------------------------ */
.ca-card {
  background: #fff;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 32px;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ca-card:hover { transform: translateY(-4px); box-shadow: var(--ca-shadow); }

.ca-course-card .ca-icon-box {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--ca-green-light);
  color: var(--ca-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}
.ca-course-card ul { padding-left: 1.1rem; }
.ca-course-card ul li { margin-bottom: 6px; font-size: 0.92rem; }
.ca-course-card .ca-course-meta {
  font-size: 0.8rem;
  color: var(--ca-gray-500);
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.ca-gallery-card { border-radius: var(--ca-radius-lg); overflow: hidden; position: relative; }
.ca-gallery-card img { width: 100%; height: 260px; object-fit: cover; display: block; }
.ca-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(16,27,61,0.85), transparent);
  color: #fff; padding: 20px;
}

.ca-testimonial-card { border-radius: var(--ca-radius-lg); background: #fff; border: 1px solid var(--ca-border); padding: 28px; height: 100%; }
.ca-testimonial-card .ca-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ca-testimonial-card .ca-quote { font-size: 0.95rem; color: var(--ca-gray-700); }
.ca-testimonial-placeholder {
  border: 1.5px dashed var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 28px;
  background: var(--ca-gray-100);
  color: var(--ca-gray-500);
  font-size: 0.9rem;
}

/* ---- Course page hero ---------------------------------------------------- */
.ca-course-hero { background: var(--ca-navy); color: #cbd3e6; padding: 110px 0 70px; }
.ca-course-hero h1 { color: #fff; }
.ca-course-hero .ca-badge-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- Course hero video card ------------------------------------------------ */
.ca-hero-video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-hero-video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ca-hero-video-card .ca-video-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.ca-hero-video-card .ca-video-play-btn {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ca-green);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(22,163,74,0.45);
  transition: transform 0.25s ease;
  z-index: 2;
}
.ca-hero-video-card .ca-video-play-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  animation: caPlayPulse 2.4s ease-out infinite;
}
.ca-hero-video-card .ca-video-play-btn:hover { transform: scale(1.08); }
.ca-hero-video-card .ca-video-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #fff;
  font-size: 0.82rem;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
@keyframes caPlayPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}
.ca-video-unmute-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16,27,61,0.75);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, background 0.2s ease;
}
.ca-video-unmute-btn:hover { transform: scale(1.08); background: rgba(16,27,61,0.9); }
@media (max-width: 991.98px) {
  .ca-hero-video-card { margin-top: 8px; }
}

/* ---- Trainer page hero photo: gradient-ring frame + inner clipped image --- */
.ca-hero-photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  margin-left: auto;
  margin-right: 0;
  border-radius: 28px;
  padding: 5px;
  background: var(--ca-gradient-brand);
  box-shadow: 0 14px 34px rgba(22, 163, 74, 0.28), 0 45px 90px rgba(0,0,0,0.45);
  animation: caPhotoFloat 6s ease-in-out infinite;
}
.ca-hero-photo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ca-gradient-brand);
}
/* Soft directional highlight for a premium "studio light" feel */
.ca-hero-photo-inner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 28% 8%, rgba(255,255,255,0.30), transparent 55%);
  mix-blend-mode: soft-light;
  z-index: 2;
  pointer-events: none;
}
.ca-hero-photo-frame img,
.ca-hero-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.07) saturate(1.12) brightness(1.03);
  /* Fades the bottom edge into the frame's gradient background so the
     portrait reads as blended rather than a hard-edged rectangle —
     the closest CSS-only approximation of a true cutout/transparent PNG. */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
@keyframes caPhotoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (max-width: 991.98px) {
  .ca-hero-photo-frame { margin-top: 8px; max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* Floating quick-stat chip + "available" live badge over the photo -------- */
.ca-photo-float-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  background: rgba(16, 27, 61, 0.72);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 10px 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ca-photo-float-chip .ca-stat-num-sm {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, #ffffff, #b9f3d1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ca-photo-float-chip .ca-stat-label-sm {
  font-size: 0.66rem;
  color: #cbd3e6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.ca-photo-live-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(16, 27, 61, 0.72);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

/* ---- Pull-quote (trainer philosophy statement) ---------------------------- */
.ca-pull-quote {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 16px 20px 0;
}
.ca-pull-quote::before {
  content: "\201C";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
  color: rgba(22, 163, 74, 0.16);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}
.ca-pull-quote p {
  position: relative;
  z-index: 1;
  font-family: var(--ca-font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--ca-navy);
  line-height: 1.55;
}
.ca-pull-quote-attrib {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ca-green);
}

/* ---- Small circular photo used inside the CTA banner ---------------------- */
.ca-cta-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  margin: 0 auto 18px;
  display: block;
}

.ca-curriculum-item {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  padding: 20px 24px;
  margin-bottom: 14px;
}
.ca-curriculum-item .ca-module-num {
  width: 34px; height: 34px;
  background: var(--ca-green-light);
  color: var(--ca-green);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  margin-right: 12px;
}

.ca-tool-chip {
  display: inline-block;
  background: var(--ca-gray-100);
  border: 1px solid var(--ca-border);
  color: var(--ca-navy);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 8px 8px 0;
}

.ca-fee-card {
  border: 2px solid var(--ca-navy);
  border-radius: var(--ca-radius-lg);
  padding: 32px;
  background: #fff;
}
.ca-fee-note {
  font-size: 0.8rem;
  color: var(--ca-gray-500);
  background: #fff7e6;
  border: 1px dashed #f0c975;
  border-radius: var(--ca-radius-sm);
  padding: 10px 14px;
}

.ca-outcome-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  padding: 14px 18px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--ca-navy);
}
.ca-outcome-chip i { color: var(--ca-green); font-size: 1.2rem; }

/* ---- "What you'll learn" checklist (course pages) ------------------------ */
.ca-learn-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.ca-learn-item i { color: var(--ca-green); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.ca-learn-item span { font-size: 0.95rem; color: var(--ca-gray-700); }

/* ---- Plain bullet list ("Who it's for" / "Requirements") ----------------- */
.ca-plain-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.ca-plain-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 0.93rem; color: var(--ca-gray-700); }
.ca-plain-list li::before {
  content: "";
  position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ca-green);
}

/* ---- Curriculum module sub-topics ----------------------------------------- */
.ca-curriculum-item .ca-curriculum-sub {
  margin: 10px 0 0 46px;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--ca-gray-500);
}
.ca-curriculum-item .ca-curriculum-sub li { margin-bottom: 4px; }

/* ---- "This course includes" list inside the fee card ---------------------- */
.ca-includes-list { list-style: none; padding-left: 0; margin: 0 0 20px; }
.ca-includes-list li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ca-gray-700); margin-bottom: 8px; }
.ca-includes-list li i { color: var(--ca-green); font-size: 1rem; }

/* ---- CTA banner --------------------------------------------------------- */
.ca-cta-banner {
  background: linear-gradient(120deg, var(--ca-navy), var(--ca-navy-soft));
  border-radius: var(--ca-radius-lg);
  color: #fff;
  padding: 56px;
}
.ca-cta-banner h2 { color: #fff; }

/* ---- FAQ (Bootstrap accordion reskin) ------------------------------------ */
.ca-accordion .accordion-item { border: 1px solid var(--ca-border); border-radius: var(--ca-radius-md) !important; margin-bottom: 12px; overflow: hidden; }
.ca-accordion .accordion-button { font-weight: 600; color: var(--ca-navy); }
.ca-accordion .accordion-button:not(.collapsed) { background: var(--ca-green-light); color: var(--ca-navy); box-shadow: none; }
.ca-accordion .accordion-button:focus { box-shadow: none; }

/* ---- Forms --------------------------------------------------------------- */
.ca-form-card {
  background: #fff;
  border-radius: var(--ca-radius-lg);
  border: 1px solid var(--ca-border);
  padding: 32px;
  box-shadow: var(--ca-shadow);
}
.ca-form-card .form-control,
.ca-form-card .form-select {
  border-radius: var(--ca-radius-sm);
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--ca-border);
}
.ca-form-card .form-control:focus,
.ca-form-card .form-select:focus {
  border-color: var(--ca-green);
  box-shadow: 0 0 0 3px var(--ca-green-light);
}

/* ---- Footer --------------------------------------------------------------- */
.ca-footer { background: var(--ca-navy); color: #b7c0dc; padding-top: 20px; }
.ca-footer-heading { color: #fff; font-weight: 700; margin-bottom: 16px; font-size: 0.95rem; }
.ca-footer-text { font-size: 0.88rem; line-height: 1.6; color: #9aa5c4; }
.ca-footer-links li { margin-bottom: 10px; font-size: 0.88rem; }
.ca-footer-links a { color: #b7c0dc; }
.ca-footer-links a:hover { color: var(--ca-green); }
.ca-footer-hr { border-color: rgba(255,255,255,0.1); margin: 30px 0 20px; }
.ca-footer-bottom { font-size: 0.82rem; color: #8b96b8; }
.ca-social-links a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ca-social-links a:hover { background: var(--ca-green); }

/* ---- Floating WhatsApp button ---------------------------------------------- */
.ca-whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px; height: 58px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  z-index: 1050;
  animation: caWhatsAppPulse 2.4s ease-out infinite;
}
@keyframes caWhatsAppPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5), 0 8px 24px rgba(37,211,102,0.45); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), 0 8px 24px rgba(37,211,102,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 24px rgba(37,211,102,0.45); }
}

/* ---- Blog ------------------------------------------------------------------ */
.ca-blog-card { border-radius: var(--ca-radius-lg); border: 1px solid var(--ca-border); overflow: hidden; height: 100%; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.ca-blog-card:hover { transform: translateY(-4px); box-shadow: var(--ca-shadow); }
.ca-blog-card img { width: 100%; height: 190px; object-fit: cover; }
.ca-blog-card .ca-blog-body { padding: 22px; }
.ca-blog-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ca-green); font-weight: 700; }
.ca-blog-article { max-width: 780px; margin: 0 auto; }
.ca-blog-article h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.ca-blog-article h3 { margin-top: 1.6rem; font-size: 1.2rem; }
.ca-blog-article p, .ca-blog-article li { font-size: 1.02rem; line-height: 1.8; }
.ca-blog-article ul, .ca-blog-article ol { padding-left: 1.4rem; }

/* ---- Utilities -------------------------------------------------------------- */
.ca-text-green { color: var(--ca-green) !important; }
.ca-divider { height: 1px; background: var(--ca-border); border: none; }

@media (max-width: 991.98px) {
  body { padding-top: 74px; }
  .ca-navbar .navbar-collapse { background: #fff; margin-top: 12px; padding: 16px; border-radius: var(--ca-radius-md); box-shadow: var(--ca-shadow); }

  /* Courses dropdown: on mobile it must expand in-flow inside the collapsed
     menu card, not float via Popper — otherwise it can render detached from
     (or clipped/misaligned against) the toggle on small screens. */
  .ca-navbar .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none;
    display: none;
    width: 100%;
    margin: 4px 0 6px !important;
    padding: 4px 0 4px 14px;
    border: none;
    border-left: 2px solid var(--ca-green-light);
    border-radius: 0;
    box-shadow: none;
  }
  .ca-navbar .dropdown-menu.show { display: block; }
  .ca-navbar .dropdown-item { padding: 10px 12px; font-size: 0.92rem; }
  .ca-navbar .dropdown-divider { margin: 4px 12px; }
}

/* ============================================================================
   PREMIUM MOTION LAYER
   Everything below is additive on top of the design system above: it changes
   no colors, spacing or layout, only introduces animation/transition
   behaviour. Powered by animations.js (Motion — motion.dev — vanilla JS
   build of the Framer Motion engine). If animations.js fails to load for
   any reason, none of this blocks the page: see .ca-reveal-init below.
   ========================================================================== */

/* ---- Native cross-document page transitions (zero JS, Chromium today,
        ignored gracefully elsewhere) ------------------------------------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) { animation: caPageOut .28s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: caPageIn .32s cubic-bezier(.4,0,.2,1) both; }
@keyframes caPageOut { to { opacity: 0; } }
@keyframes caPageIn { from { opacity: 0; } }

/* ---- Navbar: slide-down entrance + glass blur on scroll ------------------ */
.ca-navbar { animation: caNavIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes caNavIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ca-navbar-scrolled {
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255,255,255,0.82) !important;
}

/* ---- Active / hover nav-link underline ------------------------------------ */
.ca-navbar .nav-link { position: relative; }
.ca-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--ca-green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.ca-navbar .nav-link.active::after,
.ca-navbar .nav-link:hover::after { transform: scaleX(1); }
.ca-navbar .dropdown-toggle::after { transition: transform .25s ease; }
.ca-navbar .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ---- Smoother mobile menu collapse ---------------------------------------- */
.navbar-collapse.collapsing {
  transition: height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease !important;
}
.navbar-collapse { transition: opacity .25s ease; }

/* ---- Buttons: glow + scale + tap ------------------------------------------- */
.ca-btn-dark, .ca-btn-green, .ca-btn-outline,
.btn.ca-btn-dark, .btn.ca-btn-green, .btn.ca-btn-outline {
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .2s ease;
  will-change: transform;
}
.ca-btn-dark:hover, .btn.ca-btn-dark:hover { box-shadow: 0 10px 26px rgba(16,27,61,.28); }
.ca-btn-green:hover, .btn.ca-btn-green:hover { box-shadow: 0 10px 26px rgba(22,163,74,.35); }
.ca-btn-outline:hover, .btn.ca-btn-outline:hover { box-shadow: 0 10px 22px rgba(16,27,61,.12); }
.ca-btn-dark:active, .ca-btn-green:active, .ca-btn-outline:active,
.btn.ca-btn-dark:active, .btn.ca-btn-green:active, .btn.ca-btn-outline:active { transform: scale(.96) !important; }

/* WhatsApp float + social icons: subtle hover/tap feedback */
.ca-whatsapp-float, .ca-social-links a {
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .2s ease;
}
.ca-whatsapp-float:hover { transform: scale(1.08); }
.ca-whatsapp-float:active { transform: scale(.92); }
.ca-social-links a:hover { transform: translateY(-3px) scale(1.06); }
.ca-social-links a:active { transform: scale(.92); }

/* ---- Cards: lift + scale + soft shadow ------------------------------------- */
.ca-card, .ca-course-card, .ca-testimonial-card, .ca-blog-card, .ca-gallery-card {
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.ca-card:hover, .ca-testimonial-card:hover, .ca-blog-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 40px rgba(16,27,61,.12);
}

/* Image zoom on hover (course/blog/gallery cards) */
.ca-blog-card, .ca-gallery-card { overflow: hidden; transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease; }
.ca-blog-card img, .ca-gallery-card img { transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ca-blog-card:hover img, .ca-gallery-card:hover img { transform: scale(1.04); }
.ca-gallery-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16,27,61,.14); }

/* Form inputs: subtle focus lift */
.ca-form-card .form-control, .ca-form-card .form-select {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ca-form-card .form-control:focus, .ca-form-card .form-select:focus { transform: translateY(-1px); }

/* ---- Floating hero background shapes (JS-injected divs, CSS-animated) ----- */
.ca-floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  opacity: .28;
  z-index: -1;
  animation: caFloat 7s ease-in-out infinite;
}
@keyframes caFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* ---- Image fade-in + skeleton shimmer (loading experience) ---------------- */
img { transition: opacity .5s ease; }
img.ca-img-loading { opacity: 0; }
.ca-skeleton {
  background: linear-gradient(90deg, #eef1f7 25%, #f7f9fc 37%, #eef1f7 63%);
  background-size: 400% 100%;
  animation: caShimmer 1.4s ease infinite;
}
@keyframes caShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Top page-load progress bar (JS-injected, Vercel-style) --------------- */
#ca-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--ca-green), var(--ca-blue));
  z-index: 3000;
  transition: width .25s ease, opacity .4s ease;
}

/* ---- Scroll-revealed elements ---------------------------------------------
   Applied only via JS (animations.js), just before an element is observed —
   never as a static rule — so content is never hidden if the script fails
   to run at all. See animations.js's revealAllNow() safety net. */
.ca-reveal-init { opacity: 0; transform: translateY(40px); }

/* ---- Respect the OS-level reduced motion preference ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .ca-navbar { animation: none; }
  .ca-floating-shape { animation: none; display: none; }
  .ca-live-coding-chip { animation: none; }
  .ca-type-cursor { animation: none; opacity: 1; }
  .ca-hero-video-card .ca-video-play-btn::before { animation: none; }
  .ca-hero-photo-frame { animation: none; }
  .ca-reveal-init { opacity: 1 !important; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================================
   MODERN GLASSMORPHISM & GRADIENT LAYER
   Additive visual refresh on top of everything above: frosted-glass cards,
   gradient-mesh "aurora" backgrounds, gradient buttons/text, glowing hover
   states. Nothing here changes layout, spacing or copy — pure surface
   treatment via existing shared classes, so it cascades to every page.
   ========================================================================== */

/* ---- Subtle site-wide aurora wash behind every page (very low opacity,
        so plain text pages like blog posts stay readable) ------------------ */
body {
  background:
    radial-gradient(circle at 6% 6%, rgba(22, 163, 74, 0.05), transparent 32%),
    radial-gradient(circle at 94% 4%, rgba(47, 92, 240, 0.05), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(124, 92, 255, 0.04), transparent 40%),
    #ffffff;
  background-attachment: fixed;
}

/* ---- Reusable aurora-blob mesh, applied to dark/navy sections ------------ */
.ca-course-hero,
.ca-cta-banner,
.ca-bg-navy,
.ca-stats-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ca-course-hero::before,
.ca-cta-banner::before,
.ca-bg-navy::before,
.ca-stats-bar::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
  animation: caAuroraDrift 20s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 12% 20%, rgba(22, 163, 74, 0.40), transparent 42%),
    radial-gradient(circle at 88% 15%, rgba(47, 92, 240, 0.34), transparent 46%),
    radial-gradient(circle at 55% 95%, rgba(124, 92, 255, 0.26), transparent 50%);
}
@keyframes caAuroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.12); }
}

/* ---- Same mesh, much softer, on light sections (keeps cards on top of
        it legible while still tinting the background) --------------------- */
.ca-bg-light,
.ca-dot-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f4f6fb;
}
.ca-bg-light::before,
.ca-dot-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.4;
  animation: caAuroraDrift 24s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 10% 15%, rgba(22, 163, 74, 0.20), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(47, 92, 240, 0.18), transparent 44%),
    radial-gradient(circle at 50% 100%, rgba(124, 92, 255, 0.15), transparent 48%);
}
.ca-dot-bg { background-color: transparent; }

/* ---- Glass navbar (glassy even before scroll) ----------------------------- */
.ca-navbar {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.navbar-brand { display: inline-flex; transition: transform 0.25s ease, filter 0.25s ease; }
.navbar-brand:hover { transform: scale(1.04); filter: drop-shadow(0 6px 16px rgba(22, 163, 74, 0.35)); }

/* ---- Glass cards: frosted background + soft border + inner highlight ----- */
.ca-card,
.ca-course-card,
.ca-testimonial-card,
.ca-blog-card,
.ca-form-card,
.ca-curriculum-item,
.ca-accordion .accordion-item {
  background: var(--ca-glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--ca-glass-border);
  box-shadow: var(--ca-glass-shadow);
}
.ca-card:hover,
.ca-testimonial-card:hover,
.ca-blog-card:hover,
.ca-course-card:hover {
  box-shadow: 0 26px 60px rgba(22, 163, 74, 0.18), 0 8px 24px rgba(47, 92, 240, 0.12);
  border-color: rgba(22, 163, 74, 0.35);
}
.ca-curriculum-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ca-curriculum-item:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 28px rgba(16, 27, 61, 0.10);
  border-color: rgba(22, 163, 74, 0.35);
}
.ca-curriculum-item .ca-module-num {
  background: linear-gradient(135deg, var(--ca-green), var(--ca-teal));
  color: #fff;
}

/* ---- Fee card: glass + animated gradient-ring border (replaces flat navy
        2px border with a green -> blue gradient outline) -------------------- */
.ca-fee-card {
  position: relative;
  background: var(--ca-glass-bg-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: none;
  box-shadow: 0 24px 55px rgba(16, 27, 61, 0.14);
}
.ca-fee-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--ca-gradient-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ca-fee-note {
  background: rgba(255, 247, 230, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Form inputs: keep legible against the glass card behind them -------- */
.ca-form-card .form-control,
.ca-form-card .form-select {
  background: rgba(255, 255, 255, 0.85);
}

/* ---- Icon boxes: gradient fill + soft glow instead of flat pale chip ----- */
.ca-icon-box,
.ca-live-coding-chip .ca-icon-box,
.ca-course-card .ca-icon-box {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(47, 92, 240, 0.14));
  border: 1px solid rgba(22, 163, 74, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(22, 163, 74, 0.15);
}

/* ---- Buttons: gradient fill + shine sweep on hover ------------------------ */
.ca-btn-green, .btn.ca-btn-green {
  background: linear-gradient(135deg, #18b350, var(--ca-teal));
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.30);
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.ca-btn-dark, .btn.ca-btn-dark {
  background: var(--ca-gradient-navy);
  box-shadow: 0 10px 28px rgba(16, 27, 61, 0.32);
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.ca-btn-outline, .btn.ca-btn-outline {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(16, 27, 61, 0.14);
}
.ca-btn-green::before, .ca-btn-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.ca-btn-green:hover::before, .ca-btn-dark:hover::before { left: 130%; }
.ca-btn-green:hover, .btn.ca-btn-green:hover { box-shadow: 0 14px 34px rgba(22, 163, 74, 0.40); }
.ca-btn-dark:hover, .btn.ca-btn-dark:hover { box-shadow: 0 14px 34px rgba(16, 27, 61, 0.42); }

/* ---- Gradient text: hero rotating word, eyebrows, stat numbers ----------- */
.ca-hero-heading .ca-word-rotate {
  background: linear-gradient(120deg, var(--ca-green), var(--ca-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ca-eyebrow {
  background: linear-gradient(120deg, var(--ca-green), var(--ca-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ca-stats-bar .ca-stat-num {
  background: linear-gradient(120deg, #ffffff, #b9f3d1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Course-hero badge pills: glass + lift on hover ----------------------- */
.ca-course-hero .ca-badge-pill {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, background 0.2s ease;
}
.ca-course-hero .ca-badge-pill:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.18); }

/* ---- Tool chips: glass pill with colored hover lift ----------------------- */
.ca-tool-chip {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 27, 61, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ca-tool-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.35);
}

/* ---- Homepage hero image: glass frame ring -------------------------------- */
.ca-hero-image-wrap {
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 30px 70px rgba(16, 27, 61, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---- Accordion (FAQ): glass panels + gradient active state --------------- */
.ca-accordion .accordion-button {
  background: transparent;
}
.ca-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(120deg, rgba(22, 163, 74, 0.14), rgba(47, 92, 240, 0.08));
}

/* ---- Footer: gradient hairline accent at the very top --------------------- */
.ca-footer { position: relative; }
.ca-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 163, 74, 0.6), rgba(47, 92, 240, 0.6), transparent);
}

/* ---- WhatsApp float: gradient fill + glass ring --------------------------- */
.ca-whatsapp-float {
  background: linear-gradient(135deg, #25d366, #128c4a);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .ca-course-hero::before,
  .ca-cta-banner::before,
  .ca-bg-navy::before,
  .ca-stats-bar::before,
  .ca-bg-light::before,
  .ca-dot-bg::before {
    animation: none;
  }
}

/* ============================================================================
   ROADMAP TIMELINE (course pages)
   A connected, phase-by-phase learning journey — replaces the flat module
   list with numbered circles, a linking rail, a duration chip per phase and
   a highlighted "you'll be able to" outcome line.
   ========================================================================== */
.ca-roadmap { position: relative; }
.ca-roadmap-phase {
  position: relative;
  padding: 26px 28px 26px 68px;
  margin-bottom: 22px;
  border-radius: var(--ca-radius-lg);
}
.ca-roadmap-phase::after {
  content: "";
  position: absolute;
  left: 38px; top: 62px; bottom: -22px;
  width: 2px;
  background: linear-gradient(var(--ca-green), var(--ca-blue));
  opacity: 0.3;
}
.ca-roadmap-phase:last-child::after { display: none; }
.ca-roadmap-phase-num {
  position: absolute;
  left: 20px; top: 26px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ca-green), var(--ca-teal));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.35);
  z-index: 1;
}
.ca-roadmap-week {
  display: inline-block;
  background: var(--ca-green-light);
  color: var(--ca-green);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 13px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.ca-roadmap-phase h3 { margin-bottom: 6px; }
.ca-roadmap-phase p.ca-roadmap-desc { color: var(--ca-gray-700); font-size: 0.94rem; margin-bottom: 10px; }
.ca-roadmap-outcome {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--ca-navy);
  background: rgba(22, 163, 74, 0.10);
  border-left: 3px solid var(--ca-green);
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ca-roadmap-outcome i { color: var(--ca-green); margin-top: 2px; }

/* ---- "Why learn this course" cards ---------------------------------------- */
.ca-why-card {
  height: 100%;
  padding: 28px;
  border-radius: var(--ca-radius-lg);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease;
}
.ca-why-card:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(22,163,74,0.16); }
.ca-why-card .ca-icon-box { width: 52px; height: 52px; font-size: 1.35rem; border-radius: 14px; }

/* ============================================================================
   COURSE PAGE SUB-NAV (sticky in-page jump links, Coursera-style)
   Sits below the fixed main navbar; lets visitors jump straight to Roadmap,
   Fees or FAQ on long course pages instead of scrolling through everything.
   ========================================================================== */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 148px; }

.ca-subnav {
  position: sticky;
  top: 82px;
  z-index: 900;
  background: var(--ca-glass-bg-strong);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--ca-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ca-subnav::-webkit-scrollbar { display: none; }
.ca-subnav-inner {
  display: flex;
  gap: 4px;
  padding: 10px 0;
  white-space: nowrap;
}
.ca-subnav a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ca-gray-700);
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.ca-subnav a:hover { background: var(--ca-green-light); color: var(--ca-green); }
.ca-subnav a.active { background: var(--ca-green); color: #fff; }

@media (max-width: 991.98px) {
  .ca-subnav { top: 74px; }
  section[id] { scroll-margin-top: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================================
   COURSES HUB (courses.html) — filter tabs, best-for badges, comparison table
   ========================================================================== */
.ca-course-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ca-course-filter-tabs button {
  border: 1.5px solid var(--ca-border);
  background: #fff;
  color: var(--ca-gray-700);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 8px 18px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ca-course-filter-tabs button:hover { border-color: var(--ca-green); color: var(--ca-green); transform: translateY(-2px); }
.ca-course-filter-tabs button.active { background: var(--ca-navy); border-color: var(--ca-navy); color: #fff; }

.ca-best-for-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ca-green-light);
  color: var(--ca-green);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}

.ca-course-card[hidden] { display: none !important; }

/* Compare-at-a-glance table */
.ca-compare-table-wrap {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ca-shadow);
}
.ca-compare-table { margin-bottom: 0; }
.ca-compare-table thead th {
  background: var(--ca-navy);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  border: none;
  padding: 14px 18px;
  white-space: nowrap;
}
.ca-compare-table tbody td {
  padding: 14px 18px;
  vertical-align: middle;
  font-size: 0.9rem;
  border-color: var(--ca-border);
}
.ca-compare-table tbody tr:hover { background: var(--ca-green-light); }
.ca-compare-table a { color: var(--ca-navy); font-weight: 600; }
.ca-compare-table a:hover { color: var(--ca-green); }

/* "How training works" process strip */
.ca-process-step {
  text-align: center;
  padding: 12px;
  position: relative;
}
.ca-process-step .ca-process-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ca-gradient-brand, var(--ca-green));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 auto 14px;
}
@media (min-width: 992px) {
  .ca-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    height: 2px;
    background: var(--ca-border);
  }
}

/* ============================================================================
   PLACEMENTS PAGE — honesty banner + illustrated career roadmap
   ========================================================================== */
.ca-honesty-banner {
  background: linear-gradient(120deg, var(--ca-navy), var(--ca-navy-soft));
  border-radius: var(--ca-radius-lg);
  color: #fff;
  padding: 44px;
}
.ca-honesty-banner .ca-eyebrow { color: #7be3a6; }
.ca-honesty-banner h2 { color: #fff; }
.ca-honesty-banner p { color: #cbd3e6; }
.ca-honesty-banner .ca-honesty-quote {
  font-family: var(--ca-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  border-left: 3px solid var(--ca-green);
  padding-left: 18px;
  margin: 18px 0;
}

.ca-career-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ca-green-light);
  color: var(--ca-green);
  font-family: var(--ca-font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.ca-career-illustration img {
  width: 100%;
  height: auto;
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ca-career-illustration img:hover { transform: scale(1.02); box-shadow: 0 26px 55px rgba(16,27,61,.16); }
.ca-career-step:not(:last-child) { margin-bottom: 64px; }
@media (max-width: 767.98px) {
  .ca-career-step:not(:last-child) { margin-bottom: 44px; }
  .ca-honesty-banner { padding: 28px; }
}

/* ---- "At a glance" facts strip in the course hero -------------------------- */
.ca-glance-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ca-glance-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #cbd3e6; }
.ca-glance-item i { color: var(--ca-green); font-size: 1rem; }
.ca-glance-item strong { color: #fff; font-weight: 700; }

/* ---- Skills tag chips (distinct from tool chips: outcomes, not software) -- */
.ca-skill-chip {
  display: inline-block;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(47, 92, 240, 0.08));
  border: 1px solid rgba(22, 163, 74, 0.22);
  color: var(--ca-navy);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 8px 8px 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ca-skill-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.4);
}

/* ---- Interactive skill flip-cards (hover/focus reveals proficiency stats) --
   Front: icon + skill name. Back: self-assessed proficiency % + years used.
   Keyboard-accessible via focus-within; degrades gracefully on touch (first
   tap acts as hover on most mobile browsers). ---------------------------- */
.ca-skill-flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 2.5rem;
}
.ca-skill-flip {
  position: relative;
  height: 152px;
  perspective: 1000px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
}
.ca-skill-flip:focus-visible { outline: none; }
.ca-skill-flip:focus-visible .ca-skill-flip-card {
  outline: 2px solid var(--ca-green);
  outline-offset: 3px;
}
.ca-skill-flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  border-radius: 16px;
}
.ca-skill-flip:hover .ca-skill-flip-card,
.ca-skill-flip:focus-within .ca-skill-flip-card {
  transform: rotateY(180deg);
}
.ca-skill-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}
.ca-skill-flip-front {
  background: var(--ca-glass-bg);
  border: 1px solid var(--ca-glass-border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--ca-shadow);
}
.ca-skill-flip-front i { font-size: 1.9rem; color: var(--ca-green); margin-bottom: 10px; }
.ca-skill-flip-front span { font-weight: 700; font-size: 0.92rem; color: var(--ca-navy); }
.ca-skill-flip-back {
  background: var(--ca-gradient-brand);
  color: #fff;
  transform: rotateY(180deg);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.35);
}
.ca-skill-flip-back .ca-skill-pct-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
  margin-bottom: 2px;
}
.ca-skill-flip-back .ca-skill-pct { font-size: 1.9rem; font-weight: 800; line-height: 1; margin-bottom: 10px; }
.ca-skill-flip-back .ca-skill-years {
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 4px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .ca-skill-flip-card { transition: none; }
}

/* ---- "How it was built" expandable panel under project gallery cards ------ */
.ca-project-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--ca-glass-bg);
  border: 1px solid var(--ca-glass-border);
  border-radius: var(--ca-radius-sm, 10px);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ca-navy);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.ca-project-toggle:hover {
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.14);
}
.ca-project-toggle i {
  transition: transform 0.3s ease;
  color: var(--ca-green);
}
.ca-project-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.ca-project-steps {
  margin-top: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-sm, 10px);
}
.ca-project-steps ul {
  margin: 0;
  padding-left: 1.1rem;
}
.ca-project-steps li {
  font-size: 0.82rem;
  color: var(--ca-gray-700);
  margin-bottom: 6px;
}
.ca-project-steps li:last-child { margin-bottom: 0; }

/* ---- Google-review styling: star rating + Google badge on testimonial cards */
.ca-review-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.ca-star-row { display: inline-flex; gap: 1px; line-height: 1; }
.ca-star-row i { color: #fbbc04; font-size: 0.78rem; }
.ca-star-row i.bi-star { color: #dadce0; }
.ca-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--ca-gray-500);
  font-weight: 600;
}
.ca-google-badge i { font-size: 0.82rem; color: #4285f4; }