/* ==========================================================================
   TLC ENGLISH ACADEMY - PREMIUM REDESIGN STYLESHEET (styles/premium.css)
   Authority: Linked last in index.html <head> (v=3)
   Palette: Red (#CC171D), Navy (#162336), White (#FEFEFE), Deep Navy (#0D1726), Light Grey (#F4F6F9)
   RTL First | Cairo Arabic Typography | Lining Numerals | Zero Blue Boxes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & SYSTEM RESET
   -------------------------------------------------------------------------- */
:root {
  /* Strict Palette */
  --tlc-p-red: #CC171D;
  --tlc-p-red-hover: #b01318;
  --tlc-p-red-light: #FF4D52;
  --tlc-p-red-subtle: rgba(204, 23, 29, 0.08);
  --tlc-p-red-glow: rgba(204, 23, 29, 0.14);

  --tlc-p-navy: #162336;
  --tlc-p-navy-deep: #0D1726;
  --tlc-p-navy-surface: #1E2D42;
  --tlc-p-navy-border: rgba(22, 35, 54, 0.10);

  --tlc-p-white: #FEFEFE;
  --tlc-p-grey-bg: #F4F6F9;
  --tlc-p-border-light: rgba(22, 35, 54, 0.10);
  --tlc-p-text-muted: #64748B;
  --tlc-p-text-dark: #1E293B;

  /* Typography */
  --font-arabic-cairo: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-numbers-inter: "Inter", "Poppins", system-ui, -apple-system, sans-serif;

  /* Elevation & Transitions */
  --p-card-radius: 16px;
  --p-card-border: 1px solid rgba(22, 35, 54, 0.10);
  --p-card-shadow: 0 8px 24px rgba(22, 35, 54, 0.08);
  --p-card-hover-shadow: 0 12px 32px rgba(22, 35, 54, 0.12);
  --p-transition-fast: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --p-transition-smooth: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base HTML & Reset */
html {
  font-size: 16px;
  line-height: 1.8;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  letter-spacing: normal !important; /* Strict: Never apply letter-spacing to Arabic text */
}

body {
  font-family: var(--font-arabic-cairo) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--tlc-p-navy) !important;
  background-color: var(--tlc-p-white) !important;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip; /* Prevent any horizontal scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force Cairo on all elements that don't inherit automatically */
button,
input,
select,
textarea,
label,
.btn,
.nav-link,
.lang-switcher-pill,
.faq-question,
.faq-answer,
.modal-overlay,
.modal-content,
.quiz-modal-content,
.booking-modal-content,
.resource-modal-content,
.course-access-modal-content,
.curriculum-modal-content,
.booking-stepper,
.site-footer,
.announcement-bar,
.announcement-strip,
.badge,
.card-badge,
.toast {
  font-family: var(--font-arabic-cairo) !important;
}

/* Headings: Strict 1.4 Line-Height */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.card-title,
.study-system-header h3 {
  font-family: var(--font-arabic-cairo) !important;
  line-height: 1.4 !important;
  color: var(--tlc-p-navy);
  font-weight: 800;
  margin-top: 0;
}

/* Paragraphs & Text: Min 16px, Line-height 1.8 */
p,
.section-subtitle,
.hero-lead,
.study-card-desc,
.spotlight-card-desc,
.placement-card-desc,
.faq-answer,
.about-desc,
.why-item-text {
  font-size: 1rem !important; /* 16px */
  line-height: 1.8 !important;
}

/* Minimum 14px on secondary micro-text */
small,
.announcement-lead,
.announcement-branch-info,
.announcement-sep,
.lang-switcher-pill,
.badge,
.card-badge,
.stat-label,
.hero-microcopy,
.hero-stat-label,
.hero-chip-label,
.footer-bottom {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   2. TOP ANNOUNCEMENT STRIP & HEADER
   -------------------------------------------------------------------------- */
.top-announcement-strip {
  background-color: var(--tlc-p-navy-deep) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 0 !important;
  color: #E2E8F0 !important;
  font-size: 14px !important;
}

.top-announcement-strip .announcement-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
}

.top-announcement-strip .announcement-contact {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.top-announcement-strip .announcement-pill {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--tlc-p-white) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-family: var(--font-numbers-inter) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  text-decoration: none !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

.top-announcement-strip .announcement-meta-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Header: White with subtle border and light shadow on scroll */
header.navbar,
#main-nav {
  background: var(--tlc-p-white) !important;
  border-bottom: 1px solid rgba(22, 35, 54, 0.08) !important;
  box-shadow: 0 2px 12px rgba(22, 35, 54, 0.04) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Mobile compact strip */
@media (max-width: 767px) {
  .top-announcement-strip .announcement-lead,
  .top-announcement-strip .announcement-sep,
  .top-announcement-strip .announcement-branch-info,
  .top-announcement-strip .announcement-socials {
    display: none !important;
  }

  .top-announcement-strip .announcement-container {
    justify-content: space-between !important;
    padding: 2px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   3. HERO SECTION & ANIMATED SUBTLE GRID BACKGROUND
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative !important;
  background-color: var(--tlc-p-navy) !important;
  background: linear-gradient(145deg, #162336 0%, #0D1726 100%) !important;
  color: var(--tlc-p-white) !important;
  padding: clamp(38px, 4.2vw, 62px) 0 !important;
  overflow: hidden !important;
  z-index: 1;
}

/* Background Canvas Wrapper */
.hero-canvas-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Grid Pattern (48px squares, 6% white opacity, radial mask) */
.hero-grid-pattern {
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  background-size: 48px 48px;
  background-image: 
    linear-gradient(to right, rgba(254, 254, 254, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(254, 254, 254, 0.06) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 35%, transparent 92%);
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 35%, transparent 92%);
  animation: gridDrift 50s linear infinite;
  will-change: transform;
}

@keyframes gridDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(48px, 48px, 0);
  }
}

/* Red Glow Orbs (Subtle 12-14% opacity behind text) */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
}

.hero-glow-1 {
  width: 420px;
  height: 420px;
  top: 10%;
  right: 5%;
  background: radial-gradient(circle, rgba(204, 23, 29, 0.14) 0%, transparent 70%);
  animation: glowFloat1 22s ease-in-out infinite alternate;
}

.hero-glow-2 {
  width: 360px;
  height: 360px;
  bottom: 5%;
  left: 15%;
  background: radial-gradient(circle, rgba(204, 23, 29, 0.10) 0%, transparent 70%);
  animation: glowFloat2 18s ease-in-out infinite alternate;
}

@keyframes glowFloat1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-30px, 40px, 0) scale(1.08); }
  100% { transform: translate3d(20px, -30px, 0) scale(0.95); }
}

