:root {
  --brand-dark: #0a0514;
  --brand-purple: #5b21b6;
  --brand-magenta: #c026d3;
  --brand-cyan: #06b6d4;
  --brand-accent: #4311d7;
  --text-main: #ffffff;
  --text-muted: #cbd5e1;
  --text-muted-dark: #707172;
  --bg-light: #f8fafc;
  --text-light-theme: #0f172a;
  --text-muted-light: #475569;
  --font-main: "Plus Jakarta Sans", sans-serif;
  --font-serif: "Cormorant Garamond", serif;
  --font-primary: "Plus Jakarta Sans", sans-serif;
}

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

html.lenis,
html.lenis body {
  height: auto;
  width: 100%;
  overflow-x: clip;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  font-family: var(--font-main);
  color: var(--text-main);
  overflow-x: clip;
  min-height: 100vh;
}

/* Custom Grid System */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
}
.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 -15px;
}
.align-items-center {
  align-items: center;
}
.position-relative {
  position: relative;
}
.mt-5 {
  margin-top: 3rem;
}
.col-md-9 {
  width: 75%;
  padding: 0 15px;
}
.col-lg-8 {
  width: 66.666667%;
  padding: 0 15px;
}

@media (max-width: 768px) {
  .col-md-9,
  .col-lg-8 {
    width: 100%;
  }
}

.color-mesh {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2;
  filter: blur(50px);
  opacity: 0.05;
}

.blob {
  position: absolute;
  border-radius: 50%;
  animation: drift 15s infinite alternate ease-in-out;
}

.purple-blob {
  width: 50vw;
  height: 50vw;
  background: var(--brand-purple);
  top: -10%;
  left: -10%;
}

.cyan-blob {
  width: 40vw;
  height: 40vw;
  background: var(--brand-cyan);
  bottom: 0;
  right: -10%;
  animation-delay: -5s;
}

.magenta-blob {
  width: 45vw;
  height: 45vw;
  background: var(--brand-magenta);
  top: 30%;
  left: 30%;
  animation-delay: -10s;
}

/* =========================================
   1. COURSE HERO (OVERVIEW SECTION)
   ========================================= */
.course-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 120px 0;
  background-color: var(--brand-dark);
  overflow: hidden;
  z-index: 10;
}

/* Dynamic Background Layering */
.course-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: grayscale(30%);
}
.course-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* Massive gradient: Solid dark on left, transparent middle, solid dark on bottom */
  background:
    linear-gradient(
      to right,
      rgba(10, 5, 20, 1) 0%,
      rgba(10, 5, 20, 0.8) 40%,
      rgba(10, 5, 20, 0.4) 100%
    ),
    linear-gradient(to top, rgba(10, 5, 20, 1) 0%, transparent 40%);
}

.relative-z {
  position: relative;
  z-index: 5;
}

/* Breadcrumbs */
.course-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 50px;
}
.course-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}
.course-breadcrumbs a:hover {
  color: var(--brand-cyan);
}
.course-breadcrumbs .divider {
  color: rgba(255, 255, 255, 0.2);
}
.course-breadcrumbs .current-course {
  color: var(--brand-cyan);
}

/* Grid Layout — perfect 50/50 split */
.course-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Typography */
.mb-4 {
  margin-bottom: 2rem;
}
.frost-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(10px);
}

.course-title {
  font-size: clamp(3.5rem, 4.8vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 1.5rem;
}
.text-gradient-cyan {
  background: linear-gradient(135deg, #fff 0%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.course-description {
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 500;
  max-width: 600px;
  margin-bottom: 40px;
}

/* CTAs */
.course-cta-group {
  display: flex;
  align-items: center;
  gap: 20px;
}
.btn-liquid-cyan {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-cyan);
  color: var(--brand-dark);
  padding: 18px 40px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.09rem;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(6, 182, 212, 0.3);
  transition: all 0.3s;
}
.btn-liquid-cyan:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(6, 182, 212, 0.5);
}
.btn-liquid-purple {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-purple);
  color: #fff;
  padding: 18px 40px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(91, 33, 182, 0.2);
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}
.btn-liquid-purple:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(91, 33, 182, 0.4);
}
/* Purchase Now (WhatsApp) CTA — same shape as .btn-liquid-purple, green fill */
.btn-liquid-green {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #fff;
  padding: 18px 40px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.25);
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}
.btn-liquid-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.45);
}
.btn-glass-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 18px 40px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: all 0.3s;
}
.btn-glass-outline:hover {
  background: #fff;
  color: var(--brand-dark);
}

/* ============================================================
   VITAL FEATURE CARD (VFC) — Premium Bento Dashboard
   ============================================================ */
.course-vital-wrapper {
  display: flex;
  align-self: stretch;
}

.vital-glass-card {
  flex: 1;
  background: rgba(120, 112, 137, 0.345);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: 32px 28px 26px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.07),
    0 30px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Floating gradient orbs */
.vfc-accent {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
  animation: vfcFloat 12s ease-in-out infinite alternate;
}
.vfc-accent-1 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14), transparent 70%);
  top: -50px;
  right: -30px;
}
.vfc-accent-2 {
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.12),
    transparent 70%
  );
  bottom: 10px;
  left: -40px;
  animation-delay: -6s;
}
@keyframes vfcFloat {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(10px, -15px) scale(1.08);
  }
}

/* Moving light sweep */
.vfc-light-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.025) 50%,
    transparent 100%
  );
  transform: skewX(-12deg) translateX(-200%);
  animation: vfcSweep 9s ease-in-out infinite 1.5s;
  pointer-events: none;
  z-index: 0;
}
@keyframes vfcSweep {
  0%,
  100% {
    transform: skewX(-12deg) translateX(-200%);
  }
  50% {
    transform: skewX(-12deg) translateX(400%);
  }
}

/* --- Header --- */
.vfc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.vfc-header-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vfc-eyebrow {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-cyan);
  text-transform: uppercase;
  letter-spacing: 3px;
}
.vfc-headline {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  margin: 0;
}
.vfc-live-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(71, 71, 71, 0.46);
  border: 1px solid rgba(16, 185, 129, 0.22);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vfc-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  animation: vfcPulse 1.8s ease-in-out infinite;
}
@keyframes vfcPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

/* --- Stat Chips --- */
.vfc-stats {
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.vfc-stat-chip {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
  cursor: default;
}
.vfc-stat-chip:hover {
  border-color: rgba(6, 182, 212, 0.22);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.vfc-stat-value {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--brand-magenta);
  line-height: 1;
  letter-spacing: -0.5px;
}
.vfc-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Card Grid Wrapper (stacked slides) --- */
.vfc-grid-wrap {
  position: relative;
  z-index: 2;
  display: grid; /* all slides at [1,1] — stack them */
}
.vfc-slide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: scale(0.97) translateY(6px);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.vfc-slide.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* 2×2 Grid */
.vfc-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Individual feature cards */
.vfc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s,
    box-shadow 0.3s;
}
/* inner gradient glow on hover */
.vfc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(
    circle at 30% 10%,
    rgba(6, 182, 212, 0.09) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
/* gradient border ring on hover */
.vfc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.35) 0%,
    rgba(167, 139, 250, 0.25) 50%,
    transparent 100%
  );
  -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;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.vfc-card:hover {
  transform: translateY(-5px);
  border-color: rgba(6, 182, 212, 0.2);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(6, 182, 212, 0.1),
    inset 0 0 16px rgba(6, 182, 212, 0.03);
}
.vfc-card:hover::before {
  opacity: 1;
}
.vfc-card:hover::after {
  opacity: 1;
}

/* Card Icon */
.vfc-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--brand-cyan);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s,
    box-shadow 0.3s;
}
.vfc-card:hover .vfc-card-icon-wrap {
  transform: scale(1.12) rotate(7deg);
  background: rgba(6, 182, 212, 0.18);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.vfc-card-title {
  font-size: 1.24rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  margin: 0;
  position: relative;
  z-index: 1;
}
.vfc-card-sub {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--brand-cyan);
  margin: 0;
  position: relative;
  z-index: 1;
  opacity: 0.85;
}

/* --- Footer: progress bar + dots --- */
.vfc-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.vfc-progress-track {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
}
.vfc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-cyan), #a78bfa);
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.vfc-progress-fill.vfc-animating {
  animation: vfcProgress 4s linear forwards;
}
.vfc-progress-fill.vfc-paused {
  animation-play-state: paused;
}
@keyframes vfcProgress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.vfc-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  align-items: center;
}
.vfc-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vfc-dot.active {
  background: var(--brand-cyan);
  width: 24px;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.vfc-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.38);
}

/* ============================================================
   RESPONSIVE — Hero + VFC Bento
   ============================================================ */

/* Tablet / small desktop: stack to single column */
@media (max-width: 1024px) {
  .course-hero-content{
    margin-top:10px;
  }
  .course-hero-section {
    padding: 90px 0 70px;
  }
  .course-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .course-vital-wrapper {
    align-self: auto;
  }
  .course-bg-overlay {
    background: linear-gradient(
      to top,
      rgba(10, 5, 20, 1) 0%,
      rgba(10, 5, 20, 0.8) 60%,
      rgba(10, 5, 20, 0.4) 100%
    );
  }
  .course-title {
    font-size: 3.5rem;
  }
  .course-cta-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .course-cta-group a {
    flex: 1;
    min-width: 160px;
    justify-content: center;
  }
  .vital-glass-card {
    padding: 28px 24px 22px;
  }
}

/* Large mobile: font + spacing reductions */
@media (max-width: 768px) {
  .course-hero-section {
    padding: 100px 0 56px;
  }
  .course-title {
    font-size: 2.6rem;
    letter-spacing: -0.5px;
  }
  .course-description {
    font-size: 1.05rem;
    max-width: 100%;
    margin-bottom: 28px;
  }
  .frost-pill-dark {
    font-size: 0.82rem;
    padding: 7px 16px;
  }
  .course-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 380px;
  }
  .course-cta-group a {
    width: 100%;
    min-width: unset;
    padding: 15px 28px;
    font-size: 0.95rem;
  }
  .vfc-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .vfc-live-badge {
    align-self: flex-start;
  }
  .vfc-stats {
    gap: 8px;
  }
  .vfc-stat-chip {
    padding: 12px 10px;
  }
  .vfc-stat-value {
    font-size: 1.1rem;
  }
  .vfc-card {
    padding: 16px 14px;
  }
  .vfc-card-icon-wrap {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }
  .vfc-card-title {
    font-size: 0.76rem;
  }
}

/* Small mobile: compact layout */
@media (max-width: 480px) {
  .course-hero-section {
    padding: 95px 0 44px;
  }
  .course-title {
    font-size: 2rem;
    letter-spacing: -0.3px;
  }
  .course-description {
    font-size: 0.97rem;
  }
  .vital-glass-card {
    padding: 22px 16px 18px;
    gap: 16px;
  }
  .vfc-headline {
    font-size: 0.9rem;
  }
  .vfc-card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  } /* single col on tiny screens */
  .vfc-card {
    padding: 14px 12px;
    gap: 9px;
  }
  .vfc-card-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .vfc-stat-label {
    font-size: 0.55rem;
  }
  .btn-liquid-cyan,
  .btn-glass-outline {
    padding: 14px 22px;
    font-size: 0.9rem;
  }
}

.theme-blend-zone {
  position: relative;
  z-index: 20;
  padding: 200px 0 100px 0;
  margin-top: -150px;
  /* Crucial: Pulls the zone UP to cover the canvas edge */

  /* The Flawless Blend: 
        Transparent at top to show 3D DNA.
        Solid brand-dark exactly at 150px (where canvas ends) to hide the line.
        Fades to bg-light smoothly after.
    */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgb(255, 255, 255) 150px,
    rgba(248, 250, 252, 0) 80%
  );
  pointer-events: none;
  /* Let clicks pass through the gradient */
}

/* --- FOMO Psychology --- */
.vital-footer.g-course-reveal {
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.3);
  position: relative;
  overflow: hidden;
}
.vital-footer.g-course-reveal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
  animation: scanline 2s linear infinite;
}
@keyframes scanline {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.fomo-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fca5a5;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed rgba(239, 68, 68, 0.2);
}
.text-orange-500 {
  color: #f97316;
  animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.seats-left-badge {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1px solid rgba(239, 68, 68, 0.5);
}
.pulse-red {
  animation: pulseRed 2s infinite;
}
@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.urgency-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  align-items: center;
}
.text-danger {
  color: #f87171 !important;
}
.countdown-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}
.p-fill-critical {
  background: linear-gradient(90deg, #f59e0b, #ef4444) !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

/* =========================================
   2. COURSE VIDEO (MASTERCLASS PORTAL)
   ========================================= */
.course-video-section {
  position: relative;
  padding: 80px 0;
  z-index: 10;
  overflow: hidden;
}

.video-header {
  margin-bottom: 30px;
}
.video-title {
  font-size: clamp(2.9rem, 4vw, 4rem);
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

/* --- Cinematic Player Wrapper --- */
.video-master-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9; /* Perfect YouTube Ratio */
  border-radius: 30px;
  cursor: pointer;
}

/* Ambient Glow behind the video */
.video-glow-bg {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan));
  filter: blur(60px);
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.video-master-wrapper:hover .video-glow-bg {
  opacity: 0.5;
}

.video-player-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  background: #000; /* Black background for when iframe loads */
}

/* Custom Thumbnail */
.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.video-master-wrapper:hover .video-thumbnail {
  transform: scale(1.05);
}

.video-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(10, 5, 20, 0.2) 0%,
    rgba(10, 5, 20, 0.7) 100%
  );
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.video-master-wrapper:hover .video-overlay-gradient {
  opacity: 0.8;
}

/* Floating UI Badges */
.video-ui-badge {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge-top-left {
  top: 30px;
  left: 30px;
}
.badge-bottom-right {
  bottom: 30px;
  right: 30px;
}

/* The Glass Play Button */
.glass-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  padding-left: 6px; /* Offsets the play triangle perfectly to the center */
}
.video-master-wrapper:hover .glass-play-btn {
  background: var(--brand-cyan);
  border-color: var(--brand-cyan);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 15px 30px rgba(6, 182, 212, 0.4);
}

.play-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: pulsePlay 2s infinite;
  pointer-events: none;
}
@keyframes pulsePlay {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* The actual iframe once loaded */
.youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 20;
  opacity: 0;
  animation: fadeInIframe 0.5s forwards;
}
@keyframes fadeInIframe {
  to {
    opacity: 1;
  }
}

/* --- Takeaways Grid Below Video --- */
.video-takeaways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 60px auto 0 auto;
}

.takeaway-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.takeaway-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.takeaway-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(91, 33, 182, 0.05);
  color: var(--brand-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.takeaway-card h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 10px;
}
.takeaway-card p {
  font-size: 0.95rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  font-weight: 500;
  margin: 0;
}

.g-vid-reveal {
  visibility: hidden;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
  .video-master-wrapper {
    border-radius: 20px;
  }
  .video-player-inner {
    border-radius: 20px;
  }
  .glass-play-btn {
    width: 70px;
    height: 70px;
    font-size: 1.5rem;
  }
  .video-ui-badge {
    display: none; /* Hide floating UI on small screens */
  }
  .video-takeaways-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }
}

/* =========================================
   3. CURRICULUM (SYLLABUS MATRIX)
   ========================================= */
.curriculum-premium-section {
  position: relative;
  padding: 150px 0;
  z-index: 10;
  overflow: hidden;
}

/* Subtle Blueprint Grid Background */
@keyframes panGrid {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 50px 50px;
  }
}
.curriculum-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 0%,
    transparent 80%
  );
  animation: panGrid 4s linear infinite;
}

.curriculum-header {
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
}
.curriculum-title {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  color: var(--text-light-theme);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

/* --- Interactive Phase Filter --- */
.phase-filter-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
}

.phase-filter-track {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  padding: 8px;
  gap: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.phase-btn {
  background: transparent;
  border: none;
  color: var(--text-muted-light);
  padding: 12px 30px;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-main);
}
.phase-num {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  opacity: 0.5;
}

/* Active State for Filter Button */
.phase-btn.active {
  background: var(--brand-purple);
  color: #fff;
  box-shadow: 0 10px 20px rgba(91, 33, 182, 0.2);
}
.phase-btn.active .phase-num {
  color: #fff;
  opacity: 1;
}
.phase-btn:hover:not(.active) {
  color: var(--brand-dark);
}

/* --- Syllabus Matrix Grid --- */
.syllabus-matrix-wrapper {
  position: relative;
  z-index: 5;
  min-height: 400px;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

/* The Module Glass Cards */
.module-glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 24px;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 280px;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  cursor: default;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* Base Hover Elevate */
.module-glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Vercel-Style Dynamic Mouse Glow (Inner Spotlight) */
.module-glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    800px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(6, 182, 212, 0.15),
    transparent 40%
  );
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Vercel-Style Dynamic Border (Outer Glow Overlay) */
.module-glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    400px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(6, 182, 212, 0.5),
    transparent 40%
  );
  -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;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.matrix-grid:hover .module-glass-card::before,
.matrix-grid:hover .module-glass-card::after {
  opacity: 1;
}

.module-glow-border {
  display: none;
}

.module-watermark {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 5rem;
  font-weight: 900;
  color: #ae25cd1c;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.03);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  transition: -webkit-text-stroke 0.4s ease;
}
.module-glass-card:hover .module-watermark {
  -webkit-text-stroke: 1px rgba(6, 182, 212, 0.2);
}

/* Visible Default Content */
.module-visible-content {
  position: relative;
  z-index: 5;
  transition: opacity 0.4s ease;
}

/* HUD Tech Accent */
.module-visible-content::before {
  content: "SYS_READY // M_DAT";
  position: absolute;
  top: -35px;
  right: 0;
  font-size: 0.65rem;
  color: var(--text-muted-light);
  letter-spacing: 2px;
  font-family: monospace;
  opacity: 0.3;
  pointer-events: none;
}

.module-hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 182, 212, 0.08);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-purple);
  margin-bottom: 20px;
  border-left: 3px solid var(--brand-cyan);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.module-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-light-theme);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}
.module-desc {
  font-size: 0.95rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* =========================================
   4. SUCCESS STORIES / VIDEO TESTIMONIALS
   ========================================= */
.testimonials-section {
  position: relative;
  padding: 120px 0;
  background: #fff;
  overflow: hidden;
  z-index: 10;
}

.testimonials-mesh-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.testimonials-title {
  font-size: clamp(2.6rem, 4vw, 4.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--text-light-theme);
  margin: 0;
}

.testimonials-subtitle {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--text-muted-light);
  font-size: 1.08rem;
  line-height: 1.7;
}

.testimonials-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 28px;
  align-items: start;
  position: relative;
  z-index: 2;
}

.testi-featured {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 28px;
  overflow: hidden;
  /* box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08); */
}

.testi-featured-thumb {
  position: relative;
  aspect-ratio: 11 / 7;
  overflow: hidden;
  background: #0f0f0f;
}

.testi-featured-thumb img,
.testi-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.testi-featured-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testi-featured:hover .testi-featured-overlay,
.testi-playlist-item:hover .testi-item-play {
  opacity: 1;
}

/* Scoped to the #testiPlayBtn id (not the bare .testi-play-btn class): an
   unrelated "SUCCESS STORIES HUB" component further down this file reuses
   the same .testi-play-btn / .testi-play-sm class names for a dark glass
   button, and a later same-specificity class rule was overriding this
   button's color to white. The id selector's higher specificity keeps this
   button red regardless of source order, without touching that unrelated
   component. */
#testiPlayBtn.testi-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border: none;
    border-radius: 50%;
    background: #ff0000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(255, 0, 0, .38);
    transition: .3s ease;
    z-index: 10;
    padding: 0;
}

#testiPlayBtn.testi-play-btn i {
    font-size: 2rem;
    line-height: 1;
    margin: 0;
    transform: translateX(2px); /* optical centering for play icon */
}

#testiPlayBtn.testi-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 20px 48px rgba(255, 0, 0, .46);
}
.testi-play-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: testiPulse 2.1s infinite;
}

@keyframes testiPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.testi-info-float {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

.testi-avatar-ring {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-purple));
}

.testi-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #fff;
}

.testi-info-text {
  min-width: 0;
}

.testi-info-name {
  font-size: 1.03rem;
  font-weight: 800;
  color: var(--text-light-theme);
  line-height: 1.25;
}

.testi-info-sub {
  margin-top: 4px;
  color: var(--text-muted-light);
  font-size: 0.9rem;
  line-height: 1.4;
}

.testi-info-badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(91, 33, 182, 0.08);
  color: var(--brand-purple);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.testi-featured-quote {
  margin: 0;
  padding: 24px 28px 30px;
  color: var(--text-light-theme);
}

.testi-quote-icon {
  color: rgba(91, 33, 182, 0.35);
  font-size: 1.4rem;
  display: block;
  margin-bottom: 10px;
}

.testi-featured-quote p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--text-light-theme);
}

.testi-playlist {
  display: grid;
  gap: 14px;
}

.testi-playlist-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05); */
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  color: inherit;
}

.testi-playlist-item.active {

  border-color: rgba(139, 92, 246, 0.25);
  transform: translateY(-4px);

  /* box-shadow: 0 18px 42px rgba(91, 33, 182, 0.1); */
  transform: translateY(-2px);
}

.testi-playlist-item:hover {
  border-color: rgba(139, 92, 246, 0.25);
  transform: translateY(-4px);
  background-color:rgba(138, 92, 246, 0.078);
}


.testi-item-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 18px;
  background: #0f0f0f;
}

.testi-item-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testi-play-sm {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1rem;
  background: #ff0000;
  box-shadow: 0 10px 24px rgba(255, 0, 0, 0.32);
  opacity: 1;
}

.testi-item-info {
  min-width: 0;
}

.testi-item-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-light-theme);
  line-height: 1.25;
}

.testi-item-role {
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-muted-light);
  font-size: 0.88rem;
  line-height: 1.45;
}

.testi-item-role i {
  color: var(--brand-cyan);
  margin-top: 2px;
  flex-shrink: 0;
}

.testi-item-excerpt {
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--text-muted-light);
  line-height: 1.55;
}

.testi-item-number {
  align-self: flex-start;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 900;
  color: rgba(91, 33, 182, 0.18);
}

@media (max-width: 1024px) {
  .testimonials-section {
    padding: 96px 0;
  }

  .testimonials-layout {
    grid-template-columns: 1fr;
  }

  .testi-playlist-item {
    grid-template-columns: 132px minmax(0, 1fr) auto;
  }
}

@media (max-width: 720px) {
  .testimonials-section {
    padding: 40px 0;
  }

  .testimonials-header {
    margin-bottom: 30px;
  }

  .testimonials-title {
    font-size: clamp(2.05rem, 8vw, 2.8rem);
  }

  .testimonials-subtitle {
    font-size: 0.98rem;
  }

  .testi-featured-quote {
    padding: 20px 18px 24px;
  }

  .testi-featured-quote p {
    font-size: 0.96rem;
  }

  .testi-info-float {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 12px;
    gap: 10px;
  }

  .testi-avatar-ring {
    width: 48px;
    height: 48px;
  }

  .testi-info-badge {
    display: none;
  }

  .testi-playlist-item {
    grid-template-columns: 1fr;
  }

  .testi-item-number {
    align-self: center;
    justify-self: end;
    margin-top: 4px;
  }
}

/* ---- Right playlist: scrollable viewport (~5 cards), light theme ---- */
.testimonials-section .testi-playlist-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}

.testimonials-section .testi-playlist {
  max-height: 425px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-right: 8px;
  /* Breathing room so hover/active translateY + box-shadow on the first and
     last cards aren't clipped by this scroll container's own edges. */
  padding-top: 10px;
  padding-bottom: 10px;
  align-content: start;
  grid-auto-rows: minmax(120px, auto);
  /* Native scrollbar hidden — the .testi-scroll-indicator thumb below is
     the single visible scroll cue. Wheel/trackpad/touch scrolling still works. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonials-section .testi-playlist::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

/* Thin scroll indicator on the right edge of the playlist */
.testimonials-section .testi-scroll-indicator {
  position: absolute;
  right: 0;
  top: 12px;
  bottom: 38px;
  width: 0px;
  pointer-events: none;
  display: block;
}

.testimonials-section .testi-scroll-indicator .track {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 4px;
}

.testimonials-section .testi-scroll-indicator .thumb {
  position: absolute;
  left: 1px;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-purple));
  border-radius: 3px;
  transform-origin: top left;
}

