/* ============================================================
   همت | گروه آموزشی فرهنگی
   Custom styles complementing Tailwind utilities
   ============================================================ */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'ss01', 'ss02'; /* Persian numerals preferred */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #FEFDF8;
  color: #1C1917;
  overflow-x: hidden;
}

/* RTL-specific tweaks */
[dir="rtl"] .ltr-only { display: none; }
[dir="ltr"] .rtl-only { display: none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #FEFDF8;
}
::-webkit-scrollbar-thumb {
  background: #11A8AF;
  border-radius: 8px;
  border: 2px solid #FEFDF8;
}
::-webkit-scrollbar-thumb:hover {
  background: #0E8E94;
}

/* Selection */
::selection {
  background: #CA8A04;
  color: #FFFFFF;
}

/* ---------- Focus ring ---------- */
*:focus-visible {
  outline: 2px solid #CA8A04;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Background pattern overlay ---------- */
.pattern-bg {
  position: relative;
}
.pattern-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/pattern.svg');
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.pattern-bg > * {
  position: relative;
  z-index: 1;
}

/* ---------- Hero radial glow ---------- */
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(202, 138, 4, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(4, 120, 87, 0.20) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Scroll progress indicator ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0; /* RTL: progress from right */
  width: 4px;
  height: 100vh;
  background: rgba(17, 168, 175, 0.06);
  z-index: 60;
}
.scroll-progress__bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #CA8A04 0%, #11A8AF 100%);
  transition: height 100ms linear;
}

/* ============================================================
   HEADER / NAV GLASS
   ============================================================ */
.nav-glass {
  background: rgba(254, 253, 248, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: all 250ms ease;
}
.nav-glass.scrolled {
  background: rgba(254, 253, 248, 0.92);
  border-bottom-color: rgba(231, 229, 228, 0.7);
  box-shadow: 0 4px 24px rgba(28, 25, 23, 0.04);
}

header nav a {
  position: relative;
  padding: 6px 0;
  transition: color 200ms ease;
}
header nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 2px;
  background: #11A8AF;
  transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
header nav a:hover::after,
header nav a.is-active::after {
  width: 100%;
}
header nav a.is-active {
  color: #11A8AF;
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(254, 253, 248, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 80px 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 280ms ease, visibility 280ms ease, transform 280ms ease;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu a {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1C1917;
  text-decoration: none;
  padding: 8px 24px;
  border-radius: 8px;
  transition: background 200ms ease, color 200ms ease;
}
.mobile-menu a:hover {
  background: rgba(17, 168, 175, 0.08);
  color: #11A8AF;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #11A8AF;
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 14px rgba(17, 168, 175, 0.25);
  border: none;
  cursor: pointer;
}
.btn-cta:hover {
  background: #0E8E94;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 168, 175, 0.35);
}
.btn-cta:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #064E3B;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: all 200ms ease;
  cursor: pointer;
}
.btn-ghost:hover {
  gap: 12px;
  color: #CA8A04;
}

/* ============================================================
   STAT NUMBERS (hero)
   ============================================================ */
.stat-number {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  color: #11A8AF;
  letter-spacing: -0.025em;
  direction: ltr;
  font-feature-settings: 'tnum';
}

/* ============================================================
   ORNAMENT DIVIDER
   ============================================================ */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  color: #CA8A04;
  opacity: 0.7;
}
.ornament-divider::before,
.ornament-divider::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  margin: 0 16px;
}

/* ============================================================
   ACCENT BAR (about section title)
   ============================================================ */
.accent-bar {
  position: relative;
  padding-right: 18px;
}
.accent-bar::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 0;
  width: 4px;
  background: linear-gradient(180deg, #CA8A04 0%, #11A8AF 100%);
  border-radius: 4px;
}

/* ============================================================
   PLAYBILL HEADER (editorial section headers)
   ============================================================ */