@keyframes glowFloat2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, -20px, 0) scale(1.05); }
  100% { transform: translate3d(-20px, 30px, 0) scale(0.92); }
}

/* Pulsing Grid Squares (8-12 subtle lights) */
.hero-pulse-squares {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-pulse-sq {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: pulseSquare 8s ease-in-out infinite;
}

/* Coordinates on the 48px grid */
.hero-pulse-sq.sq-1  { top: 96px;  right: 144px; background: rgba(204, 23, 29, 0.15); animation-delay: 0.5s; }
.hero-pulse-sq.sq-2  { top: 192px; right: 288px; background: rgba(254, 254, 254, 0.12); animation-delay: 2.1s; }
.hero-pulse-sq.sq-3  { top: 144px; right: 480px; background: rgba(204, 23, 29, 0.14); animation-delay: 3.7s; }
.hero-pulse-sq.sq-4  { top: 288px; right: 96px;  background: rgba(254, 254, 254, 0.10); animation-delay: 1.3s; }
.hero-pulse-sq.sq-5  { top: 384px; right: 336px; background: rgba(204, 23, 29, 0.15); animation-delay: 4.8s; }
.hero-pulse-sq.sq-6  { top: 96px;  left: 192px;  background: rgba(254, 254, 254, 0.12); animation-delay: 2.9s; }
.hero-pulse-sq.sq-7  { top: 240px; left: 144px;  background: rgba(204, 23, 29, 0.14); animation-delay: 5.5s; }
.hero-pulse-sq.sq-8  { top: 336px; left: 288px;  background: rgba(254, 254, 254, 0.10); animation-delay: 0.9s; }
.hero-pulse-sq.sq-9  { top: 144px; left: 384px;  background: rgba(204, 23, 29, 0.15); animation-delay: 3.2s; }
.hero-pulse-sq.sq-10 { top: 432px; left: 96px;   background: rgba(254, 254, 254, 0.12); animation-delay: 6.2s; }

@keyframes pulseSquare {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.15; }
}