/* ---- Pagination dots (light theme) ---- */
.testimonials-section .testi-dots {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y to an implicit "auto" clip box too
     (CSS overflow spec) — equal padding keeps the scaled .active dot inside it. */
  padding: 6px 4px 6px 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonials-section .testi-dots::-webkit-scrollbar {
  display: none;
}

.testimonials-section .testi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(91, 33, 182, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
  flex-shrink: 0;
}

.testimonials-section .testi-dot.active {
  background: var(--brand-purple);
  transform: scale(1.2);
}

/* ---- Mobile: hide the right playlist entirely, keep featured card + dots ---- */
@media (max-width: 767px) {
  .testimonials-section .testi-playlist {
    display: none !important;
    max-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .testimonials-section .testi-scroll-indicator {
    display: none !important;
  }

  .testimonials-section .testi-playlist-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .testimonials-section .testi-dots {
    display: flex !important;
    width: 100%;
    justify-content: center;
  }
}

/* Hidden Details (Slides up like a terminal on hover) */
.module-hidden-topics {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 40px 30px;
  z-index: 20;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.module-glass-card:hover .module-hidden-topics {
  transform: translateY(0);
  opacity: 1;
}

.module-hidden-topics h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brand-purple);
  margin-bottom: 15px;
}
.module-hidden-topics ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.module-hidden-topics li {
  font-size: 0.95rem;
  color: var(--text-muted-light);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
  font-weight: 600;
}
.module-hidden-topics i {
  color: var(--brand-cyan);
  font-size: 0.8rem;
  margin-top: 4px;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
  .phase-filter-track {
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    border-radius: 100px;
    padding: 6px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .phase-filter-track::-webkit-scrollbar {
    display: none;
  }

  .phase-btn {
    justify-content: center;
    width: auto;
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  /* On mobile, hover is tricky, so we partially show the topics or remove the aggressive slide-up */
  .module-hidden-topics {
    position: relative;
    transform: translateY(0);
    opacity: 1;
    height: auto;
    background: transparent;
    padding: 20px 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
    display: none; /* Hide by default on mobile to save space */
  }

  /* Add a "tap to expand" class via JS for mobile, or just let it scroll */
  .module-glass-card.is-open .module-hidden-topics {
    display: flex;
  }
}

/* =========================================
   4. DURATION & SCHEDULE (CHRONOLOGY DASHBOARD)
   ========================================= */
.duration-light-section {
  position: relative;
  padding: 150px 0;
  z-index: 10;
  overflow: hidden;
}

.duration-bg-text {
  position: absolute;
  top: 10%;
  right: -5%;
  font-size: 20vw;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px rgba(15, 23, 42, 0.03);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  transform: rotate(90deg);
  transform-origin: right top;
}

.duration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
  position: relative;
  z-index: 5;
}

/* --- Left Sticky Zone --- */
.duration-sticky-left {
  position: sticky;
  top: 150px;
}

.massive-time-block {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 30px;
}

@keyframes massiveGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.huge-number {
  font-size: clamp(8rem, 15vw, 15rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -5px;
  background: linear-gradient(
    135deg,
    var(--brand-purple),
    var(--brand-cyan),
    var(--brand-magenta)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: massiveGradientFlow 5s ease infinite;
  text-shadow: 0 30px 60px rgba(91, 33, 182, 0.2);
}

.time-text-stack {
  display: flex;
  flex-direction: column;
}
.time-text-stack h3 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.time-text-stack p {
  font-size: clamp(1.5rem, 2vw, 2rem);
  margin: 0;
}
.text-italic-purple {
  font-family: var(--font-serif);
  color: var(--brand-purple);
  font-weight: 600;
}

.duration-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  max-width: 450px;
  font-weight: 500;
}

/* --- Right Scrolling Cards --- */
.duration-scroll-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.schedule-glass-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.schedule-glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.schedule-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.bg-cyan-light {
  background: rgba(6, 182, 212, 0.1);
}
.text-cyan {
  color: var(--brand-cyan);
}
.bg-purple-light {
  background: rgba(91, 33, 182, 0.1);
}
.text-purple {
  color: var(--brand-purple);
}
.bg-dark-light {
  background: rgba(15, 23, 42, 0.05);
}
.text-dark {
  color: var(--text-light-theme);
}

.badge-light {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-muted-light);
}

.schedule-glass-card h4 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 15px;
  letter-spacing: -0.5px;
}
.schedule-glass-card p {
  font-size: 1.05rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  margin-bottom: 30px;
  font-weight: 500;
}

.time-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 25px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.time-stat strong {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--brand-dark);
}
.time-stat span {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.g-dur-reveal {
  visibility: hidden;
}

/* --- Mobile Responsive --- */
@media (max-width: 1024px) {
  .duration-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .duration-sticky-left {
    position: relative;
    top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .massive-time-block {
    justify-content: center;
  }
  .huge-number {
    font-size: 10rem;
  }
  .duration-bg-text {
    display: none;
  }
}

/* =========================================
   5. PRICING (HOLOGRAPHIC VAULT)
   ========================================= */
.pricing-premium-section {
  position: relative;
  padding: 150px 0;
  z-index: 10;
  overflow: hidden;
}

/* Ambient Glowing Orbs */
.pricing-ambient-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
}
.glow-left {
  top: 10%;
  left: -20%;
  background: var(--brand-cyan);
}
.glow-right {
  bottom: 10%;
  right: -20%;
  background: var(--brand-purple);
}

.pricing-header {
  margin-bottom: 50px;
  position: relative;
  z-index: 5;
}
.pricing-title {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  color: var(--text-light-theme);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

/* --- The Glass Toggle --- */
.pricing-toggle-wrapper {
  margin-bottom: 80px;
  position: relative;
  z-index: 5;
}
.glass-toggle {
  display: inline-flex;
  position: relative;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  padding: 6px;
  backdrop-filter: blur(10px);
}
.toggle-btn {
  position: relative;
  z-index: 2;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted-light);
  background: transparent;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.4s ease;
  font-family: var(--font-main);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toggle-btn.active {
  color: var(--brand-dark);
}
.discount-badge {
  background: rgba(6, 182, 212, 0.1);
  color: var(--brand-cyan);
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.75rem;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

/* The sliding active pill */
.toggle-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: 50%; /* Adjusts dynamically via JS */
  background: #fff;
  border-radius: 100px;
  z-index: 1;
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.4s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* --- Holographic Vault Cards --- */
.pricing-vault-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  perspective: 1500px;
}

/* The Focus/Blur Effect! */
.pricing-vault-grid:hover .vault-card-wrapper:not(:hover) {
  opacity: 0.4;
  filter: blur(4px);
  transform: scale(0.98);
}

.vault-card-wrapper {
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform-style: preserve-3d;
}

/* Elevate the recommended tier slightly */
.recommended-tier {
  transform: translateY(-20px);
}

.vault-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  padding: 50px 40px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.05),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  transform-style: preserve-3d;
}
.card-cyan {
  border-bottom: 2px solid var(--brand-cyan);
}
.card-purple {
  border-bottom: 2px solid var(--brand-purple);
  background: rgba(91, 33, 182, 0.02);
} /* Slight tint */

.card-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.4) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: overlay;
}
.vault-card-wrapper:hover .card-glare {
  opacity: 1;
}

.recommended-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    135deg,
    var(--brand-purple),
    var(--brand-magenta)
  );
  color: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(192, 38, 211, 0.3);
  z-index: 10;
  white-space: nowrap;
}

/* Card Content */
.tier-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}
.tier-name {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 15px;
}
.tier-price {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--text-light-theme);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 10px;
}
.currency {
  font-size: 2rem;
  color: var(--text-muted-light);
}
.price-suffix {
  font-size: 1.2rem;
  color: var(--text-muted-light);
  font-weight: 600;
}

.original-price {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted-light);
  opacity: 0.6;
}
.original-price span {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.tier-body {
  flex-grow: 1;
  position: relative;
  z-index: 2;
}
.tier-desc {
  font-size: 1.05rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  margin-bottom: 30px;
}

.tier-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}
.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 1rem;
  color: var(--text-light-theme);
  line-height: 1.5;
  font-weight: 500;
}
.tier-features i {
  margin-top: 4px;
  font-size: 1.1rem;
}
.tier-features li.disabled {
  color: var(--text-muted-light);
  opacity: 0.4;
}

.tier-footer {
  position: relative;
  z-index: 2;
}
.w-100 {
  width: 100%;
  justify-content: center;
}

.seats-warning {
  display: block;
  text-align: center;
  margin-top: 15px;
  font-size: 0.85rem;
  color: #f59e0b;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Mobile Adaptations */
@media (max-width: 1024px) {
  .pricing-vault-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .recommended-tier {
    transform: translateY(0);
  }

  /* Disable hover blur on mobile */
  .pricing-vault-grid:hover .vault-card-wrapper:not(:hover) {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .glass-toggle {
    flex-direction: row;
  }
  .toggle-btn {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
}

/* =========================================
   6. FACULTY (INTERACTIVE ROSTER)
   ========================================= */
.faculty-roster-section {
  position: relative;
  padding: 120px 0 150px 0;
  background-color: var(--bg-light);
  z-index: 10;
}

.faculty-header {
  margin-bottom: 60px;
  max-width: 600px;
}
.faculty-title {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.roster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* --- Left: Interactive List --- */
.roster-list-zone {
  display: flex;
  flex-direction: column;
}

.roster-list-item {
  padding: 40px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.4s ease;
}
.roster-list-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.roster-item-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  opacity: 0.6;
  transition: opacity 0.4s;
}
.fac-index {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--brand-dark);
}
.fac-role {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fac-name {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--text-muted-light);
  letter-spacing: -1px;
  transition: color 0.4s ease;
  margin: 0;
}

/* List Hover / Active States */
.roster-list-item:hover,
.roster-list-item.active {
  transform: translateX(20px);
}
.roster-list-item:hover .roster-item-header,
.roster-list-item.active .roster-item-header {
  opacity: 1;
}
.roster-list-item:hover .fac-name,
.roster-list-item.active .fac-name {
  color: var(--brand-dark);
}

/* Colors for Roles */
.text-magenta {
  color: var(--brand-magenta);
}
.text-blue {
  color: #0ea5e9;
}

/* --- Right: Sticky Visual Frame --- */
.roster-visual-zone {
  position: sticky;
  top: 150px;
  height: 70vh;
  min-height: 550px;
}

.visual-sticky-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  background: #fff;
}

/* The Display Cards (Stacked absolutely) */
.roster-display-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.roster-display-card.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 5;
}

.fac-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.05);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.roster-display-card.active .fac-portrait {
  transform: scale(1);
}

/* The Glass Stats Overlay */
.fac-glass-stats {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 1);
  padding: 35px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
}
.roster-display-card.active .fac-glass-stats {
  transform: translateY(0);
  opacity: 1;
}

.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 50px;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.badge-purple {
  background: var(--brand-purple);
}
.badge-cyan {
  background: var(--brand-cyan);
}

.fac-glass-stats p {
  font-size: 1.05rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 25px;
}

.stats-row {
  display: flex;
  gap: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 20px;
}
.stats-row div {
  display: flex;
  flex-direction: column;
}
.stats-row strong {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--brand-dark);
  line-height: 1;
  margin-bottom: 5px;
}
.stats-row span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.g-fac-reveal {
  visibility: hidden;
}

/* --- Mobile Responsive --- */
@media (max-width: 1024px) {
  .roster-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .roster-visual-zone {
    position: relative;
    top: 0;
    height: 500px;
    order: -1; /* Puts image above list on mobile */
  }
  .roster-list-item:hover,
  .roster-list-item.active {
    transform: translateX(10px);
  }
  .fac-glass-stats {
    padding: 25px;
    bottom: 15px;
    left: 15px;
    right: 15px;
  }
}

/* =========================================
   6. FACULTY (MORPHING GRID & SWIPE TRACK)
   ========================================= */
.faculty-morph-section {
  position: relative;
  padding: 120px 0 150px 0;
  z-index: 10;
  overflow: hidden;
}

.faculty-header {
  margin-bottom: 60px;
}
.faculty-title {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.1;
  letter-spacing: -1.5px;
}
.d-none {
  display: none;
}

/* --- The Layout Architecture --- */
.faculty-track-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 100%;
}

/* --- The Morphing Cards --- */
.fac-morph-card {
  position: relative;
  border-radius: 30px;
  aspect-ratio: 3 / 4; /* Perfect portrait ratio */
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  /* For 3D hardware acceleration during transforms */
  transform: translateZ(0);
}

/* The Image Base Layer */
.fac-image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.fac-image-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8);
}
.fac-image-layer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to top,
    rgba(10, 5, 20, 0.9) 0%,
    transparent 100%
  );
}

.fac-name-tag {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  z-index: 2;
  transition: opacity 0.4s ease;
}
.fac-name-tag h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.1;
}
.fac-name-tag span {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The Glass Bio Overlay (Hidden by default) */
.fac-glass-bio {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10;
  /* Starts pushed completely down */
  transform: translateY(101%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bio-content-inner {
  padding: 40px 30px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease 0.1s;
}

.fac-glass-bio h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}
.fac-glass-bio .role {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}
.fac-glass-bio p {
  font-size: 0.95rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 25px;
}

.fac-stats-mini {
  display: flex;
  gap: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 20px;
}
.fac-stats-mini div {
  display: flex;
  flex-direction: column;
}
.fac-stats-mini strong {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--brand-dark);
  line-height: 1;
  margin-bottom: 5px;
}
.fac-stats-mini span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Interaction States --- */
/* Desktop Hover OR Mobile Active Class */
.fac-morph-card:hover .fac-glass-bio,
.fac-morph-card.is-open .fac-glass-bio {
  transform: translateY(0);
}

.fac-morph-card:hover .bio-content-inner,
.fac-morph-card.is-open .bio-content-inner {
  opacity: 1;
  transform: translateY(0);
}

.fac-morph-card:hover .fac-image-layer,
.fac-morph-card.is-open .fac-image-layer {
  transform: scale(0.95);
  opacity: 0.3;
}

.fac-morph-card:hover .fac-name-tag,
.fac-morph-card.is-open .fac-name-tag {
  opacity: 0;
}

.g-fac-reveal {
  visibility: hidden;
}

/* =========================================
   MOBILE RESPONSIVE (THE SWIPE TRACK)
   ========================================= */
@media (max-width: 1024px) {
  /* Convert Grid to a native horizontal scrolling track */
  .faculty-track-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Native smooth snapping */
    gap: 20px;
    padding-bottom: 40px; /* Space for scrollbar/shadows */
    padding-left: 5%;
    padding-right: 5%;
    margin-left: -5%;
    width: 110%; /* Bleeds off edge of screen */
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar for cleaner UI */
    scrollbar-width: none;
  }
  .faculty-track-wrapper::-webkit-scrollbar {
    display: none;
  }

  .fac-morph-card {
    flex: 0 0 85%; /* Each card takes up 85% of screen, showing next one peeking */
    scroll-snap-align: center;
    aspect-ratio: auto;
    height: 500px;
  }

  .mobile-swipe-hint {
    display: inline-block;
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted-light);
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 16px;
    border-radius: 50px;
  }

  .fac-glass-bio {
    transform: translateY(101%); /* Ensure it hides on mobile until tapped */
  }
}

/* =========================================
   5. CINEMATIC VIDEO SECTION
   ========================================= */
.video-luxury-section {
  position: relative;
  padding: 100px 0 150px 0;
  z-index: 10;
}

.text-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.glowing-dot-purple {
  width: 8px;
  height: 8px;
  background: var(--brand-purple);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--brand-purple);
}

.video-ecosystem {
  position: relative;
  z-index: 55;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Main Video Portal */
.main-video-portal {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 7;
  position: relative;
  cursor: none; /* Hide default cursor for custom magnetic one */
  border-radius: 30px;
  overflow: hidden;
  transition:
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.6s ease;
}

.main-video-portal:hover {
  transform: scale(1.02);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(107, 33, 168, 0.3);
  z-index: 60;
}

.video-glass-frame {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.active-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    filter 0.4s ease,
    transform 0.8s ease;
}
.main-video-portal:hover .active-video-bg {
  transform: scale(1.05);
}

.video-glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(7, 3, 14, 0.8) 0%, transparent 60%);
  pointer-events: none;
}

/* Floating Meta Data inside Video */
.active-video-meta {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  pointer-events: none;
  z-index: 2;
}
.vid-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 6px 14px;
  border-radius: 50px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}
.active-video-meta h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.1;
}
.active-video-meta p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* Custom Magnetic Play Cursor */
.magnetic-play-cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition:
    opacity 0.3s,
    transform 0.1s linear; /* Smooth trailing */
}
.main-video-portal:hover .magnetic-play-cursor {
  opacity: 1;
}

.play-triangle {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid #fff;
  margin-left: 6px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

/* Overlapping Playlist Track Viewport */
.playlist-viewport {
  width: min(
    1380px,
    100%
  ); /* Supports exactly 5 260px thumbnails + 4 20px gaps */
  margin: 0 auto;
  margin-top: -60px; /* Overlap main video */
  padding: 30px 0 40px 0; /* Padding to prevent vertical clipping of shadows & scales */
  margin-bottom: -40px; /* Offset padding */
  overflow: hidden;
  position: relative;
  z-index: 5;
  /* Fade mask on the outer edges to blend perfectly into background */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.playlist-track {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  width: max-content;
}

.playlist-card {
  width: 260px;
  height: 160px;
  position: relative;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(76, 18, 126, 0.1);

  /* Inactive curved effect base style */
  opacity: 0.5;
  transform: translateY(20px) scale(0.85); /* Shrank and depressed */
  transform-origin: center bottom;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.playlist-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s;
  pointer-events: none;
}
.playlist-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(107, 33, 168, 0.4);
  transition: background 0.4s;
  pointer-events: none;
}

.play-icon-sm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  z-index: 2;
  transition: all 0.3s;
  pointer-events: none;
}

/* Active & Hover States for Curved Playlist */
.playlist-card:hover {
  opacity: 0.8;
  transform: translateY(10px) scale(0.9);
}
/* .playlist-card:hover img { opacity: 1; } */
/* .playlist-card:hover .play-icon-sm { background: #fff; color: var(--brand-purple); } */

.playlist-card.active {
  border-color: var(--brand-purple);
  opacity: 1;
  transform: translateY(-5px) scale(1.05); /* Blooms up into center */
  box-shadow: 0 10px 20px rgba(107, 33, 168, 0.3);
  z-index: 10;
}
.playlist-card.active::after {
  background: transparent;
}
.playlist-card.active img {
  opacity: 1;
}
.playlist-card.active .play-icon-sm {
  opacity: 0;
} /* Hide play icon if it's currently playing */

/* YouTube Premium Integrations */
.yt-badge {
  background: rgba(255, 0, 0, 0.1) !important;
  border-color: rgba(255, 0, 0, 0.3) !important;
  color: #ff4e4e !important;
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.15);
  text-decoration: none;
  transition: all 0.3s;
}
.yt-badge:hover {
  background: #ff0000 !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
}
.vid-stats {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 10px;
  font-weight: 600;
}
.playlist-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 10;
  backdrop-filter: blur(5px);
}

.g-vid-reveal {
  visibility: hidden;
}

.video-luxury-section .section-header {
  position: relative;
  z-index: 60; /* Keeps the heading brightly lit above the cinematic overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yt-category-tabs {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.yt-tab {
  padding: 10px 24px;
  border-radius: 50px;
  background: rgb(91 33 182 / 30%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.yt-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #000000;
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 20px rgba(91, 33, 182, 0.3);
}

.yt-tab.active {
  background: var(--brand-purple);
  color: #fff;
  border-color: var(--brand-purple);
  box-shadow: 0 10px 20px rgba(91, 33, 182, 0.3);
}

@media (max-width: 768px) {
  .yt-category-tabs {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .yt-tab {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .video-luxury-section {
    padding: 0px 0 50px 0;
  }
}

@media (max-width: 1024px) {
  .main-video-portal {
    aspect-ratio: 16 / 9;
  }

  .playlist-viewport {
    width: 100%;
    margin-top: -40px;
    mask-image: linear-gradient(
      to right,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
  }

  .playlist-card {
    width: 220px; /* Slightly smaller for tablets */
    height: 140px;
  }

  .magnetic-play-cursor {
    display: none;
  } /* Standard cursor on mobile */
  .main-video-portal {
    cursor: pointer;
  }
  .active-video-meta {
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  .active-video-meta h3 {
    font-size: 1.4rem;
  }
}

@media (max-width: 768px) {
  .playlist-viewport {
    margin-top: -30px;
    padding-bottom: 20px;
  }

  .playlist-card {
    width: 150px; /* Fits 3 cards nicely on most mobile screens */
    height: 100px;
    border-radius: 12px;
  }

  .playlist-duration {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .play-icon-sm {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  .active-video-meta h3 {
    font-size: 1.2rem;
  }
  .active-video-meta p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .playlist-card {
    width: 110px; /* Ensures 3 cards are visible on tiny phones */
    height: 85px; /* Proportional height */
  }
}

/* =========================================
   5. FACULTY SECTION (INFINITE DRAG)
   ========================================= */
.faculty-filmstrip-section {
  position: relative;
  padding: 120px 0;
  color: #000000;
  z-index: 10;
  overflow: hidden;
}

.faculty-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}
.glowing-dot-gold {
  width: 8px;
  height: 8px;
  background: #d4af37;
  border-radius: 50%;
  box-shadow: 0 0 15px #d4af37;
}
.faculty-header h2 {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.scroll-instruction {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}

/* The Physics Drag Track */
.filmstrip-track-wrapper {
  width: 100vw;
  position: relative;
  cursor: grab; /* Shows the user they can grab it */
  overflow: hidden; /* Hides everything outside */
  padding: 20px 0;
}
.filmstrip-track-wrapper:active {
  cursor: grabbing;
}

.filmstrip-track {
  display: flex;
  width: max-content; /* Allows it to grow infinitely */
  gap: 30px;
  padding-left: 5vw; /* Initial offset */
}

/* The Faculty Cards */
.faculty-card {
  width: 350px;
  height: 500px;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  user-select: none; /* Crucial for clean dragging */
}

.fac-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%) brightness(0.7);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none; /* Stops the browser from dragging the image file */
}

/* Perfectly Hidden Details Panel */
.fac-glass-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    to top,
    rgba(5, 2, 10, 0.95) 0%,
    rgba(5, 2, 10, 0.5) 80%,
    transparent 100%
  );
  padding: 60px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(0);
  transition: background 0.5s;
}

.fac-visible-header {
  position: relative;
  z-index: 2;
}
.fac-badge {
  display: inline-block;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4af37;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.fac-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0;
}

/* Hidden state initialized via CSS Grid for buttery smooth 60fps height interpolation */
.fac-hidden-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.6s ease;
}
.fac-hidden-inner {
  overflow: hidden;
}
.fac-role {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  color: #d4af37;
  margin-top: 10px;
  margin-bottom: 5px;
}
.fac-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Focus / Hover / Mobile Active Reveals Everything Perfectly */
.faculty-card:hover,
.faculty-card:active,
.faculty-card.mobile-active {
  transform: scale(1);
}
.faculty-card:hover .fac-portrait,
.faculty-card:active .fac-portrait,
.faculty-card.mobile-active .fac-portrait {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.05);
}
.faculty-card:hover .fac-glass-panel,
.faculty-card:active .fac-glass-panel,
.faculty-card.mobile-active .fac-glass-panel {
  background: linear-gradient(
    to top,
    rgba(5, 2, 10, 0.98) 0%,
    rgba(5, 2, 10, 0.85) 70%,
    transparent 100%
  );
}

/* Expanding the details container smoothly */
.faculty-card:hover .fac-hidden-details,
.faculty-card:active .fac-hidden-details,
.faculty-card.mobile-active .fac-hidden-details {
  grid-template-rows: 1fr;
  opacity: 1;
}

@media (max-width: 1024px) {
  .faculty-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .faculty-card {
    width: 300px;
    height: 420px;
  }
  .fac-name {
    font-size: 1.5rem;
  }
}

/* =========================================
   6. PLACEMENT HIGHLIGHTS (LIGHT THEME)
   ========================================= */
.placement-light-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  z-index: 10;
}

.placement-header {
  margin-bottom: 40px;
}
.frost-pill-light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(76, 18, 126, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.placement-header h2 {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--brand-dark);
  line-height: 1.1;
}

.faculty-banner-wrapper {
  width: 100%;
  margin: 0 auto;
}
.faculty-banner-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.faculty-banner-mobile {
  display: none;
}
.faculty-banner-desktop {
  display: block;
}
@media (max-width: 768px) {
  .faculty-banner-mobile {
    display: block;
  }
  .faculty-banner-desktop {
    display: none;
  }
}
.fac-banner-cta {
  margin-top: 32px;
}

/* --- Infinite Typographic River (Light Silver) --- */
.marquee-wrapper {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-3deg) scale(1.05);
}

.marquee-track {
  display: flex;
  width: max-content;
}
.marquee-text {
  display: flex;
  white-space: nowrap;
}

.marquee-text span {
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 900;
  letter-spacing: 2px;
  color: transparent;
  /* Soft silver hollow text for white backgrounds */
  -webkit-text-stroke: 2px rgba(15, 23, 42, 0.04);
  padding-right: 30px;
}

.track-right .marquee-text {
  animation: scrollRight 40s linear infinite;
}
.track-left .marquee-text {
  animation: scrollLeft 40s linear infinite;
}
@keyframes scrollRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes scrollLeft {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* --- 3D Prismatic Alumni Cards --- */
.alumni-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 5;
  margin-top: 80px;
  padding-bottom: 10px;
  perspective: 1500px; /* Base perspective for 3D */
}

.alumni-card-wrapper {
  /* Wrapper handles parallax. It does NOT rotate. This prevents hover jitter. */
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Cycling Animation States */
.alumni-card-wrapper.cycling-out {
  opacity: 0;
  transform: translateY(-30px) scale(0.95);
  pointer-events: none;
}
.alumni-card-wrapper.cycling-in {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  pointer-events: none;
}
.alumni-card-wrapper:nth-child(2) {
  margin-top: 100px;
}

.prismatic-card {
  position: relative;
  width: 100%;
  /* Frosted Glass Simulation — replaces backdrop-filter: blur(30px) */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(245, 240, 255, 0.88) 100%
  );
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 24px;
  padding: 25px;
  box-shadow:
    0 20px 50px rgba(76, 18, 126, 0.05),
    inset 0 0 20px rgba(255, 255, 255, 0.8);
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}
/* Simulated frosted texture layer */
.prismatic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(245, 240, 255, 0.4) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

/* Prismatic Glare Effect (Optimized for Light Backgrounds) */
.card-glare-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.9) 0%,
    rgba(6, 182, 212, 0.15) 30%,
    rgba(192, 38, 211, 0.1) 60%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: overlay;
}
.alumni-card-wrapper:hover .card-glare-light {
  opacity: 1;
}
.alumni-card-wrapper:hover .prismatic-card {
  box-shadow:
    0 30px 60px rgba(76, 18, 126, 0.12),
    inset 0 0 30px rgba(255, 255, 255, 1);
}