.playbill-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid #E7E5E4;
}
@media (max-width: 768px) {
  .playbill-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.playbill-header__index {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 0.9;
  color: #11A8AF;
  letter-spacing: -0.04em;
}
.playbill-header__index span {
  font-family: 'Vazirmatn', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #CA8A04;
  margin-top: 8px;
  letter-spacing: 0;
}
.playbill-header__title {
  padding-top: 16px;
}
.playbill-header__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #CA8A04;
  margin-bottom: 12px;
}
.playbill-header__title h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1C1917;
  margin: 0 0 16px;
}
.playbill-header__title em {
  font-style: normal;
  color: #11A8AF;
  position: relative;
}
.playbill-header__title em::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  left: 0;
  height: 6px;
  background: rgba(202, 138, 4, 0.30);
  z-index: -1;
  border-radius: 4px;
}
.playbill-header__title p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #57534E;
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   PILL (small badge)
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(17, 168, 175, 0.08);
  color: #0E8E94;
  border: 1px solid rgba(17, 168, 175, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.pill-gold {
  background: rgba(202, 138, 4, 0.10);
  color: #A16207;
  border-color: rgba(202, 138, 4, 0.25);
}

/* ============================================================
   ACHIEVEMENT CARD
   ============================================================ */
.ach-card {
  position: relative;
  padding: 32px 26px 26px;
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ach-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #CA8A04 0%, #11A8AF 100%);
  opacity: 0;
  border-radius: 16px 16px 0 0;
  transition: opacity 250ms ease;
}
.ach-card:hover {
  transform: translateY(-4px);
  border-color: rgba(17, 168, 175, 0.25);
  box-shadow: 0 16px 36px rgba(17, 168, 175, 0.10);
}
.ach-card:hover::before { opacity: 1; }
.ach-card__rank {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #CA8A04;
  letter-spacing: 0.08em;
  direction: ltr;
}
.ach-card__medal {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #FFFFFF;
  margin: 4px 0 8px;
}
.ach-card__medal i { width: 28px; height: 28px; }
.ach-card__medal--gold {
  background: linear-gradient(135deg, #CA8A04 0%, #A16207 100%);
}
.ach-card__medal--emerald {
  background: linear-gradient(135deg, #0E8E94 0%, #11A8AF 100%);
}
.ach-card__year {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #78716C;
  letter-spacing: 0.05em;
  direction: ltr;
}
.ach-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1C1917;
  margin: 0;
}
.ach-card__desc {
  font-size: 14px;
  line-height: 1.85;
  color: #57534E;
  margin: 0;
  flex: 1;
}
.ach-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ach-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #11A8AF;
  text-decoration: none;
  margin-top: 8px;
  transition: gap 200ms ease, color 200ms ease;
}
.ach-card__link:hover { gap: 10px; color: #CA8A04; }

/* ============================================================
   MEMBER FEATURED (founder card)
   ============================================================ */
.member-featured {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px;
  background: linear-gradient(160deg, #11A8AF 0%, #0E8E94 100%);
  color: #FEFDF8;
  border-radius: 24px;
  margin-bottom: 56px;
  box-shadow: 0 14px 36px rgba(17, 168, 175, 0.20);
  position: relative;
  overflow: hidden;
}
.member-featured::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(202, 138, 4, 0.30) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
@media (max-width: 768px) {
  .member-featured {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
  }
}
.member-featured .avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE68A 0%, #CA8A04 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 900;
  color: #064E3B;
  letter-spacing: -0.04em;
  margin: 0 auto;
  border: 4px solid rgba(254, 253, 248, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.member-featured__role {
  font-size: 12px;
  font-weight: 600;
  color: #FDE68A;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 4px;
}
.member-featured__name {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.member-featured__bio {
  font-size: 15px;
  line-height: 1.95;
  color: rgba(254, 253, 248, 0.88);
  margin: 0 0 16px;
  max-width: 65ch;
}
.member-featured__quote {
  font-size: 15px;
  font-style: italic;
  line-height: 1.8;
  color: #FDE68A;
  border-right: 3px solid #FDE68A;
  padding-right: 16px;
  margin: 0;
  max-width: 60ch;
}
@media (max-width: 768px) {
  .member-featured__quote {
    border-right: none;
    border-top: 3px solid #FDE68A;
    padding-right: 0;
    padding-top: 12px;
  }
}

/* ============================================================
   MEMBER GROUP LABEL
   ============================================================ */
.member-group-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.member-group-label span {
  font-size: 13px;
  font-weight: 700;
  color: #11A8AF;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.member-group-label__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #11A8AF 0%, transparent 100%);
  opacity: 0.4;
}

/* ============================================================
   COFOUNDERS — Horizontal team strip (3 cards per row on desktop)
   Cream surface + thin turquoise border. Center card highlighted with a
   gold border and slight scale-up, with role pill filling solid gold.
   Portrait column appears visually on the right (RTL preserves the start
   edge). Upward bleed on the portrait replicates the institute's
   existing carousel rhythm. Carousel nav + dot indicators below.
   ============================================================ */

/* Card shell: 2-column grid with the portrait column visually on the right
   (RTL flips the default column order). Cream surface + thin turquoise border,
   ~2:1 horizontal ratio. The active center card uses gold accent + slight scale. */
.cofounder-card {
  position: relative;
  display: grid;
  grid-template-columns: 38% 62%;       /* portrait | body */
  align-items: center;
  background: #FEFDF8;
  border: 1px solid rgba(17, 168, 175, 0.20);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem;
  min-height: 260px;
  box-shadow: 0 4px 12px rgba(28, 25, 23, 0.04);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms ease;
}

.cofounder-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(17, 168, 175, 0.10),
              0 6px 14px rgba(28, 25, 23, 0.06);
  border-color: rgba(202, 138, 4, 0.40);
}

/* Active (highlighted) center card — gold border + soft glow + slight scale */
.cofounder-card--active {
  border: 2px solid #CA8A04;
  box-shadow: 0 14px 36px rgba(202, 138, 4, 0.18),
              0 4px 12px rgba(28, 25, 23, 0.05);
  transform: scale(1.02);
}

.cofounder-card--active:hover {
  transform: scale(1.04) translateY(-3px);
}

/* Portrait: square aspect, bleeds upward beyond the card's top edge.
   Background gradient is a fallback in case the image doesn't load. */
.cofounder-card__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
  margin-top: -2.25rem;                /* bleed upward */
  align-self: start;
  background: linear-gradient(135deg, #ECFCFD 0%, #11A8AF 100%);
  isolation: isolate;
}

.cofounder-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Body wrapper — text aligns to the start edge (right in RTL). */
.cofounder-card__body {
  padding-inline-start: 1rem;
  text-align: right;
}

/* Role pill — gold by default, on the active card turns solid gold */
.cofounder-card__role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
  background: rgba(202, 138, 4, 0.10);
  color: #A16207;
  border: 1px solid rgba(202, 138, 4, 0.20);
}

.cofounder-card--active .cofounder-card__role {
  background: #CA8A04;
  color: #FEFDF8;
  border-color: #CA8A04;
}

/* Name */
.cofounder-card__name {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.2;
  color: #1C1917;
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
  .cofounder-card__name { font-size: 1.35rem; }
}

/* Bio */
.cofounder-card__bio {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #57534E;
  margin: 0 0 0.85rem;
  max-width: 32ch;
}

/* Social icons row — icons flow from RTL start (right) outward */
.cofounder-card__socials {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.5rem;
}

.cofounder-card__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(17, 168, 175, 0.30);
  color: #11A8AF;
  transition: background-color 250ms ease,
              color 250ms ease,
              border-color 250ms ease,
              transform 200ms ease;
}

.cofounder-card__socials a:hover {
  background: #11A8AF;
  color: #FEFDF8;
  border-color: #11A8AF;
  transform: translateY(-1px);
}

/* Carousel-style nav arrow button */
.cofounder-nav {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: #FEFDF8;
  border: 1px solid #E7E5E4;
  color: #57534E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 250ms ease;
}

.cofounder-nav:hover {
  border-color: #11A8AF;
  color: #11A8AF;
  box-shadow: 0 4px 14px rgba(17, 168, 175, 0.18);
}

.cofounder-nav:active { transform: translateY(1px); }

/* Carousel dot indicators */
.cofounder-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #D6D3D1;
  transition: all 300ms ease;
}

.cofounder-dot.is-active {
  width: 1.5rem;
  background: #CA8A04;
  border-radius: 9999px;
}

/* Mobile collapse: single-column stacked, no upward bleed, centered type */
@media (max-width: 767px) {
  .cofounder-card {
    grid-template-columns: 1fr;
    padding: 1rem 1rem 1.25rem;
    min-height: auto;
    text-align: center;
  }
  .cofounder-card__portrait {
    margin-top: 0;
    aspect-ratio: 16 / 14;
    max-width: 220px;
    margin-inline: auto;
  }
  .cofounder-card__body {
    padding-inline-start: 0;
    padding-top: 0.85rem;
    text-align: center;
  }
  .cofounder-card__bio {
    margin-inline: auto;
  }
  .cofounder-card__socials {
    justify-content: center;
  }
  .cofounder-card--active { transform: none; }
  .cofounder-card--active:hover { transform: translateY(-3px); }
}

/* Reduced motion: kill hover lifts and scale-on-active */
@media (prefers-reduced-motion: reduce) {
  .cofounder-card,
  .cofounder-card--active,
  .cofounder-nav,
  .cofounder-dot,
  .cofounder-card__socials a {
    transition: none;
  }
  .cofounder-card:hover,
  .cofounder-card--active:hover { transform: none; }
}

/* ============================================================
   COURSE FLAGSHIP
   ============================================================ */
.course-flagship {
  position: relative;
  background: linear-gradient(135deg, #064E3B 0%, #11A8AF 50%, #0E8E94 100%);
  color: #FEFDF8;
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 32px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(6, 78, 59, 0.25);
}
.course-flagship__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #FDE68A;
  color: #064E3B;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.course-flagship__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .course-flagship__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.course-flagship__media {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: rgba(254, 253, 248, 0.08);
  border: 1px solid rgba(254, 253, 248, 0.18);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDE68A;
}
.course-flagship__media i { width: 80px; height: 80px; }
.course-flagship__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(202, 138, 4, 0.40) 0%, transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}
.course-flagship__category {
  font-size: 12px;
  font-weight: 700;
  color: #FDE68A;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.course-flagship__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 14px;
}
.course-flagship__desc {
  font-size: 15px;
  line-height: 1.95;
  color: rgba(254, 253, 248, 0.88);
  margin: 0 0 18px;
  max-width: 64ch;
}
.course-flagship__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   CATALOG ROW (course cards with media)
   ============================================================ */