/* Staggered Fade-in for Hero Content */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-tag {
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
  will-change: opacity, transform;
}

.hero-title {
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
  will-change: opacity, transform;
}

.hero-lead {
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
  will-change: opacity, transform;
}

.hero-chips-row {
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
  will-change: opacity, transform;
}

.hero-cta-group {
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
  will-change: opacity, transform;
}

.hero-microcopy {
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
  will-change: opacity, transform;
}

.hero-stats-panel {
  animation: heroFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
  will-change: opacity, transform;
}

/* --------------------------------------------------------------------------
   4. HERO CONTENT LAYOUT & TYPOGRAPHY (DESKTOP RTL)
   -------------------------------------------------------------------------- */
.hero-section .container.hero-grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 64px) !important;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  max-width: 720px;
  background: rgba(22, 35, 54, 0.90) !important;
  border: 1px solid rgba(254, 254, 254, 0.12) !important;
  border-radius: 16px !important;
  padding: clamp(22px, 3.2vw, 36px) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 12px 32px rgba(13, 23, 38, 0.5) !important;
}

/* Hero Badge */
.hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(254, 254, 254, 0.08) !important;
  border: 1px solid rgba(254, 254, 254, 0.15) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #FEFEFE !important;
  margin-bottom: 14px !important;
  backdrop-filter: blur(4px);
}

.hero-tag .pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--tlc-p-red-light) !important;
  box-shadow: 0 0 8px var(--tlc-p-red-light) !important;
}

/* Hero Title */
.hero-title {
  font-size: clamp(1.95rem, 3.4vw, 2.85rem) !important;
  font-weight: 900 !important;
  line-height: 1.32 !important;
  color: #FEFEFE !important;
  margin-bottom: 14px !important;
  letter-spacing: normal !important;
}

.hero-title-accent {
  color: #FF5A5F !important; /* High contrast red on dark background (>5:1) */
  display: inline;
}

/* Hero Paragraph */
.hero-lead {
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
  color: #E2E8F0 !important;
  margin-bottom: 20px !important;
  max-width: 680px;
}

/* Three Prominent Chips */
.hero-chips-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  width: 100%;
}

.hero-highlight-chip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(13, 23, 38, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  backdrop-filter: blur(6px);
  transition: var(--p-transition-fast);
}

.hero-highlight-chip:hover {
  border-color: rgba(204, 23, 29, 0.5) !important;
  transform: translateY(-2px);
}

.hero-highlight-chip--primary {
  flex: 1 1 190px;
  background: rgba(13, 23, 38, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.hero-highlight-chip--secondary {
  flex: 0 1 auto;
  opacity: 0.95;
}

.hero-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5A5F;
  flex-shrink: 0;
}

.hero-chip-body {
  display: flex;
  flex-direction: column;
}

.hero-chip-num {
  font-family: var(--font-numbers-inter) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  color: #FEFEFE !important;
  line-height: 1.2 !important;
}

.hero-chip-label {
  font-size: 13.5px !important;
  color: #CBD5E1 !important;
  line-height: 1.3 !important;
}

/* Two CTA Buttons */
.hero-cta-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
  width: 100%;
}