/* Card Internal Content (Pops out in 3D) */
.card-content-3d {
  position: relative;
  z-index: 1;
  transform: translateZ(30px);
  pointer-events: none;
}

.alumni-img-box {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.alumni-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(10%);
  transition:
    filter 0.3s,
    transform 0.5s;
}
.alumni-card-wrapper:hover .alumni-img-box img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.rank-badge {
  position: absolute;
  top: 15px;
  /* background: linear-gradient(135deg, var(--brand-purple), var(--brand-cyan)); */
  color: var(--brand-cyan);
  font-size: 1rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 50px;
  text-align: left;
  /* box-shadow: 0 10px 20px rgba(91, 33, 182, 0.3); */
}

.alumni-text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px 25px 20px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
}
.alumni-text-overlay h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}
.alumni-text-overlay .exam-name {
  font-size: 0.95rem;
  color: var(--brand-cyan);
  font-weight: 700;
  margin-bottom: 0;
}

/* ── Description: absolute glass-panel overlay on the image ── */
.alumni-info {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 25px;
  z-index: 5;
  border-radius: 0 0 12px 12px;
  padding: 60px 16px 16px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5, 2, 10, 0.92) 40%,
    rgba(5, 2, 10, 0.97) 100%
  );
  clip-path: inset(100% 0 0 0 round 0 0 12px 12px);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path 0.55s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.45s ease;
}
.alumni-card-wrapper:hover .alumni-info {
  clip-path: inset(0% 0 0 0 round 0 0 12px 12px);
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .alumni-info {
    clip-path: inset(0% 0 0 0 round 0 0 12px 12px);
    opacity: 1;
    pointer-events: auto;
  }
}

.alumni-info h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.exam-name {
  font-size: 0.95rem;
  color: var(--brand-cyan);
  font-weight: 700;
  margin-bottom: 10px;
}

/* Icon removed — keep rule so existing HTML span is hidden */
.dest-icon {
  display: none;
}

.placement-dest {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  display: block;
}

/* Qualification list */
.fac-desc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fac-desc-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}
.fac-desc-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-cyan);
  margin-top: 5px;
  box-shadow: 0 0 5px rgba(6, 182, 212, 0.5);
}

.placement-dest strong {
  color: #ffffff;
  font-weight: 800;
  display: block;
}

/* ── Faculty batch dots + Meet All Mentors CTA ── */
.fac-dots-section {
  text-align: center;
  padding: 6px 0 10px;
}

.fac-batch-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-bottom: 30px;
}

.fac-batch-dot {
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background: rgba(91, 33, 182, 0.18);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fac-batch-dot.fac-batch-dot-active {
  width: 26px;
  background: var(--brand-cyan);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.45);
}

.btn-meet-mentors {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  background: linear-gradient(
    135deg,
    var(--brand-purple),
    var(--brand-magenta)
  );
  color: #fff;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-main);
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.btn-meet-mentors:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(91, 33, 182, 0.28);
}

.btn-dark-magnetic {
  display: inline-block;
  background: var(--brand-purple);
  color: #fff;
  padding: 18px 40px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background 0.3s,
    box-shadow 0.3s;
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.2);
}
.btn-dark-magnetic:hover {
  background: var(--brand-purple);
  box-shadow: 0 15px 30px rgba(91, 33, 182, 0.3);
}

.g-place-reveal {
  visibility: hidden;
}

@media (max-width: 1024px) {
  .alumni-showcase-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 50px;
    perspective: none;
  }
  .marquee-wrapper {
    top: 8%;
    opacity: 0.4;
  }
  .marquee-text span {
    font-size: 4rem;
  }
  /* Disable 3D tilt translations on mobile for flat, clean reading */
  .card-content-3d {
    transform: none;
  }
}

@media (max-width: 768px) {
  .placement-light-section {
    padding: 0px;
  }

  .alumni-card-wrapper:nth-child(2) {
    margin-top: 10px;
  }
}

/* =========================================
   7. TESTIMONIALS (ISOLATED SEAMLESS MARQUEE)
   ========================================= */
.testimonials-premium-section {
  position: relative;
  padding: 100px 0 160px 0;
  overflow: hidden;
  z-index: 10;
}

.test-header {
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
}
.test-header h2 {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--brand-dark);
  line-height: 1.1;
}

/* --- Isolated Marquee Architecture --- */
.test-marquee-master-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Movement is fully JS-driven for drag compatibility */
.test-marquee-container {
  width: 100vw;
  overflow: hidden;
  display: flex;
  margin-left: calc(-50vw + 50%);
  cursor: grab;
  user-select: none;
}
.test-marquee-container:active {
  cursor: grabbing;
}

/* Fading Edges */
.test-marquee-container::before,
.test-marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10vw;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.test-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-light) 0%, transparent 100%);
}
.test-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-light) 0%, transparent 100%);
}

.test-marquee-track {
  display: flex;
  width: max-content;
}

.test-marquee-group {
  display: flex;
  gap: 30px;
  padding-right: 30px;
  flex-shrink: 0;
}

/* --- Fixed Card Design --- */
.test-card {
  width: 420px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.test-card-header {
  display: flex;
  align-items: center;
  gap: 20px;
}
.test-card-header img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.test-card-header h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 5px;
}

.test-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 50px;
  color: #fff;
  display: inline-block;
}
.badge-blue {
  background: #0ea5e9;
}
.badge-cyan {
  background: #06b6d4;
}
.badge-purple {
  background: #8b5cf6;
}

.test-stars {
  color: #f59e0b;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.test-quote {
  font-size: 1.05rem;
  color: var(--brand-dark);
  opacity: 0.8;
  line-height: 1.6;
  font-weight: 500;
  font-style: italic;
}

@media (max-width: 1024px) {
  .test-card {
    width: 320px;
    padding: 25px;
  }
  .test-marquee-container::before,
  .test-marquee-container::after {
    width: 5vw;
  }
  .test-card-header h4 {
    font-size: 1.1rem;
  }
}

/* FAQ spacing overrides for course landing pages */
.faq-elite-section {
  padding: 150px 0;
}
.faq-header {
  margin-bottom: 80px;
}
.faq-footer {
  margin-top: 80px;
}

/* =========================================
   7. CTA & FORM (APPLICATION TERMINAL)
   ========================================= */
.cta-terminal-section {
  position: relative;
  padding: 40px 0px 200px 0px;
  z-index: 1;
  overflow: hidden;
}

@media (max-width: 768px) {
  .cta-terminal-section {
    padding: 40px 0px 48px 0px;
  }
  .faq-elite-section {
  padding: 50px 0;
}
}
/* Ambient Mesh Background */
.cta-mesh-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.mesh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  animation: orbFloat 20s infinite alternate ease-in-out;
}
.orb-1 {
  width: 50vw;
  height: 50vw;
  background: var(--brand-purple);
  top: -20%;
  right: -10%;
}
.orb-2 {
  width: 40vw;
  height: 40vw;
  background: var(--brand-cyan);
  bottom: -20%;
  left: -10%;
  animation-delay: -5s;
  opacity: 0.2;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* --- Left Zone: Narrative --- */
.cta-title {
  font-size: clamp(2.9rem, 4vw, 4.5rem);
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 25px;
}
.cta-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted-light);
  line-height: 1.6;
  max-width: 500px;
  margin-bottom: 50px;
}

.cta-urgency-box {
  display: flex;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.urgency-stat {
  display: flex;
  align-items: center;
  gap: 15px;
}
.urgency-stat i {
  font-size: 2rem;
  color: var(--brand-cyan);
}
.urgency-stat div {
  display: flex;
  flex-direction: column;
}
.urgency-stat strong {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--brand-dark);
  line-height: 1;
  margin-bottom: 5px;
}
.urgency-stat span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.text-magenta {
  color: var(--brand-magenta) !important;
}

/* --- Right Zone: Glass Form Terminal --- */
.cta-form-zone {
  perspective: 1500px;
}

.glass-terminal-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  padding: 50px;
  position: relative;
  box-shadow:
    0 30px 60px rgba(100, 100, 150, 0.08),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

.terminal-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.4) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: overlay;
}
.glass-terminal-card:hover .terminal-glare {
  opacity: 1;
}

.terminal-header {
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.terminal-header h3 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 10px;
  letter-spacing: -1px;
}
.terminal-header p {
  font-size: 0.95rem;
  color: var(--text-muted-light);
}

/* Premium Form Styling */
.premium-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.input-group {
  position: relative;
  width: 100%;
}

/* The inputs */
.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  padding: 15px 0 10px 0;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--brand-dark);
  font-family: var(--font-main);
  outline: none;
  z-index: 2;
  position: relative;
}
.input-group textarea {
  resize: vertical;
  min-height: 60px;
}

/* Floating Labels */
.input-group label {
  position: absolute;
  top: 15px;
  left: 0;
  font-size: 1.1rem;
  color: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* When input is focused, OR has text in it (valid) */
.input-group input:focus ~ label,
.input-group input:valid ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:valid ~ label {
  top: -10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-purple);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Glowing Bottom Line */
.input-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  z-index: 1;
}
.input-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background: var(--brand-purple);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}
.input-group input:focus ~ .input-line::after,
.input-group select:focus ~ .input-line::after,
.input-group textarea:focus ~ .input-line::after {
  width: 100%;
}

/* Custom Select styling */
.select-group select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
}
.select-group select:valid {
  color: var(--brand-dark);
}
.select-group select option {
  background: #fff;
  color: var(--brand-dark);
}
.custom-select-icon {
  position: absolute;
  right: 0;
  top: 20px;
  color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.form-secure-note {
  text-align: center;
  margin-top: 15px;
  font-size: 0.8rem;
  color: var(--text-muted-light);
}
.form-secure-note i {
  color: #10b981;
  margin-right: 5px;
}

.g-cta-reveal {
  visibility: hidden;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }
  .cta-subtitle {
    margin: 0 auto 40px auto;
  }
  .cta-urgency-box {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    border-top: none;
    padding-top: 0;
  }
  .input-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .glass-terminal-card {
    padding: 40px 25px;
  }
}

/* =============================================
   GLOBAL MOBILE POLISH — Section Padding &
   Typography Reductions
   ============================================= */
@media (max-width: 768px) {
  /* Cut heavy section paddings in half */
  .curriculum-premium-section,
  .duration-light-section,
  .pricing-premium-section {
    padding: 80px 0;
  }

  .video-luxury-section {
    padding: 60px 0 80px;
  }
  .course-video-section {
    padding: 60px 0;
  }

  /* Curriculum filter: wrap to 2×2 pill grid */
  .phase-filter-track {
    flex-wrap: wrap;
    border-radius: 20px;
  }
  .phase-btn {
    font-size: 0.85rem;
    padding: 10px 18px;
  }

  /* Duration big number */
  .huge-number {
    font-size: 8rem;
  }

  /* Pricing toggle */
  .pricing-toggle-wrapper {
    margin-bottom: 48px;
  }

  /* CTA enroll */
  .cta-urgency-box {
    flex-direction: column;
    gap: 28px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  /* Extreme padding cuts */
  .curriculum-premium-section,
  .duration-light-section,
  .pricing-premium-section {
    padding: 60px 0;
  }

  .video-luxury-section {
    padding: 48px 0 60px;
  }
  .course-video-section {
    padding: 48px 0;
  }

  /* Curriculum */
  .curriculum-header {
    margin-bottom: 36px;
  }
  .phase-filter-wrapper {
    margin-bottom: 36px;
  }
  .matrix-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .module-glass-card {
    padding: 28px 22px;
    min-height: auto;
  }

  /* Duration */
  .huge-number {
    font-size: 6rem;
    letter-spacing: -4px;
  }

  /* Glass terminal (enroll form) */
  .glass-terminal-card {
    padding: 28px 18px;
  }
  .input-group label {
    font-size: 0.78rem;
  }
  .input-group input,
  .input-group select,
  .input-group textarea {
    padding: 12px 14px;
    font-size: 0.88rem;
  }

  /* Playlist / video carousel */
  .playlist-card {
    width: 110px;
  }

  /* Sticky bottom nav safe area */
  body.has-sticky-nav {
    padding-bottom: 68px;
  }
}

/* ======================================================================================
   exam-landing.css — Exam-specific section styles (extends courses-landing.css language)
   ====================================================================================== */
/* =============================================
   EXAM LANDING PAGE — Premium Section Styles
   Extends courses-landing.css design language
   ============================================= */

/* --- STICKY ICON NAVIGATION --- */

@keyframes esn-enter {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes esn-enter-mobile {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes esn-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.55);
    opacity: 0;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@keyframes esn-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.exam-sticky-nav {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  padding: 10px 8px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  opacity: 0;
  animation: esn-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.exam-sticky-nav.is-hidden,
.exam-sticky-nav.esn-scrolled-down {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(-50%) translateX(-20px);
}

/* Track */
.esn-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Item wrapper */
.esn-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Icon button */
.esn-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #94a3b8;
  font-size: 0.9rem;
  overflow: hidden;
  transition:
    background 0.32s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.32s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.32s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.32s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  will-change: transform, background;
}

.esn-btn:hover {
  color: var(--brand-cyan, #06b6d4);
  background: rgba(6, 182, 212, 0.07);
}

.esn-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.28);
}

.esn-btn.active {
  background: linear-gradient(135deg, var(--brand-cyan, #06b6d4), #0891b2);
  color: #fff;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.38);
  transform: scale(1.08);
}

/* Pulse ring */
.esn-pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 2px solid var(--brand-cyan, #06b6d4);
  opacity: 0;
  pointer-events: none;
}

.esn-btn.active .esn-pulse-ring {
  animation: esn-pulse 2.2s ease-out infinite;
}

/* Ripple */
.esn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.28);
  transform: scale(0);
  animation: esn-ripple 0.55s ease-out forwards;
  pointer-events: none;
  width: 32px;
  height: 32px;
  left: 4px;
  top: 4px;
}

/* Tooltip — slides in from left, appears to the right */
.esn-tooltip {
  position: absolute;
  left: calc(100% + 13px);
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  background: #0f172a;
  color: #fff;
  font-size: 0.71rem;
  font-weight: 600;
  font-family: var(--font-main, sans-serif);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 10;
}

.esn-item:hover .esn-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Tooltip left-pointing arrow */
.esn-arr {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #0f172a;
}

/* ── MOBILE: floating bottom bar ── */
@media (max-width: 1024px) {
  .exam-sticky-nav {
    left: 50%;
    top: auto;
    bottom: 20px;
    transform: translateX(-50%);
    border-radius: 22px;
    padding: 8px 10px;
    animation: esn-enter-mobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s
      forwards;
  }

  .exam-sticky-nav.is-hidden,
  .exam-sticky-nav.esn-scrolled-down {
    transform: translateX(-50%) translateY(20px) !important;
  }

  .esn-track {
    flex-direction: row;
    gap: 2px;
  }

  .esn-btn {
    width: 46px;
    height: 46px;
    font-size: 0.95rem;
  }
  .esn-btn.active {
    transform: scale(1.1);
  }

  /* Tooltip floats above on mobile */
  .esn-tooltip {
    left: 50%;
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
  }
  .esn-item:hover .esn-tooltip,
  .esn-item.esn-tapped .esn-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Arrow points down on mobile */
  .esn-arr {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #0f172a;
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .exam-sticky-nav {
    bottom: 14px;
    padding: 7px 8px;
    border-radius: 20px;
  }
  .esn-btn {
    width: 40px;
    height: 40px;
    font-size: 0.82rem;
  }
  .esn-track {
    gap: 0;
  }
}

/* --- EXAM SNAPSHOT SECTION --- */
.exam-snapshot-section {
  position: relative;
  z-index: 10;
  padding: 100px 0 80px;
 
  background:
    linear-gradient(
       115% 130% at -15% -20%,
      rgba(178, 230, 241, 0.765) 0%,
      rgba(93, 209, 230, 0.52) 24%,
      rgba(176, 217, 224, 0.623) 44%,
      rgba(249, 249, 249, 0.799) 60%,
      rgba(249, 249, 249, 0.779) 74%,
      transparent 88%
    ),
    #f5f6f6;
}

.snapshot-card {
  background: rgba(255, 255, 255, 0.6);
 
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 28px 24px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.snapshot-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-purple));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.snapshot-card:hover::before {
  opacity: 1;
}

.snapshot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.snapshot-card .snap-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 16px;
  background: rgba(6, 182, 212, 0.1);
  color: var(--brand-cyan);
}

.snapshot-card .snap-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.snapshot-card .snap-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.snapshot-card .snap-value a {
  color: var(--brand-cyan);
  text-decoration: none;
  font-weight: 600;
}

/* --- ABOUT EXAM SECTION (Video Carousel + Content) --- */
.about-exam-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
  overflow: hidden;
}

/* Ambient blobs */
.aev-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aev-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.07;
}

.aev-blob-1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(
    circle,
    var(--brand-cyan, #06b6d4),
    transparent 70%
  );
  top: -120px;
  left: -100px;
}

.aev-blob-2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(
    circle,
    var(--brand-purple, #a78bfa),
    transparent 70%
  );
  bottom: -80px;
  right: -60px;
}

/* 60/40 grid */
.aev-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 52px;
  margin-top: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── LEFT COLUMN: Carousel ── */
.aev-carousel-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: rgba(255, 255, 255, 0);
}

.aev-carousel {
  position: relative;
  user-select: none;
  background-color: rgba(255, 255, 255, 0);
}

/* Radial glow behind active card */
.aev-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 220px;
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
  z-index: 0;
}

/* Track viewport — overflow:hidden creates the peek effect */
.aev-track-wrap {
  overflow: hidden;
  padding: 14px 0 20px;
  cursor: grab;
  position: relative;
  z-index: 1;
  background-color: #ffffff00;
}

.aev-track-wrap:active {
  cursor: grabbing;
}

.aev-track {
  display: flex;
  gap: 16px;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Video Cards */
.aev-card {
  flex: none;
  width: 88%;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  /* background: #ffffff; */
  border: 1px solid rgba(255, 255, 255, 0.07);
  /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); */
  transform: scale(0.9);
  opacity: 0.42;
  transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.5s ease,
    box-shadow 0.4s ease;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.aev-card.aev-active {
  transform: scale(1);
  opacity: 1;
  border-color: rgba(6, 182, 212, 0.18);
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.1),
    0 20px 50px rgba(0, 0, 0, 0.45);
}

.aev-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.aev-card.aev-active:hover .aev-thumb {
  transform: scale(1.04);
}

.aev-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(4, 2, 14, 0.88) 0%,
    rgba(4, 2, 14, 0.35) 42%,
    transparent 70%
  );
}

/* Play button */
.aev-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.aev-card.aev-active .aev-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.aev-card.aev-active:hover .aev-play {
  background: rgba(220, 40, 40, 0.82);
  border-color: transparent;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Tag badge */
.aev-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 9px;
  background: rgba(6, 182, 212, 0.82);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 5px;
  font-family: var(--font-main);
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

/* Card caption */
.aev-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px 14px;
}

.aev-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Navigation arrows */
.aev-nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 4, 18, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10;
}

.aev-nav:hover {
  background: rgba(6, 182, 212, 0.16);
  border-color: rgba(6, 182, 212, 0.38);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.aev-nav-prev {
  left: 6px;
}
.aev-nav-next {
  right: 6px;
}

/* Pagination dots */
.aev-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding-top: 2px;
}

.aev-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.aev-dot.aev-dot-active {
  background: var(--brand-cyan, #06b6d4);
  width: 22px;
  border-radius: 4px;
}

/* YouTube channel link */
.aev-yt-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-main);
  text-decoration: none;
  transition: all 0.25s ease;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.aev-yt-link .fa-youtube {
  color: #ff2020;
  font-size: 1rem;
}
.aev-yt-link .fa-up-right-from-square {
  font-size: 0.65rem;
  opacity: 0.4;
}

.aev-yt-link:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ── RIGHT COLUMN: Content ── */
.aev-content-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.aev-heading {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  margin: 0;
}

.aev-desc {
  font-size: 1.1rem;
  line-height: 1.76;
  color: #64748b;
  margin: 0;
}

/* Feature badges */
.aev-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aev-badge {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.055);
  border-radius: 13px;
  transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.aev-badge:hover {
  background: #fff;
  border-color: rgba(6, 182, 212, 0.22);
  transform: translateX(5px);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.1);
}

.aev-badge-ic {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-cyan, #06b6d4);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.aev-badge:hover .aev-badge-ic {
  transform: scale(1.1);
}

.aev-badge > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aev-badge > div:last-child strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  display: block;
  text-align: start;
}

.aev-badge > div:last-child span {
  font-size: 0.85rem;
  color: #94a3b8;
}

/* Animated stat counters */
.aev-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.aev-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  justify-content: center;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.055);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.aev-stat:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.18);
}

.aev-stat-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--brand-cyan, #06b6d4);
  line-height: 1;
  font-family: var(--font-main);
  display: block;
}

.aev-stat-lbl {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* ── Preserved: course about section highlights ── */
.about-highlights {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.about-highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 23px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #334155;
}

.about-highlight-item i {
  color: var(--brand-cyan);
  font-size: 1.35rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .aev-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .aev-carousel-col {
    order: 1;
  }
  .aev-content-col {
    order: 2;
  }
  .aev-heading {
    font-size: 1.5rem;
  }
}

@media (max-width: 640px) {
  .aev-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .aev-stat-num {
    font-size: 1.2rem;
  }
  .aev-card {
    width: 85%;
  }
  .aev-nav {
    top: 42%;
  }
}

/* --- ELIGIBILITY CRITERIA SECTION --- */
.eligibility-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.eligibility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.elig-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.elig-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(6, 182, 212, 0.2);
}

.elig-card .elig-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.3rem;
}
.elig-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.elig-card:nth-child(1) .elig-icon {
  background: rgba(6, 182, 212, 0.1);
  color: var(--brand-cyan);
}
.elig-card:nth-child(2) .elig-icon {
  background: rgba(91, 33, 182, 0.1);
  color: var(--brand-purple);
}
.elig-card:nth-child(3) .elig-icon {
  background: rgba(192, 38, 211, 0.1);
  color: var(--brand-magenta);
}
.elig-card:nth-child(4) .elig-icon {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}
.elig-card:nth-child(5) .elig-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.elig-card:nth-child(6) .elig-icon {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.elig-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.elig-card p {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .eligibility-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .eligibility-grid {
    grid-template-columns: 1fr;
  }
}

/* --- ELIGIBILITY CHECKER --- */
.elig-checker-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.elig-checker-card {
  max-width: 700px;
  margin: 40px auto 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.elig-checker-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.elig-checker-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.elig-checker-card label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.elig-checker-card select,
.elig-checker-card input {
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 1rem;
  font-family: var(--font-main);
  background: rgba(255, 255, 255, 0.8);
  color: #0f172a;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  outline: none;
}

.elig-checker-card select:focus,
.elig-checker-card input:focus {
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.btn-check-elig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 32px;
  margin-top: 24px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-check-elig:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.elig-result {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 16px;
  display: none;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  animation: fadeSlideUp 0.4s ease forwards;
}

.elig-result.show {
  display: flex;
  align-items: flex-start;
}

/* SUCCESS STATE — JS adds class "eligible" */
.elig-result.eligible {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.13) 0%,
    rgba(5, 150, 105, 0.07) 100%
  );
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  box-shadow:
    0 4px 24px rgba(16, 185, 129, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* WARNING STATE */
.elig-result.warning {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.13) 0%,
    rgba(217, 119, 6, 0.07) 100%
  );
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  box-shadow:
    0 4px 24px rgba(245, 158, 11, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ERROR STATE */
.elig-result.error {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.13) 0%,
    rgba(220, 38, 38, 0.07) 100%
  );
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  box-shadow:
    0 4px 24px rgba(239, 68, 68, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ICON — styled badge per state */
.elig-result > i {
  font-size: 1.45rem;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.elig-result.eligible > i {
  color: #059669;
  background: rgba(16, 185, 129, 0.18);
}
.elig-result.warning > i {
  color: #d97706;
  background: rgba(245, 158, 11, 0.18);
}
.elig-result.error > i {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.18);
}

/* BODY */
.elig-result-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* TITLE — state-aware */
.elig-result.eligible .elig-result-body strong {
  color: #065f46;
  font-size: 1.1rem;
  font-weight: 700;
}
.elig-result.warning .elig-result-body strong {
  color: #78350f;
  font-size: 1.1rem;
  font-weight: 700;
}
.elig-result.error .elig-result-body strong {
  color: #991b1b;
  font-size: 1.1rem;
  font-weight: 700;
}

/* DESCRIPTION — state-aware */
.elig-result-body p {
  font-size: 0.92rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.88;
}
.elig-result.eligible .elig-result-body p {
  color: #047857;
}
.elig-result.warning .elig-result-body p {
  color: #92400e;
}
.elig-result.error .elig-result-body p {
  color: #b91c1c;
}

/* Result summary table */
.elig-summary-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 0.82rem;
}
.elig-summary-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.elig-summary-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  opacity: 0.6;
}
.elig-result.eligible .elig-summary-label {
  color: #065f46;
}
.elig-result.warning .elig-summary-label {
  color: #92400e;
}
.elig-result.error .elig-summary-label {
  color: #991b1b;
}

.elig-summary-value {
  font-weight: 600;
}
.elig-result.eligible .elig-summary-value {
  color: #047857;
}
.elig-result.warning .elig-summary-value {
  color: #b45309;
}
.elig-result.error .elig-summary-value {
  color: #b91c1c;
}

/* Conditional field hidden state */
.ec-hidden {
  display: none !important;
}

/* Result confidence disclaimer */
.elig-confidence {
  font-size: 0.86rem;
  font-weight: 400;
  font-style: italic;
  opacity: 0.6;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.5;
  color: #475569;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .elig-checker-card {
    padding: 32px 20px;
  }
  .elig-checker-card .form-row {
    grid-template-columns: 1fr;
  }
}