.catalog-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: stretch;
  padding: 24px;
  margin-bottom: 18px;
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 20px;
  transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.catalog-row[data-reverse="true"] {
  grid-template-columns: 1fr 180px;
}
@media (max-width: 768px) {
  .catalog-row, .catalog-row[data-reverse="true"] {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.catalog-row:hover {
  border-color: rgba(17, 168, 175, 0.25);
  box-shadow: 0 12px 28px rgba(17, 168, 175, 0.08);
}
.catalog-row__num {
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #CA8A04;
  letter-spacing: 0.08em;
  direction: ltr;
}
.catalog-row__media {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  min-height: 140px;
  color: #FFFFFF;
}
.catalog-row__media i {
  width: 48px;
  height: 48px;
}
.catalog-row__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.catalog-row__category {
  font-size: 11px;
  font-weight: 700;
  color: #11A8AF;
  letter-spacing: 0.04em;
}
.catalog-row__title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1C1917;
  margin: 0;
}
.catalog-row__desc {
  font-size: 14px;
  line-height: 1.85;
  color: #57534E;
  margin: 0;
  flex: 1;
}
.catalog-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* ============================================================
   COURSE META (icon + label items)
   ============================================================ */
.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0;
}
.course-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #57534E;
  font-weight: 500;
}
.course-meta__item i {
  color: #11A8AF;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* ============================================================
   SPEAKER CARD
   ============================================================ */
.speaker-card {
  position: relative;
  padding: 32px 26px 26px;
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.speaker-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #CA8A04 0%, #11A8AF 100%);
  opacity: 0;
  border-radius: 16px 16px 0 0;
  transition: opacity 250ms ease;
}
.speaker-card:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 168, 175, 0.25);
  box-shadow: 0 12px 28px rgba(17, 168, 175, 0.08);
}
.speaker-card:hover::before { opacity: 1; }
.speaker-card__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #CA8A04;
  letter-spacing: 0.08em;
  direction: ltr;
}
.speaker-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE68A 0%, #CA8A04 100%);
  color: #064E3B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 4px 0 8px;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(202, 138, 4, 0.20);
}
.speaker-card__date {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #57534E;
  letter-spacing: 0.04em;
  direction: ltr;
}
.speaker-card__name {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1C1917;
  margin: 0;
}
.speaker-card__role {
  font-size: 12px;
  font-weight: 600;
  color: #11A8AF;
  letter-spacing: 0.02em;
}
.speaker-card__topic {
  font-size: 14px;
  font-weight: 700;
  color: #CA8A04;
  margin: 4px 0 0;
  line-height: 1.5;
}
.speaker-card__desc {
  font-size: 13.5px;
  line-height: 1.85;
  color: #57534E;
  margin: 0;
  flex: 1;
}
.speaker-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
}
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #F5F5F4;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover img {
  transform: scale(1.06);
}
.gallery-item--wide {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item--tall {
  grid-row: span 2;
}
@media (max-width: 640px) {
  .gallery-item--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery-item--tall {
    grid-row: span 1;
  }
}
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.80) 100%);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 300ms ease;
}
.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}
.gallery-item__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  background: #CA8A04;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.gallery-item__overlay h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 4px;
}
.gallery-item__overlay p {
  font-size: 11px;
  opacity: 0.85;
  margin: 0;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline {
  position: relative;
  padding-right: 36px;
  margin-top: 8px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #CA8A04 12%, #11A8AF 88%, transparent);
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  padding: 20px 0;
}
.timeline-item::before {
  content: '';
  position: absolute;
  top: 28px;
  right: -32px;
  width: 14px;
  height: 14px;
  background: #CA8A04;
  border: 3px solid #064E3B;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.18);
}

/* ============================================================
   PARTNERS — Floating horizontal marquee (truly infinite)
   ============================================================ */
.partners-marquee {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  margin: 0 -24px;
  padding: 0 24px;
}
@media (min-width: 1024px) {
  .partners-marquee { margin: 0 -48px; padding: 0 48px; }
}

/* Each row: edge fade mask + horizontal scroll.
   `direction: ltr` here (and on the track) overrides the inherited RTL so
   the row's content anchors to the row's LEFT edge. Without this, the
   single max-content track inside the block-level row gets pushed to the
   row's right edge in RTL — putting every chip off-screen the moment the
   rtl keyframe applies translateX(-50%). Chips keep their internal Persian
   text direction; only the layout axis flips. */
.marquee-row {
  position: relative;
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  padding: 6px 0;
}

/* The scrolling track
   - HTML renders the visible items once (1 copy); JS clones them so the
     track is always ≥ 2× the row's visible width.
   - Spacing uses `margin-inline-end: 14px` on each item (NOT flex gap), so:
       track width = N × (itemWidth + 14)  ← every item carries its own trailing space
       ⇒ 50% of track == exactly one copy of the items + their trailing margins
       ⇒ keyframe `translateX(-50%)` lands the second copy precisely where the
          first started → mathematically seamless, zero visible jump
   - `direction: ltr` overrides the inherited RTL so the track anchors to the
     row's LEFT edge; without this, RTL flex puts the track on the right and
     the 50% shift slides the visible window past the track end, leaving the
     row empty. Chips keep their internal RTL text direction via the row's
     default RTL inheritance (the track's LTR direction only affects the flex
     layout axis, not the children's bidi).
   - `animation` is `linear infinite` with no pause state — never stops */
.marquee-track {
  display: flex;
  direction: ltr;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.marquee-row[data-direction="rtl"] .marquee-track {
  animation-name: marquee-rtl;
  animation-duration: 80s;
}
.marquee-row[data-direction="ltr"] .marquee-track {
  animation-name: marquee-ltr;
  animation-duration: 65s;
}
/* No hover pause — the user explicitly asked for never-ending animation */

/* Each item: compact chip */
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  margin-inline-end: 14px; /* trailing space lives on each item, so 50% math is exact */
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1C1917;
  white-space: nowrap;
  transition: all 250ms ease;
  cursor: default;
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.04);
  flex-shrink: 0; /* prevent items from squishing */
}
.marquee-item:hover {
  border-color: #11A8AF;
  color: #085C5F;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(17, 168, 175, 0.16);
}
.marquee-item i {
  color: #CA8A04;
  flex-shrink: 0;
}
.marquee-item--featured {
  background: linear-gradient(135deg, #11A8AF 0%, #085C5F 100%);
  color: #FEFDF8;
  border-color: transparent;
  padding: 12px 22px;
  font-size: 0.9375rem;
}
.marquee-item--featured i { color: #FDE68A; }
.marquee-item--featured:hover { color: #FEFDF8; }
.marquee-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #085C5F;
  background: #FDE68A;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  margin-inline-start: 4px;
}

/* Animations
   The track contains multiple copies of every item (≥ 2 copies × N items).
   With each item carrying its own 14px margin-inline-end, the track width is
   a clean multiple of "one copy", so shifting by exactly one copy lands the
   next copy where the first started → mathematically seamless, zero drift.
   Typical cases:
     2 copies (small viewport or many items) → -50%
     3 copies (large viewport, few items)   → -33.333%
     4 copies (huge viewport)               → -25% */
@keyframes marquee-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-shift, 50%)), 0, 0); }
}
@keyframes marquee-ltr {
  from { transform: translate3d(calc(-1 * var(--marquee-shift, 50%)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Row speeds are set by the per-direction rules above; the two-row stagger
   (80s RTL / 65s LTR) provides the visual rhythm. */

/* Reduced motion: stop the marquee and lay out items as a wrapped grid */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .marquee-item[aria-hidden="true"] { display: none; }
}

/* ============================================================
   VALUES — Minimalist 3-column
   ============================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.value {
  position: relative;
  padding: 16px 32px;
  text-align: center;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.value + .value::before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, #CA8A04 30%, #11A8AF 70%, transparent 100%);
  opacity: 0.40;
}
.value:hover {
  transform: translateY(-3px);
}
.value__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: #CA8A04;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
  font-feature-settings: 'lnum';
}
.value__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.2;
  color: #1C1917;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}
.value__title::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: #11A8AF;
  margin: 14px auto 0;
  border-radius: 1px;
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.value:hover .value__title::after {
  width: 48px;
  background: #CA8A04;
}
.value__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #57534E;
  max-width: 32ch;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .value + .value::before {
    top: auto;
    bottom: auto;
    inset-inline-start: 50%;
    width: auto;
    height: 1px;
    top: -16px;
    transform: translateX(50%);
    background: linear-gradient(90deg, transparent 0%, #CA8A04 50%, transparent 100%);
  }
  .value {
    padding: 8px 0;
  }
}

/* ============================================================
   IMPACT STATS
   ============================================================ */
.impact-stat {
  padding: 32px 24px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 200ms ease;
}
.impact-stat:hover {
  background: #FEFDF8;
}
.impact-stat__num {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.25rem, 3.8vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: #11A8AF;
  letter-spacing: -0.025em;
  direction: ltr;
}
.impact-stat__num span[data-count] {
  display: inline-block;
}
.impact-stat__num::after {
  content: '';
  display: inline-block;
  width: 0.3em;
}
.impact-stat__label {
  font-size: 13.5px;
  font-weight: 500;
  color: #57534E;
  line-height: 1.5;
  margin-top: 4px;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Defensive: if JS fails, show content immediately (no blank cards) */
.no-js .reveal { opacity: 1; transform: none; transition: none; }

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

/* ============================================================
   UTILITIES
   ============================================================ */
.cursor-pointer { cursor: pointer; }

/* Mobile fixes */
@media (max-width: 768px) {
  .timeline { padding-right: 24px; }
  .timeline::before { right: 4px; }
  .timeline-item::before { right: -20px; width: 10px; height: 10px; }
}

/* ============================================================
   COURSES CAROUSEL — horizontal scroller inside teal container
   Mirrors hamtaa-org inspiration: rounded teal panel,
   pill + centered title on top, cards in a horizontal track,
   circular arrow buttons at edges, pagination dots centered below
   ============================================================ */

.courses-carousel {
  position: relative;
  background: linear-gradient(180deg, #11A8AF 0%, #0A6E73 100%);
  border-radius: 28px;
  padding: 36px 24px 28px;
  box-shadow: 0 24px 60px rgba(10, 110, 115, 0.25);
  overflow: hidden;
}

@media (min-width: 768px) {
  .courses-carousel { padding: 44px 56px 36px; }
}

/* Subtle pattern overlay so it doesn't feel flat */
.courses-carousel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 50%, rgba(254, 253, 248, 0.10) 0, transparent 18px),
    radial-gradient(circle at 12% 30%, rgba(254, 253, 248, 0.08) 0, transparent 14px),
    radial-gradient(circle at 5% 70%, rgba(254, 253, 248, 0.06) 0, transparent 12px);
  background-size: 220px 220px;
  pointer-events: none;
  opacity: 0.7;
}

.courses-carousel > * {
  position: relative;
  z-index: 1;
}

/* --- Header inside teal block --- */
.courses-carousel__head {
  text-align: center;
  margin-bottom: 28px;
}
.courses-carousel__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #FDE68A;
  color: #064E3B;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.courses-carousel__pill i { color: #CA8A04; }

.courses-carousel__title {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 900;
  line-height: 1.4;
  color: #FEFDF8;
  letter-spacing: -0.01em;
  margin: 0;
}

/* --- Viewport: holds arrows + track --- */
.courses-carousel__viewport {
  position: relative;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 767px) {
  .courses-carousel__viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

/* --- The track itself: a horizontal scroller with scroll-snap.
   We use native scrollLeft (not CSS transform) so RTL inheritance doesn't
   invert the scroll position. JS animates scrollLeft manually for arrows. */
.courses-carousel__track {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 24px;
  padding-inline: 0;
  scroll-behavior: auto; /* JS handles smooth manually */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  max-width: 100%;
}
.courses-carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .courses-carousel__track { padding-inline: 56px; }
}
.courses-carousel__inner {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  width: max-content;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (max-width: 767px) {
  .courses-carousel__inner { gap: 16px; flex-direction: row-reverse; }
  /* Restore native swipe on mobile (was disabled, killed user drag) */
  .courses-carousel__track {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding-inline: 8px;
  }
}

/* Mobile: each card fills the track width so only ONE card is visible
   at a time, centered, with arrows below for navigation. Width is set
   to match the track's actual width (viewport minus container padding
   minus the carousel's own padding). */
@media (max-width: 767px) {
  .course-card {
    flex: 0 0 calc(100vw - 80px); /* 24px container pad × 2 + 24px carousel pad × ~1.5 + breathing */
    min-height: 380px;
    scroll-snap-align: center;
  }
}

/* --- Arrow row: absolute overlay on desktop, flex row below the track on mobile --- */
.courses-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none; /* let clicks through to track; buttons re-enable */
}
.courses-arrows > * { pointer-events: auto; }
@media (max-width: 767px) {
  .courses-arrows {
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
}

/* --- Circular arrow buttons --- */
.courses-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #FDE68A;
  color: #064E3B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(6, 78, 59, 0.25);
  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
}
.courses-arrow:hover {
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 28px rgba(6, 78, 59, 0.35);
}
.courses-arrow:active { transform: translateY(-50%) scale(0.96); }
.courses-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%) scale(0.9);
}
.courses-arrow--prev { inset-inline-start: 6px; }
.courses-arrow--next { inset-inline-end: 6px; }

/* Mobile: arrows sit in the static row below the track */
@media (max-width: 767px) {
  .courses-arrow {
    position: static;
    transform: none;
    top: auto;
    width: 44px;
    height: 44px;
  }
  .courses-arrow:hover { transform: scale(1.08); }
  .courses-arrow:active { transform: scale(0.96); }
  .courses-arrow:disabled { transform: scale(0.9); }
}

/* --- The card --- */
.course-card {
  flex: 0 0 320px; /* fixed width — keeps carousel math simple and RTL-safe */
  display: flex;
  flex-direction: column;
  background: #FEFDF8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 78, 59, 0.18);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  min-height: 420px;
  text-decoration: none;
  color: inherit;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(6, 78, 59, 0.30);
}

@media (max-width: 1024px) {
  .course-card { flex: 0 0 300px; }
}
/* Mobile: one full-width card per page. The track uses LTR direction with
   `scroll-snap-type: x mandatory` so each swipe settles on a card edge.
   Card 0 is the leftmost. */
@media (max-width: 767px) {
  .course-card {
    flex: 0 0 calc(100vw - 80px);
    min-height: 380px;
  }
}

/* Card media area — real course photo with subtle overlay + tag */
.course-card__media {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #064E3B;
}
.course-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.course-card:hover .course-card__media img {
  transform: scale(1.06);
}
.course-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 78, 59, 0.0) 0%, rgba(6, 78, 59, 0.55) 100%);
  pointer-events: none;
}
.course-card__media-tag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(254, 253, 248, 0.95);
  color: #064E3B;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Card body */