/* Primary Button: Solid Red */
.btn-primary,
button.btn-primary,
a.btn-primary {
  background-color: var(--tlc-p-red) !important;
  border: 1.5px solid var(--tlc-p-red) !important;
  color: #FEFEFE !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: 14px 28px !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 16px rgba(204, 23, 29, 0.3) !important;
  transition: var(--p-transition-fast) !important;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background-color: var(--tlc-p-red-hover) !important;
  border-color: var(--tlc-p-red-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(204, 23, 29, 0.45) !important;
}

/* Secondary Button in Hero: Crisp White Border & Text */
.hero-btn-secondary,
.hero-section .btn-outline {
  background-color: transparent !important;
  border: 2px solid #FEFEFE !important;
  color: #FEFEFE !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  padding: 14px 26px !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--p-transition-fast) !important;
  cursor: pointer;
  text-decoration: none;
}

.hero-btn-secondary:hover,
.hero-section .btn-outline:hover {
  background-color: #FEFEFE !important;
  color: var(--tlc-p-navy-deep) !important;
  transform: translateY(-2px) !important;
}

/* Microcopy under buttons */
.hero-microcopy {
  font-size: 14px !important;
  color: #94A3B8 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* --------------------------------------------------------------------------
   5. COMPACT PANEL: "TLC بالأرقام" (LEFT COLUMN)
   -------------------------------------------------------------------------- */
.hero-stats-panel {
  background: rgba(13, 23, 38, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  padding: 24px 20px !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
  width: 100%;
}

.hero-stats-panel-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
  text-align: center;
}

.hero-stats-panel-title {
  color: #FEFEFE !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.hero-stats-grid-2x2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.hero-stat-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px 10px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--p-transition-fast);
}

.hero-stat-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(204, 23, 29, 0.4) !important;
  transform: translateY(-2px);
}

.hero-stat-num {
  font-family: var(--font-numbers-inter) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  color: #FEFEFE !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
  display: inline-block !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

.hero-stat-label {
  font-size: 14px !important;
  color: #CBD5E1 !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* --------------------------------------------------------------------------
   6. INDEPENDENT ADVANTAGE SECTION (UNDER HERO)
   -------------------------------------------------------------------------- */
.tlc-advantage-section {
  background-color: var(--tlc-p-grey-bg) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
  padding: clamp(56px, 6vw, 84px) 0 !important;
}

.advantage-header-block {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 40px auto;
}

.advantage-header-block .exclusive-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #B45309 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  margin-bottom: 16px !important;
}

.advantage-header-block .hero-brand-editorial-header {
  margin-bottom: 16px;
}

.advantage-header-block .editorial-kicker {
  color: var(--tlc-p-red);
  font-size: 0.95rem;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.advantage-header-block .editorial-title {
  color: var(--tlc-p-navy);
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 16px 0;
}

.advantage-header-block .hero-floating-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.hero-floating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tlc-p-white);
  border: 1px solid var(--tlc-p-border-light);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tlc-p-navy);
  box-shadow: 0 2px 6px rgba(22, 35, 54, 0.04);
}

.advantage-intro-title {
  font-size: 1.45rem !important;
  color: var(--tlc-p-navy) !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.advantage-intro-subtitle {
  font-size: 1rem !important;
  color: #64748B !important;
  margin: 0 !important;
}

/* 3 Equal Horizontal Cards on Desktop */
.advantage-three-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 36px !important;
}

.advantage-three-cards-grid .exclusive-item {
  background: var(--tlc-p-white) !important;
  border: 1px solid rgba(22, 35, 54, 0.10) !important;
  border-radius: var(--p-card-radius) !important;
  padding: 28px 24px !important;
  box-shadow: var(--p-card-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  transition: var(--p-transition-fast) !important;
}

.advantage-three-cards-grid .exclusive-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--p-card-hover-shadow) !important;
  border-color: rgba(204, 23, 29, 0.25) !important;
}

.advantage-three-cards-grid .exclusive-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--tlc-p-red-subtle) !important;
  color: var(--tlc-p-red) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  flex-shrink: 0;
}