/* --- AGE RELAXATION SECTION --- */
.age-relax-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.age-relax-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.age-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

.age-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 4px 0 0 4px;
}

.age-card:nth-child(1)::before {
  background: var(--brand-cyan);
}
.age-card:nth-child(2)::before {
  background: var(--brand-purple);
}
.age-card:nth-child(3)::before {
  background: var(--brand-magenta);
}
.age-card:nth-child(4)::before {
  background: #ea580c;
}
.age-card:nth-child(5)::before {
  background: #10b981;
}
.age-card:nth-child(6)::before {
  background: #6366f1;
}

.age-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
}

.age-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.age-card .age-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--brand-cyan);
}

.age-card .age-detail {
  font-size: 1.1rem;
  color: #64748b;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .age-relax-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .age-relax-grid {
    grid-template-columns: 1fr;
  }
}

/* --- OFFICIAL SYLLABUS SECTION --- */
.syllabus-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.syllabus-search-bar {
  max-width: 500px;
  margin: 32px auto 0;
  position: relative;
}

.syllabus-search-bar input {
  width: 100%;
  padding: 16px 20px 16px 48px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  font-size: 0.95rem;
  font-family: var(--font-main);
  color: #0f172a;
  outline: none;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.syllabus-search-bar input:focus {
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.syllabus-search-bar i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
}

/* =============================================
   SYLLABUS TAB EXPLORER
   ============================================= */

/* --- Track (pill container) --- */
.syllabus-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 40px auto 0;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 12px;
  background: rgba(91, 33, 182, 0.06);
  border: 1px solid rgba(91, 33, 182, 0.12);
  border-radius: 50px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Native scrollbar is fully hidden — the floating progress indicator
     below the tab row (.syl-scroll-progress) replaces it entirely. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.syllabus-tabs-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.syllabus-tabs-nav.is-overflowing {
  justify-content: flex-start;
  /* Edge fade masks: hint that more tabs exist off-screen instead of a scrollbar. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}

/* --- Floating scroll progress indicator ---
   A small centered pill below the tab row, standing in for the browser
   scrollbar. Its width/position (set inline by JS) reflect how much of the
   tab strip is visible and how far the user has scrolled through it. */
.syl-scroll-progress {
  display: flex;
  justify-content: center;
  height: 4px;
  margin: 10px auto 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.syl-scroll-progress.is-visible {
  opacity: 1;
  /* Only the track/thumb re-enable pointer-events (below); the rest of the
     row stays click-through so it never blocks anything underneath it. */
}

.syl-scroll-progress-track {
  position: relative;
  display: block;
  width: 160px;
  height: 4px;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.08);
}

.syl-scroll-progress.is-visible .syl-scroll-progress-track {
  pointer-events: auto;
}

.syl-scroll-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
  box-shadow:
    0 0 8px rgba(139, 92, 246, 0.55),
    0 1px 3px rgba(109, 40, 217, 0.35);
  transition:
    transform 0.2s ease-out,
    width 0.25s ease;
  cursor: grab;
}

/* Larger invisible hit area so the 4px-tall thumb is easy to grab with a
   mouse, without changing its visible size. */
.syl-scroll-progress-thumb::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  right: 0;
}

.syl-scroll-progress.is-dragging .syl-scroll-progress-thumb {
  cursor: grabbing;
  transition: none;
}

.syllabus-tabs-nav.syl-scroll-no-smooth {
  scroll-behavior: auto;
}

/* --- Individual tab button --- */
.syl-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 15px;
  background: transparent;
  border: none;
  border-radius: 45px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #64748b;
  font-family: var(--font-main);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;
  z-index: 1;
}

/* Remove the old ::after underline approach */
.syl-tab::after {
  display: none;
}

.syl-tab:hover {
  color: var(--brand-purple);
  background: rgba(91, 33, 182, 0.06);
}

/* --- Active tab: floating card inside the track --- */
.syl-tab.active {
  background: var(--brand-purple);
  color: white;
  box-shadow:
    0 2px 12px rgba(91, 33, 182, 0.16),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

/* --- Icon chip --- */
.syl-tab-icon {
  width: 34px;
  height: 34px;
  border-radius: 40px;
  /* background: rgba(91, 33, 182, 0.08); */
  color: var(--brand-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Each subject gets its own icon colour */
#syl-tab-awareness .syl-tab-icon,
#syl-tab-aptitude .syl-tab-icon,
#syl-tab-nursing .syl-tab-icon,
#syl-tab-stages .syl-tab-icon,
#syl-tab-pattern .syl-tab-icon,
#syl-tab-subjects .syl-tab-icon,
#syl-tab-marking .syl-tab-icon,
#syl-tab-arithmetic .syl-tab-icon,
#syl-tab-reasoning .syl-tab-icon,
#syl-tab-science .syl-tab-icon,
#syl-tab-basic .syl-tab-icon,
#syl-tab-core .syl-tab-icon,
#syl-tab-clinical .syl-tab-icon,
#syl-tab-admin .syl-tab-icon,
#syl-tab-physics .syl-tab-icon,
#syl-tab-chemistry .syl-tab-icon,
#syl-tab-botany .syl-tab-icon,
#syl-tab-zoology .syl-tab-icon,
#syl-tab-maths .syl-tab-icon {
  background: rgba(191, 38, 211, 0);
  color: var(--brand-magenta);
}

/* When active, icon becomes solid-filled */

#syl-tab-aptitude.active .syl-tab-icon,
#syl-tab-nursing.active .syl-tab-icon,
#syl-tab-awareness.active .syl-tab-icon,
#syl-tab-stages.active .syl-tab-icon,
#syl-tab-pattern.active .syl-tab-icon,
#syl-tab-subjects.active .syl-tab-icon,
#syl-tab-marking.active .syl-tab-icon,
#syl-tab-arithmetic.active .syl-tab-icon,
#syl-tab-reasoning.active .syl-tab-icon,
#syl-tab-science.active .syl-tab-icon,
#syl-tab-basic.active .syl-tab-icon,
#syl-tab-core.active .syl-tab-icon,
#syl-tab-clinical.active .syl-tab-icon,
#syl-tab-admin.active .syl-tab-icon,
#syl-tab-physics.active .syl-tab-icon,
#syl-tab-chemistry.active .syl-tab-icon,
#syl-tab-botany.active .syl-tab-icon,
#syl-tab-zoology.active .syl-tab-icon,
#syl-tab-maths.active .syl-tab-icon {
  background: var(--brand-purple);
  color: #fff;
}

/* Active icon color for all icon formats used inside syllabus tabs only */
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon,
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon i,
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon svg,
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon svg *,
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon [class^="fa"],
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon [class*=" fa-"],
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon [class^="bi"],
.syllabus-tabs-nav .syl-tab.active .syl-tab-icon [class*=" bi-"],
.syllabus-tabs-nav .syl-tab.active svg,
.syllabus-tabs-nav .syl-tab.active svg *,
.syllabus-tabs-nav .syl-tab.active i,
.syllabus-tabs-nav .syl-tab.active [class^="fa"],
.syllabus-tabs-nav .syl-tab.active [class*=" fa-"],
.syllabus-tabs-nav .syl-tab.active [class^="bi"],
.syllabus-tabs-nav .syl-tab.active [class*=" bi-"] {
  color: #fff;
  fill: currentColor;
  stroke: currentColor;
}

/* Active tab text colours to match */
#syl-tab-awareness.active,
#syl-tab-aptitude.active,
#syl-tab-nursing.active,
#syl-tab-stages.active,
#syl-tab-pattern.active,
#syl-tab-subjects.active,
#syl-tab-marking.active,
#syl-tab-arithmetic.active,
#syl-tab-reasoning.active,
#syl-tab-science.active,
#syl-tab-basic.active,
#syl-tab-core.active,
#syl-tab-clinical.active,
#syl-tab-admin.active,
#syl-tab-physics.active,
#syl-tab-chemistry.active,
#syl-tab-botany.active,
#syl-tab-zoology.active,
#syl-tab-maths.active #syl-tab-bpl.active #syl-tab-other.active {
  color: white;
}

/* --- Panel container --- */
.syllabus-tab-panels {
  position: relative;
  margin-top: 20px;
}

.syl-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.syl-panel.active {
  display: block;
}

.syl-panel.entering {
  animation: sylPanelIn 0.38s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes sylPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Panel card --- */
.syl-panel-inner {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(91, 33, 182, 0.08);
  border-top: 3px solid var(--brand-cyan);
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.05);
}

/* Coloured accent bar at top of each panel */
#syl-panel-awareness .syl-panel-inner {
  border-top: 3px solid var(--brand-cyan);
}
#syl-panel-aptitude .syl-panel-inner {
  border-top: 3px solid var(--brand-purple);
}
#syl-panel-nursing .syl-panel-inner {
  border-top: 3px solid var(--brand-magenta);
}
#syl-panel-foundations .syl-panel-inner {
  border-top: 3px solid var(--brand-cyan);
}
#syl-panel-core .syl-panel-inner {
  border-top: 3px solid var(--brand-purple);
}
#syl-panel-clinical .syl-panel-inner {
  border-top: 3px solid var(--brand-magenta);
}
#syl-panel-admin .syl-panel-inner {
  border-top: 3px solid var(--brand-cyan);
}

/* Lists grid inside the panel */
.syl-panel-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1px;
  padding: 32px 36px;
}

.syl-panel-lists.syl-panel-accordion {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.syl-panel-lists.syl-panel-accordion > div {
  padding: 0;
  border: 0;
}

.syl-panel-static-item {
  grid-column: 1 / -1;
}

.syl-accordion-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.syl-accordion-item {
  /* background: rgba(255, 255, 255, 0.82); */
  border-bottom: 1px solid rgba(91, 33, 182, 0.1);
  /* border-radius: 18px; */
  overflow: hidden;
  /* box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04); */
  margin-bottom: -5px;
}

.syl-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  border: 0;
  background: transparent;
  color: #475569;
  font-family: var(--font-main);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.syl-accordion-trigger:hover {
  color: var(--brand-purple);
}

.syl-accordion-heading {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.syl-accordion-title {
  min-width: 0;
}

.syl-accordion-chevron {
  color: black;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.syl-accordion-trigger:hover .syl-accordion-chevron {
  color: var(--brand-purple);
}

.syl-accordion-item.is-open .syl-accordion-chevron {
  transform: rotate(180deg);
}

.syl-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.2s ease;
}

.syl-accordion-item.is-open .syl-accordion-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.syl-accordion-panel-inner {
  overflow: hidden;
  padding: 0 20px 18px;
}

.syl-accordion-panel-inner-static {
  padding: 0;
}

.syl-accordion-panel-inner .syllabus-list + .syl-sub-heading {
  margin-top: 18px;
}

.syl-panel-inner .syllabus-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.syl-panel-inner .syllabus-list li {
  padding: 14px 0;
  font-size: 1.125rem;
  color: #64748b;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
  cursor: default;
}

.syl-panel-inner .syllabus-list li:hover {
  color: #64748b;
  padding-left: 4px;
}

.syl-panel-inner .syllabus-list li:last-child {
  border-bottom: none;
}

.syl-panel-inner .syllabus-list li i {
  color: var(--brand-cyan);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

/* Colour the chevron to match the active panel */
#syl-panel-awareness .syllabus-list li i {
  color: var(--brand-cyan);
}
#syl-panel-aptitude .syllabus-list li i {
  color: var(--brand-purple);
}
#syl-panel-nursing .syllabus-list li i {
  color: var(--brand-magenta);
}

/* Vertical separator between the two columns */
.syl-panel-lists .syllabus-list:first-child {
  padding-right: 32px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.syl-panel-lists .syllabus-list:last-child {
  padding-left: 32px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .syllabus-tabs-nav {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    padding: 10px;
    border-radius: 36px;
    box-sizing: border-box;
  }
  /* Shorten the horizontal scroll indicator so it reads as a small
     progress mark instead of a long bar spanning the tab row. */
  .syllabus-tabs-nav::-webkit-scrollbar-thumb {
    width: 44px;
    min-width: 44px;
  }
  .syl-tab {
    padding: 10px 16px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
  .syl-tab-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
  .syl-panel-lists {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .syl-panel-lists.syl-panel-accordion {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .syl-accordion-trigger {
    padding: 16px 16px;
    font-size: 0.96rem;
  }

  .syl-accordion-panel-inner {
    padding: 0 16px 16px;
  }

  .syl-panel-lists .syllabus-list:first-child {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  .syl-panel-lists .syllabus-list:last-child {
    padding-left: 0;
    padding-top: 4px;
  }
}

/* Important note banner below syllabus tab panels */
.syl-important-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 28px 0 0;
  padding: 18px 24px;
  background: rgba(6, 182, 212, 0.07);
  border-left: 4px solid var(--brand-cyan, #06b6d4);
  border-radius: 0 10px 10px 0;
}

.syl-important-note i {
  color: var(--brand-cyan, #06b6d4);
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.syl-important-note p {
  margin: 0;
  color: #334155;
  font-size: 0.97rem;
  line-height: 1.65;
}

/* Sub-heading inside syl-panel (used for table sections) */
.syl-sub-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #475569;
  margin: 0 0 1rem 0;
  padding: 0 36px;
  margin-top: 25px;
}

/* Scrollable table wrapper */
.syl-table-wrap {
  overflow-x: auto;
  padding: 0 36px 32px;
}

/* Data table */
.syl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.25rem;
  color: #475569;
  margin-top: 25px;
}

.syl-table thead tr {
  color: #fff;
}

.syl-table thead th, .syl-table-total td  {
  padding: 14px 20px;
  text-align: left;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: #475569 !important;
  background-color: #06b6d421;

}
.syl-table thead th:first-child {
  border-top-left-radius: 15px;
}
.syl-table thead th:last-child {
  border-top-right-radius: 15px;
}
.syl-table-total td:first-child {
  border-bottom-left-radius: 15px;
}
.syl-table-total td:last-child {
  border-bottom-right-radius: 15px;
}

.syl-table th:first-child,
.syl-table td:first-child {
  border-left: 2px solid rgba(0, 0, 0, 0.06);
}
.syl-table th:last-child,
.syl-table td:last-child {
  border-right: 2px solid rgba(0, 0, 0, 0.06);
}

.syl-table tbody tr {
  transition: background 0.15s ease;
}

.syl-table tbody tr:hover {
    background-color: #06b6d421;
}

.syl-table tbody td {
  padding: 13px 20px;
  vertical-align: middle;
  border-bottom: 1px solid #06b6d421;
}

.syl-table tbody td:first-child {
  font-weight: 500;
  color: #475569;
}

/* Divider for div-wrapped columns (used when lists are inside divs) */
.syl-panel-lists:not(.syl-panel-accordion) > div:first-child {
  padding-right: 32px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.syl-panel-lists:not(.syl-panel-accordion) > div:last-child {
  padding-left: 32px;
}
.syl-panel-lists > div .syl-sub-heading {
  padding: 0 0 0.25rem 0;
}
.syl-panel-lists > div .syl-sub-heading:first-child {
  margin-top: 0;
}



@media (max-width: 768px) {
  .syl-sub-heading {
    padding: 0 20px;
  }
  .syl-table-wrap {
    padding: 0 20px 24px;
  }
  .syl-panel-lists:not(.syl-panel-accordion) > div:first-child {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  .syl-panel-lists:not(.syl-panel-accordion) > div:last-child {
    padding-left: 0;
    padding-top: 4px;
  }
}

.btn-download-syllabus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 36px;
  background: linear-gradient(
    135deg,
    var(--brand-purple),
    var(--brand-magenta)
  );
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-download-syllabus:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(91, 33, 182, 0.25);
}

/* --- HOW TO PREPARE SECTION --- */
.prepare-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.prepare-timeline {
  max-width: 700px;
  margin: 40px auto 0;
  position: relative;
  padding-left: 40px;
}

.prepare-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--brand-cyan),
    var(--brand-purple),
    var(--brand-magenta)
  );
  border-radius: 2px;
}

.prepare-step {
  position: relative;
  margin-bottom: 36px;
  padding: 30px 30px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  /* border: 1px solid rgba(0, 0, 0, 0.05); */
  border-radius: 18px;
  transition: all 0.35s ease;
}

.prepare-step:hover {
  transform: translateX(6px);
  /* box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); */
}

.prepare-step::before {
  content: attr(data-step);
  position: absolute;
  left: -40px;
  top: 28px;
  width: 30px;
  height: 30px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}

.prepare-step h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0;
}

.prepare-step p {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.6;
}

.prepare-step .step-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(6, 182, 212, 0.1);
  color: var(--brand-cyan);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Accordion layout additions (no visual changes to existing styles) --- */

.prepare-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

@media (max-width: 780px) {
  .prepare-step-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .prepare-step {
    margin-bottom: 4px;
  }
}

.prepare-step-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.prepare-chevron {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #94a3b8;
  transition:
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.25s ease,
    color 0.25s ease;
  flex-shrink: 0;
}

.prepare-step.is-open .prepare-chevron {
  transform: rotate(180deg);
  background: rgba(6, 182, 212, 0.1);
  color: var(--brand-cyan);
}

/* Collapsible body — grid trick for true auto-height animation */
.prepare-step-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.prepare-step.is-open .prepare-step-body {
  grid-template-rows: 1fr;
}

.prepare-step-body-inner {
  overflow: hidden;
  min-height: 0;
}

.prepare-step-body-inner p {
  padding-top: 18px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.3s ease 0.1s;
}

.prepare-step.is-open .prepare-step-body-inner p {
  opacity: 1;
  transform: translateY(0);
}

/* --- EXAM PROCESS TIMELINE --- */
.process-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.process-flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 40px;
  overflow-x: auto;
  padding-bottom: 20px;
  scrollbar-width: none;
}

.process-flow::-webkit-scrollbar {
  display: none;
}

.process-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 140px;
  flex-shrink: 0;
  position: relative;
}

.process-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-purple));
  z-index: -1;
}

.process-node .node-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(6, 182, 212, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--brand-cyan);
  margin-bottom: 14px;
  transition: all 0.3s ease;
}

.process-node:hover .node-circle {
  background: var(--brand-cyan);
  color: #fff;
  transform: scale(1.1);
  border-color: var(--brand-cyan);
}

.process-node h5 {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.process-node span {
  font-size: 0.72rem;
  color: #64748b;
}

@media (max-width: 768px) {
  .process-flow {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 30px;
  }
  .process-node {
    flex-direction: row;
    text-align: left;
    min-width: auto;
    gap: 16px;
    margin-bottom: 24px;
  }
  .process-node:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 28px;
    bottom: -24px;
    width: 2px;
    height: 24px;
  }
  .process-node .node-circle {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

/* --- WHY CHOOSE EDUOOZ --- */
.why-eduooz-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}
.why-desc {
  max-width: 600px;
  margin: 16px auto 0;
  color: #475569;
  font-size: 1.125rem;
  font-family: var(--font-main);
}

/* --- DOWNLOAD APP GRID --- */
.dapp-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 60px;
  align-items: center;
  margin-top: 52px;
}

.dapp-image-col {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.06),
    rgba(91, 33, 182, 0.06)
  );
  border-radius: 28px;
  padding: 44px 32px;
}

.dapp-phone {
  max-height: 420px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.12));
}

.dapp-content-col {
  display: flex;
  flex-direction: column;
}

.dapp-heading {
  font-size: 1.88rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 14px;
}

.dapp-desc {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #475569;
  margin: 0 0 26px;
}

.dapp-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

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

.dapp-cta .btn-liquid-cyan,
.dapp-cta .btn-glass-outline {
  padding: 13px 26px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dapp-cta .btn-glass-outline {
  background: transparent;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

.dapp-cta .btn-glass-outline:hover {
  background: transparent;
  background-color: white;
  color: black;
}

@media (max-width: 900px) {
  .dapp-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .dapp-image-col {
    padding: 32px;
  }
  .dapp-phone {
    max-height: 320px;
  }
}

/* --- FACULTY SHOWCASE CAROUSEL --- */
.fac-showcase-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

.fac-section-sub {
  max-width: 600px;
  margin: 14px auto 0;
  color: #64748b;
  font-size: 1.25rem;
  line-height: 1.7;
}

.fac-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.fac-blob-1,
.fac-blob-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
}
.fac-blob-1 {
  width: 520px;
  height: 520px;
  background: var(--brand-cyan, #06b6d4);
  top: -120px;
  left: -140px;
}
.fac-blob-2 {
  width: 440px;
  height: 440px;
  background: var(--brand-purple, #7c3aed);
  bottom: -120px;
  right: -100px;
}

.fac-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- CAROUSEL ROOT --- */
.fac-car-root {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  padding: 32px 0;
}

.fac-car-stage {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  padding: 40px 0 20px;
}

.fac-car-track {
  display: flex;
  gap: 28px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Per-card accent colours */
.fac-car-card[data-accent="cyan"] {
  --fac-a: #06b6d4;
  --fac-a2: #0891b2;
  --fac-abg: rgba(6, 182, 212, 0.07);
  --fac-glow: rgba(6, 182, 212, 0.18);
}
.fac-car-card[data-accent="blue"] {
  --fac-a: #3b82f6;
  --fac-a2: #2563eb;
  --fac-abg: rgba(59, 130, 246, 0.07);
  --fac-glow: rgba(59, 130, 246, 0.18);
}
.fac-car-card[data-accent="purple"] {
  --fac-a: #7c3aed;
  --fac-a2: #6d28d9;
  --fac-abg: rgba(124, 58, 237, 0.07);
  --fac-glow: rgba(124, 58, 237, 0.18);
}
.fac-car-card[data-accent="teal"] {
  --fac-a: #14b8a6;
  --fac-a2: #0d9488;
  --fac-abg: rgba(20, 184, 166, 0.07);
  --fac-glow: rgba(20, 184, 166, 0.18);
}
.fac-car-card[data-accent="amber"] {
  --fac-a: #f59e0b;
  --fac-a2: #d97706;
  --fac-abg: rgba(245, 158, 11, 0.07);
  --fac-glow: rgba(245, 158, 11, 0.18);
}
.fac-car-card[data-accent="pink"] {
  --fac-a: #ec4899;
  --fac-a2: #db2777;
  --fac-abg: rgba(236, 72, 153, 0.07);
  --fac-glow: rgba(236, 72, 153, 0.18);
}

/* --- FACULTY CARD --- */
.fac-car-card {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.04);
  opacity: 0.5;
  transform: scale(0.88) translateY(12px);
  filter: saturate(0.7);
  transition: all 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  user-select: none;
  position: relative;
}

.fac-car-card.fac-car-active {
  opacity: 1;
  transform: scale(1.04) translateY(-4px);
  filter: saturate(1);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 0 0 1px var(--fac-glow, rgba(6, 182, 212, 0.15)),
    0 0 80px var(--fac-glow, rgba(6, 182, 212, 0.08));
  cursor: default;
  z-index: 2;
}

.fac-car-card.fac-car-nearby {
  opacity: 0.72;
  transform: scale(0.94) translateY(4px);
  filter: saturate(0.85);
}

.fac-car-card:not(.fac-car-active):hover {
  opacity: 0.78;
  transform: scale(0.92) translateY(0);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Gradient top border on active */
.fac-car-card.fac-car-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fac-a), var(--fac-a2), var(--fac-a));
  z-index: 3;
}

/* --- IMAGE AREA --- */
.fac-car-img {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fac-car-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 1;
}

.fac-car-avatar-icon {
  position: relative;
  z-index: 0;
  font-size: 4.5rem;
  color: rgba(255, 255, 255, 0.35);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fac-car-card.fac-car-active .fac-car-avatar-icon {
  transform: scale(1.1);
  color: rgba(255, 255, 255, 0.5);
}

/* Badges */
.fac-car-badge-left {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.fac-car-badge-right {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- CARD BODY --- */
.fac-car-body {
  padding: 22px 24px 24px;
}

.fac-car-name {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.3;
}

.fac-car-role {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fac-a);
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}

.fac-car-desc {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- STATS ROW --- */
.fac-car-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 16px;
  margin-bottom: 16px;
}

.fac-car-stat {
  flex: 1;
  padding: 0 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.fac-car-stat:last-child {
  border-right: none;
}

.fac-car-stat i {
  font-size: 0.7rem;
  color: var(--fac-a);
  margin-bottom: 2px;
}

.fac-car-stat strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 900;
  height: 6px;
  line-height: 1.1;
}

.fac-car-stat span {
  color: #94a3b8;
  font-weight: 500;
}

/* --- HOVER PANEL --- */
.fac-car-hover-row {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fac-car-hover-row i {
  color: var(--fac-a);
  font-size: 0.68rem;
  width: 14px;
  text-align: center;
}

/* --- CTA BUTTON --- */
.fac-car-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--fac-a), var(--fac-a2));
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  outline: none;
}

.fac-car-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--fac-glow, rgba(6, 182, 212, 0.25));
}

.fac-car-cta i {
  font-size: 0.72rem;
  transition: transform 0.3s ease;
}
.fac-car-cta:hover i {
  transform: translateX(3px);
}

/* --- ARROWS --- */
.fac-car-arrow {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.88rem;
  color: #475569;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  z-index: 2;
}

.fac-car-arrow:hover {
  background: var(--brand-cyan, #06b6d4);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.3);
  transform: scale(1.08);
}

.fac-car-arrow:focus-visible {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.28);
}

/* --- DOTS --- */
.fac-car-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
}