.course-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  flex: 1;
  /* Reset direction so text reads correctly inside the LTR track */
  direction: rtl;
  text-align: right;
}
.course-card__category {
  font-size: 11px;
  font-weight: 700;
  color: #11A8AF;
  letter-spacing: 0.02em;
}
.course-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #1C1917;
  margin: 0;
}
.course-card__desc {
  font-size: 12.5px;
  line-height: 1.85;
  color: #57534E;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: #57534E;
  font-weight: 500;
  margin-top: 4px;
}
.course-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.course-card__meta i { color: #11A8AF; }

/* Course tags (small chips inside card) */
.course-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ctag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(17, 168, 175, 0.08);
  color: #0E8E94;
  border: 1px solid rgba(17, 168, 175, 0.18);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.ctag--gold {
  background: rgba(202, 138, 4, 0.10);
  color: #A16207;
  border-color: rgba(202, 138, 4, 0.25);
}

/* --- Pagination dots --- */
.courses-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 14px;
}
.courses-carousel__dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(254, 253, 248, 0.40);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 220ms ease;
}
.courses-carousel__dots button:hover {
  background: rgba(254, 253, 248, 0.70);
}
.courses-carousel__dots button.is-active {
  width: 26px;
  background: #FDE68A;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .courses-carousel__track { scroll-behavior: auto; }
}