.advantage-three-cards-grid .exclusive-info h4 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--tlc-p-navy) !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}

.advantage-three-cards-grid .exclusive-info p {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* Interactive Callout */
.advantage-interactive-callout {
  background: var(--tlc-p-white) !important;
  border: 1px solid rgba(22, 35, 54, 0.10) !important;
  border-radius: 16px !important;
  padding: 20px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-shadow: 0 4px 16px rgba(22, 35, 54, 0.05) !important;
  max-width: 900px;
  margin: 0 auto;
}

.advantage-interactive-callout .callout-text h5 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--tlc-p-navy) !important;
  margin: 0 0 4px 0 !important;
}

.advantage-interactive-callout .callout-text p {
  font-size: 0.95rem !important;
  color: #64748B !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   7. UNIVERSAL NUMERALS & ELIMINATION OF BLUE BOXES
   -------------------------------------------------------------------------- */
/* Clean Lining Numerals for all figures */
.stat-num,
.stat-number,
.hero-stat-num,
.hero-chip-num,
.spotlight-num,
.why-editorial-num,
.study-card-num-watermark,
.step-num,
.cefr-step-level,
.course-card-price,
.price-value,
.ranking-num,
.lining-nums,
[data-number] {
  font-family: var(--font-numbers-inter) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

/* Prevent number scrambling on RTL / LTR mixes */
a[href^="tel:"],
a[href*="wa.me"],
.phone-num,
.phone-link,
.stat-number,
.hero-stat-num,
.hero-chip-num,
.ltr-text {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}

/* A. 6 Reasons: .why-editorial-num -> Big elegant red numeral, NO BLUE BOX */
.why-editorial-num {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tlc-p-red) !important;
  font-family: var(--font-numbers-inter) !important;
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  display: inline-block !important;
}

/* B. Learning Journey: .study-card-num-watermark -> Elegant navy numeral */
.study-card-num-watermark {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tlc-p-navy) !important;
  font-family: var(--font-numbers-inter) !important;
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
  position: static !important;
  opacity: 0.85 !important;
}

/* C. Spotlight Numbers: .spotlight-num */
.spotlight-num {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tlc-p-red) !important;
  font-family: var(--font-numbers-inter) !important;
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  position: static !important;
  margin-bottom: 8px !important;
  display: block !important;
  opacity: 0.9 !important;
}

/* D. Booking Wizard Stepper: Slim Line & Checkmarks */
.booking-stepper {
  background: var(--tlc-p-white) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
  padding: 16px 24px !important;
  gap: 12px !important;
}