.fac-car-dot {
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

.fac-car-dot.fac-car-dot-active {
  width: 28px;
  background: var(--brand-cyan, #06b6d4);
}
.fac-car-dot:hover:not(.fac-car-dot-active) {
  background: rgba(6, 182, 212, 0.35);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .fac-car-arrow {
    width: 42px;
    height: 42px;
  }
  .fac-car-root {
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .fac-showcase-section {
    padding: 40px 0;
  }
  .fac-car-arrow {
    width: 38px;
    height: 38px;
    font-size: 0.78rem;
  }
  .fac-car-root {
    gap: 10px;
    padding: 20px 0;
  }
  .fac-car-img {
    height: 160px;
  }
  .fac-car-avatar-icon {
    font-size: 3.5rem;
  }
  .fac-car-body {
    padding: 18px 18px 20px;
  }
  .fac-car-name {
    font-size: 1.05rem;
  }
  .fac-car-desc {
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .fac-car-arrow {
    display: none;
  }
  .fac-car-stage {
    padding: 16px 0 8px;
  }
  .fac-car-root {
    padding: 12px 0;
  }
  .fac-car-card.fac-car-active {
    transform: scale(1);
  }
  .fac-car-card.fac-car-nearby {
    opacity: 0.5;
    transform: scale(0.92);
  }
  .fac-car-img {
    height: 150px;
  }
}

/* Particle float animation */
@keyframes fac-float-particle {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate(12px, -18px) scale(1.15);
    opacity: 0.6;
  }
  50% {
    transform: translate(-8px, -30px) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translate(15px, -12px) scale(1.1);
    opacity: 0.55;
  }
}

/* --- SUCCESS STORIES HUB --- */
.testi-hub-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

.testi-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.testi-blob-1 {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.07) 0%,
    transparent 70%
  );
  top: -150px;
  right: -100px;
  border-radius: 50%;
}

.testi-blob-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.06) 0%,
    transparent 70%
  );
  bottom: -80px;
  left: -80px;
  border-radius: 50%;
}

.testi-header {
  margin-bottom: 48px;
}

.testi-video-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 18px;
  align-items: stretch;
}

.testi-vid-thumb-wrap {
  position: relative;
  overflow: hidden;
  background: #0c0a1a;
}

.testi-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.testi-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-cyan, #06b6d4);
  font-size: 1.05rem;
  padding-left: 3px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.testi-play-sm {
  width: 40px;
  height: 40px;
  font-size: 0.78rem;
  padding-left: 2px;
}

.testi-vid-featured {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.07);
  transition: all 0.4s ease;
}

.testi-vid-featured .testi-vid-thumb-wrap {
  aspect-ratio: 16/9;
}
.testi-vid-featured:hover .testi-thumb {
  transform: scale(1.04);
}

.testi-vid-featured:hover .testi-play-btn {
  background: var(--brand-cyan, #06b6d4);
  color: #fff;
  box-shadow: 0 8px 28px rgba(6, 182, 212, 0.4);
  transform: translate(-50%, -50%) scale(1.08);
}

.testi-vid-meta {
  padding: 18px 22px 22px;
}
.testi-featured-meta {
  padding: 22px 28px 28px;
}

.testi-stars-row {
  color: #f59e0b;
  font-size: 0.72rem;
  margin-bottom: 8px;
  display: flex;
  gap: 2px;
}

.testi-vid-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}

.testi-vid-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.testi-vid-rank,
.testi-vid-inst,
.testi-vid-year {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}

.testi-vid-rank {
  background: linear-gradient(135deg, var(--brand-cyan, #06b6d4), #0891b2);
  color: #fff;
}

.testi-vid-inst {
  background: rgba(124, 58, 237, 0.07);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.14);
}

.testi-vid-year {
  background: rgba(0, 0, 0, 0.05);
  color: #64748b;
}

.testi-vid-quote {
  font-size: 0.87rem;
  line-height: 1.65;
  color: #475569;
  margin: 0;
  font-style: italic;
}

.testi-vid-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testi-vid-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
  transition: all 0.35s ease;
}

.testi-vid-card .testi-vid-thumb-wrap {
  aspect-ratio: 16/9;
}
.testi-vid-card:hover .testi-thumb {
  transform: scale(1.04);
}
.testi-vid-card:hover .testi-play-btn {
  background: var(--brand-cyan, #06b6d4);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.testi-vid-card .testi-vid-meta {
  padding: 12px 14px 14px;
}
.testi-vid-card .testi-vid-name {
  font-size: 0.85rem;
  margin-bottom: 5px;
}

@media (max-width: 900px) {
  .testi-video-layout {
    grid-template-columns: 1fr;
  }
  .testi-vid-stack {
    flex-direction: row;
  }
  .testi-vid-stack .testi-vid-card {
    flex: 1;
  }
}

@media (max-width: 580px) {
  .testi-vid-stack {
    flex-direction: column;
  }
}

/* --- GOOGLE REVIEWS TRUST WALL --- */
.greview-section {
  padding: 80px 0 100px;
  background: transparent;
  position: relative;
}

.greview-stats-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.04),
    rgba(124, 58, 237, 0.03)
  );
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 24px;
  padding: 36px 48px;
  gap: 44px;
  margin-bottom: 44px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.greview-rating-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.greview-g-logo {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc04, #ea4335);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.greview-rating-num {
  font-size: 3.2rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}

.greview-stars-lg {
  color: #f59e0b;
  font-size: 1rem;
  display: flex;
  gap: 2px;
}

.greview-rating-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.greview-divider-v {
  width: 1px;
  height: 80px;
  background: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.greview-counter-group {
  display: flex;
  gap: 44px;
  flex: 1;
  justify-content: space-around;
}

.greview-counter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.greview-count {
  font-size: 3rem;
  font-weight: 900;
  color: var(--brand-cyan, #06b6d4);
  line-height: 1;
}

.greview-counter-item span {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  text-align: center;
}

/* Review carousel */
.greview-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.greview-carousel-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.greview-track {
  display: flex;
  gap: 18px;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.greview-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: #475569;
  transition: all 0.25s ease;
  outline: none;
}

.greview-arrow:hover:not(:disabled) {
  background: var(--brand-cyan, #06b6d4);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.32);
  transform: scale(1.05);
}

.greview-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.greview-arrow:focus-visible {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.28);
}

.greview-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
}

.greview-dot {
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
}

.greview-dot.greview-dot-active {
  width: 24px;
  background: var(--brand-cyan, #06b6d4);
}

.greview-dot:hover:not(.greview-dot-active) {
  background: rgba(6, 182, 212, 0.4);
}

.greview-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  padding: 24px;
  box-shadow: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.greview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #4285f4 0%,
    #4285f4 25%,
    #ea4335 25%,
    #ea4335 50%,
    #fbbc05 50%,
    #fbbc05 75%,
    #34a853 75%,
    #34a853 100%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}

.greview-card:hover::before {
  opacity: 1;
}

.greview-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.greview-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--brand-cyan, #06b6d4),
    var(--brand-purple, #7c3aed)
  );
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.greview-card-top > div:nth-child(2) {
  flex: 1;
}
.greview-card-top h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px;
}

.greview-card-stars {
  color: #f59e0b;
  font-size: 0.88rem;
  display: flex;
  gap: 2px;
}

.greview-g-icon {
  font-size: 1.15rem;
  background: linear-gradient(135deg, #4285f4, #34a853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.greview-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 14px;
}

.greview-badges-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.greview-badge {
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  background: rgba(6, 182, 212, 0.07);
  color: #0891b2;
  border: 1px solid rgba(6, 182, 212, 0.14);
}

.greview-badge-inst {
  background: rgba(124, 58, 237, 0.07);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.14);
}

.greview-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.greview-trust-badge {
  font-size: 1rem;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 17px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  transition: all 0.25s ease;
}

.greview-trust-badge:hover {
  background: rgba(6, 182, 212, 0.05);
  border-color: rgba(6, 182, 212, 0.18);
  color: #0891b2;
}

.greview-trust-badge i {
  color: var(--brand-cyan, #06b6d4);
}

/* ── Photo avatar (Google profile image) ── */
.greview-avatar-photo {
  overflow: hidden;
  padding: 0;
}
.greview-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── "View All Google Reviews" button ── */
.greview-view-all-wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 0;
}
.greview-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 40px;
  border: 1.5px solid rgba(66, 133, 244, 0.3);
  background: rgba(66, 133, 244, 0.05);
  color: #4285f4;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.18s ease;
}
.greview-view-all-btn:hover {
  background: rgba(66, 133, 244, 0.1);
  border-color: rgba(66, 133, 244, 0.55);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .greview-stats-bar {
    flex-wrap: wrap;
    padding: 26px;
    gap: 24px;
    justify-content: center;
  }
  .greview-divider-v {
    display: none;
  }
  .greview-counter-group {
    gap: 24px;
  }
  .greview-arrow {
    width: 38px;
    height: 38px;
    font-size: 0.75rem;
  }
}

/* --- WHY EDUOOZ / FEATURES GRID --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.why-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.why-card .why-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.12),
    rgba(91, 33, 182, 0.12)
  );
  color: var(--brand-cyan);
}

.why-card h4 {
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.why-card p {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* --- PDF EXPLORER (PREVIOUS YEAR PAPERS) --- */
.papers-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.pdf-explorer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
  align-items: start;
}

/* ── LEFT PANEL: Preview ── */
.pex-preview-panel {
  position: sticky;
  top: 24px;
}

.pex-preview-card {
  background: rgba(8, 4, 18, 0.72);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 50px rgba(255, 255, 255, 0.012);
}

/* Toolbar */
.pex-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.pex-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.pex-info-year {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--brand-cyan, #06b6d4);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  min-height: 14px;
}

.pex-info-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.pex-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.pex-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.22s ease;
  text-decoration: none;
}

.pex-tbtn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.pex-tbtn-dl {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.25);
  color: var(--brand-cyan, #06b6d4);
}

.pex-tbtn-dl:hover {
  background: rgba(6, 182, 212, 0.22);
  color: #fff;
  border-color: rgba(6, 182, 212, 0.45);
}

.pex-zoom-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  min-width: 34px;
  text-align: center;
}

/* Frame area */
.pex-frame-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #0c0a1a;
  overflow: hidden;
}

#pex-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#pex-iframe.pex-loaded {
  opacity: 1;
}

/* Skeleton loader */
.pex-skeleton {
  position: absolute;
  inset: 0;
  background: #0e0b20;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 3;
  transition: opacity 0.35s ease;
}

.pex-skeleton.pex-hidden {
  opacity: 0;
  pointer-events: none;
}

.pex-sk-bar {
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: pex-shimmer 1.6s ease-in-out infinite;
}

.pex-sk-bar.pex-sk-short {
  width: 55%;
}
.pex-sk-bar.pex-sk-med {
  width: 75%;
}

.pex-sk-block {
  flex: 1;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: pex-shimmer 1.6s ease-in-out infinite;
  margin: 4px 0;
}

@keyframes pex-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Locked / access state */
.pex-locked-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(8, 4, 18, 0.92);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  padding: 32px;
  text-align: center;
}

.pex-locked-state.pex-show {
  opacity: 1;
  pointer-events: auto;
}

.pex-locked-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #f87171;
}

.pex-locked-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.pex-locked-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
  max-width: 220px;
  line-height: 1.55;
}

.pex-enroll-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--brand-cyan, #06b6d4), #0891b2);
  color: #fff;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-main);
  text-decoration: none;
  margin-top: 4px;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3);
}

.pex-enroll-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.45);
  color: #fff;
}

/* ── RIGHT PANEL: Library ── */
.pex-library-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pex-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Filter tabs */
.pex-tabs {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 5px;
}

.pex-tab {
  flex: 1;
  padding: 9px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(0, 0, 0, 0.48);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
}

.pex-tab.active {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.pex-tab:not(.active):hover {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
}

/* Search */
.pex-search-wrap {
  position: relative;
}

.pex-search-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.82rem;
  pointer-events: none;
}

.pex-search-wrap input {
  width: 100%;
  padding: 11px 16px 11px 38px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.95rem;
  font-family: var(--font-main);
  color: rgba(255, 255, 255, 0.85);
  outline: none;
  transition:
    border-color 0.22s,
    box-shadow 0.22s;
  box-sizing: border-box;
}

.pex-search-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.26);
}

.pex-search-wrap input:focus {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* Paper card grid */
.pex-paper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  color: rgba(0, 0, 0, 0.88);
}

/* Paper cards */
.pex-paper-card {
  position: relative;
  background: rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  animation: pex-card-in 0.35s ease both;
  overflow: hidden;
  color: #059669;
}

@keyframes pex-card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pex-paper-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.pex-paper-card.pex-active {
  border-color: rgba(6, 182, 212, 0.45);
  background: rgba(6, 182, 212, 0.06);
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.2),
    0 10px 30px rgba(6, 182, 212, 0.1);
}

.pex-paper-card.pex-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--brand-cyan, #06b6d4),
    var(--brand-purple, #a78bfa)
  );
  border-radius: 18px 18px 0 0;
}

.pex-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pex-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f87171;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pex-paper-card:hover .pex-card-icon,
.pex-paper-card.pex-active .pex-card-icon {
  transform: scale(1.1) rotate(-4deg);
}

.pex-year-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  color: var(--brand-cyan, #06b6d4);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  flex-shrink: 0;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.pex-paper-card.pex-active .pex-year-badge {
  background: var(--brand-cyan, #06b6d4);
  color: #fff;
  border-color: transparent;
}

.pex-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.35;
  margin: 0;
}

.pex-card-meta {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: center;
  gap: 5px;
}

.pex-card-meta i {
  font-size: 0.62rem;
}

.pex-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.pex-active-chip {
  display: none;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: var(--brand-cyan, #06b6d4);
  font-size: 0.62rem;
  font-weight: 700;
}

.pex-paper-card.pex-active .pex-active-chip {
  display: inline-flex;
}

.pex-seo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.62rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: auto;
  transition:
    color 0.2s,
    background 0.2s;
}

.pex-seo-link:hover {
  color: var(--brand-cyan, #06b6d4);
  background: rgba(6, 182, 212, 0.12);
}

a.pex-paper-card {
  text-decoration: none;
  color: inherit;
}

.pex-dl-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-cyan, #06b6d4);
  margin-left: auto;
}

/* Empty state */
.pex-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 24px;
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
  animation: pex-card-in 0.35s ease;
}

.pex-empty.pex-show {
  display: flex;
}
.pex-empty i {
  font-size: 2.4rem;
  opacity: 0.5;
}
.pex-empty p {
  font-size: 0.95rem;
  font-weight: 600;
}

/* ── Generic "Coming Soon" placeholder (used where section inner content is pending) ── */
.coming-soon-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: rgba(255, 255, 255, 0.32);
  text-align: center;
}
.coming-soon-block i {
  font-size: 2.4rem;
  opacity: 0.5;
}
.coming-soon-block span {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: black;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .pdf-explorer {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Show paper list first, preview below on tablet/mobile */
  .pex-library-panel {
    order: -1;
  }
  .pex-preview-panel {
    position: relative;
    top: auto;
  }
  .pex-frame-wrap {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .pex-paper-grid {
    grid-template-columns: 1fr;
  }
  .pex-paper-card {
    padding: 14px 13px;
    gap: 8px;
  }
  .pex-card-title {
    font-size: 0.88rem;
  }
  .pex-card-meta {
    font-size: 0.78rem;
  }
  .pex-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }
  .pex-toolbar-actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
  }
  .pex-tbtn-dl {
    flex: 1;
    justify-content: center;
  }
  .pex-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .pex-tabs::-webkit-scrollbar {
    display: none;
  }
  .pex-tab {
    flex: none;
  }
  .pex-frame-wrap {
    aspect-ratio: 3 / 4;
  }
  .pex-info-title {
    max-width: 100%;
    white-space: normal;
  }
  .pex-locked-state {
    padding: 32px 20px;
  }
}

@media (max-width: 480px) {
  .pex-paper-card {
    padding: 12px 11px;
  }
  .pex-card-icon {
    width: 32px;
    height: 32px;
    font-size: 0.82rem;
  }
  .pex-toolbar {
    padding: 10px 12px;
  }
  .pex-tbtn {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }
  .pex-zoom-label {
    font-size: 0.7rem;
  }
  .pex-frame-wrap {
    aspect-ratio: 1 / 1.3;
  }
  .pex-search-wrap input {
    font-size: 0.88rem;
    padding: 10px 14px 10px 36px;
  }
}

/* ====================================================
   PREVIOUS YEAR PAPERS — PURE STATIC HTML GRID
   ==================================================== */
.pyp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.pyp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px 18px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
}

.pyp-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #06b6d4, #a78bfa);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 18px 18px 0 0;
}

.pyp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(6, 182, 212, 0.05);
  box-shadow: 0 12px 32px rgba(6, 182, 212, 0.12);
}

.pyp-card:hover::before {
  opacity: 1;
}

.pyp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
}

.pyp-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f87171;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pyp-card:hover .pyp-icon {
  transform: scale(1.1) rotate(-4deg);
}

.pyp-year {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  color: #06b6d4;
  white-space: nowrap;
  margin-left: auto;
}

.pyp-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.35;
  margin: 0;
}

.pyp-meta {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.45);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pyp-meta i {
  font-size: 0.7rem;
}

.pyp-dl-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #06b6d4;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

@media (max-width: 640px) {
  .pyp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pyp-card {
    padding: 14px 13px;
  }
  .pyp-title {
    font-size: 0.88rem;
  }
}

@media (max-width: 380px) {
  .pyp-grid {
    grid-template-columns: 1fr;
  }
}

/* --- FREE PRACTICE TESTS --- */
.practice-section {
  position: relative;
  /* Above the sticky quick-nav widget and the floating scroll-to-top
     button (both z-index 999) — content in this section otherwise
     gets visually covered by them. */
  z-index: 1;
  padding: 80px 0;
}

.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.practice-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 28px 24px;
  transition: all 0.35s ease;
}

.practice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
}

.practice-card .practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.practice-card .difficulty-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.difficulty-badge.easy {
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
}
.difficulty-badge.medium {
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
}
.difficulty-badge.hard {
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}

.practice-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.practice-card .practice-meta {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 18px;
  display: flex;
  gap: 16px;
}

.practice-card .btn-start-test {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--brand-cyan), #0891b2);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.practice-card .btn-start-test:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.3);
}

@media (max-width: 768px) {
  .practice-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   MOCK TEST SYSTEM (MTS)
   ═══════════════════════════════════════════════════ */

.practice-tests-grid {
  margin-top: 40px;
  /* Sits inside .container's existing max-width (1400px) and responsive
     side padding, same as every other section on the page — equal
     left/right margins, centered, no viewport-edge breakout. */
  position: relative;
}

.mts-wrapper {
  width: 100%;
  font-family: var(--font-main, "Plus Jakarta Sans", sans-serif);
}

.mts-screen {
  width: 100%;
}
.mts-exam-screen {
  position: relative;
}
.mts-hidden {
  display: none !important;
}

/* ── Section tabs bar (above q-panel) ── */
.mts-section-tabs-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.mts-section-tabs-bar #mts-tabs-scroll {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}
.mts-section-tabs-bar #mts-tabs-scroll::-webkit-scrollbar {
  display: none;
}

/* ── Left Nav: Category items ── */
.mts-left-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(248, 250, 252, 0.7);
  color: #64748b;
  font-size: 0.93rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.mts-left-cat i {
  font-size: 1.3rem;
  color: var(--cat-col, #64748b);
  flex-shrink: 0;
  margin-top: 10px;
}
.mts-left-cat:hover {
  background: rgba(6, 182, 212, 0.1);
  color: #1e293b;
}
.mts-left-cat.mts-left-cat-active {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.35);
  color: #0e7490;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #06b6d4;
}
.mts-left-cat.mts-left-cat-active i {
  color: #06b6d4;
}
.mts-left-cat:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.mts-left-cat:disabled:hover {
  background: rgba(248, 250, 252, 0.7);
  color: #64748b;
}
.mts-left-cat-soon {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Left Nav: per-category topic accordion (placeholder topics) ──
   Expanded inline, in normal flow, for whichever category is active —
   not a floating popover — so it reads as a persistent panel, not a
   transient dropdown. ── */
.mts-left-cat-group {
  width: 100%;
}
.mts-left-cat i.mts-cat-topic-toggle {
  margin-top: 0;
  margin-left: auto;
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mts-cat-topic-toggle-open {
  transform: rotate(180deg);
}
.mts-cat-topics {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 6px 16px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid rgba(6, 182, 212, 0.18);
}
.mts-topic-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.mts-topic-item:hover {
  background: rgba(6, 182, 212, 0.08);
  transform: translateX(2px);
}
.mts-topic-item-badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.06);
  color: #94a3b8;
  transition: all 0.2s ease;
}
.mts-topic-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mts-topic-item-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: #475569;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mts-topic-item-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.mts-topic-item-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: rgba(6, 182, 212, 0.55);
  transition: width 0.3s ease;
}
.mts-topic-item-score {
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  color: #94a3b8;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Active — currently open topic */
.mts-topic-item-active {
  background: rgba(6, 182, 212, 0.1);
}
.mts-topic-item-active .mts-topic-item-badge {
  background: #06b6d4;
  color: #fff;
}
.mts-topic-item-active .mts-topic-item-name {
  color: #0e7490;
}
.mts-topic-item-active .mts-topic-item-score {
  background: rgba(6, 182, 212, 0.15);
  color: #0891b2;
}

/* Done — every question in the topic answered */
.mts-topic-item-done .mts-topic-item-badge {
  background: #10b981;
  color: #fff;
}
.mts-topic-item-done .mts-topic-item-name {
  color: #059669;
}
.mts-topic-item-done .mts-topic-item-bar-fill {
  background: #10b981;
}
.mts-topic-item-done .mts-topic-item-score {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

/* ── Mobile-only topic row (hidden on desktop/tablet, where topics stay
   in the accordion) — see @media (max-width: 900px) below for display. ── */
.mts-mobile-topics {
  display: none;
}

.mts-left-nav-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.07);
  margin: 6px 2px;
}

/* ── Left Section Navigation ── */
.mts-left-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 16px 10px;
  align-self: start;
  position: sticky;
  top: 100px;
  min-width: 0;
}
.mts-left-nav-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  padding: 0 6px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mts-left-nav #mts-cat-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mts-tab-score {
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.07);
  color: inherit;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  opacity: 0.8;
}
.mts-tab-active .mts-tab-score {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}
.mts-tab-done .mts-tab-score {
  background: rgba(16, 185, 129, 0.14);
  color: #065f46;
  opacity: 1;
}

/* ── Category switcher modal (during exam) ── */
.mts-cat-modal {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: inherit;
}
.mts-cat-modal.mts-hidden {
  display: none !important;
}
.mts-cat-modal-box {
  background: #fff;
  border-radius: 22px;
  padding: 28px 24px;
  max-width: 420px;
  width: 92%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  animation: mts-modal-in 0.22s ease;
}
.mts-cat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mts-cat-modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.mts-cat-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.mts-cat-modal-close:hover {
  background: #e2e8f0;
}
.mts-cat-modal-sub {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0 0 18px;
}
.mts-cat-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mts-cat-modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  transition: all 0.2s ease;
}
.mts-cat-modal-card i {
  font-size: 1.1rem;
  color: var(--cat-color, #64748b);
  margin-bottom: 2px;
}

/* Modal card hovers — per-category RGBA (no color-mix) */
.mts-cat-modal-card:hover {
  border-color: var(--cat-color, #06b6d4);
  background: #fff;
  color: #0f172a;
  transform: translateY(-2px);
}
.mts-cat-modal-card[data-cat="-1"]:hover {
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.22);
}
.mts-cat-modal-card[data-cat="0"]:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}
.mts-cat-modal-card[data-cat="1"]:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}
.mts-cat-modal-card[data-cat="2"]:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.22);
}
.mts-cat-modal-card[data-cat="3"]:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.mts-cat-modal-card[data-cat="4"]:hover {
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.22);
}

.mts-cat-modal-count {
  font-size: 0.62rem;
  opacity: 0.55;
  font-weight: 500;
}

@media (max-width: 600px) {
  .mts-cat-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .mts-cat-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mts-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  color: #64748b;
}
.mts-tab.mts-tab-active {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
}
.mts-tab.mts-tab-done {
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.2);
}
.mts-tab.mts-tab-locked {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.04);
}
.mts-tab i {
  font-size: 0.9rem;
}

/* ── Exam Body Layout ──
   No right-hand score panel anymore (its content now lives inside the
   left category panel), so the left nav gets wider and the question
   panel gets the full remaining width. */
.mts-exam-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}
.mts-exam-right-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mts-exam-content {
  display: block;
}

/* ── Question Panel ── */
.mts-q-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mts-q-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 16px 22px;
}
.mts-q-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mts-q-counter {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}
.mts-section-badge {
  font-size: 1rem;
  font-weight: 700;
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(6, 182, 212, 0.2);
}
.mts-progress-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.07);
}
.mts-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #06b6d4, #0891b2);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Question Card ── */
.mts-question-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.mts-coming-soon {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px dashed rgba(100, 116, 139, 0.3);
  border-radius: 22px;
  padding: 56px 28px;
  text-align: center;
  color: #64748b;
}
.mts-coming-soon-icon {
  font-size: 2.25rem;
  color: #94a3b8;
  margin-bottom: 14px;
}
.mts-coming-soon-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 6px;
}
.mts-coming-soon-sub {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}
.mts-q-num {
  font-size: 1rem;
  font-weight: 800;
  color: #06b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.mts-q-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.65;
  margin: 0 0 24px;
}

.mts-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.mts-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(248, 250, 252, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.92rem;
  color: #334155;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
}
.mts-option:hover:not(:disabled) {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.05);
  transform: translateX(3px);
}
.mts-option.mts-opt-selected {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.08);
  color: #0f172a;
  font-weight: 600;
}
.mts-option.mts-opt-correct {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.09);
  color: #065f46;
  font-weight: 600;
}
.mts-option.mts-opt-wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  color: #991b1b;
  font-weight: 600;
}
.mts-option:disabled {
  cursor: default;
}
.mts-opt-key {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: #64748b;
  transition: all 0.2s ease;
}
.mts-option.mts-opt-selected .mts-opt-key {
  background: #06b6d4;
  color: #fff;
}
.mts-option.mts-opt-correct .mts-opt-key {
  background: #10b981;
  color: #fff;
}
.mts-option.mts-opt-wrong .mts-opt-key {
  background: #ef4444;
  color: #fff;
}