/* ============================================================
   MISSION SECTION — compact half-page (statement + quote + pillars)
   Replaces the earlier verbose About + Three-Values blocks with
   one editorial moment: ornamental head → signature quote → 3
   compact principle pillars → commitment strip.
   ============================================================ */

.mission-section {
  position: relative;
  padding: 80px 0 88px;
}
@media (min-width: 768px) {
  .mission-section { padding: 104px 0 112px; }
}

/* --- 1 · Head ------------------------------------------------------- */
.mission-section__head {
  max-width: 880px;
  margin: 0 auto 56px;
  text-align: center;
}

.mission-section__ornament {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.mission-section__ornament .ornament__line {
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #CA8A04, transparent);
}
.mission-section__ornament .ornament__diamond {
  display: block;
  width: 7px;
  height: 7px;
  background: #CA8A04;
  transform: rotate(45deg);
  border-radius: 1px;
}

.mission-section__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #CA8A04;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.mission-section__heading {
  font-size: clamp(1.875rem, 4.2vw, 3.125rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #1C1917;
  margin: 0 0 26px;
}
.mission-section__heading .hl {
  color: #11A8AF;
  position: relative;
  display: inline-block;
}
.mission-section__heading .hl::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 0;
  left: 0;
  height: 8px;
  background: rgba(202, 138, 4, 0.22);
  z-index: -1;
  border-radius: 4px;
}

.mission-section__lead {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.95;
  color: #57534E;
  max-width: 60ch;
  margin: 0 auto;
}
.mission-section__lead strong {
  color: #0E8E94;
  font-weight: 700;
}

/* --- 2 · Typographic-flourish quote -------------------------------- */
.mission-section__quote {
  position: relative;
  max-width: 880px;
  margin: 0 auto 64px;
  padding: 16px 16px 12px;
  text-align: center;
}
.mission-section__quote .quote-mark {
  position: absolute;
  top: -36px;
  inset-inline-start: 50%;
  transform: translateX(-65%);
  font-size: 8rem;
  line-height: 1;
  font-weight: 900;
  color: #CA8A04;
  opacity: 0.18;
  pointer-events: none;
  font-family: 'Vazirmatn', serif;
}
@media (max-width: 768px) {
  .mission-section__quote .quote-mark {
    top: -28px;
    font-size: 5rem;
    transform: translateX(-55%);
  }
}
.mission-section__quote .quote-body {
  margin: 0;
  font-size: clamp(1.125rem, 2.2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.6;
  color: #064E3B;
  letter-spacing: -0.01em;
}
.mission-section__quote em {
  font-style: normal;
  color: #0E8E94;
}
.mission-section__quote .quote-key {
  background: linear-gradient(180deg, transparent 68%, rgba(202, 138, 4, 0.32) 68%);
  padding: 0 3px;
  border-radius: 2px;
}

/* --- 3 · Pillars (compact, not cards) ------------------------------ */
.mission-section__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
@media (max-width: 768px) {
  .mission-section__pillars {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.pillar {
  position: relative;
  padding: 28px 28px 24px;
  text-align: center;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover { transform: translateY(-4px); }

/* Vertical divider between pillars (desktop) */
.pillar + .pillar::before {
  content: '';
  position: absolute;
  top: 36px;
  bottom: 36px;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, #CA8A04 30%, #11A8AF 70%, transparent 100%);
  opacity: 0.45;
}

/* Horizontal divider between stacked pillars (mobile) */
@media (max-width: 768px) {
  .pillar + .pillar::before {
    top: -18px;
    bottom: auto;
    inset-inline-start: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #CA8A04 50%, transparent 100%);
  }
}

.pillar__num {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: #CA8A04;
  letter-spacing: 0.22em;
  direction: ltr;
  margin: 0 0 14px;
  font-feature-settings: 'lnum';
}
.pillar__medallion {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #11A8AF 0%, #0E8E94 100%);
  color: #FEFDF8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(17, 168, 175, 0.28), inset 0 0 0 4px rgba(254, 253, 248, 0.10);
  margin-bottom: 22px;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover .pillar__medallion {
  transform: rotate(-6deg) scale(1.06);
}
.pillar__name {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1C1917;
  margin: 0 0 12px;
  display: inline-block;
  position: relative;
}
.pillar__name::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #CA8A04;
  margin: 12px auto 0;
  border-radius: 1px;
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover .pillar__name::after { width: 44px; }

.pillar__essence {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #57534E;
  max-width: 28ch;
  margin: 0 auto 14px;
}
.pillar__quote {
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.65;
  color: #0E8E94;
  margin: 0 auto;
  max-width: 26ch;
}

/* --- 4 · Final commitment strip ------------------------------------ */
.commitment-strip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 64px;
  padding: 12px 24px;
  background: linear-gradient(90deg, rgba(17, 168, 175, 0.06) 0%, rgba(202, 138, 4, 0.06) 100%);
  border: 1px solid rgba(17, 168, 175, 0.20);
  border-radius: 999px;
  font-size: 0.875rem;
  white-space: nowrap;
}
.commitment-strip .cs-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #CA8A04;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.18);
  flex-shrink: 0;
}
.commitment-strip .cs-label {
  font-weight: 800;
  color: #064E3B;
  letter-spacing: 0.01em;
}
.commitment-strip .cs-label em {
  font-style: normal;
  color: #11A8AF;
}
.commitment-strip .cs-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(17, 168, 175, 0.30);
  flex-shrink: 0;
}
.commitment-strip .cs-tag {
  font-weight: 600;
  color: #57534E;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .commitment-strip { white-space: normal; flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   📱 MOBILE CARD COMPACTION
   Reduces vertical sprawl so the page doesn't feel like
   a "wall of cards". Only active ≤ 768px.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Impact stats: show on mobile as 2-col grid (was hidden — lost 8 stats) ---- */
  #impact { display: block; }
  #impact .grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }

  /* ---- Achievements: cap at 3 cards on mobile; CTA stays as gateway ---- */
  #achievements .ach-card:nth-child(n+4) { display: none; }
  #achievements .reveal.mt-12.text-center { display: block; }

  /* ---- Section vertical rhythm: tighter on mobile ---- */
  section.py-20,
  section.py-16 { padding-top: 56px; padding-bottom: 56px; }
  section.py-20.md\:py-28,
  section.py-16.md\:py-24 { padding-top: 56px; padding-bottom: 56px; }

  /* ---- Mission section: tighten gaps, hide commitment strip ---- */
  .mission-section { padding: 48px 0 52px !important; }
  .mission-section__head { margin-bottom: 28px; }
  .mission-section__ornament { margin-bottom: 14px; }
  .mission-section__ornament .ornament__line { width: 32px; }
  .mission-section__eyebrow { margin-bottom: 12px; }
  .mission-section__heading { margin-bottom: 16px; line-height: 1.25; }
  .mission-section__lead { line-height: 1.7; }
  .mission-section__quote { margin-bottom: 28px; padding: 8px 8px 4px; }
  .mission-section__quote .quote-body { font-size: 1rem; line-height: 1.55; }
  .mission-section__pillars { gap: 18px !important; }
  .pillar { padding: 16px 14px 14px; }
  .pillar__medallion { width: 48px; height: 48px; }
  .pillar__medallion svg,
  .pillar__medallion i { width: 24px; height: 24px; }
  .pillar__name { font-size: 1.15rem; }
  .pillar__essence { font-size: 13px; line-height: 1.65; }
  .pillar__quote { font-size: 12.5px; margin-top: 8px; }
  /* Remove the ornament divider between pillars (no longer needed when stacked) */
  .pillar + .pillar::before { display: none; }
  /* Hide the "آنچه هرگز معامله نمی‌کنیم" commitment strip on mobile */
  .commitment-strip { display: none !important; }

  /* ---- Hero stat grid: 4-col on mobile is too cramped; keep 2-col but tighten ---- */
  #hero .grid.grid-cols-2 { gap: 24px 16px; }
  .stat-number { font-size: 1.85rem; }

  /* ---- Impact stats: smaller padding, more compact rows ---- */
  .impact-stat {
    padding: 18px 14px;
  }
  .impact-stat__num { font-size: 1.85rem; }
  .impact-stat__label { font-size: 12px; line-height: 1.4; }

  /* ---- Achievement cards: tighter padding + smaller medal ---- */
  .ach-card {
    padding: 22px 18px 20px;
    gap: 10px;
    border-radius: 14px;
  }
  .ach-card__medal {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin: 0 0 4px;
  }
  .ach-card__medal i { width: 22px; height: 22px; }
  .ach-card__title { font-size: 1.05rem; }
  .ach-card__desc { font-size: 13px; line-height: 1.7; }

  /* ---- Cofounder / team cards: more compact horizontal layout on mobile ---- */
  .cofounder-card {
    padding: 14px 16px 16px;
    min-height: auto;
    border-radius: 1rem;
  }
  .cofounder-card__portrait {
    aspect-ratio: 4 / 3;
    max-width: 130px;
    margin: 0 auto;
  }
  .cofounder-card__body { padding-top: 0.65rem; }
  .cofounder-card__name { font-size: 1.05rem; }
  .cofounder-card__bio { font-size: 0.78rem; line-height: 1.55; margin-bottom: 0.6rem; }

  /* ---- Products / Courses carousel card: shorter min-height + smaller media ---- */
  .course-card {
    min-height: 320px !important;
  }
  .course-card__media { height: 120px; }
  .course-card__title { font-size: 0.95rem; line-height: 1.4; }
  .course-card__desc { font-size: 12px; line-height: 1.7; -webkit-line-clamp: 2; }
  .course-card__body { padding: 12px 14px 14px; gap: 6px; }
  .course-card__meta { font-size: 11px; gap: 8px; }

  /* ---- Carousel container: tighter padding on mobile ---- */
  .courses-carousel { padding: 24px 18px 22px; border-radius: 22px; }
  .courses-carousel__head { margin-bottom: 18px; }
  .courses-carousel__title { font-size: 1.1rem; }

  /* ---- Contact section cards: more compact on mobile ---- */
  #contact .grid.sm\:grid-cols-3 { gap: 10px; }
  #contact a.group { padding: 18px 14px !important; border-radius: 16px !important; }
  #contact a.group .w-12 { width: 40px !important; height: 40px !important; }
  #contact a.group .w-12 i { width: 20px !important; height: 20px !important; }
  #contact a.group .mb-4 { margin-bottom: 10px !important; }
  #contact a.group h3 { font-size: 15px; margin-bottom: 2px; }
  #contact a.group p { font-size: 12px; }

  /* ---- Footer columns: tighter ---- */
  footer .grid { gap: 28px; }

  /* ---- Generic card padding trim (defensive) ---- */
  .cofounder-card + .cofounder-card,
  .ach-card + .ach-card { margin-top: 0; }
}

/* Extra compaction for very small phones */
@media (max-width: 380px) {
  .impact-stat { padding: 14px 10px; }
  .impact-stat__num { font-size: 1.6rem; }
  .impact-stat__label { font-size: 11px; }
  .ach-card { padding: 18px 14px 16px; }
}

/* ============================================================
   SIDE HERO — Rotating Word Panel
   Replaces the right-column logo block in index.html.
   Tokens: existing design system (no new colors).
   ============================================================ */

.side-hero {
  position: relative;
  background: #FEFDF8;            /* same as body */
  padding: 48px 32px;
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 420px;
  max-width: 380px;
  margin: 0 auto;
}

/* Gold rule (card-featured pattern) — top-right corner */
.side-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 4px;
  background: #CA8A04;
  border-radius: 0 0 4px 4px;
}

.side-hero__logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #064E3B;
  color: #FEFDF8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 24px;
  font-family: 'Vazirmatn', system-ui, sans-serif;
}