.booking-step-indicator {
  color: #64748B !important;
  font-family: var(--font-arabic-cairo) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.booking-step-indicator:not(:last-child)::after {
  background: var(--tlc-p-border-light) !important;
  height: 2px !important;
}

.booking-step-indicator.completed:not(:last-child)::after {
  background: var(--tlc-p-red) !important;
}

.booking-step-indicator .step-num {
  background: transparent !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #64748B !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.booking-step-indicator.active .step-num {
  background: var(--tlc-p-red) !important;
  border-color: var(--tlc-p-red) !important;
  color: #FEFEFE !important;
}

.booking-step-indicator.active {
  color: var(--tlc-p-red) !important;
  font-weight: 700 !important;
}

.booking-step-indicator.completed .step-num {
  background: var(--tlc-p-navy) !important;
  border-color: var(--tlc-p-navy) !important;
  color: #FEFEFE !important;
  position: relative !important;
}

.booking-step-indicator.completed .step-num::after {
  content: "✓" !important;
  position: static !important;
  border: none !important;
  transform: none !important;
  color: #FEFEFE !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* Neutralize any legacy generic blue */
[class*="blue"],
[style*="#2563EB"],
[style*="#3B82F6"],
[style*="#1E40AF"] {
  background-color: var(--tlc-p-navy) !important;
  border-color: var(--tlc-p-navy) !important;
}

/* --------------------------------------------------------------------------
   8. MOBILE RESPONSIVENESS & TOUCH TARGETS (360px / 390px / 430px)
   -------------------------------------------------------------------------- */
/* Touch targets min 48px */
button,
a.btn,
.btn,
input[type="button"],
input[type="submit"],
.lang-switcher-pill,
.modal-close-btn {
  min-height: 48px !important;
  cursor: pointer;
}

/* Modals: 100dvh safe, 360px safe */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(13, 23, 38, 0.85) !important;
  backdrop-filter: blur(4px);
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-content,
.quiz-modal-content,
.booking-modal-content,
.resource-modal-content,
.course-access-modal-content,
.curriculum-modal-content {
  background: var(--tlc-p-white) !important;
  border: var(--p-card-border) !important;
  border-radius: var(--p-card-radius) !important;
  box-shadow: 0 24px 64px rgba(22, 35, 54, 0.25) !important;
  width: 100% !important;
  max-width: 820px !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
  margin: auto !important;
  position: relative !important;
  color: var(--tlc-p-navy) !important;
}

.modal-close-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  color: var(--tlc-p-navy) !important;
  border: 1px solid #E2E8F0 !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--p-transition-fast) !important;
}

.modal-close-btn:hover {
  background: var(--tlc-p-red) !important;
  color: #FEFEFE !important;
  border-color: var(--tlc-p-red) !important;
}

/* Mobile Media Queries */
@media (max-width: 767px) {
  /* Hero single column strictly in requested order */
  .hero-section .container.hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  .hero-title {
    font-size: clamp(1.9rem, 7vw, 2.7rem) !important;
    line-height: 1.3 !important;
  }

  .hero-lead {
    font-size: 1rem !important;
  }

  .hero-chips-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-highlight-chip {
    width: 100% !important;
  }

  .hero-cta-group {
    flex-direction: column !important;
    width: 100% !important;
  }

  .hero-cta-group .btn {
    width: 100% !important;
  }

  .hero-microcopy {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Compact 2x2 panel below buttons on mobile */
  .hero-stats-panel {
    margin-top: 12px;
  }

  /* Static Grid on Mobile: disable animation and pulses to save phone resources */
  .hero-grid-pattern {
    animation: none !important;
  }

  .hero-pulse-squares {
    display: none !important;
  }

  .hero-glow-1,
  .hero-glow-2 {
    animation: none !important;
    opacity: 0.8 !important;
  }

  /* Advantage section on Mobile: 1 column */
  .advantage-three-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .advantage-interactive-callout {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
  }

  .advantage-interactive-callout .btn {
    width: 100% !important;
  }
}

/* Courses Section Centering & Anti-Blowout Grid Rules */
.courses-filter-tabs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  margin-bottom: 40px !important;
  text-align: center !important;
}

.courses-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.course-card {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Vertical stack inside card footer so buttons never push card min-width beyond container */
.course-footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 18px !important;
}

.course-footer-actions .btn {
  width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 16px !important;
  box-sizing: border-box !important;
}

/* Responsive Grid Columns */
@media (max-width: 640px) {
  .courses-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Tablet Media Queries (641px - 1099px) */
@media (min-width: 641px) and (max-width: 1099px) {
  .courses-grid,
  .study-system-grid,
  .why-strip-grid,
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Desktop 1100px+ */
@media (min-width: 1100px) {
  .courses-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   9. PREMIUM LOOK & SECTION RHYTHM ACROSS THE PAGE
   -------------------------------------------------------------------------- */
/* Alternating Background Rhythm */
#hero {
  background: linear-gradient(145deg, #162336 0%, #0D1726 100%) !important;
}

.partner-logos-strip {
  background-color: var(--tlc-p-white) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
  padding: 32px 0 !important;
}

#about {
  background-color: var(--tlc-p-white) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
}

#bestsellers {
  background-color: var(--tlc-p-grey-bg) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
}

#study-system {
  background-color: var(--tlc-p-white) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
}

#branch {
  background-color: var(--tlc-p-grey-bg) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
}