.mts-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3);
}
.mts-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.38);
}
.mts-submit-btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* ── Feedback Card ── */
.mts-feedback-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  padding: 22px 24px;
  animation: mts-fade-up 0.35s ease;
}
@keyframes mts-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mts-feedback-result {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.mts-feedback-result.mts-correct {
  color: #059669;
}
.mts-feedback-result.mts-wrong {
  color: #dc2626;
}
.mts-feedback-result i {
  font-size: 1.3rem;
}
.mts-feedback-answer {
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.07);
  border-radius: 10px;
  border-left: 3px solid #10b981;
}
.mts-explanation {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.68;
  padding: 10px 14px;
  background: rgba(248, 250, 252, 0.9);
  border-radius: 10px;
}

/* ── Navigation Bar ── */
.mts-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mts-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
}
.mts-btn-ghost {
  background: rgba(255, 255, 255, 0.8);
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}
.mts-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
}
.mts-btn-cyan {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.28);
}
.mts-btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.38);
}
.mts-nav-center {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 600;
}

/* ── Section Done Card ── */
.mts-section-done {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 44px 36px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  animation: mts-fade-up 0.4s ease;
}
.mts-done-icon {
  font-size: 3.5rem;
  color: #10b981;
  margin-bottom: 16px;
}
.mts-done-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 24px;
}
.mts-done-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.mts-done-stat {
  text-align: center;
}
.mts-done-stat strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
}
.mts-done-stat span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mts-next-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.32);
}
.mts-next-section-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(6, 182, 212, 0.42);
}
.mts-next-section-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

/* ── Category Score — compact summary inside the Question Progress box,
   between the question counter and the Topic/Section badge, scoped to
   whichever category is currently active. ── */
.mts-cat-topscore {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.mts-cat-topscore-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.mts-cat-topscore-item strong {
  font-size: 0.92rem;
  font-weight: 800;
}
.mts-cat-topscore-answered strong {
  color: #0891b2;
}
.mts-cat-topscore-correct strong {
  color: #059669;
}
.mts-cat-topscore-wrong strong {
  color: #dc2626;
}

/* ── Results Screen ── */
.mts-results-screen {
  padding: 8px 0;
}
.mts-results-header {
  text-align: center;
  margin-bottom: 40px;
}
.mts-results-trophy {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.35);
  margin: 0 auto 20px;
}
.mts-results-title {
  font-size: 2rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 10px;
}
.mts-results-sub {
  font-size: 0.95rem;
  color: #64748b;
}

.mts-results-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

.mts-res-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 24px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.mts-res-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mts-res-card-title i {
  color: #06b6d4;
}

.mts-section-scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.mts-sec-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mts-sec-score-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  min-width: 80px;
}
.mts-sec-score-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  overflow: hidden;
}
.mts-sec-score-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #06b6d4, #0891b2);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.mts-sec-score-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  min-width: 44px;
  text-align: right;
}

.mts-total-score-row {
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.08),
    rgba(124, 58, 237, 0.08)
  );
  border: 1px solid rgba(6, 182, 212, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mts-total-score-left {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}
.mts-total-score-right {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
}

.mts-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mts-analytic-item {
  padding: 16px 16px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.mts-analytic-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.mts-analytic-val {
  font-size: 1.1rem;
  font-weight: 900;
  color: #0f172a;
}
.mts-analytic-sub {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 2px;
}

/* Donut card */
.mts-donut-card {
  position: relative;
}
.mts-donut-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.mts-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.mts-donut-center strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
}
.mts-donut-center span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}
.mts-donut-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mts-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}
.mts-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Review card */
.mts-review-card {
  padding-bottom: 16px;
}
.mts-review-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.mts-filter-btn {
  padding: 7px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  background: rgba(248, 250, 252, 0.9);
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mts-filter-btn.mts-filter-active {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  border-color: transparent;
}
.mts-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.mts-review-list::-webkit-scrollbar {
  width: 4px;
}
.mts-review-list::-webkit-scrollbar-track {
  background: transparent;
}
.mts-review-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.mts-review-item {
  padding: 14px 16px;
  border-radius: 14px;
  border-left: 3px solid transparent;
  background: rgba(248, 250, 252, 0.9);
  font-size: 0.82rem;
}
.mts-review-item.mts-rev-correct {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}
.mts-review-item.mts-rev-wrong {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}
.mts-review-q {
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.5;
}
.mts-review-answers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mts-review-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.mts-review-row-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  min-width: 56px;
  text-transform: uppercase;
  padding-top: 1px;
}
.mts-review-row-val {
  color: #475569;
  flex: 1;
}
.mts-review-row-val.mts-val-correct {
  color: #059669;
  font-weight: 600;
}
.mts-review-row-val.mts-val-wrong {
  color: #dc2626;
  font-weight: 600;
}
.mts-review-status {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-top: 6px;
}
.mts-status-correct {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.mts-status-wrong {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

/* Results actions */
.mts-results-actions {
  text-align: center;
  padding-top: 8px;
  margin-top: 4px;
}
.mts-retest-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 40px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
}
.mts-retest-btn:hover {
  background: #0f172a;
  color: #fff;
  border-color: transparent;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .mts-exam-body {
    grid-template-columns: 240px 1fr;
    gap: 16px;
  }
}

/* ── Mobile/Tablet: category + topic accordion becomes two separate
   horizontal scroll strips instead of a vertical tree — an accordion
   that pushes content down reads as broken on narrow screens. Desktop
   accordion behavior (above 900px) is untouched. ── */
@media (max-width: 900px) {
  .mts-exam-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mts-left-nav {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
  }
  .mts-left-nav-title {
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }
  /* Categories: single horizontal scroll row, no wrap */
  .mts-left-nav #mts-cat-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mts-left-nav #mts-cat-nav::-webkit-scrollbar {
    display: none;
  }
  .mts-left-cat-group {
    width: auto;
    flex: 0 0 auto;
  }
  .mts-left-cat {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 8px 14px;
  }
  /* Reset icon vertical offset — looks wrong in horizontal pill layout */
  .mts-left-cat i {
    margin-top: 0;
    font-size: 1.1rem;
  }
  /* No accordion arrow or nested topic tree on mobile — topics move to
     their own horizontal row (.mts-mobile-topics) below instead. */
  .mts-left-cat i.mts-cat-topic-toggle {
    display: none;
  }
  .mts-cat-topics {
    display: none !important;
  }

  /* Topics: single horizontal scroll row for the active category */
  .mts-mobile-topics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .mts-mobile-topics-title {
    padding-bottom: 6px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }
  .mts-mobile-topics-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mts-mobile-topics-row::-webkit-scrollbar {
    display: none;
  }
  .mts-mobile-topic-pill {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 7px 12px 7px 7px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    background: rgba(248, 250, 252, 0.9);
    font-family: inherit;
    cursor: pointer;
  }
  .mts-mobile-topic-pill-badge {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.06);
    color: #94a3b8;
  }
  .mts-mobile-topic-pill-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
  }
  .mts-mobile-topic-pill-score {
    font-size: 0.66rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.05);
    color: #94a3b8;
    padding: 2px 7px;
    border-radius: 6px;
  }
  .mts-mobile-topic-pill-active {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.35);
  }
  .mts-mobile-topic-pill-active .mts-mobile-topic-pill-badge {
    background: #06b6d4;
    color: #fff;
  }
  .mts-mobile-topic-pill-active .mts-mobile-topic-pill-name {
    color: #0e7490;
  }
  .mts-mobile-topic-pill-active .mts-mobile-topic-pill-score {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
  }
  .mts-mobile-topic-pill-done .mts-mobile-topic-pill-badge {
    background: #10b981;
    color: #fff;
  }
  .mts-mobile-topic-pill-done .mts-mobile-topic-pill-name {
    color: #059669;
  }
  .mts-mobile-topic-pill-done .mts-mobile-topic-pill-score {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
  }

  /* Compact section tabs for tablet */
  .mts-tab {
    padding: 8px 14px;
    font-size: 0.9rem;
  }
  .mts-results-body {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile: 600px ── */
@media (max-width: 600px) {
  /* Tabs bar: compact tabs, icon-only exit button */
  .mts-tab {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
  .mts-tab i {
    font-size: 0.8rem;
  }
  /* Question panel */
  .mts-q-header {
    padding: 12px 16px;
  }
  /* Question progress row: let it wrap so the score summary drops to
     its own full-width line below the counter + topic/section badge,
     instead of forcing everything onto one cramped line. */
  .mts-q-progress-info {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .mts-q-counter {
    order: 1;
    font-size: 0.9rem;
  }
  .mts-section-badge {
    order: 2;
    font-size: 0.8rem;
    padding: 3px 9px;
  }
  .mts-cat-topscore {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .mts-cat-topscore-item {
    font-size: 0.74rem;
    gap: 4px;
  }
  .mts-cat-topscore-item strong {
    font-size: 0.84rem;
  }
  .mts-question-card {
    padding: 22px 18px;
  }
  .mts-q-text {
    font-size: 0.96rem;
  }
  .mts-option {
    padding: 12px 14px;
    font-size: 0.86rem;
  }

  /* Section done card */
  .mts-section-done {
    padding: 28px 18px;
  }
  .mts-done-title {
    font-size: 1.2rem;
  }

  /* Nav buttons: slightly smaller */
  .mts-nav-btn {
    padding: 11px 18px;
    font-size: 0.84rem;
  }

  /* Results */
  .mts-analytics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mts-results-body {
    grid-template-columns: 1fr;
  }
}

/* ── Small phones: 480px ── */
@media (max-width: 480px) {
  /* Tabs: minimal padding */
  .mts-tab {
    padding: 7px 10px;
    font-size: 0.78rem;
    gap: 5px;
  }

  /* Left nav pills even more compact */
  .mts-left-cat {
    font-size: 0.72rem;
    padding: 6px 9px;
  }

  /* Question card tighter */
  .mts-question-card {
    padding: 18px 14px;
  }
  .mts-q-text {
    font-size: 0.92rem;
  }
  .mts-option {
    padding: 11px 12px;
    font-size: 0.83rem;
    gap: 10px;
  }

  /* Nav bar: full-width stacked buttons */
  .mts-nav-bar {
    flex-wrap: wrap;
  }
  .mts-nav-center {
    width: 100%;
    order: -1;
    margin-bottom: 4px;
  }
  .mts-nav-btn {
    flex: 1;
    justify-content: center;
    padding: 11px 12px;
    font-size: 0.82rem;
  }

  /* Submit button: full width */
  .mts-submit-btn {
    width: 100%;
    justify-content: center;
  }

  /* Section done card */
  .mts-section-done {
    padding: 22px 14px;
  }
  .mts-done-stats {
    gap: 18px;
  }
}

/* --- STUDY MATERIALS --- */
.materials-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
  margin-bottom: 50px;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.material-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: all 0.35s ease;
}

.material-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
}

.material-card .mat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: rgba(91, 33, 182, 0.1);
  color: var(--brand-purple);
}

.material-card .mat-content {
  flex: 1;
}

.material-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.material-card p {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 14px;
  line-height: 1.5;
}

.material-card .btn-download-mat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(91, 33, 182, 0.08);
  color: var(--brand-purple);
  border: 1px solid rgba(91, 33, 182, 0.15);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.material-card .btn-download-mat:hover {
  background: var(--brand-purple);
  color: #fff;
}

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

/* Study Material images: single row of 4 on desktop, collapsing down at narrower widths */
.materials-img-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .materials-img-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .materials-img-grid {
    grid-template-columns: 1fr;
  }
}

.material-img-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.35s ease;
}

.material-img-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.material-img-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.materials-actions {
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .materials-actions {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- RELATED RESOURCES --- */
.resources-section {
  position: relative;
  z-index: 10;
  padding: 60px 0;
}

.resources-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  justify-content: center;
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  transition: all 0.3s ease;
}

.resource-pill:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: translateY(-2px);
}

.resource-pill i {
  font-size: 0.8rem;
}

/* --- SECTION HEADERS (shared) --- */

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* Body padding for sticky bottom nav on mobile */
@media (max-width: 1200px) {
  body.has-sticky-nav {
    padding-bottom: 60px;
  }
}

/* =============================================
   PREMIUM INTERACTIONS — Section Upgrades
   ============================================= */

/* --- EXAM SNAPSHOT: RESPONSIVE CARD GRID --- */
.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

@media (max-width: 768px) {
  .snapshot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.snapshot-dots {
  display: none;
}

@media (max-width: 480px) {
  .snapshot-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin-top: 32px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .snapshot-grid::-webkit-scrollbar {
    display: none;
    height: 8px;
  }

  .snapshot-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
    align-items: stretch;
  }

  .snapshot-card .snap-icon {
    margin: 0 auto 16px;
  }

  .snapshot-card .snap-label,
  .snapshot-card .snap-value {
    width: 100%;
  }

  .snapshot-card .snap-value {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .snapshot-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 0 4px;
  }

  .snapshot-dots button {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.22);
    cursor: pointer;
    transition:
      transform 0.2s ease,
      background-color 0.2s ease,
      opacity 0.2s ease;
  }

  .snapshot-dots button.active {
    background-color: var(--brand-cyan);
    transform: scale(1.1);
    opacity: 1;
  }
}

/* --- WHY EDUOOZ: ROTATING FEATURE SHOWCASE --- */
.why-showcase-wrapper {
  position: relative;
  margin-top: 40px;
  overflow: hidden;
}

.why-showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.1),
    rgba(91, 33, 182, 0.1)
  );
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-cyan);
  margin: 0 auto 28px;
  width: fit-content;
}

.why-showcase-badge i {
  font-size: 0.9rem;
}

.why-showcase-viewport {
  position: relative;
  min-height: 340px;
}

.why-showcase-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.why-showcase-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}

.why-showcase-slide.exit-left {
  opacity: 0;
  transform: translateX(-40px);
}

.why-showcase-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.why-showcase-progress .progress-dot {
  width: 32px;
  height: 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.3s ease;
}

.why-showcase-progress .progress-dot.active {
  background: rgba(6, 182, 212, 0.2);
}

.why-showcase-progress .progress-dot.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--brand-cyan);
  border-radius: 4px;
  animation: progress-fill 4.5s linear forwards;
}

.why-showcase-wrapper:hover .why-showcase-progress .progress-dot.active::after {
  animation-play-state: paused;
}

@keyframes progress-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Floating glow particles */
.why-glow-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.why-glow-particles .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.4;
  animation: particle-float 8s ease-in-out infinite;
}

.why-glow-particles .particle:nth-child(1) {
  left: 10%;
  top: 20%;
  background: var(--brand-cyan);
  animation-delay: 0s;
}
.why-glow-particles .particle:nth-child(2) {
  left: 85%;
  top: 40%;
  background: var(--brand-purple);
  animation-delay: -2s;
}
.why-glow-particles .particle:nth-child(3) {
  left: 30%;
  top: 70%;
  background: var(--brand-magenta);
  animation-delay: -4s;
}
.why-glow-particles .particle:nth-child(4) {
  left: 70%;
  top: 15%;
  background: var(--brand-cyan);
  animation-delay: -6s;
}
.why-glow-particles .particle:nth-child(5) {
  left: 55%;
  top: 85%;
  background: var(--brand-purple);
  animation-delay: -1s;
}

@keyframes particle-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate(15px, -20px) scale(1.3);
    opacity: 0.6;
  }
  50% {
    transform: translate(-10px, -35px) scale(1);
    opacity: 0.4;
  }
  75% {
    transform: translate(20px, -15px) scale(1.2);
    opacity: 0.5;
  }
}

/* Override old grid */
.why-eduooz-section .why-grid {
  display: none;
}

@media (max-width: 768px) {
  .why-showcase-slide {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .why-showcase-viewport {
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .why-showcase-slide {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* --- AGE RELAXATION: INTERACTIVE EXPLORER --- */
.age-explorer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.age-explorer-card {
  position: relative;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.age-explorer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  /* background: linear-gradient(90deg, var(--brand-cyan), var(--brand-purple)); */
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.age-explorer-card::before {
  background: linear-gradient(90deg, var(--brand-cyan));
}

.age-explorer-card:hover {
  border-color: rgba(6, 182, 212, 0.2);
  box-shadow: 0 16px 48px rgba(6, 182, 212, 0.08);
}

.age-explorer-card:hover::before {
  opacity: 1;
}

.age-explorer-card.expanded {
  box-shadow:
    0 24px 56px rgba(6, 182, 212, 0.12),
    0 0 0 1px rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.2);
}

.age-explorer-front {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  position: relative;
}

.age-explorer-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: rgba(6, 182, 212, 0.08);
  color: var(--brand-cyan);
}

.age-explorer-info {
  flex: 1;
}

.age-explorer-info .age-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.1),
    rgba(91, 33, 182, 0.05)
  );
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-cyan);
}

.age-explorer-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
  font-size: 0.75rem;
  transition: all 0.35s ease;
  flex-shrink: 0;
}

.age-explorer-card.expanded .age-explorer-toggle {
  transform: rotate(180deg);
  background: var(--brand-purple);
  color: #fff;
}

.age-explorer-detail {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    padding 0.3s ease;
  padding: 0 24px;
  border-top: 0 solid rgba(0, 0, 0, 0.04);
}

.age-explorer-card.expanded .age-explorer-detail {
  max-height: 500px;
  padding: 0 24px 24px;
  border-top-width: 1px;
}

.age-explorer-detail p {
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
  padding-top: 16px;
}

/* Override old grid */
.age-relax-section .age-relax-grid {
  display: none;
}

@media (max-width: 1024px) {
  .age-explorer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .age-explorer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .age-explorer-front {
    padding: 20px;
  }
}

/* =============================================
   ELIGIBILITY + AGE RELAXATION SPLIT LAYOUT
   ============================================= */
.elig-age-split-section {
  position: relative;
  z-index: 10;
  padding: 80px 0;
}

.elig-age-split-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  margin-top: 44px;
  position: relative;
  align-items: start;
}

/* Floating particles */
.split-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.split-particles .sp {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0.3;
  animation: sp-float 10s ease-in-out infinite;
}

.split-particles .sp:nth-child(1) {
  left: 15%;
  top: 20%;
  background: var(--brand-cyan);
  animation-delay: 0s;
}
.split-particles .sp:nth-child(2) {
  left: 80%;
  top: 60%;
  background: var(--brand-purple);
  animation-delay: -3s;
}
.split-particles .sp:nth-child(3) {
  left: 45%;
  top: 80%;
  background: var(--brand-magenta);
  animation-delay: -5s;
}
.split-particles .sp:nth-child(4) {
  left: 60%;
  top: 10%;
  background: var(--brand-cyan);
  animation-delay: -7s;
}

@keyframes sp-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-20px) scale(1.4);
    opacity: 0.5;
  }
}

/* Column styles */
.split-column {
  position: relative;
  z-index: 1;
  padding: 0 20px;
}

/* Column headings */
.split-col-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-cyan);
  margin: 0 0 15px;
  line-height: 1.25;
}

/* Column header rows — icon + heading side by side */
.eligibility-explorer-icon {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 12px;
  padding: 7px 13px 7px 13px;
  margin-bottom: 1.25rem;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.22);
  border-radius: 14px;
}

@media (max-width: 768px) {
  .eligibility-explorer-icon {
    align-self: center;
  }
}

.eligibility-explorer-icon > i {
  font-size: 1.3rem;
  color: var(--brand-cyan);
  flex-shrink: 0;
}

.eligibility-explorer-icon .split-col-heading {
  margin: 0;
  color: var(--brand-cyan);
}

/* Reset age-explorer-icon when it wraps the column header (direct child of split-column) */
#age-carousel-col > .age-explorer-icon {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  padding: 7px 13px 7px 13px;
  margin-bottom: 1.25rem;
  width: auto;
  height: auto;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.22);
  border-radius: 14px;
  flex-shrink: unset;
  justify-content: flex-start;
  font-size: 1.3rem;
  color: var(--brand-cyan);
}
@media (max-width: 768px) {
  #age-carousel-col > .age-explorer-icon {
    align-self: center;
  }
}

#age-carousel-col > .age-explorer-icon .split-col-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--brand-cyan);
}

/* Header row: badge + nav controls inline */
.split-col-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.split-col-header.content-left {
  justify-content: flex-start;
}
.split-col-header.content-right {
  justify-content: flex-end;
}
.split-col-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.08),
    rgba(91, 33, 182, 0.06)
  );
  border: 1px solid rgba(6, 182, 212, 0.12);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-cyan);
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.split-col-badge i {
  font-size: 0.9rem;
}

/* Simple elegant glowing vertical divider */
.split-divider {
  width: 2px;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.split-divider .divider-glow {
  width: 1px;
  height: 80%;
  background: linear-gradient(
    180deg,
    transparent,
    var(--brand-cyan),
    var(--brand-purple),
    var(--brand-magenta),
    transparent
  );
  opacity: 0.45;
  border-radius: 1px;
  position: relative;
}

.split-divider .divider-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(6px);
  opacity: 0.6;
}

/* Vertical Carousel */
.vcarousel-viewport {
  position: relative;
  overflow: hidden;
  height: 420px;
  border-radius: 20px;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.vcarousel-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* .vcarousel-viewport:hover .vcarousel-track — pause handled by JS */

/* Elig cards inside carousel — keep existing styles, just ensure single column */
.vcarousel-track .elig-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;
}

.vcarousel-track .elig-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(6, 182, 212, 0.2);
}

.vcarousel-track .elig-card .elig-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.5rem;
}

.vcarousel-track .elig-card:nth-child(1) .elig-icon {
  background: rgba(6, 182, 212, 0.1);
  color: var(--brand-cyan);
}
.vcarousel-track .elig-card:nth-child(2) .elig-icon {
  background: rgba(91, 33, 182, 0.1);
  color: var(--brand-purple);
}
.vcarousel-track .elig-card:nth-child(3) .elig-icon {
  background: rgba(192, 38, 211, 0.1);
  color: var(--brand-magenta);
}
.vcarousel-track .elig-card:nth-child(4) .elig-icon {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}
.vcarousel-track .elig-card:nth-child(5) .elig-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.vcarousel-track .elig-card:nth-child(6) .elig-icon {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.vcarousel-track .elig-card h4 {
  font-size: 1.38rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.vcarousel-track .elig-card p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
}

/* Age explorer cards inside carousel */
.vcarousel-track .age-explorer-card {
  flex-shrink: 0;
}

.vcarousel-track .age-explorer-card h4 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0f172a;
}

/* Navigation dots */
.vcarousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.vcarousel-dots .vdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.vcarousel-dots .vdot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--brand-cyan);
}

/* Hide the old standalone sections */
.eligibility-section,
.age-relax-section {
  display: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .elig-age-split-grid {
    gap: 0;
  }
  .split-column {
    padding: 0 12px;
  }
  .vcarousel-viewport {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .elig-age-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .split-divider {
    display: none;
  }
  .split-column {
    padding: 0;
  }
  .vcarousel-viewport {
    height: 400px;
  }
}

/* =============================================
   SECTION 2 & 3: VERTICAL CAROUSEL
   ============================================= */
.vcarousel-wrapper {
  position: relative;
}

/* Vertical dots — side position */
.vcarousel-dots.vertical-dots {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  margin-top: 0;
}

/* Active card highlight */
.vcarousel-track .elig-card.is-active {
  border-color: rgba(6, 182, 212, 0.25);
  box-shadow:
    0 12px 32px rgba(6, 182, 212, 0.08),
    0 0 0 1px rgba(6, 182, 212, 0.12);
}

/* Floating badge animation */
.split-col-header {
  animation: badge-float 4s ease-in-out infinite;
}

@keyframes badge-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Age explorer animated border */
.vcarousel-track .age-explorer-card.is-active {
  border-color: rgba(6, 182, 212, 0.25);
  box-shadow:
    0 16px 44px rgba(6, 182, 212, 0.1),
    0 0 0 1px rgba(6, 182, 212, 0.15);
}

.vcarousel-track .age-explorer-card.is-active::before {
  opacity: 1;
}

/* Soft animated border for active cards */
@keyframes border-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.15);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.08);
  }
}

.vcarousel-track .elig-card.is-active,
.vcarousel-track .age-explorer-card.is-active {
  animation: border-pulse 2.8s ease-in-out infinite;
}

/* =============================================
   SECTION 4: EXAM PROCESS — JOURNEY TIMELINE
   ============================================= */

/* Step counter */
.journey-step-counter {
  text-align: center;
  margin-top: 24px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.3px;
}

.journey-step-counter span {
  color: var(--brand-cyan);
  font-weight: 800;
}

/* Horizontal roadmap (desktop) */
.journey-roadmap {
  position: relative;
  margin-top: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}

.journey-roadmap::-webkit-scrollbar {
  display: none;
}

.journey-progress-line {
  position: absolute;
  top: 36px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  z-index: 0;
}

.journey-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--brand-cyan),
    var(--brand-purple),
    var(--brand-magenta)
  );
  border-radius: 3px;
  transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}

.journey-progress-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

.journey-milestones {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  min-width: 700px;
}

.journey-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  flex: 1;
  min-width: 90px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.milestone-number {
  font-size: 0.85rem;
  font-weight: 800;
  color: #94a3b8;
  margin-bottom: 8px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.milestone-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #64748b;
  margin-bottom: 12px;
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}

.journey-milestone:hover .milestone-icon {
  transform: scale(1.1);
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow: 0 12px 32px rgba(6, 182, 212, 0.12);
}