.side-hero__phrase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.side-hero__eyebrow {
  font-weight: 900;
  font-size: 20px;
  color: #064E3B;
  line-height: 1.2;
  margin: 0;
}

.side-hero__rotator {
  position: relative;
  font-weight: 900;
  font-size: 26px;
  color: #CA8A04;
  line-height: 1.2;
  min-height: 32px;              /* prevent layout shift between words */
  perspective: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-hero__rotator-current {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
}

.side-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.side-hero__cta .btn-cta,
.side-hero__cta .btn-ghost {
  width: 100%;
  justify-content: center;
}

/* Visually hidden helper for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile: side hero stacks below headline as full-width */
@media (max-width: 1023px) {
  .side-hero {
    max-width: 100%;
    margin-top: 32px;
    padding: 32px 24px;
    min-height: auto;
  }
}

@media (min-width: 1024px) {
  .side-hero {
    margin-top: 0;
  }
}

/* 3D flip animation — flips the gold word on the X-axis */
@keyframes sideHeroFlipOut {
  0%   { transform: rotateX(0deg);   opacity: 1; }
  100% { transform: rotateX(-90deg); opacity: 0; }
}

@keyframes sideHeroFlipIn {
  0%   { transform: rotateX(90deg);  opacity: 0; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}

.side-hero__rotator-current--leaving {
  animation: sideHeroFlipOut 300ms ease-in-out forwards;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-hero__rotator-current--entering {
  animation: sideHeroFlipIn 300ms ease-in-out forwards;
}

/* Reduced-motion: simple crossfade */
@media (prefers-reduced-motion: reduce) {
  .side-hero__rotator-current--leaving {
    animation: none;
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  .side-hero__rotator-current--entering {
    animation: none;
    opacity: 1;
    transition: opacity 200ms ease-out;
  }
}

/* ============================================================
   HERO CONCEPT — fixed learning, changing learning mode
   ============================================================ */
.side-hero {
  isolation: isolate;
  max-width: 430px;
  min-height: 440px;
  padding: 0;
  overflow: hidden;
  text-align: right;
  background:
    radial-gradient(circle at 84% 18%, rgba(17, 168, 175, 0.12), transparent 27%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(236, 252, 253, 0.9));
  border: 1px solid rgba(17, 168, 175, 0.16);
  box-shadow: 0 20px 46px rgba(17, 168, 175, 0.09);
}

.side-hero::before {
  z-index: -1;
  width: 220px;
  height: 220px;
  left: -112px;
  right: auto;
  bottom: -126px;
  top: auto;
  border: 1px solid rgba(202, 138, 4, 0.28);
  border-radius: 50%;
  background: transparent;
}

.side-hero > :not(.side-hero__concept) { display: none; }

.side-hero__concept {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 438px;
  padding: 26px 34px 30px;
  gap: 24px;
}

.side-hero__rail {
  width: 72px;
  height: 3px;
  border-radius: 99px;
  background: #CA8A04;
}

.side-hero__axis {
  margin-top: -10px;
  font-size: 12px;
  font-weight: 700;
  color: #78716C;
  letter-spacing: 0.03em;
}

.side-hero__concept .side-hero__phrase {
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
}

.side-hero__concept .side-hero__eyebrow {
  color: #0A6E73;
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  line-height: 1.05;
}

.side-hero__concept .side-hero__rotator {
  justify-content: flex-start;
  min-height: 3.4rem;
  color: #CA8A04;
  font-size: clamp(1.75rem, 3.5vw, 2.7rem);
  line-height: 1.22;
  perspective: 360px;
}

.side-hero__signals {
  display: grid;
  gap: 9px;
  padding: 18px 0 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 168, 175, 0.17);
}

.side-hero__signals li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #57534E;
  font-size: 13px;
  font-weight: 600;
}

.side-hero__signal-index {
  min-width: 22px;
  color: #11A8AF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  direction: ltr;
}

.side-hero__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 2px;
  color: #0A6E73;
  font-size: 14px;
  font-weight: 800;
  transition: color 200ms ease, transform 200ms ease;
}

.side-hero__link:hover { color: #CA8A04; transform: translateX(-3px); }
.side-hero__link:focus-visible { outline: 3px solid rgba(202, 138, 4, 0.32); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 1023px) {
  .side-hero { max-width: 100%; min-height: auto; }
  .side-hero__concept { min-height: auto; padding: 26px 24px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .side-hero__link, .side-hero__link:hover { transform: none; }
}

/* ============================================================
   KINETIC SIDE HERO
   Logo -> fixed sentence -> rotating final word -> description.
   The orbit visualises one learning core with several modes.
   ============================================================ */
.side-hero.side-hero--kinetic {
  width: 100%;
  max-width: 500px;
  min-height: 590px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.side-hero.side-hero--kinetic::before {
  display: none;
}

.side-hero--kinetic > :not(.side-hero__kinetic) {
  display: none;
}

.side-hero__kinetic {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  width: 100%;
  min-height: 590px;
  padding: 8px 24px 16px;
}

.side-hero.side-hero--kinetic > .side-hero__kinetic {
  display: grid;
}

.side-hero__brand {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 290px);
  gap: 14px;
}

.side-hero__brand-line {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17, 168, 175, 0.42));
}

.side-hero__brand-line:last-child {
  background: linear-gradient(90deg, rgba(17, 168, 175, 0.42), transparent);
}

.side-hero__brand-logo {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #FEFDF8;
  box-shadow:
    0 0 0 1px rgba(17, 168, 175, 0.2),
    0 12px 30px rgba(17, 168, 175, 0.13);
}

.side-hero__statement {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 220px;
  padding: 32px 0;
}

.side-hero__statement::before,
.side-hero__statement::after {
  content: '';
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  width: 6px;
  height: 6px;
  border: 1px solid rgba(202, 138, 4, 0.62);
  rotate: 45deg;
}

.side-hero__statement::before { top: 15px; }
.side-hero__statement::after { bottom: 15px; }

.side-hero__statement-prefix {
  margin: 0 0 8px;
  color: #0A6E73;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.side-hero--kinetic .side-hero__rotator {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 4.8rem;
  color: #CA8A04;
  font-size: clamp(2.15rem, 4.4vw, 3.55rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.045em;
  perspective: 560px;
}

.side-hero--kinetic .side-hero__rotator::after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: -8px;
  width: 68px;
  height: 3px;
  border-radius: 99px;
  background: #CA8A04;
  transform: translateX(50%) scaleX(0.42);
  opacity: 0.38;
  transform-origin: center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
}

.side-hero--kinetic.is-changing .side-hero__rotator::after {
  transform: translateX(50%) scaleX(1);
  opacity: 0.82;
}

.side-hero--kinetic .side-hero__rotator-current {
  width: 100%;
  transform-origin: center bottom;
}

.side-hero__description {
  position: relative;
  z-index: 3;
  max-width: 390px;
  margin: 0;
  color: #57534E;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
}

.side-hero__orbit {
  position: absolute;
  z-index: 1;
  top: 98px;
  right: 50%;
  width: 430px;
  height: 430px;
  transform: translateX(50%);
  pointer-events: none;
}

.side-hero__orbit::before {
  content: '';
  position: absolute;
  inset: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17, 168, 175, 0.08), rgba(17, 168, 175, 0.02) 48%, transparent 69%);
}