#courses {
  background-color: var(--tlc-p-white) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
}

#recorded {
  background-color: var(--tlc-p-grey-bg) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
}

#resources {
  background-color: var(--tlc-p-white) !important;
  border-bottom: 1px solid var(--tlc-p-border-light) !important;
}

#faq {
  background-color: var(--tlc-p-grey-bg) !important;
}

.site-footer {
  background-color: var(--tlc-p-navy-deep) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  padding: 64px 0 32px 0 !important;
}

/* Uniform Section Headers Pattern:
   1) Red small eyebrow
   2) Strong navy title
   3) Grey subtitle
   4) Thin red line (48px) underneath */
.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px auto;
}

.section-eyebrow {
  color: var(--tlc-p-red) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-bottom: 8px;
  display: inline-block;
}

.section-title {
  color: var(--tlc-p-navy) !important;
  font-size: clamp(1.7rem, 4vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin-bottom: 14px !important;
}

.section-subtitle {
  color: #475569 !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin-bottom: 18px !important;
}

.section-header::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--tlc-p-red);
  border-radius: 2px;
  margin: 16px auto 0 auto;
}

/* Cards Design System */
.card,
.course-card,
.spotlight-card,
.study-card,
.why-item,
.placement-cta-card,
.branch-card,
.resource-card,
.faq-item {
  background: var(--tlc-p-white) !important;
  border: var(--p-card-border) !important;
  border-radius: var(--p-card-radius) !important;
  box-shadow: var(--p-card-shadow) !important;
  transition: var(--p-transition-fast) !important;
}

.card:hover,
.course-card:hover,
.spotlight-card:hover,
.study-card:hover,
.resource-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--p-card-hover-shadow) !important;
  border-color: rgba(204, 23, 29, 0.22) !important;
}

/* Secondary Buttons in page */
.btn-outline,
button.btn-outline,
a.btn-outline {
  background-color: transparent !important;
  border: 1.5px solid var(--tlc-p-navy) !important;
  color: var(--tlc-p-navy) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: var(--p-transition-fast) !important;
}

.btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover {
  background-color: var(--tlc-p-navy) !important;
  color: #FEFEFE !important;
}

/* Focus Visible for Accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--tlc-p-red) !important;
  outline-offset: 2px !important;
}

/* WhatsApp Floating & Direct Buttons */
.floating-whatsapp-btn {
  background-color: #25D366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
}