.journey-milestone.active .milestone-icon {
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-purple));
  border-color: transparent;
  color: #fff;
  transform: scale(1.15);
  box-shadow:
    0 16px 40px rgba(6, 182, 212, 0.25),
    0 0 0 4px rgba(6, 182, 212, 0.1);
}

.journey-milestone.active .milestone-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(6, 182, 212, 0.2);
  animation: milestone-ping 2s ease-out infinite;
}

@keyframes milestone-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.milestone-label {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  transition: color 0.3s ease;
}

.journey-milestone.active .milestone-label {
  color: #0f172a;
}

.journey-milestone.active .milestone-number {
  color: var(--brand-cyan);
}

/* Detail cards — CSS Grid overlay: all cards occupy the same cell */
.journey-detail-cards {
  display: grid;
  margin-top: 36px;
  border-radius: 20px;
}

.journey-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0px 0px 20px 20px;
  padding: 32px 36px;
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 0.45s;
}

.journey-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  z-index: 1;
  transition:
    opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 0s;
}

.journey-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--brand-cyan),
    var(--brand-purple),
    var(--brand-magenta)
  );
  /* border-radius: 20px 20px 0 0; */
  opacity: 0.7;
}

.journey-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.jc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-purple));
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
}

.journey-card h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
}

.journey-card p {
  font-size: 1.125rem;
  color: #475569;
  line-height: 1.75;
  /* max-width: 700px; */
}

/* Navigation buttons */
.journey-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.journey-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-main);
  color: #0f172a;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.journey-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

.journey-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Horizontal scroll timeline (mobile) */
@media (max-width: 768px) {
  .journey-roadmap {
    /* No horizontal padding: keeps the absolutely-positioned progress
       line in the same coordinate space as the milestones row below,
       so both scroll in sync (see .journey-progress-line comment). */
    padding: 0 0 12px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .journey-roadmap::-webkit-scrollbar {
    display: none;
  }

  .journey-milestones {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 100%;
    gap: 8px;
    padding: 0;
  }

  /* Exactly 3 steps visible per screen; rest reachable via horizontal scroll */
  .journey-milestone {
    flex: 0 0 calc((100% - 16px) / 3);
    min-width: 0;
    max-width: calc((100% - 16px) / 3);
    scroll-snap-align: center;
  }

  .milestone-icon {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
  }

  .milestone-label {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    min-height: 2.6em;
    padding: 0 2px;
  }

  /* Line must span center-of-first-icon to center-of-last-icon across
     ALL 7 milestones (not just the 3 visible ones), and live in the
     same % coordinate space as .journey-milestone above, so it scrolls
     in sync with the row and .journey-progress-fill's JS-driven width
     percentage lines up with the actual active icon at any scroll
     position. Derived from the 3-per-screen sizing formula above:
     itemWidth = (100% - 16px) / 3; line spans 7 items + 6 gaps minus
     one item width (half hangs off each end at the first/last icon). */
  .journey-progress-line {
    left: calc((100% - 16px) / 6);
    right: auto;
    width: calc(200% + 16px);
  }

  .journey-card {
    padding: 24px 20px;
  }

  .journey-card p {
    text-align: center;
  }

  .journey-btn {
    padding: 11px 20px;
    font-size: 0.8rem;
  }
}

/* =============================================
   CONSOLIDATED MOBILE OVERRIDES
   All breakpoints consolidated for maintainability
   ============================================= */

/* --- Global section padding reduction --- */
@media (max-width: 768px) {
  .exam-snapshot-section,
  .about-exam-section,
  .eligibility-section,
  .elig-checker-section,
  .age-relax-section,
  .syllabus-section,
  .prepare-section,
  .process-section,
  .why-eduooz-section,
  .papers-section,
  .practice-section,
  .materials-section,
  .resources-section,
  .journey-timeline-section {
    padding: 64px 0 52px;
  }

  /* Desktop's margin-bottom (50px) otherwise carries over on mobile,
     stacking on top of the next section's own top padding */
  .materials-section {
    margin-bottom: 0;
  }

  /* Section titles */
  .section-title {
    text-align: center;
    font-size: 2.2rem;
  }
  /* Papers toolbar */
  .papers-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .papers-search {
    min-width: unset;
  }
  .papers-filter {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .papers-filter::-webkit-scrollbar {
    display: none;
  }

  /* Elig checker */
  .elig-checker-card {
    padding: 28px 18px;
  }

  /* Faculty / enroll */
  .faculty-grid {
    grid-template-columns: 1fr 1fr;
  }
  .enroll-grid {
    grid-template-columns: 1fr;
  }

  /* Prepare timeline */
  .prepare-timeline {
    padding-left: 32px;
  }
  .prepare-step {
    padding: 20px 20px;
  }
  .prepare-step::before {
    left: -32px;
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
  }

  /* Journey card */
  .journey-card {
    padding: 22px 18px;
  }
  .journey-card p {
    font-size: 0.95rem;
    text-align: center;
  }
  .journey-nav {
    gap: 10px;
  }

  /* Vcarousel */
  .vcarousel-viewport {
    height: auto !important;
    min-height: 200px;
  }

  /* Resource pills */
  .resources-pills {
    gap: 8px;
  }
  .resource-pill {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}

/* --- Small mobile: tighter everything --- */
@media (max-width: 480px) {
  .exam-snapshot-section,
  .about-exam-section,
  .eligibility-section,
  .elig-checker-section,
  .age-relax-section,
  .syllabus-section,
  .prepare-section,
  .process-section,
  .why-eduooz-section,
  .papers-section,
  .practice-section,
  .materials-section,
  .resources-section,
  .journey-timeline-section {
    padding: 52px 0 40px;
  }

  .section-title {
    font-size: 1.09rem;
    letter-spacing: -0.5px;
  }
  .section-label {
    font-size: 1.05rem;
    padding: 6px 12px;
  }

  /* Why showcase: all cards single col */
  .why-showcase-slide {
    grid-template-columns: 1fr;
  }

  /* Age explorer: single col */
  .age-explorer-grid {
    grid-template-columns: 1fr;
  }

  /* Papers / practice single col already at 768px */
  .papers-grid {
    grid-template-columns: 1fr;
  }
  .practice-grid {
    grid-template-columns: 1fr;
  }

  /* Eligibility grid single col */
  .eligibility-grid {
    grid-template-columns: 1fr;
  }

  /* Why grid single col */
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* Materials single col */
  .materials-grid {
    grid-template-columns: 1fr;
  }

  /* Prepare timeline tighter */
  .prepare-timeline {
    padding-left: 28px;
    margin-top: 28px;
  }
  .prepare-step h4 {
    font-size: 1rem;
  }
  .prepare-step p {
    font-size: 0.9rem;
  }

  /* Journey milestones tighter label */
  .milestone-label {
    font-size: 1.35rem;
  }

  /* Buttons */
  .btn-download-syllabus {
    padding: 13px 24px;
    font-size: 0.9rem;
  }
  .btn-check-elig {
    padding: 14px 24px;
    font-size: 0.92rem;
  }
  .journey-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}

/* --- Extra small (≤360px) --- */
@media (max-width: 360px) {
  .container {
    padding: 0 4%;
  }
  .section-title {
    font-size: 1.65rem;
  }
  .vfc-stats {
    flex-wrap: wrap;
  }
  .vfc-stat-chip {
    flex: none;
    width: calc(50% - 4px);
  }
}

/* ============================================================
   ELIG SCROLL-LOCK — full-viewport two-column sticky experience
   ============================================================ */

/* Scene: min-height keeps the sticky section in range by 2px;
   JS wheel interception holds the page in place while columns scroll */
.elig-scroll-scene {
  position: relative;
}

/* Section: natural page flow — height expands with content */
.elig-scroll-scene .elig-age-split-section {
  position: relative;
  height: auto;
  overflow: visible;
  padding: 80px 0;
  z-index: 10;
}

/* Inner container: auto height, no clipping */
.elig-sticky-container {
  height: auto;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  box-sizing: border-box;
  overflow: visible;
}

/* Section header */
.elig-section-head {
  margin-bottom: 1.25rem;
}

/* Grid: columns size to their own content height */
.elig-scroll-scene .elig-age-split-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
  height: auto;
}

/* Each split-column: flex column so pane fills remaining space */
.elig-scroll-scene .split-column {
  display: flex;
  flex-direction: column;
  height: auto;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.68, 0, 1.2),
    transform 0.7s cubic-bezier(0.22, 0.68, 0, 1.2);
}

.elig-scroll-scene .split-column.elig-visible {
  opacity: 1;
  transform: translateY(0);
}

.elig-scroll-scene #elig-carousel-col {
  transition-delay: 0s;
}
.elig-scroll-scene #age-carousel-col {
  transition-delay: 0.15s;
}

/* Base pane: auto height, hidden scrollbar */
.elig-col-pane {
  height: auto;
  overflow-x: hidden;
  position: relative;
  padding-right: 0;

  /* Hide scrollbar — Firefox */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* No fade mask */
  -webkit-mask-image: none;
  mask-image: none;
}

/* Hide scrollbar — Chrome / Safari / Edge */
.elig-col-pane::-webkit-scrollbar {
  display: none;
}

/* Left pane: cap height, allow invisible scroll through 6 text-heavy cards */
#elig-col-pane {
  max-height: 560px;
  overflow-y: auto;
}

/* Right pane: show ALL 7 accordion cards at once — no clipping, no scroll */
#age-col-pane {
  height: auto;
  overflow: visible;
}

/* Right pane: tighter gap, full width accordion cards */
#age-col-pane .elig-col-track {
  gap: 8px;
  padding: 0.25rem;
}

#age-col-pane .age-explorer-front {
  padding: 12px 16px;
  gap: 12px;
}

#age-col-pane .age-explorer-icon {
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
}

#age-col-pane .age-explorer-info h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

/* Left column: horizontal card layout — icon left, text right */
#elig-col-pane .elig-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 18px 20px;
}

#elig-col-pane .elig-card .elig-icon {
  margin: 0;
  flex-shrink: 0;
}

#elig-col-pane .elig-card h4 {
  margin-bottom: 6px;
}

/* Base track layout */
.elig-col-track {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem;
}

/* --- Tablet (768–1024px): tighter padding, reduce left-pane cap --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .elig-sticky-container {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
  }
  .elig-section-head {
    margin-bottom: 1rem;
  }
  #elig-col-pane {
    max-height: 460px;
  }
}

/* --- Mobile (<768px): columns stacked --- */
@media (max-width: 767px) {
  .elig-scroll-scene .elig-age-split-section {
    padding: 60px 0;
  }
  .elig-sticky-container {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .elig-scroll-scene .elig-age-split-grid {
    display: flex !important;
    flex-direction: column;
    gap: 40px;
  }
  .split-divider {
    display: none !important;
  }
  .elig-scroll-scene .split-column {
    height: auto;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
  }
  #elig-col-pane {
    max-height: 380px;
    overflow-y: auto;
  }
  #age-col-pane {
    height: auto;
    overflow: visible;
  }
  .elig-scroll-scene .split-column.elig-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .split-column {
    padding: 0 0 32px;
  }
}

/* ============================================================
   MOBILE-ONLY RESPONSIVENESS FIXES (max-width: 767px)
   Do NOT modify tablet (768px+) or desktop behaviour.
   ============================================================ */

/* ── 1. ABOUT SECTION: Reorder content above carousel ──────── */
@media (max-width: 767px) {
  /* Convert grid to flex column so order works on all descendants */
  .aev-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Remove box from content col so its children become direct flex items */
  .aev-content-col {
    display: contents;
  }

  /* Order: heading → desc → carousel → badges */
  .aev-heading {
    order: 1;
    text-align: center;
  }
  .aev-desc {
    order: 2;
    margin-bottom: 4px;
    text-align: center;
  }
  .aev-carousel-col {
    order: 3;
  }
  .aev-badges {
    order: 4;
  }

  /* Ensure carousel col overrides the 1024px order rule */
  .aev-carousel-col {
    order: 3;
  }
}

/* ── 2. ELIGIBILITY SECTION: Center-align headings ─────────── */
@media (max-width: 767px) {
  .split-col-header,
  .split-col-header.content-left,
  .split-col-header.content-right {
    justify-content: center;
    text-align: center;
  }
}

/* ── 3. STUDY PLAN: Reduce .step-duration font size ────────── */
@media (max-width: 767px) {
  .prepare-step .step-duration {
    font-size: 0.72rem;
    padding: 3px 8px;
    white-space: nowrap;
  }
}

/* ── 4. MILESTONE LABELS: Increase font size ───────────────── */
@media (max-width: 767px) {
  .milestone-label {
    font-size: 1rem;
    font-weight: 700;
  }
}

/* ── 5. SECTION TITLES: Fix over-reduced mobile size ───────── */
@media (max-width: 767px) {
  .section-title {
    font-size: 1.9rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
}

/* ── 7. GOOGLE REVIEWS & TRUST WALL: Center all elements ───── */
@media (max-width: 767px) {
  .greview-section {
    padding: 40px 0 40px;
  }
  .greview-section .text-center {
    text-align: left;
  }
  .greview-rating-hero {
    align-items: center;
    width: 100%;
  }
  .greview-trust-row {
    justify-content: flex-start;
    text-align: left;
  }
  .greview-trust-badge {
    justify-content: flex-start;
  }
  .greview-dots {
    justify-content: center;
  }
  .greview-carousel-wrap {
    justify-content: center;
  }
  /* Arrows hidden on mobile — cards move via touch swipe (already wired
     in initReviewCarousel's touchstart/touchend handlers below). Hiding
     these flex items lets the viewport reclaim their width, so the
     single visible card (see getVisible() in course-landing.js) spans
     the same left/right padding as the rest of the page — no separate
     margin needed. Desktop arrows are untouched above this breakpoint. */
  .greview-arrow {
    display: none;
  }
}

/* ── 8. DOWNLOAD APP: Center all content ───────────────────── */
@media (max-width: 767px) {
  .dapp-grid {
    text-align: center;
  }
  .dapp-image-col {
    justify-content: center;
  }
  .dapp-content-col {
    align-items: center;
  }
  .dapp-heading,
  .dapp-desc {
    text-align: center;
  }
  .dapp-features {
    justify-content: center;
    align-items: center;
  }
  .dapp-cta {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ── 9. REVIEW STATS BAR: Fix overflow & responsiveness ────── */
@media (max-width: 767px) {
  .greview-stats-bar {
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .greview-divider-v {
    display: none;
  }
  .greview-counter-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
    width: 100%;
    justify-items: center;
    flex: none;
  }
  .greview-counter-item {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .greview-count {
    font-size: 1.6rem;
  }
  .greview-counter-item span {
    font-size: 0.85rem;
  }
}

/* ── 10. GENERAL OVERFLOW / SCROLLING FIXES ────────────────── */
@media (max-width: 767px) {
  /* Prevent page-wide horizontal scroll */
  .greview-section,
  .practice-section,
  .about-exam-section,
  .greview-carousel-wrap {
    overflow-x: hidden;
  }

  /* Carousel viewport must stay within screen */
  .greview-carousel-viewport {
    max-width: 100%;
    overflow: hidden;
  }

  /* Snapshot grid: ensure cards wrap cleanly */
  .snapshot-grid {
    overflow: hidden;
  }

  .exam-snapshot-section .snapshot-grid {
    overflow-x: auto;
    overflow-y: visible;
  }

  /* Ensure review cards don't force horizontal scroll */
  .greview-card {
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ── Extra small (≤480px) additional tightening ─────────────── */
@media (max-width: 480px) {
  /* Stretch trust badges full-width */
  .greview-trust-badge {
    width: 100%;
    justify-content: flex-start;
  }

  /* Milestone label stays visible */
  .milestone-label {
    font-size: 0.88rem;
  }

  /* Step duration stays compact */
  .prepare-step .step-duration {
    font-size: 0.68rem;
  }
}

/* ==========================================================
   PREMIUM APP SHOWCASE (PAS) — moved from aiims-norcet.html
   ========================================================== */

/* ── Section shell — LIGHT THEME ── */
.pas-section {
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
  background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 50%, #f0fafe 100%);
}
.pas-ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.pas-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.09;
}
.pas-blob-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #5b21b6, transparent 70%);
  top: -120px;
  left: -100px;
}
.pas-blob-2 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #06b6d4, transparent 70%);
  bottom: -80px;
  right: -80px;
}
.pas-blob-3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #c026d3, transparent 70%);
  top: 50%;
  right: 25%;
  transform: translateY(-50%);
}

/* ── Two-col grid ── */
.pas-two-col {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 56px;
  align-items: center;
}

/* ═══ LEFT: PHONE COLUMN ═══ */
.pas-phone-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pas-phone-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1200px;
  perspective-origin: 50% 40%;
}
.pas-phone-wrapper {
  position: relative;
  z-index: 2;
  animation: pasPhoneFloat 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes pasPhoneFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Phone frame — keep device dark (realistic) */
.pas-phone-frame {
  width: 292px;
  height: 600px;
  background: linear-gradient(160deg, #1e2030, #0d0f1e);
  border-radius: 54px;
  border: 8px solid #2a2d45;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.14),
    0 40px 80px rgba(15, 23, 42, 0.28),
    0 14px 36px rgba(91, 33, 182, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.3s ease;
}
/* Side buttons */
.pas-phone-frame::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 102px;
  width: 4px;
  height: 82px;
  background: #2a2d45;
  border-radius: 2px;
}
.pas-phone-frame::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 128px;
  width: 4px;
  height: 56px;
  background: #2a2d45;
  border-radius: 2px;
  box-shadow: 0 74px 0 #2a2d45;
}

/* Dynamic island */
.pas-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 102px;
  height: 31px;
  background: #0d0f1e;
  border-radius: 16px;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Status bar */
.pas-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 18px 6px;
  z-index: 15;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* Gloss sweep */
.pas-gloss-sweep {
  position: absolute;
  top: -50%;
  left: -80%;
  width: 50%;
  height: 250%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  transform: rotate(20deg);
  z-index: 25;
  pointer-events: none;
  animation: pasGlossAnim 8s ease-in-out infinite;
}
@keyframes pasGlossAnim {
  0% {
    left: -80%;
    opacity: 1;
  }
  35% {
    left: 170%;
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  99% {
    opacity: 0;
    left: -80%;
  }
  100% {
    opacity: 0;
    left: -80%;
  }
}

/* Notification badge */
.pas-notif-badge {
  position: absolute;
  top: 46px;
  left: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 18;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.pas-notif-badge.pas-notif-visible {
  opacity: 1;
  transform: translateY(0);
}
.pas-notif-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #06b6d4, #5b21b6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6rem;
  color: white;
}
.pas-notif-title {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pas-notif-sub {
  display: block;
  font-size: 0.48rem;
  color: rgba(148, 163, 184, 0.8);
  line-height: 1.3;
}

/* Screen area — stays dark (realistic app UI) */
.pas-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 44px;
  overflow: hidden;
  background: #0f172a;
}

/* Screen slides */
.pas-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px) scale(0.99);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.pas-slide.pas-slide-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pas-slide.pas-slide-exit {
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
}

/* Shared screen UI */
.pas-screen-ui {
  padding: 46px 10px 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.ps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ps-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #5b21b6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.45rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.ps-greeting {
  font-size: 0.48rem;
  color: #64748b;
  line-height: 1;
}
.ps-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
}
.ps-notif-dot {
  font-size: 0.58rem;
  color: #64748b;
  position: relative;
}

/* Dashboard: stat chips */
.ps-stat-row {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ps-stat-chip {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-stat-chip i {
  font-size: 0.55rem;
}
.ps-stat-chip span {
  font-size: 0.62rem;
  font-weight: 800;
  color: #e2e8f0;
}
.ps-stat-chip small {
  font-size: 0.4rem;
  color: #64748b;
}
.ps-chip-cyan i {
  color: #06b6d4;
}
.ps-chip-purple i {
  color: #a78bfa;
}
.ps-chip-green i {
  color: #10b981;
}

/* Dashboard: progress */
.ps-progress-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.ps-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.46rem;
  color: #94a3b8;
}
.ps-prog-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.ps-prog-fill {
  height: 100%;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   QP EXPLORER — Question Papers Unified Design System (qp-)
   Same visual language across every course landing page.
   Only card content differs per page; everything else is shared.
   ═══════════════════════════════════════════════════════════════ */

/* Two-panel layout */
.qp-explorer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
  align-items: start;
}

/* ─── LEFT: Preview Panel ─── */
.qp-preview-panel {
  position: sticky;
  top: 24px;
}

.qp-preview-card {
  background: rgba(8, 4, 18, 0.72);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 50px rgba(255, 255, 255, 0.012);
}

/* Toolbar */
.qp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.qp-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.qp-toolbar-year {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--brand-cyan, #06b6d4);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  min-height: 14px;
}

.qp-toolbar-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.qp-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.qp-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.22s ease;
  text-decoration: none;
}

.qp-tbtn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.qp-tbtn-dl {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.25);
  color: var(--brand-cyan, #06b6d4);
}

.qp-tbtn-dl:hover {
  background: rgba(6, 182, 212, 0.22);
  color: #fff;
  border-color: rgba(6, 182, 212, 0.45);
}

.qp-zoom-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  min-width: 34px;
  text-align: center;
}

/* Frame / iframe area */
.qp-frame-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #0c0a1a;
  overflow: hidden;
}

#qp-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
  position: relative;
  z-index: 1;
}

#qp-iframe.qp-loaded {
  opacity: 1;
}

/* Empty / locked / skeleton states */
.qp-empty-state,
.qp-locked-state,
.qp-skeleton {
  position: absolute;
  inset: 0;
}

/* Empty state (no paper selected) */
.qp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  background: #0c0a1a;
  z-index: 4;
  transition: opacity 0.3s ease;
}

.qp-empty-state.qp-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Locked/enroll state (paper selected, no PDF) */
.qp-locked-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  background: rgba(8, 4, 18, 0.94);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.qp-locked-state.qp-show {
  opacity: 1;
  pointer-events: auto;
}

/* Shared state icon + text */
.qp-state-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  color: #f87171;
  flex-shrink: 0;
}

.qp-state-title {
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 240px;
  line-height: 1.35;
}

.qp-state-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.44);
  margin: 0;
  max-width: 230px;
  line-height: 1.55;
}

/* Download CTA inside locked state */
.qp-dl-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  background: linear-gradient(135deg, var(--brand-cyan, #06b6d4), #0891b2);
  color: #fff;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--font-main);
  text-decoration: none;
  margin-top: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3);
}

.qp-dl-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.45);
  color: #fff;
}

/* Skeleton loader */
.qp-skeleton {
  background: #0e0b20;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.qp-skeleton.qp-show {
  opacity: 1;
  pointer-events: auto;
}

.qp-sk-bar {
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: qp-shimmer 1.6s ease-in-out infinite;
}

.qp-sk-bar.qp-sk-short {
  width: 55%;
}
.qp-sk-bar.qp-sk-med {
  width: 75%;
}

.qp-sk-block {
  flex: 1;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: qp-shimmer 1.6s ease-in-out infinite;
  margin: 4px 0;
}

@keyframes qp-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ─── RIGHT: Library Panel ─── */
.qp-library-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.qp-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Year tabs */
.qp-year-tabs {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 5px;
  flex-wrap: wrap;
}

.qp-year-tab {
  flex: 1;
  min-width: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--brand-gray, #94a3b8);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.qp-year-tab:hover {
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.2),
    rgba(91, 33, 182, 0.15)
  );
}

.qp-year-tab.active {
  background: linear-gradient(
    135deg,
    var(--brand-cyan, #06b6d4),
    var(--brand-purple, #a78bfa)
  );
  color: #fff;
  box-shadow: 0 2px 12px rgba(6, 182, 212, 0.14);
}

.qp-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .qp-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Paper Card */
.qp-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  /* background: rgba(255, 255, 255, 0.03); */
  border: #eeecec 1px solid;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  list-style: none;
}

.qp-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.qp-card.qp-active {
  background: rgba(6, 182, 212, 0.07);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.18),
    0 8px 24px rgba(6, 182, 212, 0.1);
}

.qp-card.qp-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--brand-cyan, #06b6d4),
    var(--brand-purple, #a78bfa)
  );
  border-radius: 16px 16px 0 0;
}

/* Card icon */
.qp-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f87171;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qp-card:hover .qp-card-icon-wrap,
.qp-card.qp-active .qp-card-icon-wrap {
  transform: scale(1.1) rotate(-4deg);
  background: rgba(239, 68, 68, 0.18);
}