.side-hero__orbit-line {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(17, 168, 175, 0.17);
}

.side-hero__orbit-line--outer {
  inset: 0;
  border-color: rgba(17, 168, 175, 0.13);
  border-style: dashed;
}

.side-hero__orbit-line--inner {
  inset: 45px;
  border-color: rgba(202, 138, 4, 0.17);
}

.side-hero__satellite {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(17, 168, 175, 0.2);
  border-radius: 99px;
  background: rgba(254, 253, 248, 0.88);
  color: #0A6E73;
  box-shadow: 0 8px 18px rgba(17, 168, 175, 0.07);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.side-hero__satellite::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: #CA8A04;
}

.side-hero__satellite--personal {
  top: 52px;
  left: 24px;
}

.side-hero__satellite--interactive {
  top: 88px;
  right: -8px;
}

.side-hero__satellite--data {
  right: 40px;
  bottom: 30px;
}

@media (prefers-reduced-motion: no-preference) {
  .side-hero__brand-logo {
    animation: sideHeroLogoFloat 5s ease-in-out infinite;
  }

  .side-hero__orbit-line--outer {
    animation: sideHeroOrbitClockwise 26s linear infinite;
  }

  .side-hero__orbit-line--inner {
    animation: sideHeroOrbitCounter 20s linear infinite;
  }

  .side-hero__satellite--personal {
    animation: sideHeroSatelliteFloat 4.8s ease-in-out infinite;
  }

  .side-hero__satellite--interactive {
    animation: sideHeroSatelliteFloat 5.4s ease-in-out -1.7s infinite;
  }

  .side-hero__satellite--data {
    animation: sideHeroSatelliteFloat 5s ease-in-out -3.1s infinite;
  }
}

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

@keyframes sideHeroOrbitClockwise {
  to { transform: rotate(360deg); }
}

@keyframes sideHeroOrbitCounter {
  to { transform: rotate(-360deg); }
}

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

@keyframes sideHeroFlipOut {
  0% {
    transform: translateY(0) rotateX(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-18px) rotateX(-82deg) scale(0.96);
    opacity: 0;
  }
}

@keyframes sideHeroFlipIn {
  0% {
    transform: translateY(18px) rotateX(82deg) scale(0.96);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0deg) scale(1);
    opacity: 1;
  }
}

.side-hero__rotator-current--leaving {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}

.side-hero__rotator-current--entering {
  position: relative;
  z-index: 2;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1023px) {
  .side-hero.side-hero--kinetic {
    max-width: 540px;
    min-height: 560px;
    margin: 18px auto 0;
  }

  .side-hero__kinetic {
    min-height: 560px;
  }
}