.btn-whatsapp-direct {
  background-color: #25D366 !important;
  border: 1.5px solid #25D366 !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   8. TASK 3: FONT CLARITY, CONTRAST FIXES & CAIRO ENFORCEMENT
   -------------------------------------------------------------------------- */

/* A. Force Cairo Font on all non-inheriting UI elements */
button, input, select, textarea, table, th, td,
.modal, .modal-content, .video-player, [data-tooltip],
.btn, .form-input, .form-textarea, .curriculum-player-box {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* B. Section "لماذا تختار أكاديمية TLC" (.tlc-why-strip) */
.tlc-why-strip {
  background: linear-gradient(145deg, #162336 0%, #0D1726 100%) !important;
  border: 1px solid rgba(254, 254, 254, 0.12) !important;
  border-radius: 18px !important;
}

.tlc-why-strip .why-strip-title {
  color: #FEFEFE !important;
  font-weight: 800 !important;
}

.tlc-why-strip .why-item {
  background: #FEFEFE !important;
  border: 1px solid rgba(22, 35, 54, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(13, 23, 38, 0.06) !important;
  color: #3A4658 !important;
}

.tlc-why-strip .why-item .why-editorial-num {
  color: #CC171D !important;
  font-weight: 800 !important;
}

.tlc-why-strip .why-item .why-item-text {
  color: #3A4658 !important;
  font-size: 1rem !important; /* 16px */
  line-height: 1.8 !important;
}

.tlc-why-strip .why-item .why-item-text strong,
.tlc-why-strip .why-item .why-item-text b {
  color: #162336 !important;
  font-weight: 700 !important;
}

/* C. Course Cards & Expanded Course Details Contrast & Typography */
.course-card {
  background: #FEFEFE !important;
  border: 1px solid rgba(22, 35, 54, 0.12) !important;
  border-radius: 16px !important;
  color: #3A4658 !important;
}

.course-title {
  color: #162336 !important;
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

.goal-label,
.target-label,
.takeaways-title,
.examples-header,
.detail-badge-label {
  color: #162336 !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
}

.goal-text,
.target-text,
.takeaways-list li,
.examples-list li,
.course-detail-row span {
  color: #3A4658 !important;
  font-size: 1rem !important; /* 16px */
  line-height: 1.8 !important;
}

.takeaways-list .check-icon {
  color: #162336 !important;
  font-weight: 900 !important;
}

/* Secondary Meta Texts: Minimum 15px & Minimum Contrast #5B6678 on Light Canvas */
.course-cat-tag,
.course-badge-pill,
.mode-pill,
.course-meta-row,
.slot-label,
.slot-seats,
.confirm-detail-box,
.resource-modal-desc {
  font-size: 15px !important;
  color: #3A4658 !important;
}

.course-meta-row strong {
  color: #162336 !important;
}

/* D. Modals & Forms High Contrast */
.modal-content {
  background: #FEFEFE !important;
  color: #3A4658 !important;
  border-radius: 16px !important;
}

.quiz-modal-header h2,
.resource-modal-title,
.step-heading-group h3 {
  color: #162336 !important;
  font-weight: 800 !important;
}

.form-label,
label.form-label {
  color: #162336 !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
}

.form-input,
.form-textarea,
input.form-input,
textarea.form-textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #162336 !important;
  font-size: 1rem !important;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #5B6678 !important;
  opacity: 1 !important;
}

.form-input:focus,
.form-textarea:focus {
  border-color: #CC171D !important;
  box-shadow: 0 0 0 3px rgba(204, 23, 29, 0.14) !important;
}

/* E. Secondary Button Outline Contrast on Light Background */
.btn-outline,
button.btn-outline,
a.btn-outline {
  border: 1.5px solid #162336 !important;
  color: #162336 !important;
}

.btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover {
  background: #162336 !important;
  color: #FEFEFE !important;
}

/* --------------------------------------------------------------------------
   9. TASK 4: TRUE RTL BIDIRECTIONAL LAYOUT & FORMATTING
   -------------------------------------------------------------------------- */

/* Natural Text Flow & Bidi Isolation */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .course-card,
[dir="rtl"] .modal-content,
[dir="rtl"] .faq-answer,
[dir="rtl"] .study-card-points li,
[dir="rtl"] .goal-text,
[dir="rtl"] .target-text,
[dir="rtl"] .hero-lead {
  direction: rtl !important;
  unicode-bidi: isolate !important;
  text-align: start !important;
}

/* Isolated LTR runs for English terms, quotes, and punctuation */
bdi,
[dir="ltr"] {
  unicode-bidi: isolate !important;
  direction: ltr !important;
  display: inline !important;
}

/* Form fields in RTL Arabic mode */
[dir="rtl"] input:not([type="tel"]):not([type="email"]):not([type="url"]):not([data-ltr]),
[dir="rtl"] textarea,
[dir="rtl"] select {
  direction: rtl !important;
  text-align: start !important;
}

/* Telephone, email, url fields always retain LTR formatting with start alignment */
input[type="tel"],
input[type="email"],
input[type="url"],
.phone-number,
.ltr-input,
strong[dir="ltr"] {
  direction: ltr !important;
  text-align: start !important;
  unicode-bidi: isolate !important;
}

/* Unordered and Ordered Lists Natural Indentation */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-inline-start: 1.25rem;
  padding-inline-end: 0;
}

/* Ensure colons after Arabic headers stay at the start/left edge in RTL */
.goal-label,
.target-label,
.detail-badge-label,
.takeaways-title {
  unicode-bidi: isolate !important;
}