/* Card body */
.qp-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Year badge */
.qp-card-year {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  padding: 2px 9px;
  border-radius: 6px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  color: var(--brand-cyan, #06b6d4);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  width: fit-content;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.qp-card.qp-active .qp-card-year {
  background: var(--brand-cyan, #06b6d4);
  color: #fff;
  border-color: transparent;
}

/* Card title */
.qp-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Crawlable link wrapping the card title text (added for PDF discoverability).
   Neutralizes default browser link styling so it renders identically to the
   plain text it replaces; the card itself still handles the click/preview. */
.qp-card-pdf-link {
  color: inherit;
  text-decoration: none;
  cursor: inherit;
}

/* Category */
.qp-card-category {
  font-size: 0.74rem;
  color: var(--brand-gray, #94a3b8);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card footer row */
.qp-card-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 3px;
}

/* Page count */
.qp-card-pages {
  font-size: 0.71rem;
  color: var(--brand-gray, #94a3b8);
  display: flex;
  align-items: center;
  gap: 4px;
}

.qp-card-pages i {
  font-size: 0.6rem;
}

/* Preview badge */
.qp-preview-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(6, 182, 212, 0.09);
  border: 1px solid rgba(6, 182, 212, 0.2);
  color: var(--brand-cyan, #06b6d4);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

.qp-preview-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-cyan, #06b6d4);
  animation: qp-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes qp-dot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.qp-card.qp-active .qp-preview-badge {
  content: "Selected Paper";
  background: rgba(6, 182, 212, 0.22);
  border-color: rgba(6, 182, 212, 0.45);
}

/* No-results empty state */
.qp-no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 24px;
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
}

.qp-no-results.qp-show {
  display: flex;
}

.qp-no-results i {
  font-size: 2.4rem;
  opacity: 0.45;
}

.qp-no-results p {
  font-size: 0.95rem;
  font-weight: 600;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1280px) {
  .qp-preview-panel {
    top: 16px;
  }
  .qp-frame-wrap {
    aspect-ratio: 5 / 4;
  }
}
@media (max-width: 1024px) {
  .qp-explorer {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .qp-library-panel {
    order: -1;
  }
  .qp-preview-panel {
    position: static;
    top: auto;
  }
  .qp-frame-wrap {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .qp-card-grid {
    gap: 8px;
  }
  .qp-card {
    padding: 13px 12px;
    gap: 11px;
  }
  .qp-card-icon-wrap {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
    border-radius: 10px;
  }
  .qp-card-title {
    font-size: 0.86rem;
  }
  .qp-card-category {
    font-size: 0.7rem;
  }
  .qp-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }
  .qp-toolbar-actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
  }
  .qp-toolbar-title {
    max-width: 100%;
    white-space: normal;
  }
  .qp-tbtn-dl {
    flex: 1;
    justify-content: center;
  }
  .qp-year-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .qp-year-tabs::-webkit-scrollbar {
    display: none;
  }
  .qp-year-tab {
    flex: none;
    padding: 6px 12px;
    font-size: 0.73rem;
  }
  .qp-frame-wrap {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 480px) {
  .qp-card {
    padding: 12px 11px;
  }
  .qp-toolbar {
    padding: 10px 12px;
  }
  .qp-tbtn {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }
  .qp-frame-wrap {
    aspect-ratio: 1 / 1.3;
  }
  .qp-state-icon {
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
  }
  .qp-dl-cta-btn {
    padding: 10px 20px;
    font-size: 0.85rem;
  }
}

/* ─── Subscription lock overlay (blurred PDF + Subscribe/Download) ─── */
.qp-sub-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  background: rgba(8, 4, 18, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.qp-sub-lock.qp-show {
  opacity: 1;
  pointer-events: auto;
}

.qp-sub-lock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.qp-sub-lock-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--brand-cyan, #06b6d4);
  flex-shrink: 0;
}

.qp-sub-lock-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 240px;
  line-height: 1.35;
}

.qp-sub-lock-sub {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 240px;
  line-height: 1.5;
}

.qp-sub-lock-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.qp-sub-btn,
.qp-sub-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.25s ease;
}

.qp-sub-btn {
  background: linear-gradient(135deg, var(--brand-cyan, #06b6d4), #0891b2);
  border: none;
  color: #fff;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3);
}

.qp-sub-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.45);
}

.qp-sub-dl-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
}

.qp-sub-dl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Toolbar "Subscribed" status badge */
.qp-tbtn-subscribed {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 32px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.qp-tbtn-subscribed.qp-show {
  display: inline-flex;
}

@media (max-width: 640px) {
  .qp-sub-lock {
    padding: 20px;
  }
  .qp-sub-lock-icon {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }
  .qp-sub-btn,
  .qp-sub-dl-btn {
    padding: 10px 18px;
    font-size: 0.78rem;
  }
}

/* ─── QP subscribe/lead modal (popup, reuses .glass-form) ─── */
body.qp-modal-open {
  overflow: hidden;
}

.qp-lead-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 2, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.qp-lead-modal-overlay.qp-active {
  opacity: 1;
  pointer-events: auto;
}

.qp-lead-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 22px;
  padding: 36px 32px 32px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.qp-lead-modal-overlay.qp-active .qp-lead-modal-content {
  transform: scale(1) translateY(0);
}

.qp-lead-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qp-lead-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.qp-lead-modal-header {
  margin-bottom: 22px;
  padding-right: 30px;
}

.qp-lead-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-cyan, #06b6d4);
  margin-bottom: 8px;
}

.qp-lead-modal-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.25;
}

.qp-lead-modal-sub {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.qp-lead-modal-content .glass-form {
  background: #f8fafc;
  padding: 26px;
  gap: 20px;
}

@media (max-width: 640px) {
  .qp-lead-modal-content {
    padding: 28px 20px 24px;
    border-radius: 18px;
  }
  .qp-lead-modal-content .form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Dashboard: upcoming */
.ps-upcoming-card {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 10px;
  padding: 8px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-top: 2px;
}
.ps-upcoming-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-upcoming-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #06b6d4, #5b21b6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: white;
  flex-shrink: 0;
}
.ps-upcoming-title {
  font-size: 0.52rem;
  font-weight: 700;
  color: #e2e8f0;
}
.ps-upcoming-time {
  font-size: 0.43rem;
  color: #64748b;
}
.ps-join-btn {
  background: linear-gradient(135deg, #06b6d4, #5b21b6);
  color: white;
  font-size: 0.48rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Live class screen */
.ps-live-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-size: 0.45rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.ps-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
  animation: pasBlink 1s ease-in-out infinite;
}
@keyframes pasBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.ps-video-area {
  flex-shrink: 0;
}
.ps-video-thumb {
  height: 108px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-video-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.08),
    rgba(91, 33, 182, 0.12)
  );
}
.ps-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-play-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: white;
  padding-left: 2px;
}
.ps-viewer-count {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 0.42rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 5px;
  border-radius: 4px;
}
.ps-class-info {
  flex-shrink: 0;
}
.ps-class-title {
  font-size: 0.55rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
}
.ps-class-instructor {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
.ps-inst-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #5b21b6);
  font-size: 0.42rem;
  color: white;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-class-instructor span {
  font-size: 0.44rem;
  color: #94a3b8;
}
.ps-chat-preview {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.ps-chat-item {
  font-size: 0.44rem;
  color: #94a3b8;
  line-height: 1.4;
}
.ps-chat-name {
  font-weight: 700;
  color: #06b6d4;
  margin-right: 2px;
}

/* CBT screen */
.ps-timer-badge {
  font-size: 0.48rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ps-q-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ps-q-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}
.ps-q-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #5b21b6);
  border-radius: 2px;
}
.ps-q-count {
  font-size: 0.44rem;
  color: #64748b;
  white-space: nowrap;
}
.ps-question-box {
  flex-shrink: 0;
}
.ps-q-num {
  font-size: 0.44rem;
  color: #64748b;
  margin-bottom: 3px;
}
.ps-q-text {
  font-size: 0.52rem;
  color: #e2e8f0;
  line-height: 1.45;
  font-weight: 500;
}
.ps-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.ps-option {
  font-size: 0.48rem;
  color: #94a3b8;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  line-height: 1.3;
}
.ps-option-selected {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.4);
  color: #06b6d4;
  font-weight: 700;
}
.ps-cbt-footer {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}
.ps-cbt-foot-item {
  font-size: 0.46rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Analytics screen */
.ps-rank-card {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.1),
    rgba(91, 33, 182, 0.1)
  );
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ps-rank-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-rank-label {
  font-size: 0.44rem;
  color: #64748b;
}
.ps-rank-num {
  font-size: 1.1rem;
  font-weight: 900;
  color: #06b6d4;
  line-height: 1;
}
.ps-rank-trend {
  font-size: 0.44rem;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 2px;
}
.ps-subject-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ps-sub-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ps-sub-row > span:first-child {
  font-size: 0.43rem;
  color: #94a3b8;
  min-width: 70px;
}
.ps-sub-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.ps-sub-bar > div {
  height: 100%;
  border-radius: 3px;
}
.ps-sub-pct {
  font-size: 0.42rem;
  color: #64748b;
  min-width: 22px;
  text-align: right;
}
.ps-accuracy-badge {
  font-size: 0.48rem;
  color: #94a3b8;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.ps-accuracy-badge strong {
  color: #10b981;
}

/* Materials screen */
.ps-dl-count {
  font-size: 0.46rem;
  color: #06b6d4;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ps-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 8px;
  flex-shrink: 0;
}
.ps-material-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  overflow: hidden;
}
.ps-material-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  padding: 6px 8px;
}
.ps-mat-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}
.ps-mat-pdf {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.ps-mat-ppt {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
.ps-mat-vid {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
}
.ps-mat-info {
  flex: 1;
  overflow: hidden;
}
.ps-mat-title {
  font-size: 0.48rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-mat-meta {
  font-size: 0.42rem;
  color: #64748b;
}
.ps-mat-check,
.ps-mat-dl {
  flex-shrink: 0;
  font-size: 0.6rem;
}

/* Home indicator */
.pas-home-indicator {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  z-index: 20;
}

/* Phone shadow */
.pas-shadow-wrap {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 210px;
  height: 32px;
}
.pas-phone-shadow {
  width: 100%;
  height: 100%;
  background: rgba(91, 33, 182, 0.32);
  border-radius: 50%;
  filter: blur(22px);
  animation: pasShadowFloat 6s ease-in-out infinite;
}
@keyframes pasShadowFloat {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
    filter: blur(22px);
  }
  50% {
    transform: scale(0.72) translateY(10px);
    opacity: 0.35;
    filter: blur(32px);
  }
}

/*  RIGHT: CONTENT COLUMN  LIGHT THEME */
.pas-content-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Section label — use standard light-theme style */
.pas-content-col .section-label {
  background: rgba(255, 255, 255, 0.7);
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  align-self: flex-start;
}

@media (max-width: 767px) {
  .pas-content-col .section-label {
    align-self: center;
  }
  .pas-heading {
    text-align: center;
  }
  .pas-desc {
    text-align: center;
  }
}

/* Heading */
.pas-heading {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 0;
}
.pas-heading .text-gradient {
  background: var(--brand-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.pas-desc {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #475569;
  margin: 0;
}

/* Stats grid */
.pas-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pas-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.pas-stat-item.pas-stat-visible {
  opacity: 1;
  transform: translateY(0);
}
.pas-circle-wrap {
  position: relative;
  width: 76px;
  height: 76px;
}
.pas-circle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pas-circle-progress {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.pas-circle-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.pas-circle-num {
  font-size: 1rem;
  font-weight: 900;
  color: #0f172a;
}
.pas-circle-suf {
  font-size: 0.6rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 2px;
}
.pas-stat-label {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
  text-align: center;
}

/* Feature cards */
.pas-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pas-feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
  opacity: 0;
  transform: translateX(16px);
}
.pas-feature-card.pas-card-visible {
  opacity: 1;
  transform: translateX(0);
}
.pas-feature-card:hover {
  background: #f0fbfe;
  border-color: rgba(6, 182, 212, 0.35);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.1);
}
.pas-feature-card.pas-card-active {
  background: #e8f9fd;
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.14);
}
.pas-feat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.25s ease;
}
.pas-feature-card:hover .pas-feat-icon {
  transform: scale(1.08);
}
.pas-feat-body {
  flex: 1;
}
.pas-feat-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
}
.pas-feat-sub {
  font-size: 1rem;
  color: #64748b;
  margin-top: 1px;
}
.pas-feat-arrow {
  color: rgba(100, 116, 139, 0.4);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition:
    color 0.25s,
    transform 0.25s;
}
.pas-feature-card:hover .pas-feat-arrow,
.pas-feature-card.pas-card-active .pas-feat-arrow {
  color: #06b6d4;
  transform: translateX(2px);
}

/* CTA buttons */
.pas-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease 0.4s,
    transform 0.5s ease 0.4s;
}
.pas-cta-row.pas-cta-visible {
  opacity: 1;
  transform: translateY(0);
}
.pas-store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--font-main);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.pas-store-btn:hover {
  transform: translateY(-3px);
}

/* Google Play — site theme gradient, authentic multi-color icon */
.pas-play-btn {
  background: linear-gradient(135deg, #4311d7 0%, #5b21b6 55%, #0e9ac0 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(91, 33, 182, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pas-play-btn:hover {
  box-shadow:
    0 10px 36px rgba(91, 33, 182, 0.5),
    0 0 0 1px rgba(6, 182, 212, 0.25);
}
.pas-play-btn .pas-store-small,
.pas-play-btn .pas-store-big {
  color: #ffffff;
}

/* App Store — deep dark site-aligned accent, white Apple icon */
.pas-apple-btn {
  background: linear-gradient(135deg, #0f0a24 0%, #1e0e42 100%);
  color: #ffffff;
  border: 1px solid rgba(91, 33, 182, 0.4);
  box-shadow: 0 4px 18px rgba(15, 10, 36, 0.4);
}
.pas-apple-btn:hover {
  background: linear-gradient(135deg, #1a1040 0%, #2d1b5a 100%);
  box-shadow:
    0 10px 36px rgba(91, 33, 182, 0.4),
    0 0 0 1px rgba(91, 33, 182, 0.5);
}
.pas-apple-btn i {
  font-size: 1.5rem;
  color: #ffffff;
}
.pas-apple-btn .pas-store-small,
.pas-apple-btn .pas-store-big {
  color: #ffffff;
}

.pas-store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.pas-store-small {
  font-size: 0.55rem;
  font-weight: 600;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pas-store-big {
  font-size: 0.95rem;
  font-weight: 800;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .pas-phone-wrapper {
    animation: none;
  }
  .pas-phone-shadow {
    animation: none;
  }
  .pas-gloss-sweep {
    animation: none;
    display: none;
  }
  .pas-slide,
  .pas-notif-badge {
    transition: opacity 0.01s;
  }
  .pas-circle-progress {
    transition: stroke-dashoffset 0.01s;
  }
  .pas-feature-card,
  .pas-stat-item,
  .pas-cta-row {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .pas-phone-frame {
    width: 268px;
    height: 550px;
    border-radius: 50px;
  }
  .pas-phone-frame::before {
    top: 94px;
    height: 75px;
  }
  .pas-phone-frame::after {
    top: 118px;
    height: 52px;
    box-shadow: 0 68px 0 #2a2d45;
  }
  .pas-notch {
    width: 94px;
    height: 28px;
  }
  .pas-screen {
    border-radius: 40px;
  }
  .pas-home-indicator {
    width: 70px;
  }
  .pas-shadow-wrap {
    width: 192px;
  }
}
@media (max-width: 1024px) {
  .pas-two-col {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .pas-phone-frame {
    width: 248px;
    height: 509px;
    border-radius: 48px;
  }
  .pas-phone-frame::before {
    top: 87px;
    height: 70px;
  }
  .pas-phone-frame::after {
    top: 109px;
    height: 48px;
    box-shadow: 0 63px 0 #2a2d45;
  }
  .pas-notch {
    width: 88px;
    height: 26px;
  }
  .pas-screen {
    border-radius: 38px;
  }
  .pas-home-indicator {
    width: 64px;
  }
  .pas-shadow-wrap {
    width: 178px;
    height: 28px;
  }
  .pas-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .pas-section {
    padding: 40px 0 40px;
  }
  .pas-two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pas-phone-col {
    order: 1;
  }
  .pas-content-col {
    order: 2;
  }
  .pas-phone-frame {
    width: 240px;
    height: 493px;
    border-radius: 46px;
  }
  .pas-phone-frame::before {
    top: 84px;
    height: 67px;
  }
  .pas-phone-frame::after {
    top: 105px;
    height: 46px;
    box-shadow: 0 61px 0 #2a2d45;
  }
  .pas-notch {
    width: 84px;
    height: 25px;
    border-radius: 13px;
  }
  .pas-screen {
    border-radius: 37px;
  }
  .pas-home-indicator {
    width: 62px;
  }
  .pas-shadow-wrap {
    width: 172px;
    height: 26px;
    bottom: -26px;
  }
  .pas-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .pas-circle-wrap {
    width: 60px;
    height: 60px;
  }
  .pas-circle-num {
    font-size: 0.85rem;
  }
}
@media (max-width: 480px) {
  .pas-phone-frame {
    width: 210px;
    height: 431px;
    border-radius: 42px;
  }
  .pas-phone-frame::before {
    top: 80px;
    height: 64px;
  }
  .pas-phone-frame::after {
    top: 100px;
    height: 44px;
    box-shadow: 0 58px 0 #2a2d45;
  }
  .pas-notch {
    width: 80px;
    height: 24px;
    border-radius: 12px;
  }
  .pas-screen {
    border-radius: 34px;
  }
  .pas-home-indicator {
    width: 60px;
  }
  .pas-shadow-wrap {
    width: 158px;
    height: 24px;
    bottom: -24px;
  }
  .pas-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pas-cta-row {
    flex-direction: column;
  }
  .pas-store-btn {
    justify-content: center;
  }
}

/* ═══ PHONE SCREEN — FIGMA APP IMAGES ═══ */
.pas-screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 44px;
  user-select: none;
  -webkit-user-drag: none;
}

/* ═══ PHONE SCREEN — LIGHT LAVENDER THEME ═══ */
.pas-screen {
  background: #f5f3ff;
}
.pas-notch {
  background: #1e1b4b;
}
.pas-status-bar {
  color: rgba(30, 27, 75, 0.5);
}
.pas-home-indicator {
  background: rgba(109, 40, 217, 0.28);
}

/* Notification badge */
.pas-notif-badge {
  background: rgba(245, 243, 255, 0.96);
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.pas-notif-title {
  color: #1e1b4b;
}
.pas-notif-sub {
  color: #7c3aed;
}

/* Header */
.ps-greeting {
  color: #7c3aed;
}
.ps-name {
  color: #1e1b4b;
}
.ps-notif-dot {
  color: #8b5cf6;
}

/* Stat chips */
.ps-stat-chip {
  background: rgba(139, 92, 246, 0.07);
  border: 1px solid rgba(139, 92, 246, 0.14);
}
.ps-stat-chip span {
  color: #1e1b4b;
}
.ps-stat-chip small {
  color: #7c3aed;
}

/* Progress */
.ps-progress-label {
  color: #6d28d9;
}
.ps-prog-bar {
  background: rgba(139, 92, 246, 0.12);
}

/* Upcoming card */
.ps-upcoming-card {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.ps-upcoming-title {
  color: #1e1b4b;
}
.ps-upcoming-time {
  color: #7c3aed;
}

/* Video thumbnail */
.ps-video-thumb {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.ps-video-thumb::before {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.05),
    rgba(91, 33, 182, 0.07)
  );
}
.ps-play-ring {
  background: rgba(139, 92, 246, 0.15);
  border: 1.5px solid rgba(139, 92, 246, 0.45);
  color: #5b21b6;
}

/* Live class */
.ps-class-title {
  color: #1e1b4b;
}
.ps-class-instructor span {
  color: #6d28d9;
}
.ps-chat-preview {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
}
.ps-chat-item {
  color: #5b21b6;
}

/* CBT / Quiz */
.ps-q-bar {
  background: rgba(139, 92, 246, 0.12);
}
.ps-q-count {
  color: #7c3aed;
}
.ps-q-num {
  color: #7c3aed;
}
.ps-q-text {
  color: #1e1b4b;
}
.ps-option {
  color: #3730a3;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
}
.ps-option-selected {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.45);
  color: #5b21b6;
}

/* Analytics */
.ps-rank-card {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08),
    rgba(91, 33, 182, 0.08)
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.ps-rank-label {
  color: #7c3aed;
}
.ps-sub-row > span:first-child {
  color: #5b21b6;
}
.ps-sub-bar {
  background: rgba(139, 92, 246, 0.12);
}
.ps-sub-pct {
  color: #7c3aed;
}
.ps-accuracy-badge {
  color: #5b21b6;
  background: rgba(139, 92, 246, 0.07);
  border: 1px solid rgba(139, 92, 246, 0.12);
}

/* Materials */
.ps-dl-count {
  color: #7c3aed;
}
.ps-search-bar {
  background: rgba(139, 92, 246, 0.07);
  border: 1px solid rgba(139, 92, 246, 0.14);
}
.ps-material-item {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
}
.ps-mat-title {
  color: #1e1b4b;
}
.ps-mat-meta {
  color: #7c3aed;
}
.ps-mat-check {
  color: #10b981;
}
.ps-mat-dl {
  color: #8b5cf6;
}

/* ===========================================
   SYLLABUS COMPONENT — single shared stylesheet
   Used by every course landing page's Syllabus section.
   Structure: Level 1 tabs -> Level 2 accordion -> optional Level 3 accordion.
   Visual language matches the site's existing syllabus tab/panel design
   (pill tab nav, frosted panel card, accent border) so every page reads
   as one consistent system.
   Paired with assets/js/syllabus.js
   =========================================== */

.syllabus-tabs {
  width: 100%;
}

/* ---- Level 1: Tabs (pill nav, matches .syllabus-tabs-nav elsewhere on the site) ----
   Single row, horizontally scrollable — matches the rest of the site's syllabus
   tab strips instead of wrapping onto multiple lines. */
.syllabus-tablist {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
  padding: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: rgba(91, 33, 182, 0.06);
  border: 1px solid rgba(91, 33, 182, 0.12);
  border-radius: 50px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Native scrollbar is hidden — the floating progress indicator below
     the tab row (.syllabus-scroll-progress) replaces it. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.syllabus-tablist::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.syllabus-tablist.is-overflowing {
  justify-content: flex-start;
  /* Edge fade masks: hint that more tabs exist off-screen instead of a scrollbar. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}

.syllabus-tablist.syllabus-scroll-no-smooth {
  scroll-behavior: auto;
}

/* --- Floating scroll progress indicator ---
   A small centered pill below the tab row, standing in for the browser
   scrollbar. Its width/position (set inline by JS) reflect how much of the
   tab strip is visible and how far the user has scrolled through it. */
.syllabus-scroll-progress {
  display: flex;
  justify-content: center;
  height: 4px;
  margin: 10px auto 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.syllabus-scroll-progress.is-visible {
  opacity: 1;
}

.syllabus-scroll-progress-track {
  position: relative;
  display: block;
  width: 160px;
  height: 4px;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.08);
}

.syllabus-scroll-progress.is-visible .syllabus-scroll-progress-track {
  pointer-events: auto;
}

.syllabus-scroll-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
  box-shadow:
    0 0 8px rgba(139, 92, 246, 0.55),
    0 1px 3px rgba(109, 40, 217, 0.35);
  transition:
    transform 0.2s ease-out,
    width 0.25s ease;
  cursor: grab;
}

.syllabus-scroll-progress-thumb::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  right: 0;
}

.syllabus-scroll-progress.is-dragging .syllabus-scroll-progress-thumb {
  cursor: grabbing;
  transition: none;
}

.syllabus-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 15px;
  border: 0;
  border-radius: 45px;
  background: transparent;
  color: #64748b;
  font-family: var(--font-main, "Plus Jakarta Sans", sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.syllabus-tab:hover {
  color: var(--brand-purple, #5b21b6);
  background: rgba(91, 33, 182, 0.06);
}

.syllabus-tab.active {
  background: var(--brand-purple, #5b21b6);
  color: #fff;
  box-shadow:
    0 2px 12px rgba(91, 33, 182, 0.16),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.syllabus-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 40px;
  color: var(--brand-purple, #5b21b6);
  font-size: 0.82rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.syllabus-tab.active .syllabus-tab-icon {
  color: #fff;
}

/* ---- Panels (frosted card, matches .syl-panel-inner elsewhere) ---- */
.syllabus-panels {
  position: relative;
}

.syllabus-panel {
  display: none;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(91, 33, 182, 0.08);
  border-top: 3px solid var(--brand-cyan, #06b6d4);
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.05);
  padding: 32px 36px;
}

.syllabus-panel.active {
  display: block;
  animation: syllabus-panel-in 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes syllabus-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Level 2 / Level 3: Accordion (same styling at every level) ---- */
.syllabus-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.syllabus-accordion-item {
  border-bottom: 1px solid rgba(91, 33, 182, 0.1);
}

.syllabus-accordion-item h3,
.syllabus-accordion-item h4 {
  margin: 0;
}

.syllabus-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 4px;
  border: 0;
  background: transparent;
  color: #475569;
  font-family: var(--font-main, "Plus Jakarta Sans", sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.syllabus-accordion-trigger:hover {
  color: var(--brand-purple, #5b21b6);
}

.syllabus-accordion-icon {
  flex-shrink: 0;
  color: #0f172a;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.syllabus-accordion-trigger:hover .syllabus-accordion-icon {
  color: var(--brand-purple, #5b21b6);
}

.syllabus-accordion-item.is-open > h3 > .syllabus-accordion-trigger
  .syllabus-accordion-icon,
.syllabus-accordion-item.is-open > h4 > .syllabus-accordion-trigger
  .syllabus-accordion-icon,
.syllabus-accordion-item.is-open > .syllabus-accordion-trigger
  .syllabus-accordion-icon {
  transform: rotate(180deg);
}

.syllabus-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.2s ease;
}

.syllabus-accordion-item.is-open > .syllabus-accordion-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.syllabus-accordion-inner {
  overflow: hidden;
  padding: 0 4px 18px;
}

/* Nested (level 3) accordion sits inside a level-2 accordion-inner —
   same component, indented via a left border so depth reads visually
   without needing per-level style forks. */
.syllabus-accordion-inner .syllabus-accordion {
  margin-top: 4px;
  padding-left: 18px;
  border-left: 2px solid rgba(91, 33, 182, 0.12);
}

/* ---- List content (leaf level) ---- */
.syllabus-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.syllabus-list-item {
  padding: 14px 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #64748b;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}

.syllabus-list-item:hover {
  padding-left: 4px;
}

.syllabus-list-item:last-child {
  border-bottom: none;
}

.syllabus-list-item i {
  color: var(--brand-cyan, #06b6d4);
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 7px;
  transition: color 0.2s ease;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .syllabus-tablist {
    padding: 8px;
  }

  .syllabus-tab {
    padding: 8px 14px;
    font-size: 0.88rem;
  }

  .syllabus-panel {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .syllabus-accordion-inner {
    padding: 0 0 16px;
  }
}