@media (max-width: 640px) {
  .side-hero.side-hero--kinetic,
  .side-hero__kinetic {
    min-height: 500px;
  }

  .side-hero.side-hero--kinetic {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .side-hero__kinetic {
    padding: 4px 0 8px;
  }

  .side-hero__brand-logo {
    width: 66px;
    height: 66px;
  }

  .side-hero__brand-line {
    width: 42px;
  }

  .side-hero__orbit {
    top: 75px;
    width: min(360px, calc(100% - 8px));
    height: min(360px, calc(100% - 8px));
  }

  .side-hero__orbit-line--inner {
    inset: 36px;
  }

  .side-hero__satellite--personal {
    top: 35px;
    left: 4px;
  }

  .side-hero__satellite--interactive {
    top: 72px;
    right: 0;
  }

  .side-hero__satellite--data {
    right: 22px;
    bottom: 19px;
  }

  .side-hero__statement {
    min-height: 205px;
    padding: 28px 0;
  }

  .side-hero__description {
    max-width: 320px;
    padding-inline: 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-hero__brand-logo,
  .side-hero__orbit-line,
  .side-hero__satellite {
    animation: none;
  }

  .side-hero--kinetic .side-hero__rotator::after {
    transition: none;
  }
}

/* ============================================================
   CENTERED KINETIC HERO
   The learning statement is now the complete hero.
   ============================================================ */
.hero-kinetic-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  padding: 92px 0 48px;
}

.hero-kinetic-shell,
.hero-kinetic-wrap {
  width: 100%;
}

.hero-kinetic-wrap {
  display: flex;
  justify-content: center;
}

.hero-kinetic-section .side-hero.side-hero--kinetic {
  max-width: 760px;
  min-height: 650px;
  margin: 0 auto;
}

.hero-kinetic-section .side-hero__kinetic {
  min-height: 650px;
  padding: 0 30px 8px;
}

.hero-kinetic-section .side-hero__brand {
  width: min(100%, 340px);
}

.hero-kinetic-section .side-hero__brand-logo {
  width: 90px;
  height: 90px;
}

.hero-kinetic-section .side-hero__brand-line {
  width: 72px;
}

.hero-kinetic-section .side-hero__statement {
  min-height: 275px;
  padding: 38px 0;
}

.hero-kinetic-section .side-hero__statement-prefix {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
}

.hero-kinetic-section .side-hero__rotator {
  min-height: 6.4rem;
  font-size: clamp(2.85rem, 6vw, 5.25rem);
}

.hero-kinetic-section .side-hero__orbit {
  top: 72px;
  width: 550px;
  height: 550px;
}

.hero-kinetic-section .side-hero__orbit-line--inner {
  inset: 58px;
}

.hero-kinetic-section .side-hero__satellite--personal {
  top: 90px;
  left: 16px;
}

.hero-kinetic-section .side-hero__satellite--interactive {
  top: 116px;
  right: 4px;
}

.hero-kinetic-section .side-hero__satellite--data {
  right: 66px;
  bottom: 34px;
}

.side-hero__identity {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 440px;
  margin: 0;
  text-align: center;
}

.side-hero__identity p {
  margin: 0;
}

.side-hero__identity-name {
  color: #0A6E73;
  font-size: 1.05rem;
  font-weight: 500;
}

.side-hero__identity-name strong {
  font-size: 1.18em;
  font-weight: 900;
}

.side-hero__identity-field {
  color: #11A8AF;
  font-size: 0.92rem;
  font-weight: 800;
}

.side-hero__identity-field span {
  display: inline-block;
  margin-inline: 5px;
  color: #CA8A04;
}

.side-hero__identity-bridge {
  margin-top: 7px !important;
  color: #57534E;
  font-size: clamp(0.92rem, 1.7vw, 1.08rem);
  font-weight: 600;
  line-height: 1.8;
}

.mission-section__lead--story {
  max-width: 72ch;
  text-wrap: pretty;
}

/* ============================================================
   FEATURED TESTIMONIAL
   A real portrait and quote share one editorial composition.
   ============================================================ */
.testimonial-feature {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  max-width: 1040px;
  min-height: 420px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(17, 168, 175, 0.15);
  border-radius: 18px;
  background: rgba(254, 253, 248, 0.84);
  box-shadow: 0 22px 54px rgba(17, 168, 175, 0.09);
}

.testimonial-feature__media {
  position: relative;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
}

.testimonial-feature__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 65%, rgba(8, 92, 95, 0.12));
  pointer-events: none;
}

.testimonial-feature__image {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 51% 32%;
  transform: scale(1.015);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-feature:hover .testimonial-feature__image {
  transform: scale(1.045);
}

.testimonial-feature__quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 64px 58px 54px;
  text-align: right;
}

.testimonial-feature__mark {
  position: absolute;
  top: 24px;
  right: 42px;
  color: #CA8A04;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.16;
  pointer-events: none;
}

.testimonial-feature__quote > p {
  position: relative;
  z-index: 1;
  max-width: 25ch;
  margin: 0;
  color: #064E3B;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.75;
  text-wrap: balance;
}

.testimonial-feature__person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.testimonial-feature__rule {
  width: 42px;
  height: 2px;
  border-radius: 99px;
  background: #CA8A04;
}

.testimonial-feature__person cite {
  color: #0A6E73;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 767px) {
  .hero-kinetic-section {
    min-height: calc(100dvh - 8px);
    padding: 82px 0 34px;
  }

  .hero-kinetic-section .side-hero.side-hero--kinetic,
  .hero-kinetic-section .side-hero__kinetic {
    min-height: 540px;
  }

  .hero-kinetic-section .side-hero__kinetic {
    padding: 0;
  }

  .hero-kinetic-section .side-hero__brand-logo {
    width: 70px;
    height: 70px;
  }

  .hero-kinetic-section .side-hero__brand-line {
    width: 44px;
  }

  .hero-kinetic-section .side-hero__orbit {
    top: 52px;
    width: min(360px, calc(100% - 4px));
    height: min(360px, calc(100% - 4px));
  }

  .hero-kinetic-section .side-hero__orbit-line--inner {
    inset: 38px;
  }

  .hero-kinetic-section .side-hero__statement {
    min-height: 220px;
    padding: 30px 0;
  }

  .hero-kinetic-section .side-hero__statement-prefix {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
  }

  .hero-kinetic-section .side-hero__rotator {
    min-height: 4.7rem;
    font-size: clamp(1.95rem, 8.8vw, 2.5rem);
  }

  .hero-kinetic-section .side-hero__satellite--personal {
    top: 56px;
    left: 3px;
  }

  .hero-kinetic-section .side-hero__satellite--interactive {
    top: 72px;
    right: 0;
  }

  .hero-kinetic-section .side-hero__satellite--data {
    right: 28px;
    bottom: 18px;
  }

  .side-hero__identity {
    max-width: 320px;
  }

  .side-hero__identity-name {
    font-size: 0.98rem;
  }

  .side-hero__identity-field {
    font-size: 0.85rem;
  }

  .side-hero__identity-bridge {
    font-size: 0.87rem;
  }

  .testimonial-feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .testimonial-feature__media,
  .testimonial-feature__image {
    min-height: 280px;
    height: 280px;
  }

  .testimonial-feature__media::after {
    background: linear-gradient(180deg, transparent 72%, rgba(8, 92, 95, 0.12));
  }

  .testimonial-feature__quote {
    padding: 42px 26px 34px;
  }

  .testimonial-feature__mark {
    top: 12px;
    right: 18px;
    font-size: 5.5rem;
  }

  .testimonial-feature__quote > p {
    max-width: none;
    font-size: 1.18rem;
    line-height: 1.8;
  }

  .testimonial-feature__person {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-feature__image,
  .testimonial-feature:hover .testimonial-feature__image {
    transform: none;
    transition: none;
  }
}