/* ═══════════════════════════════════════════════════════════════
   TALK ARABIC — Global Stylesheet
   Visual Identity v4 — Red / Navy / Cream / Maroon / Steel
   Simple. Geometric. Timeless.
   Aligned to Brand Pack v4 (see TALK-ARABIC-LOGO-SPEC v1.3).
   ═══════════════════════════════════════════════════════════════ */

/* --- Local Font Faces (self-hosted from provided design zip) --- */
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins/Poppins-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/lora/Lora-VariableFont_wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/lora/Lora-Italic-VariableFont_wght.ttf') format('truetype');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

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

:root {
  /* Talk Arabic Brand Kit v1.6 */
  --ta-mist:       #E8EDF2;
  --ta-violet:     #669BBC;
  --ta-berry:      #893469;
  --ta-ink:        #1C1C2E;

  /* Legacy semantic names retained for existing selectors. */
  --ta-red:        var(--ta-violet);
  --ta-navy:       var(--ta-ink);
  --ta-cream:      var(--ta-mist);
  --ta-maroon:     var(--ta-berry);
  --ta-steel:      var(--ta-violet);

  /* Tonal variants */
  --ta-red-dark:   #2F5E78;
  --ta-red-light:  #8BB7D2;
  --ta-navy-dark:  #141423;
  --ta-navy-light: #2C2C43;
  --ta-cream-dark: #DAE2EA;
  --ta-cream-deep: #CED7E1;
  --ta-steel-light:#8BB7D2;

  /* Semantic aliases (preserve existing class contracts) */
  --color-primary:       var(--ta-red);
  --color-primary-light: var(--ta-red-light);
  --color-primary-dark:  var(--ta-red-dark);
  --color-teal:          var(--ta-navy);
  --color-teal-light:    var(--ta-navy-light);
  --color-teal-dark:     var(--ta-navy-dark);
  --color-olive:         var(--ta-maroon);
  --color-amber:         var(--ta-steel);
  --color-amber-light:   var(--ta-steel-light);
  --color-maroon:        var(--ta-maroon);
  --color-rust:          var(--ta-maroon);
  --color-cream:         var(--ta-cream);
  --color-cream-dark:    var(--ta-cream-dark);
  --color-text:          var(--ta-navy);
  --color-text-muted:    #47475F;
  --color-text-light:    #6D6D86;
  --color-white:         #FFFFFF;
  --color-border:        #C7D2DE;
  --color-border-light:  var(--ta-cream-dark);

  /* Typography — Poppins for UI, Lora for editorial/italic.
     Never mix alternatives; always pair these two.              */
  --font-latin: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-serif: 'Lora', 'Georgia', 'Times New Roman', serif;
  --font-arabic: 'Tajawal', 'Cairo', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', sans-serif;
  --font-display: var(--font-latin);
  --font-body: var(--font-latin);

  /* Type Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.2rem + 3vw, 3.25rem);
  --text-hero: clamp(2.25rem, 1rem + 5vw, 4.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(26,26,26,0.06);
  --shadow-md: 0 4px 16px rgba(26,26,26,0.08);
  --shadow-lg: 0 12px 40px rgba(26,26,26,0.12);
  --shadow-xl: 0 24px 60px rgba(26,26,26,0.16);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --content-max: 1200px;
  --content-narrow: 800px;
  --nav-height: 72px;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Page Load Animation --- */
body {
  font-family: var(--font-latin);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-cream);
  min-height: 100dvh;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-loaded {
  opacity: 1;
}

/* Brief language-transition flash during content swap */
body.lang-switching {
  opacity: 0.85;
}

/* RTL Support */
[dir="rtl"] body {
  font-family: var(--font-arabic);
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--font-arabic);
}

[dir="rtl"] .nav-link, [dir="rtl"] .btn,
[dir="rtl"] .card, [dir="rtl"] .footer {
  font-family: var(--font-arabic);
}

[dir="rtl"] body {
  line-height: 1.85;
  text-align: right;
}

[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .section-desc,
[dir="rtl"] .card-desc {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: anywhere;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text);
  text-wrap: balance;
}

p { text-wrap: pretty; max-width: 72ch; }

::selection {
  background: rgba(82, 1, 32, 0.15);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.container-narrow {
  max-width: var(--content-narrow);
}

.section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  position: relative;
}

/* ==========================================================================
   v0.8.14 — "Neden Talk Arabic" counter strip as a DEEP-NAVY band
   ---------------------------------------------------------------------------
   Critique fix: four pale card sections stacked back-to-back. Turning this
   one into a dark band adds light/dark rhythm to the page AND lets the
   beam-grid backdrop (already on this section) read the way it's meant to.
   ========================================================================== */
/* Specificity (1,2,1) to beat the homepage `html[data-i18n-title] #counters`
   light-gradient rule (1,1,1) !important at line ~13472. */
html[data-i18n-title="meta.home.title"] #counters.counter-strip,
.counter-strip.beam-grid-band {
  background: linear-gradient(160deg, #0c1320 0%, #14213d 100%) !important;
  border-top: 1px solid rgba(102, 155, 188, 0.18) !important;
  border-bottom: 1px solid rgba(102, 155, 188, 0.18) !important;
}
.counter-strip .counter-heading { color: #FDF0D5 !important; }
.counter-strip .counter-sub { color: rgba(253, 240, 213, 0.74) !important; }
.counter-strip .counter-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(102, 155, 188, 0.20) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(18px, 2.2vw, 26px) !important;
}
.counter-strip .counter-title { color: #ffffff !important; }
.counter-strip .counter-text { color: rgba(253, 240, 213, 0.66) !important; }
.counter-strip .counter-value { color: var(--ta-violet, #669BBC) !important; }
/* Keep the beam-grid lines violet on the navy band (not the light-theme
   burgundy variant), and lift the content above the grid. */
.counter-strip.beam-grid-band::before {
  background-image:
    linear-gradient(rgba(102, 155, 188, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 155, 188, 0.10) 1px, transparent 1px) !important;
}
.counter-strip .container { position: relative; z-index: 2; }

.section-sm {
  padding-block: clamp(var(--space-8), 5vw, var(--space-16));
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }

/* --- Section Divider --- */
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-amber), var(--color-primary));
  border-radius: 2px;
  opacity: 0.3;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(82, 1, 32, 0.25);
}
.btn-primary:hover {
  background: var(--color-primary-light);
  box-shadow: 0 4px 16px rgba(82, 1, 32, 0.35);
  transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
  background: var(--color-teal);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(8, 64, 62, 0.25);
}
.btn-secondary:hover {
  background: var(--color-teal-light);
  box-shadow: 0 4px 16px rgba(8, 64, 62, 0.35);
  transform: translateY(-2px) scale(1.02);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px) scale(1.02);
}

.contact-level-test-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-level-test-prompt a {
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-level-test-prompt a:hover,
.contact-level-test-prompt a:focus-visible {
  color: var(--color-primary-light);
}

/* Contact page social icon hover replacement for removed inline handlers */
.contact-social-btn:hover,
.contact-social-btn:focus-visible {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* Level-test flow card and options */
.level-test-card {
  background: #fff;
  padding: clamp(24px, 4vw, 42px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.level-test-intro {
  margin: 12px auto 20px;
  color: var(--color-text-muted);
  max-width: 60ch;
}
.level-test-progress {
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: var(--color-cream-dark);
  overflow: hidden;
  margin: 0 auto 16px;
}
.level-test-progress > span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
  transition: width var(--transition-base);
}
.level-test-step {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: 8px;
}
.level-test-question {
  font-size: var(--text-xl);
  margin-bottom: 18px;
}
.level-test-options {
  display: grid;
  gap: 10px;
  text-align: left;
}
.level-test-option {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  padding: 12px 14px;
  font-weight: 500;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.level-test-option:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.level-test-option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-cream-dark);
}
.level-test-option:disabled {
  opacity: 0.92;
  cursor: default;
}
.level-test-hint {
  margin-top: 14px;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* Student panel demo layout */
.student-panel-note {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff8ec;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.student-panel-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.student-panel-sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.student-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  border: 1px solid transparent;
  font-weight: 600;
  transition: var(--transition-fast);
}
.student-nav-link:hover {
  color: var(--color-primary);
  border-color: var(--color-border);
}
.student-nav-link.active {
  color: var(--color-white);
  background: var(--color-primary);
}
.student-panel-main {
  min-height: 320px;
}
.student-panel-view {
  display: none;
}
.student-panel-view.active {
  display: block;
}
@media (min-width: 992px) {
  .student-panel-layout {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
  .student-panel-sidebar {
    display: grid;
    gap: 8px;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
  }
  .student-nav-link {
    justify-content: flex-start;
  }
}

.btn-ghost {
  background: transparent;
  color: var(--color-teal);
  padding: var(--space-2) var(--space-4);
}
.btn-ghost:hover {
  background: rgba(28, 28, 46, 0.06);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn-full {
  width: 100%;
}

/* Button focus states */
.btn:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 3px;
}

/* --- Navigation --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: all var(--transition-base);
}

.navbar.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.navbar-logo svg,
.navbar-logo img.ta-mark {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}

.navbar-logo .ta-lockup-logo-nav {
  width: clamp(156px, 18vw, 196px);
  height: auto;
  display: block;
}

.nav-actions a[href*="student-panel.html"] {
  position: relative;
  isolation: isolate;
  border-color: rgba(232, 237, 242, 0.44);
  background:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.07)) padding-box,
    linear-gradient(120deg, rgba(102, 155, 188, 0.58), rgba(102, 155, 188, 0.46)) border-box;
  color: rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 1px rgba(102, 155, 188, 0.05),
    0 8px 18px rgba(102, 155, 188, 0.08),
    0 0 14px rgba(102, 155, 188, 0.08);
}

.nav-actions a[href*="student-panel.html"]::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(102, 155, 188, 0.13), rgba(102, 155, 188, 0.08) 46%, transparent 72%);
  opacity: 0.38;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.nav-actions a[href*="student-panel.html"]:hover,
.nav-actions a[href*="student-panel.html"]:focus-visible {
  color: var(--color-white);
  border-color: transparent;
  background:
    linear-gradient(110deg, var(--ta-violet), var(--ta-violet)) padding-box,
    linear-gradient(110deg, var(--ta-violet), var(--ta-violet)) border-box;
  box-shadow:
    0 10px 24px rgba(102, 155, 188, 0.16),
    0 0 18px rgba(102, 155, 188, 0.15);
}

.nav-actions a[href*="student-panel.html"]:hover::after,
.nav-actions a[href*="student-panel.html"]:focus-visible::after {
  opacity: 0.58;
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .nav-actions a[href*="student-panel.html"],
  .nav-actions a[href*="student-panel.html"]::after {
    transition: none;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--color-primary);
  background: rgba(82, 1, 32, 0.05);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Language Toggle (legacy - kept for compatibility) */
.lang-toggle { display: none; }

/* Language Dropdown */
.lang-dropdown {
  position: relative;
  z-index: 200;
}

.lang-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-md);
  background: var(--color-cream-dark);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  min-width: 64px;
  justify-content: center;
}

.lang-dropdown-toggle:hover {
  background: var(--color-cream);
  border-color: var(--color-border);
}

.lang-dropdown-toggle[aria-expanded="true"] {
  background: var(--color-white);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.lang-dropdown-toggle[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
}

.lang-chevron {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
}

.lang-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-menu li {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 2px);
  transition: all var(--transition-fast);
  color: var(--color-text);
}

.lang-dropdown-menu li:hover {
  background: var(--color-cream);
  color: var(--color-primary);
}

.lang-dropdown-menu li.active {
  background: rgba(82,1,32,0.06);
  color: var(--color-primary);
  font-weight: 600;
}

/* Arabic UI locale is intentionally hidden for now */
.lang-dropdown-menu li[data-lang="ar"],
.lang-btn[data-lang="ar"] {
  display: none !important;
}

[dir="rtl"] .lang-dropdown-menu {
  right: auto;
  left: 0;
}

/* Mobile language dropdown */
.mobile-lang-dropdown {
  margin-top: var(--space-4);
}

.mobile-lang-dropdown .lang-dropdown-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 1px solid var(--color-border-light);
  display: none;
}

.mobile-lang-dropdown .lang-dropdown-menu.open {
  display: block;
}

/* Mobile Menu */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

.mobile-toggle.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.mobile-toggle.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-cream);
  padding: var(--space-6);
  z-index: 99;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-base), opacity var(--transition-base);
  display: flex;
}

.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu .nav-link {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .mobile-toggle { display: flex; }
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(28, 28, 46, 0.7) 0%, rgba(28, 28, 46, 0.58) 56%, rgba(28, 28, 46, 0.5) 100%);
  z-index: 0;
}

/* Islamic Geometric Pattern for Hero */
.hero-pattern {
  display: none;
}

@keyframes patternDrift {
  from { background-position: 0 0; }
  to { background-position: 60px 60px; }
}

/* Hero gradient overlay for text readability */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  color: var(--color-white);
}

/* Hero text entrance animations */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-6);
  backdrop-filter: blur(8px);
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-6);
  max-width: 16ch;
  letter-spacing: -0.03em;
  line-height: 1.08;
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-8);
  max-width: 52ch;
  line-height: 1.6;
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.hero .btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 20px rgba(102, 155, 188, 0.35);
}
.hero .btn-primary:hover {
  background: var(--color-primary-light);
  box-shadow: 0 6px 28px rgba(102, 155, 188, 0.45);
}

.hero .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--color-white);
}
.hero .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--color-white);
}

.hero-stats {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.15);
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

.hero-stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #ffffff;
}

.hero-stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.7);
  margin-top: var(--space-1);
}

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

@media (max-width: 640px) {
  .hero { min-height: 75vh; }
  .hero-stats { flex-wrap: wrap; gap: var(--space-6); }
}

/* --- Section Headers --- */
.section-header {
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-amber);
  margin-bottom: var(--space-3);
}

.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--color-amber);
  border-radius: 1px;
}

[dir="rtl"] .section-label::before {
  order: 1;
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.section-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.7;
}

.section-header.center {
  text-align: center;
}

.section-header.center .section-label::before {
  display: none;
}

.section-header.center .section-desc {
  margin-inline: auto;
}

.section-cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* --- Cards --- */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-6);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
  transform: translateY(-4px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
}

.card-icon.color-burgundy, .color-burgundy { background: rgba(82,1,32,0.08); color: var(--color-primary); }
.card-icon.color-teal, .color-teal { background: rgba(8,64,62,0.08); color: var(--color-teal); }
.card-icon.color-amber, .color-amber { background: rgba(181,113,20,0.08); color: var(--color-amber); }
.card-icon.color-olive, .color-olive { background: rgba(112,101,19,0.08); color: var(--color-olive); }
.card-icon.color-rust, .color-rust { background: rgba(150,43,9,0.08); color: var(--color-rust); }

/* Legacy color classes */
.card-icon.burgundy { background: rgba(82,1,32,0.08); color: var(--color-primary); }
.card-icon.teal { background: rgba(8,64,62,0.08); color: var(--color-teal); }
.card-icon.amber { background: rgba(181,113,20,0.08); color: var(--color-amber); }
.card-icon.olive { background: rgba(112,101,19,0.08); color: var(--color-olive); }
.card-icon.rust { background: rgba(150,43,9,0.08); color: var(--color-rust); }

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- Grid Layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --- Feature / Value Prop Grid --- */
/* Flex (not grid) so the 5th/last row of cards CENTERS instead of orphaning
   left in a rigid 3-col grid (v0.8.13 consistency pass). 3 per row on
   desktop, 2 on tablet, 1 on phone — last row always centered. */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}
.features-grid > .card {
  flex: 1 1 calc((100% - 2 * var(--space-8)) / 3);
  max-width: calc((100% - 2 * var(--space-8)) / 3);
  min-width: 240px;
}

@media (max-width: 960px) {
  .features-grid > .card {
    flex-basis: calc((100% - var(--space-8)) / 2);
    max-width: calc((100% - var(--space-8)) / 2);
  }
}
@media (max-width: 640px) {
  .features-grid > .card { flex-basis: 100%; max-width: 100%; }
}

/* --- Steps / How It Works --- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  position: relative;
  overflow: visible;
}

/* steps::before removed as we use .steps-connector for the animated line */

.step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 auto var(--space-4);
  background: var(--color-white);
  border: 3px solid var(--color-amber);
  color: var(--color-amber);
  box-shadow: var(--shadow-md);
}

.step-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 28ch;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .steps::before { display: none; }
}

/* --- Course Cards --- */
.course-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.course-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.course-card-header {
  padding: var(--space-5) var(--space-6);
  background: var(--color-teal);
  color: var(--color-white);
}

.course-card-header.course-header-burgundy, .course-card-header.burgundy { background: var(--color-primary); }
.course-card-header.course-header-amber, .course-card-header.amber { background: var(--color-amber); }
.course-card-header.course-header-olive, .course-card-header.olive { background: var(--color-olive); }
.course-card-header.course-header-rust, .course-card-header.rust { background: var(--color-rust); }
.course-card-header.course-header-teal, .course-card-header.teal { background: var(--color-teal); }

.course-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-card-body > .btn,
.course-card-body > a.btn {
  margin-top: auto;
}

.course-card-actions {
  margin-top: auto;
}

.pricing-course-grid {
  align-items: stretch;
}

.pricing-course-grid .course-card {
  height: 100%;
}

.pricing-course-grid .course-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pricing-course-grid .course-card-body .card-desc {
  min-height: 48px;
}

.pricing-course-grid .course-meta {
  min-height: 72px;
  align-content: start;
  margin-bottom: var(--space-3);
}

.pricing-course-grid .course-pricing-link {
  align-self: start;
  margin-bottom: var(--space-4);
}

.pricing-course-grid .course-pricing-link-placeholder {
  visibility: hidden;
  pointer-events: none;
  min-height: 34px;
}

.pricing-course-grid .course-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: auto;
}

.pricing-course-grid .course-card-actions .btn {
  min-width: 0;
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px) {
  .pricing-course-grid .course-card-body {
    display: flex;
  }

  .pricing-course-grid .course-card-body .card-desc,
  .pricing-course-grid .course-meta {
    min-height: 0;
  }

  .pricing-course-grid .course-card-actions {
    grid-template-columns: 1fr;
  }
}

.course-card-icon {
  margin-bottom: var(--space-3);
}

.course-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.course-card-tagline {
  font-size: var(--text-xs);
  opacity: 0.8;
}

.course-card-level {
  font-size: var(--text-xs);
  opacity: 0.8;
}

.course-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.course-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.course-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.course-price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.course-price span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

.course-price-custom {
  font-size: var(--text-lg);
}

.level-badge {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: rgba(8,64,62,0.08);
  color: var(--color-teal);
}

.level-badge.level-all { background: rgba(8,64,62,0.08); color: var(--color-teal); }
.level-badge.level-beginner { background: rgba(181,113,20,0.08); color: var(--color-amber); }
.level-badge.level-pro { background: rgba(82,1,32,0.08); color: var(--color-primary); }

.price-per {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* --- Teacher Cards --- */
.teacher-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: all var(--transition-base);
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.teacher-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.teacher-info > .btn,
.teacher-info > a.btn {
  margin-top: auto;
}

.teacher-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.teacher-avatar {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--color-teal), var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-white);
}

.teacher-info {
  padding: var(--space-5) var(--space-4);
}

.teacher-name {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.teacher-dialect {
  font-size: var(--text-xs);
  color: var(--color-amber);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.teacher-bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.teacher-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-amber);
  margin-bottom: var(--space-4);
}

/* --- Promise Section (replaces Testimonials) --- */
.promise-wrapper {
  position: relative;
  overflow: hidden;
}

.promise-wrapper::before,
.promise-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 68px;
  width: clamp(28px, 4vw, 72px);
  pointer-events: none;
  z-index: 2;
}

.promise-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-cream) 0%, rgba(253, 240, 213, 0) 100%);
}

.promise-wrapper::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-cream) 0%, rgba(253, 240, 213, 0) 100%);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.promise-track {
  display: flex;
  gap: var(--space-6);
  transition: transform var(--transition-slow);
}

.promise-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
  min-width: 100%;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.promise-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (min-width: 641px) {
  .promise-card { min-width: calc(50% - var(--space-3)); }
}

@media (min-width: 961px) {
  /* 3 cards visible: subtract 2 gaps from 100% then divide by 3 */
  .promise-card { min-width: calc((100% - 2 * var(--space-6)) / 3); }
}

.promise-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.promise-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.promise-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.promise-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.promise-prev, .promise-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  background: var(--color-white);
}

.promise-prev:hover, .promise-next:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* --- Email Capture --- */
.email-capture {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  color: var(--color-white);
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
}

/* Decorative pattern on email capture */
.email-capture::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.5'%3E%3Cpath d='M20 0L40 20L20 40L0 20z'/%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
}


.email-capture-art {
  position: relative;
  z-index: 1;
  min-height: clamp(260px, 32vw, 390px);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.18);
}

.email-capture-art picture,
.email-capture-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.email-capture-art img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.03);
}

.email-capture-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 32, 0.02), rgba(10, 20, 32, 0.18));
  pointer-events: none;
}

.email-capture-inner {
  position: relative;
  z-index: 1;
  max-width: 580px;
}

.email-capture-icon {
  margin-bottom: var(--space-4);
}

.email-capture h2, .email-capture h3 {
  color: var(--color-white);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.email-capture p {
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-6);
  margin-inline: auto;
}

.email-capture-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.email-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
}

.email-form input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  font-size: var(--text-sm);
}

.email-form input::placeholder { color: rgba(255,255,255,0.5); }

.email-form input:focus {
  outline: none;
  border-color: var(--color-amber);
  background: rgba(255,255,255,0.15);
}

.email-form .btn { flex-shrink: 0; }


@media (max-width: 860px) {
  .email-capture {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .email-capture-art {
    width: min(100%, 360px);
    aspect-ratio: 4 / 5;
    min-height: 0;
    margin-inline: auto;
  }

  .email-capture-inner,
  .email-form {
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .email-form { flex-direction: column; }
}

/* --- Pricing Table --- */
.pricing-toggle {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
  background: var(--color-cream-dark);
  border-radius: var(--radius-full);
  padding: 4px;
  width: fit-content;
  margin-inline: auto;
}

.pricing-toggle-btn {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.pricing-toggle-btn.active {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.pricing-toggle-btn:hover,
.pricing-toggle-btn:focus-visible {
  color: var(--ta-ink);
  background: rgba(255,255,255,0.74);
  box-shadow: 0 8px 22px rgba(102, 155, 188, 0.12);
  transform: translateY(-1px);
}

.pricing-toggle-btn[data-tab="birebir"]:hover,
.pricing-toggle-btn[data-tab="birebir"]:focus-visible,
.pricing-toggle-btn[data-tab="birebir"].active {
  box-shadow:
    0 8px 22px rgba(102, 155, 188, 0.13),
    0 0 18px rgba(102, 155, 188, 0.11);
}

.pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-base);
  position: relative;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.pricing-card > .btn,
.pricing-card > a.btn {
  margin-top: auto;
}

.pricing-card.featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

.pricing-card.featured::before {
  content: attr(data-badge);
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pricing-card.featured:hover {
  transform: scale(1.02) translateY(-4px);
}

.pricing-name {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.pricing-amount {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.pricing-period {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.pricing-features {
  text-align: start;
  margin-bottom: var(--space-6);
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pricing-feature svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-teal);
  margin-top: 2px;
}

/* --- FAQ Accordion --- */
.faq-list { max-width: var(--content-narrow); margin-inline: auto; }

.faq-item {
  border-bottom: 1px solid var(--color-border-light);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover { color: var(--color-primary); }

.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-text-light);
}

.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--color-primary); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-answer-inner {
  padding-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --- Contact Form --- */
.contact-form {
  display: grid;
  gap: var(--space-5);
}

.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-input, .form-select, .form-textarea {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(82, 1, 32, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* --- Footer --- */
/* ═══════════════════════════════════════════════════════════════
   FOOTER — Modern Redesign with Teal Glow
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: linear-gradient(180deg, var(--color-teal-dark) 0%, #021f1e 100%);
  color: var(--color-white);
  padding-block: var(--space-16) var(--space-8);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8,64,62,0.5), rgba(181,113,20,0.3), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-white);
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.footer-logo-text {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.footer-desc {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 32ch;
  margin-bottom: var(--space-5);
}

.footer-brand p {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
  line-height: 1.7;
  max-width: 36ch;
}

.footer-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
  color: rgba(255,255,255,0.4);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast), text-shadow var(--transition-fast), padding-inline-start var(--transition-fast);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-white);
  text-shadow: 0 0 12px rgba(8,64,62,0.6), 0 0 24px rgba(8,64,62,0.3);
  padding-inline-start: var(--space-2);
}

.footer-link-icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.footer-link:hover .footer-link-icon {
  opacity: 1;
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer-social {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: rgba(255,255,255,0.6);
}

.footer-social:hover {
  background: rgba(8,64,62,0.4);
  border-color: rgba(8,64,62,0.6);
  color: var(--color-white);
  box-shadow: 0 0 16px rgba(8,64,62,0.4), 0 0 32px rgba(8,64,62,0.15);
  transform: translateY(-2px);
}

.footer-bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom p {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.footer-tagline {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  font-style: italic;
}

/* --- WhatsApp Button --- */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all var(--transition-base);
  animation: whatsappEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1s both, pulse-wp 2s 2s infinite;
}

[dir="rtl"] .whatsapp-float {
  right: auto;
  left: var(--space-6);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
}

@keyframes whatsappEntrance {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse-wp {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --- Islamic Geometric Motif (decorative) --- */
.motif-line {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-olive) 20%,
    var(--color-amber) 50%,
    var(--color-olive) 80%,
    transparent 100%
  );
  opacity: 0.3;
}

/* --- Alternating Section Backgrounds --- */
.bg-white { background: var(--color-white); }
.bg-cream { background: var(--color-cream); }
.bg-teal { background: var(--color-teal); color: var(--color-white); }
.bg-primary { background: var(--color-primary); color: var(--color-white); }

/* --- Badge / Tag --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.badge-primary { background: rgba(82,1,32,0.08); color: var(--color-primary); }
.badge-teal { background: rgba(8,64,62,0.08); color: var(--color-teal); }
.badge-amber { background: rgba(181,113,20,0.08); color: var(--color-amber); }

/* --- Filter Bar (Teachers) --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  justify-content: center;
}

.filter-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.filter-btn.active, .filter-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* --- Scroll Animations --- */
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}

.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* --- About Page --- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } }

.value-card {
  text-align: center;
  padding: var(--space-8);
}

.value-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 2rem;
}

/* --- Team Cards --- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 540px;
  margin-inline: auto;
}

@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.team-card-founder .founder-portrait {
  width: min(100%, 260px);
  margin: 0 auto var(--space-5);
  border-radius: 16px;
}

.team-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.team-name {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.team-role {
  font-size: var(--text-sm);
  color: var(--color-amber);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

/* --- Page Header (for inner pages) --- */
.page-header {
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-12);
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.8'%3E%3Cpath d='M30 0L60 30L30 60L0 30z'/%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}

.page-header h1 {
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.page-header p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.8);
  margin-inline: auto;
  max-width: 50ch;
}

/* --- Comparison Differentiator --- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 640px) { .diff-grid { grid-template-columns: 1fr; } }

.diff-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border-top: 3px solid var(--color-amber);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.diff-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --- Currency Toggle --- */
.currency-toggle {
  display: inline-flex;
  background: var(--color-cream-dark);
  border-radius: var(--radius-full);
  padding: 3px;
}

.currency-btn {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  color: var(--color-text-muted);
}

.currency-btn.active {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* --- Early Bird Banner --- */
.early-bird {
  background: linear-gradient(135deg, var(--color-rust), var(--color-primary));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  text-align: center;
  margin-bottom: var(--space-10);
}

.early-bird h3 {
  color: var(--color-white);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.early-bird p {
  color: rgba(255,255,255,0.85);
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG PAGE
   ═══════════════════════════════════════════════════════════════ */
.blog-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.blog-filter-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.blog-filter-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

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

.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-6);
  transition: all var(--transition-fast);
}

.blog-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.blog-card[hidden] {
  display: none;
}

.blog-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.blog-lang-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.blog-lang-en {
  background: rgba(82,1,32,0.08);
  color: var(--color-primary);
}

.blog-lang-tr {
  background: rgba(8,64,62,0.08);
  color: var(--color-teal);
}

.blog-lang-ar {
  background: rgba(181,113,20,0.08);
  color: var(--color-amber);
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.blog-reading-time::before {
  content: '\2022';
  margin-inline-end: var(--space-3);
}

.blog-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

[dir="rtl"] .blog-card-title {
  font-family: var(--font-arabic);
}

.blog-card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.blog-read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  padding: 0;
}

.blog-read-more-btn:hover {
  color: var(--color-primary-light);
}

.blog-read-more-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.blog-read-more-btn svg {
  transition: transform var(--transition-fast);
}

.blog-full-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}

.blog-full-content.open {
  max-height: 3000px;
}

.blog-content-inner {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-4);
}

.blog-content-inner p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

.blog-content-inner h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.blog-content-inner h3:first-child {
  margin-top: 0;
}

[dir="rtl"] .blog-content-inner {
  font-family: var(--font-arabic);
}

/* ═══════════════════════════════════════════════════════════════
   TEAM AVATARS (About page)
   ═══════════════════════════════════════════════════════════════ */
.team-avatar-teal {
  background: linear-gradient(135deg, #08403E, #052c2b);
  color: #FAF7F2;
  font-weight: 700;
}

.team-avatar-amber {
  background: linear-gradient(135deg, #B57114, #d4891f);
  color: #FAF7F2;
  font-weight: 700;
}

.team-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS & MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */

/* 1. Staggered entrance animations for grid items */
.animate-in:nth-child(1) { transition-delay: 0ms; }
.animate-in:nth-child(2) { transition-delay: 80ms; }
.animate-in:nth-child(3) { transition-delay: 160ms; }
.animate-in:nth-child(4) { transition-delay: 240ms; }
.animate-in:nth-child(5) { transition-delay: 320ms; }
.animate-in:nth-child(6) { transition-delay: 400ms; }

/* 2. Smooth card hover lift */
.course-card,
.pricing-card,
.teacher-card,
.blog-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.course-card:hover,
.pricing-card:hover,
.teacher-card:hover,
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(82,1,32,0.12);
}

.pricing-card.featured:hover {
  transform: scale(1.02) translateY(-6px);
}

/* 3. Button hover animations */
.btn-primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(82,1,32,0.25);
}

/* 4. Nav link underline animation */
.nav-links .nav-link {
  position: relative;
}

.nav-links .nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

[dir="rtl"] .nav-links .nav-link::after {
  transform-origin: right center;
}

.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after {
  transform: scaleX(1);
}

/* 5. Hero element fade-up with staggered delays */
.hero-badge { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.2s; }
.hero-subtitle { animation-delay: 0.35s; }
.hero-ctas { animation-delay: 0.5s; }

/* 6. Smooth page transition */
body {
  opacity: 0;
  animation: pageIn 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageIn {
  to { opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-in { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; transform: none; }
  .whatsapp-float { animation: none; }
  body { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   NEW FOOTER
   ═══════════════════════════════════════════════════════════════ */

.footer-new {
  background: #0A0A0F;
  overflow: hidden;
}

/* Artwork band */
.footer-artwork-band {
  position: relative;
  width: 100%;
  padding: var(--space-10) 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

.footer-artwork-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 200px;
  background: radial-gradient(ellipse at center bottom, rgba(82,1,32,0.25) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes footer-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.footer-artwork {
  animation: footer-float 7s ease-in-out infinite;
  width: 100%;
  max-width: 900px;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.footer-artwork.visible {
  opacity: 1;
}

/* Main content */
.footer-main {
  padding: var(--space-10) 0 var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-grid-new {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: var(--space-8);
}

.footer-logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.footer-logo-text-new {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #FAF7F2;
  letter-spacing: -0.01em;
}

.footer-desc-new {
  font-size: var(--text-sm);
  color: #9A8E82;
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 28ch;
}

.footer-logo-tagline {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 16px);
  color: rgba(253, 240, 213, 0.75);
  letter-spacing: 0.01em;
  margin: -2px 0 var(--space-3);
}

.footer-socials-new {
  display: flex;
  gap: var(--space-3);
}

.footer-social-new {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #9A8E82;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

.footer-social-new:hover {
  background: rgba(181,113,20,0.15);
  border-color: rgba(181,113,20,0.3);
  color: #B57114;
}

.footer-col-new {}

.footer-heading-new {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-4);
}

.footer-links-new {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-link-new {
  font-size: var(--text-sm);
  color: #9A8E82;
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-link-new:hover {
  color: #FAF7F2;
}

.footer-link-wa-new {
  color: #25D366;
}

.footer-link-wa-new:hover {
  color: #25D366;
  opacity: 0.85;
}

.footer-link-icon-new {
  flex-shrink: 0;
  opacity: 0.7;
}

.footer-link-with-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.72;
  -webkit-mask: var(--footer-icon) no-repeat center / contain;
  mask: var(--footer-icon) no-repeat center / contain;
}

.footer-bottom-new {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: var(--space-5) 0;
}

.footer-bottom-new .container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer-bottom-new p {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  margin: 0;
}

.footer-tagline-new {
  text-align: center;
}

.footer-legal-notice {
  width: 100%;
  max-width: 980px;
  min-width: 0;
  margin-inline: auto !important;
  text-align: center;
  color: rgba(255,255,255,0.48) !important;
  line-height: 1.65;
  overflow-wrap: normal;
}

.ta-protection-enabled [data-protected-content="true"],
.ta-protection-enabled .legal-content,
.ta-protection-enabled .price-card,
.ta-protection-enabled .course-card {
  -webkit-user-select: none;
  user-select: none;
}

.ta-honeypot-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.legal-bilingual-block {
  display: grid;
  gap: var(--space-8);
}

.legal-language-section {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
}

.legal-language-section h2:first-child {
  margin-top: 0;
}

.protection-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.protection-status-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}

.protection-status-card h3 {
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}

.protection-status-card code {
  overflow-wrap: anywhere;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-grid-new {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }
  .footer-brand-new {
    grid-column: 1 / -1;
  }
  .footer-desc-new {
    max-width: none;
  }
}

.footer-logo-link img {
  width: auto !important;
  display: block;
}

.footer-logo-link .ta-lockup-logo-footer {
  height: 36px !important;
}

@media (max-width: 480px) {
  .footer-grid-new {
    grid-template-columns: 1fr;
  }
  .footer-bottom-new .container {
    flex-direction: column;
    text-align: center;
  }
  .footer-tagline-new {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Base: fade + slide up (existing .animate-in enhanced) */
.animate-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from left */
.animate-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.animate-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.animate-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for child elements */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
.stagger > *:nth-child(5) { transition-delay: 320ms; }
.stagger > *:nth-child(6) { transition-delay: 400ms; }

/* ── Steps sequential animation ── */
.steps {
  position: relative;
}

.step-item {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.step-item:nth-child(2) { transition-delay: 0ms; }
.step-item:nth-child(3) { transition-delay: 180ms; }
.step-item:nth-child(4) { transition-delay: 360ms; }

/* Step connector line animation */
.steps-connector {
  position: absolute;
  top: 32px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: var(--color-border);
  overflow: hidden;
}

.steps-connector::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-amber) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.steps-connector.visible::after {
  transform: scaleX(1);
}

/* Step number pulse on visible */
@keyframes step-pulse {
  0% { box-shadow: 0 0 0 0 rgba(102, 155, 188, 0.28); }
  70% { box-shadow: 0 0 0 12px rgba(102, 155, 188, 0); }
  100% { box-shadow: 0 0 0 0 rgba(102, 155, 188, 0); }
}

.step-item.visible .step-number {
  animation: step-pulse 1s ease-out 0.4s;
}

/* ── Section labels slide in ── */
.section-label {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.section-label.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Feature cards hover lift ── */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

/* ── Course/pricing card hover ── */
.course-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* ── Stat counter fade in ── */
.hero-stat {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-stat.visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-stat:nth-child(1) { transition-delay: 600ms; }
.hero-stat:nth-child(2) { transition-delay: 750ms; }
.hero-stat:nth-child(3) { transition-delay: 900ms; }

/* ── Number count-up animation ── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Promise carousel cards ── */
.promise-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* ── Blog card hover ── */
.blog-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* ── Teacher card hover ── */
.teacher-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.teacher-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-in, .animate-left, .animate-right, .animate-scale,
  .step-item, .section-label, .hero-stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE AUDIT FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── Prevent horizontal overflow ── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
}

/* ── Safari / WebKit fixes ── */

/* Fix for Safari not supporting gap in flex properly in older versions */
.navbar-inner {
  -webkit-gap: unset; /* fallback */
}

/* Fix Safari button appearance */
button, .btn, .currency-btn, .filter-btn, .lang-dropdown-toggle {
  -webkit-appearance: none;
  appearance: none;
}

/* Fix for Safari smooth scroll */
html {
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fix Safari font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fix Safari input styling */
input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-md);
}

/* Fix for CSS animation in Safari */
.footer-artwork {
  -webkit-animation: footer-float 7s ease-in-out infinite;
}

@-webkit-keyframes footer-float {
  0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}

/* Fix for Safari backdrop-filter */
.navbar.scrolled {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Fix sticky positioning */
.navbar {
  position: -webkit-sticky;
  position: sticky;
}

/* ── Mobile fixes (max-width: 768px) ── */

@media (max-width: 768px) {
  /* Pricing cards stack properly */
  .pricing-cards {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin-inline: auto;
  }

  /* Course cards single column */
  #courses-grid.grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Feature grid 1-col */
  .features-grid {
    grid-template-columns: 1fr !important;
  }

  /* Teachers grid */
  .teachers-grid {
    grid-template-columns: 1fr !important;
  }

  /* Steps: stack vertically */
  .steps {
    flex-direction: column !important;
    gap: var(--space-8) !important;
    align-items: center;
  }

  .step {
    max-width: 320px;
    width: 100%;
  }

  /* Hide horizontal connector on mobile */
  .steps-connector {
    display: none !important;
  }

  /* Hero section padding */
  .hero-content {
    padding-top: calc(var(--space-10) + 60px);
  }

  /* Filter bar scrollable on mobile */
  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }

  /* Currency toggle */
  .currency-toggle {
    justify-content: center;
  }

  /* Promise carousel */
  .promise-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .promise-wrapper::before,
  .promise-wrapper::after {
    display: none;
  }

  /* Section padding reduction */
  .section {
    padding-block: var(--space-12) !important;
  }

  /* Page header */
  .page-header {
    padding-top: calc(80px + var(--space-10)) !important;
    padding-bottom: var(--space-10) !important;
  }

  /* Blog cards */
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* Contact form full width */
  .contact-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* About grid */
  .about-grid, .diff-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer bottom */
  .footer-bottom-new .container {
    text-align: center;
    gap: var(--space-2);
  }

  /* Touch targets */
  .btn, .nav-link, .footer-link-new, .filter-btn, .currency-btn, .faq-question {
    min-height: 44px;
  }
  .lang-dropdown-toggle {
    min-height: 44px;
    padding-inline: var(--space-3);
  }
}

/* ── Mobile fixes (max-width: 480px) ── */

@media (max-width: 480px) {
  /* Typography scale down */
  :root {
    --text-5xl: 2.25rem;
    --text-4xl: 1.875rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.25rem;
  }

  /* Navbar logo text */
  .navbar-logo {
    font-size: var(--text-lg);
  }

  /* Hero CTA buttons stack */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch !important;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Stats row */
  .hero-stats {
    gap: var(--space-6) !important;
  }

  /* Coupon block padding */
  .coupon-block {
    padding: var(--space-4) var(--space-4) !important;
  }

  /* Coupon row flex direction */
  .coupon-block > div > div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ── RTL (Arabic) fixes for mobile ── */

[dir="rtl"] .hero-ctas {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-tagline-new {
  text-align: left;
}

@media (max-width: 768px) {
  [dir="rtl"] .hero-ctas {
    flex-direction: column;
  }
  [dir="rtl"] .footer-tagline-new {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Talk Arabic — Wordmark & Mark (Visual Identity v1.0)
   Poppins weight 700 for "Talk", Lora italic for "Arabic".
   ═══════════════════════════════════════════════════════════════ */
.ta-mark {
  flex-shrink: 0;
  vertical-align: middle;
}

.ta-mark-nav {
  width: 36px;
  height: 36px;
}

.ta-mark-footer {
  width: 32px;
  height: 32px;
}

.ta-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  letter-spacing: -0.01em;
  line-height: 1;
}

.ta-wm-sans {
  font-family: var(--font-latin);
  font-weight: 700;
  color: var(--ta-red);
}

.ta-wm-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ta-navy);
}

.ta-wordmark-nav {
  font-size: clamp(1.58rem, 2.1vw, 2rem);
}

.ta-wordmark-footer {
  font-size: clamp(1.42rem, 1.8vw, 1.72rem);
}

.navbar-logo .ta-wm-sans {
  color: #F7F2E8;
  letter-spacing: -0.02em;
}

.navbar-logo .ta-wm-serif {
  color: #8FB4CF;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 600;
}

.footer-logo-link .ta-wm-sans {
  color: #F7F2E8;
}

.footer-logo-link .ta-wm-serif {
  color: #8FB4CF;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 600;
}

/* Reverse colours when wordmark sits on a dark (navy/red) surface */
.footer-new .ta-wm-sans,
[data-theme="dark"] .ta-wm-sans { color: var(--ta-cream); }
.footer-new .ta-wm-serif,
[data-theme="dark"] .ta-wm-serif { color: var(--ta-steel-light); }

@media (max-width: 768px) {
  .ta-mark-nav {
    width: 32px;
    height: 32px;
  }

  .ta-wordmark-nav {
    font-size: clamp(1.34rem, 4.6vw, 1.66rem);
  }
}

/* Editorial accents — apply Lora italic wherever the class is used */
.editorial,
.editorial-italic,
blockquote {
  font-family: var(--font-serif);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   TALK ARABIC FOOTER — CURSOR-SPOTLIGHT BRAND BAND
   Sits flush at the very bottom of .footer-new.
   ═══════════════════════════════════════════════════════════════ */

.footer-ta-band {
  position: relative;
  width: 100%;
  background: #07070C;
  overflow: hidden;
  cursor: crosshair;
}

/* Noise overlay for premium texture */
.footer-ta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Subtle top glow line — separates footer content from brand band */
.footer-ta-band::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(102, 155, 188, 0.08) 20%,
    rgba(102, 155, 188, 0.35) 40%,
    rgba(253, 240, 213, 0.12) 50%,
    rgba(102, 155, 188, 0.35) 60%,
    rgba(102, 155, 188, 0.08) 80%,
    transparent 100%);
  z-index: 1;
}

.footer-ta-stage {
  display: none;
  position: relative;
  z-index: 1;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  padding: 0;
  line-height: 1;
}

/* The TALK ARABIC spotlight text — CSS mask technique */
.footer-ta-text {
  --x: 50%;
  --y: 100%;
  display: block;
  font-family: var(--font-latin, 'Poppins', sans-serif);
  font-size: clamp(80px, 18vw, 220px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.85;
  text-align: center;
  width: 100%;
  padding: 0;
  user-select: none;
  pointer-events: none;

  /* Warm brand-aware gradient — cream → red → navy-tinted cream */
  background: linear-gradient(
    160deg,
    rgba(253, 240, 213, 0.06) 0%,
    rgba(253, 240, 213, 0.55) 40%,
    rgba(102, 155, 188, 0.7) 70%,
    rgba(102, 155, 188, 0.55) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* Spotlight mask that follows the cursor */
  -webkit-mask-image: radial-gradient(
    ellipse 600px 400px at var(--x) var(--y),
    black 0%,
    rgba(0,0,0,0.6) 35%,
    rgba(0,0,0,0.1) 60%,
    transparent 80%
  );
  mask-image: radial-gradient(
    ellipse 600px 400px at var(--x) var(--y),
    black 0%,
    rgba(0,0,0,0.6) 35%,
    rgba(0,0,0,0.1) 60%,
    transparent 80%
  );
  transition: --x 0.05s ease, --y 0.05s ease;
}

/* Fallback ghost text when cursor is not over the band */
.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: radial-gradient(
    ellipse 800px 500px at 50% 100%,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 50%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 800px 500px at 50% 100%,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 50%,
    transparent 75%
  );
  transition: mask-image 0.6s ease;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER BAND TAGLINE — "speak with confidence"
   ═══════════════════════════════════════════════════════════════ */
.footer-ta-tagline {
  display: none;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 18px);
  color: rgba(253, 240, 213, 0.65);
  letter-spacing: 0.02em;
  margin-top: 8px;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   v4.1 POLISH — RTL / Layout / Hit targets / Typography rhythm
   ═══════════════════════════════════════════════════════════════ */

/* Skip link — WCAG AA */
.ta-skip-link {
  position: absolute; top: -40px; left: 16px;
  background: var(--ta-navy); color: var(--ta-cream);
  padding: 10px 16px; border-radius: 8px;
  font-weight: 600; z-index: 100000;
  transition: top .18s ease;
}
.ta-skip-link:focus { top: 12px; outline: 3px solid var(--ta-red); outline-offset: 2px; }

/* Unified focus ring */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ta-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Headings — prevent wrap orphans + better measure */
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
p, li { text-wrap: pretty; overflow-wrap: break-word; }
p { max-width: 70ch; }
.hero p, .hero-subtitle { max-width: 56ch; }

/* Minimum tap targets (WCAG 2.5.5) */
button, .btn, .nav-link, input[type="submit"] { min-height: 44px; }
.lang-dropdown-toggle, .theme-toggle, .mobile-toggle { min-width: 44px; min-height: 44px; }

/* Section rhythm */
section, .section { padding-block: clamp(48px, 8vw, 96px); }
.section-compact { padding-block: clamp(32px, 5vw, 64px); }

/* Container consistency */
.container, .wrap, .page-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Card grids — auto-fit, no squished mobile */
.cards-grid, .card-grid, .courses-grid, .teachers-grid, .programmes-grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Prevent image CLS */
img:not([width]):not([height]) { aspect-ratio: 16/9; object-fit: cover; }

/* Prose images */
.prose img, article img, .blog-content img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-block: var(--space-6);
}

/* ─── RTL improvements ─────────────────────────────────────── */
[dir="rtl"] {
  --_dir-start: right;
  --_dir-end: left;
}
[dir="rtl"] .nav-links,
[dir="rtl"] .nav-cta,
[dir="rtl"] .hero-actions,
[dir="rtl"] .card-actions,
[dir="rtl"] .footer-grid { direction: rtl; }

[dir="rtl"] .navbar-logo { flex-direction: row-reverse; }
[dir="rtl"] .navbar-logo .ta-wordmark { direction: rtl; text-align: right; }

/* Logical properties win — force modern margin/padding where needed */
[dir="rtl"] .btn::after,
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }

/* Arabic body type — slightly larger line-height, adjust letter-spacing */
[dir="rtl"] body,
[dir="rtl"] .hero-subtitle,
[dir="rtl"] p, [dir="rtl"] li {
  line-height: 1.85;
  letter-spacing: 0;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  line-height: 1.35;
  letter-spacing: 0;
}

/* Font swap: Arabic gets a suitable Arabic-ready fallback */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select {
  font-family: 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', 'Poppins', sans-serif;
}
[dir="rtl"] .ta-wm-serif, [dir="rtl"] blockquote, [dir="rtl"] .editorial {
  font-family: 'Lora', 'Amiri', 'Segoe UI', serif;
  font-style: italic;
}

/* Navbar toggle chevron for dropdowns flips in RTL */
[dir="rtl"] .lang-dropdown-toggle .chevron,
[dir="rtl"] .dropdown-arrow { transform: scaleX(-1); }

/* Long Arabic strings in buttons — allow wrap rather than overflow */
[dir="rtl"] .btn, [dir="rtl"] .nav-link { overflow-wrap: anywhere; }

/* ─── Hero image polish ─────────────────────────────────────── */
.hero-media, .hero-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-media img, .hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Pricing card polish ───────────────────────────────────── */
.ta-price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  color: var(--ta-navy);
}
.ta-price-tag .ta-price-amount { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.01em; }
.ta-price-tag .ta-price-unit   { font-size: 14px; color: rgba(0,48,73,0.62); font-weight: 500; letter-spacing: 0; }
.ta-price-note { font-size: 12px; color: rgba(0,48,73,0.56); margin-top: 2px; }

/* ─── Print: hide interactive chrome ────────────────────────── */
@media print {
  .navbar, .footer, .mobile-toggle,
  #ta-dev-palette, .lang-dropdown, .theme-toggle { display: none !important; }
}

/* ─── Reduced motion honours ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   v3.4.1 — Navbar language-safe + image components
   ============================================================ */

/* Make navbar tolerant of longer TR/AR labels at medium widths */
.navbar-inner { gap: var(--space-3); }
.nav-links { flex-wrap: nowrap; column-gap: 2px; }
.nav-link {
  white-space: nowrap;
  padding-inline: clamp(8px, 1.2vw, 14px);
  font-size: clamp(13px, 0.85vw + 0.5rem, 15px);
  letter-spacing: -0.005em;
}
@media (max-width: 1240px) {
  .nav-link { font-size: 13px; padding-inline: 10px; }
  .nav-actions { gap: var(--space-2); }
  .lang-dropdown-toggle { min-width: 56px; padding-inline: 10px; }
}
@media (max-width: 1060px) and (min-width: 961px) {
  .nav-link { font-size: 12.5px; padding-inline: 8px; }
  .nav-actions .btn { padding-inline: 14px; font-size: 13px; }
}
/* TR + AR common pain points — some words are long */
[lang="tr"] .nav-link, [dir="rtl"] .nav-link { letter-spacing: 0; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .navbar-inner { direction: rtl; }
[dir="rtl"] .lang-dropdown-menu { text-align: right; }

/* Footer language row should wrap, not clip */
.footer-links, .footer-nav { flex-wrap: wrap; row-gap: var(--space-2); }

/* --- Course card thumb --- */
.course-card-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-cream);
  border-top-left-radius: var(--radius-lg, 14px);
  border-top-right-radius: var(--radius-lg, 14px);
}
.course-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.course-card:hover .course-card-thumb img { transform: scale(1.03); }

/* --- Dialect hero figure --- */
.dialect-hero {
  margin: 0 0 var(--space-6);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-cream);
  aspect-ratio: 16 / 9;
  max-height: 320px;
}
.dialect-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Step thumb --- */
.step-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 260px;
  margin: var(--space-3) auto var(--space-4);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-cream);
}
.step-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Founder portrait --- */
.founder-portrait {
  width: 180px;
  aspect-ratio: 3 / 4;
  margin: 0 auto var(--space-4);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-cream);
  box-shadow: var(--shadow-sm);
}
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Hero media (floating illustration) --- */
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
  overflow: hidden;
  opacity: 1;
}
.hero-bg {
  z-index: 1;
  background: linear-gradient(110deg, rgba(28, 28, 46, 0.74) 0%, rgba(28, 28, 46, 0.6) 50%, rgba(28, 28, 46, 0.52) 100%);
}
.hero-pattern {
  display: none;
}
.hero-media picture, .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  display: block;
}
.hero-content { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .hero-media { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; opacity: 1; }
  .hero-bg { background: linear-gradient(to top, rgba(28, 28, 46, 0.84) 42%, rgba(28, 28, 46, 0.55)); }
}
[dir="rtl"] .hero-media { transform: scaleX(-1); }
[dir="rtl"] .hero-media img { transform: scaleX(-1); }

/* ============================================================
   v3.4.2 — RTL wordmark lock + hero-media mirror + TR nav fit
   ============================================================ */

/* Wordmark is a Latin brand lockup — always LTR */
.ta-wordmark {
  direction: ltr !important;
  unicode-bidi: isolate;
  white-space: nowrap;
}
[dir="rtl"] .navbar-logo { flex-direction: row !important; }
[dir="rtl"] .navbar-logo .ta-wordmark { text-align: left; direction: ltr; }

/* Never flip a real photo horizontally in RTL */
[dir="rtl"] .hero-media,
[dir="rtl"] .hero-media img { transform: none !important; }

/* In RTL, swap the hero-media to the START side so text stays readable */
[dir="rtl"] .hero-media {
  inset-inline-end: auto;
  inset-inline-start: clamp(-20px, 2vw, 48px);
}

/* Hero text contrast: add stronger gradient over photo on its side */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(28, 28, 46, 0.62) 0%,
    rgba(28, 28, 46, 0.42) 34%,
    rgba(28, 28, 46, 0.2) 62%,
    rgba(28, 28, 46, 0.06) 100%);
  pointer-events: none;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  left: 0;
  width: min(24vw, 360px);
  height: 100%;
  background: linear-gradient(90deg, rgba(28, 28, 46, 0.94) 0%, rgba(28, 28, 46, 0.82) 52%, rgba(28, 28, 46, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
[dir="rtl"] .hero-media::after {
  background: linear-gradient(264deg,
    rgba(28, 28, 46, 0.62) 0%,
    rgba(28, 28, 46, 0.42) 34%,
    rgba(28, 28, 46, 0.2) 62%,
    rgba(28, 28, 46, 0.06) 100%);
}
[dir="rtl"] .hero-media::before {
  left: auto;
  right: 0;
}
@media (max-width: 900px) {
  .hero-media::after,
  .hero-media::before { display: none; }
}

/* Navbar needs to survive long TR labels + full CTA */
@media (min-width: 961px) and (max-width: 1280px) {
  .nav-link {
    font-size: 13px !important;
    padding-inline: 8px !important;
  }
  .nav-actions .btn {
    font-size: 13px;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .navbar-inner { column-gap: var(--space-2); }
}
/* At very tight widths, collapse "Book Free Trial" label length */
@media (min-width: 961px) and (max-width: 1100px) {
  [lang="tr"] .nav-actions .btn { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  /* Drop Blog link at tight widths if necessary */
  [lang="tr"] .nav-links .nav-link[href="blog.html"],
  [lang="ar"] .nav-links .nav-link[href="blog.html"] { display: none; }
}

/* Prevent headline from breaking into 3 ugly lines in TR */
.hero h1 { text-wrap: balance; hyphens: auto; }
[lang="tr"] .hero h1 { hyphens: manual; }

.language-bridge {
  position: relative;
  width: min(360px, 78vw);
  height: 20px;
  margin: var(--space-4) 0 var(--space-5);
  pointer-events: none;
}

.language-bridge-line {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;   /* was 2px — Faruk: too thick */
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(232, 212, 183, 0.45) 0%,
    rgba(232, 212, 183, 0.92) 42%,
    rgba(181, 113, 20, 0.95) 100%
  );
  box-shadow: 0 0 16px rgba(181, 113, 20, 0.3);
}

[dir="rtl"] .language-bridge-line {
  background: linear-gradient(
    270deg,
    rgba(232, 212, 183, 0.45) 0%,
    rgba(232, 212, 183, 0.92) 42%,
    rgba(181, 113, 20, 0.95) 100%
  );
}

.language-bridge-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--color-amber);
  box-shadow: 0 0 0 3px rgba(181, 113, 20, 0.25);
  transform: translate3d(0, 0, 0);
}

.ta-bridge-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* Make sure navbar never causes horizontal scroll */
html, body { overflow-x: hidden; }
/* NOTE: overflow:hidden removed — it clips the lang dropdown */
.navbar { overflow: visible; }

/* ============================================================
   v3.4.3 — Hero content width (LTR + RTL) so text never overlaps media
   ============================================================ */
@media (min-width: 960px) {
  .hero-content {
    max-width: min(56%, 640px);
    padding-inline-end: var(--space-6);
  }
  [dir="rtl"] .hero-content {
    margin-inline-start: auto;
    padding-inline-start: var(--space-6);
    padding-inline-end: 0;
  }
  .hero-media { width: min(44vw, 520px); }
}

/* Bigger cream/navy gradient overlay to ensure readable stats */
.hero-stats {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0,48,73,0.7), rgba(0,48,73,0.25));
  padding: var(--space-4) var(--space-5);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  width: fit-content;
}
[dir="rtl"] .hero-stats {
  background: linear-gradient(270deg, rgba(0,48,73,0.7), rgba(0,48,73,0.25));
}

/* ============================================================
   v3.5 — Spec §4 Pricing Section (Turkish TL, tabbed)
   ============================================================ */

.pricing-plan-shell {
  padding-top: var(--space-4);
  padding-bottom: var(--space-10);
}

.pricing-plan-header {
  margin-bottom: var(--space-6);
}

.pricing-plan-header .section-label {
  margin-bottom: var(--space-3);
}

.pricing-plan-header .section-title {
  margin-bottom: var(--space-4);
}

.pricing-plan-header .section-desc {
  max-width: 40ch;
}

.pricing-plan-actions {
  margin-top: var(--space-5);
}

.pricing-opening-banner {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(14px, 2vw, 18px);
  width: min(100%, 860px);
  margin: 0 auto var(--space-7);
  padding: clamp(15px, 2vw, 19px) clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(137, 52, 105, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
  box-shadow: 0 14px 34px rgba(28, 28, 46, 0.055);
}

.pricing-opening-kicker {
  display: block;
  width: 4px;
  min-height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ta-violet), var(--ta-berry));
  box-shadow: 0 0 18px rgba(102, 155, 188, 0.22);
}

.pricing-opening-banner p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.58;
  max-width: 72ch;
}

.pricing-opening-banner strong {
  color: var(--color-text);
  font-weight: 800;
  margin-inline-end: 8px;
}

@media (max-width: 640px) {
  .pricing-opening-banner {
    grid-template-columns: 1fr;
    text-align: start;
    justify-items: stretch;
    padding-top: 18px;
  }

  .pricing-opening-kicker {
    width: 100%;
    min-height: 4px;
    height: 4px;
  }
}

/* Sub-level toggle (A1/A2 ↔ B1/B2/C1) */
.pricing-subtoggle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
}
.pricing-subtoggle-btn {
  padding: 8px 16px;
  min-width: 58px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pricing-subtoggle-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
}

.pricing-cta-section::before {
  display: none;
}

/* Tab panel cross-fade */
.tabpanel, .tabsubpanel {
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tabpanel[hidden], .tabsubpanel[hidden] {
  display: none !important;
}
.tabpanel.leaving, .tabsubpanel.leaving {
  opacity: 0;
  transform: translateY(-8px);
}
.tabpanel.entering, .tabsubpanel.entering {
  opacity: 0;
  transform: translateY(8px);
}

/* Price card internal layout (§4.4) */
.price-card .tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  background: rgba(102, 155, 188, 0.08);
  color: var(--ta-red);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.price-card.featured .tag {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
}
.price-card .hours {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.price-card .meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.price-card .price-big {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.price-card .price-big .price-unit {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-inline-start: 4px;
}
.price-card .price-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.price-card .price-hour {
  display: inline-block;
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ta-navy);
  background: rgba(28, 28, 46, 0.06);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* Featured overrides (§4.5) */
.price-card.featured {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.price-card.featured .hours { color: var(--color-white); }
.price-card.featured .meta,
.price-card.featured .price-sub { color: rgba(253, 240, 213, 0.72); }
.price-card.featured .price-big { color: var(--color-white); }
.price-card.featured .price-big .price-unit { color: rgba(253, 240, 213, 0.72); }
.price-card.featured .price-hour {
  color: var(--color-cream);
  background: rgba(253, 240, 213, 0.15);
}
.price-card.featured::before {
  content: attr(data-badge);
  position: absolute;
  top: -12px;
  right: 20px;
  left: auto;
  transform: none;
  background: var(--ta-steel);
  color: var(--color-white);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.price-card.featured:hover {
  transform: scale(1.04) translateY(-4px);
}
.price-card.featured .btn.btn-primary {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}
.price-card.featured .btn.btn-primary:hover {
  background: var(--color-cream);
  color: var(--color-primary);
}

/* Pair-badge ("Aynı fiyat, iki farklı tempo") */
.badge-pair {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ta-steel);
  background: rgba(102, 155, 188, 0.1);
  border: 1px dashed rgba(102, 155, 188, 0.4);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  text-align: center;
}
.price-card.featured .badge-pair {
  color: var(--color-cream);
  background: rgba(253, 240, 213, 0.12);
  border-color: rgba(253, 240, 213, 0.3);
}

/* Trial strip (§4.8) */
.trial-strip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, var(--ta-steel-light), var(--ta-steel));
  color: var(--ta-navy-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.trial-strip-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: var(--ta-navy);
  flex-shrink: 0;
}
.trial-strip-body { flex: 1; min-width: 220px; }
.trial-strip-title {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: 2px;
}
.trial-strip-sub {
  font-size: var(--text-sm);
  color: var(--ta-navy-dark);
  opacity: 0.78;
}
.trial-strip .btn {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.trial-strip .btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Responsive grid for price cards */
.price-grid.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.price-grid.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .price-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
  .price-grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .price-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: move featured card first for thumb-reach */
@media (max-width: 767px) {
  .price-card.featured { order: -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .counter-grid--honest .counter-value,
  .counter-grid--honest .counter-value::before {
    animation: none !important;
  }

  .tabpanel, .tabsubpanel { transition: none !important; }
  .price-card, .price-card.featured, .pricing-toggle-btn { transition: none !important; }
  .pricing-toggle-btn:hover, .pricing-toggle-btn:focus-visible { transform: none; }
  .language-bridge { display: none; }
  .ta-bridge-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v3.5 §5 — Homepage additions (counters, tagline banner,
   programmes grid, contact section, level-test CTA)
   ═══════════════════════════════════════════════════════════════ */

/* Visually-hidden utility for a11y titles */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* --- Counter strip (§5.3) --- */
.section-slim { padding: var(--space-16) 0; }
.counter-strip {
  background: linear-gradient(135deg, var(--color-cream) 0%, #fff 100%);
  border-top: 1px solid rgba(0,48,73,0.08);
  border-bottom: 1px solid rgba(0,48,73,0.08);
}
.counter-intro {
  max-width: 760px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.counter-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.counter-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.counter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) {
  .counter-grid { grid-template-columns: repeat(4, 1fr); }
}
.counter-value {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary, #669BBC);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.counter-label {
  font-size: 0.95rem;
  color: var(--color-text-muted, #5a6876);
  font-weight: 500;
}
.counter-grid--honest {
  grid-template-columns: 1fr;
  max-width: 980px;
  text-align: left;
}
.counter-grid--honest .counter-item {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.counter-grid--honest .counter-value {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0;
  font-weight: 800;
  margin-bottom: var(--space-4);
  background: rgba(102, 155, 188, 0.1);
  color: var(--ta-violet, #669BBC);
  border: 1px solid rgba(102, 155, 188, 0.24);
  box-shadow: none;
  transform: scale(1);
  animation: ta-check-pop 560ms cubic-bezier(0.2, 1.6, 0.3, 1) both;
}
.counter-grid--honest .counter-value::before {
  content: "";
  width: 14px;
  height: 8px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 1px;
  transform: translateY(-1px) rotate(-45deg);
  transform-origin: center;
  animation: ta-check-draw 620ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.counter-grid--honest .counter-item:nth-child(2) .counter-value { animation-delay: 80ms; }
.counter-grid--honest .counter-item:nth-child(3) .counter-value { animation-delay: 160ms; }
.counter-grid--honest .counter-item:nth-child(4) .counter-value { animation-delay: 240ms; }

@keyframes ta-check-pop {
  0% { opacity: 0; transform: scale(0.78); }
  58% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ta-check-draw {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(-1px) rotate(-45deg) scale(0.9);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(-1px) rotate(-45deg) scale(1);
  }
}
.counter-title {
  font-size: var(--text-lg);
  line-height: 1.3;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.counter-text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-size: 0.95rem;
}
@media (min-width: 768px) {
  .counter-grid--honest { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tagline banner (§5.4) --- */
.tagline-banner {
  background: var(--color-teal, #1C1C2E);
  color: #fff;
  padding: var(--space-16) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tagline-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1200px 400px at 50% 120%, rgba(253,240,213,0.12), transparent 60%);
  pointer-events: none;
}
.tagline-main {
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: #fff;
  letter-spacing: 0;
}
.tagline-sub {
  font-size: 1.05rem;
  color: rgba(232, 237, 242, 0.85);
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Programmes grid (§5.5, 5 cards) --- */
.programmes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
@media (min-width: 640px)  { .programmes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .programmes-grid { grid-template-columns: repeat(3, 1fr); } }
/* On wide screens: 5 cards -> 3+2 */
@media (min-width: 1280px) {
  .programmes-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
}
.programme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid rgba(28, 28, 46, 0.08);
  border-radius: var(--radius-lg);   /* was 14px — unified card radius token (v0.8.13) */
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.programme-card:hover,
.programme-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(102, 155, 188, 0.28);
  box-shadow: 0 12px 28px -12px rgba(28, 28, 46, 0.22);
  outline: none;
}

/* Reusable "coming soon" treatment for homepage cards */
.coming-soon-card {
  background: linear-gradient(180deg, #f7f8fa 0%, #f2f4f6 100%);
  border-color: rgba(28, 28, 46, 0.16);
  color: var(--color-text-muted, #5a6876);
  box-shadow: none;
  cursor: not-allowed;
}
.coming-soon-card:hover,
.coming-soon-card:focus-visible,
.coming-soon-card:focus-within {
  transform: none;
  border-color: rgba(28, 28, 46, 0.16);
  box-shadow: none;
  outline: none;
}

.programme-card-status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(90, 104, 118, 0.2);
  background: rgba(90, 104, 118, 0.08);
  color: #4c5967;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.programme-card-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--color-cream, #E8EDF2);
  color: var(--color-primary, #669BBC);
}
.programme-card-icon.color-burgundy { color: var(--color-maroon, #893469); }
.programme-card-icon.color-teal     { color: var(--color-teal, #1C1C2E); }
.programme-card-icon.color-amber    { color: #669BBC; }
.programme-card-icon.color-olive    { color: #893469; }
.programme-card-icon.color-rust     { color: var(--color-primary, #669BBC); }
.programme-card-title {
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
  color: var(--color-teal, #1C1C2E);
}
.programme-card-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted, #5a6876);
  margin: 0;
  flex: 1;
}
.programme-card-cta {
  font-weight: 600;
  color: var(--color-primary, #669BBC);
  font-size: 0.92rem;
  margin-top: auto;
  text-decoration: none;
}

.coming-soon-card .programme-card-icon,
.coming-soon-card .programme-card-icon.color-burgundy,
.coming-soon-card .programme-card-icon.color-teal,
.coming-soon-card .programme-card-icon.color-amber,
.coming-soon-card .programme-card-icon.color-olive,
.coming-soon-card .programme-card-icon.color-rust {
  background: rgba(90, 104, 118, 0.12);
  color: rgba(90, 104, 118, 0.95);
}
.coming-soon-card .programme-card-title { color: #44505d; }
.coming-soon-card .programme-card-desc { color: #5f6d7a; }
.coming-soon-card .programme-card-cta {
  color: var(--color-teal, #1C1C2E);
  cursor: pointer;
}
.coming-soon-card .programme-card-cta:hover,
.coming-soon-card .programme-card-cta:focus-visible {
  color: var(--color-primary, #669BBC);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Level-test step CTA --- */
.btn-step-cta {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Keep homepage step-1 CTA perfectly centered under copy */
#how-it-works .step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#how-it-works .btn-step-cta {
  margin-inline: auto;
}

/* --- Contact section on homepage (§5.9) --- */
.contact-home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .contact-home-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); }
}
.contact-home-form {
  display: flex; flex-direction: column;
  gap: var(--space-4);
  background: #fff;
  border: 1px solid rgba(28, 28, 46, 0.08);
  border-radius: 14px;
  padding: var(--space-6);
}
.contact-home-form .field { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-home-form .field-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-teal, #1C1C2E);
}
.contact-home-form .input,
.contact-home-form .textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(28, 28, 46, 0.15);
  border-radius: 10px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-home-form .input:focus,
.contact-home-form .textarea:focus {
  outline: none;
  border-color: var(--color-primary, #669BBC);
  box-shadow: 0 0 0 3px rgba(102, 155, 188, 0.16);
}
.contact-home-form .textarea { resize: vertical; min-height: 120px; }

.contact-home-tally {
  min-height: 0;
}
.contact-home-tally .contact-level-test-prompt {
  margin: 0 0 var(--space-3);
}
.contact-home-tally .tally-embed-frame,
.tally-embed-frame {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
  background: transparent;
}
.contact-home-tally .tally-embed-frame {
  min-height: 420px;
}
.contact-form-shell .tally-embed-frame {
  min-height: 420px;
}
.tally-action-card {
  display: grid;
  gap: var(--space-4);
  align-content: center;
  justify-items: start;
  min-height: 250px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(28, 28, 46, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 209, 115, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}
.tally-action-card h3 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
}
.tally-action-card p {
  max-width: 48ch;
  margin: 0;
  color: var(--color-text-muted);
}
.tally-popup-button {
  margin-top: var(--space-2);
}
.tally-direct-link {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tally-fallback-note {
  margin: var(--space-3) 0 0;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .contact-home-tally { min-height: 0; }
  .contact-home-tally .tally-embed-frame {
    min-height: 620px;
  }
  .contact-form-shell .tally-embed-frame {
    min-height: 680px;
  }
  .tally-action-card {
    justify-items: stretch;
    min-height: 220px;
  }
  .tally-popup-button {
    width: 100%;
    justify-content: center;
  }
}


.contact-home-channels {
  display: flex; flex-direction: column; gap: var(--space-3);
}

.contact-social-preview {
  position: relative;
  margin: 0 0 var(--space-2);
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(28, 28, 46, 0.08);
  background: #fff;
  box-shadow: 0 18px 36px rgba(28, 28, 46, 0.10);
}

.contact-social-preview picture,
.contact-social-preview img {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-social-preview img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .contact-social-preview {
    aspect-ratio: 16 / 11;
  }
}

.channel-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid rgba(28, 28, 46, 0.08);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.channel-card:hover, .channel-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(102, 155, 188, 0.3);
  box-shadow: 0 8px 20px -8px rgba(28, 28, 46, 0.2);
  outline: none;
}
.channel-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--color-cream, #E8EDF2);
  color: var(--color-teal, #1C1C2E);
  flex-shrink: 0;
}
.channel-card.channel-wa .channel-icon { background: #25D36622; color: #128C7E; }
.channel-card.channel-ig .channel-icon { background: linear-gradient(135deg, rgba(232,237,242,0.92), rgba(218,226,234,0.92)); color: var(--color-primary); }
.channel-title { font-weight: 700; color: var(--color-teal, #1C1C2E); font-size: 1rem; }
.channel-value { color: var(--color-text-muted, #5a6876); font-size: 0.9rem; margin-top: 2px; }

/* --- Disabled socials (§7 nav cleanup) --- */
.footer-social-new.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .programme-card, .channel-card { transition: none !important; }
  .programme-card:hover, .channel-card:hover { transform: none !important; }
}


/* --- v3.5 Mobile Sticky CTA + Content Visibility --- */
.mobile-sticky-cta {
  position: fixed; bottom: 12px; left: 12px; right: 12px;
  z-index: 900;
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 768px) { .mobile-sticky-cta { display: none; } }

#promise, #counters, #contact, #newsletter {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

/* ============================================================
   v3.6.1 — UX fixes (language persist visuals, nav, hero, pricing)
   ============================================================ */

/* Typography guardrails: keep UI on Poppins, editorial accents on Lora */
:root {
  --font-latin: 'Poppins', sans-serif;
  --font-serif: 'Lora', serif;
}
body, button, input, textarea, select {
  font-family: var(--font-latin);
}

/* Modern navbar + dropdown submenu */
.navbar {
  background: rgba(28, 28, 46, 0.82);
  border-bottom: 1px solid rgba(232, 237, 242, 0.24);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.navbar.scrolled {
  background: rgba(20, 20, 35, 0.94);
  box-shadow: 0 10px 26px rgba(8, 8, 18, 0.42);
}
.nav-links .nav-link {
  color: rgba(232, 237, 242, 0.9);
  border: 1px solid transparent;
}
.nav-links .nav-link:hover,
.nav-links .nav-link.active {
  color: #fff;
  background: rgba(232, 237, 242, 0.14);
  border-color: rgba(139, 183, 210, 0.42);
}
.nav-actions .btn.btn-outline {
  color: #E8EDF2;
  border-color: rgba(232, 237, 242, 0.44);
}
.nav-actions .btn.btn-outline:hover {
  background: rgba(232, 237, 242, 0.14);
}
.lang-dropdown-toggle {
  background: rgba(232, 237, 242, 0.1);
  color: #E8EDF2;
  border-color: rgba(232, 237, 242, 0.26);
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -24px;
  right: -24px;
  height: 16px;
}
.nav-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  max-width: 320px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(3, 33, 50, 0.97);
  border: 1px solid rgba(253, 240, 213, 0.2);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 450;
}
.nav-dropdown.open .nav-submenu,
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu-link {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: rgba(253, 240, 213, 0.88);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.nav-submenu-link:hover,
.nav-submenu-link:focus-visible {
  background: rgba(253, 240, 213, 0.16);
  color: #fff;
}

.nav-submenu-birebir {
  position: relative;
}

.nav-submenu-birebir:hover,
.nav-submenu-birebir:focus-visible {
  background:
    linear-gradient(120deg, rgba(102, 155, 188, 0.22), rgba(102, 155, 188, 0.2));
  box-shadow:
    inset 0 0 0 1px rgba(232, 237, 242, 0.18),
    0 10px 24px rgba(102, 155, 188, 0.16);
}
.nav-submenu-primary {
  font-weight: 700;
  color: #fff;
}
[dir="rtl"] .nav-submenu {
  left: auto;
  right: 0;
  transform: translateY(8px);
}
[dir="rtl"] .nav-dropdown.open .nav-submenu,
[dir="rtl"] .nav-dropdown:hover .nav-submenu,
[dir="rtl"] .nav-dropdown:focus-within .nav-submenu {
  transform: translateY(0);
}
@media (max-width: 960px) {
  .nav-submenu { display: none !important; }
}

/* Hero image should span full width (no narrow left strip) */
.hero-media {
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.hero-media::before {
  display: none !important;
}
.hero-media::after {
  background:
    radial-gradient(circle at 18% 14%,
      rgba(28, 28, 46, 0.9) 0%,
      rgba(28, 28, 46, 0.62) 28%,
      rgba(28, 28, 46, 0) 52%),
    linear-gradient(108deg,
      rgba(28, 28, 46, 0.86) 0%,
      rgba(28, 28, 46, 0.74) 36%,
      rgba(28, 28, 46, 0.6) 62%,
      rgba(28, 28, 46, 0.7) 100%) !important;
}
.hero-media picture,
.hero-media img {
  object-position: center center !important;
}
@media (min-width: 960px) {
  .hero-content {
    max-width: min(640px, 90vw) !important;
    margin-inline-start: clamp(32px, 8vw, 140px);
    padding-inline: 0 var(--space-6);
  }
  [dir="rtl"] .hero-content {
    margin-inline-start: auto;
    margin-inline-end: clamp(32px, 8vw, 140px);
  }
}

/* Keep "Speak with confidence" line treatment + elegant subtext */
.footer-logo-tagline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  color: rgba(253, 240, 213, 0.95);
  letter-spacing: 0.01em;
}
.footer-logo-tagline::before,
.footer-logo-tagline::after {
  content: "";
  width: 52px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(253, 240, 213, 0.6) 100%);
  animation: footerTaglineLine 2.8s ease-in-out infinite;
}
.footer-logo-tagline::after {
  background: linear-gradient(90deg, rgba(253, 240, 213, 0.6) 0%, transparent 100%);
}
@keyframes footerTaglineLine {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}
.footer-desc-new {
  font-family: var(--font-serif);
  color: rgba(253, 240, 213, 0.88);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 34ch;
  margin-top: var(--space-2);
}
.footer-tagline-new {
  font-family: var(--font-serif);
  color: rgba(253, 240, 213, 0.74);
}

/* Better edge fade for promise carousel (fix hard cut-off on right side) */
.promise-wrapper::before,
.promise-wrapper::after {
  width: clamp(44px, 7vw, 120px);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Steps connector vertical centring */
.steps-connector {
  top: 32px;
  transform: translateY(-50%);
}

/* Pricing spacing + visible per-level feedback and panel refresh animation */
.pricing-plan-shell {
  padding-top: var(--space-2);
  padding-bottom: var(--space-8);
}
.pricing-plan-header {
  margin-bottom: var(--space-4);
}
.pricing-toggle {
  margin-bottom: var(--space-6);
}
.pricing-level-feedback {
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
@keyframes pricingPanelPulse {
  0% { opacity: 0.78; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.tabsubpanel.is-refreshing .price-card {
  animation: pricingPanelPulse 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   v3.7 — Palette Refresh + Visual Fixes (user QA pass)
   ============================================================ */
:root {
  --ta-red:        #669BBC;
  --ta-navy:       #1C1C2E;
  --ta-cream:      #E8EDF2;
  --ta-maroon:     #893469;
  --ta-steel:      #669BBC;

  --ta-red-dark:   #3326A8;
  --ta-red-light:  #8BB7D2;
  --ta-navy-dark:  #141423;
  --ta-navy-light: #2C2C43;
  --ta-cream-dark: #DAE2EA;
  --ta-cream-deep: #CED7E1;
  --ta-steel-light:#8BB7D2;

  --color-primary:       var(--ta-red);
  --color-primary-light: var(--ta-red-light);
  --color-primary-dark:  var(--ta-red-dark);
  --color-teal:          var(--ta-navy);
  --color-teal-light:    var(--ta-navy-light);
  --color-teal-dark:     var(--ta-navy-dark);
  --color-amber:         var(--ta-steel);
  --color-amber-light:   var(--ta-steel-light);
  --color-maroon:        var(--ta-maroon);
  --color-olive:         var(--ta-maroon);
  --color-rust:          var(--ta-maroon);
  --color-cream:         var(--ta-cream);
  --color-cream-dark:    var(--ta-cream-dark);
  --color-text:          var(--ta-navy);
  --color-text-muted:    #47475F;
  --color-text-light:    #6D6D86;
  --color-border:        #C7D2DE;
  --color-border-light:  var(--ta-cream-dark);
}

/* Footer tagline spacing + readable line treatment */
.footer-logo-tagline {
  color: rgba(232, 237, 242, 0.96);
  letter-spacing: 0.005em;
  gap: 10px;
}
.footer-logo-tagline::before,
.footer-logo-tagline::after {
  background: linear-gradient(90deg, transparent 0%, rgba(232, 237, 242, 0.62) 100%);
}
.footer-logo-tagline::after {
  background: linear-gradient(90deg, rgba(232, 237, 242, 0.62) 0%, transparent 100%);
}
.footer-desc-new,
.footer-tagline-new {
  color: rgba(232, 237, 242, 0.82);
}

/* Contact icon: resilient selector (works after ?lang= is appended) */
.footer-col-new .footer-link-new[data-i18n="nav.contact"]::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.72;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Story card + team card structure polish */
.team-grid {
  max-width: min(680px, 100%);
}
.team-card {
  padding: clamp(20px, 3vw, 30px);
}
.team-card-founder .founder-portrait,
.founder-portrait {
  width: min(100%, 320px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  margin: 0 auto var(--space-5);
  overflow: hidden;
  background: var(--color-cream-dark);
}
.founder-portrait picture {
  display: block;
  width: 100%;
  height: 100%;
}
.founder-portrait img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-desc {
  max-width: 48ch;
  margin-inline: auto;
}

/* Blue sections should feel progressive rather than flat */
@keyframes ta-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.trial-strip {
  background: linear-gradient(105deg, #1C1C2E 0%, #669BBC 56%, #893469 100%);
  background-size: 170% 170%;
  animation: ta-gradient-shift 9s ease-in-out infinite;
  color: #E8EDF2;
}
.trial-strip-icon {
  background: rgba(232, 237, 242, 0.2);
  color: #E8EDF2;
}
.trial-strip-title {
  color: #FFFFFF;
}
.trial-strip-sub {
  color: rgba(232, 237, 242, 0.86);
}
.trial-strip .btn {
  background: #669BBC;
  border-color: #669BBC;
}
.trial-strip .btn:hover {
  background: #3326A8;
  border-color: #3326A8;
}

/* CTA block spacing/structure */
.pricing-cta-section {
  padding-block: clamp(52px, 6vw, 88px) !important;
}
.pricing-cta-section .section-title {
  margin-bottom: var(--space-3);
}
.pricing-cta-section .section-desc {
  max-width: 56ch;
  margin-inline: auto;
}

/* Promise carousel edge treatment: remove harsh blur strip */
.promise-wrapper::before,
.promise-wrapper::after {
  width: clamp(20px, 3vw, 44px) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.promise-wrapper::before {
  background: linear-gradient(90deg, var(--color-cream) 0%, rgba(232, 237, 242, 0) 100%) !important;
}
.promise-wrapper::after {
  background: linear-gradient(270deg, var(--color-cream) 0%, rgba(232, 237, 242, 0) 100%) !important;
}

/* Step visuals: spacing + gentle motion */
.steps {
  gap: clamp(22px, 4vw, 44px);
}
.step-thumb {
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 260ms var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}
.step:hover .step-thumb,
.step-item:hover .step-thumb {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .trial-strip { animation: none !important; }
  .step-thumb { transition: none !important; }
  .step:hover .step-thumb,
  .step-item:hover .step-thumb { transform: none !important; }
}


/* How-it-works page: integrated step cards */
.process-showcase-section {
  padding-top: clamp(56px, 7vw, 92px);
}
.process-showcase-section .section-header {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.steps-showcase {
  align-items: stretch;
  gap: clamp(18px, 3vw, 32px);
}
.steps-showcase .step {
  display: grid;
  grid-template-rows: auto auto 1fr;
  text-align: left;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 48, 73, 0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 48, 73, 0.08);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease;
}
.steps-showcase .step:hover {
  transform: translateY(-4px);
  border-color: rgba(137, 52, 105, 0.22);
  box-shadow: 0 24px 60px rgba(0, 48, 73, 0.12);
}
.steps-showcase .step-number {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  background: rgba(0, 48, 73, 0.9);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0, 48, 73, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.steps-showcase .step-thumb {
  order: -1;
  max-width: none;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.steps-showcase .step-thumb img {
  transform: none !important;
}
.steps-showcase .step:nth-child(1) .step-thumb img { object-position: 48% center; }
.steps-showcase .step:nth-child(2) .step-thumb img { object-position: center center; }
.steps-showcase .step:nth-child(3) .step-thumb img { object-position: 52% center; }
.steps-showcase .step-title {
  margin: var(--space-5) var(--space-5) var(--space-2);
  color: var(--color-text);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.22;
}
.steps-showcase .step-desc {
  max-width: none;
  margin: 0 var(--space-5) var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}
@media (max-width: 900px) {
  .steps-showcase {
    grid-template-columns: 1fr !important;
    max-width: 520px;
    margin-inline: auto;
  }
  .steps-showcase .step,
  .steps-showcase .step-item {
    width: 100%;
    text-align: left !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps-showcase .step,
  .steps-showcase .step:hover {
    transform: none;
    transition: none;
  }
}

/* Student portal temporary notice */
.ta-portal-toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  z-index: 100000;
  background: rgba(28, 28, 46, 0.96);
  color: #ffffff;
  border: 1px solid rgba(232, 237, 242, 0.24);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  transition: opacity 180ms ease, transform 180ms ease;
  text-align: center;
  max-width: min(92vw, 440px);
}
.ta-portal-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   v3.7.2 — Continuation Fix Batch (QA follow-up)
   ============================================================ */

/* Keep typography strictly on local Poppins + Lora only. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select {
  font-family: var(--font-latin) !important;
}
[dir="rtl"] .ta-wm-serif,
[dir="rtl"] blockquote,
[dir="rtl"] .editorial {
  font-family: var(--font-serif) !important;
}

/* Submenu hover bridge so it does not disappear while moving the cursor down. */
.nav-dropdown::after {
  left: -20px;
  right: -20px;
  top: calc(100% - 2px);
  height: 24px;
}
.nav-submenu {
  top: 100%;
  margin-top: 8px;
}

/* Restore and improve footer spotlight band animation visibility. */
.footer-ta-stage {
  display: flex;
  min-height: clamp(160px, 26vw, 310px);
  padding: clamp(6px, 2vw, 18px) 0 0;
}
.footer-ta-text {
  font-size: clamp(72px, 16vw, 210px);
}

/* Footer brand line in Lora with visible guide lines. */
.footer-logo-tagline {
  color: rgba(232, 237, 242, 0.98);
  font-family: var(--font-serif);
  font-style: italic;
}
.footer-logo-tagline::before,
.footer-logo-tagline::after {
  opacity: 0.9;
}

/* Contact link icon: robust selector handles ?lang= links too. */
.footer-col-new:last-child .footer-link-new[href*="contact.html"]::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.74;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================
   v3.6.1 polish — header gradients, mobile step centering,
   footer link icons, navbar language alignment, footer band colors
   ============================================================ */

/* Sitewide inner-page header refresh */
.page-header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 420px at 12% -8%, rgba(102, 155, 188, 0.34), transparent 60%),
    radial-gradient(980px 420px at 92% 8%, rgba(102, 155, 188, 0.3), transparent 62%),
    linear-gradient(138deg, #233451 0%, #2d4a76 40%, #1f3357 100%);
  border-bottom: 1px solid rgba(232, 237, 242, 0.18);
}

.page-header::before {
  opacity: 0.1;
  background-size: 76px 76px;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 28, 46, 0.03) 0%, rgba(28, 28, 46, 0.26) 100%);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: none;
}

.page-header .container {
  position: relative;
  z-index: 2;
}

/* Footer links: always show saved local icons */
.footer-link-inline-icon {
  display: none !important;
}

/* Better mobile navbar alignment: language picker beside burger */
@media (max-width: 960px) {
  .navbar-inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    column-gap: 8px;
  }

  .navbar-logo {
    justify-self: start;
  }

  .nav-actions {
    justify-self: end;
    margin-inline-start: 0;
    margin-inline-end: 4px;
  }

  .nav-actions .lang-dropdown-menu {
    right: 0;
    left: auto;
    min-width: 132px;
  }

  .mobile-toggle {
    justify-self: end;
  }
}

/* Step sections centered on small screens (index + how-it-works pages) */
@media (max-width: 900px) {
  #how-it-works .section-header,
  .steps + .steps-cta,
  .steps .step,
  .steps .step-item,
  .steps .step-content {
    text-align: center !important;
  }

  .steps {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  .step,
  .step-item {
    width: min(100%, 360px);
    margin-inline: auto;
  }
}

/* Footer spotlight band updated to new palette */
.footer-ta-band {
  background:
    radial-gradient(920px 360px at 85% 110%, rgba(102, 155, 188, 0.34), transparent 64%),
    radial-gradient(700px 280px at 12% 15%, rgba(102, 155, 188, 0.22), transparent 58%),
    linear-gradient(180deg, #0e1526 0%, #121a2d 100%);
}

.footer-ta-band::after {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(102, 155, 188, 0.2) 24%,
    rgba(102, 155, 188, 0.52) 50%,
    rgba(102, 155, 188, 0.2) 76%,
    transparent 100%);
}

.footer-ta-text {
  background: linear-gradient(
    164deg,
    rgba(232, 237, 242, 0.18) 0%,
    rgba(232, 237, 242, 0.56) 34%,
    rgba(102, 155, 188, 0.72) 66%,
    rgba(102, 155, 188, 0.72) 100%
  );
}

/* Hero overlay: remove top-left artifact and keep full-width progressive color wash. */
.hero-media::after {
  background: linear-gradient(
    108deg,
    rgba(28, 28, 46, 0.84) 0%,
    rgba(102, 155, 188, 0.56) 48%,
    rgba(137, 52, 105, 0.44) 100%
  ) !important;
}
.hero-media picture,
.hero-media img {
  object-position: 60% center !important;
}

/* Pricing level feedback should visibly animate on B1/B2/C1 clicks. */
.pricing-level-feedback {
  color: var(--color-primary);
  font-weight: 700;
}
.pricing-level-feedback.is-updated {
  animation: pricingLevelFlash 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pricingLevelFlash {
  0% {
    opacity: 0.55;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Worker A CSS-only visual annotation fixes (2026-04-24)
   Scope: nav/footer logos, active underline, hero/about visuals,
   footer band/social states, dark mode and dev palette support.
   ============================================================ */

/* Keep the horizontal brand lockups crisp without crowding nav/footer chrome. */
.navbar-logo .ta-lockup-logo-nav {
  width: clamp(132px, 14vw, 176px) !important;
  max-height: 44px !important;
  object-fit: contain;
}
.footer-logo-link .ta-lockup-logo-footer,
.footer-logo-link img.ta-lockup-logo-footer {
  /* .footer-lockup-logo excluded from this legacy clamp — the v0.7.0 footer
     sizes it via a dedicated rule further down. The 50px max-height here
     was capping the new feature-piece logo at the wrong size. */
  width: clamp(150px, 18vw, 205px) !important;
  height: auto !important;
  max-height: 50px !important;
  object-fit: contain;
}
@media (max-width: 768px) {
  .navbar-logo .ta-lockup-logo-nav { width: clamp(120px, 38vw, 148px) !important; }
  .footer-logo-link .ta-lockup-logo-footer,
  .footer-logo-link img.ta-lockup-logo-footer { width: clamp(148px, 54vw, 190px) !important; }
}

/* Active nav underline belongs to the reversed/dark nav treatment, not red. */
.nav-links .nav-link::after {
  background: #ffffff !important;
  height: 2px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.42);
}
.nav-links .nav-link:hover,
.nav-links .nav-link.active {
  border-color: rgba(255, 255, 255, 0.34) !important;
}

/* Make the homepage hero image feel richer with brand-blue/palette colour wash. */
.hero-media::after {
  background:
    radial-gradient(circle at 76% 34%, rgba(232, 237, 242, 0.18) 0%, rgba(232, 237, 242, 0.08) 26%, transparent 52%),
    radial-gradient(circle at 88% 82%, rgba(102, 155, 188, 0.2) 0%, transparent 48%),
    linear-gradient(108deg,
      rgba(20, 20, 35, 0.9) 0%,
      rgba(28, 28, 46, 0.74) 35%,
      rgba(44, 44, 67, 0.44) 62%,
      rgba(102, 155, 188, 0.18) 100%) !important;
  mix-blend-mode: normal;
}
.hero-media img {
  filter: saturate(1.2) contrast(1.12) brightness(1.08);
}

/* About story card: keep the brand-pack Ink/Steel/Berry family. */
.story-pattern {
  background: linear-gradient(135deg, var(--ta-ink) 0%, var(--ta-violet) 56%, var(--ta-berry) 100%) !important;
  border-color: rgba(232, 237, 242, 0.2) !important;
  box-shadow: 0 18px 38px rgba(28, 28, 46, 0.22) !important;
}
.story-pattern-bg {
  background: linear-gradient(135deg, rgba(102, 155, 188, 0.18), rgba(232, 237, 242, 0.06)) !important;
  opacity: 1 !important;
  animation: none !important;
}
.story-card-label {
  background: rgba(232, 237, 242, 0.12) !important;
  border-color: rgba(232, 237, 242, 0.28) !important;
}
.story-card-label::before {
  background: var(--ta-violet) !important;
  box-shadow: 0 0 0 6px rgba(102, 155, 188, 0.2) !important;
}

/* Restore the visible TALK ARABIC footer design while preserving the band stage. */
.footer-ta-stage {
  display: flex !important;
  min-height: clamp(170px, 28vw, 330px) !important;
  padding-top: clamp(10px, 2.4vw, 24px) !important;
}
.footer-ta-text {
  opacity: 0.96;
  background: linear-gradient(160deg, var(--ta-mist) 0%, var(--ta-violet) 34%, var(--ta-violet) 68%, var(--ta-berry) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  -webkit-mask-image: linear-gradient(#000, #000) !important;
  mask-image: linear-gradient(#000, #000) !important;
}
.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: linear-gradient(#000, #000) !important;
  mask-image: linear-gradient(#000, #000) !important;
}

/* Socials: Instagram is the only active colour; all coming-soon icons are greyed out. */
.footer-social-new:not(.is-disabled) {
  background: linear-gradient(135deg, rgba(102, 155, 188, 0.18), rgba(102, 155, 188, 0.14));
  border-color: rgba(102, 155, 188, 0.35);
  color: #E8EDF2;
}
.footer-social-new:not(.is-disabled):hover,
.footer-social-new:not(.is-disabled):focus-visible {
  background: linear-gradient(135deg, rgba(102, 155, 188, 0.34), rgba(102, 155, 188, 0.24));
  border-color: rgba(102, 155, 188, 0.62);
  color: #ffffff;
}
.footer-social-new.is-disabled,
.footer-social-new[aria-disabled="true"],
.contact-social-btn.is-disabled,
.contact-social-btn[aria-disabled="true"] {
  opacity: 1 !important;
  color: #8B95A3 !important;
  background: #EEF3F7 !important;
  border-color: #D3DDE8 !important;
  filter: grayscale(1) saturate(0) !important;
  box-shadow: none !important;
  pointer-events: none;
  cursor: not-allowed;
}

.contact-social-btn.is-active {
  color: #669BBC !important;
  border-color: rgba(102, 155, 188, 0.32) !important;
}

.footer-social-new.is-disabled,
.footer-social-new[aria-disabled="true"] {
  color: rgba(232, 237, 242, 0.34) !important;
  background: rgba(232, 237, 242, 0.06) !important;
  border-color: rgba(232, 237, 242, 0.12) !important;
}

/* Use Berry for CTAs so Steel can remain a brand accent instead of dominating buttons. */
.btn-primary,
.hero .btn-primary,
.contact-home-form .btn-primary,
form .btn-primary,
button.btn-primary {
  background: var(--ta-maroon) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(137, 52, 105, 0.25) !important;
}

.btn-primary:hover,
.hero .btn-primary:hover,
.contact-home-form .btn-primary:hover,
form .btn-primary:hover,
button.btn-primary:hover {
  background: #A7437F !important;
  box-shadow: 0 12px 28px rgba(137, 52, 105, 0.34) !important;
}

/* Dark mode support for existing [data-theme] plumbing, with generic coverage. */
[data-theme="dark"] body {
  background: #101827;
  color: #E8EDF2;
}
[data-theme="dark"] .section,
[data-theme="dark"] .bg-cream {
  background: #101827;
}
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .programme-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .channel-card,
[data-theme="dark"] .legal-content,
[data-theme="dark"] .student-panel-card {
  background: #172235 !important;
  border-color: rgba(232, 237, 242, 0.14) !important;
  color: #E8EDF2;
}
[data-theme="dark"] .section-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .card-title,
[data-theme="dark"] .programme-card-title,
[data-theme="dark"] .faq-question,
[data-theme="dark"] .channel-title {
  color: #FFFFFF !important;
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] .section-desc,
[data-theme="dark"] p,
[data-theme="dark"] .card-desc,
[data-theme="dark"] .programme-card-desc,
[data-theme="dark"] .faq-answer,
[data-theme="dark"] .channel-value {
  color: rgba(232, 237, 242, 0.74) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #101827 !important;
  border-color: rgba(232, 237, 242, 0.22) !important;
  color: #E8EDF2 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(232, 237, 242, 0.46) !important;
}
[data-theme="dark"] .navbar {
  background: rgba(10, 16, 28, 0.9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background: #101827;
    color: #E8EDF2;
  }
}

/* Development palette picker: support the existing injected markup generically. */
body #ta-dev-palette {
  border: 1px solid rgba(232, 237, 242, 0.22) !important;
  border-radius: 18px !important;
  background: rgba(16, 24, 39, 0.94) !important;
  color: #E8EDF2 !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}
body #ta-dev-palette header,
body #ta-dev-palette .body {
  color: #E8EDF2 !important;
}
body #ta-dev-palette label,
body #ta-dev-palette .hex,
body #ta-dev-palette .hint {
  color: rgba(232, 237, 242, 0.76) !important;
}
body #ta-dev-palette select,
body #ta-dev-palette button {
  border-radius: 10px !important;
  border-color: rgba(232, 237, 242, 0.22) !important;
}
body #ta-dev-palette .sw {
  border-color: rgba(232, 237, 242, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
body #ta-dev-palette .sw.active {
  outline-color: #669BBC !important;
}

/* Final visual polish from review comments (2026-04-24) */
.navbar-logo .ta-lockup-logo-nav {
  width: clamp(144px, 13vw, 176px) !important;
  max-height: 38px !important;
  object-fit: contain !important;
  filter: brightness(1.04) saturate(1.05);
}
.navbar-logo {
  min-width: clamp(150px, 14vw, 184px);
}
.footer-logo-link .ta-lockup-logo-footer,
.footer-logo-link img.ta-lockup-logo-footer {
  /* (.footer-lockup-logo intentionally NOT clamped here — the v0.7.0 footer
     uses a much larger logo via the rule lower in this file. The legacy
     constraint was overflow-protection for the old footer layout.) */
  width: clamp(170px, 16vw, 220px) !important;
  max-height: 58px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}

.btn-step-cta {
  display: inline-flex !important;
  align-self: center !important;
  justify-content: center !important;
  margin: var(--space-4) auto 0 !important;
}
.step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-content .step-desc {
  margin-inline: auto;
}

.footer-ta-band {
  background:
    radial-gradient(circle at var(--x, 50%) var(--y, 100%), rgba(102, 155, 188, .22), transparent 34%),
    linear-gradient(120deg, #07111f 0%, #101827 44%, #07070C 100%) !important;
}
.footer-ta-stage {
  display: flex !important;
  min-height: clamp(150px, 25vw, 285px) !important;
  align-items: flex-end !important;
  overflow: hidden;
}
.footer-ta-text {
  font-size: clamp(108px, 20vw, 290px) !important;
  line-height: .72 !important;
  opacity: .82 !important;
  background: linear-gradient(105deg, rgba(232,237,242,.72) 0%, rgba(96,160,204,.5) 34%, rgba(137,52,105,.62) 62%, rgba(102, 155, 188,.72) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: radial-gradient(ellipse 620px 360px at var(--x, 50%) var(--y, 95%), #000 0%, rgba(0,0,0,.72) 35%, rgba(0,0,0,.22) 62%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 620px 360px at var(--x, 50%) var(--y, 95%), #000 0%, rgba(0,0,0,.72) 35%, rgba(0,0,0,.22) 62%, transparent 86%) !important;
  text-shadow: none !important;
}
.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: radial-gradient(ellipse 760px 390px at 50% 100%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 50%, transparent 78%) !important;
  mask-image: radial-gradient(ellipse 760px 390px at 50% 100%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 50%, transparent 78%) !important;
}

body #ta-dev-colour-fallback { display: none !important; }

/* Seamless footer blend + Lora brand ghost wordmark (2026-04-24) */
.footer-new {
  background:
    radial-gradient(circle at 14% 26%, rgba(102, 155, 188, 0.08), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(102, 155, 188, 0.10), transparent 32%),
    linear-gradient(180deg, #07070C 0%, #080914 46%, #07111f 100%) !important;
}
.footer-main {
  border-top: 0 !important;
  padding-bottom: clamp(22px, 3vw, 44px) !important;
  background: linear-gradient(180deg, rgba(7,7,12,0.98) 0%, rgba(7,10,20,0.94) 72%, rgba(7,17,31,0.98) 100%);
}
.footer-ta-band {
  margin-top: -1px;
  background:
    radial-gradient(circle at var(--x, 50%) var(--y, 100%), rgba(102, 155, 188, .24), transparent 35%),
    radial-gradient(ellipse at 74% 84%, rgba(102, 155, 188, .16), transparent 38%),
    linear-gradient(180deg, #07111f 0%, #08111f 38%, #07070C 100%) !important;
}
.footer-ta-band::after {
  display: none !important;
}
.footer-ta-band::before {
  opacity: .7;
  mix-blend-mode: screen;
}
.footer-ta-text {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: -0.075em !important;
  text-transform: uppercase;
  font-size: clamp(104px, 21vw, 310px) !important;
  line-height: .68 !important;
  background: linear-gradient(105deg, rgba(232,237,242,.70) 0%, rgba(188,215,235,.48) 28%, rgba(137,52,105,.58) 60%, rgba(102, 155, 188,.76) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Footer one-piece gradient refinement: content and ghost band share one canvas. */
.footer-new {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(102, 155, 188, 0.10), transparent 34%),
    radial-gradient(ellipse at 78% 88%, rgba(102, 155, 188, 0.14), transparent 38%),
    linear-gradient(180deg, #07070C 0%, #080914 42%, #07111f 70%, #07070C 100%) !important;
}
.footer-main {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
.footer-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(-42px, -4vw, -24px);
  height: clamp(72px, 9vw, 128px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 12, 0), rgba(7, 17, 31, 0.78) 58%, rgba(7, 17, 31, 0));
  z-index: -1;
}
.footer-ta-band {
  margin-top: clamp(-58px, -4vw, -34px) !important;
  padding-top: clamp(38px, 4vw, 72px) !important;
  background:
    radial-gradient(circle at var(--x, 50%) var(--y, 100%), rgba(102, 155, 188, .23), transparent 36%),
    radial-gradient(ellipse at 74% 84%, rgba(102, 155, 188, .18), transparent 40%) !important;
}
.footer-ta-band::after {
  display: block !important;
  top: 0;
  height: clamp(90px, 10vw, 150px);
  background: linear-gradient(180deg, rgba(7,17,31,0.92) 0%, rgba(7,17,31,0.54) 38%, rgba(7,17,31,0) 100%) !important;
  opacity: 1;
}
.footer-ta-stage {
  min-height: clamp(170px, 24vw, 310px) !important;
}
.footer-ta-text {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: -0.09em !important;
  opacity: .74 !important;
}

/* Footer brand alignment + editorial heading motion (2026-04-24) */
.footer-brand-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand-new .footer-logo-link {
  justify-content: center;
  margin-inline: auto;
}
.footer-brand-new .footer-logo-tagline {
  width: 100%;
  justify-content: center;
}
.footer-brand-new .footer-desc-new {
  margin-inline: auto;
}
.footer-brand-new .footer-socials-new {
  justify-content: center;
}
.footer-logo-link .ta-lockup-logo-footer,
.footer-logo-link img.ta-lockup-logo-footer,
.footer-logo-link .footer-lockup-logo,
.footer-logo-link img.footer-lockup-logo {
  object-position: center center !important;
}

h1,
h2,
.section-title,
.page-header h1 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.045em;
}
.hero h1 {
  position: relative;
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic;
  font-weight: 500 !important;   /* ~30% thinner (was 700) — Faruk */
  letter-spacing: -0.055em;
  line-height: .98;
  max-width: 15ch;
  color: #fff;
  text-shadow: 0 18px 54px rgba(0, 0, 0, .32);
}
.hero h1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 12%;
  bottom: -.18em;
  height: 2px;
  background: linear-gradient(90deg, rgba(232,237,242,.78), rgba(102, 155, 188,.88), transparent);
  transform-origin: left center;
  animation: heroHeadingRule 1050ms cubic-bezier(.16,1,.3,1) 620ms both;
}
.hero h1 .ta-bridge-word {
  display: inline-block;
  will-change: transform, filter, opacity;
  animation: heroWordSettle 900ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(120ms + (var(--word-index, 0) * 58ms));
}
@keyframes heroWordSettle {
  0% { opacity: 0; transform: translate3d(0, 24px, 0) rotate(-1.4deg); filter: blur(8px); }
  62% { opacity: 1; transform: translate3d(0, -2px, 0) rotate(.2deg); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); filter: blur(0); }
}
@keyframes heroHeadingRule {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero h1 .ta-bridge-word,
  .hero h1::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Footer seamless canvas refinement: softer lowercase Lora ghost mark. */
.footer-new {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(102, 155, 188, 0.075), transparent 34%),
    radial-gradient(ellipse at 82% 92%, rgba(102, 155, 188, 0.13), transparent 42%),
    linear-gradient(180deg, #07070C 0%, #080914 48%, #07101D 78%, #07070C 100%) !important;
}
.footer-main {
  padding-bottom: clamp(8px, 1.6vw, 22px) !important;
}
.footer-main::after {
  bottom: clamp(-74px, -6vw, -46px) !important;
  height: clamp(120px, 14vw, 210px) !important;
  background: linear-gradient(180deg, rgba(7, 7, 12, 0), rgba(7, 12, 23, 0.72) 44%, rgba(7, 16, 29, 0.22) 100%) !important;
}
.footer-ta-band {
  margin-top: clamp(-86px, -6vw, -56px) !important;
  padding-top: clamp(76px, 8vw, 128px) !important;
  background:
    radial-gradient(ellipse at var(--x, 50%) var(--y, 92%), rgba(102, 155, 188, .13), transparent 34%),
    radial-gradient(ellipse at 76% 88%, rgba(102, 155, 188, .11), transparent 44%),
    linear-gradient(180deg, rgba(7, 16, 29, 0) 0%, rgba(7, 16, 29, .20) 44%, rgba(7, 7, 12, .86) 100%) !important;
}
.footer-ta-band::after {
  height: clamp(150px, 16vw, 250px) !important;
  background: linear-gradient(180deg, rgba(7, 10, 20, .86) 0%, rgba(7, 16, 29, .30) 54%, rgba(7, 16, 29, 0) 100%) !important;
}
.footer-ta-stage {
  min-height: clamp(150px, 21vw, 270px) !important;
}
.footer-ta-text {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
  letter-spacing: -0.105em !important;
  font-size: clamp(112px, 18.5vw, 270px) !important;
  line-height: .62 !important;
  opacity: .48 !important;
  background: linear-gradient(105deg, rgba(232,237,242,.50) 0%, rgba(102,155,188,.34) 30%, rgba(137,52,105,.42) 62%, rgba(102, 155, 188,.56) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: radial-gradient(ellipse 760px 400px at var(--x, 50%) var(--y, 96%), #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.18) 66%, transparent 88%) !important;
  mask-image: radial-gradient(ellipse 760px 400px at var(--x, 50%) var(--y, 96%), #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.18) 66%, transparent 88%) !important;
}
.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: radial-gradient(ellipse 900px 430px at 50% 100%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.20) 52%, transparent 80%) !important;
  mask-image: radial-gradient(ellipse 900px 430px at 50% 100%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.20) 52%, transparent 80%) !important;
}

/* Footer final continuity pass: remove slab boundary and treat wordmark as background atmosphere. */
.footer-new {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(102, 155, 188, 0.10), transparent 34%),
    radial-gradient(ellipse at 84% 70%, rgba(102, 155, 188, 0.12), transparent 44%),
    linear-gradient(180deg, #08111f 0%, #091426 28%, #07101d 58%, #07070c 100%) !important;
}
.footer-main {
  position: relative;
  z-index: 2;
  padding-top: clamp(42px, 5vw, 72px) !important;
  padding-bottom: clamp(34px, 4.5vw, 74px) !important;
  background: transparent !important;
}
.footer-main::after,
.footer-ta-band::after {
  display: none !important;
}
.footer-ta-band {
  position: relative;
  z-index: 1;
  margin-top: clamp(-120px, -8vw, -76px) !important;
  padding-top: clamp(92px, 8vw, 138px) !important;
  background: transparent !important;
  pointer-events: none;
}
.footer-ta-stage {
  min-height: clamp(98px, 15vw, 205px) !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: visible !important;
}
.footer-ta-text {
  transform: translateY(13%) !important;
  opacity: .30 !important;
  font-size: clamp(118px, 17.5vw, 250px) !important;
  line-height: .56 !important;
  background: linear-gradient(105deg, rgba(232,237,242,.38) 0%, rgba(96,160,204,.26) 33%, rgba(137,52,105,.32) 62%, rgba(102, 155, 188,.46) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: radial-gradient(ellipse 980px 420px at var(--x, 50%) var(--y, 100%), rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 56%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 980px 420px at var(--x, 50%) var(--y, 100%), rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 56%, transparent 86%) !important;
}
.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: radial-gradient(ellipse 980px 420px at 50% 100%, rgba(0,0,0,.48) 0%, rgba(0,0,0,.24) 58%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 980px 420px at 50% 100%, rgba(0,0,0,.48) 0%, rgba(0,0,0,.24) 58%, transparent 86%) !important;
}
.footer-bottom-new {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(232, 237, 242, 0.06) !important;
  background: linear-gradient(180deg, rgba(7, 7, 12, 0.08), rgba(7, 7, 12, 0.42)) !important;
}

/* Final polish batch: nav, headers, hero bridge, process CTA, dark mode, footer contrast. */
:root {
  --ta-ink: #1C1C2E;
  --ta-mist: #E8EDF2;
  --ta-violet:     #669BBC;
  --ta-berry: #893469;
  --ta-navy: #102A44;
}

.navbar {
  background:
    linear-gradient(90deg, rgba(28, 28, 46, .96), rgba(28, 28, 46, .90)) !important;
  border-bottom: 1px solid rgba(232, 237, 242, .14) !important;
  box-shadow: 0 10px 34px rgba(7, 7, 12, .16) !important;
}
.navbar.scrolled {
  background:
    linear-gradient(90deg, rgba(28, 28, 46, .985), rgba(28, 28, 46, .94)) !important;
}
.navbar-logo .ta-lockup-logo-nav {
  filter: brightness(0) invert(1) sepia(18%) saturate(470%) hue-rotate(327deg) brightness(1.06) contrast(.98) !important;
  opacity: .96 !important;
}
.nav-links .nav-link,
.nav-actions .btn,
.lang-dropdown-toggle,
.theme-toggle {
  color: rgba(255, 255, 255, .86) !important;
}
.nav-links .nav-link:hover,
.nav-links .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
}
.nav-links .nav-link::after {
  background: #fff !important;
  height: 2px !important;
}

.page-header {
  width: 100%;
  min-height: clamp(260px, 28vw, 390px);
  padding-top: calc(var(--nav-height) + clamp(58px, 7vw, 96px)) !important;
  padding-bottom: clamp(58px, 7vw, 96px) !important;
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .90) 0%, rgba(16, 42, 68, .76) 42%, rgba(102, 155, 188, .54) 70%, rgba(137, 52, 105, .56) 100%),
    url('../img/photos/hero_student_q18.jpg') !important;
  background-size: cover !important;
  background-position: center 42% !important;
  color: #fff !important;
  isolation: isolate;
}
.page-header::before {
  display: none !important;
}
.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 24%, rgba(232,237,242,.14), transparent 22%),
    linear-gradient(180deg, rgba(28,28,46,.14), rgba(28,28,46,.40));
  z-index: -1;
}
.page-header > .container,
.page-header .container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}
.page-header h1,
.page-header .section-title {
  color: #fff !important;
  text-shadow: 0 16px 44px rgba(0,0,0,.34);
}
.page-header p,
.page-header .section-desc {
  color: rgba(255,255,255,.86) !important;
}

.hero h1 {
  animation: heroTitleClean 850ms cubic-bezier(.16,1,.3,1) 180ms both !important;
}
.hero h1::after,
.hero h1 .ta-bridge-word::after {
  display: none !important;
}
.hero h1 .ta-bridge-word {
  animation: none !important;
}
.language-bridge-line {
  background: linear-gradient(90deg, rgba(255,255,255,.84), rgba(255,255,255,.98), rgba(255,255,255,.55)) !important;
  box-shadow: 0 0 20px rgba(255,255,255,.20) !important;
}
.language-bridge-dot {
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 0 20px rgba(255,255,255,.52) !important;
}
@keyframes heroTitleClean {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.steps-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: clamp(36px, 4vw, 58px);
  text-align: center;
}
.btn-step-cta-global {
  min-width: 176px;
  justify-content: center;
}
@media (max-width: 767px) {
  .steps-action-row {
    flex-direction: column;
    margin-top: var(--space-7);
  }
  .steps-action-row .btn {
    width: min(100%, 320px);
  }
}

.contact-info-panel .contact-info-item:first-child .contact-info-label {
  color: var(--ta-ink) !important;
}
[data-theme="dark"] .contact-info-panel .contact-info-item:first-child .contact-info-label {
  color: rgba(232,237,242,.72) !important;
}

[data-theme="dark"] body {
  background: #101928 !important;
  color: rgba(232,237,242,.92) !important;
}
[data-theme="dark"] .section,
[data-theme="dark"] .section-slim,
[data-theme="dark"] #counters,
[data-theme="dark"] #promise,
[data-theme="dark"] #programmes,
[data-theme="dark"] #contact,
[data-theme="dark"] #newsletter,
[data-theme="dark"] .bg-cream,
[data-theme="dark"] .bg-white {
  background: #111C2D !important;
  color: rgba(232,237,242,.92) !important;
}
[data-theme="dark"] .counter-item,
[data-theme="dark"] .promise-card,
[data-theme="dark"] .contact-home-form,
[data-theme="dark"] .channel-card,
[data-theme="dark"] .card,
[data-theme="dark"] .programme-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .faq-item {
  background: #17243A !important;
  border-color: rgba(232,237,242,.16) !important;
  color: rgba(232,237,242,.92) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.22) !important;
}
[data-theme="dark"] .section-title,
[data-theme="dark"] .counter-heading,
[data-theme="dark"] .counter-title,
[data-theme="dark"] .promise-card h3,
[data-theme="dark"] .programme-card-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .channel-title,
[data-theme="dark"] .contact-home-form .field-label,
[data-theme="dark"] .faq-question {
  color: #fff !important;
}
[data-theme="dark"] .section-desc,
[data-theme="dark"] .counter-sub,
[data-theme="dark"] .counter-text,
[data-theme="dark"] .promise-card p,
[data-theme="dark"] .programme-card-desc,
[data-theme="dark"] .card-desc,
[data-theme="dark"] .channel-value,
[data-theme="dark"] .contact-home-form p,
[data-theme="dark"] .faq-answer,
[data-theme="dark"] p {
  color: rgba(232,237,242,.76) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .contact-home-form .input,
[data-theme="dark"] .contact-home-form .textarea {
  background: #102139 !important;
  color: #fff !important;
  border-color: rgba(232,237,242,.22) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(232,237,242,.56) !important;
}
[data-theme="dark"] .promise-carousel::before,
[data-theme="dark"] .promise-carousel::after {
  background: linear-gradient(90deg, #111C2D, rgba(17,28,45,0)) !important;
}
[data-theme="dark"] .promise-carousel::after {
  background: linear-gradient(270deg, #111C2D, rgba(17,28,45,0)) !important;
}

.footer-new {
  background:
    radial-gradient(ellipse at 20% 14%, rgba(102, 155, 188, .16), transparent 36%),
    radial-gradient(ellipse at 84% 82%, rgba(102, 155, 188, .18), transparent 46%),
    linear-gradient(180deg, #0B1728 0%, #102A44 34%, #0B1728 68%, #07070C 100%) !important;
  color: rgba(232,237,242,.92) !important;
}
.footer-main,
.footer-ta-band,
.footer-bottom-new {
  background: transparent !important;
}
.footer-main {
  padding-bottom: clamp(36px, 5vw, 72px) !important;
}
.footer-ta-band {
  margin-top: clamp(-84px, -6vw, -54px) !important;
  padding-top: clamp(74px, 7vw, 120px) !important;
}
.footer-ta-stage {
  min-height: clamp(130px, 19vw, 245px) !important;
}
.footer-ta-text {
  color: transparent !important;
  opacity: .60 !important;
  background: linear-gradient(103deg, rgba(232,237,242,.76), rgba(112,174,216,.50) 36%, rgba(137,52,105,.52) 64%, rgba(102, 155, 188,.76)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: radial-gradient(ellipse 1080px 450px at var(--x, 50%) var(--y, 96%), rgba(0,0,0,.84) 0%, rgba(0,0,0,.54) 56%, transparent 88%) !important;
  mask-image: radial-gradient(ellipse 1080px 450px at var(--x, 50%) var(--y, 96%), rgba(0,0,0,.84) 0%, rgba(0,0,0,.54) 56%, transparent 88%) !important;
}
.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: radial-gradient(ellipse 1080px 450px at 50% 96%, rgba(0,0,0,.70) 0%, rgba(0,0,0,.48) 60%, transparent 90%) !important;
  mask-image: radial-gradient(ellipse 1080px 450px at 50% 96%, rgba(0,0,0,.70) 0%, rgba(0,0,0,.48) 60%, transparent 90%) !important;
}
.footer-logo-tagline,
.footer-desc-new,
.footer-link-new,
.footer-bottom-new,
.footer-tagline-new,
.footer-powered-by,
.footer-bottom-new p {
  color: rgba(232,237,242,.76) !important;
}
.footer-heading-new,
.footer-col-title-new {
  color: rgba(255,255,255,.88) !important;
}
.footer-logo-tagline {
  color: rgba(255,255,255,.84) !important;
}
.footer-logo-link .footer-lockup-logo,
.footer-logo-link .ta-lockup-logo-footer {
  opacity: .96 !important;
  filter: none !important;
}

/* Hero animation safety pass: never blank the headline while the bridge animates. */
.hero h1 {
  opacity: 1 !important;
  animation: heroTitleLift 680ms cubic-bezier(.16,1,.3,1) 120ms both !important;
}
@keyframes heroTitleLift {
  0% { opacity: .92; transform: translateY(10px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero h1 .ta-bridge-word {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Hero robustness: keep all content visible even if entrance observers are delayed. */
.hero-badge,
.hero-subtitle,
.hero-ctas,
.hero-stats,
.hero-stat {
  opacity: 1 !important;
  transform: none !important;
}
.hero-badge,
.hero-subtitle,
.hero-ctas,
.hero-stats {
  animation: heroTitleLift 620ms cubic-bezier(.16,1,.3,1) both !important;
}
.hero-badge { animation-delay: 80ms !important; }
.hero-subtitle { animation-delay: 180ms !important; }
.hero-ctas { animation-delay: 260ms !important; }
.hero-stats { animation-delay: 340ms !important; }

/* Systematic annotation cleanup (2026-04-24): visual consistency + pricing cards. */
.hero h1 {
  font-family: var(--font-latin, 'Poppins', system-ui, sans-serif) !important;
  font-style: normal !important;
  font-weight: 560 !important;   /* ~30% thinner (was 800) — Faruk */
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  max-width: 16ch !important;
  text-shadow: 0 18px 54px rgba(0, 0, 0, .34) !important;
}

.hero h1::after,
.hero h1 .ta-bridge-word::after {
  display: none !important;
}

#promise .section-header,
#how-it-works .section-header,
#courses .section-header,
.pricing-plan-header {
  text-align: center !important;
}

#promise .section-header .section-desc,
#how-it-works .section-header .section-desc,
#courses .section-header .section-desc,
.pricing-plan-header .section-desc {
  margin-inline: auto !important;
}

#promise .section-label::before,
#how-it-works .section-label::before,
#courses .section-label::before,
.pricing-plan-header .section-label::before {
  display: none !important;
}

.steps-action-row {
  margin-top: clamp(28px, 3vw, 44px) !important;
}

.btn-step-cta-global {
  border-color: rgba(28, 28, 46, .22) !important;
  background: rgba(255, 255, 255, .72) !important;
  color: var(--color-text) !important;
}

.coming-soon-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 249, 251, .98)) !important;
  border-color: rgba(28, 28, 46, .12) !important;
  box-shadow: var(--shadow-sm) !important;
}

.coming-soon-card .programme-card-status {
  background: rgba(28, 28, 46, .08) !important;
  color: var(--color-text) !important;
}

.coming-soon-card .programme-card-cta {
  color: var(--color-primary) !important;
}

.pricing-plan-shell {
  padding-top: clamp(28px, 4vw, 48px) !important;
}

.pricing-plan-header {
  margin-bottom: clamp(24px, 3vw, 38px) !important;
}

.pricing-vat-note {
  display: block !important;
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 48ch;
}

.pricing-course-grid {
  max-width: 980px;
  margin-inline: auto;
}

.pricing-course-grid .course-card-header {
  background: var(--color-primary) !important;
  padding-bottom: var(--space-5) !important;
}

.course-card-level {
  display: none !important;
}

.price-card.featured {
  background: var(--color-white) !important;
  color: var(--color-text) !important;
  transform: none !important;
  border: 1px solid rgba(102, 155, 188, .38) !important;
  box-shadow: 0 14px 34px rgba(28, 28, 46, .10) !important;
}

.price-card.featured:hover {
  transform: translateY(-4px) !important;
}

.price-card.featured .tag {
  background: rgba(102, 155, 188, .08) !important;
  color: var(--ta-red) !important;
}

.price-card.featured .hours,
.price-card.featured .price-big {
  color: var(--color-text) !important;
}

.price-card.featured .meta,
.price-card.featured .price-sub,
.price-card.featured .price-big .price-unit {
  color: var(--color-text-muted) !important;
}

.price-card.featured .price-hour {
  color: var(--ta-navy) !important;
  background: rgba(28, 28, 46, .06) !important;
}

.price-card.featured .btn.btn-primary {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}

.price-card.featured .btn.btn-primary:hover {
  background: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

.price-card.featured::before {
  background: var(--ta-steel) !important;
  color: var(--color-white) !important;
}

@media (max-width: 767px) {
  .price-card.featured {
    order: 0 !important;
  }

  #courses .filter-bar {
    box-sizing: border-box;
    width: min(100%, calc(100vw - 24px));
    justify-content: flex-start !important;
    overflow-x: auto;
    padding: 0 var(--space-2) var(--space-2);
    scroll-padding-inline: var(--space-2);
  }

  #courses .filter-btn {
    flex: 0 0 auto;
  }
}

/* Footer compactness fix (2026-04-24): remove the oversized empty gulf before the legal bar. */
.footer-new {
  min-height: auto !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(102, 155, 188, .14), transparent 34%),
    radial-gradient(ellipse at 86% 86%, rgba(102, 155, 188, .16), transparent 44%),
    linear-gradient(180deg, #111b30 0%, #0b1527 48%, #07070c 100%) !important;
}

.footer-main {
  padding-top: clamp(38px, 4.5vw, 62px) !important;
  padding-bottom: clamp(22px, 2.6vw, 36px) !important;
}

.footer-ta-band {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
}

.footer-ta-stage {
  display: flex !important;
  min-height: clamp(58px, 8vw, 118px) !important;
  padding: 0 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.footer-ta-text {
  transform: translateY(24%) !important;
  opacity: .22 !important;
  font-size: clamp(78px, 13vw, 176px) !important;
  line-height: .62 !important;
  letter-spacing: -0.035em !important;
  background: linear-gradient(105deg, rgba(232,237,242,.36) 0%, rgba(112,174,216,.24) 36%, rgba(137,52,105,.30) 64%, rgba(102, 155, 188,.42) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: radial-gradient(ellipse 900px 280px at 50% 100%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 58%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 900px 280px at 50% 100%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 58%, transparent 86%) !important;
}

.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: radial-gradient(ellipse 900px 280px at 50% 100%, rgba(0,0,0,.54) 0%, rgba(0,0,0,.28) 58%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 900px 280px at 50% 100%, rgba(0,0,0,.54) 0%, rgba(0,0,0,.28) 58%, transparent 86%) !important;
}

.footer-bottom-new {
  margin-top: 0 !important;
  padding: clamp(14px, 1.7vw, 22px) 0 !important;
  border-top: 1px solid rgba(232, 237, 242, .08) !important;
  background: rgba(7, 7, 12, .32) !important;
}

.footer-bottom-new .container {
  min-height: auto !important;
  row-gap: 8px !important;
}

@media (max-width: 767px) {
  .footer-main {
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }

  .footer-ta-stage {
    min-height: 58px !important;
  }

  .footer-ta-text {
    font-size: clamp(64px, 20vw, 108px) !important;
    transform: translateY(20%) !important;
  }
}

/* Footer editorial reset (2026-04-24): compact grid, legal strip, then a deliberate TALK ARABIC wordmark stage. */
.footer-new {
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 78% 82%, rgba(102, 155, 188, .10), transparent 52%),
    radial-gradient(ellipse at 16% 16%, rgba(102, 155, 188, .07), transparent 44%),
    linear-gradient(180deg, #10192b 0%, #0b1323 46%, #090d18 74%, #07070c 100%) !important;
}

.footer-main {
  order: 1 !important;
  padding: clamp(40px, 4.8vw, 68px) 0 clamp(34px, 4vw, 56px) !important;
  border-top: 1px solid rgba(232, 237, 242, .06) !important;
  background: transparent !important;
}

.footer-grid-new {
  align-items: start !important;
  gap: clamp(28px, 4vw, 72px) !important;
}

.footer-brand-new {
  max-width: 330px;
}

.footer-desc-new {
  max-width: 32ch !important;
  margin-bottom: var(--space-4) !important;
}

.footer-links-new {
  gap: 10px !important;
}

.footer-bottom-new {
  order: 2 !important;
  margin: 0 !important;
  padding: clamp(16px, 1.8vw, 24px) 0 !important;
  border-top: 1px solid rgba(232, 237, 242, .07) !important;
  border-bottom: 1px solid rgba(232, 237, 242, .05) !important;
  background: rgba(7, 7, 12, .28) !important;
}

.footer-bottom-new .container {
  display: grid !important;
  grid-template-columns: minmax(170px, .8fr) minmax(280px, 1.6fr) minmax(190px, .8fr) !important;
  align-items: center !important;
  gap: clamp(16px, 3vw, 42px) !important;
}

.footer-bottom-new p,
.footer-powered-by,
.footer-powered-by a {
  font-size: clamp(12px, .78vw, 14px) !important;
  line-height: 1.45 !important;
}

.footer-tagline-new {
  text-align: center !important;
  font-family: var(--font-latin, 'Poppins', system-ui, sans-serif) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: rgba(232, 237, 242, .52) !important;
}

.footer-powered-by {
  text-align: right !important;
}

.footer-ta-band {
  order: 3 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 54% 100%, rgba(102, 155, 188, .10), transparent 58%),
    linear-gradient(180deg, rgba(7, 7, 12, .10), rgba(7, 7, 12, .78)) !important;
}

.footer-ta-band::before {
  opacity: .28 !important;
}

.footer-ta-band::after {
  display: none !important;
}

.footer-ta-stage {
  display: flex !important;
  min-height: clamp(150px, 16vw, 278px) !important;
  padding: 0 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.footer-ta-text {
  width: 100% !important;
  transform: translateY(16%) !important;
  text-transform: uppercase !important;
  font-family: var(--font-serif, 'Lora', Georgia, serif) !important;
  font-size: clamp(132px, 18.5vw, 342px) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: .015em !important;
  line-height: .72 !important;
  text-align: center !important;
  opacity: 1 !important;
  color: rgba(232, 237, 242, .10) !important;
  background: linear-gradient(105deg, rgba(232, 237, 242, .14), rgba(253, 240, 213, .11) 52%, rgba(102, 155, 188, .12)) !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.16) 100%) !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.16) 100%) !important;
}

.footer-ta-band:not(:hover) .footer-ta-text {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.16) 100%) !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.16) 100%) !important;
}

@media (max-width: 900px) {
  .footer-bottom-new .container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .footer-powered-by {
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  .footer-main {
    padding: 38px 0 30px !important;
  }

  .footer-grid-new {
    gap: 28px !important;
  }

  .footer-ta-stage {
    min-height: clamp(94px, 30vw, 150px) !important;
  }

  .footer-ta-text {
    transform: translateY(12%) !important;
    font-size: clamp(66px, 20vw, 120px) !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }
}

/* Footer wordmark stage: scroll-linked reveal and depth. */
.footer-ta-band {
  --footer-rise: 46px;
  --footer-depth: 0px;
  --footer-opacity: .04;
  --footer-bg-shift: 0px;
  background:
    radial-gradient(ellipse at 22% calc(20% + var(--footer-bg-shift)), rgba(102, 155, 188, .12), transparent 44%),
    radial-gradient(ellipse at 78% calc(96% + var(--footer-bg-shift)), rgba(102, 155, 188, .16), transparent 52%),
    linear-gradient(180deg, rgba(8, 10, 18, .10) 0%, rgba(8, 10, 18, .86) 100%) !important;
}

.footer-ta-stage {
  display: flex !important;
  position: relative !important;
  isolation: isolate !important;
  min-height: clamp(168px, 24vw, 330px) !important;
  padding: 0 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.footer-ta-stage::before,
.footer-ta-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}

.footer-ta-stage::before {
  z-index: 2;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253, 240, 213, .18), transparent);
}

.footer-ta-stage::after {
  z-index: 2;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 18, .54));
}

.footer-ta-text {
  position: absolute !important;
  z-index: 1 !important;
  left: 50% !important;
  bottom: 0 !important;
  width: max-content !important;
  min-width: 100% !important;
  transform: translate3d(-50%, calc(7% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) !important;
  font-family: var(--font-latin, 'Poppins', system-ui, sans-serif) !important;
  font-size: clamp(116px, 19vw, 360px) !important;
  font-weight: 900 !important;
  line-height: .7 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  opacity: var(--footer-opacity, .06) !important;
  color: rgba(232, 237, 242, .82) !important;
  background: linear-gradient(92deg, rgba(232, 237, 242, .88), rgba(253, 240, 213, .96), rgba(102, 155, 188, .78)) !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.46) 68%, rgba(0,0,0,.12) 100%) !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.46) 68%, rgba(0,0,0,.12) 100%) !important;
  will-change: transform;
  transition: opacity 180ms ease-out;
  user-select: none !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .footer-ta-band {
    --footer-rise: 0px;
    --footer-depth: 0px;
    --footer-opacity: .15;
    --footer-bg-shift: 0px;
  }

  .footer-ta-text {
    transform: translate3d(-50%, 18%, 0) !important;
  }
}

.footer-ta-band.is-reduced-motion {
  --footer-rise: 0px;
  --footer-depth: 0px;
  --footer-opacity: .15;
  --footer-bg-shift: 0px;
}

@media (max-width: 767px) {
  .footer-ta-stage {
    min-height: clamp(128px, 34vw, 190px) !important;
  }

  .footer-ta-text {
    font-size: clamp(72px, 25vw, 138px) !important;
    transform: translate3d(-50%, calc(-6% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) !important;
  }
}

/* Footer composition pass: links, bridge line, wordmark, then legal. */
.footer-main {
  order: 1 !important;
  padding-bottom: clamp(12px, 1.6vw, 24px) !important;
}

.footer-bridge-line {
  display: none !important;
}

.footer-ta-band {
  order: 2 !important;
  margin-top: clamp(-12px, -1vw, -4px) !important;
  background:
    linear-gradient(180deg, rgba(11, 19, 35, 0) 0%, rgba(9, 13, 24, .42) 36%, rgba(7, 7, 12, .74) 100%),
    radial-gradient(ellipse at 72% calc(92% + var(--footer-bg-shift)), rgba(102, 155, 188, .12), transparent 58%),
    radial-gradient(ellipse at 22% calc(18% + var(--footer-bg-shift)), rgba(102, 155, 188, .06), transparent 48%) !important;
}

.footer-ta-stage {
  min-height: clamp(136px, 15vw, 212px) !important;
}

.footer-ta-stage::before {
  display: none !important;
}

.footer-ta-text {
  font-size: clamp(92px, 11.2vw, 208px) !important;
  line-height: .76 !important;
  transform: translate3d(-50%, calc(2% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.54) 72%, rgba(0,0,0,.20) 100%) !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.54) 72%, rgba(0,0,0,.20) 100%) !important;
}

.footer-bottom-new {
  order: 3 !important;
  margin-top: -1px !important;
  border-top: 1px solid rgba(232, 237, 242, .055) !important;
  border-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(7, 7, 12, .78), rgba(5, 6, 10, .82)) !important;
}

@media (max-width: 900px) {
}

@media (max-width: 767px) {
  .footer-ta-stage {
    min-height: clamp(96px, 25vw, 140px) !important;
  }

  .footer-ta-text {
    font-size: clamp(68px, 19vw, 104px) !important;
    transform: translate3d(-50%, calc(0% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) !important;
  }
}

/* Footer responsive alignment: keep columns centered at every narrow width. */
@media (max-width: 900px) {
  .footer-main > .container {
    width: min(100% - 32px, 680px) !important;
  }

  .footer-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    column-gap: clamp(22px, 8vw, 64px) !important;
    row-gap: 32px !important;
  }

  .footer-brand-new {
    grid-column: 1 / -1 !important;
    max-width: min(100%, 390px) !important;
    justify-self: center !important;
  }

  .footer-col-new {
    width: min(100%, 230px) !important;
    justify-self: center !important;
    text-align: left !important;
  }

  .footer-links-new {
    align-items: flex-start !important;
  }
}

@media (max-width: 640px) {
  .footer-main > .container {
    width: min(100% - 40px, 420px) !important;
  }

  .footer-grid-new {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    row-gap: 30px !important;
  }

  .footer-col-new {
    width: min(100%, 320px) !important;
    text-align: center !important;
  }

  .footer-links-new {
    align-items: center !important;
  }

  .footer-link-new {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-link-new .footer-link-inline-icon,
  .footer-link-icon-new,
  .footer-link-with-icon::before,
  .footer-col-new .footer-link-new::before {
    display: none !important;
  }
}

/* Smooth document-to-document navigation. */
body.page-transitions-ready {
  transition:
    opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-exiting {
  cursor: progress;
  opacity: .9;
  transform: translate3d(0, -4px, 0);
}

@media (prefers-reduced-motion: reduce) {
  body.page-transitions-ready,
  body.page-exiting {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Launch polish: pricing neutrality, page-specific headers, footer blend */
.price-card .tag,
.price-card.featured .tag {
  background: rgba(28, 28, 46, 0.055) !important;
  color: var(--color-text) !important;
}
.pricing-level-feedback {
  color: var(--color-text-muted) !important;
  font-weight: 600 !important;
}
.price-card .price-big,
.price-card .price-big span,
.price-card .price-big .price-unit,
.price-card.featured .price-big,
.price-card.featured .price-big span,
.price-card.featured .price-big .price-unit {
  color: var(--color-text) !important;
}
.price-card .price-sub,
.price-card.featured .price-sub,
.price-card .meta,
.price-card.featured .meta {
  color: var(--color-text-muted) !important;
}
.price-card .price-hour,
.price-card.featured .price-hour {
  background: rgba(28, 28, 46, 0.055) !important;
  color: var(--color-text) !important;
}
.price-card.featured .btn.btn-primary,
.price-card.featured .btn.btn-primary:hover {
  background: var(--ta-maroon) !important;
  border-color: var(--ta-maroon) !important;
  color: #fff !important;
}
.price-card.featured::before {
  background: var(--ta-indigo, #669BBC) !important;
  color: #fff !important;
}
.course-pricing-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 var(--space-4);
  color: var(--ta-maroon);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.course-pricing-link:hover,
.course-pricing-link:focus-visible {
  color: var(--color-text);
}

/* Page header imagery chosen from the existing inventory */
html[data-i18n-title="meta.about.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .90) 0%, rgba(16, 42, 68, .70) 48%, rgba(137, 52, 105, .46) 100%),
    url('../img/photos/about_founder.webp') !important;
  background-position: center 34% !important;
}
html[data-i18n-title="meta.pricing.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .90) 0%, rgba(16, 42, 68, .72) 48%, rgba(102, 155, 188, .45) 100%),
    url('../img/photos/course_conversational.webp') !important;
  background-position: center 54% !important;
}
html[data-i18n-title="meta.howItWorks.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .88) 0%, rgba(16, 42, 68, .72) 48%, rgba(137, 52, 105, .42) 100%),
    url('../img/photos/course_conversational.webp') !important;
  background-position: center 48% !important;
}
html[data-i18n-title="meta.dialects.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .88) 0%, rgba(16, 42, 68, .70) 46%, rgba(137, 52, 105, .40) 100%),
    url('../img/photos/course_dialects.webp') !important;
  background-position: center center !important;
}
html[data-i18n-title="meta.contact.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .90) 0%, rgba(16, 42, 68, .72) 48%, rgba(137, 52, 105, .45) 100%),
    url('../img/social/ig_square_hello.webp') !important;
  background-position: center 46% !important;
}
html[data-i18n-title="meta.blog.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .90) 0%, rgba(16, 42, 68, .76) 44%, rgba(102, 155, 188, .42) 100%),
    url('../img/social/og_home.webp') !important;
  background-position: center center !important;
}
html[data-i18n-title="meta.teachers.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .90) 0%, rgba(16, 42, 68, .72) 48%, rgba(137, 52, 105, .44) 100%),
    url('../img/photos/course_private.webp') !important;
  background-position: center 52% !important;
}
html[data-i18n-title="meta.levelTest.title"] .page-header,
body:has(#level-test-app) .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .90) 0%, rgba(16, 42, 68, .72) 48%, rgba(102, 155, 188, .42) 100%),
    url('../img/photos/howitworks_step1.webp') !important;
  background-position: center 44% !important;
}
html[data-i18n-title="meta.privacy.title"] .page-header,
html[data-i18n-title="meta.terms.title"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .92) 0%, rgba(16, 42, 68, .76) 48%, rgba(102, 155, 188, .38) 100%),
    url('../img/photos/course_msa.webp') !important;
  background-position: center center !important;
}

/* Programme detail heroes use the existing programme-specific photo inventory */
.programme-hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  isolation: isolate;
}
.programme-hero .hero-bg {
  background:
    radial-gradient(circle at 50% 18%, rgba(232, 237, 242, 0.12), transparent 28%),
    linear-gradient(115deg, rgba(28, 28, 46, 0.9) 0%, rgba(28, 28, 46, 0.74) 45%, rgba(28, 28, 46, 0.62) 100%) !important;
}
.programme-hero-speaking {
  background-image: url('../img/photos/course_conversational.webp');
  background-position: center 48%;
}
.programme-hero-dialects {
  background-image: url('../img/photos/course_dialects.webp');
  background-position: center center;
}
.programme-hero-private {
  background-image: url('../img/photos/course_private.webp');
  background-position: center 52%;
}
.programme-hero-corporate {
  background-image: url('../img/photos/course_corporate.webp');
  background-position: center 46%;
}
.programme-hero-classical {
  background-image: url('../img/photos/course_quranic.webp');
  background-position: center 50%;
}

.programme-hero h1 {
  max-width: 11ch;
  margin-inline: auto;
  font-size: clamp(3.25rem, 7vw, 5.6rem);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.programme-hero .hero-subtitle {
  max-width: 56ch;
  margin-inline: auto;
}

@media (max-width: 760px) {
  .programme-hero h1 {
    max-width: 10ch;
    font-size: clamp(2.8rem, 12vw, 4.75rem);
    line-height: 1.1;
  }
}

/* Release override: use varied calligraphy/editorial artwork on non-home page headers. */
html[data-i18n-title^="meta."] .page-header {
  --ta-page-header-image: url('../img/social/og_home.webp');
  --ta-page-header-position: center center;
  background-image:
    linear-gradient(115deg, rgba(28, 28, 46, .88) 0%, rgba(28, 28, 46, .72) 42%, rgba(102, 155, 188, .36) 70%, rgba(137, 52, 105, .42) 100%),
    var(--ta-page-header-image) !important;
  background-position: var(--ta-page-header-position) !important;
}

html[data-theme="dark"][data-i18n-title^="meta."] .page-header,
[data-theme="dark"] .page-header {
  background-image:
    linear-gradient(115deg, rgba(10, 16, 28, .92) 0%, rgba(17, 28, 45, .8) 48%, rgba(102, 155, 188, .32) 72%, rgba(137, 52, 105, .34) 100%),
    var(--ta-page-header-image) !important;
}

html[data-i18n-title="meta.pricing.title"] .page-header {
  --ta-page-header-image: url('../img/photos/course_private.webp');
  --ta-page-header-position: center 58%;
}

html[data-i18n-title="meta.blog.title"] .page-header {
  --ta-page-header-image: url('../img/social/og_home.webp');
  --ta-page-header-position: center center;
}

html[data-i18n-title="meta.about.title"] .page-header {
  --ta-page-header-image: url('../img/social/og_courses.webp');
  --ta-page-header-position: center 56%;
}

html[data-i18n-title="meta.howItWorks.title"] .page-header {
  --ta-page-header-image: url('../img/social/ig_story_learn.webp');
  --ta-page-header-position: center 42%;
}

html[data-i18n-title="meta.dialects.title"] .page-header {
  --ta-page-header-image: url('../img/social/og_dialects.webp');
  --ta-page-header-position: center center;
}

html[data-i18n-title="meta.contact.title"] .page-header,
html[data-i18n-title="meta.levelTest.title"] .page-header,
body:has(#level-test-app) .page-header {
  --ta-page-header-image: url('../img/social/ig_square_hello.webp');
  --ta-page-header-position: center center;
}

html[data-i18n-title="meta.teachers.title"] .page-header {
  --ta-page-header-image: url('../img/photos/course_private.webp');
  --ta-page-header-position: center 52%;
}

html[data-i18n-title="meta.privacy.title"] .page-header,
html[data-i18n-title="meta.terms.title"] .page-header {
  --ta-page-header-image: url('../img/brand/banner/talk_arabic_full_strip.jpg');
  --ta-page-header-position: center center;
}

/* Release dark-mode coverage for launch surfaces. */
[data-theme="dark"] .lang-dropdown-toggle,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .pricing-toggle,
[data-theme="dark"] .pricing-subtoggle {
  background: rgba(232, 237, 242, 0.08) !important;
  border-color: rgba(232, 237, 242, 0.18) !important;
  color: #E8EDF2 !important;
}

[data-theme="dark"] .lang-dropdown-menu,
[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .nav-submenu {
  background: rgba(12, 19, 32, 0.97) !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42) !important;
}

[data-theme="dark"] .lang-dropdown-menu li,
[data-theme="dark"] .nav-submenu-link,
[data-theme="dark"] .mobile-menu .nav-link {
  color: rgba(232, 237, 242, 0.86) !important;
}

[data-theme="dark"] .lang-dropdown-menu li:hover,
[data-theme="dark"] .lang-dropdown-menu li:focus,
[data-theme="dark"] .nav-submenu-link:hover,
[data-theme="dark"] .nav-submenu-link:focus-visible {
  color: #fff !important;
  background: rgba(232, 237, 242, 0.1) !important;
}

[data-theme="dark"] .pricing-toggle-btn.active,
[data-theme="dark"] .pricing-toggle-btn:hover,
[data-theme="dark"] .pricing-toggle-btn:focus-visible,
[data-theme="dark"] .pricing-subtoggle-btn.active {
  background: rgba(232, 237, 242, 0.14) !important;
  color: #fff !important;
}

[data-theme="dark"] .price-big,
[data-theme="dark"] .price-sub,
[data-theme="dark"] .price-hour,
[data-theme="dark"] .price-unit,
[data-theme="dark"] .meta,
[data-theme="dark"] .pricing-level-feedback,
[data-theme="dark"] .course-meta,
[data-theme="dark"] .course-pricing-link {
  color: rgba(232, 237, 242, 0.78) !important;
}

[data-theme="dark"] .price-big,
[data-theme="dark"] .course-pricing-link:hover,
[data-theme="dark"] .course-pricing-link:focus-visible {
  color: #fff !important;
}

[data-theme="dark"] .trial-strip {
  background: linear-gradient(135deg, rgba(102, 155, 188, 0.28), rgba(137, 52, 105, 0.24)) !important;
  border: 1px solid rgba(232, 237, 242, 0.14) !important;
  color: #E8EDF2 !important;
}

[data-theme="dark"] .trial-strip-icon {
  background: rgba(232, 237, 242, 0.12) !important;
  color: #E8EDF2 !important;
}

[data-theme="dark"] .trial-strip-sub,
[data-theme="dark"] .trial-strip-title {
  color: #E8EDF2 !important;
}

[data-theme="dark"] .level-test-card,
[data-theme="dark"] .contact-form-shell,
[data-theme="dark"] .tally-embed-shell,
[data-theme="dark"] .contact-info-panel,
[data-theme="dark"] .student-panel-note,
[data-theme="dark"] .student-panel-sidebar,
[data-theme="dark"] .student-panel-main {
  background: #17243A !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
  color: rgba(232, 237, 242, 0.92) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.24) !important;
}

[data-theme="dark"] .level-test-progress {
  background: rgba(232, 237, 242, 0.12) !important;
}

[data-theme="dark"] .ta-portal-toast {
  background: rgba(232, 237, 242, 0.94) !important;
  color: #111C2D !important;
}

/* Footer: make main, wordmark and legal rows read as one continuous gradient */
.footer-new {
  background:
    radial-gradient(980px 560px at 84% 76%, rgba(102, 155, 188, .14), transparent 64%),
    radial-gradient(820px 460px at 15% 18%, rgba(102, 155, 188, .11), transparent 60%),
    linear-gradient(180deg, #10192b 0%, #0b1323 40%, #090d18 72%, #07080f 100%) !important;
}
.footer-main,
.footer-ta-band,
.footer-bottom-new {
  background: transparent !important;
}
.footer-main {
  padding-bottom: clamp(22px, 2.6vw, 36px) !important;
}
.footer-ta-band {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.footer-ta-stage {
  min-height: clamp(156px, 17vw, 248px) !important;
}
.footer-ta-stage::after {
  background: linear-gradient(180deg, transparent, rgba(7, 8, 15, .32)) !important;
}
.footer-ta-text {
  font-size: clamp(118px, 14vw, 260px) !important;
  opacity: max(var(--footer-opacity, .08), .105) !important;
  transform: translate3d(-50%, calc(0% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) !important;
}
.footer-bottom-new {
  border-top: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 767px) {
  .footer-ta-stage { min-height: clamp(112px, 29vw, 156px) !important; }
  .footer-ta-text { font-size: clamp(80px, 23vw, 136px) !important; }
}

/* Footer brand block: centred mark and tagline inside the existing column. */
.footer-brand-new {
  align-items: center !important;
  justify-self: start !important;
  text-align: center !important;
}

.footer-brand-new .footer-logo-link {
  align-self: center !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
  gap: 6px !important;
}

.footer-symbol-logo {
  display: block !important;
  width: clamp(48px, 9vw, 62px) !important;
  height: auto !important;
  margin-inline: auto !important;
}

.footer-wordmark-logo {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  color: #FDF0D5 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.footer-wordmark-logo span {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
}

.footer-wordmark-logo em {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  font-style: italic !important;
  color: #FDF0D5 !important;
}

.footer-brand-new .footer-logo-tagline {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: clamp(8px, 2.4vw, 12px) !important;
  white-space: nowrap !important;
}

.footer-brand-new .footer-logo-tagline::before {
  display: block !important;
  flex: 0 1 clamp(24px, 8vw, 56px) !important;
  width: clamp(24px, 8vw, 56px) !important;
  background: linear-gradient(90deg, transparent 0%, rgba(253, 240, 213, 0.6) 100%) !important;
}

.footer-brand-new .footer-logo-tagline::after {
  display: block !important;
  flex: 0 1 clamp(34px, 10vw, 64px) !important;
  width: clamp(34px, 10vw, 64px) !important;
  background: linear-gradient(90deg, rgba(253, 240, 213, 0.6) 0%, transparent 100%) !important;
}

.footer-brand-new .footer-desc-new {
  margin-inline: auto !important;
  text-align: center !important;
}

.footer-brand-new .footer-socials-new {
  justify-content: center !important;
}

[dir="rtl"] .footer-brand-new,
[dir="rtl"] .footer-brand-new .footer-logo-tagline,
[dir="rtl"] .footer-brand-new .footer-desc-new {
  text-align: center !important;
}

[dir="rtl"] .footer-brand-new {
  align-items: center !important;
  justify-self: start !important;
}

/* Footer brand motion: calm wordmark drift. */
.footer-ta-stage {
  animation: footerWordmarkDrift 11.5s ease-in-out infinite !important;
  will-change: transform;
}

.footer-ta-text {
  background-size: 140% 100% !important;
  background-position: 42% 50% !important;
  animation: footerWordmarkGlow 12s ease-in-out infinite !important;
  user-select: none !important;
  pointer-events: none !important;
}

@keyframes footerWordmarkDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(5px, -3px, 0); }
  68% { transform: translate3d(-4px, 2px, 0); }
}

@keyframes footerWordmarkGlow {
  0%, 100% {
    background-position: 42% 50%;
    opacity: max(var(--footer-opacity, .08), .105);
  }
  50% {
    background-position: 58% 50%;
    opacity: max(var(--footer-opacity, .08), .135);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-ta-stage,
  .footer-ta-text {
    animation: none !important;
  }

  .footer-ta-stage {
    transform: none !important;
  }

  .footer-ta-text {
    background-position: 50% 50% !important;
    opacity: max(var(--footer-opacity, .08), .11) !important;
  }
}

/* Hero bridge: premium quiet pulse instead of the old slider-dot treatment. */
.language-bridge {
  width: min(340px, 68vw) !important;
  height: 18px !important;
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(20px, 2.8vw, 32px) !important;
  overflow: hidden !important;
}

.language-bridge-line {
  inset: 50% 0 auto 0 !important;
  height: 1px !important;
  transform: translateY(-50%) scaleX(1) !important;
  transform-origin: left center !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(232, 237, 242, .45) 14%, rgba(232, 237, 242, .92) 50%, rgba(102, 155, 188, .48) 78%, transparent 100%) !important;
  box-shadow:
    0 0 12px rgba(232, 237, 242, .16),
    0 0 24px rgba(102, 155, 188, .10) !important;
  animation:
    heroBridgeDraw 760ms cubic-bezier(.2,.8,.2,1) 420ms both,
    heroBridgeBreathe 4.8s ease-in-out 1.2s infinite !important;
}

.language-bridge-line::after {
  content: "";
  position: absolute;
  inset: -7px auto -7px -24%;
  width: 24%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  filter: blur(4px);
  opacity: .72;
  animation: heroBridgeSheen 4.8s cubic-bezier(.2,.8,.2,1) 1.35s infinite;
}

.language-bridge-dot {
  display: none !important;
}

@keyframes heroBridgeDraw {
  from { opacity: 0; transform: translateY(-50%) scaleX(.18); filter: blur(2px); }
  to { opacity: 1; transform: translateY(-50%) scaleX(1); filter: blur(0); }
}

@keyframes heroBridgeBreathe {
  0%, 100% { opacity: .72; }
  48%, 58% { opacity: 1; }
}

@keyframes heroBridgeSheen {
  0%, 30% { transform: translateX(0); opacity: 0; }
  45% { opacity: .76; }
  72%, 100% { transform: translateX(520%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .language-bridge-line,
  .language-bridge-line::after {
    animation: none !important;
  }

  .language-bridge-line {
    opacity: .84 !important;
    transform: translateY(-50%) scaleX(1) !important;
    filter: none !important;
  }
}

/* Hero bridge final pass: remove the decorative divider after visual QA. */
.language-bridge {
  display: none !important;
  margin: 0 !important;
}

/* Homepage programmes: four live cards should sit as a centred set, not a 5-slot grid. */
#programmes .programmes-grid {
  max-width: 920px !important;
  margin-inline: auto !important;
}

@media (min-width: 1024px) {
  #programmes .programmes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Launch button colour: use brand Ink as the filled-button base. */
.btn-primary,
.btn-secondary,
.hero .btn-primary,
.contact-home-form .btn-primary,
.trial-strip .btn,
.price-card.featured .btn.btn-primary,
form .btn-primary,
button.btn-primary {
  background: var(--ta-ink) !important;
  border-color: var(--ta-ink) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(28, 28, 46, 0.2) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible,
.contact-home-form .btn-primary:hover,
.contact-home-form .btn-primary:focus-visible,
.trial-strip .btn:hover,
.trial-strip .btn:focus-visible,
.price-card.featured .btn.btn-primary:hover,
.price-card.featured .btn.btn-primary:focus-visible,
form .btn-primary:hover,
form .btn-primary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible {
  background: #2C2C43 !important;
  border-color: #2C2C43 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(28, 28, 46, 0.28), 0 0 0 1px rgba(232, 237, 242, 0.12) inset !important;
}

.nav-actions a[href*="student-panel.html"] {
  background:
    linear-gradient(var(--ta-ink), var(--ta-ink)) padding-box,
    linear-gradient(120deg, rgba(232, 237, 242, 0.44), rgba(102, 155, 188, 0.42)) border-box !important;
  color: #fff !important;
  border-color: rgba(232, 237, 242, 0.36) !important;
  box-shadow: 0 8px 20px rgba(28, 28, 46, 0.22), 0 0 16px rgba(102, 155, 188, 0.12) !important;
}

.nav-actions a[href*="student-panel.html"]:hover,
.nav-actions a[href*="student-panel.html"]:focus-visible {
  background:
    linear-gradient(#2C2C43, #2C2C43) padding-box,
    linear-gradient(120deg, rgba(232, 237, 242, 0.62), rgba(102, 155, 188, 0.52)) border-box !important;
}

/* Dark-mode promise carousel: fade edges into the section, never into light cream. */
[data-theme="dark"] .promise-wrapper::before,
[data-theme="dark"] .promise-wrapper::after {
  width: clamp(14px, 2.4vw, 34px) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .promise-wrapper::before {
  background: linear-gradient(90deg, #111C2D 0%, rgba(17, 28, 45, 0) 100%) !important;
}

[data-theme="dark"] .promise-wrapper::after {
  background: linear-gradient(270deg, #111C2D 0%, rgba(17, 28, 45, 0) 100%) !important;
}

/* Dark-mode cleanup: keep launch surfaces readable without changing layouts. */
[data-theme="dark"] .section-label {
  color: rgba(129, 116, 255, 0.96) !important;
}

[data-theme="dark"] .section-label::before {
  background: rgba(129, 116, 255, 0.96) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .programme-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .price-card.featured,
[data-theme="dark"] .contact-home-form,
[data-theme="dark"] .contact-form-shell,
[data-theme="dark"] .channel-card,
[data-theme="dark"] .faq-item {
  background: #17243A !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}

[data-theme="dark"] .tally-embed-shell {
  background: linear-gradient(180deg, rgba(248, 244, 236, 0.98), rgba(239, 233, 222, 0.96)) !important;
  border-color: rgba(253, 240, 213, 0.28) !important;
  color: #1C1C2E !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .programme-card-title,
[data-theme="dark"] .course-card-title,
[data-theme="dark"] .price-card .hours,
[data-theme="dark"] .price-card .price-big,
[data-theme="dark"] .price-card .price-big span,
[data-theme="dark"] .price-card .price-big .price-unit,
[data-theme="dark"] .faq-question,
[data-theme="dark"] .channel-title,
[data-theme="dark"] .contact-home-form .field-label,
[data-theme="dark"] .contact-info-value,
[data-theme="dark"] .contact-info-value a {
  color: #F7F9FC !important;
}

[data-theme="dark"] .card-desc,
[data-theme="dark"] .programme-card-desc,
[data-theme="dark"] .course-card-desc,
[data-theme="dark"] .course-card-meta,
[data-theme="dark"] .course-meta,
[data-theme="dark"] .faq-answer,
[data-theme="dark"] .faq-answer-inner,
[data-theme="dark"] .channel-value,
[data-theme="dark"] .contact-home-form p,
[data-theme="dark"] .contact-info-label,
[data-theme="dark"] .contact-level-test-prompt,
[data-theme="dark"] .pricing-level-feedback,
[data-theme="dark"] #how-it-works .step-desc,
[data-theme="dark"] .price-card .meta,
[data-theme="dark"] .price-card .price-sub {
  color: rgba(232, 237, 242, 0.78) !important;
}

[data-theme="dark"] .tally-embed-shell .contact-level-test-prompt,
[data-theme="dark"] .tally-embed-shell .contact-level-test-prompt a,
[data-theme="dark"] .tally-embed-shell .tally-level-test-prompt,
[data-theme="dark"] .tally-embed-shell .tally-level-test-prompt a {
  color: #5B2430 !important;
}

[data-theme="dark"] .card-icon,
[data-theme="dark"] .channel-icon,
[data-theme="dark"] .contact-info-icon {
  background: rgba(232, 237, 242, 0.08) !important;
  color: #F7F9FC !important;
}

[data-theme="dark"] .channel-card.channel-wa .channel-icon {
  background: rgba(37, 211, 102, 0.16) !important;
  color: #8EF0B2 !important;
}

[data-theme="dark"] .contact-social-preview {
  border-color: rgba(232, 237, 242, 0.14) !important;
  background: #17243A !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24) !important;
}

[data-theme="dark"] .faq-item {
  background: rgba(23, 36, 58, 0.92) !important;
}

[data-theme="dark"] .faq-question {
  color: #F7F9FC !important;
}

[data-theme="dark"] .faq-icon {
  color: rgba(232, 237, 242, 0.64) !important;
}

[data-theme="dark"] .faq-item.open .faq-icon {
  color: #B7A8FF !important;
}

[data-theme="dark"] .filter-btn,
[data-theme="dark"] .pricing-toggle-btn,
[data-theme="dark"] .pricing-subtoggle-btn {
  background: transparent !important;
  border-color: rgba(232, 237, 242, 0.18) !important;
  color: rgba(232, 237, 242, 0.74) !important;
}

[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .filter-btn:focus-visible,
[data-theme="dark"] .pricing-toggle-btn.active,
[data-theme="dark"] .pricing-toggle-btn:hover,
[data-theme="dark"] .pricing-toggle-btn:focus-visible,
[data-theme="dark"] .pricing-subtoggle-btn.active,
[data-theme="dark"] .pricing-subtoggle-btn:hover,
[data-theme="dark"] .pricing-subtoggle-btn:focus-visible {
  background: rgba(232, 237, 242, 0.14) !important;
  border-color: rgba(232, 237, 242, 0.22) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .course-card-body {
  background: transparent !important;
  color: rgba(232, 237, 242, 0.86) !important;
}

[data-theme="dark"] .course-pricing-link {
  color: #FFD7DE !important;
}

[data-theme="dark"] .course-pricing-link:hover,
[data-theme="dark"] .course-pricing-link:focus-visible {
  color: #FFFFFF !important;
}

[data-theme="dark"] .price-card .tag,
[data-theme="dark"] .price-card.featured .tag {
  background: rgba(232, 237, 242, 0.1) !important;
  color: #F7F9FC !important;
}

[data-theme="dark"] .price-card .price-hour,
[data-theme="dark"] .price-card.featured .price-hour {
  background: rgba(232, 237, 242, 0.08) !important;
  color: #F7F9FC !important;
}

[data-theme="dark"] #how-it-works .step-content,
[data-theme="dark"] .step-content {
  color: rgba(232, 237, 242, 0.9) !important;
}

[data-theme="dark"] .step-title {
  color: #FFFFFF !important;
}

/* Hero CTAs: Ink buttons need a visible edge against the dark image overlay. */
.hero-ctas {
  align-items: center !important;
  gap: clamp(12px, 2vw, 18px) !important;
  overflow: visible !important;
  padding: 4px !important;
  margin: -4px !important;
}

.hero-ctas .btn {
  min-width: min(100%, 206px) !important;
  min-height: 58px !important;
  padding-inline: clamp(22px, 3vw, 34px) !important;
  white-space: normal !important;
}

.hero .hero-ctas .btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 18px 38px rgba(5, 8, 18, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

.hero .hero-ctas .btn-outline {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(28, 28, 46, 0.16) !important;
  box-shadow:
    0 14px 30px rgba(5, 8, 18, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

@media (max-width: 560px) {
  .hero-ctas {
    width: min(100%, 360px) !important;
  }

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

/* Release polish: annotation fixes, responsive image framing, and refined motion. */
.navbar .mobile-toggle span {
  background: #FDF0D5 !important;
  box-shadow: 0 0 10px rgba(253, 240, 213, 0.18) !important;
}

.mobile-menu .mobile-lang-dropdown .lang-dropdown-toggle {
  width: fit-content !important;
  color: var(--ta-ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(28, 28, 46, 0.16) !important;
}

.mobile-menu .mobile-lang-dropdown .lang-chevron {
  color: currentColor !important;
}

[data-theme="dark"] .mobile-menu .mobile-lang-dropdown .lang-dropdown-toggle {
  color: #F7F9FC !important;
  background: rgba(232, 237, 242, 0.1) !important;
  border-color: rgba(232, 237, 242, 0.22) !important;
}

/* Premium theme switch: visible state change and click motion. */
.theme-toggle.ta-theme-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232, 237, 242, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(232, 237, 242, 0.18), rgba(232, 237, 242, 0.06)) !important;
  color: #F7F9FC !important;
  cursor: pointer !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(7, 7, 12, 0.12) !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle.ta-theme-toggle:hover,
.theme-toggle.ta-theme-toggle:focus-visible {
  border-color: rgba(253, 240, 213, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(253, 240, 213, 0.22), rgba(232, 237, 242, 0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 28px rgba(7, 7, 12, 0.18), 0 0 0 3px rgba(253, 240, 213, 0.08) !important;
}

.ta-theme-toggle-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.ta-theme-toggle-symbol {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 11px;
  line-height: 1;
  color: rgba(253, 240, 213, 0.72);
  pointer-events: none;
}

.ta-theme-toggle-sun { left: 10px; }
.ta-theme-toggle-moon { right: 10px; }

.ta-theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), rgba(253, 240, 213, 0.92) 42%, rgba(232, 237, 242, 0.86) 100%);
  color: var(--ta-ink);
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(7, 7, 12, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 260ms cubic-bezier(.2, .9, .2, 1), background 220ms ease, color 220ms ease;
}

html[data-theme="dark"] .ta-theme-toggle-thumb {
  transform: translateX(24px);
  background:
    radial-gradient(circle at 65% 35%, rgba(139, 183, 210, 0.92), rgba(102, 155, 188, 0.96) 42%, rgba(28, 28, 46, 0.98) 100%);
  color: #FDF0D5;
}

.theme-toggle.ta-theme-toggle.is-theme-animating {
  animation: ta-theme-switch-pop 420ms ease;
}

.theme-toggle.ta-theme-toggle.is-theme-animating .ta-theme-toggle-thumb {
  animation: ta-theme-thumb-pulse 420ms ease;
}

@keyframes ta-theme-switch-pop {
  0% { transform: scale(1); }
  42% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes ta-theme-thumb-pulse {
  0% { box-shadow: 0 8px 18px rgba(7, 7, 12, 0.26), 0 0 0 0 rgba(253, 240, 213, 0); }
  45% { box-shadow: 0 10px 22px rgba(7, 7, 12, 0.32), 0 0 0 8px rgba(253, 240, 213, 0.14); }
  100% { box-shadow: 0 8px 18px rgba(7, 7, 12, 0.26), 0 0 0 0 rgba(253, 240, 213, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle.ta-theme-toggle,
  .ta-theme-toggle-thumb {
    transition: none !important;
  }

  .theme-toggle.ta-theme-toggle.is-theme-animating,
  .theme-toggle.ta-theme-toggle.is-theme-animating .ta-theme-toggle-thumb {
    animation: none !important;
  }
}

.email-capture {
  grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.email-capture-art {
  width: 100% !important;
  min-height: clamp(360px, 42vw, 520px) !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  border: 0 !important;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.email-capture-art picture,
.email-capture-art img {
  height: 100% !important;
}

.email-capture-art img {
  object-fit: cover !important;
  object-position: center 42% !important;
}

.email-capture-art::after {
  background:
    linear-gradient(90deg, rgba(10, 20, 32, 0.02) 0%, rgba(10, 20, 32, 0.06) 64%, rgba(0, 48, 73, 0.58) 100%),
    linear-gradient(180deg, rgba(10, 20, 32, 0.02), rgba(10, 20, 32, 0.16)) !important;
}

.email-capture-inner {
  align-self: center !important;
  padding: clamp(28px, 4vw, 56px) !important;
}

.email-capture-heading {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: var(--space-3) !important;
}

.email-capture-heading .email-capture-icon {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.email-capture-heading h2 {
  margin: 0 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

.email-capture-note {
  display: none !important;
}

@media (max-width: 1160px) {
  .email-capture-heading h2 {
    white-space: normal !important;
  }
}

@media (max-width: 860px) {
  .email-capture {
    grid-template-columns: 1fr !important;
  }

  .email-capture-art {
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  }

  .email-capture-art::after {
    background:
      linear-gradient(180deg, rgba(10, 20, 32, 0.02) 0%, rgba(10, 20, 32, 0.1) 62%, rgba(0, 48, 73, 0.5) 100%) !important;
  }

  .email-capture-inner {
    padding: clamp(24px, 7vw, 38px) !important;
  }
}

.contact-social-preview {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  overflow: hidden !important;
  box-shadow: 0 20px 42px rgba(28, 28, 46, 0.1) !important;
}

.contact-social-preview picture,
.contact-social-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.contact-social-preview img {
  object-fit: cover !important;
  object-position: center 44% !important;
}

.contact-social-preview::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(10, 20, 32, 0.02), rgba(10, 20, 32, 0.14)) !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  .contact-social-preview {
    width: min(100%, 560px) !important;
    margin-inline: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
}

.programme-hero-photo img,
.programme-hero-media img,
.story-photo img,
.course-card-thumb img,
.teacher-photo img,
.blog-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.footer-bottom-new {
  padding-block: clamp(18px, 2.4vw, 26px) !important;
}

.footer-bottom-new .container {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}

@media (max-width: 900px) {
  .footer-bottom-new {
    padding-top: 18px !important;
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-bottom-new .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .footer-bottom-new p,
  .footer-powered-by {
    width: min(100%, 42ch) !important;
    text-align: center !important;
  }
}

.language-bridge {
  display: block !important;
  width: min(280px, 58vw) !important;
  height: 12px !important;
  margin: clamp(10px, 1.8vw, 16px) 0 clamp(16px, 2.2vw, 24px) !important;
}

.language-bridge-line {
  height: 1px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(253, 240, 213, 0.5) 22%, rgba(253, 240, 213, 0.9) 52%, rgba(102, 155, 188, 0.35) 76%, transparent 100%) !important;
  box-shadow: 0 0 10px rgba(253, 240, 213, 0.12) !important;
}

.language-bridge-line::after {
  opacity: 0.42 !important;
  filter: blur(3px) !important;
}

.language-bridge-dot {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .language-bridge {
    display: block !important;
  }

  .language-bridge-line,
  .language-bridge-line::after,
  .footer-ta-stage,
  .footer-ta-text {
    animation: none !important;
  }
}

/* Final dark-mode readability pass: scoped component fixes after release-polish overrides. */
[data-theme="dark"] .value-card,
[data-theme="dark"] .diff-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .story-photo-card,
[data-theme="dark"] .story-pattern,
[data-theme="dark"] .step,
[data-theme="dark"] .step-item,
[data-theme="dark"] .level-test-card,
[data-theme="dark"] .teacher-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .student-panel-card {
  background: #17243A !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
  color: #F7F9FC !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}

[data-theme="dark"] .value-card,
[data-theme="dark"] .diff-card {
  border: 1px solid rgba(232, 237, 242, 0.16) !important;
  border-radius: var(--radius-lg) !important;
}

[data-theme="dark"] .value-icon,
[data-theme="dark"] .diff-card > div:first-child,
[data-theme="dark"] .step-number,
[data-theme="dark"] .card-icon,
[data-theme="dark"] .programme-card-icon {
  background: rgba(232, 237, 242, 0.1) !important;
  color: #FDF0D5 !important;
}

[data-theme="dark"] .value-card .card-title,
[data-theme="dark"] .diff-card .card-title,
[data-theme="dark"] .team-card h3,
[data-theme="dark"] .step-title,
[data-theme="dark"] .level-test-card h2,
[data-theme="dark"] .level-test-card h3,
[data-theme="dark"] .teacher-card h3,
[data-theme="dark"] .blog-card h3,
[data-theme="dark"] .student-panel-card h2,
[data-theme="dark"] .student-panel-card h3 {
  color: #F7F9FC !important;
}

[data-theme="dark"] .value-card .card-desc,
[data-theme="dark"] .diff-card .card-desc,
[data-theme="dark"] .team-card p,
[data-theme="dark"] .step-desc,
[data-theme="dark"] .level-test-card p,
[data-theme="dark"] .teacher-card p,
[data-theme="dark"] .blog-card p,
[data-theme="dark"] .student-panel-card p {
  color: rgba(232, 237, 242, 0.82) !important;
}

[data-theme="dark"] .contact-home-tally,
[data-theme="dark"] .contact-form-shell.tally-embed-shell,
[data-theme="dark"] .tally-embed-shell {
  background: #F8FAFC !important;
  border-color: rgba(28, 28, 46, 0.12) !important;
  color: #1C1C2E !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24) !important;
}

[data-theme="dark"] .contact-home-tally p,
[data-theme="dark"] .contact-home-tally label,
[data-theme="dark"] .contact-home-tally .contact-level-test-prompt,
[data-theme="dark"] .contact-home-tally .contact-level-test-prompt a,
[data-theme="dark"] .tally-embed-shell .tally-level-test-prompt,
[data-theme="dark"] .tally-embed-shell .tally-level-test-prompt a,
[data-theme="dark"] .tally-embed-shell .contact-level-test-prompt,
[data-theme="dark"] .tally-embed-shell .contact-level-test-prompt a {
  color: #3B4254 !important;
}

[data-theme="dark"] .contact-home-tally .contact-level-test-prompt a,
[data-theme="dark"] .tally-embed-shell .tally-level-test-prompt a,
[data-theme="dark"] .tally-embed-shell .contact-level-test-prompt a {
  color: #669BBC !important;
}

[data-theme="dark"] .contact-home-tally .tally-embed-frame,
[data-theme="dark"] .tally-embed-shell .tally-embed-frame {
  background: #F8FAFC !important;
  color-scheme: light !important;
}

[data-theme="dark"] .tally-action-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 209, 115, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
  border-color: rgba(28, 28, 46, 0.12) !important;
  color: #1C1C2E !important;
}

[data-theme="dark"] .tally-action-card h3 {
  color: #1C1C2E !important;
}

[data-theme="dark"] .tally-action-card p {
  color: #3B4254 !important;
}

[data-theme="dark"] .contact-info-panel,
[data-theme="dark"] .contact-info-item,
[data-theme="dark"] .channel-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .promise-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .price-card.featured {
  background: #17243A !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
  color: #F7F9FC !important;
}

[data-theme="dark"] .contact-info-label,
[data-theme="dark"] .channel-value,
[data-theme="dark"] .faq-answer,
[data-theme="dark"] .faq-answer-inner,
[data-theme="dark"] .promise-desc,
[data-theme="dark"] .course-card-body,
[data-theme="dark"] .course-meta,
[data-theme="dark"] .price-card .meta,
[data-theme="dark"] .price-card .price-sub,
[data-theme="dark"] .pricing-level-feedback {
  color: rgba(232, 237, 242, 0.82) !important;
}

[data-theme="dark"] .contact-info-value,
[data-theme="dark"] .contact-info-value a,
[data-theme="dark"] .channel-title,
[data-theme="dark"] .faq-question,
[data-theme="dark"] .promise-title,
[data-theme="dark"] .course-card-title,
[data-theme="dark"] .price-card .hours,
[data-theme="dark"] .price-card .price-big,
[data-theme="dark"] .price-card .price-big span,
[data-theme="dark"] .price-card .price-big .price-unit,
[data-theme="dark"] .price-card .price-hour {
  color: #F7F9FC !important;
}

[data-theme="dark"] .course-card-body {
  background: #F8FAFC !important;
  color: #1C1C2E !important;
}

[data-theme="dark"] .course-card-body .card-desc,
[data-theme="dark"] .course-card-body .course-meta {
  color: #4A5368 !important;
}

[data-theme="dark"] .course-card-body .course-pricing-link {
  color: #669BBC !important;
}

[data-theme="dark"] .course-card-body .btn-primary {
  color: #FFFFFF !important;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .field-label,
[data-theme="dark"] .level-test-card label,
[data-theme="dark"] .student-panel-card label {
  color: #F7F9FC !important;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .level-test-card input,
[data-theme="dark"] .level-test-card select,
[data-theme="dark"] .level-test-card textarea,
[data-theme="dark"] .student-panel-card input,
[data-theme="dark"] .student-panel-card select,
[data-theme="dark"] .student-panel-card textarea {
  background: #0F1B2D !important;
  border-color: rgba(232, 237, 242, 0.24) !important;
  color: #F7F9FC !important;
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder,
[data-theme="dark"] .level-test-card input::placeholder,
[data-theme="dark"] .level-test-card textarea::placeholder,
[data-theme="dark"] .student-panel-card input::placeholder,
[data-theme="dark"] .student-panel-card textarea::placeholder {
  color: rgba(232, 237, 242, 0.54) !important;
}

[data-theme="dark"] .email-capture {
  background: linear-gradient(135deg, #0F3350 0%, #17243A 100%) !important;
  border-color: rgba(232, 237, 242, 0.14) !important;
  color: #F7F9FC !important;
}

[data-theme="dark"] .email-capture h2,
[data-theme="dark"] .email-capture h3,
[data-theme="dark"] .email-capture p,
[data-theme="dark"] .email-capture-note {
  color: #F7F9FC !important;
}

[data-theme="dark"] .email-form input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .cookie-banner,
[data-theme="dark"] .mobile-menu {
  background: rgba(17, 28, 45, 0.98) !important;
  color: #F7F9FC !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
}

[data-theme="dark"] .cookie-banner p,
[data-theme="dark"] .mobile-menu .nav-link {
  color: rgba(232, 237, 242, 0.86) !important;
}

/* Pricing hierarchy polish: make monthly figures quiet and totals dominant. */
.pricing-opening-banner {
  isolation: isolate;
}

.price-card .price-big {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.price-card .price-big.price-monthly {
  margin-top: 2px !important;
  font-size: clamp(1.28rem, 1.75vw, 1.7rem) !important;
  font-weight: 800 !important;
  color: rgba(28, 28, 46, 0.66) !important;
}

.price-card .price-big.price-monthly [data-ta-monthly] {
  color: rgba(28, 28, 46, 0.66) !important;
}

.price-card .price-big .price-unit {
  font-size: clamp(0.72rem, 0.95vw, 0.86rem) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: rgba(137, 52, 105, 0.78) !important;
  letter-spacing: 0 !important;
  margin-inline-start: 0 !important;
}

.price-card .price-sub {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 7px !important;
  width: fit-content !important;
  margin: 9px auto 0 !important;
  font-size: clamp(0.9rem, 1vw, 1rem) !important;
  font-weight: 800 !important;
  color: rgba(28, 28, 46, 0.62) !important;
}

.price-card .price-sub [data-ta-total] {
  font-size: clamp(1.55rem, 2.15vw, 2.05rem) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: var(--ta-berry) !important;
  letter-spacing: -0.01em !important;
}

[data-theme="dark"] .pricing-opening-banner {
  background:
    linear-gradient(135deg, rgba(23, 36, 58, 0.9), rgba(15, 27, 45, 0.96)) !important;
  border-color: rgba(232, 237, 242, 0.14) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="dark"] .pricing-opening-kicker {
  background: linear-gradient(180deg, #8BB7D2, #893469) !important;
  box-shadow: 0 0 18px rgba(242, 85, 105, 0.22) !important;
}

[data-theme="dark"] .pricing-opening-banner p {
  color: rgba(232, 237, 242, 0.82) !important;
}

[data-theme="dark"] .pricing-opening-banner strong,
[data-theme="dark"] .price-card .price-big {
  color: #F7F9FC !important;
}

[data-theme="dark"] .price-card .price-big.price-monthly,
[data-theme="dark"] .price-card .price-big.price-monthly [data-ta-monthly] {
  color: rgba(232, 237, 242, 0.66) !important;
}

[data-theme="dark"] .price-card .price-sub [data-ta-total] {
  color: #8BB7D2 !important;
}

[data-theme="dark"] .price-card .price-big .price-unit,
[data-theme="dark"] .price-card .price-sub {
  color: rgba(232, 237, 242, 0.72) !important;
}

/* Final release polish overrides. */
.hero .language-bridge {
  display: block !important;
  width: min(360px, 62vw) !important;
  height: 18px !important;
  margin: clamp(12px, 1.8vw, 18px) 0 clamp(18px, 2.4vw, 28px) !important;
  overflow: visible !important;
}

.hero .language-bridge-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  transform-origin: left center !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(253, 240, 213, 0.24) 12%, rgba(253, 240, 213, 0.78) 38%, rgba(102, 155, 188, 0.52) 58%, rgba(102, 155, 188, 0.34) 74%, transparent 100%) !important;
  box-shadow:
    0 0 12px rgba(253, 240, 213, 0.14),
    0 0 24px rgba(102, 155, 188, 0.08) !important;
  animation:
    heroBridgeReveal 900ms cubic-bezier(.2, .8, .2, 1) .35s both,
    heroBridgeGlow 5.6s ease-in-out 1.4s infinite !important;
}

.hero .language-bridge-line::before {
  content: "" !important;
  position: absolute !important;
  inset: -5px 44% !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(253, 240, 213, 0.45), transparent 68%) !important;
  opacity: 0 !important;
  animation: heroBridgeSoftPulse 5.6s ease-in-out 1.7s infinite !important;
}

.hero .language-bridge-line::after {
  content: "" !important;
  position: absolute !important;
  inset: -7px auto -7px -18% !important;
  width: 18% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent) !important;
  filter: blur(4px) !important;
  opacity: 0 !important;
  animation: heroBridgeSheenRefined 5.6s cubic-bezier(.22, .8, .24, 1) 1.55s infinite !important;
}

.hero .language-bridge-dot {
  display: none !important;
}

@keyframes heroBridgeReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(2px);
  }
  to {
    opacity: 0.92;
    clip-path: inset(0 0 0 0);
    filter: blur(0);
  }
}

@keyframes heroBridgeGlow {
  0%, 100% { opacity: 0.72; }
  48%, 56% { opacity: 1; }
}

@keyframes heroBridgeSoftPulse {
  0%, 38%, 100% {
    opacity: 0;
    transform: scaleX(0.55);
  }
  52% {
    opacity: 0.48;
    transform: scaleX(1);
  }
}

@keyframes heroBridgeSheenRefined {
  0%, 36% {
    transform: translateX(0);
    opacity: 0;
  }
  48% {
    opacity: 0.62;
  }
  74%, 100% {
    transform: translateX(650%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .language-bridge-line,
  .hero .language-bridge-line::before,
  .hero .language-bridge-line::after {
    animation: none !important;
  }

  .hero .language-bridge-line {
    opacity: 0.82 !important;
    clip-path: none !important;
  }
}

#courses {
  --pricing-course-accent: #4862E8;
  --pricing-course-accent-dark: #3149C8;
  --pricing-course-accent-soft: rgba(72, 98, 232, 0.12);
}

#courses .pricing-course-grid .course-card-header {
  background: #4862E8 !important;
}

#courses .pricing-course-grid .course-pricing-link {
  color: #3149C8 !important;
  text-decoration-color: rgba(72, 98, 232, 0.46) !important;
}

#courses .pricing-course-grid .course-pricing-link:hover,
#courses .pricing-course-grid .course-pricing-link:focus-visible {
  color: #4862E8 !important;
  text-decoration-color: currentColor !important;
}

#courses .pricing-course-grid .btn.btn-outline {
  border-color: #4862E8 !important;
  color: #4862E8 !important;
  background: rgba(72, 98, 232, 0.03) !important;
}

#courses .pricing-course-grid .btn.btn-outline:hover,
#courses .pricing-course-grid .btn.btn-outline:focus-visible {
  background: #4862E8 !important;
  border-color: #4862E8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 28px rgba(72, 98, 232, 0.18) !important;
}

[data-theme="dark"] #courses {
  --pricing-course-accent: #6E82FF;
  --pricing-course-accent-dark: #9BA8FF;
  --pricing-course-accent-soft: rgba(110, 130, 255, 0.16);
}

[data-theme="dark"] #courses .pricing-course-grid .course-card-header {
  background: linear-gradient(135deg, #4862E8 0%, #3149C8 100%) !important;
}

[data-theme="dark"] .email-capture {
  background:
    linear-gradient(135deg, #0F3350 0%, #17243A 100%) !important;
  border: 1px solid rgba(232, 237, 242, 0.14) !important;
}

[data-theme="dark"] .email-capture-art::after {
  background:
    linear-gradient(90deg, rgba(10, 20, 32, 0.04) 0%, rgba(10, 20, 32, 0.1) 62%, rgba(15, 51, 80, 0.68) 100%),
    linear-gradient(180deg, rgba(10, 20, 32, 0.02), rgba(10, 20, 32, 0.2)) !important;
}

[data-theme="dark"] .email-form input,
[data-theme="dark"] .email-input {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .email-form input::placeholder,
[data-theme="dark"] .email-input::placeholder {
  color: rgba(232, 237, 242, 0.58) !important;
}

@media (max-width: 860px) {
  [data-theme="dark"] .email-capture-art::after {
    background:
      linear-gradient(180deg, rgba(10, 20, 32, 0.04) 0%, rgba(10, 20, 32, 0.12) 60%, rgba(15, 51, 80, 0.64) 100%) !important;
  }
}

/* Release nav polish: the active pill is enough; remove the extra underline accent. */
.navbar .nav-links .nav-link {
  text-decoration: none !important;
}

.navbar .nav-links .nav-link::after,
.navbar .nav-links .nav-link:hover::after,
.navbar .nav-links .nav-link.active::after,
.navbar .nav-links .nav-link:focus-visible::after {
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* Pricing polish: opening notice as a compact Ink ribbon, plus price hierarchy cleanup. */
.pricing-opening-banner {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1.4vw, 18px) !important;
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  min-height: 58px !important;
  margin: clamp(34px, 4vw, 44px) auto var(--space-7) !important;
  padding: 8px 18px 8px 8px !important;
  border: 1px solid rgba(253, 240, 213, 0.16) !important;
  border-radius: var(--radius-full) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(137, 52, 105, 0.28), transparent 34%),
    linear-gradient(135deg, #1C1C2E 0%, #24233A 54%, #171729 100%) !important;
  box-shadow:
    0 18px 42px rgba(28, 28, 46, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #FDF0D5 !important;
  text-align: start !important;
  overflow: hidden !important;
}

.pricing-opening-banner::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(253, 240, 213, 0.08), transparent);
  opacity: 0.62;
  pointer-events: none;
}

.pricing-opening-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  padding: 11px 14px !important;
  border-radius: 999px !important;
  background: #FDF0D5 !important;
  color: #1C1C2E !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  font-size: clamp(0.66rem, 0.72vw, 0.74rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.pricing-opening-banner p {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px 12px !important;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(253, 240, 213, 0.74) !important;
  font-size: clamp(0.9rem, 1vw, 1rem) !important;
  line-height: 1.35 !important;
}

.pricing-opening-banner strong {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
}

.pricing-opening-banner strong::after {
  content: "";
  width: 1px;
  height: 18px;
  margin-inline-start: 12px;
  background: rgba(253, 240, 213, 0.22);
}

.pricing-opening-banner p span {
  display: inline !important;
}

@media (max-width: 720px) {
  .pricing-opening-banner {
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 560px) !important;
    min-height: 0 !important;
    padding: 14px 16px 16px !important;
    border-radius: 22px !important;
    text-align: center !important;
    margin-top: var(--space-7) !important;
  }

  .pricing-opening-banner p {
    display: block !important;
    max-width: 42ch !important;
    text-align: center !important;
  }

  .pricing-opening-banner strong {
    display: block !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
  }

  .pricing-opening-banner strong::after {
    display: none !important;
  }

  .pricing-opening-banner p span {
    display: block !important;
  }
}

[data-theme="dark"] .pricing-opening-banner {
  background:
    radial-gradient(circle at 10% 50%, rgba(137, 52, 105, 0.26), transparent 34%),
    linear-gradient(135deg, #1C1C2E 0%, #24233A 54%, #171729 100%) !important;
  border-color: rgba(253, 240, 213, 0.16) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .pricing-opening-kicker {
  background: #FDF0D5 !important;
  color: #1C1C2E !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

[data-theme="dark"] .pricing-opening-banner p {
  color: rgba(253, 240, 213, 0.72) !important;
}

[data-theme="dark"] .pricing-opening-banner strong {
  color: #FFFFFF !important;
}

.pricing-level-feedback {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 14px auto 0 !important;
  padding: 7px 12px !important;
  border-radius: var(--radius-full) !important;
  background: rgba(72, 98, 232, 0.08) !important;
  color: #3149C8 !important;
  border: 1px solid rgba(72, 98, 232, 0.16) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
}

.pricing-level-feedback::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: #4862E8;
  box-shadow: 0 0 0 4px rgba(72, 98, 232, 0.12);
}

.price-card .price-big.price-monthly {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
  font-weight: 800 !important;
  color: rgba(28, 28, 46, 0.56) !important;
}

.price-card .price-big.price-monthly [data-ta-monthly] {
  color: rgba(28, 28, 46, 0.56) !important;
}

.price-card .price-big .price-unit {
  font-size: 0.78em !important;
  font-weight: 800 !important;
  color: rgba(28, 28, 46, 0.48) !important;
}

.price-card .price-sub {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: fit-content !important;
  margin: 10px auto 0 !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(28, 28, 46, 0.48) !important;
}

.price-card .price-sub [data-ta-total] {
  font-size: clamp(2rem, 2.65vw, 2.55rem) !important;
  line-height: 0.95 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--ta-berry) !important;
}

.price-card .price-hour {
  margin-top: 14px !important;
  margin-bottom: var(--space-5) !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  color: rgba(28, 28, 46, 0.72) !important;
  background: rgba(28, 28, 46, 0.045) !important;
}

[data-theme="dark"] .pricing-level-feedback {
  background: rgba(110, 130, 255, 0.16) !important;
  border-color: rgba(155, 168, 255, 0.24) !important;
  color: #DDE4FF !important;
}

[data-theme="dark"] .pricing-level-feedback::before {
  background: #9BA8FF !important;
  box-shadow: 0 0 0 4px rgba(155, 168, 255, 0.16) !important;
}

[data-theme="dark"] .price-card .price-big.price-monthly,
[data-theme="dark"] .price-card .price-big.price-monthly [data-ta-monthly],
[data-theme="dark"] .price-card .price-big .price-unit {
  color: rgba(232, 237, 242, 0.56) !important;
}

[data-theme="dark"] .price-card .price-sub {
  color: rgba(232, 237, 242, 0.52) !important;
}

[data-theme="dark"] .price-card .price-hour {
  background: rgba(232, 237, 242, 0.08) !important;
  color: rgba(232, 237, 242, 0.78) !important;
}

/* Worker 1 release hardening: pricing opening control and dark FAQ readability. */
html[data-i18n-title="meta.pricing.title"] .pricing-control-island {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
  width: min(100%, 920px);
  margin: var(--space-10) auto var(--space-9);
  padding: 16px 18px 16px 22px;
  border: 1px solid rgba(253, 240, 213, 0.18);
  border-radius: 26px;
  background: linear-gradient(135deg, #1C1C2E 0%, #222237 58%, #171729 100%);
  box-shadow:
    0 22px 48px rgba(28, 28, 46, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(253, 240, 213, 0.1), transparent 32%, rgba(137, 52, 105, 0.16));
  pointer-events: none;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FDF0D5 !important;
  text-align: start !important;
  overflow: visible !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner::after {
  display: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(253, 240, 213, 0.18) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(253, 240, 213, 0.12) !important;
  color: #FDF0D5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 5px 12px !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(253, 240, 213, 0.74) !important;
  font-size: 0.96rem !important;
  line-height: 1.38 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner strong {
  display: inline !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner strong::after {
  display: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p span {
  display: inline !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(253, 240, 213, 0.18) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(253, 240, 213, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn {
  min-height: 42px !important;
  padding: 0 22px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(253, 240, 213, 0.78) !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:focus-visible {
  background: #FDF0D5 !important;
  color: #1C1C2E !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:focus-visible {
  outline: 2px solid rgba(253, 240, 213, 0.78);
  outline-offset: 2px;
}

html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-control-island {
  background: linear-gradient(135deg, #1C1C2E 0%, #222237 58%, #171729 100%) !important;
  border-color: rgba(253, 240, 213, 0.16) !important;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island {
    grid-template-columns: 1fr;
    width: min(100%, 560px);
    margin-top: var(--space-8);
    padding: 16px;
    border-radius: 24px;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p {
    display: block !important;
    max-width: 42ch !important;
    text-align: center !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner strong {
    display: block !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p span {
    display: block !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle {
    width: 100% !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-inline: 12px !important;
  }
}

html[data-i18n-title="meta.pricing.title"] [data-tabpanel="grup"] > div:first-child {
  display: block !important;
  text-align: center !important;
  margin-top: clamp(22px, 3vw, 34px) !important;
  margin-bottom: var(--space-10) !important;
}

html[data-i18n-title="meta.pricing.title"] [data-tabpanel="grup"] .pricing-subtoggle {
  margin: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] [data-tabpanel="grup"] .pricing-level-feedback {
  display: flex !important;
  margin: 14px auto 0 !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] [data-tabpanel="grup"] > div:first-child {
    margin-top: 26px !important;
    margin-bottom: var(--space-8) !important;
  }
}

@media (max-width: 420px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island {
    border-radius: 24px;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-kicker {
    width: 100% !important;
    max-width: 260px !important;
  }
}

[data-theme="dark"] .faq-list {
  display: grid;
  gap: 10px;
}

[data-theme="dark"] .faq-list .faq-item {
  border: 1px solid rgba(232, 237, 242, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(23, 36, 58, 0.88) !important;
  box-shadow: none !important;
  color: #F7F9FC !important;
  overflow: hidden;
}

[data-theme="dark"] .faq-list .faq-item.open {
  border-color: rgba(253, 240, 213, 0.28) !important;
  background: linear-gradient(180deg, rgba(29, 43, 68, 0.96), rgba(22, 34, 55, 0.96)) !important;
}

[data-theme="dark"] .faq-list .faq-question {
  gap: 16px;
  padding: 18px 20px !important;
  color: #F7F9FC !important;
  line-height: 1.35;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

[data-theme="dark"] .faq-list .faq-question span {
  min-width: 0;
}

[data-theme="dark"] .faq-list .faq-question:hover,
[data-theme="dark"] .faq-list .faq-question:focus-visible {
  background: rgba(253, 240, 213, 0.07) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .faq-list .faq-question:focus-visible {
  outline: 2px solid rgba(253, 240, 213, 0.62);
  outline-offset: -2px;
}

[data-theme="dark"] .faq-list .faq-icon {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 1px solid rgba(232, 237, 242, 0.14);
  border-radius: var(--radius-full);
  background: rgba(232, 237, 242, 0.08);
  color: rgba(232, 237, 242, 0.78) !important;
  transition:
    transform var(--transition-base),
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

[data-theme="dark"] .faq-list .faq-item.open .faq-icon {
  border-color: rgba(253, 240, 213, 0.3);
  background: rgba(253, 240, 213, 0.14);
  color: #FDF0D5 !important;
}

[data-theme="dark"] .faq-list .faq-answer {
  color: rgba(232, 237, 242, 0.82) !important;
}

[data-theme="dark"] .faq-list .faq-answer-inner {
  padding: 0 20px 18px !important;
  color: rgba(232, 237, 242, 0.82) !important;
  line-height: 1.72;
}

@media (max-width: 640px) {
  [data-theme="dark"] .faq-list .faq-question {
    padding: 16px !important;
  }

  [data-theme="dark"] .faq-list .faq-answer-inner {
    padding: 0 16px 16px !important;
  }
}

/* Sevde QA cleanup: nav logo colour, programme menus, and narrow-width alignment. */
.navbar-logo .ta-lockup-logo-nav {
  filter: brightness(0) invert(1) !important;
}

.navbar-logo .ta-wordmark-nav,
.navbar-logo .ta-wordmark-nav .ta-wm-sans,
.navbar-logo .ta-wordmark-nav .ta-wm-serif {
  color: #FDF0D5 !important;
}

.nav-submenu {
  left: 0 !important;
  right: auto !important;
  min-width: 238px !important;
  max-width: min(300px, calc(100vw - 32px)) !important;
  transform: translateY(8px) !important;
}

.nav-dropdown.open .nav-submenu,
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  transform: translateY(0) !important;
}

.nav-submenu-link {
  padding: 10px 13px !important;
  line-height: 1.25 !important;
}

@media (max-width: 960px) {
  .mobile-menu {
    z-index: 520 !important;
    align-items: center !important;
    gap: 14px !important;
    padding: clamp(22px, 6vw, 42px) clamp(18px, 5vw, 32px) max(32px, env(safe-area-inset-bottom)) !important;
    background: #0D1728 !important;
  }

  .mobile-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    width: min(100%, 560px) !important;
    min-height: 64px !important;
    padding: 18px clamp(22px, 7vw, 34px) !important;
    border: 1px solid rgba(232, 237, 242, 0.18) !important;
    border-radius: 20px !important;
    background: rgba(232, 237, 242, 0.035) !important;
    color: rgba(247, 249, 252, 0.9) !important;
    text-align: left !important;
  }

  .mobile-menu .mobile-lang-dropdown {
    display: none !important;
  }
}

.nav-links .nav-link[data-i18n="nav.teachers"],
.mobile-menu .nav-link[data-i18n="nav.teachers"] {
  display: none !important;
}

@media (max-width: 640px) {
  .navbar-inner {
    padding-inline: clamp(18px, 5vw, 28px) !important;
  }

  .navbar-logo {
    min-width: 0 !important;
  }

}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island {
  width: min(calc(100% - 32px), 920px) !important;
  margin-inline: auto !important;
  margin-bottom: clamp(28px, 4vw, 44px) !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island {
    width: min(calc(100% - 24px), 560px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1179px) {
  html[data-i18n-title="meta.pricing.title"] .price-grid.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1180px) {
  html[data-i18n-title="meta.pricing.title"] .price-grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .footer-main > .container {
    width: min(100% - 32px, 390px) !important;
  }

  .footer-brand-new {
    width: 100% !important;
    max-width: 360px !important;
    justify-self: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-brand-new .footer-desc-new {
    max-width: 30ch !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .footer-brand-new .footer-socials-new {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Pricing page colour cleanup: keep controls in the navy/blue family, no red accents. */
html[data-i18n-title="meta.pricing.title"] .hero .btn-outline,
html[data-i18n-title="meta.pricing.title"] .section-header .btn-outline,
html[data-i18n-title="meta.pricing.title"] a.btn-outline[href="#courses"] {
  border-color: rgba(28, 28, 46, 0.82) !important;
  color: #1C1C2E !important;
  background: rgba(28, 28, 46, 0.03) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .hero .btn-outline:hover,
html[data-i18n-title="meta.pricing.title"] .hero .btn-outline:focus-visible,
html[data-i18n-title="meta.pricing.title"] a.btn-outline[href="#courses"]:hover,
html[data-i18n-title="meta.pricing.title"] a.btn-outline[href="#courses"]:focus-visible {
  border-color: #1C1C2E !important;
  color: #FFFFFF !important;
  background: #1C1C2E !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-subtoggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-subtoggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-subtoggle-btn:focus-visible {
  background: #3149C8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(49, 73, 200, 0.2) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island::before {
  background: linear-gradient(90deg, rgba(253, 240, 213, 0.1), transparent 34%, rgba(102, 155, 188, 0.14)) !important;
}

/* Programme detail pages: canonical pricing card and final CTA spacing. */
.pricing-reference-card {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 38px);
  text-align: center;
  border: 1px solid rgba(28, 28, 46, 0.08);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 42px rgba(28, 28, 46, 0.08);
}

.pricing-reference-card .card-desc {
  max-width: 58ch;
  margin-inline: auto;
}

.pricing-reference-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.programme-final-cta {
  padding-block: clamp(72px, 10vw, 112px) !important;
}

.programme-final-cta .container {
  max-width: 760px;
}

.programme-final-cta .section-title {
  margin-bottom: 14px;
}

.programme-final-cta .section-desc {
  max-width: 54ch;
  margin-bottom: 26px !important;
  line-height: 1.7;
}

.programme-final-cta .btn {
  min-width: 148px;
}

.programme-final-cta + .mobile-sticky-cta + .motif-line {
  margin-top: 0;
}

/* Pricing page: one-piece animated control console. */
html[data-i18n-title="meta.pricing.title"] .pricing-control-island {
  --pricing-type-index: 0;
  --pricing-level-index: 2;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px clamp(18px, 3vw, 30px) !important;
  padding: clamp(16px, 2vw, 20px) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid rgba(253, 240, 213, 0.18) !important;
  background: rgba(253, 240, 213, 0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle {
  grid-template-columns: repeat(2, minmax(112px, 1fr)) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle {
  grid-template-columns: repeat(5, minmax(52px, 1fr)) !important;
  width: min(100%, 420px) !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: var(--radius-full) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 0;
  border-radius: var(--radius-full);
  background: #FDF0D5;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    width 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms ease;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before {
  width: calc((100% - 16px) / 2);
  transform: translateX(calc(var(--pricing-type-index) * (100% + 4px)));
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle::before {
  width: calc((100% - 28px) / 5);
  background: #3149C8;
  transform: translateX(calc(var(--pricing-level-index) * (100% + 4px)));
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn {
  position: relative !important;
  z-index: 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 180ms ease, opacity 180ms ease !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:focus-visible {
  background: transparent !important;
  color: #1C1C2E !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn {
  min-height: 40px !important;
  padding: 0 12px !important;
  color: rgba(253, 240, 213, 0.76) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:focus-visible {
  background: transparent !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-level-rail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, auto) minmax(180px, 1fr);
  align-items: center;
  gap: 12px;
  max-height: 86px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid rgba(253, 240, 213, 0.12);
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 260ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island[data-pricing-mode="birebir"] .pricing-level-rail {
  max-height: 0;
  padding-top: 0;
  border-top-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.pricing-card-schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto var(--space-4);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(28, 28, 46, 0.06);
  color: var(--pricing-ink, var(--color-ink));
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(253, 240, 213, 0.16) !important;
  background: rgba(253, 240, 213, 0.08) !important;
  color: rgba(253, 240, 213, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback::before {
  background: #6E82FF !important;
  box-shadow: 0 0 0 5px rgba(110, 130, 255, 0.16) !important;
}

html[data-i18n-title="meta.pricing.title"] [data-tabpanel="grup"] {
  padding-top: clamp(8px, 2vw, 16px);
}

html[data-i18n-title="meta.pricing.title"] [data-tabpanel="grup"] > .tabsubpanel[hidden],
html[data-i18n-title="meta.pricing.title"] .tabpanel[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-level-rail {
    grid-template-columns: 1fr;
    max-height: 150px;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle {
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn {
    padding-inline: 6px !important;
  }
}

/* Pricing page restrained palette: navy, mist, ice treatment, steel highlights. */
html[data-i18n-title="meta.pricing.title"] {
  --pricing-ink: #1C1C2E;
  --pricing-cream: #E8EDF2;
  --pricing-ice: #E8EDF2;
  --pricing-highlight: #669BBC;
}

html[data-i18n-title="meta.pricing.title"] .pricing-plan-shell,
html[data-i18n-title="meta.pricing.title"] .pricing-cta-section,
html[data-i18n-title="meta.pricing.title"] #courses {
  background: var(--pricing-ice) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-plan-header .section-label,
html[data-i18n-title="meta.pricing.title"] .section-label,
html[data-i18n-title="meta.pricing.title"] .pricing-plan-header .section-title,
html[data-i18n-title="meta.pricing.title"] .pricing-plan-header .section-desc {
  color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] #courses .section-label,
html[data-i18n-title="meta.pricing.title"] #courses .section-title,
html[data-i18n-title="meta.pricing.title"] #courses .section-desc {
  color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-control-island {
  border-color: rgba(232, 237, 242, 0.18) !important;
  background: var(--pricing-ink) !important;
  box-shadow:
    0 22px 48px rgba(28, 28, 46, 0.16),
    inset 0 1px 0 rgba(232, 237, 242, 0.1) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island::before {
  background: linear-gradient(90deg, rgba(232, 237, 242, 0.1), transparent 34%, rgba(102, 155, 188, 0.14)) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-kicker,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner strong,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p {
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-kicker,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback {
  border-color: rgba(232, 237, 242, 0.18) !important;
  background: rgba(232, 237, 242, 0.1) !important;
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle::before {
  background: var(--pricing-highlight) !important;
  box-shadow: 0 12px 24px rgba(102, 155, 188, 0.26) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn {
  color: rgba(232, 237, 242, 0.76) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:focus-visible,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:focus-visible {
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback::before {
  background: var(--pricing-highlight) !important;
  box-shadow: 0 0 0 5px rgba(102, 155, 188, 0.18) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card,
html[data-i18n-title="meta.pricing.title"] .course-card,
html[data-i18n-title="meta.pricing.title"] .pricing-reference-card {
  border-color: rgba(28, 28, 46, 0.12) !important;
  background: var(--pricing-cream) !important;
  color: var(--pricing-ink) !important;
  box-shadow: 0 18px 38px rgba(28, 28, 46, 0.08) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured {
  border-color: var(--pricing-highlight) !important;
  background: var(--pricing-cream) !important;
  box-shadow: 0 22px 46px rgba(102, 155, 188, 0.12) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured::before,
html[data-i18n-title="meta.pricing.title"] .pricing-card.featured::before {
  background: var(--pricing-highlight) !important;
  color: var(--pricing-cream) !important;
  border: 1px solid rgba(232, 237, 242, 0.34) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .tag,
html[data-i18n-title="meta.pricing.title"] .price-card .hours,
html[data-i18n-title="meta.pricing.title"] .price-card .meta,
html[data-i18n-title="meta.pricing.title"] .price-card .price-big,
html[data-i18n-title="meta.pricing.title"] .price-card .price-big span,
html[data-i18n-title="meta.pricing.title"] .price-card .price-big .price-unit,
html[data-i18n-title="meta.pricing.title"] .price-card .price-sub,
html[data-i18n-title="meta.pricing.title"] .price-card .price-sub [data-ta-total],
html[data-i18n-title="meta.pricing.title"] .price-card.featured .price-big,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .price-big span,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .price-big .price-unit,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .price-sub {
  color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .meta,
html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly,
html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly [data-ta-monthly],
html[data-i18n-title="meta.pricing.title"] .price-card .price-big .price-unit {
  color: rgba(28, 28, 46, 0.58) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .tag,
html[data-i18n-title="meta.pricing.title"] .price-card .price-hour,
html[data-i18n-title="meta.pricing.title"] .badge-pair {
  border-color: rgba(28, 28, 46, 0.08) !important;
  background: rgba(232, 237, 242, 0.82) !important;
  color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] .trial-strip {
  border: 1px solid rgba(232, 237, 242, 0.18) !important;
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
  box-shadow: 0 18px 38px rgba(28, 28, 46, 0.14) !important;
}

html[data-i18n-title="meta.pricing.title"] .trial-strip-icon {
  background: rgba(102, 155, 188, 0.28) !important;
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] .trial-strip-title,
html[data-i18n-title="meta.pricing.title"] .trial-strip-sub {
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] .btn.btn-primary,
html[data-i18n-title="meta.pricing.title"] .trial-strip .btn,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .btn.btn-primary {
  border-color: var(--pricing-ink) !important;
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .btn.btn-primary:hover,
html[data-i18n-title="meta.pricing.title"] .btn.btn-primary:focus-visible,
html[data-i18n-title="meta.pricing.title"] .trial-strip .btn:hover,
html[data-i18n-title="meta.pricing.title"] .trial-strip .btn:focus-visible,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .btn.btn-primary:hover,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .btn.btn-primary:focus-visible {
  border-color: var(--pricing-ink) !important;
  background: var(--pricing-cream) !important;
  color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] .section-header .btn-outline,
html[data-i18n-title="meta.pricing.title"] a.btn-outline[href="#courses"],
html[data-i18n-title="meta.pricing.title"] .pricing-cta-section .btn-outline {
  border-color: var(--pricing-ink) !important;
  background: transparent !important;
  color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] .course-card-header,
html[data-i18n-title="meta.pricing.title"] .course-card-icon {
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
  border-color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] .course-card-body .course-pricing-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(28, 28, 46, 0.16) !important;
  border-radius: var(--radius-full) !important;
  background: var(--pricing-ice) !important;
  color: var(--pricing-ink) !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

html[data-i18n-title="meta.pricing.title"] .course-card-body .course-pricing-link:hover,
html[data-i18n-title="meta.pricing.title"] .course-card-body .course-pricing-link:focus-visible {
  border-color: var(--pricing-ink) !important;
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .course-card-header,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .course-card-header {
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
  border-color: var(--pricing-ink) !important;
}

html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .course-pricing-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(28, 28, 46, 0.16) !important;
  border-radius: var(--radius-full) !important;
  background: var(--pricing-ice) !important;
  color: var(--pricing-ink) !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .course-pricing-link:hover,
html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .course-pricing-link:focus-visible {
  border-color: var(--pricing-ink) !important;
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .btn.btn-outline {
  border-color: var(--pricing-ink) !important;
  background: transparent !important;
  color: var(--pricing-ink) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .btn.btn-outline:hover,
html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .btn.btn-outline:focus-visible,
html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .btn.btn-secondary,
html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .btn.btn-secondary:hover,
html[data-i18n-title="meta.pricing.title"] #courses .pricing-course-grid .btn.btn-secondary:focus-visible {
  border-color: var(--pricing-ink) !important;
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .filter-btn,
html[data-i18n-title="meta.pricing.title"] .filter-btn.active,
html[data-i18n-title="meta.pricing.title"] .filter-btn:hover,
html[data-i18n-title="meta.pricing.title"] .filter-btn:focus-visible {
  border-color: rgba(28, 28, 46, 0.18) !important;
  background: var(--pricing-ice) !important;
  color: var(--pricing-ink) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .filter-btn.active {
  background: var(--pricing-ink) !important;
  color: var(--pricing-cream) !important;
}

html[data-i18n-title="meta.pricing.title"] .course-card-body .card-title,
html[data-i18n-title="meta.pricing.title"] .course-card-body .card-desc,
html[data-i18n-title="meta.pricing.title"] .course-card-body p,
html[data-i18n-title="meta.pricing.title"] .course-card-level,
html[data-i18n-title="meta.pricing.title"] .pricing-vat-note,
html[data-i18n-title="meta.pricing.title"] .pricing-cta-section .section-title,
html[data-i18n-title="meta.pricing.title"] .pricing-cta-section .section-desc {
  color: var(--pricing-ink) !important;
}

/* Release v0.5.44: hard pricing-page palette guard.
   Keeps stale red theme rules from leaking into pricing controls/cards. */
body.pricing-page {
  --pricing-ink: #1C1C2E;
  --pricing-cream: #E8EDF2;
  --pricing-ice: #E8EDF2;
  --pricing-highlight: #669BBC;
}

body.pricing-page .pricing-control-island .pricing-toggle::before,
body.pricing-page .pricing-control-island .pricing-subtoggle::before,
body.pricing-page .pricing-control-island .pricing-level-feedback::before,
body.pricing-page .price-card.featured::before,
body.pricing-page .pricing-card.featured::before {
  background: var(--pricing-highlight) !important;
}

body.pricing-page .pricing-control-island .pricing-subtoggle-btn.active,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-toggle-btn.active,
body.pricing-page .pricing-control-island .pricing-toggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-toggle-btn:focus-visible {
  background: transparent !important;
  color: var(--pricing-cream) !important;
  box-shadow: none !important;
}

body.pricing-page .price-card,
body.pricing-page .price-card.featured {
  background: var(--pricing-cream) !important;
  color: var(--pricing-ink) !important;
}

body.pricing-page .price-card .price-big,
body.pricing-page .price-card .price-big span,
body.pricing-page .price-card .price-big .price-unit,
body.pricing-page .price-card .hours,
body.pricing-page .price-card .price-sub,
body.pricing-page .price-card .price-sub [data-ta-total],
body.pricing-page .price-card .price-hour,
body.pricing-page .price-card .pricing-card-schedule,
body.pricing-page .price-card.featured .price-big,
body.pricing-page .price-card.featured .price-big span,
body.pricing-page .price-card.featured .price-big .price-unit,
body.pricing-page .price-card.featured .hours,
body.pricing-page .price-card.featured .price-hour,
body.pricing-page .price-card.featured .pricing-card-schedule,
body.pricing-page .price-card.featured .price-sub {
  color: var(--pricing-ink) !important;
}

body.pricing-page .price-card.featured .tag,
body.pricing-page .price-card.featured .price-hour,
body.pricing-page .price-card.featured .pricing-card-schedule {
  background: rgba(28, 28, 46, 0.06) !important;
}

body.pricing-page .price-card .tag,
body.pricing-page .price-card.featured .tag {
  color: var(--pricing-ink) !important;
}

body.pricing-page .price-card .price-big.price-monthly,
body.pricing-page .price-card .price-big.price-monthly [data-ta-monthly],
body.pricing-page .price-card .price-big .price-unit {
  color: rgba(28, 28, 46, 0.58) !important;
}

/* Release v0.5.49 QA: language picker, pricing highlight, and footer hover polish. */
.lang-dropdown-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 62px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  gap: 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232, 237, 242, 0.32) !important;
  background: linear-gradient(135deg, rgba(232, 237, 242, 0.16), rgba(232, 237, 242, 0.06)) !important;
  color: rgba(247, 249, 252, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(7, 7, 12, 0.12) !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

.lang-dropdown-toggle:hover,
.lang-dropdown-toggle:focus-visible,
.lang-dropdown-toggle[aria-expanded="true"] {
  border-color: rgba(139, 183, 210, 0.62) !important;
  background: linear-gradient(135deg, rgba(139, 183, 210, 0.24), rgba(232, 237, 242, 0.09)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px rgba(7, 7, 12, 0.18), 0 0 0 3px rgba(102, 155, 188, 0.12) !important;
}

.lang-current {
  font-size: 0.78rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.lang-chevron {
  width: 11px !important;
  height: 11px !important;
  opacity: 0.86 !important;
}

.lang-dropdown-menu {
  min-width: 148px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  border-color: rgba(28, 28, 46, 0.12) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 44px rgba(7, 7, 12, 0.18) !important;
}

.lang-dropdown-menu li {
  border-radius: 11px !important;
  padding: 9px 11px !important;
}

.lang-dropdown-menu li:hover,
.lang-dropdown-menu li.active {
  background: rgba(102, 155, 188, 0.1) !important;
  color: var(--ta-violet) !important;
}

[data-theme="dark"] .lang-dropdown-toggle {
  border-color: rgba(232, 237, 242, 0.24) !important;
  background: linear-gradient(135deg, rgba(232, 237, 242, 0.12), rgba(232, 237, 242, 0.04)) !important;
  color: #F7F9FC !important;
}

[data-theme="dark"] .lang-dropdown-menu {
  background: rgba(12, 19, 32, 0.97) !important;
  border-color: rgba(232, 237, 242, 0.18) !important;
}

body.pricing-page .pricing-control-island {
  --pricing-highlight: #669BBC !important;
}

body.pricing-page .pricing-control-island .pricing-toggle-btn.active,
body.pricing-page .pricing-control-island .pricing-toggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-toggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn.active,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:focus-visible {
  color: #FFFFFF !important;
}

.footer-ta-band {
  pointer-events: auto !important;
  cursor: default !important;
}

.footer-ta-stage {
  pointer-events: auto !important;
}

.footer-ta-text {
  background: linear-gradient(92deg, rgba(232, 237, 242, .86), rgba(253, 240, 213, .9) 44%, rgba(102, 155, 188, .7) 72%, rgba(137, 52, 105, .58)) !important;
  background-size: 145% 100% !important;
  filter: drop-shadow(0 0 0 rgba(139, 183, 210, 0)) !important;
  transition: opacity 220ms ease, filter 220ms ease, background-position 220ms ease !important;
}

.footer-ta-band:hover .footer-ta-text,
.footer-ta-band:focus-within .footer-ta-text {
  opacity: max(var(--footer-opacity, .12), .22) !important;
  background-position: 62% 50% !important;
  filter: drop-shadow(0 0 26px rgba(139, 183, 210, .26)) drop-shadow(0 0 44px rgba(137, 52, 105, .16)) !important;
}

.footer-ta-band .footer-ta-text {
  opacity: max(var(--footer-opacity, .16), .18) !important;
}

.footer-ta-band:hover .footer-ta-text,
.footer-ta-band:focus-within .footer-ta-text {
  opacity: max(var(--footer-opacity, .18), .34) !important;
}

.lang-switch .lang-dropdown-menu {
  display: none !important;
}

.lang-switch-toggle {
  width: 112px !important;
  min-width: 112px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 3px 4px 3px 9px !important;
  gap: 7px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.lang-switch-icon {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  color: rgba(232, 237, 242, 0.9) !important;
  flex: 0 0 auto !important;
  transition: color 180ms ease, transform 220ms ease !important;
}

.lang-switch-toggle:hover .lang-switch-icon,
.lang-switch-toggle:focus-visible .lang-switch-icon {
  color: #FFFFFF !important;
  transform: rotate(-8deg) scale(1.04) !important;
}

.lang-switch-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  width: 72px !important;
  height: 28px !important;
  padding: 2px !important;
  border-radius: 999px !important;
  background: rgba(7, 7, 12, 0.22) !important;
  box-shadow: inset 0 1px 2px rgba(7, 7, 12, 0.26) !important;
}

.lang-switch-label {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  height: 24px !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: rgba(232, 237, 242, 0.68) !important;
  transition: color 180ms ease !important;
}

.lang-switch-thumb {
  position: absolute !important;
  z-index: 1 !important;
  top: 2px !important;
  left: 2px !important;
  width: calc(50% - 2px) !important;
  height: 24px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98), rgba(232, 237, 242, 0.94) 52%, rgba(218, 226, 234, 0.9)) !important;
  box-shadow: 0 6px 14px rgba(7, 7, 12, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  transform: translateX(0) !important;
  transition: transform 260ms cubic-bezier(.2, .9, .2, 1), background 180ms ease !important;
}

.lang-switch[data-current-lang="tr"] .lang-switch-thumb,
.lang-switch-toggle[data-current-lang="tr"] .lang-switch-thumb {
  transform: translateX(34px) !important;
  background:
    radial-gradient(circle at 64% 30%, rgba(255, 255, 255, 0.98), rgba(139, 183, 210, 0.88) 45%, rgba(102, 155, 188, 0.94)) !important;
}

.lang-switch[data-current-lang="en"] [data-switch-lang="en"],
.lang-switch[data-current-lang="tr"] [data-switch-lang="tr"] {
  color: var(--ta-ink) !important;
}

.lang-switch[data-current-lang="tr"] [data-switch-lang="tr"] {
  color: #FFFFFF !important;
}

/* v0.6.1 footer legal row polish: readable, centered legal copy on every width. */
.footer-bottom-new {
  padding-block: clamp(18px, 2.2vw, 30px) !important;
}

.footer-bottom-new .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-align: center !important;
}

.footer-bottom-new p,
.footer-bottom-new .footer-tagline-new,
.footer-bottom-new .footer-legal-notice {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.footer-bottom-new .footer-legal-notice {
  max-width: 1040px !important;
  color: rgba(232, 237, 242, 0.66) !important;
  font-size: clamp(0.74rem, 0.78vw, 0.82rem) !important;
  line-height: 1.6 !important;
  text-wrap: pretty !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 640px) {
  .footer-bottom-new {
    padding-inline: 0 !important;
    padding-top: 18px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-bottom-new .container {
    width: min(100% - 32px, 380px) !important;
    gap: 10px !important;
  }

  .footer-bottom-new p,
  .footer-bottom-new .footer-tagline-new,
  .footer-bottom-new .footer-legal-notice {
    width: 100% !important;
    max-width: 38ch !important;
  }

  .footer-bottom-new .footer-legal-notice {
    font-size: 0.74rem !important;
    line-height: 1.58 !important;
  }
}

/* v0.6.0 roll-up: numbered flow markers use rounded squares. */
#how-it-works .step-number,
.steps .step-number,
[data-theme="dark"] #how-it-works .step-number {
  border-radius: 18px !important;
}

.steps-showcase .step-number {
  border-radius: 14px !important;
}

/* Footer legal row correction: keep copyright, notice, and tagline readable after the legal notice was added. */
.footer-bottom-new .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: start !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: start !important;
}

.footer-bottom-new p,
.footer-tagline-new,
.footer-legal-notice {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  text-align: start !important;
}

.footer-bottom-new .footer-tagline-new {
  justify-self: start !important;
  margin-inline: 0 auto !important;
  text-align: start !important;
}

.footer-bottom-new .container > p,
.footer-bottom-new .container > .footer-tagline-new {
  justify-self: stretch !important;
  margin: 0 !important;
  text-align: left !important;
}

.footer-legal-notice {
  display: none !important;
}

[data-theme="dark"] .counter-grid--honest .counter-value {
  color: #FFFFFF !important;
  background: rgba(232, 237, 242, 0.14) !important;
  border-color: rgba(232, 237, 242, 0.28) !important;
}

[data-theme="dark"] .card-icon,
[data-theme="dark"] .value-card .card-icon,
[data-theme="dark"] .features-grid .card-icon,
[data-theme="dark"] .about-card .card-icon {
  color: rgba(255, 255, 255, 0.94) !important;
}

[data-theme="dark"] .card-icon svg,
[data-theme="dark"] .value-card .card-icon svg,
[data-theme="dark"] .features-grid .card-icon svg,
[data-theme="dark"] .about-card .card-icon svg {
  stroke: currentColor !important;
}

/* Release v0.5.51 final QA: reviewer-reported dark-mode and weight fixes. */
.hero h1 {
  font-weight: 700 !important;
}

[data-theme="dark"] .counter-grid--honest .counter-value {
  color: #FFFFFF !important;
  background: rgba(232, 237, 242, 0.14) !important;
  border-color: rgba(232, 237, 242, 0.28) !important;
}

[data-theme="dark"] .tagline-banner {
  background:
    radial-gradient(680px 220px at 50% 0%, rgba(102, 155, 188, 0.18), transparent 70%),
    linear-gradient(180deg, #101B2D 0%, #0F1728 100%) !important;
  border-top: 1px solid rgba(232, 237, 242, 0.08) !important;
  border-bottom: 1px solid rgba(232, 237, 242, 0.08) !important;
}

[data-theme="dark"] .tagline-banner::before {
  background: none !important;
}

html[data-theme="dark"][data-i18n-title="meta.about.title"] .diff-card > div:first-child,
html[data-theme="dark"][data-i18n-title="meta.about.title"] .diff-card .card-icon,
html[data-theme="dark"][data-i18n-title="meta.about.title"] .value-icon {
  background: rgba(232, 237, 242, 0.12) !important;
  color: #FDF0D5 !important;
}

html[data-theme="dark"][data-i18n-title="meta.about.title"] .diff-card > div:first-child svg,
html[data-theme="dark"][data-i18n-title="meta.about.title"] .diff-card .card-icon svg,
html[data-theme="dark"][data-i18n-title="meta.about.title"] .value-icon svg {
  color: #FDF0D5 !important;
  stroke: currentColor !important;
}

/* Release v0.5.51: targeted localisation QA visual fixes. */
[data-theme="dark"] #how-it-works {
  background: #101B2D !important;
}

[data-theme="dark"] #how-it-works .steps {
  isolation: isolate;
}

[data-theme="dark"] #how-it-works .steps-connector {
  top: 66px !important;
  left: calc(100% / 6 + 86px) !important;
  right: calc(100% / 6 + 86px) !important;
  height: 1px !important;
  background: rgba(139, 183, 210, 0.22) !important;
  z-index: 0 !important;
}

[data-theme="dark"] #how-it-works .steps-connector::after {
  background: linear-gradient(90deg, rgba(139, 183, 210, 0), rgba(139, 183, 210, 0.72), rgba(139, 183, 210, 0)) !important;
}

[data-theme="dark"] #how-it-works .step,
[data-theme="dark"] #how-it-works .step-item {
  background:
    linear-gradient(180deg, rgba(23, 36, 58, 0.96), rgba(18, 30, 49, 0.98)) !important;
  border: 1px solid rgba(232, 237, 242, 0.12) !important;
  border-radius: 8px !important;
  padding: clamp(28px, 3vw, 38px) clamp(22px, 3vw, 34px) !important;
  box-shadow: 0 24px 54px rgba(7, 7, 12, 0.22) !important;
  z-index: 1 !important;
}

[data-theme="dark"] #how-it-works .step-number {
  background: #222C3A !important;
  border-color: #669BBC !important;
  border-radius: 18px !important;
  color: #FDF0D5 !important;
  box-shadow:
    0 12px 28px rgba(7, 7, 12, 0.22),
    0 0 0 5px rgba(102, 155, 188, 0.12) !important;
}

[data-theme="dark"] #how-it-works .btn-step-cta-global {
  background: transparent !important;
  border-color: rgba(232, 237, 242, 0.38) !important;
  color: #F7F9FC !important;
  box-shadow: none !important;
}

[data-theme="dark"] #how-it-works .btn-step-cta-global:hover,
[data-theme="dark"] #how-it-works .btn-step-cta-global:focus-visible {
  background: rgba(232, 237, 242, 0.1) !important;
  border-color: rgba(253, 240, 213, 0.62) !important;
}

@media (max-width: 960px) {
  [data-theme="dark"] #how-it-works .steps-connector {
    display: none !important;
  }
}

#how-it-works .step-number,
.steps .step-number {
  border-radius: 18px !important;
}

.steps-showcase .step-number {
  border-radius: 14px !important;
}

/* Footer reset: remove the experimental oversized wordmark band and keep the classic footer brand block. */
.footer-ta-band {
  display: none !important;
}

[data-theme="dark"] .lang-switch-track {
  background: rgba(232, 237, 242, 0.1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch-icon,
  .lang-switch-label,
  .lang-switch-thumb {
    transition: none !important;
  }
}

/* Final QA overrides for v0.5.49: readability, nav/logo colour, and footer presence. */
.navbar-logo .ta-lockup-logo-nav {
  filter: brightness(0) invert(1) !important;
}

.footer-ta-band {
  min-height: clamp(190px, 24vw, 310px) !important;
}

.footer-ta-stage {
  min-height: clamp(150px, 20vw, 250px) !important;
}

.footer-ta-text {
  opacity: max(var(--footer-opacity, .18), .2) !important;
  -webkit-text-stroke: 1px rgba(232, 237, 242, 0.14) !important;
  text-shadow: 0 18px 70px rgba(102, 155, 188, 0.14) !important;
}

.footer-ta-band:hover .footer-ta-text,
.footer-ta-band:focus-within .footer-ta-text {
  opacity: max(var(--footer-opacity, .22), .38) !important;
}

html[data-i18n-title="meta.pricing.title"] #courses .section-label,
html[data-i18n-title="meta.pricing.title"] #courses .section-title,
html[data-i18n-title="meta.pricing.title"] #courses .section-desc {
  color: var(--pricing-ink) !important;
  text-shadow: none !important;
}

html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .section-label,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .section-title,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .section-desc {
  color: var(--pricing-ink) !important;
}

html[data-theme="dark"][data-i18n-title="meta.howItWorks.title"] .section.bg-white .card li,
html[data-theme="dark"][data-i18n-title="meta.howItWorks.title"] .section.bg-white .card li span {
  color: rgba(247, 249, 252, 0.9) !important;
}

html[data-theme="dark"][data-i18n-title="meta.howItWorks.title"] .section.bg-white .card .card-desc {
  color: rgba(232, 237, 242, 0.86) !important;
}

html[data-theme="dark"][data-i18n-title="meta.howItWorks.title"] .section.bg-white .section-title,
html[data-theme="dark"][data-i18n-title="meta.howItWorks.title"] .section.bg-white .section-desc {
  color: #F7F9FC !important;
}

html[data-theme="dark"][data-i18n-title="meta.howItWorks.title"] .section.bg-white .section-label {
  color: rgba(232, 237, 242, 0.92) !important;
}

html[data-i18n-title="meta.about.title"] .diff-card {
  border: 1px solid rgba(28, 28, 46, 0.12) !important;
  border-top: 0 !important;
  box-shadow: 0 14px 34px rgba(28, 28, 46, 0.08) !important;
}

html[data-i18n-title="meta.about.title"] .diff-card > div:first-child {
  background: rgba(102, 155, 188, 0.14) !important;
  color: #0F3A5A !important;
}

html[data-theme="dark"][data-i18n-title="meta.about.title"] .diff-card {
  background: #17243A !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
}

/* Footer restore: keep the large Talk Arabic wordmark visible and readable. */
.footer-ta-band {
  min-height: clamp(170px, 21vw, 270px) !important;
  cursor: default !important;
  background:
    radial-gradient(720px 260px at 82% 42%, rgba(102, 155, 188, 0.18), transparent 66%),
    linear-gradient(180deg, #101729 0%, #0B1020 62%, #07070C 100%) !important;
}

.footer-ta-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(150px, 19vw, 240px) !important;
  padding: 0 var(--space-4) !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.footer-ta-stage::before,
.footer-ta-stage::after {
  display: none !important;
}

.footer-ta-text {
  display: block !important;
  width: 100% !important;
  max-width: 1500px !important;
  font-family: var(--font-display, var(--font-latin, 'Poppins', sans-serif)) !important;
  font-size: clamp(72px, 15vw, 220px) !important;
  font-weight: 900 !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  color: rgba(253, 240, 213, 0.34) !important;
  -webkit-text-fill-color: rgba(253, 240, 213, 0.34) !important;
  -webkit-text-stroke: 1px rgba(253, 240, 213, 0.18) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 0 34px rgba(102, 155, 188, 0.18) !important;
  transform: none !important;
}

.footer-ta-band:hover .footer-ta-text,
.footer-ta-band:focus-within .footer-ta-text {
  color: rgba(253, 240, 213, 0.66) !important;
  -webkit-text-fill-color: rgba(253, 240, 213, 0.66) !important;
  text-shadow:
    0 0 26px rgba(102, 155, 188, 0.28),
    0 0 54px rgba(137, 52, 105, 0.18) !important;
}

/* Language switch refinement: compact, calmer, and less crowded. */
.lang-switch-toggle {
  width: 94px !important;
  min-width: 94px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px 4px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232, 237, 242, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(232, 237, 242, 0.12), rgba(232, 237, 242, 0.05)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(7, 7, 12, 0.12) !important;
}

.lang-switch-toggle:hover,
.lang-switch-toggle:focus-visible {
  border-color: rgba(232, 237, 242, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(232, 237, 242, 0.15), rgba(102, 155, 188, 0.09)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 26px rgba(7, 7, 12, 0.16),
    0 0 0 2px rgba(102, 155, 188, 0.08) !important;
}

.lang-switch-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: rgba(232, 237, 242, 0.12) !important;
  color: rgba(253, 240, 213, 0.9) !important;
  transform: none !important;
}

.lang-switch-toggle:hover .lang-switch-icon,
.lang-switch-toggle:focus-visible .lang-switch-icon {
  color: #FDF0D5 !important;
  transform: none !important;
}

.lang-switch-track {
  width: 58px !important;
  height: 26px !important;
  padding: 2px !important;
  background: rgba(7, 7, 12, 0.26) !important;
  box-shadow:
    inset 0 1px 2px rgba(7, 7, 12, 0.28),
    inset 0 0 0 1px rgba(232, 237, 242, 0.08) !important;
}

.lang-switch-label {
  height: 22px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: rgba(232, 237, 242, 0.56) !important;
}

.lang-switch-thumb {
  top: 2px !important;
  left: 2px !important;
  width: 27px !important;
  height: 22px !important;
  background: linear-gradient(135deg, #FDF0D5, #E8EDF2) !important;
  box-shadow:
    0 5px 12px rgba(7, 7, 12, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.lang-switch[data-current-lang="tr"] .lang-switch-thumb,
.lang-switch-toggle[data-current-lang="tr"] .lang-switch-thumb {
  transform: translateX(27px) !important;
  background: linear-gradient(135deg, #8BB7D2, #669BBC) !important;
  box-shadow:
    0 5px 12px rgba(7, 7, 12, 0.22),
    0 0 14px rgba(102, 155, 188, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.lang-switch[data-current-lang="en"] [data-switch-lang="en"] {
  color: #1C1C2E !important;
}

.lang-switch[data-current-lang="tr"] [data-switch-lang="tr"] {
  color: #FFFFFF !important;
}

/* Pricing card hierarchy refresh: one clear price story across group and one-to-one. */
html[data-i18n-title="meta.pricing.title"] .price-card {
  padding: clamp(24px, 2.4vw, 32px) !important;
  min-height: 100% !important;
  gap: 0 !important;
  text-align: center !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .tag {
  align-self: center !important;
  min-height: 28px !important;
  margin: 0 0 18px !important;
  padding: 7px 14px !important;
  border: 1px solid rgba(28, 28, 46, 0.08) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  color: rgba(28, 28, 46, 0.72) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .hours {
  margin: 0 !important;
  color: var(--pricing-ink) !important;
  font-size: clamp(1.55rem, 2vw, 1.95rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .meta,
html[data-i18n-title="meta.pricing.title"] .pricing-card-schedule {
  color: rgba(28, 28, 46, 0.62) !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .meta {
  margin: 10px 0 0 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-card-schedule {
  width: auto !important;
  min-height: 0 !important;
  margin: 8px auto 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-big {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--pricing-ink) !important;
  font-size: clamp(2.05rem, 2.65vw, 2.7rem) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly {
  order: 5 !important;
  margin-top: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(28, 28, 46, 0.08) !important;
  color: rgba(28, 28, 46, 0.64) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly [data-ta-monthly] {
  color: rgba(28, 28, 46, 0.64) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-big .price-unit {
  color: rgba(28, 28, 46, 0.54) !important;
  font-size: 0.84em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  order: 4 !important;
  width: 100% !important;
  margin: 20px 0 0 !important;
  color: rgba(28, 28, 46, 0.54) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub [data-ta-total] {
  margin-top: 6px !important;
  color: var(--pricing-ink) !important;
  font-size: clamp(2.05rem, 2.65vw, 2.7rem) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-hour {
  order: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 12px 0 22px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(28, 28, 46, 0.08) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(28, 28, 46, 0.045) !important;
  color: rgba(28, 28, 46, 0.7) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card:not(:has(.price-monthly)) .price-big {
  margin-top: 24px !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card:not(:has(.price-monthly)) .price-hour {
  margin-top: 14px !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .badge-pair {
  order: 7 !important;
  margin: -8px 0 14px !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card > .btn,
html[data-i18n-title="meta.pricing.title"] .price-card > a.btn {
  order: 8 !important;
  min-height: 42px !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured {
  outline: 1px solid rgba(102, 155, 188, 0.72) !important;
  outline-offset: -1px !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .price-card {
    padding: 24px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .price-card .price-sub [data-ta-total],
  html[data-i18n-title="meta.pricing.title"] .price-card .price-big {
    font-size: clamp(2rem, 9vw, 2.45rem) !important;
  }
}

/* Pricing card zone design: coloured identity, focused total, quiet supporting facts. */
html[data-i18n-title="meta.pricing.title"] .price-card {
  --plan-accent: var(--pricing-highlight, #669BBC);
  --plan-accent-soft: rgba(102, 155, 188, 0.16);
  --plan-accent-deep: #2F5E78;
  --plan-accent-wash: rgba(102, 155, 188, 0.08);
  --plan-divider: rgba(28, 28, 46, 0.1);
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(232, 237, 242, 0.9)) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card[data-ta-card*="yogun"],
html[data-i18n-title="meta.pricing.title"] .price-card .badge-pair {
  --plan-accent: var(--ta-berry, #893469);
  --plan-accent-soft: rgba(137, 52, 105, 0.14);
  --plan-accent-deep: #5B2430;
  --plan-accent-wash: rgba(137, 52, 105, 0.07);
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured {
  --plan-accent: var(--pricing-highlight, #669BBC);
  --plan-accent-soft: rgba(102, 155, 188, 0.22);
  --plan-accent-deep: #2F5E78;
  --plan-accent-wash: rgba(102, 155, 188, 0.12);
  border-color: rgba(102, 155, 188, 0.74) !important;
  box-shadow: 0 24px 54px rgba(102, 155, 188, 0.18) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .tag {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, var(--plan-accent), var(--plan-accent-deep)) !important;
  color: #FFFFFF !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .hours,
html[data-i18n-title="meta.pricing.title"] .price-card .meta,
html[data-i18n-title="meta.pricing.title"] .pricing-card-schedule {
  margin-inline: clamp(22px, 2.2vw, 30px) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .hours {
  margin-top: 24px !important;
  font-size: clamp(1.7rem, 2.2vw, 2.05rem) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .meta {
  margin-top: 8px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-card-schedule {
  order: 7 !important;
  display: flex !important;
  width: auto !important;
  min-height: 36px !important;
  margin-top: 18px !important;
  margin-bottom: 14px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(28, 28, 46, 0.08) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  color: rgba(28, 28, 46, 0.68) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub,
html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly,
html[data-i18n-title="meta.pricing.title"] .price-card .price-hour,
html[data-i18n-title="meta.pricing.title"] .price-card > .price-big:not(.price-monthly) {
  margin-inline: clamp(22px, 2.2vw, 30px) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub,
html[data-i18n-title="meta.pricing.title"] .price-card > .price-big:not(.price-monthly) {
  padding: 22px 14px 20px !important;
  border-block: 1px solid var(--plan-divider) !important;
  background:
    radial-gradient(circle at 50% 8%, var(--plan-accent-soft), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), var(--plan-accent-wash)) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub {
  margin-top: 24px !important;
  border-radius: 8px !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub [data-ta-total],
html[data-i18n-title="meta.pricing.title"] .price-card > .price-big:not(.price-monthly) [data-ta-total] {
  color: var(--ta-ink, #1C1C2E) !important;
  font-size: clamp(2.35rem, 3vw, 3rem) !important;
  letter-spacing: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly {
  margin-top: 12px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: rgba(28, 28, 46, 0.66) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-hour {
  width: auto !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(28, 28, 46, 0.1) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .badge-pair {
  margin-inline: clamp(22px, 2.2vw, 30px) !important;
  margin-top: 12px !important;
  background: rgba(137, 52, 105, 0.08) !important;
  border-color: rgba(137, 52, 105, 0.22) !important;
  color: var(--ta-berry, #893469) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card > .btn,
html[data-i18n-title="meta.pricing.title"] .price-card > a.btn {
  width: auto !important;
  margin: auto clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px) !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .price-card .tag {
    min-height: 44px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .price-card .price-sub [data-ta-total],
  html[data-i18n-title="meta.pricing.title"] .price-card > .price-big:not(.price-monthly) [data-ta-total] {
    font-size: clamp(2.2rem, 10vw, 2.75rem) !important;
  }
}

/* Pricing featured-card QA: keep the colour strip and badge intact. */
html[data-i18n-title="meta.pricing.title"] .price-card,
body.pricing-page .price-card {
  overflow: visible !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .tag,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .tag,
body.pricing-page .price-card .tag,
body.pricing-page .price-card.featured .tag {
  border-radius: 7px 7px 0 0 !important;
  background: linear-gradient(90deg, var(--plan-accent), var(--plan-accent-deep)) !important;
  color: #FFFFFF !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured::before,
html[data-i18n-title="meta.pricing.title"] .pricing-card.featured::before,
body.pricing-page .price-card.featured::before,
body.pricing-page .pricing-card.featured::before {
  top: -14px !important;
  right: 20px !important;
  left: auto !important;
  transform: none !important;
  z-index: 3 !important;
  background: var(--plan-accent, #669BBC) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 10px 20px rgba(28, 28, 46, 0.12) !important;
}

/* Pricing rescue polish: lighter hierarchy after visual QA. */
html[data-i18n-title="meta.pricing.title"] .price-card,
body.pricing-page .price-card {
  overflow: visible !important;
  padding: clamp(24px, 2.2vw, 30px) !important;
  border-top: 7px solid var(--plan-accent, #669BBC) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #F8FBFD 0%, #EEF3F7 100%) !important;
  box-shadow: 0 18px 34px rgba(28, 28, 46, 0.07) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured,
body.pricing-page .price-card.featured {
  border-top-color: var(--plan-accent, #669BBC) !important;
  border-color: rgba(102, 155, 188, 0.82) !important;
  box-shadow: 0 22px 42px rgba(102, 155, 188, 0.16) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .tag,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .tag,
body.pricing-page .price-card .tag,
body.pricing-page .price-card.featured .tag {
  align-self: center !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(28, 28, 46, 0.1) !important;
  border-radius: var(--radius-full) !important;
  background: var(--plan-accent-wash, rgba(102, 155, 188, 0.08)) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .hours,
body.pricing-page .price-card .hours {
  margin: 0 !important;
  font-size: clamp(1.8rem, 2.4vw, 2.25rem) !important;
  line-height: 1.08 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .meta,
body.pricing-page .price-card .meta {
  margin: 10px 0 0 !important;
  color: rgba(28, 28, 46, 0.64) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub,
html[data-i18n-title="meta.pricing.title"] .price-card > .price-big:not(.price-monthly),
body.pricing-page .price-card .price-sub,
body.pricing-page .price-card > .price-big:not(.price-monthly) {
  width: 100% !important;
  margin: 22px 0 0 !important;
  padding: 19px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(28, 28, 46, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub [data-ta-total],
html[data-i18n-title="meta.pricing.title"] .price-card > .price-big:not(.price-monthly) [data-ta-total],
body.pricing-page .price-card .price-sub [data-ta-total],
body.pricing-page .price-card > .price-big:not(.price-monthly) [data-ta-total] {
  font-size: clamp(2.25rem, 3vw, 2.9rem) !important;
  color: var(--ta-ink, #1C1C2E) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly,
body.pricing-page .price-card .price-big.price-monthly {
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(28, 28, 46, 0.62) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-hour,
body.pricing-page .price-card .price-hour {
  width: 100% !important;
  min-height: 32px !important;
  margin: 12px 0 0 !important;
  padding: 7px 12px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(28, 28, 46, 0.1) !important;
  color: rgba(28, 28, 46, 0.72) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-card-schedule,
body.pricing-page .pricing-card-schedule {
  order: 7 !important;
  width: 100% !important;
  min-height: 32px !important;
  margin: 10px 0 0 !important;
  padding: 7px 12px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(28, 28, 46, 0.08) !important;
  color: rgba(28, 28, 46, 0.72) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .badge-pair,
body.pricing-page .price-card .badge-pair {
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 8px 10px !important;
  background: rgba(137, 52, 105, 0.075) !important;
  border-color: rgba(137, 52, 105, 0.2) !important;
  color: var(--ta-berry, #893469) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .pricing-discount-note,
body.pricing-page .price-card .pricing-discount-note {
  width: 100% !important;
  min-height: 34px !important;
  margin: 10px 0 0 !important;
  padding: 7px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(47, 94, 120, 0.22) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(102, 155, 188, 0.12) !important;
  color: var(--plan-accent-deep, #2F5E78) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card > .btn,
html[data-i18n-title="meta.pricing.title"] .price-card > a.btn,
body.pricing-page .price-card > .btn,
body.pricing-page .price-card > a.btn {
  width: 100% !important;
  margin: 18px 0 0 !important;
  min-height: 44px !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured::before,
html[data-i18n-title="meta.pricing.title"] .pricing-card.featured::before,
body.pricing-page .price-card.featured::before,
body.pricing-page .pricing-card.featured::before {
  top: -17px !important;
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  background: var(--pricing-highlight, #669BBC) !important;
  color: #FFFFFF !important;
  z-index: 4 !important;
}

.pricing-vat-note {
  max-width: 54ch !important;
  margin-inline: auto !important;
  text-align: center !important;
  line-height: 1.6 !important;
}

/* Pricing CTA row alignment for one-to-one cards with optional tempo notes. */
html[data-i18n-title="meta.pricing.title"] #birebir .price-card:not(:has(.badge-pair)) .price-hour,
body.pricing-page #birebir .price-card:not(:has(.badge-pair)) .price-hour {
  margin-bottom: 60px !important;
}

html[data-i18n-title="meta.pricing.title"] #birebir .price-card .badge-pair,
body.pricing-page #birebir .price-card .badge-pair {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] #birebir .price-card:not(:has(.badge-pair)) .price-hour,
  body.pricing-page #birebir .price-card:not(:has(.badge-pair)) .price-hour {
    margin-bottom: 0 !important;
  }
}

/* Pricing birebir grid: center the final two cards on desktop. */
@media (min-width: 1024px) {
  html[data-i18n-title="meta.pricing.title"] #birebir .price-grid.grid-3,
  body.pricing-page #birebir .price-grid.grid-3 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html[data-i18n-title="meta.pricing.title"] #birebir .price-grid.grid-3 > .price-card,
  body.pricing-page #birebir .price-grid.grid-3 > .price-card {
    grid-column: span 2 !important;
  }

  html[data-i18n-title="meta.pricing.title"] #birebir .price-grid.grid-3 > .price-card:nth-of-type(4),
  body.pricing-page #birebir .price-grid.grid-3 > .price-card:nth-of-type(4) {
    grid-column: 2 / span 2 !important;
  }

  html[data-i18n-title="meta.pricing.title"] #birebir .price-grid.grid-3 > .price-card:nth-of-type(5),
  body.pricing-page #birebir .price-grid.grid-3 > .price-card:nth-of-type(5) {
    grid-column: 4 / span 2 !important;
  }
}


/* Pricing opening notice: subdued campaign banner. */
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner,
body.pricing-page .pricing-control-island .pricing-opening-banner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(232, 237, 242, 0.14) !important;
  border-left: 4px solid rgba(102, 155, 188, 0.76) !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, rgba(102, 155, 188, 0.16) 0%, rgba(232, 237, 242, 0.06) 42%, rgba(232, 237, 242, 0.035) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: var(--pricing-cream, #E8EDF2) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-kicker,
body.pricing-page .pricing-control-island .pricing-opening-kicker {
  padding: 7px 10px !important;
  border: 1px solid rgba(102, 155, 188, 0.34) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(102, 155, 188, 0.16) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p,
body.pricing-page .pricing-control-island .pricing-opening-banner p {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: rgba(232, 237, 242, 0.72) !important;
  font-size: 0.93rem !important;
  line-height: 1.36 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner strong,
body.pricing-page .pricing-control-island .pricing-opening-banner strong {
  display: block !important;
  margin: 0 0 3px !important;
  color: #FFFFFF !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p span,
body.pricing-page .pricing-control-island .pricing-opening-banner p span {
  display: block !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code,
body.pricing-page .pricing-control-island .pricing-opening-code {
  justify-self: end !important;
  min-width: 152px !important;
  padding: 9px 14px !important;
  display: grid !important;
  gap: 2px !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code span,
body.pricing-page .pricing-control-island .pricing-opening-code span {
  color: rgba(232, 237, 242, 0.72) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code strong,
body.pricing-page .pricing-control-island .pricing-opening-code strong {
  display: block !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: 1.28rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code small,
body.pricing-page .pricing-control-island .pricing-opening-code small {
  color: rgba(232, 237, 242, 0.84) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner,
  body.pricing-page .pricing-control-island .pricing-opening-banner {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    padding: 14px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-kicker,
  body.pricing-page .pricing-control-island .pricing-opening-kicker {
    justify-self: start !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code,
  body.pricing-page .pricing-control-island .pricing-opening-code {
    width: 100% !important;
    justify-self: stretch !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
  }
}

/* Pricing opening notice mobile trim. */
@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner,
  body.pricing-page .pricing-control-island .pricing-opening-banner {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 8px !important;
    padding: 12px 13px !important;
    text-align: left !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-kicker,
  body.pricing-page .pricing-control-island .pricing-opening-kicker {
    width: auto !important;
    max-width: none !important;
    justify-self: start !important;
    padding: 6px 9px !important;
    font-size: 0.64rem !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner p,
  body.pricing-page .pricing-control-island .pricing-opening-banner p {
    max-width: none !important;
    text-align: left !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-banner strong,
  body.pricing-page .pricing-control-island .pricing-opening-banner strong {
    margin-bottom: 2px !important;
    font-size: 0.92rem !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code,
  body.pricing-page .pricing-control-island .pricing-opening-code {
    min-width: 0 !important;
    padding: 8px 10px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code strong,
  body.pricing-page .pricing-control-island .pricing-opening-code strong {
    margin: 0 !important;
    font-size: 1rem !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-opening-code small,
  body.pricing-page .pricing-control-island .pricing-opening-code small {
    font-size: 0.68rem !important;
    text-align: right !important;
  }
}

/* Pricing promo strip: keep the campaign offer separate from the tab controls. */
html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
body.pricing-page .pricing-promo-strip {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px 18px !important;
  width: min(920px, 100%) !important;
  margin: 18px auto 34px !important;
  padding: 15px 18px !important;
  border: 1px solid rgba(137, 52, 105, 0.18) !important;
  border-left: 4px solid var(--ta-berry, #893469) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(137, 52, 105, 0.12) 0%, rgba(255, 255, 255, 0.76) 48%, rgba(102, 155, 188, 0.10) 100%) !important;
  box-shadow: 0 18px 42px rgba(28, 28, 46, 0.07) !important;
  color: var(--ta-ink, #1C1C2E) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-kicker,
body.pricing-page .pricing-promo-strip .pricing-opening-kicker {
  padding: 7px 11px !important;
  border: 1px solid rgba(137, 52, 105, 0.20) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(137, 52, 105, 0.10) !important;
  color: var(--ta-berry, #893469) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip p,
body.pricing-page .pricing-promo-strip p {
  margin: 0 !important;
  color: rgba(28, 28, 46, 0.70) !important;
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip p strong,
body.pricing-page .pricing-promo-strip p strong {
  display: block !important;
  margin: 0 0 2px !important;
  color: var(--ta-ink, #1C1C2E) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip p span,
body.pricing-page .pricing-promo-strip p span {
  display: block !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code,
body.pricing-page .pricing-promo-strip .pricing-opening-code {
  min-width: 158px !important;
  padding: 10px 14px !important;
  display: grid !important;
  gap: 2px !important;
  justify-self: end !important;
  text-align: center !important;
  border: 1px solid rgba(137, 52, 105, 0.22) !important;
  border-radius: 14px !important;
  background: var(--ta-berry, #893469) !important;
  box-shadow: 0 12px 24px rgba(137, 52, 105, 0.20) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code span,
body.pricing-page .pricing-promo-strip .pricing-opening-code span,
html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code small,
body.pricing-page .pricing-promo-strip .pricing-opening-code small {
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: var(--font-latin, 'Poppins', sans-serif) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code span,
body.pricing-page .pricing-promo-strip .pricing-opening-code span {
  font-size: 0.62rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code strong,
body.pricing-page .pricing-promo-strip .pricing-opening-code strong {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-family: var(--font-latin, 'Poppins', sans-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code small,
body.pricing-page .pricing-promo-strip .pricing-opening-code small {
  font-size: 0.75rem !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .pricing-discount-note,
body.pricing-page .price-card .pricing-discount-note {
  min-height: 0 !important;
  width: auto !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ta-berry, #893469) !important;
  font-family: var(--font-serif, 'Lora', Georgia, serif) !important;
  font-size: 1rem !important;
  font-style: italic !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.28 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
  body.pricing-page .pricing-promo-strip {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 14px auto 28px !important;
    padding: 14px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code,
  body.pricing-page .pricing-promo-strip .pricing-opening-code {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    justify-self: stretch !important;
    gap: 8px !important;
    text-align: left !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code small,
  body.pricing-page .pricing-promo-strip .pricing-opening-code small {
    text-align: right !important;
  }
}

/* Pricing promo compact pass: smaller coupon strip and centered top switcher. */
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
body.pricing-page .pricing-control-island .pricing-toggle {
  grid-column: 1 / -1 !important;
  width: min(100%, 620px) !important;
  justify-self: center !important;
  padding: 5px !important;
  border-radius: var(--radius-full) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before,
body.pricing-page .pricing-control-island .pricing-toggle::before {
  top: 5px !important;
  bottom: 5px !important;
  left: 5px !important;
  width: calc((100% - 14px) / 2) !important;
  transform: translateX(calc(var(--pricing-type-index) * (100% + 4px))) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
body.pricing-page .pricing-promo-strip {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 10px 14px !important;
  width: min(760px, 100%) !important;
  min-height: 0 !important;
  margin: 14px auto 28px !important;
  padding: 10px 13px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(137, 52, 105, 0.10) 0%, rgba(255, 255, 255, 0.82) 54%, rgba(137, 52, 105, 0.06) 100%) !important;
  box-shadow: 0 12px 30px rgba(28, 28, 46, 0.055) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-kicker,
body.pricing-page .pricing-promo-strip .pricing-opening-kicker {
  padding: 6px 10px !important;
  font-size: 0.64rem !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip p,
body.pricing-page .pricing-promo-strip p {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 2px 9px !important;
  font-size: 0.88rem !important;
  line-height: 1.32 !important;
  text-align: left !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip p strong,
body.pricing-page .pricing-promo-strip p strong {
  display: inline !important;
  margin: 0 !important;
  font-size: 0.94rem !important;
  white-space: nowrap !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip p span,
body.pricing-page .pricing-promo-strip p span {
  display: inline !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code,
body.pricing-page .pricing-promo-strip .pricing-opening-code {
  min-width: 132px !important;
  padding: 7px 11px !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 18px rgba(137, 52, 105, 0.16) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code span,
body.pricing-page .pricing-promo-strip .pricing-opening-code span {
  font-size: 0.56rem !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code strong,
body.pricing-page .pricing-promo-strip .pricing-opening-code strong {
  font-size: 1.08rem !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code small,
body.pricing-page .pricing-promo-strip .pricing-opening-code small {
  font-size: 0.66rem !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
  body.pricing-page .pricing-promo-strip {
    grid-template-columns: 1fr !important;
    width: min(100%, 560px) !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip p,
  body.pricing-page .pricing-promo-strip p {
    display: block !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code,
  body.pricing-page .pricing-promo-strip .pricing-opening-code {
    grid-template-columns: auto 1fr auto !important;
    width: 100% !important;
    text-align: left !important;
  }
}

/* v0.6.5 header containment: prevent desktop nav controls clipping at tablet widths. */
@media (max-width: 1100px) {
  .navbar-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-actions {
    justify-self: end !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 4px !important;
  }

  .nav-actions > a[href*="student-panel.html"] {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
    justify-self: end !important;
  }

  .lang-switch-toggle {
    flex: 0 0 auto !important;
  }

  .theme-toggle.ta-theme-toggle {
    flex: 0 0 auto !important;
  }
}

/* v0.6.5 language-switch stability: keep the chrome steady while EN/TR labels swap. */
@media (prefers-reduced-motion: no-preference) {
  .navbar-inner,
  .navbar .nav-links,
  .nav-actions,
  .mobile-toggle {
    transition:
      grid-template-columns 180ms ease,
      gap 180ms ease,
      opacity 160ms ease,
      transform 160ms ease;
  }
}

body.lang-switching {
  opacity: 1 !important;
}

@media (max-width: 1240px) {
  .navbar-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-actions {
    justify-self: end !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 4px !important;
  }

  .nav-actions > a[href*="student-panel.html"] {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
    justify-self: end !important;
  }

  .lang-switch-toggle,
  .theme-toggle.ta-theme-toggle {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 1241px) {
  .navbar .nav-links {
    display: grid !important;
    grid-template-columns: 86px 110px 168px 120px 82px 82px !important;
    column-gap: 2px !important;
    align-items: center !important;
    justify-content: start !important;
    flex: 0 0 658px !important;
    width: 658px !important;
    min-width: 658px !important;
    max-width: 658px !important;
  }

  .navbar .nav-links .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 6px !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
  }

  .nav-actions {
    flex: 0 0 281px !important;
    justify-content: flex-end !important;
    width: 281px !important;
  }
}

/* Final visual guardrails: readable page eyebrow, roomy desktop nav, tidy coupon. */
html[data-i18n-title] .page-header .section-label,
.page-header .section-label {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 2px 10px rgba(7, 7, 12, 0.38) !important;
}

html[data-i18n-title] .page-header .section-label::before,
.page-header .section-label::before {
  background: #669BBC !important;
  opacity: 1 !important;
}

@media (min-width: 1241px) {
  .navbar-inner {
    max-width: 1280px !important;
    padding-inline: 18px !important;
    gap: 12px !important;
  }

  .navbar-logo {
    flex: 0 0 168px !important;
  }

  .navbar-logo .ta-lockup-logo-nav {
    width: 168px !important;
    max-width: 168px !important;
  }

  .navbar .nav-links {
    grid-template-columns: 82px 108px 198px 118px 68px 80px !important;
    column-gap: 3px !important;
    flex: 0 0 672px !important;
    width: 672px !important;
    min-width: 672px !important;
    max-width: 672px !important;
  }

  .navbar .nav-links .nav-link {
    padding-inline: 7px !important;
    font-size: 0.86rem !important;
  }

  .nav-actions {
    flex: 0 0 244px !important;
    width: 244px !important;
    gap: 8px !important;
  }

  .nav-actions > a[href*="student-panel.html"] {
    min-width: 94px !important;
    padding-inline: 14px !important;
  }
}

html[data-i18n-title] .pricing-promo-strip .pricing-opening-code,
body.pricing-page .pricing-promo-strip .pricing-opening-code,
.pricing-promo-strip .pricing-opening-code {
  min-width: 182px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px 10px !important;
  text-align: left !important;
}

html[data-i18n-title] .pricing-promo-strip .pricing-opening-code span,
body.pricing-page .pricing-promo-strip .pricing-opening-code span,
.pricing-promo-strip .pricing-opening-code span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  line-height: 1 !important;
}

html[data-i18n-title] .pricing-promo-strip .pricing-opening-code strong,
body.pricing-page .pricing-promo-strip .pricing-opening-code strong,
.pricing-promo-strip .pricing-opening-code strong {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

html[data-i18n-title] .pricing-promo-strip .pricing-opening-code small,
body.pricing-page .pricing-promo-strip .pricing-opening-code small,
.pricing-promo-strip .pricing-opening-code small {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
  white-space: nowrap !important;
  font-size: 0.64rem !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card,
body.pricing-page .price-card {
  display: flex !important;
  flex-direction: column !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card > .btn,
html[data-i18n-title="meta.pricing.title"] .price-card > a.btn,
body.pricing-page .price-card > .btn,
body.pricing-page .price-card > a.btn {
  margin-top: auto !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-card-schedule,
body.pricing-page .pricing-card-schedule {
  margin-bottom: 18px !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .pricing-discount-note,
body.pricing-page .price-card .pricing-discount-note {
  margin-bottom: 18px !important;
}

/* Final pricing/nav alignment pass: fixed visual rows, cleaner CTAs, calmer mobile header. */
html[data-i18n-title="meta.pricing.title"] .price-card .pricing-discount-note,
body.pricing-page .price-card .pricing-discount-note {
  order: 3 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-sub,
body.pricing-page .price-card .price-sub {
  order: 4 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-big.price-monthly,
body.pricing-page .price-card .price-big.price-monthly {
  order: 5 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .price-hour,
body.pricing-page .price-card .price-hour {
  order: 6 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-card-schedule,
body.pricing-page .pricing-card-schedule {
  order: 7 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card > .btn,
html[data-i18n-title="meta.pricing.title"] .price-card > a.btn,
body.pricing-page .price-card > .btn,
body.pricing-page .price-card > a.btn {
  order: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-height: 46px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

@media (min-width: 761px) {
  html[data-i18n-title="meta.pricing.title"] #grup .price-card:not(:has(.pricing-discount-note)) .price-sub,
  body.pricing-page #grup .price-card:not(:has(.pricing-discount-note)) .price-sub {
    margin-top: 55px !important;
  }
}

@media (max-width: 640px) {
  .navbar {
    min-height: 76px !important;
  }

  .navbar-inner {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: clamp(8px, 2.4vw, 12px) !important;
    padding-inline: clamp(12px, 4vw, 18px) !important;
  }

  .navbar-logo {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(156px, 47vw, 190px) !important;
    max-width: 100% !important;
  }

  .nav-actions {
    grid-column: 2 !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .theme-toggle.ta-theme-toggle {
    display: none !important;
  }

  .lang-switch-toggle {
    width: 86px !important;
    min-width: 86px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: 3px !important;
    gap: 4px !important;
  }

  .lang-switch-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .lang-switch-track {
    width: 54px !important;
  }

  .mobile-toggle {
    grid-column: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 380px) {
  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(138px, 43vw, 160px) !important;
  }

  .lang-switch-toggle {
    width: 80px !important;
    min-width: 80px !important;
  }
}

/* v0.6.6 design lift: use Ink, Mist, and Steel accents for a calmer palette. */
.navbar {
  background:
    linear-gradient(104deg, rgba(28, 28, 46, 0.98) 0%, rgba(23, 34, 52, 0.96) 62%, rgba(102, 155, 188, 0.20) 100%) !important;
  border-bottom: 1px solid rgba(232, 237, 242, 0.16) !important;
  box-shadow: 0 12px 34px rgba(7, 7, 12, 0.18) !important;
}

.navbar.scrolled {
  background:
    linear-gradient(104deg, rgba(28, 28, 46, 0.99) 0%, rgba(22, 33, 50, 0.98) 64%, rgba(102, 155, 188, 0.24) 100%) !important;
  border-bottom-color: rgba(253, 240, 213, 0.13) !important;
}

.navbar .nav-links .nav-link {
  color: rgba(247, 249, 252, 0.82) !important;
  border: 1px solid transparent !important;
}

.navbar .nav-links .nav-link:hover,
.navbar .nav-links .nav-link.active,
.navbar .nav-links .nav-link:focus-visible {
  color: #FFFFFF !important;
  background:
    linear-gradient(135deg, rgba(102, 155, 188, 0.22), rgba(232, 237, 242, 0.08)) !important;
  border-color: rgba(253, 240, 213, 0.12) !important;
  box-shadow: 0 8px 24px rgba(102, 155, 188, 0.14) !important;
}

.nav-actions a[href*="student-panel.html"] {
  background:
    linear-gradient(135deg, rgba(28, 28, 46, 0.94), rgba(102, 155, 188, 0.76)) padding-box,
    linear-gradient(135deg, rgba(253, 240, 213, 0.34), rgba(102, 155, 188, 0.28)) border-box !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(102, 155, 188, 0.14) !important;
}

.hero-bg {
  background:
    linear-gradient(90deg, rgba(16, 18, 32, 0.92) 0%, rgba(21, 22, 37, 0.84) 34%, rgba(28, 28, 46, 0.54) 58%, rgba(28, 28, 46, 0.18) 82%, rgba(28, 28, 46, 0.06) 100%) !important;
}

.hero-bg::after {
  background:
    radial-gradient(circle at 22% 34%, rgba(253, 240, 213, 0.10), transparent 24%),
    radial-gradient(circle at 44% 58%, rgba(102, 155, 188, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(7, 7, 12, 0) 0%, rgba(7, 7, 12, 0.34) 100%) !important;
}

.hero-media::after {
  background:
    linear-gradient(90deg, rgba(16, 18, 32, 0.78) 0%, rgba(22, 23, 40, 0.50) 34%, rgba(28, 28, 46, 0.16) 64%, rgba(28, 28, 46, 0.02) 100%) !important;
  mix-blend-mode: normal !important;
}

.hero-media::before {
  background: radial-gradient(circle at 34% 54%, rgba(102, 155, 188, 0.12), transparent 34%) !important;
  opacity: 0.58 !important;
  mix-blend-mode: normal !important;
}

.hero-badge {
  background: rgba(102, 155, 188, 0.16) !important;
  border-color: rgba(253, 240, 213, 0.24) !important;
  box-shadow: 0 12px 32px rgba(102, 155, 188, 0.14) !important;
}

.hero .language-bridge-line {
  background:
    linear-gradient(90deg, transparent 0%, rgba(253, 240, 213, 0.28) 12%, rgba(253, 240, 213, 0.74) 38%, rgba(102, 155, 188, 0.58) 66%, rgba(232, 237, 242, 0.26) 84%, transparent 100%) !important;
  box-shadow:
    0 0 16px rgba(253, 240, 213, 0.14),
    0 0 28px rgba(102, 155, 188, 0.14) !important;
}

.hero .hero-ctas .btn-primary {
  background: linear-gradient(180deg, #26364F 0%, var(--ta-ink, #1C1C2E) 100%) !important;
  border: 1px solid rgba(102, 155, 188, 0.34) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 12px 26px rgba(28, 28, 46, 0.28),
    0 0 0 1px rgba(102, 155, 188, 0.12) !important;
}

.hero .hero-ctas .btn-primary:hover,
.hero .hero-ctas .btn-primary:focus-visible {
  background: linear-gradient(180deg, #2C4664 0%, #20263A 100%) !important;
  border-color: rgba(232, 237, 242, 0.32) !important;
  box-shadow:
    0 14px 30px rgba(28, 28, 46, 0.32),
    0 0 0 1px rgba(253, 240, 213, 0.10) !important;
}

.hero .btn-outline:hover,
.hero .btn-outline:focus-visible {
  background: rgba(102, 155, 188, 0.16) !important;
  border-color: rgba(253, 240, 213, 0.62) !important;
}

.hero-stat {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(253, 240, 213, 0.12) !important;
}

html[data-i18n-title^="meta."] .page-header,
.page-header {
  background-image:
    linear-gradient(112deg, rgba(28, 28, 46, 0.92) 0%, rgba(24, 36, 54, 0.84) 48%, rgba(102, 155, 188, 0.42) 100%),
    var(--ta-page-header-image, url('../img/photos/hero_student_q18.jpg')) !important;
  background-position: var(--ta-page-header-position, center 42%) !important;
}

html[data-i18n-title] .page-header .section-label::before,
.page-header .section-label::before {
  background: linear-gradient(180deg, var(--ta-mist, #E8EDF2), var(--ta-violet, #669BBC)) !important;
}

.footer-new {
  background:
    radial-gradient(920px 520px at 82% 78%, rgba(102, 155, 188, 0.13), transparent 64%),
    radial-gradient(760px 420px at 16% 18%, rgba(102, 155, 188, 0.13), transparent 60%),
    linear-gradient(180deg, #10192B 0%, #0B1323 42%, #090D18 72%, #07080F 100%) !important;
}

.footer-ta-band {
  display: block !important;
  order: 2 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  cursor: crosshair !important;
  background:
    radial-gradient(760px 240px at var(--x, 50%) var(--y, 92%), rgba(102, 155, 188, 0.13), transparent 66%),
    linear-gradient(180deg, rgba(11, 19, 35, 0) 0%, rgba(10, 14, 26, 0.50) 48%, rgba(7, 8, 15, 0.80) 100%) !important;
}

.footer-ta-band::before {
  opacity: 0.20 !important;
}

.footer-ta-band::after,
.footer-ta-stage::before,
.footer-ta-stage::after {
  content: none !important;
  display: none !important;
}

.footer-ta-stage {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(138px, 14vw, 206px) !important;
  gap: clamp(6px, 1vw, 10px) !important;
  padding: clamp(20px, 2.5vw, 32px) var(--space-4) clamp(30px, 3.2vw, 40px) !important;
  overflow: hidden !important;
  transform: none !important;
}

.footer-ta-text {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 1320px !important;
  transform: none !important;
  font-family: var(--font-latin, 'Poppins', system-ui, sans-serif) !important;
  font-size: clamp(54px, 10.8vw, 158px) !important;
  font-weight: 900 !important;
  line-height: 0.86 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: transparent !important;
  opacity: 0.92 !important;
  background: linear-gradient(94deg, rgba(232, 237, 242, 0.18), rgba(253, 240, 213, 0.70) 42%, rgba(102, 155, 188, 0.54) 70%, rgba(232, 237, 242, 0.30)) !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(253, 240, 213, 0.06) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image: radial-gradient(ellipse 560px 280px at var(--x, 50%) var(--y, 92%), #000 0%, rgba(0,0,0,0.74) 36%, rgba(0,0,0,0.20) 64%, transparent 82%) !important;
  mask-image: radial-gradient(ellipse 560px 280px at var(--x, 50%) var(--y, 92%), #000 0%, rgba(0,0,0,0.74) 36%, rgba(0,0,0,0.20) 64%, transparent 82%) !important;
  filter: none !important;
  text-shadow: 0 0 34px rgba(102, 155, 188, 0.14) !important;
  transition: opacity 180ms ease, filter 180ms ease !important;
}

.footer-ta-band:hover .footer-ta-text,
.footer-ta-band:focus-within .footer-ta-text,
.footer-ta-band.is-spotlight-active .footer-ta-text {
  background-position: 100% 50% !important;
  opacity: 1 !important;
  text-shadow:
    0 0 30px rgba(253, 240, 213, 0.14),
    0 0 44px rgba(102, 155, 188, 0.22) !important;
}

.footer-ta-band:not(:hover):not(.is-spotlight-active) .footer-ta-text {
  -webkit-mask-image: radial-gradient(ellipse 780px 320px at 50% 100%, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0.20) 56%, transparent 82%) !important;
  mask-image: radial-gradient(ellipse 780px 320px at 50% 100%, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0.20) 56%, transparent 82%) !important;
}

.footer-ta-tagline {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  font-family: var(--font-serif, 'Lora', Georgia, serif) !important;
  font-size: clamp(0.95rem, 1.5vw, 1.18rem) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: rgba(253, 240, 213, 0.72) !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

html[lang="en"] .footer-ta-tagline::before,
html[lang="tr"] .footer-ta-tagline::before {
  content: "\2014  ";
}

html[lang="en"] .footer-ta-tagline::after,
html[lang="tr"] .footer-ta-tagline::after {
  content: " \2014";
}

@media (max-width: 767px) {
  .footer-ta-stage {
    min-height: clamp(108px, 28vw, 154px) !important;
    padding-block: 24px 30px !important;
  }

  .footer-ta-text {
    font-size: clamp(38px, 15vw, 76px) !important;
    white-space: nowrap !important;
  }

  .footer-ta-tagline {
    font-size: 0.94rem !important;
  }
}

/* Recovery pass: remove the experimental giant footer wordmark and return to a clean launch-ready footer. */
.footer-ta-band {
  display: none !important;
}

.footer-main {
  padding-bottom: clamp(34px, 4vw, 58px) !important;
}

.footer-bottom-new {
  border-top: 1px solid rgba(232, 237, 242, 0.10) !important;
  background: rgba(7, 8, 15, 0.22) !important;
}

/* Canonical QAERA-style footer: structured columns, centred brand lockup, no experimental band. */
.footer-new {
  scroll-margin-top: var(--nav-height, 72px) !important;
  background:
    radial-gradient(760px 440px at 18% 18%, rgba(102, 155, 188, 0.10), transparent 62%),
    linear-gradient(180deg, #10192B 0%, #0B1323 48%, #070B14 100%) !important;
  overflow: hidden !important;
}

.footer-main {
  padding: clamp(64px, 7vw, 96px) 0 clamp(46px, 5vw, 72px) !important;
  border-top: 1px solid rgba(232, 237, 242, 0.10) !important;
}

.footer-grid-new {
  grid-template-columns: minmax(250px, 1.45fr) repeat(4, minmax(130px, 0.8fr)) !important;
  gap: clamp(34px, 4.2vw, 72px) !important;
  align-items: start !important;
}

.footer-brand-new {
  justify-self: start !important;
  width: min(100%, 320px) !important;
  align-items: center !important;
  text-align: center !important;
}

.footer-brand-new .footer-logo-link {
  margin: 0 auto 16px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.footer-symbol-logo {
  width: clamp(76px, 7vw, 96px) !important;
  height: auto !important;
}

.footer-wordmark-logo span,
.footer-wordmark-logo em {
  font-size: clamp(16px, 1.35vw, 20px) !important;
}

.footer-brand-new .footer-logo-tagline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 auto 24px !important;
  color: rgba(253, 240, 213, 0.82) !important;
  font-size: clamp(0.95rem, 1.25vw, 1.08rem) !important;
  white-space: nowrap !important;
}

.footer-brand-new .footer-logo-tagline::before,
.footer-brand-new .footer-logo-tagline::after {
  content: "" !important;
  display: block !important;
  flex: 1 1 46px !important;
  max-width: 58px !important;
  height: 1px !important;
}

.footer-brand-new .footer-logo-tagline::before {
  background: linear-gradient(90deg, transparent, rgba(253, 240, 213, 0.42)) !important;
}

.footer-brand-new .footer-logo-tagline::after {
  background: linear-gradient(90deg, rgba(253, 240, 213, 0.42), transparent) !important;
}

.footer-brand-new .footer-desc-new {
  margin: 0 auto 22px !important;
  max-width: 34ch !important;
  color: rgba(232, 237, 242, 0.68) !important;
  font-family: var(--font-serif, 'Lora', Georgia, serif) !important;
  font-size: clamp(0.96rem, 1.15vw, 1.05rem) !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

.footer-brand-new .footer-socials-new {
  justify-content: center !important;
  gap: 12px !important;
}

.footer-social-new {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(102, 155, 188, 0.10) !important;
  border: 1px solid rgba(102, 155, 188, 0.30) !important;
  color: rgba(232, 237, 242, 0.82) !important;
  box-shadow: none !important;
}

.footer-social-new:hover,
.footer-social-new:focus-visible {
  background: rgba(102, 155, 188, 0.18) !important;
  border-color: rgba(232, 237, 242, 0.30) !important;
  color: #FFFFFF !important;
  transform: none !important;
}

.footer-heading-new {
  color: rgba(247, 249, 252, 0.90) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 18px !important;
}

.footer-links-new {
  gap: 12px !important;
}

.footer-link-new {
  color: rgba(232, 237, 242, 0.70) !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
}

.footer-link-new:hover,
.footer-link-new:focus-visible {
  color: #FFFFFF !important;
}

.footer-link-icon-new {
  color: rgba(102, 155, 188, 0.86) !important;
}

.footer-ta-band {
  display: none !important;
}

.footer-bottom-new {
  padding: 26px 0 28px !important;
  border-top: 1px solid rgba(232, 237, 242, 0.10) !important;
  background: rgba(7, 8, 15, 0.30) !important;
}

.footer-bottom-new .container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: start !important;
  justify-content: start !important;
}

.footer-bottom-new p,
.footer-tagline-new,
.footer-legal-notice {
  justify-self: start !important;
  text-align: left !important;
  color: rgba(232, 237, 242, 0.66) !important;
}

@media (max-width: 980px) {
  .footer-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-brand-new {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
}

@media (max-width: 640px) {
  .footer-main {
    padding-top: 52px !important;
  }

  .footer-grid-new {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .footer-col-new {
    align-items: center !important;
  }

  .footer-links-new {
    align-items: center !important;
  }

  .footer-link-new {
    justify-content: center !important;
  }

  .footer-bottom-new .container,
  .footer-bottom-new p,
  .footer-tagline-new,
  .footer-legal-notice {
    justify-items: center !important;
    justify-self: center !important;
    text-align: center !important;
  }
}

/* Interaction ratio system: one proportional language for buttons and segmented controls. */
:root {
  --ta-control-radius: 8px;
  --ta-control-border: 1px;
  --ta-control-height: 46px;
  --ta-control-height-lg: 58px;
  --ta-control-pad-x: 22px;
  --ta-control-pad-x-lg: 34px;
  --ta-paired-cta-width: clamp(236px, 18vw, 286px);
  --ta-control-shadow: 0 12px 26px rgba(28, 28, 46, 0.18);
  --ta-control-shadow-hover: 0 14px 30px rgba(28, 28, 46, 0.24);
  --ta-control-edge: rgba(102, 155, 188, 0.34);
  --ta-control-edge-soft: rgba(102, 155, 188, 0.18);
}

.btn,
button.btn,
input[type="submit"].btn,
.tally-popup-button {
  min-height: var(--ta-control-height) !important;
  padding: 0 var(--ta-control-pad-x) !important;
  border-radius: var(--ta-control-radius) !important;
  border-width: var(--ta-control-border) !important;
  border-style: solid !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    opacity 160ms ease !important;
}

.btn-lg,
.hero-ctas .btn,
.programme-final-cta .btn {
  min-height: var(--ta-control-height-lg) !important;
  padding-inline: clamp(24px, 3vw, var(--ta-control-pad-x-lg)) !important;
}

.hero-ctas .btn,
.steps-action-row .btn,
.section-cta .btn,
.section.text-center .btn.btn-lg,
.pricing-cta-section .btn,
.programme-final-cta .btn,
.programme-hero .btn,
.page-header .btn {
  width: min(100%, var(--ta-paired-cta-width)) !important;
  min-width: min(100%, var(--ta-paired-cta-width)) !important;
  min-height: var(--ta-control-height-lg) !important;
  flex: 0 0 min(100%, var(--ta-paired-cta-width)) !important;
  justify-content: center !important;
}

.btn-primary,
.btn-secondary,
button.btn-primary,
form .btn-primary,
.contact-home-form .btn-primary,
.price-card .btn.btn-primary,
.price-card.featured .btn.btn-primary,
.pricing-cta-section .btn-primary,
.programme-final-cta .btn-primary,
.mobile-sticky-cta .btn-primary,
.tally-popup-button {
  background: linear-gradient(180deg, #26364F 0%, var(--ta-ink, #1C1C2E) 100%) !important;
  border-color: var(--ta-control-edge) !important;
  color: #FFFFFF !important;
  box-shadow:
    var(--ta-control-shadow),
    0 0 0 1px rgba(102, 155, 188, 0.10) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible,
form .btn-primary:hover,
form .btn-primary:focus-visible,
.contact-home-form .btn-primary:hover,
.contact-home-form .btn-primary:focus-visible,
.price-card .btn.btn-primary:hover,
.price-card .btn.btn-primary:focus-visible,
.price-card.featured .btn.btn-primary:hover,
.price-card.featured .btn.btn-primary:focus-visible,
.pricing-cta-section .btn-primary:hover,
.pricing-cta-section .btn-primary:focus-visible,
.programme-final-cta .btn-primary:hover,
.programme-final-cta .btn-primary:focus-visible,
.mobile-sticky-cta .btn-primary:hover,
.mobile-sticky-cta .btn-primary:focus-visible,
.tally-popup-button:hover,
.tally-popup-button:focus-visible {
  background: linear-gradient(180deg, #2C4664 0%, #20263A 100%) !important;
  border-color: rgba(232, 237, 242, 0.32) !important;
  color: #FFFFFF !important;
  box-shadow:
    var(--ta-control-shadow-hover),
    0 0 0 1px rgba(232, 237, 242, 0.10) !important;
}

.btn-outline,
.pricing-cta-section .btn-outline,
.programme-final-cta .btn-outline,
#courses .pricing-course-grid .btn.btn-outline {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(28, 28, 46, 0.34) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: 0 0 0 1px rgba(102, 155, 188, 0.08) !important;
}

.btn-outline:hover,
.btn-outline:focus-visible,
.pricing-cta-section .btn-outline:hover,
.pricing-cta-section .btn-outline:focus-visible,
.programme-final-cta .btn-outline:hover,
.programme-final-cta .btn-outline:focus-visible,
#courses .pricing-course-grid .btn.btn-outline:hover,
#courses .pricing-course-grid .btn.btn-outline:focus-visible {
  background: rgba(102, 155, 188, 0.12) !important;
  border-color: rgba(28, 28, 46, 0.52) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: 0 10px 22px rgba(28, 28, 46, 0.10) !important;
}

.hero .btn-outline,
.programme-hero .btn-outline,
.page-header .btn-outline {
  color: #FFFFFF !important;
  border-color: rgba(232, 237, 242, 0.54) !important;
  background: rgba(28, 28, 46, 0.18) !important;
  box-shadow:
    0 12px 26px rgba(5, 8, 18, 0.22),
    0 0 0 1px rgba(232, 237, 242, 0.05) !important;
}

.hero .btn-outline:hover,
.hero .btn-outline:focus-visible,
.programme-hero .btn-outline:hover,
.programme-hero .btn-outline:focus-visible,
.page-header .btn-outline:hover,
.page-header .btn-outline:focus-visible {
  background: rgba(102, 155, 188, 0.16) !important;
  border-color: rgba(232, 237, 242, 0.70) !important;
  color: #FFFFFF !important;
}

.pricing-toggle-btn,
.pricing-subtoggle-btn,
.filter-btn {
  min-height: 40px !important;
  border-radius: var(--ta-control-radius) !important;
  border: 1px solid rgba(28, 28, 46, 0.14) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: rgba(28, 28, 46, 0.78) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease !important;
}

.pricing-toggle-btn.active,
.pricing-toggle-btn:hover,
.pricing-toggle-btn:focus-visible,
.pricing-subtoggle-btn.active,
.pricing-subtoggle-btn:hover,
.pricing-subtoggle-btn:focus-visible,
.filter-btn.active,
.filter-btn:hover,
.filter-btn:focus-visible {
  background: rgba(102, 155, 188, 0.16) !important;
  border-color: rgba(102, 155, 188, 0.42) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: 0 8px 18px rgba(28, 28, 46, 0.08) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn {
  min-height: 40px !important;
  border-radius: var(--ta-control-radius) !important;
  border: 1px solid rgba(28, 28, 46, 0.14) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: rgba(28, 28, 46, 0.78) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:focus-visible,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-toggle-btn.active,
body.pricing-page .pricing-control-island .pricing-toggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-toggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn.active,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:focus-visible {
  background: rgba(102, 155, 188, 0.16) !important;
  border-color: rgba(102, 155, 188, 0.42) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: 0 8px 18px rgba(28, 28, 46, 0.08) !important;
}

html[data-i18n-title="meta.pricing.title"] .filter-btn,
body.pricing-page .filter-btn {
  min-height: 40px !important;
  border-radius: var(--ta-control-radius) !important;
  border: 1px solid rgba(28, 28, 46, 0.14) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: rgba(28, 28, 46, 0.78) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .filter-btn.active,
html[data-i18n-title="meta.pricing.title"] .filter-btn:hover,
html[data-i18n-title="meta.pricing.title"] .filter-btn:focus-visible,
body.pricing-page .filter-btn.active,
body.pricing-page .filter-btn:hover,
body.pricing-page .filter-btn:focus-visible {
  background: rgba(102, 155, 188, 0.16) !important;
  border-color: rgba(102, 155, 188, 0.42) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: 0 8px 18px rgba(28, 28, 46, 0.08) !important;
}

.nav-actions > a[href*="student-panel.html"] {
  min-height: 38px !important;
  border-radius: var(--ta-control-radius) !important;
  background:
    linear-gradient(180deg, rgba(38, 54, 79, 0.94), rgba(28, 28, 46, 0.94)) padding-box,
    linear-gradient(135deg, rgba(232, 237, 242, 0.32), rgba(102, 155, 188, 0.34)) border-box !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(5, 8, 18, 0.20) !important;
}

.programme-card-cta,
.course-pricing-link {
  color: #355F7F !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  button.btn,
  .pricing-toggle-btn,
  .pricing-subtoggle-btn,
  .filter-btn {
    transition: none !important;
  }
}

/* Modern floating contact action: quiet, branded, and consistent with the control system. */
.whatsapp-float {
  right: clamp(16px, 2vw, 24px) !important;
  bottom: clamp(16px, 2vw, 24px) !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(38, 54, 79, 0.96) 0%, rgba(28, 28, 46, 0.98) 100%) !important;
  color: var(--ta-mist, #E8EDF2) !important;
  border: 1px solid rgba(102, 155, 188, 0.34) !important;
  box-shadow:
    0 16px 34px rgba(5, 8, 18, 0.26),
    0 0 0 1px rgba(232, 237, 242, 0.08) inset !important;
  animation: whatsappEntrance 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both !important;
  transform: none !important;
  overflow: hidden !important;
}

.whatsapp-float::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 11px !important;
  background: rgba(102, 155, 188, 0.10) !important;
  pointer-events: none !important;
}

.whatsapp-float::after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  border: 2px solid var(--ta-ink, #1C1C2E) !important;
  pointer-events: none !important;
}

.whatsapp-float svg {
  position: relative !important;
  z-index: 1 !important;
  width: 24px !important;
  height: 24px !important;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background:
    linear-gradient(180deg, rgba(44, 70, 100, 0.98) 0%, rgba(32, 38, 58, 0.98) 100%) !important;
  border-color: rgba(232, 237, 242, 0.34) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 18px 38px rgba(5, 8, 18, 0.30),
    0 0 0 1px rgba(232, 237, 242, 0.12) inset !important;
  transform: none !important;
}

[dir="rtl"] .whatsapp-float {
  left: clamp(16px, 2vw, 24px) !important;
  right: auto !important;
}

/* Navbar artifact guard: keep hover glows inside controls and make the far edge opaque. */
.navbar {
  background:
    linear-gradient(104deg, rgba(28, 28, 46, 0.99) 0%, rgba(23, 34, 52, 0.985) 68%, rgba(28, 43, 62, 0.985) 100%) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.navbar.scrolled {
  background:
    linear-gradient(104deg, rgba(28, 28, 46, 1) 0%, rgba(22, 33, 50, 0.995) 68%, rgba(28, 43, 62, 0.995) 100%) !important;
}

.navbar-inner {
  position: relative !important;
  z-index: 1 !important;
}

.nav-actions,
.lang-switch,
.theme-toggle.ta-theme-toggle {
  position: relative !important;
  z-index: 2 !important;
}

.nav-actions a[href*="student-panel.html"] {
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(38, 54, 79, 0.94), rgba(28, 28, 46, 0.94)) padding-box,
    linear-gradient(135deg, rgba(232, 237, 242, 0.32), rgba(102, 155, 188, 0.34)) border-box !important;
}

.nav-actions a[href*="student-panel.html"]::after {
  display: none !important;
  content: none !important;
}

.nav-actions a[href*="student-panel.html"]:hover,
.nav-actions a[href*="student-panel.html"]:focus-visible {
  background:
    linear-gradient(180deg, rgba(44, 70, 100, 0.96), rgba(32, 38, 58, 0.96)) padding-box,
    linear-gradient(135deg, rgba(232, 237, 242, 0.40), rgba(102, 155, 188, 0.42)) border-box !important;
  box-shadow:
    0 10px 22px rgba(5, 8, 18, 0.22),
    0 0 0 1px rgba(232, 237, 242, 0.08) inset !important;
}

/* Pricing island restore: keep its purpose-built segmented-control treatment. */
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn {
  position: relative !important;
  z-index: 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: rgba(232, 237, 242, 0.76) !important;
  transition: color 180ms ease, opacity 180ms ease !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn {
  min-height: 42px !important;
  padding: 0 22px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn {
  min-height: 40px !important;
  padding: 0 12px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:focus-visible,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:hover,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-toggle-btn.active,
body.pricing-page .pricing-control-island .pricing-toggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-toggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn.active,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:hover,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:focus-visible {
  background: transparent !important;
  border: 0 !important;
  color: var(--pricing-cream, #FDF0D5) !important;
  box-shadow: none !important;
}

/* v0.6.30 flow pass: nav and hero should share one visual canvas. */
.navbar {
  background:
    linear-gradient(90deg,
      rgba(12, 18, 31, 0.92) 0%,
      rgba(18, 27, 43, 0.88) 48%,
      rgba(18, 29, 43, 0.76) 76%,
      rgba(15, 24, 36, 0.72) 100%) !important;
  border-bottom-color: rgba(232, 237, 242, 0.08) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: clamp(22px, 4vw, 54px);
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(12, 18, 31, 0.34) 0%,
      rgba(12, 18, 31, 0.16) 46%,
      rgba(12, 18, 31, 0) 100%);
}

.navbar.scrolled {
  background:
    linear-gradient(90deg,
      rgba(12, 18, 31, 0.98) 0%,
      rgba(17, 27, 43, 0.98) 58%,
      rgba(19, 31, 46, 0.96) 100%) !important;
  border-bottom-color: rgba(232, 237, 242, 0.12) !important;
  box-shadow: 0 10px 30px rgba(5, 8, 18, 0.16) !important;
}

.navbar.scrolled::after {
  opacity: 0.42;
}

.hero {
  background: #0c121f;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(96px, 16vw, 190px);
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(12, 18, 31, 0.72) 0%,
      rgba(12, 18, 31, 0.22) 54%,
      rgba(12, 18, 31, 0) 100%);
}

.hero-bg {
  background:
    linear-gradient(90deg,
      rgba(12, 18, 31, 0.94) 0%,
      rgba(17, 21, 35, 0.86) 34%,
      rgba(24, 26, 42, 0.56) 58%,
      rgba(24, 28, 42, 0.20) 82%,
      rgba(24, 30, 43, 0.10) 100%) !important;
}

.hero-bg::after {
  background:
    radial-gradient(circle at 36% 42%, rgba(102, 155, 188, 0.11), transparent 34%),
    linear-gradient(180deg,
      rgba(7, 7, 12, 0) 0%,
      rgba(7, 7, 12, 0.18) 62%,
      rgba(244, 247, 250, 0.08) 100%) !important;
}

.hero-media::after {
  background:
    linear-gradient(90deg,
      rgba(12, 18, 31, 0.82) 0%,
      rgba(17, 22, 36, 0.54) 36%,
      rgba(24, 28, 42, 0.18) 66%,
      rgba(24, 30, 43, 0.03) 100%) !important;
}

html[data-i18n-title="meta.home.title"] .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(62px, 10vw, 128px);
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(244, 247, 250, 0) 0%,
      rgba(244, 247, 250, 0.46) 58%,
      #F4F7FA 100%);
}

html[data-i18n-title="meta.home.title"] .section + .section::before,
html[data-i18n-title="meta.home.title"] .section::before {
  display: none !important;
}

html[data-i18n-title="meta.home.title"] #features {
  background:
    linear-gradient(180deg,
      #F4F7FA 0%,
      #FFFFFF 18%,
      #FFFFFF 78%,
      #F9F2E3 100%) !important;
}

html[data-i18n-title="meta.home.title"] #how-it-works {
  background:
    linear-gradient(180deg,
      #F9F2E3 0%,
      #FDF0D5 50%,
      #F6F8FA 100%) !important;
}

html[data-i18n-title="meta.home.title"] #counters,
html[data-i18n-title="meta.home.title"] .tagline-banner {
  background:
    linear-gradient(180deg,
      #F6F8FA 0%,
      #EFF4F7 100%) !important;
}

html[data-i18n-title="meta.home.title"] #programmes {
  background:
    linear-gradient(180deg,
      #EFF4F7 0%,
      #FFFFFF 20%,
      #FFFFFF 78%,
      #F9F2E3 100%) !important;
}

html[data-i18n-title="meta.home.title"] #promise,
html[data-i18n-title="meta.home.title"] #contact {
  background:
    linear-gradient(180deg,
      #F9F2E3 0%,
      #FDF0D5 58%,
      #F5F8FB 100%) !important;
}

html[data-i18n-title="meta.home.title"] #newsletter {
  background:
    linear-gradient(180deg,
      #F5F8FB 0%,
      #FFFFFF 42%,
      #F4F7FA 100%) !important;
}

/* v0.6.32 Berry emphasis pass: use Berry for value signals, not general chrome. */
html[data-i18n-title="meta.pricing.title"] .price-card:has(.pricing-discount-note),
html[data-i18n-title="meta.pricing.title"] .price-card.featured,
body.pricing-page .price-card:has(.pricing-discount-note),
body.pricing-page .price-card.featured {
  --plan-accent: var(--ta-berry, #893469);
  --plan-accent-soft: rgba(137, 52, 105, 0.14);
  --plan-accent-deep: #6F2850;
  --plan-accent-wash: rgba(137, 52, 105, 0.075);
}

html[data-i18n-title="meta.pricing.title"] .price-card:has(.pricing-discount-note),
body.pricing-page .price-card:has(.pricing-discount-note) {
  border-top-color: var(--ta-berry, #893469) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured,
body.pricing-page .price-card.featured {
  border-color: rgba(137, 52, 105, 0.54) !important;
  box-shadow:
    0 24px 46px rgba(137, 52, 105, 0.13),
    0 0 0 1px rgba(137, 52, 105, 0.08) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured::before,
html[data-i18n-title="meta.pricing.title"] .pricing-card.featured::before,
body.pricing-page .price-card.featured::before,
body.pricing-page .pricing-card.featured::before {
  background: linear-gradient(180deg, var(--ta-berry, #893469), #6F2850) !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    0 10px 22px rgba(137, 52, 105, 0.20),
    0 0 0 1px rgba(137, 52, 105, 0.12) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card .pricing-discount-note,
body.pricing-page .price-card .pricing-discount-note {
  background: rgba(137, 52, 105, 0.085) !important;
  border-color: rgba(137, 52, 105, 0.22) !important;
  color: var(--ta-berry, #893469) !important;
}

/* v0.6.33 homepage flow correction: no cream shelf after the hero. */
html[data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(34px, 5.6vw, 76px) !important;
  background:
    linear-gradient(180deg,
      rgba(239, 245, 249, 0) 0%,
      rgba(239, 245, 249, 0.20) 48%,
      #EFF5F9 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features {
  background:
    linear-gradient(180deg,
      #EFF5F9 0%,
      #F7FAFC 14%,
      #FFFFFF 48%,
      #F6FAFC 100%) !important;
}

html[data-i18n-title="meta.home.title"] #how-it-works {
  background:
    linear-gradient(180deg,
      #F6FAFC 0%,
      #EEF5F9 52%,
      #F7FAFC 100%) !important;
}

html[data-i18n-title="meta.home.title"] #counters,
html[data-i18n-title="meta.home.title"] .tagline-banner {
  background:
    linear-gradient(180deg,
      #F7FAFC 0%,
      #EEF5F9 100%) !important;
}

html[data-i18n-title="meta.home.title"] #programmes {
  background:
    linear-gradient(180deg,
      #EEF5F9 0%,
      #F8FBFD 24%,
      #FFFFFF 72%,
      #F4F8FB 100%) !important;
}

html[data-i18n-title="meta.home.title"] #promise,
html[data-i18n-title="meta.home.title"] #contact {
  background:
    linear-gradient(180deg,
      #F4F8FB 0%,
      #EEF5F9 58%,
      #F8FBFD 100%) !important;
}

html[data-i18n-title="meta.home.title"] #newsletter {
  background:
    linear-gradient(180deg,
      #F8FBFD 0%,
      #FFFFFF 48%,
      #F1F6FA 100%) !important;
}

/* v0.6.34 pricing selector tidy-up: one radius, one spacing scale. */
html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
body.pricing-page .pricing-control-island {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: min(100%, 920px) !important;
  margin: var(--space-10) auto var(--space-9) !important;
  padding: 18px 20px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(232, 237, 242, 0.16) !important;
  background: linear-gradient(180deg, #24263A 0%, #1F2133 100%) !important;
  box-shadow: 0 18px 38px rgba(28, 28, 46, 0.14) !important;
  overflow: hidden !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island::before,
body.pricing-page .pricing-control-island::before {
  inset: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, rgba(102, 155, 188, 0.08), transparent 44%, rgba(102, 155, 188, 0.06)) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
body.pricing-page .pricing-control-island .pricing-toggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle,
body.pricing-page .pricing-control-island .pricing-subtoggle {
  display: grid !important;
  gap: 4px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(232, 237, 242, 0.18) !important;
  background: rgba(232, 237, 242, 0.065) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
body.pricing-page .pricing-control-island .pricing-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(100%, 620px) !important;
  justify-self: center !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle,
body.pricing-page .pricing-control-island .pricing-subtoggle {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before,
body.pricing-page .pricing-control-island .pricing-toggle::before,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle::before,
body.pricing-page .pricing-control-island .pricing-subtoggle::before {
  top: 4px !important;
  bottom: 4px !important;
  left: 4px !important;
  border-radius: 6px !important;
  background: var(--pricing-highlight, #669BBC) !important;
  box-shadow: 0 8px 18px rgba(5, 8, 18, 0.16) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before,
body.pricing-page .pricing-control-island .pricing-toggle::before {
  width: calc((100% - 12px) / 2) !important;
  transform: translateX(calc(var(--pricing-type-index) * (100% + 4px))) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle::before,
body.pricing-page .pricing-control-island .pricing-subtoggle::before {
  width: calc((100% - 24px) / 5) !important;
  transform: translateX(calc(var(--pricing-level-index) * (100% + 4px))) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 0.84rem !important;
  line-height: 1 !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-level-rail,
body.pricing-page .pricing-level-rail {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.88fr) minmax(320px, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  width: min(100%, 820px) !important;
  justify-self: center !important;
  margin: 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(232, 237, 242, 0.12) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback,
body.pricing-page .pricing-control-island .pricing-level-feedback {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(232, 237, 242, 0.18) !important;
  background: rgba(232, 237, 242, 0.065) !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
  body.pricing-page .pricing-control-island {
    gap: 12px !important;
    padding: 14px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-level-rail,
  body.pricing-page .pricing-level-rail {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-height: 150px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
  body.pricing-page .pricing-control-island .pricing-toggle {
    width: 100% !important;
  }
}

/* v0.6.35 homepage stability: no clipped carousel cards or ghost banner text. */
html[data-i18n-title="meta.home.title"] .tagline-banner {
  padding-block: clamp(38px, 5vw, 58px) !important;
  background:
    linear-gradient(180deg, #EEF5F9 0%, #F6FAFC 100%) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  border-block: 1px solid rgba(102, 155, 188, 0.12) !important;
}

html[data-i18n-title="meta.home.title"] .tagline-banner::before {
  content: none !important;
  display: none !important;
}

html[data-i18n-title="meta.home.title"] .tagline-main {
  color: var(--ta-ink, #1C1C2E) !important;
  font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

html[data-i18n-title="meta.home.title"] .tagline-sub {
  color: rgba(28, 28, 46, 0.68) !important;
  font-size: 1rem !important;
}

html[data-i18n-title="meta.home.title"] #programmes {
  background:
    linear-gradient(180deg, #F6FAFC 0%, #FFFFFF 36%, #F4F8FB 100%) !important;
}

html[data-i18n-title="meta.home.title"] #promise {
  background:
    linear-gradient(180deg, #F4F8FB 0%, #EEF5F9 100%) !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper {
  overflow: visible !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper::before,
html[data-i18n-title="meta.home.title"] .promise-wrapper::after {
  content: none !important;
  display: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  transform: none !important;
  transition: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-card {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 192px !important;
  padding: 24px !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 30px rgba(28, 28, 46, 0.07) !important;
  transform: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-card:hover {
  transform: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-icon {
  border-radius: 8px !important;
}

html[data-i18n-title="meta.home.title"] .promise-controls {
  display: none !important;
}

@media (max-width: 960px) {
  html[data-i18n-title="meta.home.title"] .promise-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html[data-i18n-title="meta.home.title"] .promise-track {
    grid-template-columns: 1fr !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-card {
    min-height: 0 !important;
  }
}

/* v0.6.36 pricing recovery: keep the system, restore breathing room. */
html[data-i18n-title="meta.pricing.title"] .pricing-plan-shell,
body.pricing-page .pricing-plan-shell {
  background:
    linear-gradient(180deg, #EEF5F9 0%, #E8EDF2 100%) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
body.pricing-page .pricing-control-island {
  width: min(100%, 920px) !important;
  gap: 18px !important;
  margin: 34px auto 22px !important;
  padding: 22px 24px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, #27293D 0%, #202235 100%) !important;
  box-shadow: 0 18px 34px rgba(28, 28, 46, 0.13) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
body.pricing-page .pricing-control-island .pricing-toggle {
  width: min(100%, 620px) !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 5px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle,
body.pricing-page .pricing-control-island .pricing-subtoggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback,
body.pricing-page .pricing-control-island .pricing-level-feedback {
  height: 44px !important;
  min-height: 44px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before,
body.pricing-page .pricing-control-island .pricing-toggle::before {
  top: 5px !important;
  bottom: 5px !important;
  left: 5px !important;
  width: calc((100% - 14px) / 2) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn {
  height: 40px !important;
  min-height: 40px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-level-rail,
body.pricing-page .pricing-level-rail {
  width: min(100%, 820px) !important;
  padding-top: 16px !important;
  gap: 14px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
body.pricing-page .pricing-promo-strip {
  width: min(760px, 100%) !important;
  margin: 18px auto 46px !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  border-left-width: 4px !important;
  box-shadow: 0 16px 34px rgba(28, 28, 46, 0.07) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-code,
body.pricing-page .pricing-promo-strip .pricing-opening-code {
  border-radius: 8px !important;
}

html[data-i18n-title="meta.pricing.title"] #grup .price-grid,
body.pricing-page #grup .price-grid,
html[data-i18n-title="meta.pricing.title"] #birebir .price-grid,
body.pricing-page #birebir .price-grid {
  margin-top: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card,
body.pricing-page .price-card {
  border-top-width: 5px !important;
  box-shadow: 0 16px 30px rgba(28, 28, 46, 0.07) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured,
body.pricing-page .price-card.featured {
  box-shadow:
    0 18px 34px rgba(137, 52, 105, 0.10),
    0 0 0 1px rgba(137, 52, 105, 0.08) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card.featured::before,
html[data-i18n-title="meta.pricing.title"] .pricing-card.featured::before,
body.pricing-page .price-card.featured::before,
body.pricing-page .pricing-card.featured::before {
  top: -15px !important;
  border-radius: 8px !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
  body.pricing-page .pricing-control-island {
    margin-top: 24px !important;
    padding: 14px !important;
  }

  html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
  body.pricing-page .pricing-promo-strip {
    margin-bottom: 30px !important;
  }
}

/* v0.6.37 smoother hero-to-content dissolve. */
html[data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(118px, 15vw, 210px) !important;
  background:
    linear-gradient(180deg,
      rgba(15, 22, 36, 0) 0%,
      rgba(15, 22, 36, 0.10) 18%,
      rgba(140, 158, 174, 0.22) 45%,
      rgba(226, 235, 242, 0.70) 76%,
      #EFF5F9 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features {
  padding-top: clamp(72px, 8vw, 104px) !important;
  background:
    linear-gradient(180deg,
      #EFF5F9 0%,
      #F5F9FC 20%,
      #FFFFFF 56%,
      #F6FAFC 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: clamp(-112px, -8vw, -72px) !important;
  height: clamp(112px, 9vw, 150px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: none !important;
  width: auto !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg,
      rgba(239, 245, 249, 0) 0%,
      rgba(239, 245, 249, 0.62) 64%,
      #EFF5F9 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features > .container {
  position: relative !important;
  z-index: 1 !important;
}

/* v0.6.38 homepage contact header centering. */
html[data-i18n-title="meta.home.title"] #contact .section-header {
  text-align: center !important;
  max-width: 780px !important;
  margin-inline: auto !important;
}

html[data-i18n-title="meta.home.title"] #contact .section-label {
  justify-content: center !important;
}

html[data-i18n-title="meta.home.title"] #contact .section-label::before {
  display: none !important;
}

html[data-i18n-title="meta.home.title"] #contact .section-title,
html[data-i18n-title="meta.home.title"] #contact .section-desc {
  margin-inline: auto !important;
  text-align: center !important;
}

/* v0.6.39 restore the polished footer spotlight band without the broken giant crop. */
.footer-new .footer-ta-band {
  display: block !important;
  order: 2 !important;
  position: relative !important;
  min-height: clamp(148px, 15vw, 224px) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(232, 237, 242, 0.08) !important;
  border-bottom: 1px solid rgba(232, 237, 242, 0.08) !important;
  background:
    radial-gradient(560px 220px at var(--x, 50%) var(--y, 82%), rgba(102, 155, 188, 0.20), transparent 68%),
    radial-gradient(820px 280px at 18% 15%, rgba(102, 155, 188, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(11, 19, 35, 0.20) 0%, rgba(8, 13, 24, 0.82) 100%) !important;
  cursor: crosshair !important;
}

.footer-new .footer-ta-stage {
  position: relative !important;
  display: flex !important;
  min-height: clamp(148px, 15vw, 224px) !important;
  padding: clamp(24px, 3vw, 38px) var(--space-4) clamp(28px, 3.2vw, 44px) !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: clamp(6px, 0.9vw, 10px) !important;
  overflow: hidden !important;
  transform: none !important;
}

.footer-new .footer-ta-text {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  min-width: 0 !important;
  transform: none !important;
  font-family: var(--font-latin, 'Poppins', system-ui, sans-serif) !important;
  font-size: clamp(54px, 10.2vw, 154px) !important;
  font-weight: 900 !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: transparent !important;
  opacity: 0.76 !important;
  background:
    linear-gradient(96deg,
      rgba(232, 237, 242, 0.18) 0%,
      rgba(232, 237, 242, 0.52) 28%,
      rgba(253, 240, 213, 0.74) 50%,
      rgba(102, 155, 188, 0.56) 72%,
      rgba(232, 237, 242, 0.24) 100%) !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(253, 240, 213, 0.05) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-mask-image:
    radial-gradient(ellipse 620px 250px at var(--x, 50%) var(--y, 84%),
      #000 0%,
      rgba(0, 0, 0, 0.82) 42%,
      rgba(0, 0, 0, 0.34) 68%,
      transparent 88%) !important;
  mask-image:
    radial-gradient(ellipse 620px 250px at var(--x, 50%) var(--y, 84%),
      #000 0%,
      rgba(0, 0, 0, 0.82) 42%,
      rgba(0, 0, 0, 0.34) 68%,
      transparent 88%) !important;
  text-shadow:
    0 0 28px rgba(102, 155, 188, 0.14),
    0 0 54px rgba(253, 240, 213, 0.05) !important;
  white-space: nowrap !important;
  filter: none !important;
}

.footer-new .footer-ta-band:not(:hover):not(.is-spotlight-active) .footer-ta-text {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%) !important;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%) !important;
  opacity: 0.42 !important;
}

.footer-new .footer-ta-band:hover .footer-ta-text,
.footer-new .footer-ta-band:focus-within .footer-ta-text,
.footer-new .footer-ta-band.is-spotlight-active .footer-ta-text {
  opacity: 0.92 !important;
  text-shadow:
    0 0 30px rgba(253, 240, 213, 0.12),
    0 0 46px rgba(102, 155, 188, 0.24) !important;
}

.footer-new .footer-ta-tagline {
  display: block !important;
  margin: 0 !important;
  font-family: var(--font-serif, 'Lora', Georgia, serif) !important;
  font-size: clamp(0.96rem, 1.3vw, 1.18rem) !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  color: rgba(253, 240, 213, 0.72) !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.footer-new .footer-ta-tagline::before {
  content: "- " !important;
}

.footer-new .footer-ta-tagline::after {
  content: " -" !important;
}

@media (max-width: 760px) {
  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(112px, 32vw, 154px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(38px, 14vw, 76px) !important;
  }
}

/* v0.6.40 shared premium CTA gradient from the homepage hero button. */
:root {
  --ta-cta-gradient: linear-gradient(180deg, #26364F 0%, var(--ta-ink, #1C1C2E) 100%);
  --ta-cta-gradient-hover: linear-gradient(180deg, #2C4664 0%, #20263A 100%);
  --ta-cta-border: rgba(102, 155, 188, 0.34);
  --ta-cta-border-hover: rgba(232, 237, 242, 0.32);
  --ta-cta-shadow:
    0 12px 26px rgba(28, 28, 46, 0.22),
    0 0 0 1px rgba(102, 155, 188, 0.12);
  --ta-cta-shadow-hover:
    0 14px 30px rgba(28, 28, 46, 0.28),
    0 0 0 1px rgba(253, 240, 213, 0.10);
}

.btn-primary,
.btn-secondary,
button.btn-primary,
form .btn-primary,
.contact-home-form .btn-primary,
.price-card .btn.btn-primary,
.price-card.featured .btn.btn-primary,
.pricing-cta-section .btn-primary,
.programme-final-cta .btn-primary,
.programme-hero .btn-primary,
.page-header .btn-primary,
.mobile-sticky-cta .btn-primary,
.trial-strip .btn,
.tally-popup-button,
html[data-i18n-title="meta.pricing.title"] .btn.btn-primary,
html[data-i18n-title="meta.pricing.title"] .trial-strip .btn,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .btn.btn-primary {
  background: var(--ta-cta-gradient) !important;
  border-color: var(--ta-cta-border) !important;
  color: #FFFFFF !important;
  box-shadow: var(--ta-cta-shadow) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible,
form .btn-primary:hover,
form .btn-primary:focus-visible,
.contact-home-form .btn-primary:hover,
.contact-home-form .btn-primary:focus-visible,
.price-card .btn.btn-primary:hover,
.price-card .btn.btn-primary:focus-visible,
.price-card.featured .btn.btn-primary:hover,
.price-card.featured .btn.btn-primary:focus-visible,
.pricing-cta-section .btn-primary:hover,
.pricing-cta-section .btn-primary:focus-visible,
.programme-final-cta .btn-primary:hover,
.programme-final-cta .btn-primary:focus-visible,
.programme-hero .btn-primary:hover,
.programme-hero .btn-primary:focus-visible,
.page-header .btn-primary:hover,
.page-header .btn-primary:focus-visible,
.mobile-sticky-cta .btn-primary:hover,
.mobile-sticky-cta .btn-primary:focus-visible,
.trial-strip .btn:hover,
.trial-strip .btn:focus-visible,
.tally-popup-button:hover,
.tally-popup-button:focus-visible,
html[data-i18n-title="meta.pricing.title"] .btn.btn-primary:hover,
html[data-i18n-title="meta.pricing.title"] .btn.btn-primary:focus-visible,
html[data-i18n-title="meta.pricing.title"] .trial-strip .btn:hover,
html[data-i18n-title="meta.pricing.title"] .trial-strip .btn:focus-visible,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .btn.btn-primary:hover,
html[data-i18n-title="meta.pricing.title"] .price-card.featured .btn.btn-primary:focus-visible {
  background: var(--ta-cta-gradient-hover) !important;
  border-color: var(--ta-cta-border-hover) !important;
  color: #FFFFFF !important;
  box-shadow: var(--ta-cta-shadow-hover) !important;
}

/* v0.6.41 consolidation: WhatsApp glow, pricing rhythm, nav artifact guard, dark homepage. */
.whatsapp-float::before {
  inset: 8px !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(37, 211, 102, 0.08), transparent 62%),
    rgba(102, 155, 188, 0.08) !important;
}

.whatsapp-float::after {
  inset: 10px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid rgba(37, 211, 102, 0.56) !important;
  box-shadow:
    0 0 0 1px rgba(37, 211, 102, 0.08),
    0 0 14px rgba(37, 211, 102, 0.18) !important;
  animation: whatsappInnerPulse 2.8s ease-in-out infinite !important;
}

@keyframes whatsappInnerPulse {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::after {
    animation: none !important;
  }
}

.navbar {
  background:
    linear-gradient(90deg,
      rgba(12, 18, 31, 0.97) 0%,
      rgba(15, 23, 38, 0.96) 58%,
      rgba(18, 29, 43, 0.92) 100%) !important;
  overflow: hidden !important;
}

.navbar::after {
  height: 36px !important;
  opacity: 0.38 !important;
  background:
    linear-gradient(180deg,
      rgba(12, 18, 31, 0.24) 0%,
      rgba(12, 18, 31, 0.10) 52%,
      rgba(12, 18, 31, 0) 100%) !important;
}

.navbar-inner,
.nav-actions,
.nav-actions a[href*="student-panel.html"],
.lang-switch-toggle,
.theme-toggle.ta-theme-toggle {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.nav-actions a[href*="student-panel.html"] {
  background:
    linear-gradient(180deg, rgba(38, 54, 79, 0.96), rgba(28, 28, 46, 0.96)) padding-box,
    linear-gradient(135deg, rgba(232, 237, 242, 0.34), rgba(102, 155, 188, 0.36)) border-box !important;
  box-shadow:
    0 10px 22px rgba(5, 8, 18, 0.20),
    0 0 0 1px rgba(232, 237, 242, 0.07) inset !important;
}

body.lang-switching .navbar,
body.lang-switching .navbar-inner,
body.lang-switching .nav-actions {
  opacity: 1 !important;
  transform: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-plan-header,
body.pricing-page .pricing-plan-header {
  margin-bottom: clamp(22px, 2.6vw, 34px) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
body.pricing-page .pricing-control-island {
  width: min(100%, 920px) !important;
  margin: clamp(24px, 3vw, 34px) auto 18px !important;
  padding: 22px 24px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
body.pricing-page .pricing-promo-strip {
  width: min(760px, calc(100% - 32px)) !important;
  margin: 18px auto 36px !important;
}

html[data-i18n-title="meta.pricing.title"] .tabpanel.active,
body.pricing-page .tabpanel.active {
  margin-top: 0 !important;
}

html[data-i18n-title="meta.pricing.title"] #grup .price-grid,
body.pricing-page #grup .price-grid {
  max-width: 1140px !important;
  margin: 0 auto !important;
  gap: clamp(24px, 2.8vw, 32px) !important;
}

html[data-i18n-title="meta.pricing.title"] #birebir .trial-strip,
body.pricing-page #birebir .trial-strip {
  max-width: 1140px !important;
  margin: 0 auto 0 !important;
}

html[data-i18n-title="meta.pricing.title"] #birebir .price-grid,
body.pricing-page #birebir .price-grid {
  max-width: 1140px !important;
  margin: 24px auto 0 !important;
  gap: clamp(24px, 2.8vw, 32px) !important;
}

html[data-i18n-title="meta.pricing.title"] .price-card,
body.pricing-page .price-card {
  border-radius: 8px !important;
  overflow: visible !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] body {
  background: #0F1726 !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(96px, 12vw, 168px) !important;
  background:
    linear-gradient(180deg,
      rgba(15, 22, 36, 0) 0%,
      rgba(15, 22, 36, 0.52) 46%,
      #101928 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #features,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #how-it-works,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #counters,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .tagline-banner,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #programmes,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #promise,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #contact,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #newsletter {
  background:
    linear-gradient(180deg, #101928 0%, #111C2D 52%, #0F1726 100%) !important;
  color: rgba(232, 237, 242, 0.92) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #features::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: clamp(-98px, -7vw, -62px) !important;
  height: clamp(98px, 8vw, 138px) !important;
  background:
    linear-gradient(180deg,
      rgba(16, 25, 40, 0) 0%,
      rgba(16, 25, 40, 0.70) 58%,
      #101928 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .section-title,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .section-desc,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #features .section-title,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #features .section-desc {
  color: rgba(232, 237, 242, 0.92) !important;
  text-shadow: none !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .section-label {
  color: rgba(102, 155, 188, 0.96) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .card,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .feature-card,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .programme-card,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-card,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .contact-home-form,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .channel-card {
  background: #17243A !important;
  border-color: rgba(232, 237, 242, 0.16) !important;
  color: rgba(232, 237, 242, 0.92) !important;
}

/* v0.6.42 pricing hash-load and WhatsApp ring corrections. */
.whatsapp-float::after {
  top: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  left: 10px !important;
  width: auto !important;
  height: auto !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-plan-shell .animate-in,
body.pricing-page .pricing-plan-shell .animate-in {
  opacity: 1 !important;
  transform: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
body.pricing-page .pricing-promo-strip {
  margin-bottom: 28px !important;
}

html[data-i18n-title="meta.pricing.title"] #birebir .price-grid,
body.pricing-page #birebir .price-grid {
  margin-top: 22px !important;
}

/* v0.6.43 final visual sweep: seamless footer, tighter hero flow, calmer controls. */
html[data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(82px, 9vw, 138px) !important;
  background:
    linear-gradient(180deg,
      rgba(15, 22, 36, 0) 0%,
      rgba(15, 22, 36, 0.10) 26%,
      rgba(160, 176, 190, 0.20) 56%,
      rgba(239, 245, 249, 0.86) 86%,
      #EFF5F9 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features {
  padding-top: clamp(48px, 5.8vw, 76px) !important;
}

html[data-i18n-title="meta.home.title"] #features::before {
  top: clamp(-76px, -5.8vw, -48px) !important;
  height: clamp(76px, 6.4vw, 104px) !important;
  background:
    linear-gradient(180deg,
      rgba(239, 245, 249, 0) 0%,
      rgba(239, 245, 249, 0.56) 64%,
      #EFF5F9 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(78px, 8vw, 126px) !important;
  background:
    linear-gradient(180deg,
      rgba(15, 22, 36, 0) 0%,
      rgba(15, 22, 36, 0.44) 54%,
      #101928 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #features::before {
  top: clamp(-74px, -5.4vw, -46px) !important;
  height: clamp(74px, 6vw, 98px) !important;
}

.hero-stats {
  gap: clamp(16px, 3vw, 40px) !important;
  padding: clamp(16px, 2vw, 22px) !important;
}

.hero-stat {
  min-width: clamp(128px, 12vw, 168px) !important;
  border-radius: 8px !important;
}

.hero-stat-value {
  font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
}

.hero-stat-label {
  line-height: 1.25 !important;
  overflow-wrap: normal !important;
}

.navbar .nav-links .nav-link:hover,
.navbar .nav-links .nav-link.active,
.navbar .nav-links .nav-link:focus-visible {
  background: rgba(232, 237, 242, 0.07) !important;
  border-color: rgba(232, 237, 242, 0.10) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
body.pricing-page .pricing-control-island {
  width: min(100%, 920px) !important;
  margin-bottom: 20px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn.active,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn.active,
body.pricing-page .pricing-control-island .pricing-toggle-btn.active,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn.active {
  outline: 0 !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn:focus-visible,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-toggle-btn:focus-visible,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn:focus-visible {
  outline: 2px solid rgba(232, 237, 242, 0.34) !important;
  outline-offset: 2px !important;
}

.programme-final-cta .container > div {
  gap: 14px !important;
  align-items: stretch !important;
}

.programme-final-cta .btn {
  width: auto !important;
  min-width: min(100%, 286px) !important;
  max-width: 100% !important;
  min-height: 58px !important;
  border-radius: 14px !important;
  padding-inline: clamp(22px, 3vw, 34px) !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

.programme-final-cta .btn-outline {
  flex: 0 1 340px !important;
}

.programme-final-cta .btn-primary {
  flex: 0 1 286px !important;
}

@media (max-width: 680px) {
  .programme-final-cta .btn,
  .programme-final-cta .btn-primary,
  .programme-final-cta .btn-outline {
    flex: 1 1 100% !important;
    width: min(100%, 360px) !important;
  }
}

.footer-new {
  background:
    radial-gradient(760px 420px at 18% 16%, rgba(102, 155, 188, 0.11), transparent 64%),
    radial-gradient(920px 460px at 82% 82%, rgba(102, 155, 188, 0.13), transparent 66%),
    linear-gradient(180deg, #10192B 0%, #0B1323 46%, #080D18 78%, #07080F 100%) !important;
}

.footer-main,
.footer-new .footer-ta-band,
.footer-bottom-new {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.footer-main {
  padding-bottom: clamp(28px, 3.6vw, 52px) !important;
}

.footer-new .footer-ta-band {
  min-height: clamp(128px, 13vw, 188px) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.footer-new .footer-ta-stage {
  min-height: clamp(128px, 13vw, 188px) !important;
  padding-block: clamp(18px, 2.4vw, 28px) clamp(22px, 2.8vw, 34px) !important;
}

.footer-new .footer-ta-text {
  opacity: 0.34 !important;
  font-size: clamp(52px, 9.2vw, 138px) !important;
  background:
    linear-gradient(96deg,
      rgba(232, 237, 242, 0.15) 0%,
      rgba(232, 237, 242, 0.42) 34%,
      rgba(253, 240, 213, 0.62) 52%,
      rgba(102, 155, 188, 0.44) 72%,
      rgba(232, 237, 242, 0.22) 100%) !important;
}

.footer-new .footer-ta-band:not(:hover):not(.is-spotlight-active) .footer-ta-text {
  opacity: 0.28 !important;
}

.footer-bottom-new {
  padding-top: 22px !important;
}

/* v0.6.44 polish: remove the homepage fade shelf, compact the footer wordmark, and soften pricing controls. */
html[data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(150px, 13vw, 218px) !important;
  background:
    linear-gradient(180deg,
      rgba(15, 22, 36, 0) 0%,
      rgba(15, 22, 36, 0.16) 24%,
      rgba(78, 96, 116, 0.24) 46%,
      rgba(202, 216, 226, 0.48) 70%,
      rgba(239, 245, 249, 0.86) 90%,
      #EFF5F9 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features {
  margin-top: clamp(-74px, -5vw, -48px) !important;
  padding-top: clamp(86px, 7vw, 112px) !important;
  background:
    linear-gradient(180deg,
      #EFF5F9 0%,
      #F4F8FB 34%,
      #FFFFFF 70%,
      #F7FAFC 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features::before {
  top: clamp(-138px, -9vw, -92px) !important;
  height: clamp(138px, 10vw, 188px) !important;
  background:
    linear-gradient(180deg,
      rgba(239, 245, 249, 0) 0%,
      rgba(239, 245, 249, 0.26) 34%,
      rgba(239, 245, 249, 0.72) 74%,
      #EFF5F9 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(132px, 11vw, 190px) !important;
  background:
    linear-gradient(180deg,
      rgba(15, 22, 36, 0) 0%,
      rgba(15, 22, 36, 0.30) 38%,
      rgba(16, 25, 40, 0.78) 78%,
      #101928 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #features {
  margin-top: clamp(-64px, -4.6vw, -42px) !important;
  padding-top: clamp(82px, 6.8vw, 108px) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #features::before {
  top: clamp(-120px, -8vw, -82px) !important;
  height: clamp(120px, 9vw, 168px) !important;
  background:
    linear-gradient(180deg,
      rgba(16, 25, 40, 0) 0%,
      rgba(16, 25, 40, 0.38) 42%,
      rgba(16, 25, 40, 0.84) 78%,
      #101928 100%) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
body.pricing-page .pricing-control-island {
  border-radius: 18px !important;
  padding: clamp(24px, 2.6vw, 30px) clamp(28px, 3vw, 38px) !important;
  background:
    linear-gradient(180deg, rgba(43, 49, 70, 0.98), rgba(36, 42, 63, 0.98)) !important;
  box-shadow:
    0 24px 54px rgba(28, 28, 46, 0.16),
    0 1px 0 rgba(232, 237, 242, 0.08) inset !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-toggle,
html[data-i18n-title="meta.pricing.title"] .pricing-subtoggle,
html[data-i18n-title="meta.pricing.title"] .pricing-level-indicator,
body.pricing-page .pricing-toggle,
body.pricing-page .pricing-subtoggle,
body.pricing-page .pricing-level-indicator {
  border-radius: 14px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback,
body.pricing-page .pricing-control-island .pricing-toggle,
body.pricing-page .pricing-control-island .pricing-subtoggle,
body.pricing-page .pricing-control-island .pricing-level-feedback {
  border-radius: 14px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-subtoggle-btn,
body.pricing-page .pricing-toggle-btn,
body.pricing-page .pricing-subtoggle-btn {
  border-radius: 11px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle::before,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle::before,
body.pricing-page .pricing-control-island .pricing-toggle::before,
body.pricing-page .pricing-control-island .pricing-subtoggle::before {
  border-radius: 11px !important;
}

.footer-main {
  padding-bottom: clamp(14px, 1.9vw, 26px) !important;
}

.footer-new .footer-ta-band {
  min-height: clamp(84px, 8vw, 124px) !important;
}

.footer-new .footer-ta-stage {
  min-height: clamp(84px, 8vw, 124px) !important;
  padding-block: clamp(10px, 1.25vw, 15px) clamp(12px, 1.45vw, 18px) !important;
  gap: clamp(3px, 0.55vw, 7px) !important;
}

.footer-new .footer-ta-text {
  font-size: clamp(38px, 6.6vw, 92px) !important;
  line-height: 0.86 !important;
  opacity: 0.30 !important;
}

.footer-new .footer-ta-band:not(:hover):not(.is-spotlight-active) .footer-ta-text {
  opacity: 0.24 !important;
}

.footer-new .footer-ta-tagline {
  font-size: clamp(0.88rem, 1.05vw, 1rem) !important;
  color: rgba(253, 240, 213, 0.66) !important;
}

.footer-bottom-new {
  padding-top: 16px !important;
}

/* v0.6.45 ordered polish: nav rhythm, dropdown reliability, carousel return, QAERA-style footer. */
.navbar {
  z-index: 1200 !important;
  overflow: visible !important;
}

.navbar-inner {
  display: grid !important;
  grid-template-columns: minmax(150px, 208px) minmax(0, 1fr) auto auto !important;
  gap: clamp(12px, 1.4vw, 22px) !important;
  align-items: center !important;
}

.navbar-logo {
  min-width: 0 !important;
}

.navbar-logo .ta-lockup-logo-nav {
  width: clamp(150px, 13vw, 184px) !important;
}

.navbar .nav-links {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, 0.55vw, 10px) !important;
  min-width: 0 !important;
}

.navbar .nav-links .nav-link {
  min-height: 42px !important;
  padding: 10px clamp(10px, 1.05vw, 16px) !important;
  border-radius: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html[lang="tr"] .navbar .nav-links,
html[dir="ltr"] .navbar .nav-links {
  gap: clamp(3px, 0.45vw, 8px) !important;
}

html[lang="tr"] .navbar .nav-links .nav-link {
  padding-inline: clamp(8px, 0.85vw, 13px) !important;
}

.navbar .nav-actions {
  justify-self: end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.nav-dropdown {
  z-index: 1250 !important;
}

.nav-dropdown::after {
  height: 24px !important;
}

.nav-submenu {
  top: calc(100% + 10px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(8px) !important;
  z-index: 1400 !important;
  min-width: 272px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(28, 28, 46, 0.98), rgba(16, 42, 68, 0.98)) !important;
  border: 1px solid rgba(139, 183, 210, 0.34) !important;
  box-shadow:
    0 22px 46px rgba(5, 9, 18, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.nav-dropdown.open .nav-submenu,
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  transform: translateX(-50%) translateY(0) !important;
}

.nav-submenu-link {
  color: rgba(232, 237, 242, 0.9) !important;
  border-radius: 11px !important;
}

.nav-submenu-link:hover,
.nav-submenu-link:focus-visible {
  background: rgba(102, 155, 188, 0.18) !important;
  color: #fff !important;
}

html[data-i18n-title="meta.home.title"] #promise {
  background:
    linear-gradient(180deg, #F4F8FB 0%, #EEF5F9 100%) !important;
  overflow: hidden !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper {
  overflow: hidden !important;
  padding-inline: clamp(10px, 1.6vw, 22px) !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper::before,
html[data-i18n-title="meta.home.title"] .promise-wrapper::after {
  content: "" !important;
  display: block !important;
  top: 0 !important;
  bottom: 72px !important;
  width: clamp(22px, 4vw, 58px) !important;
  background: linear-gradient(90deg, #F4F8FB 0%, rgba(244, 248, 251, 0) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper::after {
  background: linear-gradient(270deg, #F4F8FB 0%, rgba(244, 248, 251, 0) 100%) !important;
}

html[data-i18n-title="meta.home.title"] .promise-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform !important;
}

html[data-i18n-title="meta.home.title"] .promise-card {
  min-width: 100% !important;
  width: auto !important;
  flex: 0 0 100% !important;
  min-height: 196px !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 30px rgba(28, 28, 46, 0.07) !important;
}

html[data-i18n-title="meta.home.title"] .promise-controls {
  display: flex !important;
  margin-top: 24px !important;
}

html[data-i18n-title="meta.home.title"] .promise-prev,
html[data-i18n-title="meta.home.title"] .promise-next {
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(102, 155, 188, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(238, 245, 249, 0.92)) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: 0 10px 22px rgba(16, 42, 68, 0.08) !important;
}

html[data-i18n-title="meta.home.title"] .promise-prev:hover,
html[data-i18n-title="meta.home.title"] .promise-next:hover,
html[data-i18n-title="meta.home.title"] .promise-prev:focus-visible,
html[data-i18n-title="meta.home.title"] .promise-next:focus-visible {
  border-color: rgba(102, 155, 188, 0.78) !important;
  background:
    linear-gradient(135deg, rgba(28, 48, 78, 0.98), rgba(24, 36, 62, 0.98)) !important;
  color: #fff !important;
}

@media (min-width: 641px) {
  html[data-i18n-title="meta.home.title"] .promise-card {
    min-width: calc(50% - 9px) !important;
    flex-basis: calc(50% - 9px) !important;
  }
}

@media (min-width: 961px) {
  html[data-i18n-title="meta.home.title"] .promise-card {
    min-width: calc((100% - 36px) / 3) !important;
    flex-basis: calc((100% - 36px) / 3) !important;
  }
}

.footer-new {
  background:
    radial-gradient(circle at 50% 100%, rgba(102, 155, 188, 0.16), transparent 34%),
    radial-gradient(circle at 72% 92%, rgba(181, 113, 20, 0.12), transparent 24%),
    linear-gradient(180deg, #101A2B 0%, #091120 42%, #060A12 100%) !important;
  overflow: hidden !important;
}

.footer-main {
  padding-bottom: clamp(20px, 2.6vw, 34px) !important;
}

.footer-bottom-new {
  position: relative !important;
  z-index: 2 !important;
  padding-block: clamp(14px, 1.7vw, 22px) !important;
  background: transparent !important;
  border-top: 1px solid rgba(232, 237, 242, 0.1) !important;
  border-bottom: 1px solid rgba(232, 237, 242, 0.08) !important;
}

.footer-new .footer-ta-band {
  position: relative !important;
  min-height: clamp(118px, 15vw, 236px) !important;
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0), rgba(6, 10, 18, 0.86) 42%, #050811 100%) !important;
  border-top: 0 !important;
  cursor: crosshair !important;
  overflow: hidden !important;
}

.footer-new .footer-ta-band::before {
  opacity: 0.3 !important;
}

.footer-new .footer-ta-band::after {
  height: 1px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(102, 155, 188, 0.22) 28%, rgba(253, 240, 213, 0.18) 50%, rgba(181, 113, 20, 0.22) 72%, transparent 100%) !important;
}

.footer-new .footer-ta-stage {
  min-height: clamp(118px, 15vw, 236px) !important;
  padding: 0 !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.footer-new .footer-ta-text {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(72px, 16vw, 230px) !important;
  font-weight: 900 !important;
  line-height: 0.74 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  opacity: 0.58 !important;
  transform: translateY(5%) !important;
  background:
    linear-gradient(145deg, rgba(232, 237, 242, 0.1) 0%, rgba(253, 240, 213, 0.56) 40%, rgba(181, 113, 20, 0.42) 68%, rgba(139, 183, 210, 0.32) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.footer-new .footer-ta-band:not(:hover):not(.is-spotlight-active) .footer-ta-text {
  opacity: 0.42 !important;
}

.footer-new .footer-ta-tagline {
  display: none !important;
}

@media (max-width: 960px) {
  .navbar-inner {
    grid-template-columns: auto 1fr auto auto !important;
    gap: 8px !important;
  }

  .navbar .nav-links {
    display: none !important;
  }

  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(126px, 37vw, 156px) !important;
  }

  .mobile-menu {
    z-index: 1180 !important;
    padding: clamp(18px, 5vw, 32px) clamp(16px, 5vw, 28px) max(30px, env(safe-area-inset-bottom)) !important;
  }

  .mobile-menu .nav-link {
    min-height: 54px !important;
    border-radius: 16px !important;
  }

  .mobile-menu-programmes {
    width: min(100%, 560px) !important;
    display: grid !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid rgba(232, 237, 242, 0.12) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.035) !important;
  }

  .mobile-menu-section-label {
    display: block !important;
    padding: 4px 8px 2px !important;
    color: rgba(253, 240, 213, 0.72) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }

  .mobile-menu .mobile-menu-sub-link {
    min-height: 48px !important;
    padding: 13px 16px !important;
    font-size: 0.98rem !important;
    border-radius: 14px !important;
  }

  .mobile-menu-login {
    width: min(100%, 560px) !important;
    min-height: 54px !important;
    justify-content: center !important;
  }

  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(92px, 24vw, 136px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(48px, 18vw, 96px) !important;
  }
}

/* v0.6.46 colour unification: one Ink/Steel glass system across nav, hero, menus, and footer. */
:root {
  --ta-nav-glass-1: rgba(14, 21, 35, 0.92);
  --ta-nav-glass-2: rgba(18, 28, 45, 0.88);
  --ta-nav-line: rgba(232, 237, 242, 0.11);
  --ta-hero-ink: #101827;
  --ta-section-mist: #EFF5F9;
}

.navbar {
  background:
    linear-gradient(180deg, rgba(18, 26, 42, 0.94) 0%, rgba(14, 21, 35, 0.88) 100%) !important;
  border-bottom: 1px solid var(--ta-nav-line) !important;
  box-shadow: 0 10px 28px rgba(5, 8, 18, 0.14) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  overflow: visible !important;
}

.navbar::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  height: 22px !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(14, 21, 35, 0.20), rgba(14, 21, 35, 0)) !important;
  opacity: 1 !important;
}

.navbar.scrolled {
  background:
    linear-gradient(180deg, rgba(14, 21, 35, 0.97) 0%, rgba(14, 21, 35, 0.93) 100%) !important;
  border-bottom-color: rgba(232, 237, 242, 0.14) !important;
}

.navbar .nav-links .nav-link,
.nav-actions .btn.btn-outline,
.lang-dropdown-toggle,
.theme-toggle {
  color: rgba(232, 237, 242, 0.86) !important;
}

.navbar .nav-links .nav-link:hover,
.navbar .nav-links .nav-link.active,
.navbar .nav-links .nav-link:focus-visible,
.nav-actions .btn.btn-outline:hover,
.nav-actions .btn.btn-outline:focus-visible {
  background: rgba(232, 237, 242, 0.075) !important;
  border-color: rgba(102, 155, 188, 0.28) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.nav-actions a[href*="student-panel.html"] {
  background:
    linear-gradient(180deg, rgba(38, 54, 79, 0.98), rgba(28, 28, 46, 0.98)) padding-box,
    linear-gradient(135deg, rgba(232, 237, 242, 0.34), rgba(102, 155, 188, 0.42)) border-box !important;
  box-shadow:
    0 10px 24px rgba(5, 8, 18, 0.22),
    0 0 18px rgba(102, 155, 188, 0.08) !important;
}

.nav-submenu,
[data-theme="dark"] .nav-submenu {
  background:
    linear-gradient(180deg, rgba(18, 26, 42, 0.98) 0%, rgba(14, 21, 35, 0.98) 100%) !important;
  border-color: rgba(102, 155, 188, 0.30) !important;
  box-shadow:
    0 22px 44px rgba(5, 8, 18, 0.34),
    inset 0 1px 0 rgba(232, 237, 242, 0.06) !important;
}

.nav-submenu-link,
[data-theme="dark"] .nav-submenu-link {
  color: rgba(232, 237, 242, 0.86) !important;
}

.nav-submenu-link:hover,
.nav-submenu-link:focus-visible,
[data-theme="dark"] .nav-submenu-link:hover,
[data-theme="dark"] .nav-submenu-link:focus-visible {
  background: rgba(102, 155, 188, 0.16) !important;
  color: #FFFFFF !important;
}

html[data-i18n-title="meta.home.title"] .hero {
  background: var(--ta-hero-ink) !important;
}

.hero-bg {
  background:
    linear-gradient(90deg,
      rgba(14, 21, 35, 0.94) 0%,
      rgba(14, 21, 35, 0.86) 34%,
      rgba(14, 21, 35, 0.54) 60%,
      rgba(14, 21, 35, 0.16) 100%) !important;
}

.hero-bg::after {
  background:
    radial-gradient(circle at 26% 42%, rgba(102, 155, 188, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(14, 21, 35, 0) 0%, rgba(14, 21, 35, 0.30) 100%) !important;
}

.hero-media::after {
  background:
    linear-gradient(90deg,
      rgba(14, 21, 35, 0.74) 0%,
      rgba(14, 21, 35, 0.48) 36%,
      rgba(14, 21, 35, 0.12) 70%,
      rgba(14, 21, 35, 0.02) 100%) !important;
}

.hero-media::before {
  background: radial-gradient(circle at 32% 56%, rgba(102, 155, 188, 0.10), transparent 36%) !important;
  opacity: 0.48 !important;
}

html[data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(150px, 14vw, 230px) !important;
  background:
    linear-gradient(180deg,
      rgba(16, 24, 39, 0) 0%,
      rgba(16, 24, 39, 0.12) 22%,
      rgba(80, 99, 118, 0.18) 46%,
      rgba(188, 207, 220, 0.42) 70%,
      rgba(239, 245, 249, 0.88) 92%,
      var(--ta-section-mist) 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features {
  background:
    linear-gradient(180deg, var(--ta-section-mist) 0%, #F7FAFC 58%, #FFFFFF 100%) !important;
}

html[data-i18n-title="meta.home.title"] #features::before {
  background:
    linear-gradient(180deg,
      rgba(239, 245, 249, 0) 0%,
      rgba(239, 245, 249, 0.72) 54%,
      var(--ta-section-mist) 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .hero::after {
  background:
    linear-gradient(180deg,
      rgba(14, 21, 35, 0) 0%,
      rgba(14, 21, 35, 0.44) 52%,
      #101928 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #features,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #features::before {
  background:
    linear-gradient(180deg, #101928 0%, #111C2D 100%) !important;
}

.mobile-menu,
[data-theme="dark"] .mobile-menu {
  background:
    linear-gradient(180deg, rgba(14, 21, 35, 0.98) 0%, rgba(12, 18, 31, 0.99) 100%) !important;
  color: rgba(232, 237, 242, 0.92) !important;
}

.mobile-menu-programmes {
  background: rgba(232, 237, 242, 0.045) !important;
  border-color: rgba(102, 155, 188, 0.20) !important;
}

.mobile-menu .nav-link,
[data-theme="dark"] .mobile-menu .nav-link {
  color: rgba(232, 237, 242, 0.88) !important;
  background: rgba(232, 237, 242, 0.035) !important;
  border: 1px solid rgba(102, 155, 188, 0.14) !important;
  border-bottom-color: rgba(102, 155, 188, 0.14) !important;
}

.mobile-menu .nav-link:hover,
.mobile-menu .nav-link:focus-visible,
.mobile-menu .nav-link.active,
[data-theme="dark"] .mobile-menu .nav-link:hover,
[data-theme="dark"] .mobile-menu .nav-link:focus-visible,
[data-theme="dark"] .mobile-menu .nav-link.active {
  color: #FFFFFF !important;
  background: rgba(102, 155, 188, 0.15) !important;
  border-color: rgba(102, 155, 188, 0.28) !important;
}

.mobile-menu .mobile-lang-dropdown,
.mobile-menu .mobile-menu-login {
  margin-top: 4px !important;
}

.mobile-menu .lang-dropdown-toggle,
[data-theme="dark"] .mobile-menu .lang-dropdown-toggle {
  background: rgba(232, 237, 242, 0.08) !important;
  border-color: rgba(102, 155, 188, 0.22) !important;
  color: rgba(232, 237, 242, 0.92) !important;
}

.mobile-menu .lang-dropdown-menu,
[data-theme="dark"] .mobile-menu .lang-dropdown-menu {
  background: rgba(14, 21, 35, 0.92) !important;
  border-color: rgba(102, 155, 188, 0.18) !important;
}

.mobile-menu .lang-dropdown-menu li,
[data-theme="dark"] .mobile-menu .lang-dropdown-menu li {
  color: rgba(232, 237, 242, 0.86) !important;
}

.mobile-menu .lang-dropdown-menu li:hover,
.mobile-menu .lang-dropdown-menu li.active,
[data-theme="dark"] .mobile-menu .lang-dropdown-menu li:hover,
[data-theme="dark"] .mobile-menu .lang-dropdown-menu li.active {
  background: rgba(102, 155, 188, 0.18) !important;
  color: #FFFFFF !important;
}

html[data-i18n-title="meta.home.title"] .promise-controls {
  position: relative !important;
  z-index: 3 !important;
}

html[data-i18n-title="meta.home.title"] .promise-prev:focus,
html[data-i18n-title="meta.home.title"] .promise-next:focus {
  outline: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-prev:focus-visible,
html[data-i18n-title="meta.home.title"] .promise-next:focus-visible {
  outline: 2px solid rgba(102, 155, 188, 0.54) !important;
  outline-offset: 3px !important;
}

.footer-new {
  background:
    radial-gradient(760px 420px at 18% 10%, rgba(102, 155, 188, 0.10), transparent 64%),
    radial-gradient(860px 420px at 84% 92%, rgba(102, 155, 188, 0.11), transparent 66%),
    linear-gradient(180deg, #101928 0%, #0B1322 52%, #060A12 100%) !important;
}

.footer-bottom-new {
  border-top: 1px solid rgba(232, 237, 242, 0.08) !important;
  border-bottom: 0 !important;
}

.footer-new .footer-ta-band {
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, 0.58) 52%, #050811 100%) !important;
}

.footer-new .footer-ta-band::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(102, 155, 188, 0.20) 34%, rgba(232, 237, 242, 0.16) 50%, rgba(102, 155, 188, 0.20) 66%, transparent 100%) !important;
}

.footer-new .footer-ta-text {
  background:
    linear-gradient(110deg,
      rgba(232, 237, 242, 0.12) 0%,
      rgba(232, 237, 242, 0.46) 42%,
      rgba(102, 155, 188, 0.34) 70%,
      rgba(232, 237, 242, 0.20) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* v0.6.47 final typography/footer stability pass. */
.programme-hero h1,
.page-header h1,
.section-title {
  font-family: var(--font-serif, "Lora", Georgia, serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.programme-hero h1 {
  max-width: min(12ch, 920px) !important;
  margin-inline: auto !important;
  text-align: center !important;
  line-height: 1.02 !important;
}

.programme-hero .hero-subtitle {
  margin-inline: auto !important;
  text-align: center !important;
}

.programme-hero .hero-ctas {
  justify-content: center !important;
}

.footer-main .container,
.footer-grid-new {
  max-width: min(1120px, calc(100vw - 48px)) !important;
  margin-inline: auto !important;
}

.footer-grid-new {
  grid-template-columns: minmax(240px, 0.95fr) repeat(4, minmax(150px, 1fr)) !important;
  column-gap: clamp(34px, 5vw, 76px) !important;
  align-items: start !important;
}

.footer-brand-new {
  align-items: center !important;
  text-align: center !important;
}

.footer-new .footer-ta-band {
  cursor: default !important;
  min-height: clamp(126px, 13vw, 206px) !important;
}

.footer-new .footer-ta-stage {
  width: 100% !important;
  min-height: clamp(126px, 13vw, 206px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.footer-new .footer-ta-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-family: var(--font-serif, "Lora", Georgia, serif) !important;
  font-size: clamp(62px, 11.8vw, 172px) !important;
  font-weight: 700 !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  transform: translateY(4%) !important;
  opacity: 0.46 !important;
  transition: opacity 220ms ease, filter 220ms ease !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 78%, black 0%, rgba(0,0,0,0.58) 45%, transparent 78%) !important;
  mask-image: radial-gradient(ellipse 70% 72% at 50% 78%, black 0%, rgba(0,0,0,0.58) 45%, transparent 78%) !important;
}

.footer-new .footer-ta-band:hover .footer-ta-text,
.footer-new .footer-ta-band:focus-within .footer-ta-text,
.footer-new .footer-ta-band.is-spotlight-active .footer-ta-text {
  opacity: 0.58 !important;
  filter: drop-shadow(0 0 22px rgba(102, 155, 188, 0.16)) !important;
  -webkit-mask-image: radial-gradient(ellipse 82% 80% at 50% 76%, black 0%, rgba(0,0,0,0.68) 52%, transparent 84%) !important;
  mask-image: radial-gradient(ellipse 82% 80% at 50% 76%, black 0%, rgba(0,0,0,0.68) 52%, transparent 84%) !important;
}

.footer-new .footer-ta-band:not(:hover):not(:focus-within):not(.is-spotlight-active) .footer-ta-text {
  opacity: 0.42 !important;
}

@media (max-width: 1120px) {
  .footer-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 34px !important;
  }

  .footer-brand-new {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  .footer-main .container,
  .footer-grid-new {
    max-width: min(100%, calc(100vw - 32px)) !important;
  }

  .footer-grid-new {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(88px, 24vw, 128px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(42px, 16vw, 86px) !important;
  }
}

/* v0.6.48 tagline ornament + non-janky footer reveal. */
.tagline-banner {
  position: relative !important;
  overflow: hidden !important;
}

.tagline-main {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2vw, 26px) !important;
  font-family: var(--font-serif, "Lora", Georgia, serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-inline: auto !important;
}

.tagline-main::before,
.tagline-main::after {
  content: "" !important;
  display: block !important;
  width: clamp(30px, 5vw, 72px) !important;
  height: 1px !important;
  flex: 0 0 auto !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(102, 155, 188, 0.58) 46%, rgba(28, 28, 46, 0.30) 100%) !important;
  box-shadow: 0 0 12px rgba(102, 155, 188, 0.18) !important;
}

.tagline-main::after {
  background:
    linear-gradient(90deg, rgba(28, 28, 46, 0.30) 0%, rgba(102, 155, 188, 0.58) 54%, transparent 100%) !important;
}

[data-theme="dark"] .tagline-main::before,
[data-theme="dark"] .tagline-main::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(139, 183, 210, 0.62) 52%, rgba(232, 237, 242, 0.24) 100%) !important;
  box-shadow: 0 0 14px rgba(102, 155, 188, 0.24) !important;
}

[data-theme="dark"] .tagline-main::after {
  background:
    linear-gradient(90deg, rgba(232, 237, 242, 0.24) 0%, rgba(139, 183, 210, 0.62) 48%, transparent 100%) !important;
}

@media (max-width: 640px) {
  .tagline-main {
    display: grid !important;
    grid-template-columns: minmax(22px, 44px) auto minmax(22px, 44px) !important;
    gap: 10px !important;
  }

  .tagline-main::before,
  .tagline-main::after {
    width: 100% !important;
  }
}

.footer-new .footer-ta-text {
  --x: 50% !important;
  --y: 78% !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.footer-new .footer-ta-band.is-spotlight-active .footer-ta-text {
  transition: opacity 260ms ease, filter 260ms ease !important;
}

/* v0.6.49 nav rail spacing: quiet active state, even label rhythm. */
.navbar .nav-links {
  gap: clamp(10px, 1.15vw, 22px) !important;
}

.navbar .nav-links .nav-link {
  min-height: 38px !important;
  padding: 8px clamp(8px, 0.8vw, 12px) !important;
  border-radius: 9px !important;
  color: rgba(232, 237, 242, 0.82) !important;
  background: transparent !important;
  border-color: transparent !important;
}

.navbar .nav-links .nav-link:hover,
.navbar .nav-links .nav-link:focus-visible {
  color: #FFFFFF !important;
  background: rgba(232, 237, 242, 0.055) !important;
  border-color: rgba(102, 155, 188, 0.16) !important;
}

.navbar .nav-links .nav-link.active {
  color: #FFFFFF !important;
  background: rgba(102, 155, 188, 0.10) !important;
  border-color: rgba(102, 155, 188, 0.20) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 237, 242, 0.03) !important;
}

html[lang="tr"] .navbar .nav-links {
  gap: clamp(6px, 0.8vw, 14px) !important;
}

html[lang="tr"] .navbar .nav-links .nav-link {
  padding-inline: clamp(7px, 0.72vw, 10px) !important;
}

/* v0.6.50 final component lock: footer composition, mobile header controls, tagline and carousel. */
@keyframes taTaglineGlow {
  0%, 100% {
    text-shadow: 0 0 0 rgba(102, 155, 188, 0);
  }
  50% {
    text-shadow:
      0 0 18px rgba(102, 155, 188, 0.18),
      0 0 32px rgba(232, 237, 242, 0.18);
  }
}

.tagline-banner {
  padding-block: clamp(34px, 4.4vw, 58px) !important;
  background:
    linear-gradient(180deg, #EFF5F9 0%, #F7FAFC 100%) !important;
}

.tagline-banner .container {
  width: min(100%, 940px) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.tagline-main {
  display: flex !important;
  width: fit-content !important;
  max-width: min(100%, 860px) !important;
  font-size: clamp(1.75rem, 3vw, 2.45rem) !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  color: var(--ta-ink, #1C1C2E) !important;
  animation: taTaglineGlow 4.8s ease-in-out infinite !important;
}

.tagline-sub {
  max-width: 64ch !important;
  margin: 10px auto 0 !important;
  font-size: clamp(0.96rem, 1.1vw, 1.08rem) !important;
  color: rgba(28, 28, 46, 0.68) !important;
}

.tagline-main::before,
.tagline-main::after {
  width: clamp(36px, 5vw, 82px) !important;
  opacity: 0.78 !important;
}

html[lang="en"] .tagline-main {
  font-size: clamp(1.65rem, 2.65vw, 2.3rem) !important;
}

@media (max-width: 640px) {
  .tagline-banner {
    padding-block: 34px !important;
  }

  .tagline-main {
    display: flex !important;
    width: min(100%, 360px) !important;
    max-width: 100% !important;
    gap: 10px !important;
    font-size: clamp(1.38rem, 6vw, 1.72rem) !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  .tagline-main::before,
  .tagline-main::after {
    width: 34px !important;
  }
}

@media (max-width: 390px) {
  .tagline-main::before,
  .tagline-main::after {
    width: 22px !important;
  }
}

html[data-i18n-title="meta.home.title"] .promise-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

html[data-i18n-title="meta.home.title"] .promise-controls {
  pointer-events: auto !important;
}

html[data-i18n-title="meta.home.title"] .promise-prev,
html[data-i18n-title="meta.home.title"] .promise-next {
  pointer-events: auto !important;
  cursor: pointer !important;
  border-radius: 999px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
}

html[data-i18n-title="meta.home.title"] .promise-track {
  transform: translateX(var(--promise-offset, 0px)) !important;
}

@media (max-width: 960px) {
  .navbar-inner {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 8px !important;
    padding-inline: clamp(12px, 3.8vw, 18px) !important;
  }

  .navbar-logo {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(124px, 34vw, 156px) !important;
  }

  .nav-actions {
    display: flex !important;
    grid-column: 2 !important;
    gap: 6px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  .theme-toggle.ta-theme-toggle {
    display: inline-flex !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-track {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-symbol {
    display: none !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    width: 26px !important;
    height: 26px !important;
    left: 5px !important;
    top: 5px !important;
  }

  html[data-theme="dark"] .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    transform: translateX(6px) !important;
  }

  .lang-switch-toggle {
    width: 76px !important;
    min-width: 76px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .lang-switch-icon {
    display: none !important;
  }

  .lang-switch-track {
    width: 62px !important;
  }

  .mobile-toggle {
    grid-column: 3 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
}

@media (min-width: 961px) {
  .mobile-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(112px, 31vw, 136px) !important;
  }

  .theme-toggle.ta-theme-toggle {
    width: 38px !important;
    min-width: 38px !important;
  }

  .lang-switch-toggle {
    width: 70px !important;
    min-width: 70px !important;
  }
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .tagline-banner {
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(102, 155, 188, 0.13), transparent 68%),
    linear-gradient(180deg, #101928 0%, #0B1322 100%) !important;
  border-color: rgba(232, 237, 242, 0.08) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .tagline-main {
  color: rgba(248, 250, 252, 0.96) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .tagline-sub {
  color: rgba(232, 237, 242, 0.72) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .tagline-main::before,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .tagline-main::after {
  background: linear-gradient(90deg, transparent, rgba(157, 190, 210, 0.48), transparent) !important;
  box-shadow: 0 0 16px rgba(102, 155, 188, 0.24) !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island,
body.pricing-page .pricing-control-island {
  border-radius: 24px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-level-feedback,
body.pricing-page .pricing-control-island .pricing-toggle,
body.pricing-page .pricing-control-island .pricing-subtoggle,
body.pricing-page .pricing-control-island .pricing-level-feedback {
  border-radius: 18px !important;
}

html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-toggle-btn,
html[data-i18n-title="meta.pricing.title"] .pricing-control-island .pricing-subtoggle-btn,
body.pricing-page .pricing-control-island .pricing-toggle-btn,
body.pricing-page .pricing-control-island .pricing-subtoggle-btn {
  border-radius: 14px !important;
}

.footer-new .animate-in,
.footer-new .animate-left,
.footer-new .animate-right,
.footer-new .animate-scale,
.footer-new .visible {
  opacity: 1 !important;
  transform: none !important;
  transition-property: color, background-color, border-color, box-shadow, opacity !important;
}

.footer-new {
  background:
    radial-gradient(720px 360px at 18% 8%, rgba(102, 155, 188, 0.10), transparent 64%),
    radial-gradient(860px 420px at 82% 86%, rgba(102, 155, 188, 0.09), transparent 66%),
    linear-gradient(180deg, #101928 0%, #0B1322 50%, #060A12 100%) !important;
}

.footer-main {
  padding-block: clamp(54px, 6vw, 84px) clamp(30px, 3.8vw, 48px) !important;
}

.footer-main .container {
  max-width: min(1120px, calc(100vw - 48px)) !important;
}

.footer-grid-new {
  display: grid !important;
  grid-template-columns: minmax(230px, 1.05fr) repeat(4, minmax(132px, 0.78fr)) !important;
  gap: clamp(28px, 4vw, 62px) !important;
  align-items: start !important;
}

.footer-brand-new {
  align-items: center !important;
  text-align: center !important;
}

.footer-logo-tagline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: fit-content !important;
  margin-inline: auto !important;
}

.footer-logo-tagline::before,
.footer-logo-tagline::after {
  content: "" !important;
  width: 28px !important;
  height: 1px !important;
  background: rgba(102, 155, 188, 0.32) !important;
  box-shadow: 0 0 12px rgba(102, 155, 188, 0.16) !important;
}

.footer-new .footer-ta-band {
  min-height: clamp(128px, 15vw, 226px) !important;
  background:
    radial-gradient(720px 240px at 50% 72%, rgba(102, 155, 188, 0.13), transparent 68%),
    linear-gradient(180deg, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, 0.38) 46%, rgba(5, 8, 17, 0.78) 100%) !important;
  border-top: 1px solid rgba(232, 237, 242, 0.035) !important;
}

.footer-new .footer-ta-stage {
  min-height: clamp(128px, 15vw, 226px) !important;
  padding: 0 clamp(14px, 3vw, 34px) !important;
  align-items: flex-end !important;
}

.footer-new .footer-ta-text {
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  font-family: var(--font-serif, "Lora", Georgia, serif) !important;
  font-size: clamp(60px, 12vw, 172px) !important;
  line-height: 0.82 !important;
  font-weight: 700 !important;
  transform: translateY(5%) !important;
  opacity: 0.46 !important;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 78%, black 0%, rgba(0,0,0,0.58) 48%, transparent 82%) !important;
  mask-image: radial-gradient(ellipse 78% 82% at 50% 78%, black 0%, rgba(0,0,0,0.58) 48%, transparent 82%) !important;
}

.footer-new .footer-ta-band:hover .footer-ta-text,
.footer-new .footer-ta-band.is-spotlight-active .footer-ta-text {
  opacity: 0.56 !important;
  -webkit-mask-image: radial-gradient(ellipse 88% 86% at 50% 76%, black 0%, rgba(0,0,0,0.66) 54%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 88% 86% at 50% 76%, black 0%, rgba(0,0,0,0.66) 54%, transparent 86%) !important;
}

.footer-bottom-new {
  padding-block: clamp(18px, 2vw, 24px) !important;
  border-top: 1px solid rgba(232, 237, 242, 0.09) !important;
  background: rgba(5, 8, 17, 0.70) !important;
}

.footer-bottom-new .container {
  max-width: min(1120px, calc(100vw - 48px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
}

.footer-bottom-new p,
.footer-bottom-new .footer-tagline-new {
  margin: 0 !important;
  color: rgba(232, 237, 242, 0.70) !important;
}

@media (max-width: 980px) {
  .footer-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    text-align: left !important;
  }

  .footer-brand-new {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .tagline-main {
    position: relative !important;
    display: block !important;
    width: min(100%, 390px) !important;
    padding-inline: 44px !important;
    margin-inline: auto !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .tagline-main::before,
  .tagline-main::after {
    position: absolute !important;
    top: 0.62em !important;
    width: 28px !important;
  }

  .tagline-main::before {
    left: 6px !important;
  }

  .tagline-main::after {
    right: 6px !important;
  }

  .footer-main {
    padding-block: 44px 28px !important;
  }

  .footer-grid-new {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 28px !important;
  }

  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(86px, 26vw, 128px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(42px, 17vw, 82px) !important;
  }

  .footer-bottom-new {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-bottom-new .container {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* v0.6.52 final visual sweep: dark-mode promise, smoother hero flow, tighter tagline, unified footer spotlight. */
html[data-i18n-title="meta.home.title"] .hero::after {
  background:
    linear-gradient(180deg,
      rgba(239, 245, 249, 0) 0%,
      rgba(239, 245, 249, 0) 58%,
      rgba(239, 245, 249, 0.18) 72%,
      rgba(239, 245, 249, 0.62) 86%,
      #EFF5F9 100%) !important;
  filter: none !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .hero::after {
  background:
    linear-gradient(180deg,
      rgba(11, 19, 34, 0) 0%,
      rgba(11, 19, 34, 0) 60%,
      rgba(11, 19, 34, 0.28) 76%,
      rgba(11, 19, 34, 0.72) 91%,
      #0B1322 100%) !important;
}

html[data-i18n-title="meta.home.title"] .tagline-banner {
  padding-block: clamp(36px, 4.2vw, 54px) !important;
}

html[data-i18n-title="meta.home.title"] .tagline-main {
  display: inline-block !important;
  width: auto !important;
  max-width: min(100%, 900px) !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  font-size: clamp(1.6rem, 2.45vw, 2.14rem) !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  text-wrap: balance !important;
}

html[data-i18n-title="meta.home.title"] .tagline-main .ta-bridge-word {
  margin-inline: 0 !important;
  letter-spacing: 0 !important;
}

html[data-i18n-title="meta.home.title"] .tagline-main::before,
html[data-i18n-title="meta.home.title"] .tagline-main::after {
  display: inline-block !important;
  vertical-align: middle !important;
  width: clamp(28px, 3.5vw, 58px) !important;
  flex: 0 0 auto !important;
  opacity: 0.48 !important;
}

html[data-i18n-title="meta.home.title"] .tagline-main::before {
  margin-right: clamp(10px, 1.5vw, 18px) !important;
}

html[data-i18n-title="meta.home.title"] .tagline-main::after {
  margin-left: clamp(10px, 1.5vw, 18px) !important;
}

html[data-i18n-title="meta.home.title"] .tagline-sub {
  margin-top: 8px !important;
  max-width: 58ch !important;
}

html[data-i18n-title="meta.home.title"] #promise {
  background:
    linear-gradient(180deg, #F1F7FA 0%, #EAF2F7 100%) !important;
  overflow: clip !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #promise {
  background:
    radial-gradient(760px 360px at 50% 0%, rgba(102, 155, 188, 0.10), transparent 70%),
    linear-gradient(180deg, #0B1322 0%, #101928 100%) !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper {
  overflow: hidden !important;
  padding-inline: clamp(4px, 1vw, 12px) !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper::before,
html[data-i18n-title="meta.home.title"] .promise-wrapper::after {
  content: "" !important;
  display: block !important;
  top: 0 !important;
  bottom: 74px !important;
  width: clamp(12px, 2.2vw, 32px) !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, #F1F7FA 0%, rgba(241, 247, 250, 0) 100%) !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-wrapper::after {
  background: linear-gradient(270deg, #F1F7FA 0%, rgba(241, 247, 250, 0) 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-wrapper::before,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-wrapper::after {
  background: linear-gradient(90deg, #0F1829 0%, rgba(15, 24, 41, 0) 100%) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-wrapper::after {
  background: linear-gradient(270deg, #0F1829 0%, rgba(15, 24, 41, 0) 100%) !important;
}

html[data-i18n-title="meta.home.title"] .promise-card {
  border-radius: 9px !important;
  box-shadow: 0 12px 24px rgba(28, 28, 46, 0.055) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-card {
  background: rgba(22, 35, 56, 0.88) !important;
  border-color: rgba(139, 183, 210, 0.20) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-controls {
  gap: 10px !important;
  margin-top: 22px !important;
}

html[data-i18n-title="meta.home.title"] .promise-prev,
html[data-i18n-title="meta.home.title"] .promise-next {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(102, 155, 188, 0.38) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.home.title"] .promise-prev:hover,
html[data-i18n-title="meta.home.title"] .promise-next:hover,
html[data-i18n-title="meta.home.title"] .promise-prev:focus-visible,
html[data-i18n-title="meta.home.title"] .promise-next:focus-visible {
  border-color: rgba(102, 155, 188, 0.68) !important;
  background: linear-gradient(180deg, rgba(35, 54, 82, 0.96), rgba(23, 34, 57, 0.96)) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-prev,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-next {
  border-color: rgba(139, 183, 210, 0.32) !important;
  background: rgba(232, 237, 242, 0.08) !important;
  color: rgba(248, 250, 252, 0.92) !important;
}

.footer-new {
  background:
    radial-gradient(840px 420px at 18% 12%, rgba(102, 155, 188, 0.10), transparent 68%),
    radial-gradient(900px 420px at 82% 92%, rgba(102, 155, 188, 0.10), transparent 68%),
    linear-gradient(180deg, #101928 0%, #0B1322 42%, #060A12 100%) !important;
  overflow: hidden !important;
}

.footer-main,
.footer-new .footer-ta-band,
.footer-bottom-new {
  background-color: transparent !important;
  background-blend-mode: normal !important;
}

.footer-main {
  padding-block: clamp(58px, 6vw, 86px) clamp(24px, 3vw, 36px) !important;
}

.footer-new .footer-ta-band {
  cursor: crosshair !important;
  min-height: clamp(160px, 18vw, 284px) !important;
  border-top: 0 !important;
  position: relative !important;
  background:
    radial-gradient(820px 260px at 50% 82%, rgba(102, 155, 188, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, 0.20) 58%, rgba(5, 8, 17, 0.54) 100%) !important;
}

.footer-new .footer-ta-band::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(320px 180px at var(--x, 50%) var(--y, 70%), rgba(232, 237, 242, 0.18), rgba(102, 155, 188, 0.13) 38%, transparent 72%) !important;
  transition: opacity 220ms ease !important;
}

.footer-new .footer-ta-band.is-spotlight-active::before,
.footer-new .footer-ta-band:hover::before {
  opacity: 1 !important;
}

.footer-new .footer-ta-stage {
  min-height: clamp(160px, 18vw, 284px) !important;
  align-items: flex-end !important;
  padding-inline: clamp(10px, 2vw, 28px) !important;
}

.footer-new .footer-ta-text {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  font-family: var(--font-latin, "Poppins", system-ui, sans-serif) !important;
  text-transform: uppercase !important;
  font-size: clamp(84px, 15vw, 228px) !important;
  line-height: 0.76 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  transform: translate3d(0, calc(7% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) !important;
  opacity: var(--footer-opacity, 0.40) !important;
  color: rgba(232, 237, 242, 0.34) !important;
  filter: drop-shadow(0 0 22px rgba(102, 155, 188, 0.12)) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%) !important;
  transition: opacity 220ms ease, filter 220ms ease, color 220ms ease !important;
}

.footer-new .footer-ta-band.is-spotlight-active .footer-ta-text,
.footer-new .footer-ta-band:hover .footer-ta-text {
  opacity: 0.56 !important;
  color: rgba(232, 237, 242, 0.46) !important;
  filter: drop-shadow(0 0 26px rgba(102, 155, 188, 0.20)) !important;
}

.footer-bottom-new {
  border-top: 1px solid rgba(232, 237, 242, 0.06) !important;
  padding-block: clamp(16px, 1.8vw, 22px) !important;
}

@media (max-width: 640px) {
  html[data-i18n-title="meta.home.title"] .tagline-main {
    display: block !important;
    font-size: clamp(1.35rem, 5.7vw, 1.64rem) !important;
    width: min(100%, 360px) !important;
    padding-inline: 34px !important;
  }

  html[data-i18n-title="meta.home.title"] .tagline-main::before,
  html[data-i18n-title="meta.home.title"] .tagline-main::after {
    position: absolute !important;
    top: 0.62em !important;
    width: 22px !important;
    margin-inline: 0 !important;
  }

  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(104px, 30vw, 150px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(54px, 19vw, 96px) !important;
  }
}

/* Final form + mobile control integration pass, 2026-05-22 */
.contact-home-tally,
.contact-form-shell.tally-embed-shell {
  background:
    radial-gradient(520px 240px at 8% 0%, rgba(102, 155, 188, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
  border: 1px solid rgba(102, 155, 188, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 46px rgba(28, 28, 46, 0.08) !important;
  overflow: hidden !important;
  padding: clamp(18px, 2.8vw, 28px) !important;
}

.contact-home-tally .tally-embed-frame,
.contact-form-shell.tally-embed-shell .tally-embed-frame {
  min-height: clamp(640px, 68vh, 820px) !important;
  border-radius: 12px !important;
  background: transparent !important;
}

.tally-fallback-note {
  border-top: 1px solid rgba(102, 155, 188, 0.16) !important;
  padding-top: 14px !important;
}

[data-theme="dark"] .contact-home-tally,
[data-theme="dark"] .contact-form-shell.tally-embed-shell {
  background:
    radial-gradient(520px 240px at 8% 0%, rgba(102, 155, 188, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(23, 34, 57, 0.96), rgba(12, 21, 36, 0.98)) !important;
  border-color: rgba(139, 183, 210, 0.22) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24) !important;
}

#newsletter .email-form .btn {
  min-width: 118px !important;
}

@media (max-width: 960px) {
  .navbar-inner {
    grid-template-columns: minmax(118px, 1fr) auto auto !important;
    column-gap: 8px !important;
  }

  .nav-actions {
    gap: 7px !important;
    padding: 4px !important;
    border: 1px solid rgba(232, 237, 242, 0.10) !important;
    border-radius: 14px !important;
    background: rgba(16, 25, 40, 0.16) !important;
    box-shadow: none !important;
  }

  .theme-toggle.ta-theme-toggle,
  .lang-switch-toggle {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .theme-toggle.ta-theme-toggle {
    width: 40px !important;
    min-width: 40px !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-track {
    border-radius: 10px !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    width: 24px !important;
    height: 24px !important;
    left: 5px !important;
    top: 5px !important;
  }

  html[data-theme="dark"] .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    transform: translateX(6px) !important;
  }

  .lang-switch-toggle {
    width: 72px !important;
    min-width: 72px !important;
  }

  .lang-switch-track {
    width: 58px !important;
    height: 26px !important;
    border-radius: 9px !important;
  }

  .lang-switch-thumb {
    width: 27px !important;
    height: 22px !important;
    border-radius: 8px !important;
  }

  .lang-switch[data-current-lang="tr"] .lang-switch-thumb,
  .lang-switch-toggle[data-current-lang="tr"] .lang-switch-thumb {
    transform: translateX(27px) !important;
  }
}

@media (max-width: 640px) {
  .contact-home-tally,
  .contact-form-shell.tally-embed-shell {
    border-radius: 14px !important;
    padding: 14px !important;
  }

  .contact-home-tally .tally-embed-frame,
  .contact-form-shell.tally-embed-shell .tally-embed-frame {
    min-height: 730px !important;
    border-radius: 10px !important;
  }

  #newsletter .email-form {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(108px, 30vw, 124px) !important;
  }

  .nav-actions {
    gap: 5px !important;
    padding: 3px !important;
  }

  .theme-toggle.ta-theme-toggle {
    width: 38px !important;
    min-width: 38px !important;
  }

  .lang-switch-toggle {
    width: 68px !important;
    min-width: 68px !important;
  }
}

/* v0.6.54 mobile polish: simple equal controls, scrollable menu, compact footer. */
@media (max-width: 960px) {
  .navbar-inner {
    grid-template-columns: minmax(104px, 1fr) auto auto !important;
    gap: 8px !important;
    padding-inline: 12px !important;
  }

  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(108px, 31vw, 142px) !important;
  }

  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .theme-toggle.ta-theme-toggle,
  .lang-switch-toggle,
  .mobile-toggle {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(139, 183, 210, 0.28) !important;
    background: rgba(16, 25, 40, 0.64) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
  }

  .theme-toggle.ta-theme-toggle {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-track {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-symbol {
    display: none !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    top: 7px !important;
    left: 7px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    transform: none !important;
  }

  html[data-theme="dark"] .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    transform: none !important;
  }

  .lang-switch-toggle {
    width: 86px !important;
    min-width: 86px !important;
    padding: 0 !important;
  }

  .lang-switch-icon {
    display: none !important;
  }

  .lang-switch-track {
    width: 76px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: rgba(232, 237, 242, 0.08) !important;
    box-shadow: none !important;
  }

  .lang-switch-label {
    width: 38px !important;
    font-size: 0.68rem !important;
  }

  .lang-switch-thumb {
    top: 3px !important;
    left: 3px !important;
    width: 35px !important;
    height: 26px !important;
    border-radius: 8px !important;
  }

  .lang-switch[data-current-lang="tr"] .lang-switch-thumb,
  .lang-switch-toggle[data-current-lang="tr"] .lang-switch-thumb {
    transform: translateX(35px) !important;
  }

  .mobile-toggle {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }

  .mobile-menu {
    top: var(--nav-height) !important;
    bottom: 0 !important;
    max-height: calc(100dvh - var(--nav-height)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 18px clamp(14px, 4vw, 22px) calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-menu::after {
    content: "" !important;
    flex: 0 0 18px !important;
  }

  .mobile-menu .nav-link,
  .mobile-menu-login,
  .mobile-menu-programmes {
    width: min(100%, 560px) !important;
    margin-inline: auto !important;
  }

  .mobile-menu .nav-link,
  .mobile-menu .mobile-menu-sub-link,
  .mobile-menu-login {
    min-height: 52px !important;
    border-radius: 14px !important;
  }

  .mobile-menu-programmes {
    border-radius: 16px !important;
  }
}

@media (max-width: 640px) {
  .footer-main {
    padding-block: 38px 22px !important;
  }

  .footer-main .container {
    max-width: calc(100vw - 34px) !important;
  }

  .footer-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 18px !important;
    align-items: start !important;
  }

  .footer-brand-new {
    grid-column: 1 / -1 !important;
    max-width: 340px !important;
    margin-inline: auto !important;
  }

  .footer-col-new {
    text-align: left !important;
    width: auto !important;
    margin-inline: 0 !important;
  }

  .footer-col-new h4 {
    font-size: 0.68rem !important;
    margin-bottom: 12px !important;
  }

  .footer-col-new a,
  .footer-col-new li,
  .footer-col-new p {
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
  }

  .footer-links-new {
    gap: 8px !important;
  }

  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: 96px !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(48px, 18vw, 86px) !important;
    transform: translateY(8%) !important;
  }
}

@media (max-width: 390px) {
  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(98px, 28vw, 116px) !important;
  }

  .nav-actions {
    gap: 6px !important;
  }

  .theme-toggle.ta-theme-toggle,
  .mobile-toggle {
    width: 40px !important;
    min-width: 40px !important;
  }

  .lang-switch-toggle {
    width: 80px !important;
    min-width: 80px !important;
  }

  .lang-switch-track {
    width: 70px !important;
  }

  .lang-switch-label {
    width: 35px !important;
  }

  .lang-switch-thumb {
    width: 32px !important;
  }

  .lang-switch[data-current-lang="tr"] .lang-switch-thumb,
  .lang-switch-toggle[data-current-lang="tr"] .lang-switch-thumb {
    transform: translateX(32px) !important;
  }
}

/* v0.6.54 mobile scale system: reduce visual weight instead of only squeezing desktop UI. */
@media (max-width: 640px) {
  body {
    font-size: 15px !important;
  }

  .container,
  .footer-main .container,
  .footer-bottom-new .container {
    width: min(100% - 32px, var(--container-xl)) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .section,
  section.section,
  .page-section {
    padding-block: clamp(48px, 13vw, 72px) !important;
  }

  .section-header {
    margin-bottom: clamp(24px, 7vw, 36px) !important;
  }

  .hero {
    min-height: min(760px, 100svh) !important;
  }

  .hero-content {
    padding-block: clamp(92px, 17vh, 128px) clamp(44px, 12vw, 64px) !important;
  }

  .hero-title,
  .page-title,
  .programme-detail-title {
    font-size: clamp(2.15rem, 11.5vw, 3.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  .section-title,
  .contact-home-title,
  .pricing-title {
    font-size: clamp(1.65rem, 7.5vw, 2.25rem) !important;
    line-height: 1.12 !important;
  }

  .section-desc,
  .hero-subtitle,
  .page-subtitle,
  .programme-detail-subtitle {
    font-size: clamp(0.95rem, 4vw, 1.05rem) !important;
    line-height: 1.55 !important;
  }

  .btn,
  .btn-lg,
  button.btn,
  a.btn,
  .mobile-menu-login,
  .tally-popup-button {
    min-height: 46px !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
  }

  .hero-actions,
  .cta-group,
  .program-detail-actions,
  .final-cta-actions {
    gap: 10px !important;
  }

  .hero-actions .btn,
  .cta-group .btn,
  .program-detail-actions .btn,
  .final-cta-actions .btn {
    width: min(100%, 320px) !important;
  }

  .hero-stats {
    width: min(100%, 360px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .hero-stat,
  .stat-card {
    min-height: 82px !important;
    padding: 12px 8px !important;
    border-radius: 10px !important;
  }

  .hero-stat-number,
  .stat-number {
    font-size: clamp(1.65rem, 7vw, 2rem) !important;
  }

  .hero-stat-label,
  .stat-label {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
  }

  .card,
  .feature-card,
  .programme-card,
  .promise-card,
  .pricing-card,
  .contact-card,
  .value-card {
    border-radius: 14px !important;
    padding: clamp(18px, 5vw, 24px) !important;
  }

  .feature-icon,
  .programme-icon,
  .promise-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
  }

  .pricing-card .price,
  .pricing-price,
  .plan-price {
    font-size: clamp(2.1rem, 10vw, 3rem) !important;
    line-height: 1 !important;
  }

  .pricing-control-island {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .pricing-toggle,
  .pricing-subtoggle,
  .pricing-level-feedback {
    min-height: 42px !important;
  }

  .email-capture {
    border-radius: 18px !important;
  }
}

/* ============================================================
   v0.6.85 — mobile newsletter media corner repair.
   Keep the image, picture, and outer card clipped to the same radius
   so the top corners do not show mismatched slivers on narrow screens.
   ============================================================ */
@media (max-width: 860px) {
  html[data-i18n-title="meta.home.title"] .email-capture {
    border-radius: 18px !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  html[data-i18n-title="meta.home.title"] .email-capture-art {
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
    clip-path: inset(0 round 18px 18px 0 0) !important;
  }

  html[data-i18n-title="meta.home.title"] .email-capture-art picture,
  html[data-i18n-title="meta.home.title"] .email-capture-art img {
    border-radius: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  .container,
  .footer-main .container,
  .footer-bottom-new .container {
    width: min(100% - 28px, var(--container-xl)) !important;
    max-width: calc(100vw - 28px) !important;
  }

  .hero-title,
  .page-title,
  .programme-detail-title {
    font-size: clamp(2rem, 10.7vw, 3rem) !important;
  }

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

  .footer-grid-new {
    gap: 22px 14px !important;
  }
}

/* v0.6.55 last mobile override: beat earlier paired-CTA/footer rules. */
@media (max-width: 640px) {
  .hero-ctas .btn,
  .hero .btn.btn-lg,
  .section.text-center .btn.btn-lg,
  .programme-final-cta .btn,
  .programme-hero .btn,
  .page-header .btn {
    min-height: 46px !important;
    height: auto !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
  }

  .hero-ctas .btn,
  .hero-actions .btn {
    width: min(100%, 320px) !important;
    min-width: 0 !important;
  }

  .footer-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    text-align: left !important;
    gap: 24px 18px !important;
  }

  .footer-brand-new {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .footer-col-new {
    width: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-links-new {
    align-items: flex-start !important;
  }

  .footer-link-new {
    justify-content: flex-start !important;
  }
}

/* v0.6.56 mobile nav rethink: three equal square controls, no mini desktop language pill. */
@media (max-width: 960px) {
  .nav-actions {
    gap: 6px !important;
    align-items: center !important;
  }

  .nav-actions > * {
    align-self: center !important;
    margin-block: 0 !important;
    transform: none !important;
  }

  .theme-toggle.ta-theme-toggle,
  .lang-switch-toggle,
  .mobile-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background:
      linear-gradient(180deg, rgba(27, 40, 62, 0.86), rgba(18, 28, 47, 0.86)) !important;
    border: 1px solid rgba(139, 183, 210, 0.30) !important;
    box-shadow: none !important;
  }

  .theme-toggle.ta-theme-toggle:hover,
  .theme-toggle.ta-theme-toggle:focus-visible,
  .lang-switch-toggle:hover,
  .lang-switch-toggle:focus-visible,
  .mobile-toggle:hover,
  .mobile-toggle:focus-visible {
    background:
      linear-gradient(180deg, rgba(35, 54, 82, 0.94), rgba(23, 34, 57, 0.94)) !important;
    border-color: rgba(139, 183, 210, 0.48) !important;
  }

  .lang-switch-toggle {
    justify-content: center !important;
    margin-top: 3px !important;
  }

  .lang-switch-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: inherit !important;
  }

  .lang-switch-thumb {
    display: none !important;
  }

  .lang-switch-label {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    color: rgba(232, 237, 242, 0.58) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  .lang-switch[data-current-lang="en"] [data-switch-lang="en"],
  .lang-switch[data-current-lang="tr"] [data-switch-lang="tr"],
  .lang-switch-toggle[data-current-lang="en"] [data-switch-lang="en"],
  .lang-switch-toggle[data-current-lang="tr"] [data-switch-lang="tr"] {
    opacity: 1 !important;
    color: #FFFFFF !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-track {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    top: 7px !important;
    left: 7px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    transform: none !important;
  }

  html[data-theme="dark"] .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    transform: none !important;
  }

  .mobile-menu {
    touch-action: pan-y !important;
    scrollbar-gutter: stable !important;
  }

  .mobile-menu.open {
    overflow-y: scroll !important;
    pointer-events: auto !important;
  }

  .mobile-menu .nav-link {
    min-height: 46px !important;
    padding: 12px 18px !important;
    border-radius: 13px !important;
    font-size: 0.98rem !important;
  }

  .mobile-menu-programmes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .mobile-menu-section-label {
    grid-column: 1 / -1 !important;
  }

  .mobile-menu .mobile-menu-sub-link {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    font-size: 0.9rem !important;
  }

  .mobile-menu-login {
    min-height: 46px !important;
    padding-block: 12px !important;
  }

  .contact-home-native {
    gap: 14px !important;
  }

  .contact-home-native .tally-fallback-note {
    margin-top: 0 !important;
  }

  .contact-home-native .field {
    gap: 6px !important;
  }

  .contact-home-native .input {
    min-height: 44px !important;
    padding-block: 10px !important;
  }

  .contact-home-native .textarea {
    min-height: 90px !important;
  }
}

@media (max-width: 390px) {
  .theme-toggle.ta-theme-toggle,
  .lang-switch-toggle,
  .mobile-toggle {
    width: 40px !important;
    min-width: 40px !important;
  }

  .nav-actions {
    gap: 5px !important;
  }
}

@media (min-width: 901px) {
  .contact-home-native {
    min-height: 0 !important;
    align-self: start !important;
  }

  .contact-home-native .textarea {
    min-height: 96px !important;
  }
}

.contact-home-native .btn-primary {
  width: fit-content !important;
  min-width: 176px !important;
}

@media (max-width: 640px) {
  .contact-home-native {
    padding: 16px !important;
  }

  .contact-home-native .textarea {
    min-height: 88px !important;
  }

  .contact-home-native .btn-primary {
    width: 100% !important;
  }
}

/* ============================================================
   v0.6.59 mobile-nav final reset (cascade winner).

   Why this exists:
   .navbar .nav-actions { gap: 10px !important; } at line ~14757
   has specificity 0,2,0 and was beating every later .nav-actions
   (0,1,0) rule even with !important. This block uses the same
   .navbar-scoped selector so it ties on specificity and wins on
   source order. Three equal square controls (theme, lang, menu),
   centered, no offset, no pill thumb. Keep this LAST.
   ============================================================ */
@media (max-width: 960px) {
  .navbar .nav-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  .navbar .nav-actions > * {
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  /* Three square 42x42 controls — identical dimensions, no language pill. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle,
  .navbar .nav-actions .lang-switch-toggle,
  .navbar .nav-actions .mobile-toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(139, 183, 210, 0.30) !important;
    background:
      linear-gradient(180deg, rgba(27, 40, 62, 0.86), rgba(18, 28, 47, 0.86)) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar .nav-actions .theme-toggle.ta-theme-toggle:hover,
  .navbar .nav-actions .theme-toggle.ta-theme-toggle:focus-visible,
  .navbar .nav-actions .lang-switch-toggle:hover,
  .navbar .nav-actions .lang-switch-toggle:focus-visible,
  .navbar .nav-actions .mobile-toggle:hover,
  .navbar .nav-actions .mobile-toggle:focus-visible {
    background:
      linear-gradient(180deg, rgba(35, 54, 82, 0.94), rgba(23, 34, 57, 0.94)) !important;
    border-color: rgba(139, 183, 210, 0.48) !important;
  }

  /* Theme toggle: flatten the inner track, keep one centered thumb. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-track {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    transform: none !important;
  }

  html[data-theme="dark"] .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    transform: none !important;
  }

  /* Language toggle: kill the pill+thumb, show only the active EN/TR label, centered. */
  .navbar .nav-actions .lang-switch-toggle .lang-switch-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .navbar .nav-actions .lang-switch-toggle .lang-switch-thumb {
    display: none !important;
  }

  .navbar .nav-actions .lang-switch-toggle .lang-switch-icon {
    display: none !important;
  }

  .navbar .nav-actions .lang-switch-toggle .lang-switch-label {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: rgba(232, 237, 242, 0.58) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .navbar .nav-actions .lang-switch[data-current-lang="en"] [data-switch-lang="en"],
  .navbar .nav-actions .lang-switch[data-current-lang="tr"] [data-switch-lang="tr"],
  .navbar .nav-actions .lang-switch-toggle[data-current-lang="en"] [data-switch-lang="en"],
  .navbar .nav-actions .lang-switch-toggle[data-current-lang="tr"] [data-switch-lang="tr"] {
    opacity: 1 !important;
    color: #FFFFFF !important;
  }

  /* Mobile menu drawer: scrollable, two-column programmes grid, tighter rhythm. */
  .mobile-menu {
    touch-action: pan-y !important;
    scrollbar-gutter: stable !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-menu.open {
    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  .mobile-menu .nav-link {
    min-height: 46px !important;
    padding: 12px 18px !important;
    border-radius: 13px !important;
    font-size: 0.98rem !important;
  }

  .mobile-menu-programmes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .mobile-menu-section-label {
    grid-column: 1 / -1 !important;
  }

  .mobile-menu .mobile-menu-sub-link {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    font-size: 0.9rem !important;
  }

  .mobile-menu-login {
    min-height: 46px !important;
    padding-block: 12px !important;
  }
}

@media (max-width: 390px) {
  .navbar .nav-actions {
    gap: 5px !important;
  }

  .navbar .nav-actions .theme-toggle.ta-theme-toggle,
  .navbar .nav-actions .lang-switch-toggle,
  .navbar .nav-actions .mobile-toggle {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}


/* ============================================================
   v0.6.59 follow-up: theme-toggle thumb flatten + dark-mode
   readability for the multi-step counter. Keep AFTER the prior
   v0.6.59 block so it wins.
   ============================================================ */

/* Theme toggle on mobile: kill the inner colored thumb so all three
   controls (theme / lang / menu) read as identical dark squares. The
   moon/sun SVG inside the thumb still renders; only the thumb's
   background, border, and shadow are removed. */
@media (max-width: 960px) {
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb,
  html[data-theme="dark"] .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb,
  html[data-theme="light"] .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  /* Make sure the icon inside the thumb is centered and visible. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb > * {
    margin: 0 !important;
    color: #E8EDF2 !important;
  }
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb svg {
    width: 18px !important;
    height: 18px !important;
    color: #E8EDF2 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* Multi-step counter — readable in dark mode.
   Earlier rule used var(--color-text) which resolves dim in this theme. */
.contact-home-stepped .step-progress-counter {
  color: rgba(232, 237, 242, 0.86) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-home-stepped .step-progress-counter .step-current,
.contact-home-stepped .step-progress-counter .step-total {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

[data-theme="dark"] .contact-home-stepped .step-progress-counter {
  color: rgba(232, 237, 242, 0.92) !important;
}

[data-theme="dark"] .contact-home-stepped .step-progress-counter .step-current,
[data-theme="dark"] .contact-home-stepped .step-progress-counter .step-total {
  color: #FFFFFF !important;
}

/* Light-mode counter readability (kept high-contrast). */
[data-theme="light"] .contact-home-stepped .step-progress-counter {
  color: rgba(28, 28, 46, 0.72) !important;
}

[data-theme="light"] .contact-home-stepped .step-progress-counter .step-current,
[data-theme="light"] .contact-home-stepped .step-progress-counter .step-total {
  color: #1C1C2E !important;
}

[data-theme="light"] .contact-home-stepped .step-progress-bar {
  background: rgba(28, 28, 46, 0.10) !important;
}

/* Step question heading reads correctly under both themes. */
[data-theme="dark"] .contact-home-stepped .step-question {
  color: #FFFFFF !important;
}

[data-theme="light"] .contact-home-stepped .step-question {
  color: #1C1C2E !important;
}

/* Make sure the Back ghost button is visible in light mode too. */
[data-theme="light"] .contact-home-stepped .step-back {
  color: #1C1C2E !important;
  border-color: rgba(28, 28, 46, 0.18) !important;
}

[data-theme="light"] .contact-home-stepped .step-back:hover,
[data-theme="light"] .contact-home-stepped .step-back:focus-visible {
  background: rgba(28, 28, 46, 0.06) !important;
  border-color: rgba(28, 28, 46, 0.36) !important;
}


/* ============================================================
   v0.6.60 native-feeling Tally embed.

   Replaces the multi-step homepage form with a styled iframe embed
   that reads as part of the page (not a third-party widget). Same
   treatment applied to contact.html embed shell.

   Why:
   - Tally has no public submission API and no preset field-key
     prefill (verified via Chrome inspection). Building a custom
     submitter that lands data in Tally is not supported.
   - Goal stays "looks native" — achieved here by making the Tally
     iframe blend into the page background instead of sitting in a
     white card.
   ============================================================ */
.contact-home-tally.contact-home-native-embed,
.contact-form-shell.tally-embed-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

[data-theme="dark"] .contact-home-tally.contact-home-native-embed,
[data-theme="dark"] .contact-form-shell.tally-embed-shell {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="light"] .contact-home-tally.contact-home-native-embed,
[data-theme="light"] .contact-form-shell.tally-embed-shell {
  background: transparent !important;
  background-color: transparent !important;
}

/* Iframe itself: no border, transparent so Tally's transparentBackground=1
   actually shows the page underneath. */
.contact-home-tally.contact-home-native-embed .tally-embed-frame,
.contact-form-shell.tally-embed-shell .tally-embed-frame,
iframe.tally-embed-frame {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 480px !important;
  width: 100% !important;
  display: block !important;
}

@media (max-width: 640px) {
  .contact-home-tally.contact-home-native-embed .tally-embed-frame,
  .contact-form-shell.tally-embed-shell .tally-embed-frame,
  iframe.tally-embed-frame {
    min-height: 540px !important;
  }
}

/* The level-test prompt and "open in new tab" link sit OUTSIDE the iframe,
   so they need to read as native page copy. */
.contact-home-tally.contact-home-native-embed .contact-level-test-prompt,
.contact-form-shell.tally-embed-shell .contact-level-test-prompt,
.contact-form-shell.tally-embed-shell .tally-level-test-prompt {
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(232, 237, 242, 0.78) !important;
  font-size: 0.95rem !important;
}

[data-theme="light"] .contact-home-tally.contact-home-native-embed .contact-level-test-prompt,
[data-theme="light"] .contact-form-shell.tally-embed-shell .contact-level-test-prompt,
[data-theme="light"] .contact-form-shell.tally-embed-shell .tally-level-test-prompt {
  color: rgba(28, 28, 46, 0.72) !important;
}

.contact-home-tally.contact-home-native-embed .contact-level-test-prompt a,
.contact-form-shell.tally-embed-shell .contact-level-test-prompt a,
.contact-form-shell.tally-embed-shell .tally-level-test-prompt a {
  color: var(--color-primary, #669BBC) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.contact-home-tally.contact-home-native-embed .tally-fallback-note,
.contact-form-shell.tally-embed-shell .tally-fallback-note {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 0.85rem !important;
  color: rgba(232, 237, 242, 0.6) !important;
}

[data-theme="light"] .contact-home-tally.contact-home-native-embed .tally-fallback-note,
[data-theme="light"] .contact-form-shell.tally-embed-shell .tally-fallback-note {
  color: rgba(28, 28, 46, 0.55) !important;
}

.contact-home-tally.contact-home-native-embed .tally-fallback-note .tally-direct-link,
.contact-form-shell.tally-embed-shell .tally-fallback-note .tally-direct-link {
  color: var(--color-primary, #669BBC) !important;
  font-weight: 600 !important;
}


/* ============================================================
   v0.6.61 — three small targeted refinements:
   1. Mobile nav controls were clumped together (gap too tight).
   2. Hero -> next-section transition had a visible hard band.
   3. (Removed dead multi-step CSS earlier in this commit.)
   Keep LAST so any future ".navbar .nav-actions" rules need to
   beat this on specificity OR be added below it.
   ============================================================ */

/* (1) Mobile nav: breathing room between the three controls. */
@media (max-width: 960px) {
  .navbar .nav-actions {
    gap: 10px !important;
    padding-right: 4px !important;
  }
}

@media (max-width: 480px) {
  .navbar .nav-actions {
    gap: 8px !important;
  }
}

@media (max-width: 390px) {
  .navbar .nav-actions {
    gap: 7px !important;
    padding-right: 2px !important;
  }
}

/* (2) Hero -> next-section blend. Replace the steep 2-stop ramp
   with a 6-stop curve so the dark dissolves into the light section
   instead of stopping at a visible band. Applied to the home hero. */
html[data-i18n-title="meta.home.title"] .hero::after {
  background:
    linear-gradient(180deg,
      rgba(239, 245, 249, 0) 0%,
      rgba(239, 245, 249, 0.04) 28%,
      rgba(239, 245, 249, 0.14) 50%,
      rgba(239, 245, 249, 0.34) 70%,
      rgba(239, 245, 249, 0.66) 86%,
      rgba(239, 245, 249, 0.92) 96%,
      #EFF5F9 100%) !important;
  filter: none !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .hero::after {
  background:
    linear-gradient(180deg,
      rgba(11, 19, 34, 0) 0%,
      rgba(11, 19, 34, 0.06) 28%,
      rgba(11, 19, 34, 0.18) 50%,
      rgba(11, 19, 34, 0.42) 70%,
      rgba(11, 19, 34, 0.74) 86%,
      rgba(11, 19, 34, 0.94) 96%,
      #0B1322 100%) !important;
}

/* ============================================================
   v0.6.62 — icon sizing + hamburger centering.
   Sun/moon was visually smaller than TR text and hamburger bars.
   Hamburger bars also needed an explicit re-center now that the
   button is a 42x42 flex container.
   ============================================================ */
@media (max-width: 960px) {
  /* Bigger sun/moon icon — matches the visual weight of "TR" and hamburger. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb svg {
    width: 22px !important;
    height: 22px !important;
    color: #E8EDF2 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  /* Hamburger: explicit flex stacking + centered bars. */
  .navbar .nav-actions .mobile-toggle {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  .navbar .nav-actions .mobile-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 auto !important;
    background: #E8EDF2 !important;
    border-radius: 2px !important;
    transform-origin: center !important;
  }
}

@media (max-width: 390px) {
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb svg {
    width: 20px !important;
    height: 20px !important;
  }

  .navbar .nav-actions .mobile-toggle span {
    width: 20px !important;
  }
}

/* ============================================================
   v0.6.63 — nav mode mutual exclusivity.
   Earlier rules let nav-links AND hamburger show simultaneously
   at tablet widths (~960-1240px). This block enforces:
   - desktop (>=1241px): nav-links visible, hamburger hidden
   - tablet/mobile (<=1240px): nav-links hidden, hamburger visible
   Highest specificity, lives at end of file -> always wins.
   ============================================================ */
@media (min-width: 1241px) {
  .navbar .nav-links {
    display: grid !important;
  }
  .navbar .mobile-toggle {
    display: none !important;
  }
}

@media (max-width: 1240px) {
  .navbar .nav-links {
    display: none !important;
  }
  .navbar .mobile-toggle {
    display: inline-flex !important;
  }
}

/* ============================================================
   v0.6.64 — hamburger bar centering, absolute final.
   The bars were rendering pushed to the left because my prior
   margin:0 auto wasn't winning in the flex context. Use
   align-self + zero margin, plus center the button content
   explicitly via flex on the button itself.
   ============================================================ */
@media (max-width: 1240px) {
  .navbar .nav-actions .mobile-toggle,
  .navbar .mobile-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    gap: 5px !important;
  }

  .navbar .nav-actions .mobile-toggle > span,
  .navbar .mobile-toggle > span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    background: #E8EDF2 !important;
    border-radius: 2px !important;
    transform-origin: center !important;
  }

  .navbar .nav-actions .mobile-toggle:not(.is-active) > span,
  .navbar .mobile-toggle:not(.is-active) > span {
    transform: none !important;
  }
}

@media (max-width: 390px) {
  .navbar .nav-actions .mobile-toggle > span,
  .navbar .mobile-toggle > span {
    width: 20px !important;
  }
}

/* ============================================================
   v0.6.65 — unify the three controls across the FULL hamburger range.
   Previously the 42x42-square treatment was scoped to <=960px, but
   hamburger appears starting at <=1240px. Between 961-1240px, the
   theme/lang toggles were keeping their wider desktop-pill styling
   while the hamburger was already a square. Result: three controls,
   three different sizes.
   This block re-applies the same square reset across the entire
   range where the hamburger is visible.
   ============================================================ */
@media (max-width: 1240px) {
  .navbar .nav-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 0 4px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  .navbar .nav-actions > * {
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  .navbar .nav-actions .theme-toggle.ta-theme-toggle,
  .navbar .nav-actions .lang-switch-toggle,
  .navbar .nav-actions .mobile-toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(139, 183, 210, 0.30) !important;
    background:
      linear-gradient(180deg, rgba(27, 40, 62, 0.86), rgba(18, 28, 47, 0.86)) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hamburger needs column direction for its three bars; override the row above. */
  .navbar .nav-actions .mobile-toggle {
    flex-direction: column !important;
    gap: 5px !important;
  }

  /* Theme toggle: flat thumb + centered icon. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-track {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb svg {
    width: 22px !important;
    height: 22px !important;
    color: #E8EDF2 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-symbol {
    display: none !important;
  }

  /* Language toggle: kill pill+thumb, show centered EN/TR label only. */
  .navbar .nav-actions .lang-switch-toggle .lang-switch-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .navbar .nav-actions .lang-switch-toggle .lang-switch-thumb,
  .navbar .nav-actions .lang-switch-toggle .lang-switch-icon {
    display: none !important;
  }

  .navbar .nav-actions .lang-switch-toggle .lang-switch-label {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: rgba(232, 237, 242, 0.58) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .navbar .nav-actions .lang-switch[data-current-lang="en"] [data-switch-lang="en"],
  .navbar .nav-actions .lang-switch[data-current-lang="tr"] [data-switch-lang="tr"],
  .navbar .nav-actions .lang-switch-toggle[data-current-lang="en"] [data-switch-lang="en"],
  .navbar .nav-actions .lang-switch-toggle[data-current-lang="tr"] [data-switch-lang="tr"] {
    opacity: 1 !important;
    color: #FFFFFF !important;
  }

  /* Hamburger bars: centered, no margin shenanigans. */
  .navbar .nav-actions .mobile-toggle > span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    background: #E8EDF2 !important;
    border-radius: 2px !important;
    transform-origin: center !important;
  }

  .navbar .nav-actions .mobile-toggle:not(.is-active) > span {
    transform: none !important;
  }

  /* Hover / focus shared. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle:hover,
  .navbar .nav-actions .theme-toggle.ta-theme-toggle:focus-visible,
  .navbar .nav-actions .lang-switch-toggle:hover,
  .navbar .nav-actions .lang-switch-toggle:focus-visible,
  .navbar .nav-actions .mobile-toggle:hover,
  .navbar .nav-actions .mobile-toggle:focus-visible {
    background:
      linear-gradient(180deg, rgba(35, 54, 82, 0.94), rgba(23, 34, 57, 0.94)) !important;
    border-color: rgba(139, 183, 210, 0.48) !important;
  }
}

@media (max-width: 480px) {
  .navbar .nav-actions { gap: 8px !important; }
}

@media (max-width: 390px) {
  .navbar .nav-actions {
    gap: 7px !important;
    padding-right: 2px !important;
  }
  .navbar .nav-actions .theme-toggle.ta-theme-toggle,
  .navbar .nav-actions .lang-switch-toggle,
  .navbar .nav-actions .mobile-toggle {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb svg {
    width: 20px !important;
    height: 20px !important;
  }
  .navbar .nav-actions .mobile-toggle > span {
    width: 20px !important;
  }
}

/* ============================================================
   v0.6.66 — hero stats reorganized on mobile.
   Previously 2-col with 3 items left an orphan card on row 2.
   New: 3-col compact, smaller numbers, tighter padding.
   ============================================================ */
@media (max-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    width: min(100%, 380px) !important;
  }

  .hero-stat,
  .stat-card {
    min-height: 64px !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .hero-stat-value,
  .hero-stat-number,
  .stat-number {
    font-size: clamp(1.25rem, 5.4vw, 1.55rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  .hero-stat-label,
  .stat-label {
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: rgba(232, 237, 242, 0.78) !important;
  }
}

@media (max-width: 390px) {
  .hero-stats {
    gap: 5px !important;
    padding: 8px !important;
  }
  .hero-stat,
  .stat-card {
    min-height: 58px !important;
    padding: 6px 5px !important;
  }
  .hero-stat-value,
  .hero-stat-number,
  .stat-number {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
  }
  .hero-stat-label,
  .stat-label {
    font-size: 0.58rem !important;
  }
}

/* ============================================================
   v0.6.67 — hamburger selector fix.
   Discovery: .mobile-toggle is a SIBLING of .nav-actions, not a
   child. Every previous .navbar .nav-actions .mobile-toggle rule
   matched nothing. Using .navbar .mobile-toggle here so the
   sizing/centering actually applies. Highest specificity, end of
   file -> wins.
   ============================================================ */
@media (max-width: 1240px) {
  .navbar .mobile-toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(139, 183, 210, 0.30) !important;
    background:
      linear-gradient(180deg, rgba(27, 40, 62, 0.86), rgba(18, 28, 47, 0.86)) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    vertical-align: middle !important;
  }

  .navbar .mobile-toggle:hover,
  .navbar .mobile-toggle:focus-visible {
    background:
      linear-gradient(180deg, rgba(35, 54, 82, 0.94), rgba(23, 34, 57, 0.94)) !important;
    border-color: rgba(139, 183, 210, 0.48) !important;
  }

  .navbar .mobile-toggle > span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    background: #E8EDF2 !important;
    border-radius: 2px !important;
    transform-origin: center !important;
  }

  .navbar .mobile-toggle:not(.is-active) > span {
    transform: none !important;
  }
}

@media (max-width: 390px) {
  .navbar .mobile-toggle {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  .navbar .mobile-toggle > span {
    width: 20px !important;
  }
}

/* The navbar-inner needs to align the mobile-toggle with the nav-actions
   children that sit next to it. */
@media (max-width: 1240px) {
  .navbar .navbar-inner {
    align-items: center !important;
  }
}

/* ============================================================
   v0.6.68 — theme toggle icon visibility.
   Bug: JS sets iconNode.textContent BEFORE the toggle is injected
   into the DOM. So on first page load the thumb is empty until
   the user clicks to switch themes. Fix in CSS: use the
   pre-populated .ta-theme-toggle-sun / .ta-theme-toggle-moon
   spans that ARE injected with text content, and show whichever
   matches the current theme.
   ============================================================ */
@media (max-width: 1240px) {
  .navbar .nav-actions .theme-toggle.ta-theme-toggle {
    position: relative !important;
  }

  /* Hide both symbols by default, then show the matching one. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-symbol {
    display: none !important;
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #E8EDF2 !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  html[data-theme="dark"] .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-moon {
    display: flex !important;
  }
  html[data-theme="light"] .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-sun {
    display: flex !important;
  }
  /* Fallback when no data-theme attribute is set yet (FOUC window): show moon. */
  html:not([data-theme="light"]) .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-moon {
    display: flex !important;
  }

  /* Keep the JS-populated icon span hidden so it doesn't double up. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle [data-theme-toggle-icon] {
    display: none !important;
  }
}

/* ============================================================
   v0.6.69 — theme toggle icon, defensive pseudo-element approach.
   All prior attempts targeted JS-injected child elements whose
   sizing/positioning got fought by other inherited rules. This
   uses a ::before on the BUTTON itself — no JS-injected content
   needed, no inner-element fighting.
   ============================================================ */
@media (max-width: 1240px) {
  .navbar .nav-actions .theme-toggle.ta-theme-toggle {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Hide ALL the JS-injected inner content so it can't render incorrectly. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-track,
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-symbol,
  .navbar .nav-actions .theme-toggle.ta-theme-toggle .ta-theme-toggle-thumb,
  .navbar .nav-actions .theme-toggle.ta-theme-toggle [data-theme-toggle-icon] {
    display: none !important;
  }

  /* Inject the icon via pseudo-element. Always centered, always sized. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle::before {
    content: '☾' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #E8EDF2 !important;
    pointer-events: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif !important;
  }

  html[data-theme="light"] .navbar .nav-actions .theme-toggle.ta-theme-toggle::before {
    content: '☀' !important;
    font-size: 22px !important;
  }
}

/* ============================================================
   v0.6.70 — vertically align the three controls.
   Theme/lang live in .nav-actions; hamburger lives outside it.
   They're aligned through .navbar-inner. Force identical box
   model and centering so they're the same visual height.
   ============================================================ */
@media (max-width: 1240px) {
  /* Parent container: center children vertically. */
  .navbar .navbar-inner,
  .navbar .navbar-inner > .nav-actions {
    align-items: center !important;
  }

  /* All three controls: identical box, identical line-height. */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle,
  .navbar .nav-actions .lang-switch-toggle,
  .navbar .mobile-toggle {
    box-sizing: border-box !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    align-self: center !important;
    flex: 0 0 42px !important;
    /* Move focus outline outward so it doesn't push siblings around */
    outline-offset: 0 !important;
  }

  /* Focus outline normalization — same style, doesn't change layout */
  .navbar .nav-actions .theme-toggle.ta-theme-toggle:focus,
  .navbar .nav-actions .lang-switch-toggle:focus,
  .navbar .mobile-toggle:focus,
  .navbar .nav-actions .theme-toggle.ta-theme-toggle:focus-visible,
  .navbar .nav-actions .lang-switch-toggle:focus-visible,
  .navbar .mobile-toggle:focus-visible {
    outline: 2px solid rgba(139, 183, 210, 0.55) !important;
    outline-offset: 2px !important;
  }
  .navbar .nav-actions .theme-toggle.ta-theme-toggle:focus:not(:focus-visible),
  .navbar .nav-actions .lang-switch-toggle:focus:not(:focus-visible),
  .navbar .mobile-toggle:focus:not(:focus-visible) {
    outline: none !important;
  }
}

@media (max-width: 390px) {
  .navbar .nav-actions .theme-toggle.ta-theme-toggle,
  .navbar .nav-actions .lang-switch-toggle,
  .navbar .mobile-toggle {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
  }
}

/* ============================================================
   v0.6.71 — mobile menu visibility at tablet widths.
   A rule at line 15705 forces .mobile-menu { display:none !important }
   at min-width:961px, hiding the menu in the 961-1240px range where
   the hamburger is visible. Re-enable it for that range.
   ============================================================ */
@media (min-width: 961px) and (max-width: 1240px) {
  .navbar ~ .mobile-menu,
  .mobile-menu {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   v0.6.72 — mobile menu optimised for tablet width (961-1240px).
   Earlier my mobile menu CSS was scoped to <=960px, so at tablet
   widths the menu showed but rendered with default (mostly broken)
   styling: items stretched full-width, programmes sub-grid in a
   horizontal row, toggle controls misaligned.
   ============================================================ */
@media (min-width: 961px) and (max-width: 1240px) {
  .mobile-menu {
    padding: 28px clamp(28px, 6vw, 64px) calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 14px !important;
    align-items: stretch !important;
    overflow-y: auto !important;
  }

  /* Constrain items to a readable width centered in the viewport. */
  .mobile-menu .nav-link,
  .mobile-menu-login,
  .mobile-menu-programmes,
  .mobile-menu .mobile-lang-dropdown {
    width: min(100%, 680px) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .mobile-menu .nav-link {
    min-height: 54px !important;
    padding: 14px 22px !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Programmes sub-grid: 3 columns at tablet width (was 1-row horizontal). */
  .mobile-menu-programmes {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .mobile-menu-section-label {
    grid-column: 1 / -1 !important;
    font-size: 0.72rem !important;
    margin-bottom: 4px !important;
  }

  .mobile-menu .mobile-menu-sub-link {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .mobile-menu-login {
    min-height: 54px !important;
    padding: 14px 22px !important;
    font-size: 1.02rem !important;
  }

  /* Lang/theme toggle row at the bottom of the menu: centered and properly sized. */
  .mobile-menu .mobile-lang-dropdown,
  .mobile-menu .lang-switch {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
  }

  .mobile-menu .lang-switch-toggle,
  .mobile-menu .theme-toggle.ta-theme-toggle {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   v0.6.73 — remove duplicate theme/lang controls from inside the
   mobile menu. They already exist in the navbar (sticky top), so
   showing them again at the bottom of the open menu is redundant.
   ============================================================ */
.mobile-menu .mobile-lang-dropdown,
.mobile-menu .lang-switch,
.mobile-menu .lang-dropdown,
.mobile-menu .lang-switch-toggle,
.mobile-menu .lang-dropdown-toggle,
.mobile-menu .theme-toggle.ta-theme-toggle,
.mobile-menu [data-theme-toggle] {
  display: none !important;
}

/* ============================================================
   v0.6.74 — Tally embed height recovery.
   Keep the native transparent embed, but make the fallback iframe
   height large enough for the full student request form when Tally's
   dynamicHeight script does not resize the frame.
   ============================================================ */
.contact-home-tally.contact-home-native-embed .tally-embed-frame,
.contact-form-shell.tally-embed-shell .tally-embed-frame,
iframe.tally-embed-frame {
  min-height: clamp(1120px, 132vh, 1480px) !important;
}

@media (max-width: 640px) {
  .contact-home-tally.contact-home-native-embed .tally-embed-frame,
  .contact-form-shell.tally-embed-shell .tally-embed-frame,
  iframe.tally-embed-frame {
    min-height: 1320px !important;
  }
}

@media (max-width: 390px) {
  .contact-home-tally.contact-home-native-embed .tally-embed-frame,
  .contact-form-shell.tally-embed-shell .tally-embed-frame,
  iframe.tally-embed-frame {
    min-height: 1400px !important;
  }
}

/* ============================================================
   v0.6.75 — footer wordmark composition.
   The brand band should read as a deliberate oversized wordmark
   that belongs to the footer canvas, bleeds at the edges, and grows
   gently with the existing scroll-linked footer motion.
   ============================================================ */
.footer-new .footer-ta-band {
  min-height: clamp(186px, 19vw, 286px) !important;
  overflow: clip !important;
  background:
    radial-gradient(920px 280px at 50% calc(68% + var(--footer-bg-shift, 0px)), rgba(102, 155, 188, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, 0.14) 62%, rgba(5, 8, 17, 0.36) 100%) !important;
}

.footer-new .footer-ta-stage {
  min-height: clamp(186px, 19vw, 286px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 0 !important;
  overflow: visible !important;
}

.footer-new .footer-ta-text {
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  font-size: clamp(74px, 14.2vw, 232px) !important;
  line-height: 0.82 !important;
  transform: translate3d(0, calc(4% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) scale(var(--footer-scale, 0.98)) !important;
  transform-origin: center center !important;
  opacity: max(var(--footer-opacity, 0.38), 0.38) !important;
  color: rgba(232, 237, 242, 0.72) !important;
  filter: drop-shadow(0 0 12px rgba(102, 155, 188, 0.09)) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transition: color 220ms ease, filter 220ms ease !important;
}

.footer-new .footer-ta-band.is-spotlight-active .footer-ta-text,
.footer-new .footer-ta-band:hover .footer-ta-text {
  opacity: 1 !important;
  color: rgba(232, 237, 242, 0.78) !important;
  filter: drop-shadow(0 0 18px rgba(102, 155, 188, 0.15)) !important;
}

@media (max-width: 960px) {
  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(138px, 26vw, 190px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(54px, 18vw, 128px) !important;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(124px, 25vw, 154px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(68px, 14.6vw, 86px) !important;
    transform: translate3d(clamp(-24px, -3.4vw, -10px), calc(2% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) scale(var(--footer-scale, 0.98)) !important;
  }
}

@media (max-width: 480px) {
  .footer-new .footer-ta-band,
  .footer-new .footer-ta-stage {
    min-height: clamp(118px, 34vw, 152px) !important;
  }

  .footer-new .footer-ta-text {
    font-size: clamp(52px, 15.4vw, 68px) !important;
    transform: translate3d(0, calc(2% + var(--footer-rise, 0px) + var(--footer-depth, 0px)), 0) scale(var(--footer-scale, 0.98)) !important;
  }

  .footer-bottom-new {
    padding-block: 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-bottom-new .container {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    row-gap: 9px !important;
    padding-right: 104px !important;
    text-align: left !important;
  }

  .footer-bottom-new p,
  .footer-bottom-new .footer-tagline-new,
  .footer-bottom-new .footer-legal-notice {
    justify-self: start !important;
    text-align: left !important;
    line-height: 1.35 !important;
  }

  .footer-bottom-new .footer-tagline-new {
    max-width: 18ch !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 360px) {
  .footer-bottom-new {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-bottom-new .container {
    padding-right: 0 !important;
  }
}

/* ============================================================
   v0.6.78 — mobile footer connect column repair.
   Keep the two-column footer scan pattern, but let the final
   contact column breathe as its own full-width row on small screens.
   ============================================================ */
@media (max-width: 640px) {
  .footer-grid-new > .footer-col-new:last-child {
    grid-column: 1 / -1 !important;
    width: min(100%, 360px) !important;
    max-width: none !important;
    justify-self: start !important;
    align-self: start !important;
    text-align: left !important;
  }

  .footer-grid-new > .footer-col-new:last-child .footer-heading-new,
  .footer-grid-new > .footer-col-new:last-child .footer-links-new,
  .footer-grid-new > .footer-col-new:last-child li {
    width: 100% !important;
    text-align: left !important;
  }

  .footer-grid-new > .footer-col-new:last-child .footer-links-new {
    display: grid !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .footer-grid-new > .footer-col-new:last-child .footer-link-new {
    display: inline-flex !important;
    width: auto !important;
    max-width: min(100%, 30rem) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 9px !important;
    text-align: left !important;
    line-height: 1.38 !important;
    white-space: normal !important;
  }

  .footer-grid-new > .footer-col-new:last-child .footer-link-new span,
  .footer-grid-new > .footer-col-new:last-child .footer-link-email-new {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }

  .footer-grid-new > .footer-col-new:last-child .footer-link-icon-new {
    flex: 0 0 auto !important;
    margin-top: 0.18em !important;
  }
}

/* ============================================================
   v0.6.76 — Tally mobile height trim.
   The previous defensive fallback prevented clipping, but made the
   first homepage Tally step look like a giant empty panel on mobile.
   Keep enough room for the embed while removing the dead space.
   ============================================================ */
.contact-home-tally.contact-home-native-embed .tally-embed-frame {
  min-height: clamp(540px, 64vh, 640px) !important;
}

.contact-form-shell.tally-embed-shell .tally-embed-frame {
  min-height: clamp(720px, 84vh, 920px) !important;
}

@media (max-width: 640px) {
  .contact-home-tally.contact-home-native-embed .tally-embed-frame {
    min-height: clamp(500px, 58vh, 560px) !important;
  }

  .contact-form-shell.tally-embed-shell .tally-embed-frame {
    min-height: clamp(660px, 76vh, 780px) !important;
  }
}

@media (max-width: 390px) {
  .contact-home-tally.contact-home-native-embed .tally-embed-frame {
    min-height: 580px !important;
  }

  .contact-form-shell.tally-embed-shell .tally-embed-frame {
    min-height: 760px !important;
  }
}

/* ============================================================
   v0.6.79 — mobile hero stats + transition cleanup.
   The homepage stats need to occupy the row evenly on mobile, and
   the requested hero-to-features grey gradient should be removed.
   ============================================================ */
html[data-i18n-title="meta.home.title"] .hero::after,
html[data-theme="dark"][data-i18n-title="meta.home.title"] .hero::after,
html[data-i18n-title="meta.home.title"] #features::before,
html[data-theme="dark"][data-i18n-title="meta.home.title"] #features::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  background: none !important;
}

html[data-i18n-title="meta.home.title"] .hero-bg::after {
  background:
    radial-gradient(circle at 36% 42%, rgba(102, 155, 188, 0.10), transparent 34%) !important;
}

html[data-i18n-title="meta.home.title"] #features {
  margin-top: 0 !important;
  background: #F6FAFC !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] #features {
  margin-top: 0 !important;
  background: #101928 !important;
}

@media (max-width: 640px) {
  html[data-i18n-title="meta.home.title"] .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 460px !important;
    gap: 6px !important;
    padding: 10px !important;
    align-items: stretch !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-stat {
    min-width: 0 !important;
    width: auto !important;
  }
}

@media (max-width: 390px) {
  html[data-i18n-title="meta.home.title"] .hero-stats {
    width: 100% !important;
    gap: 5px !important;
    padding: 8px !important;
  }
}

/* ============================================================
   v0.6.80 — desktop navbar edge spacing.
   Active nav pills should not visually merge with the login CTA.
   ============================================================ */
@media (min-width: 1241px) {
  .navbar .nav-actions {
    margin-left: clamp(12px, 1.1vw, 18px) !important;
  }

  .navbar .nav-links .nav-link:last-child {
    margin-right: clamp(10px, 0.9vw, 14px) !important;
  }
}

/* ============================================================
   v0.6.84 — mobile hero, Tally fit, and card stacking.
   Bring first-screen content up, stop the homepage Tally embed from
   forcing sideways clipping, and adapt the Swag-style layered stack
   to the existing Promise and Programme cards.
   ============================================================ */
html[data-i18n-title="meta.home.title"] .contact-home-grid,
html[data-i18n-title="meta.home.title"] .contact-home-form,
html[data-i18n-title="meta.home.title"] .contact-home-channels {
  min-width: 0 !important;
}

html[data-i18n-title="meta.home.title"] .contact-home-tally.contact-home-native-embed {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html[data-i18n-title="meta.home.title"] .contact-home-tally .tally-embed-frame {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px !important;
}

@media (max-width: 1120px) {
  html[data-i18n-title="meta.home.title"] .contact-home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 620px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  html[data-i18n-title="meta.home.title"] .contact-home-channels {
    width: 100% !important;
    max-width: 620px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 720px) {
  html[data-i18n-title="meta.home.title"] #contact .section-header {
    text-align: center !important;
  }

  html[data-i18n-title="meta.home.title"] #homepage-contact-title {
    max-width: 18ch !important;
    margin-inline: auto !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  html[data-i18n-title="meta.home.title"] #contact .section-desc {
    max-width: 34ch !important;
    margin-inline: auto !important;
    text-wrap: pretty !important;
  }

  html[data-i18n-title="meta.home.title"] .contact-home-form.contact-home-tally {
    padding: clamp(14px, 4.4vw, 20px) clamp(10px, 3.4vw, 16px) clamp(18px, 5vw, 24px) !important;
    border-radius: 18px !important;
  }

  html[data-i18n-title="meta.home.title"] .contact-home-tally .contact-level-test-prompt,
  html[data-i18n-title="meta.home.title"] .contact-home-tally .tally-fallback-note {
    padding-inline: 4px !important;
    text-align: center !important;
  }

  html[data-i18n-title="meta.home.title"] .contact-home-tally.contact-home-native-embed .tally-embed-frame {
    min-height: clamp(500px, 64svh, 610px) !important;
  }
}

@media (max-width: 640px) {
  html[data-i18n-title="meta.home.title"] .hero {
    align-items: flex-start !important;
    padding-top: 0 !important;
    min-height: min(720px, 100svh) !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-content {
    padding-block: clamp(16px, 4.8vw, 24px) clamp(48px, 12vw, 68px) !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-badge {
    margin-top: 0 !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-media img {
    object-position: 62% 28% !important;
  }
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.home.title"] #promise {
    overflow: visible !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-wrapper {
    overflow: visible !important;
    padding-inline: 0 !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-wrapper::before,
  html[data-i18n-title="meta.home.title"] .promise-wrapper::after {
    content: none !important;
    display: none !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track {
    display: block !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-card {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 0 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(102, 155, 188, 0.18) !important;
    box-shadow: 0 18px 38px rgba(16, 42, 68, 0.12) !important;
    transform: translateY(var(--stack-lift, 0px)) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-card + .promise-card {
    margin-top: -30px !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-card:nth-child(1) { --stack-lift: 0px; z-index: 21 !important; }
  html[data-i18n-title="meta.home.title"] .promise-card:nth-child(2) { --stack-lift: 4px; z-index: 22 !important; }
  html[data-i18n-title="meta.home.title"] .promise-card:nth-child(3) { --stack-lift: 8px; z-index: 23 !important; }
  html[data-i18n-title="meta.home.title"] .promise-card:nth-child(4) { --stack-lift: 12px; z-index: 24 !important; }
  html[data-i18n-title="meta.home.title"] .promise-card:nth-child(5) { --stack-lift: 16px; z-index: 25 !important; }
  html[data-i18n-title="meta.home.title"] .promise-card:nth-child(6) { --stack-lift: 20px; z-index: 26 !important; }

  html[data-i18n-title="meta.home.title"] .promise-card:hover {
    transform: translateY(var(--stack-lift, 0px)) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-controls {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html[data-i18n-title="meta.home.title"] #programmes .programmes-grid {
    display: block !important;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card {
    position: relative !important;
    top: auto !important;
    z-index: 30 !important;
    margin: 0 0 18px !important;
    min-height: clamp(210px, 48vw, 280px) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(16, 42, 68, 0.10) !important;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card + .programme-card {
    margin-top: -28px !important;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card:nth-child(1) { z-index: 31 !important; }
  html[data-i18n-title="meta.home.title"] #programmes .programme-card:nth-child(2) { z-index: 32 !important; }
  html[data-i18n-title="meta.home.title"] #programmes .programme-card:nth-child(3) { z-index: 33 !important; }
  html[data-i18n-title="meta.home.title"] #programmes .programme-card:nth-child(4) { z-index: 34 !important; }
}

/* ============================================================
   v0.6.86 — mobile Promise wallet switcher.
   The Promise cards become an interactive wallet deck on mobile:
   visible cards sit beneath the active card, and the lower card
   rises into place when the arrow control advances the stack.
   ============================================================ */
@media (max-width: 760px) {
  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack {
    position: relative !important;
    display: block !important;
    min-height: var(--wallet-height, 360px) !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card {
    position: absolute !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(216px, 54vw, 260px) !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 16px !important;
    transform: translate3d(0, 92px, 0) scale(0.88) !important;
    transition:
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 360ms ease,
      box-shadow 360ms ease !important;
    will-change: transform, opacity !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="0"] {
    z-index: 60 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    box-shadow: 0 22px 46px rgba(16, 42, 68, 0.15) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="1"] {
    z-index: 59 !important;
    opacity: 0.92 !important;
    transform: translate3d(0, 24px, 0) scale(0.965) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="2"] {
    z-index: 58 !important;
    opacity: 0.62 !important;
    transform: translate3d(0, 48px, 0) scale(0.93) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="3"] {
    z-index: 57 !important;
    opacity: 0.28 !important;
    transform: translate3d(0, 70px, 0) scale(0.895) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack + .promise-controls {
    display: flex !important;
    margin-top: 18px !important;
  }
}

.back-to-top-button {
  position: fixed;
  right: clamp(18px, 3vw, 28px);
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 920;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(102, 155, 188, 0.38);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(18, 34, 54, 0.96), rgba(12, 22, 38, 0.96));
  color: #FDF0D5;
  box-shadow: 0 16px 36px rgba(5, 12, 24, 0.22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 12px, 0) scale(0.94);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    background 180ms ease;
}

.back-to-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.back-to-top-button:hover,
.back-to-top-button:focus-visible {
  outline: none;
  border-color: rgba(253, 240, 213, 0.62);
  background:
    linear-gradient(180deg, rgba(27, 50, 78, 0.98), rgba(16, 31, 53, 0.98));
}

@media (max-width: 640px) {
  .back-to-top-button {
    right: 18px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
}

/* ============================================================
   v0.6.87 — homepage card wallet decks.
   Apply the same wallet switcher to the main homepage card groups
   on desktop and mobile, while keeping functional CTA cards normal.
   ============================================================ */
html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: min(100%, 700px) !important;
  max-width: 100% !important;
  min-height: var(--wallet-height, 360px) !important;
  margin-inline: auto !important;
  overflow: visible !important;
  isolation: isolate !important;
  transform: none !important;
  transition: none !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card {
  position: absolute !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(230px, 26vw, 320px) !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border-radius: 16px !important;
  z-index: 1 !important;
  transform: translate3d(0, 96px, 0) scale(0.88) !important;
  transition:
    transform 540ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms ease,
    box-shadow 360ms ease !important;
  will-change: transform, opacity !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card[data-wallet-pos="0"] {
  z-index: 60 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  box-shadow: 0 24px 48px rgba(16, 42, 68, 0.15) !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card[data-wallet-pos="1"] {
  z-index: 59 !important;
  opacity: 0.92 !important;
  transform: translate3d(0, 26px, 0) scale(0.965) !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card[data-wallet-pos="2"] {
  z-index: 58 !important;
  opacity: 0.62 !important;
  transform: translate3d(0, 52px, 0) scale(0.93) !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card[data-wallet-pos="3"] {
  z-index: 57 !important;
  opacity: 0.28 !important;
  transform: translate3d(0, 76px, 0) scale(0.895) !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack + .card-wallet-controls,
html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack + .promise-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: clamp(18px, 3vw, 28px) !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-prev,
html[data-i18n-title="meta.home.title"] .card-wallet-next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(102, 155, 188, 0.42) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 245, 249, 0.94)) !important;
  color: var(--ta-ink, #1C1C2E) !important;
  box-shadow: 0 10px 22px rgba(16, 42, 68, 0.08) !important;
  cursor: pointer !important;
}

html[data-i18n-title="meta.home.title"] .card-wallet-prev:hover,
html[data-i18n-title="meta.home.title"] .card-wallet-next:hover,
html[data-i18n-title="meta.home.title"] .card-wallet-prev:focus-visible,
html[data-i18n-title="meta.home.title"] .card-wallet-next:focus-visible {
  outline: none !important;
  border-color: rgba(102, 155, 188, 0.78) !important;
  background:
    linear-gradient(135deg, rgba(28, 48, 78, 0.98), rgba(24, 36, 62, 0.98)) !important;
  color: #fff !important;
}

html[data-i18n-title="meta.home.title"] #programmes .card-wallet-track.is-wallet-stack .card-wallet-card {
  min-height: clamp(270px, 29vw, 360px) !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack {
    width: 100% !important;
  }

  html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card {
    min-height: clamp(216px, 54vw, 260px) !important;
  }
}

/* ============================================================
   v0.6.87 — homepage hero refresh + visible programme cards.
   Inspired by a large editorial wordmark/photo hero, adapted to the
   Talk Arabic palette and current CTA structure. Programme cards remain
   visible because they are navigational choices, not carousel content.
   ============================================================ */
html[data-i18n-title="meta.home.title"] .hero {
  min-height: min(900px, 100svh) !important;
  margin: clamp(8px, 1.2vw, 16px) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, #142135 0%, #0E1727 100%) !important;
}

html[data-i18n-title="meta.home.title"] .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 1 !important;
  height: clamp(96px, 16vw, 170px) !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(13, 23, 38, 0.74), rgba(13, 23, 38, 0)) !important;
}

html[data-i18n-title="meta.home.title"] .hero-media {
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  opacity: 1 !important;
}

html[data-i18n-title="meta.home.title"] .hero-media img {
  object-position: 68% 44% !important;
  filter: saturate(0.96) contrast(1.04) !important;
}

html[data-i18n-title="meta.home.title"] .hero-media::after {
  background:
    linear-gradient(90deg,
      rgba(13, 23, 38, 0.90) 0%,
      rgba(13, 23, 38, 0.72) 38%,
      rgba(13, 23, 38, 0.28) 70%,
      rgba(13, 23, 38, 0.08) 100%) !important;
}

html[data-i18n-title="meta.home.title"] .hero-media::before {
  background:
    linear-gradient(180deg, rgba(13, 23, 38, 0.10) 0%, rgba(13, 23, 38, 0.02) 42%, rgba(13, 23, 38, 0.50) 100%) !important;
  opacity: 1 !important;
}

html[data-i18n-title="meta.home.title"] .hero-bg {
  background:
    radial-gradient(circle at 52% 38%, rgba(253, 240, 213, 0.08), transparent 31%),
    linear-gradient(90deg, rgba(12, 21, 35, 0.82), rgba(12, 21, 35, 0.08)) !important;
  z-index: 1 !important;
}

html[data-i18n-title="meta.home.title"] .hero-bg::after {
  background: none !important;
}

html[data-i18n-title="meta.home.title"] .hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: min(100% - clamp(38px, 7vw, 110px), 1160px) !important;
  max-width: 1160px !important;
  padding: clamp(112px, 16vh, 150px) 0 clamp(54px, 9vh, 86px) !important;
  margin-inline: auto !important;
}

html[data-i18n-title="meta.home.title"] .hero-badge {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(253, 240, 213, 0.32) !important;
  color: rgba(253, 240, 213, 0.96) !important;
}

html[data-i18n-title="meta.home.title"] .hero h1 {
  max-width: 13ch !important;
  font-size: clamp(3rem, 5vw, 4.9rem) !important;
  line-height: 1.03 !important;
  letter-spacing: 0 !important;
}

html[data-i18n-title="meta.home.title"] .hero-subtitle {
  max-width: 52ch !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

html[data-i18n-title="meta.home.title"] .hero-ctas {
  margin-top: clamp(24px, 3vw, 38px) !important;
}

html[data-i18n-title="meta.home.title"] .hero-stats {
  position: absolute !important;
  right: 0 !important;
  bottom: clamp(54px, 8vh, 92px) !important;
  width: min(390px, 32vw) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.home.title"] .hero-stat {
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: rgba(102, 155, 188, 0.28) !important;
  border: 1px solid rgba(253, 240, 213, 0.16) !important;
  backdrop-filter: blur(10px) !important;
}

html[data-i18n-title="meta.home.title"] .hero-stat-value {
  font-size: clamp(0.95rem, 1.4vw, 1.2rem) !important;
}

html[data-i18n-title="meta.home.title"] .hero-stat-label {
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
}

html[data-i18n-title="meta.home.title"] #programmes .programmes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  width: 100% !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  margin-inline: auto !important;
}

html[data-i18n-title="meta.home.title"] #programmes .programme-card {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  min-height: clamp(180px, 17vw, 224px) !important;   /* was 230-300 — Faruk: too tall */
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.home.title"] .hero {
    min-height: min(760px, 100svh) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  html[data-i18n-title="meta.home.title"] .hero::before {
    inset: 84px -28vw auto !important;
    font-size: clamp(4.1rem, 26vw, 7rem) !important;
    opacity: 0.78 !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-content {
    width: calc(100% - 48px) !important;
    padding-block: clamp(96px, 17vh, 132px) 44px !important;
  }

  /* v0.8.12 — Mobile hero readability: the angled hero-bg scrim fades out on
     the right, leaving the last word of each title line + the subtitle over
     the bright photo (low contrast). On phones use a VERTICAL scrim that
     darkens the lower text zone uniformly, so all text reads cleanly.
     (No overflow — measured; this is purely contrast.) */
  html[data-i18n-title="meta.home.title"] .hero-bg {
    background: linear-gradient(
      180deg,
      rgba(11, 19, 32, 0.42) 0%,
      rgba(11, 19, 32, 0.78) 34%,
      rgba(11, 19, 32, 0.90) 70%,
      rgba(11, 19, 32, 0.94) 100%
    ) !important;
  }

  html[data-i18n-title="meta.home.title"] .hero h1 {
    font-size: clamp(2.8rem, 11vw, 4rem) !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-stats {
    position: static !important;
    width: 100% !important;
    margin-top: 34px !important;
    gap: 6px !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-stat {
    border-radius: 12px !important;
    padding: 10px 8px !important;
  }
}

/* ============================================================
   v0.6.88 — considered homepage hero reset.
   The reference-inspired pass is pulled back into Talk Arabic's own
   design language: calm photo-led canvas, clear copy, visible CTAs,
   and quiet supporting stats. No oversized wordmark competing with
   the learner image.
   ============================================================ */
html[data-i18n-title="meta.home.title"] .hero {
  min-height: min(820px, calc(100svh - 24px)) !important;
  margin: clamp(8px, 1vw, 14px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  align-items: center !important;
  padding-top: 0 !important;
  background: #0E1727 !important;
  box-shadow: 0 22px 60px rgba(12, 21, 35, 0.18) !important;
}

html[data-i18n-title="meta.home.title"] .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: clamp(92px, 13vw, 150px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(12, 21, 35, 0.62) 0%, rgba(12, 21, 35, 0) 100%) !important;
}

html[data-i18n-title="meta.home.title"] .hero::after {
  height: clamp(58px, 8vw, 96px) !important;
  background:
    linear-gradient(180deg, rgba(246, 250, 252, 0) 0%, rgba(246, 250, 252, 0.58) 74%, #F6FAFC 100%) !important;
}

html[data-i18n-title="meta.home.title"] .hero-media img {
  object-position: 69% 48% !important;
  filter: saturate(0.98) contrast(1.04) brightness(0.94) !important;
}

html[data-i18n-title="meta.home.title"] .hero-media::after {
  background:
    linear-gradient(90deg,
      rgba(12, 21, 35, 0.92) 0%,
      rgba(12, 21, 35, 0.78) 34%,
      rgba(12, 21, 35, 0.36) 64%,
      rgba(12, 21, 35, 0.08) 100%) !important;
}

html[data-i18n-title="meta.home.title"] .hero-media::before {
  background:
    linear-gradient(180deg,
      rgba(12, 21, 35, 0.08) 0%,
      rgba(12, 21, 35, 0) 48%,
      rgba(12, 21, 35, 0.34) 100%) !important;
  opacity: 1 !important;
}

html[data-i18n-title="meta.home.title"] .hero-bg {
  background:
    radial-gradient(circle at 22% 44%, rgba(102, 155, 188, 0.18), transparent 32%),
    linear-gradient(90deg, rgba(12, 21, 35, 0.78) 0%, rgba(12, 21, 35, 0.22) 74%, rgba(12, 21, 35, 0.06) 100%) !important;
  z-index: 1 !important;
}

html[data-i18n-title="meta.home.title"] .hero-bg::after {
  background: none !important;
}

html[data-i18n-title="meta.home.title"] .hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: min(100% - clamp(36px, 7vw, 112px), 1160px) !important;
  max-width: 1160px !important;
  margin-inline: auto !important;
  padding: clamp(116px, 16vh, 156px) 0 clamp(58px, 8vh, 82px) !important;
  color: #FFFFFF !important;
}

html[data-i18n-title="meta.home.title"] .hero-badge {
  margin-bottom: clamp(18px, 2.4vw, 28px) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(253, 240, 213, 0.30) !important;
  color: rgba(253, 240, 213, 0.96) !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.home.title"] .hero h1 {
  max-width: 12.4ch !important;
  font-size: clamp(3.05rem, 5.1vw, 5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  margin-bottom: clamp(16px, 2vw, 22px) !important;
}

html[data-i18n-title="meta.home.title"] .language-bridge {
  width: min(310px, 42vw) !important;
  margin-block: clamp(10px, 1.5vw, 14px) clamp(18px, 2.2vw, 24px) !important;
}

html[data-i18n-title="meta.home.title"] .hero-subtitle {
  max-width: 50ch !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem) !important;
}

html[data-i18n-title="meta.home.title"] .hero-ctas {
  margin-top: clamp(24px, 3vw, 34px) !important;
}

html[data-i18n-title="meta.home.title"] .hero-stats {
  position: absolute !important;
  right: 0 !important;
  bottom: clamp(62px, 9vh, 96px) !important;
  width: min(390px, 32vw) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-i18n-title="meta.home.title"] .hero-stat {
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(12, 21, 35, 0.34) !important;
  border: 1px solid rgba(253, 240, 213, 0.18) !important;
  backdrop-filter: blur(12px) !important;
}

html[data-i18n-title="meta.home.title"] .hero-stat-value {
  font-size: clamp(1rem, 1.45vw, 1.22rem) !important;
  line-height: 1.1 !important;
}

html[data-i18n-title="meta.home.title"] .hero-stat-label {
  font-size: 0.68rem !important;
  line-height: 1.22 !important;
}

@media (max-width: 960px) {
  html[data-i18n-title="meta.home.title"] .hero-stats {
    position: static !important;
    width: min(100%, 460px) !important;
    margin-top: clamp(28px, 6vw, 42px) !important;
  }
}

@media (max-width: 640px) {
  html[data-i18n-title="meta.home.title"] .hero {
    min-height: min(740px, 100svh) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-content {
    width: calc(100% - 48px) !important;
    padding-block: clamp(94px, 16vh, 122px) 42px !important;
  }

  html[data-i18n-title="meta.home.title"] .hero h1 {
    max-width: 11.6ch !important;
    font-size: clamp(2.65rem, 10.7vw, 3.85rem) !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-media img {
    object-position: 66% 44% !important;
  }

  html[data-i18n-title="meta.home.title"] .hero-stat {
    border-radius: 12px !important;
    padding: 10px 8px !important;
  }
}

/* ============================================================
   v0.6.89 — framed inner heroes, readable mobile card stacks,
   and Tally embed cleanup.
   ============================================================ */
.page-header,
.programme-hero {
  width: calc(100% - clamp(16px, 2vw, 28px)) !important;
  margin: clamp(8px, 1vw, 14px) auto 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(253, 240, 213, 0.16) !important;
  box-shadow: 0 22px 60px rgba(12, 21, 35, 0.16) !important;
}

.page-header::after,
.programme-hero::after {
  background:
    linear-gradient(180deg, rgba(12, 21, 35, 0.10) 0%, rgba(12, 21, 35, 0.38) 100%) !important;
}

.page-header .container,
.programme-hero .container {
  max-width: 1120px !important;
}

.programme-hero {
  min-height: min(560px, calc(72svh - 24px)) !important;
  padding-top: calc(var(--nav-height) + clamp(62px, 8vw, 108px)) !important;
  padding-bottom: clamp(58px, 7vw, 92px) !important;
}

.programme-hero .hero-bg {
  background:
    linear-gradient(90deg, rgba(12, 21, 35, 0.90) 0%, rgba(12, 21, 35, 0.72) 44%, rgba(12, 21, 35, 0.28) 100%) !important;
}

@media (max-width: 640px) {
  .page-header,
  .programme-hero {
    width: calc(100% - 20px) !important;
    margin-top: 10px !important;
    border-radius: 16px !important;
  }
}

.contact-home-tally.contact-home-native-embed,
.contact-form-shell.tally-embed-shell {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.contact-home-tally.contact-home-native-embed .tally-embed-frame {
  /* min-height = fallback floor when Tally dynamicHeight fails.
     DO NOT set `height` here with !important — that would lock the iframe
     and prevent Tally's iframe.style.height = "Nnnpx" (set after the
     postMessage handshake) from resizing the iframe to actual form height. */
  min-height: clamp(560px, 58svh, 680px) !important;
}

.contact-form-shell.tally-embed-shell .tally-embed-frame {
  min-height: clamp(580px, 60svh, 720px) !important;
}

.contact-home-tally.contact-home-native-embed .tally-fallback-note {
  position: relative !important;
  z-index: 6 !important;
  width: 100% !important;
  margin-top: 6px !important;
  overflow: visible !important;
}

/* Tally branding is rendered inside the cross-origin iframe. Tally's
   hideBranding flag only removes it on eligible plans, so this local
   mask keeps the embed visually native without touching form controls. */
.contact-home-tally.contact-home-native-embed::after {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  right: clamp(18px, 2.8vw, 28px) !important;
  bottom: clamp(54px, 6vw, 74px) !important;
  width: min(192px, 40vw) !important;
  height: 54px !important;
  border-radius: 12px !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0.98)) !important;
}

[data-theme="dark"] .contact-home-tally.contact-home-native-embed::after {
  background:
    linear-gradient(180deg, rgba(12, 21, 36, 0.98), rgba(12, 21, 36, 0.98)) !important;
}

@media (max-width: 640px) {
  .contact-home-tally.contact-home-native-embed .tally-embed-frame {
    /* Mobile fallback floor — let Tally grow it taller if dynamicHeight fires. */
    min-height: clamp(620px, 68svh, 760px) !important;
  }

  .contact-home-tally.contact-home-native-embed::after {
    right: 18px !important;
    bottom: 48px !important;
    width: min(180px, 46vw) !important;
    height: 52px !important;
  }
}

.ta-card-motion {
  --ta-card-glow-x: 50%;
  --ta-card-glow-y: 18%;
  position: relative;
  transform: translate3d(0, 0, 0);
  transition:
    transform 260ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease;
  will-change: transform;
}

.ta-card-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--ta-card-glow-x) var(--ta-card-glow-y), rgba(102, 155, 188, 0.18), transparent 34%);
  transition: opacity 260ms ease;
}

.ta-card-motion > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .ta-card-motion:hover,
  .ta-card-motion:focus-within {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(102, 155, 188, 0.34) !important;
    box-shadow: 0 20px 48px rgba(16, 42, 68, 0.13) !important;
  }

  .ta-card-motion:hover::after,
  .ta-card-motion:focus-within::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-card-motion {
    transition: none !important;
    will-change: auto !important;
  }

  .ta-card-motion:hover,
  .ta-card-motion:focus-within {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.home.title"] #programmes .programmes-grid {
    display: block !important;
    width: min(100%, 520px) !important;
    max-width: calc(100vw - 34px) !important;
    margin-inline: auto !important;
    padding: 0 0 8px !important;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card {
    --ta-mobile-card-shift: 0px;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(20px, 5.6vw, 26px) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 42px rgba(16, 42, 68, 0.11) !important;
    transform: translate3d(var(--ta-mobile-card-shift), 0, 0) !important;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card + .programme-card {
    margin-top: -12px !important;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card:nth-child(odd) {
    --ta-mobile-card-shift: -3px;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card:nth-child(even) {
    --ta-mobile-card-shift: 3px;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card:active {
    transform: translate3d(var(--ta-mobile-card-shift), -3px, 0) !important;
  }

  html[data-i18n-title="meta.home.title"] #programmes .programme-card-desc {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack {
  width: min(100%, 690px) !important;
}

html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-content: start !important;
  column-gap: clamp(16px, 2vw, 22px) !important;
  row-gap: 8px !important;
  min-height: clamp(188px, 20vw, 230px) !important;
  padding: clamp(24px, 3vw, 34px) !important;
}

html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card:not([data-wallet-pos="0"]) {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(232, 237, 242, 0.52)) !important;
  box-shadow: 0 20px 42px rgba(16, 42, 68, 0.08) !important;
}

html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card:not([data-wallet-pos="0"]) {
  background:
    linear-gradient(180deg, rgba(24, 36, 58, 0.82), rgba(16, 25, 42, 0.58)) !important;
}

html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-icon {
  grid-row: 1 / span 2 !important;
  width: clamp(54px, 5vw, 64px) !important;
  height: clamp(54px, 5vw, 64px) !important;
  border-radius: 14px !important;
}

html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-title {
  align-self: end !important;
  margin: 0 !important;
  font-size: clamp(1.28rem, 2.1vw, 1.62rem) !important;
  line-height: 1.16 !important;
  text-wrap: balance !important;
}

html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-desc {
  max-width: 54ch !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.4vw, 1.12rem) !important;
  line-height: 1.55 !important;
}

/* ── DESKTOP wallet stacking (v0.8.5) ──────────────────────────────────────
   Previously the wallet peek transforms were mobile-only (@media 760px), so
   on desktop only the front promise card showed — it didn't read as a
   "wallet". These rules make the deck stack with a visible peek on desktop,
   slightly MORE pronounced than mobile so it clearly fills like a wallet. */
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack {
  position: relative !important;
  display: block !important;
  min-height: var(--wallet-height, 320px) !important;
  overflow: visible !important;
  isolation: isolate !important;
  margin-inline: auto !important;
}
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card {
  position: absolute !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border-radius: 18px !important;
  transform: translate3d(0, 110px, 0) scale(0.86) !important;
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 380ms ease,
    box-shadow 380ms ease !important;
  will-change: transform, opacity !important;
}
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="0"] {
  z-index: 60 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  box-shadow: 0 26px 54px rgba(16, 42, 68, 0.18) !important;
}
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="1"] {
  z-index: 59 !important;
  opacity: 1 !important;
  transform: translate3d(0, 34px, 0) scale(0.955) !important;
  box-shadow: 0 22px 44px rgba(16, 42, 68, 0.12) !important;
}
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="2"] {
  z-index: 58 !important;
  opacity: 0.92 !important;
  transform: translate3d(0, 66px, 0) scale(0.915) !important;
}
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="3"] {
  z-index: 57 !important;
  opacity: 0.5 !important;
  transform: translate3d(0, 96px, 0) scale(0.88) !important;
}

@media (max-width: 760px) {
  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
    min-height: clamp(204px, 47vw, 242px) !important;
    padding: clamp(22px, 6vw, 28px) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-icon {
    grid-row: auto !important;
    width: 52px !important;
    height: 52px !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-title {
    font-size: clamp(1.22rem, 5.3vw, 1.46rem) !important;
  }

  html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-desc {
    font-size: clamp(0.98rem, 4.1vw, 1.06rem) !important;
    line-height: 1.5 !important;
  }
}

html,
body {
  overflow-x: clip !important;
  max-width: 100% !important;
}

main,
.page-shell,
.section,
.container {
  max-width: 100%;
}

.story-photo-card picture {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  height: 100% !important;
}

.story-photo-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 38% !important;
}

.story-photo-card figcaption {
  z-index: 2 !important;
}

/* Floating modern navigation: a contained glass pill instead of a flat bar. */
.navbar {
  position: fixed !important;
  top: clamp(10px, 1.4vw, 18px) !important;
  left: clamp(12px, 2.2vw, 30px) !important;
  right: clamp(12px, 2.2vw, 30px) !important;
  width: auto !important;
  height: clamp(58px, 5vw, 68px) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232, 237, 242, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(18, 26, 42, 0.84), rgba(14, 21, 35, 0.76)) !important;
  box-shadow:
    0 22px 48px rgba(5, 8, 18, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(22px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(128%) !important;
}

.navbar.scrolled {
  background:
    linear-gradient(180deg, rgba(14, 21, 35, 0.94), rgba(12, 18, 30, 0.90)) !important;
  border-color: rgba(232, 237, 242, 0.22) !important;
  box-shadow:
    0 24px 54px rgba(5, 8, 18, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

.navbar::after {
  content: none !important;
  display: none !important;
}

.navbar-inner {
  width: 100% !important;
  max-width: min(1240px, calc(100vw - 42px)) !important;
  padding-inline: clamp(14px, 2vw, 24px) !important;
}

.navbar .nav-links {
  background: rgba(232, 237, 242, 0.055) !important;
  border: 1px solid rgba(232, 237, 242, 0.08) !important;
  border-radius: 999px !important;
  padding: 4px !important;
}

.navbar .nav-links .nav-link {
  border-radius: 999px !important;
}

.nav-actions {
  background: rgba(232, 237, 242, 0.055) !important;
  border: 1px solid rgba(232, 237, 242, 0.08) !important;
  border-radius: 999px !important;
  padding: 4px !important;
}

@media (max-width: 960px) {
  .navbar {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    height: 58px !important;
    border-radius: 22px !important;
  }

  .navbar-inner {
    max-width: 100% !important;
    padding-inline: 12px !important;
  }

  .nav-actions {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
}

/* Inner-page hero frames should feel connected to the page and less blue-only. */
.page-header,
.programme-hero {
  margin-top: clamp(86px, 8vw, 108px) !important;
  margin-bottom: clamp(18px, 3vw, 34px) !important;
  border-color: rgba(253, 240, 213, 0.22) !important;
  background-color: #101827 !important;
}

body:has(.navbar) {
  padding-top: 0 !important;
}

html[data-i18n-title^="meta."] .page-header {
  background-image:
    linear-gradient(112deg,
      rgba(16, 24, 39, 0.88) 0%,
      rgba(28, 28, 46, 0.72) 42%,
      rgba(137, 52, 105, 0.34) 74%,
      rgba(253, 240, 213, 0.16) 100%),
    var(--ta-page-header-image, url('../img/photos/hero_student_q18.jpg')) !important;
}

html[data-i18n-title="meta.about.title"] .page-header {
  --ta-page-header-image: url('../img/photos/about_story.webp') !important;
  --ta-page-header-position: center 44% !important;
}

.page-header::after,
.programme-hero::after {
  background:
    radial-gradient(circle at 82% 18%, rgba(253, 240, 213, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(12, 21, 35, 0.06), rgba(12, 21, 35, 0.34)) !important;
}

@media (max-width: 640px) {
  .page-header,
  .programme-hero {
    margin-top: 78px !important;
    margin-bottom: 18px !important;
  }
}

/* Floating nav refinement: a clear foreground capsule with balanced groups. */
@media (min-width: 961px) {
  .navbar {
    position: fixed !important;
    top: 18px !important;
    left: clamp(18px, 1.8vw, 32px) !important;
    right: clamp(18px, 1.8vw, 32px) !important;
    width: auto !important;
    height: 66px !important;
    border-radius: 999px !important;
  }

  .navbar-inner {
    display: grid !important;
    grid-template-columns: minmax(170px, 0.7fr) minmax(560px, auto) auto !important;
    align-items: center !important;
    gap: clamp(12px, 1.4vw, 24px) !important;
  }

  .navbar-logo {
    min-width: 0 !important;
  }

  .navbar-logo .ta-lockup-logo-nav {
    width: clamp(154px, 13vw, 186px) !important;
  }

  .navbar .nav-links {
    justify-self: center !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(650px, 54vw) !important;
    flex: 0 1 auto !important;
    gap: 2px !important;
    padding: 5px !important;
    background: rgba(232, 237, 242, 0.06) !important;
  }

  .navbar .nav-links .nav-link {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: clamp(10px, 0.95vw, 16px) !important;
    white-space: nowrap !important;
    font-size: clamp(0.82rem, 0.78vw, 0.92rem) !important;
  }

  html[lang="tr"] .navbar .nav-links .nav-link {
    padding-inline: clamp(8px, 0.72vw, 13px) !important;
    font-size: clamp(0.78rem, 0.74vw, 0.88rem) !important;
  }

  .navbar .nav-actions {
    justify-self: end !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    padding: 5px !important;
  }

  .navbar .nav-actions > a[href*="student-panel.html"] {
    min-height: 38px !important;
    padding-inline: 15px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1180px) and (min-width: 961px) {
  .navbar-inner {
    grid-template-columns: minmax(148px, 0.6fr) minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .navbar .nav-links {
    max-width: none !important;
  }

  .navbar .nav-links .nav-link {
    padding-inline: 8px !important;
    font-size: 0.78rem !important;
  }
}

html[data-i18n-title="meta.contact.title"] main > .section.bg-cream {
  padding-bottom: clamp(34px, 4vw, 56px) !important;
}

html[data-i18n-title="meta.contact.title"] main > .section.bg-cream + .section.bg-white {
  padding-top: clamp(24px, 3vw, 40px) !important;
}

html[data-i18n-title="meta.contact.title"] main > .section.bg-cream + .section.bg-white .section-header {
  margin-bottom: clamp(22px, 3vw, 36px) !important;
}

/* Footer wordmark glow should blend into the whole band, not sit as a patch. */
.footer-new .footer-ta-band {
  background:
    radial-gradient(1150px 360px at 50% 72%, rgba(102, 155, 188, 0.10), transparent 76%),
    linear-gradient(180deg, rgba(6, 10, 18, 0.02) 0%, rgba(6, 10, 18, 0.16) 62%, rgba(5, 8, 17, 0.46) 100%) !important;
}

.footer-new .footer-ta-band::before {
  background:
    radial-gradient(520px 260px at var(--x, 50%) var(--y, 66%), rgba(232, 237, 242, 0.11), rgba(102, 155, 188, 0.09) 44%, transparent 78%) !important;
  filter: blur(24px) !important;
  opacity: 0 !important;
}

.footer-new .footer-ta-band.is-spotlight-active::before,
.footer-new .footer-ta-band:hover::before {
  opacity: 0.82 !important;
}

.footer-new .footer-ta-text {
  color: rgba(232, 237, 242, 0.30) !important;
  filter:
    drop-shadow(0 18px 48px rgba(4, 8, 15, 0.32))
    drop-shadow(0 0 34px rgba(102, 155, 188, 0.08)) !important;
}

.footer-new .footer-ta-band.is-spotlight-active .footer-ta-text,
.footer-new .footer-ta-band:hover .footer-ta-text {
  opacity: 0.50 !important;
  color: rgba(232, 237, 242, 0.40) !important;
  filter:
    drop-shadow(0 18px 48px rgba(4, 8, 15, 0.30))
    drop-shadow(0 0 42px rgba(102, 155, 188, 0.14)) !important;
}

/* ==========================================================================
   v0.6.90 — final UI fixes
   (nav login class, footer mobile single-column, programme-card light contrast,
    promise carousel opacity, pricing dark-mode surfaces, level-test contrast,
    section rhythm). Appended bottom-of-file so it wins specificity.
   ========================================================================== */

/* --- Footer: collapse to single column on mobile (was 2-col under v0.6.55) --- */
@media (max-width: 640px) {
  .footer-grid-new {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: left !important;
    justify-items: stretch !important;
  }
  .footer-brand-new {
    grid-column: 1 / -1 !important;
    align-items: center !important;
    text-align: center !important;
  }
  .footer-col-new {
    text-align: left !important;
    justify-self: start !important;
    width: 100% !important;
  }
}

/* --- Programme cards: lift light-mode contrast ("Hard to read, Colours clash") --- */
html:not([data-theme="dark"]) .programme-card {
  background: #ffffff !important;
  border: 1px solid rgba(28, 28, 46, 0.10) !important;
  box-shadow: 0 4px 18px rgba(28, 28, 46, 0.07) !important;
}
html:not([data-theme="dark"]) .programme-card-title {
  color: #1C1C2E !important;
}
html:not([data-theme="dark"]) .programme-card-desc {
  color: #3D4654 !important;
}

/* --- Pricing page dark-mode surface fixes (the page that "didn't switch") --- */
[data-theme="dark"] body.page-pricing,
[data-theme="dark"] .pricing-section,
[data-theme="dark"] #pricing-area {
  background: linear-gradient(180deg, #0B1322 0%, #060A12 100%) !important;
  color: var(--color-cream, #EFF5F9) !important;
}
[data-theme="dark"] .pricing-plan-header,
[data-theme="dark"] .pricing-cta-section,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .pricing-package-card,
[data-theme="dark"] .pricing-tabs,
[data-theme="dark"] #pricing-area .card,
[data-theme="dark"] .pricing-section .card {
  background: linear-gradient(180deg, #101928 0%, #0B1322 100%) !important;
  border-color: rgba(232, 237, 242, 0.08) !important;
  color: var(--color-cream, #EFF5F9) !important;
}
[data-theme="dark"] .pricing-plan-header h2,
[data-theme="dark"] .pricing-cta-section h2,
[data-theme="dark"] .pricing-card h3,
[data-theme="dark"] .pricing-package-card h3,
[data-theme="dark"] .pricing-package-card .price,
[data-theme="dark"] .pricing-card .price,
[data-theme="dark"] .pricing-section .section-title {
  color: var(--color-cream, #EFF5F9) !important;
}
[data-theme="dark"] .pricing-plan-header p,
[data-theme="dark"] .pricing-cta-section p,
[data-theme="dark"] .pricing-card p,
[data-theme="dark"] .pricing-package-card p,
[data-theme="dark"] .pricing-section .section-desc {
  color: rgba(232, 237, 242, 0.74) !important;
}

/* --- Level-test light-mode definition + readable progress bar at 0% --- */
html:not([data-theme="dark"]) .level-test-card {
  border: 1px solid rgba(28, 28, 46, 0.10) !important;
  box-shadow: 0 8px 32px rgba(28, 28, 46, 0.08) !important;
}
.level-test-progress {
  height: 10px !important;
  background: rgba(102, 155, 188, 0.18) !important;
}
.level-test-progress > span {
  min-width: 6px;
}

/* --- Section rhythm: tighten the stacked padding between adjacent .section blocks
       (each section already has padding-block, so the gap between two sections is
       the sum of bottom + top. Halve the top of the trailing section to close the
       gap that read as "too much space" on the live site.) --- */
@media (min-width: 768px) {
  .section + .section,
  .section-slim + .section,
  .section + .section-slim {
    padding-top: clamp(24px, 3vw, 40px) !important;
  }
}
@media (max-width: 767px) {
  .section + .section,
  .section-slim + .section,
  .section + .section-slim {
    padding-top: clamp(20px, 5vw, 32px) !important;
  }
}

/* --- Footer: dissolve the seam between the cursor-spotlight band and the
       bottom legal bar so the footer reads as one continuous canvas. --- */
.footer-bottom-new {
  border-top: 0 !important;
  background: transparent !important;
  margin-top: -1px !important;
}
.footer-new .footer-ta-band {
  border-bottom: 0 !important;
}
.footer-bottom-new .container {
  border-top: 1px solid rgba(232, 237, 242, 0.06) !important;
  padding-top: clamp(14px, 2vw, 20px) !important;
}

/* ==========================================================================
   v0.6.90 — round 2 fixes
   - floating glass navbar (top offset + larger blur + uniform pill)
   - nav-link active bubble text fit
   - hero stats responsive sizing
   - promise section: fanned stacked deck on desktop, deeper blur on mobile
   ========================================================================== */

/* --- Hero stats: scale with viewport instead of looking lost on wide screens --- */
.hero-stats {
  gap: clamp(12px, 2vw, 28px) !important;
  width: min(100%, 560px) !important;
}
.hero-stat {
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 24px) !important;
  border-radius: clamp(12px, 1.4vw, 18px) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.hero-stat-value {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem) !important;
  line-height: 1.05 !important;
}
.hero-stat-label {
  font-size: clamp(0.78rem, 1vw, 0.95rem) !important;
}
@media (min-width: 1280px) {
  .hero-stats { width: min(100%, 680px) !important; }
}

/* --- Hero stats: stop the "5 / Active / Programmes" 3-line wrap.
       The container was capped at 560px which forces 3 narrow cards on wide
       hero layouts. Widen and let labels stay on at most 2 lines. --- */
.hero-stats {
  width: min(100%, 720px) !important;
  gap: clamp(10px, 1.6vw, 20px) !important;
}
.hero-stat {
  padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px) !important;
  text-align: left !important;
}
.hero-stat-value {
  font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 4px !important;
}
.hero-stat-label {
  font-size: clamp(0.75rem, 0.92vw, 0.88rem) !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  word-break: keep-all !important;
}
@media (min-width: 1280px) {
  .hero-stats { width: min(100%, 820px) !important; }
}
@media (max-width: 640px) {
  .hero-stats { width: 100% !important; }
  .hero-stat { padding: 10px 12px !important; }
  .hero-stat-label { font-size: 0.72rem !important; }
}

/* --- Contact section: stop the "Not sure about your level?" prompt and the
       "Open form in a new tab" link from getting their leftmost character
       clipped. The parent had overflow:hidden + the link's underline was
       sneaking past the container's left padding. --- */
.contact-home-tally,
.contact-form-shell {
  overflow: visible !important;
  padding-inline: clamp(8px, 1.4vw, 18px) !important;
}
.contact-level-test-prompt,
.contact-home-tally .contact-level-test-prompt,
.tally-fallback-note {
  padding-inline: 4px !important;
  text-indent: 0 !important;
  margin-inline: 0 !important;
  overflow: visible !important;
}
.contact-level-test-prompt a,
.tally-fallback-note a {
  display: inline-block !important;
  padding-inline: 2px !important;
}

/* --- Promise wallet: subtle blur on the peeking back cards.
       JS marks the active card with data-wallet-pos="0". Anything else is
       behind. Matching the existing wallet selector's prefix so this lands
       at the same specificity (no fight, no surprises). Blur is light (2.5px)
       and the filter transitions over 360ms so the card that animates into
       the front position smoothly clears its blur. --- */
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card.card-wallet-card:not([data-wallet-pos="0"]),
.promise-track.is-wallet-stack .promise-card.card-wallet-card:not([data-wallet-pos="0"]) {
  filter: blur(2.5px);
  transition: filter 360ms ease, transform 480ms cubic-bezier(.18,.9,.18,1);
}

/* --- Navbar 961–1240px overlap fix:
       The pill-nav rule (line ~19759) forces nav-links visible above 961px,
       but the older v0.6.5 rule (line ~12092 / 12112 / 12116) wrapped in
       max-width: 1240px still hides the Login link and shows the mobile
       hamburger. Result: at any window 961–1240px you get pill nav + no
       Login + lingering hamburger. Override at matching breakpoint with
       higher specificity so the Login is visible and the hamburger is
       hidden whenever the nav-links pill is showing. --- */
@media (min-width: 961px) {
  .navbar .nav-actions > a[href*="student-panel.html"],
  .navbar .nav-actions a[href*="student-panel.html"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .navbar .mobile-toggle {
    display: none !important;
  }
}

/* ==========================================================================
   v0.6.90 — round 5 fixes (Login halo, navbar opacity, Tally clip, hover)
   ========================================================================== */

/* --- 1. Login button: kill the soft circular ::after halo behind it.
       Original rule (style.css:643) put a radial gradient inset:-5px around
       the link. That's the "circle shadow" user keeps flagging. --- */
.nav-actions a[href*="student-panel.html"]::after,
.nav-actions a[href*="student-panel.html"]:hover::after,
.nav-actions a[href*="student-panel.html"]:focus-visible::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* --- 2. Navbar pill: darker so the hero image doesn't read through.
       Existing floating-pill rule at 19759 only sets layout, not background.
       Push the pill background to a near-opaque ink so links stay legible. --- */
@media (min-width: 961px) {
  [data-theme="dark"] .navbar,
  .navbar {
    background:
      linear-gradient(180deg,
        rgba(14, 21, 35, 0.94) 0%,
        rgba(11, 19, 34, 0.92) 100%) !important;
    border: 1px solid rgba(232, 237, 242, 0.08) !important;
    box-shadow: 0 10px 32px rgba(5, 8, 18, 0.32) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  }
  html:not([data-theme="dark"]) .navbar {
    background:
      linear-gradient(180deg,
        rgba(20, 28, 44, 0.92) 0%,
        rgba(16, 24, 38, 0.90) 100%) !important;
    border-color: rgba(232, 237, 242, 0.10) !important;
  }
}

/* --- 3. Hero stats: actually scale with the viewport. Earlier clamp values
       were in place but a later !important rule was holding them fixed.
       Pin clamp-based sizing at high specificity. --- */
.hero .hero-stats,
.hero-content .hero-stats {
  display: flex !important;
  gap: clamp(10px, 1.6vw, 20px) !important;
  width: min(100%, 760px) !important;
  margin-inline: 0 !important;
}
.hero .hero-stat,
.hero-content .hero-stat {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.6vw, 22px) !important;
  border-radius: clamp(12px, 1.4vw, 18px) !important;
}
.hero .hero-stat-value,
.hero-content .hero-stat-value {
  font-size: clamp(1.4rem, 2.2vw, 2.1rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 4px !important;
}
.hero .hero-stat-label,
.hero-content .hero-stat-label {
  font-size: clamp(0.74rem, 0.92vw, 0.92rem) !important;
  line-height: 1.22 !important;
  word-break: keep-all !important;
}
@media (min-width: 1280px) {
  .hero .hero-stats,
  .hero-content .hero-stats {
    width: min(100%, 880px) !important;
  }
}
@media (min-width: 1600px) {
  .hero .hero-stats,
  .hero-content .hero-stats {
    width: min(100%, 980px) !important;
  }
  .hero .hero-stat-value,
  .hero-content .hero-stat-value {
    font-size: clamp(1.8rem, 2.4vw, 2.4rem) !important;
  }
}

/* --- 4. Tally form clipping: the first letter of "Seviyenizden emin değil
       misiniz?" and "Formu yeni sekmede aç" was getting cut off because the
       .contact-home-tally / .contact-form-shell parents were clipping at
       overflow:hidden right at the text x-origin. Override with overflow
       visible + larger left padding + ensure the prompt links use
       inline-block so their underline + text doesn't sneak past. --- */
.contact-home-tally,
.contact-form-shell,
.contact-home-tally > *,
.contact-form-shell > * {
  overflow: visible !important;
}
.contact-home-tally,
.contact-form-shell {
  padding-inline: clamp(14px, 2vw, 28px) !important;
}
.contact-level-test-prompt,
.contact-home-tally .contact-level-test-prompt,
.tally-fallback-note {
  margin-inline: 0 !important;
  padding-inline: 6px !important;
  text-indent: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}
.contact-level-test-prompt > *,
.tally-fallback-note > *,
.contact-level-test-prompt a,
.tally-fallback-note a {
  display: inline-block !important;
  padding-inline: 2px !important;
  margin-inline: 0 !important;
}

/* --- 5. Features cards hover: stop the awkward gradient/blur flash.
       Multiple base rules apply different hover transitions; one of them
       was animating opacity + transform together making the leftmost card
       look "different" on hover. Pin a single clean hover transition. --- */
#features .card,
.features-grid .card {
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease, border-color 200ms ease !important;
}
#features .card:hover,
.features-grid .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 38px rgba(28, 28, 46, 0.10) !important;
  background: var(--color-cream, #ffffff) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ==========================================================================
   v0.6.90 — round 6: edge-to-edge fix + newsletter "Coming Soon" state
   ========================================================================== */

/* --- Container max-width: an earlier override at line ~19612 set
       .container { max-width: 100% } which made section content stretch to
       the viewport edges on wide screens (cards glued to the page edges).
       Restore the intended max-width so content has visible side padding. --- */
main > .section > .container,
.section > .container,
.section .container,
main .container {
  max-width: var(--content-max, 1200px) !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
  margin-inline: auto !important;
}

/* --- Newsletter form: gentle "Coming Soon" disabled state --- */
.email-form.is-coming-soon {
  opacity: 0.78;
  pointer-events: none;
}
.email-form.is-coming-soon .email-input,
.email-form.is-coming-soon .email-input:disabled {
  background: rgba(232, 237, 242, 0.08) !important;
  color: rgba(232, 237, 242, 0.72) !important;
  cursor: not-allowed !important;
}
.email-form.is-coming-soon .btn[disabled] {
  background: rgba(102, 155, 188, 0.30) !important;
  border-color: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.email-coming-soon-note {
  margin: 12px 0 0 !important;
  font-size: 0.86rem !important;
  color: rgba(232, 237, 242, 0.62) !important;
  text-align: left !important;
}
html:not([data-theme="dark"]) .email-coming-soon-note {
  color: rgba(28, 28, 46, 0.62) !important;
}

/* ==========================================================================
   v0.6.90 — round 7
   - Hero stats: real size on desktop (in line with CTA height)
   - Login: kill every halo/glow source (box-shadow, ::after, outline)
   - Navbar: dial back corner radius from full pill to a softer rounded rect
   ========================================================================== */

/* --- 1. Hero stats: actually bigger on desktop. Previous clamp ceilings
       were too low, so cards stayed small even on wide screens. Bump card
       padding, value/label font sizes, and the row width. Keeps mobile
       size unchanged. --- */
@media (min-width: 961px) {
  .hero .hero-stats,
  .hero-content .hero-stats {
    width: min(100%, 820px) !important;
    gap: 14px !important;
  }
  .hero .hero-stat,
  .hero-content .hero-stat {
    padding: 18px 22px !important;
    border-radius: 16px !important;
  }
  .hero .hero-stat-value,
  .hero-content .hero-stat-value {
    font-size: 2rem !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
  }
  .hero .hero-stat-label,
  .hero-content .hero-stat-label {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }
}
@media (min-width: 1280px) {
  .hero .hero-stats,
  .hero-content .hero-stats {
    width: min(100%, 920px) !important;
    gap: 18px !important;
  }
  .hero .hero-stat,
  .hero-content .hero-stat {
    padding: 22px 26px !important;
  }
  .hero .hero-stat-value,
  .hero-content .hero-stat-value {
    font-size: 2.4rem !important;
  }
  .hero .hero-stat-label,
  .hero-content .hero-stat-label {
    font-size: 1.02rem !important;
  }
}
@media (min-width: 1600px) {
  .hero .hero-stats,
  .hero-content .hero-stats {
    width: min(100%, 1000px) !important;
  }
  .hero .hero-stat-value,
  .hero-content .hero-stat-value {
    font-size: 2.65rem !important;
  }
}

/* --- 2. Login button: kill every "circle/glow" source.
       Multiple base rules apply box-shadow (radial-ish glow), an ::after
       pseudo-element halo, and a hover ::after expansion. Zero them all
       at high specificity. --- */
.navbar .nav-actions a[href*="student-panel.html"],
.navbar .nav-actions a[href*="student-panel.html"]:hover,
.navbar .nav-actions a[href*="student-panel.html"]:focus-visible,
.nav-actions a[href*="student-panel.html"],
.nav-actions a[href*="student-panel.html"]:hover,
.nav-actions a[href*="student-panel.html"]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}
.navbar .nav-actions a[href*="student-panel.html"]::after,
.navbar .nav-actions a[href*="student-panel.html"]::before,
.navbar .nav-actions a[href*="student-panel.html"]:hover::after,
.navbar .nav-actions a[href*="student-panel.html"]:hover::before,
.navbar .nav-actions a[href*="student-panel.html"]:focus-visible::after,
.navbar .nav-actions a[href*="student-panel.html"]:focus-visible::before,
.nav-actions a[href*="student-panel.html"]::after,
.nav-actions a[href*="student-panel.html"]::before,
.nav-actions a[href*="student-panel.html"]:hover::after,
.nav-actions a[href*="student-panel.html"]:hover::before,
.nav-actions a[href*="student-panel.html"]:focus-visible::after,
.nav-actions a[href*="student-panel.html"]:focus-visible::before {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* --- 3. Navbar corners: dial back from the full pill (border-radius: 999px)
       to a softer rounded-rectangle. Keeps the floating look but less
       "capsule-y". --- */
@media (min-width: 961px) {
  .navbar {
    border-radius: 22px !important;
  }
}

/* ==========================================================================
   v0.6.90 — round 8: FINAL Tally consolidation
   Eleven previous rules pile up conflicting min-height values (420, 480,
   620, 640-820 clamp, 680, 730, 540, 600...). All have !important and
   varying specificity — the result is unpredictable. This block defeats
   ALL of them with maximum specificity + !important + min-height:0 so the
   iframe can be sized purely by Tally's embed.js dynamicHeight handshake.
   The HTML height="700" attribute provides a sensible initial paint while
   the postMessage round-trip completes.
   ========================================================================== */
iframe.tally-embed-frame,
.contact-home-tally iframe.tally-embed-frame,
.contact-home-tally.contact-home-native-embed iframe.tally-embed-frame,
.contact-form-shell iframe.tally-embed-frame,
.contact-form-shell.tally-embed-shell iframe.tally-embed-frame,
.tally-embed-shell iframe.tally-embed-frame {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
/* Parents must allow the iframe to expand freely. */
.tally-embed-shell,
.contact-home-tally,
.contact-form-shell {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Mobile keeps the same "let Tally decide" behavior. */
@media (max-width: 640px) {
  iframe.tally-embed-frame,
  .contact-home-tally iframe.tally-embed-frame,
  .contact-home-tally.contact-home-native-embed iframe.tally-embed-frame,
  .contact-form-shell iframe.tally-embed-frame,
  .contact-form-shell.tally-embed-shell iframe.tally-embed-frame,
  .tally-embed-shell iframe.tally-embed-frame {
    min-height: 0 !important;
  }
}

/* --- HOMEPAGE Tally iframe height — match the working contact page floor.
       The homepage embed was rendering tiny because Tally's first-step
       dynamicHeight reports a small value (just the banner image height,
       not the full form). Use the same generous min-height the contact
       page uses, scoped to the homepage with the highest-specificity
       prefix so it wins all earlier cascade rules. --- */
html[data-i18n-title="meta.home.title"] .contact-home-tally.contact-home-native-embed .tally-embed-frame,
html[data-i18n-title="meta.home.title"] .contact-home-tally .tally-embed-frame {
  min-height: clamp(580px, 60svh, 720px) !important;
}
@media (max-width: 640px) {
  html[data-i18n-title="meta.home.title"] .contact-home-tally.contact-home-native-embed .tally-embed-frame,
  html[data-i18n-title="meta.home.title"] .contact-home-tally .tally-embed-frame {
    min-height: clamp(660px, 76svh, 780px) !important;
  }
}

/* --- Level-test page mobile: title was crammed against the floating navbar.
       Add more top padding on mobile so the heading reads with breathing room. --- */
@media (max-width: 640px) {
  body:has(#level-test-app) main > section.section,
  html[data-i18n-title="meta.levelTest.title"] main > section.section {
    padding-top: clamp(120px, 24vw, 168px) !important;
  }
}

/* --- Mobile footer: switch from single column to a balanced 2-column flow.
       Single column was too long. Plain 2-col grid leaves alignment gaps
       between unequal sections (Quick Links: 3 items vs Resources: 6 items).
       CSS multi-column auto-balances the two columns by distributing the
       4 footer sections evenly, and break-inside:avoid keeps each section
       intact (no heading orphaned from its list). --- */
@media (max-width: 640px) {
  .footer-grid-new {
    display: block !important;
    column-count: 2 !important;
    column-gap: 24px !important;
    column-fill: balance !important;
    grid-template-columns: none !important;
  }
  .footer-brand-new {
    column-span: all !important;
    -webkit-column-span: all !important;
    grid-column: unset !important;
    text-align: center !important;
    align-items: center !important;
    margin-bottom: 28px !important;
  }
  .footer-col-new {
    break-inside: avoid-column !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    display: block !important;
    margin-bottom: 22px !important;
    text-align: left !important;
    width: 100% !important;
  }
  .footer-heading-new {
    margin-top: 0 !important;
  }
}

/* On the narrowest phones (<360px) fall back to single column — 2 cols
   would crush each item under its own padding. */
@media (max-width: 359px) {
  .footer-grid-new {
    column-count: 1 !important;
  }
}

/* ==========================================================================
   v0.6.90 — Tally fit + badge clipping (final)
   - Lower homepage min-height so iframe fits actual form content (4 fields
     + Register button, ~440px), removing the empty box below the form.
   - Hide "Made with Tally ★" badge for free-plan accounts (the hideBranding
     URL param only works on paid plans) using a clip-path that excludes
     the bottom-right corner where the badge always renders.
   ========================================================================== */

/* Homepage: trim the floor so dynamicHeight + iframe size matches form */
html[data-i18n-title="meta.home.title"] .contact-home-tally.contact-home-native-embed .tally-embed-frame,
html[data-i18n-title="meta.home.title"] .contact-home-tally .tally-embed-frame {
  min-height: clamp(460px, 50svh, 560px) !important;
}
@media (max-width: 640px) {
  html[data-i18n-title="meta.home.title"] .contact-home-tally.contact-home-native-embed .tally-embed-frame,
  html[data-i18n-title="meta.home.title"] .contact-home-tally .tally-embed-frame {
    min-height: clamp(540px, 62svh, 640px) !important;
  }
}

/* Clip the Tally badge from the bottom-right of every Tally iframe.
   The badge is consistently in the bottom-right ~160x44px area. An L-shaped
   polygon clip removes just that corner so the Register button (bottom-left)
   stays fully visible and clickable. */
.tally-embed-frame,
.contact-home-tally .tally-embed-frame,
.contact-form-shell .tally-embed-frame,
.tally-embed-shell .tally-embed-frame {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 52px),
    calc(100% - 184px) calc(100% - 52px),
    calc(100% - 184px) 100%,
    0 100%
  ) !important;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 52px),
    calc(100% - 184px) calc(100% - 52px),
    calc(100% - 184px) 100%,
    0 100%
  ) !important;
}

/* Disable the old ::after mask now that clip-path handles it — was at the
   wrong y-coordinate and adding a visible empty box below the form. */
.contact-home-tally.contact-home-native-embed::after,
.contact-home-tally::after {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   v0.7.0 — Redesigned persistent footer (5 bands)

   Band 1: Catchphrase  — big serif tagline "Seninle tam, sensiz eksik."
   Band 2: Newsletter   — brand lockup + Coming Soon signup (no book image)
   Band 3: Link columns — Programmes / Company / Resources / Connect + socials
   Band 4: Wordmark     — oversized "TALK ARABIC" cursor-spotlight (preserved)
   Band 5: Bottom row   — © / tagline / legal links

   Inspired by fromanother.love's pattern (big tagline → contact channels →
   navigation → brand → legal). Brand-tokenised with --ta-ink (canvas),
   --ta-violet (accent), --ta-mist (text), --ta-berry (highlight).
   ========================================================================== */

/* Band container padding (consistent rhythm) */
.footer-new .footer-catchphrase,
.footer-new .footer-newsletter-band,
.footer-new .footer-links-band {
  padding-block: clamp(38px, 5vw, 64px) !important;
}

/* --- Band 1: CATCHPHRASE --- */
.footer-catchphrase {
  text-align: center;
  border-bottom: 1px solid rgba(232, 237, 242, 0.08);
}
.footer-catchphrase-eyebrow {
  margin: 0 0 16px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ta-violet, #669BBC);
  font-weight: 700;
}
.footer-catchphrase-line {
  margin: 0 auto 14px;
  max-width: 22ch;
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ta-mist, #E8EDF2);
}
.footer-catchphrase-sub {
  margin: 0 auto;
  max-width: 56ch;
  color: rgba(232, 237, 242, 0.72);
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}

/* --- Band 2: NEWSLETTER + BRAND --- */
.footer-newsletter-band {
  border-bottom: 1px solid rgba(232, 237, 242, 0.06);
}
.footer-newsletter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.footer-newsletter-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-newsletter-brand .footer-lockup-logo {
  height: 44px;
  width: auto;
}
.footer-newsletter-brand .footer-desc-new {
  margin: 0;
  max-width: 38ch;
  color: rgba(232, 237, 242, 0.72);
  font-size: 0.95rem;
  line-height: 1.55;
}
.footer-newsletter-signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-newsletter-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ta-violet, #669BBC);
  font-weight: 700;
}
.footer-newsletter-heading {
  margin: 0;
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  color: var(--ta-mist, #E8EDF2);
}
.footer-newsletter-sub {
  margin: 0 0 10px;
  max-width: 52ch;
  color: rgba(232, 237, 242, 0.66);
  font-size: 0.92rem;
  line-height: 1.5;
}
.footer-email-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 8px 0 0;
}
.footer-email-form.is-coming-soon {
  opacity: 0.78;
  pointer-events: none;
}
.footer-email-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(232, 237, 242, 0.14);
  background: rgba(232, 237, 242, 0.06);
  color: var(--ta-mist, #E8EDF2);
  font-size: 0.95rem;
  transition: border-color 220ms ease, background 220ms ease;
}
.footer-email-input::placeholder { color: rgba(232, 237, 242, 0.42); }
.footer-email-input:focus-visible {
  outline: none;
  border-color: var(--ta-violet, #669BBC);
  background: rgba(102, 155, 188, 0.10);
}
.footer-email-input:disabled {
  cursor: not-allowed;
  color: rgba(232, 237, 242, 0.50);
}
.footer-email-btn {
  flex: 0 0 auto;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, var(--ta-violet, #669BBC), #4F84A5);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  white-space: nowrap;
}
.footer-email-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(102, 155, 188, 0.22);
}
.footer-email-btn:disabled {
  background: rgba(102, 155, 188, 0.28);
  cursor: not-allowed;
}
.footer-newsletter-note {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: rgba(232, 237, 242, 0.50);
}

/* --- Band 3: LINK COLUMNS --- */
.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.footer-links-grid .footer-col-new { min-width: 0; }
.footer-links-grid .footer-heading-new {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ta-violet, #669BBC);
}
.footer-links-grid .footer-links-new {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links-grid .footer-link-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(232, 237, 242, 0.80);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 200ms ease, transform 200ms ease;
}
.footer-links-grid .footer-link-new:hover {
  color: #fff;
  transform: translateX(2px);
}
.footer-links-grid .footer-link-icon-new {
  flex: 0 0 auto;
  opacity: 0.75;
}
.footer-links-grid .footer-socials-new {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.footer-links-grid .footer-social-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(232, 237, 242, 0.14);
  color: rgba(232, 237, 242, 0.80);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.footer-links-grid .footer-social-new:hover {
  background: rgba(232, 237, 242, 0.10);
  color: #fff;
  border-color: rgba(232, 237, 242, 0.28);
  transform: translateY(-2px);
}

/* --- Band 5: BOTTOM ROW --- */
.footer-new .footer-bottom-new {
  border-top: 1px solid rgba(232, 237, 242, 0.06) !important;
  padding-block: clamp(18px, 2vw, 26px) !important;
  background: transparent !important;
}
.footer-new .footer-bottom-new .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  gap: 18px;
  border-top: 0 !important;
}
.footer-new .footer-bottom-new p {
  margin: 0 !important;
  color: rgba(232, 237, 242, 0.55) !important;
  font-size: 0.84rem !important;
}
.footer-new .footer-bottom-new .footer-tagline-new {
  justify-self: center !important;
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-style: italic;
  color: rgba(232, 237, 242, 0.70) !important;
  text-align: center !important;
}
.footer-bottom-legal {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-self: end;
  font-size: 0.84rem;
}
.footer-bottom-legal a {
  color: rgba(232, 237, 242, 0.60);
  text-decoration: none;
  transition: color 180ms ease;
}
.footer-bottom-legal a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom-legal span { color: rgba(232, 237, 242, 0.30); }

/* --- Responsive --- */
@media (max-width: 960px) {
  .footer-newsletter-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-new .footer-bottom-new .container {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 10px;
  }
  .footer-bottom-legal { justify-self: center; }
}
@media (max-width: 560px) {
  .footer-email-form { flex-direction: column; gap: 8px; }
  .footer-email-btn { width: 100%; }
  .footer-links-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-catchphrase-line { font-size: clamp(1.7rem, 8vw, 2.2rem); }
}

/* --- v0.7.0 Pricing currency banner (geo-detected) --- */
.pricing-currency-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 720px);
  margin: 0 auto clamp(18px, 2.4vw, 28px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(102, 155, 188, 0.08);
  border: 1px solid rgba(102, 155, 188, 0.18);
  text-align: center;
}
.pricing-currency-label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #6B7280);
  font-weight: 500;
}
.pricing-currency-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(102, 155, 188, 0.32);
  background: #fff;
  color: var(--color-primary, #1C1C2E);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.pricing-currency-chip:hover {
  background: rgba(102, 155, 188, 0.14);
  border-color: rgba(102, 155, 188, 0.45);
  transform: translateY(-1px);
}
.pricing-currency-chip svg {
  opacity: 0.6;
  transition: transform 200ms ease;
}
.pricing-currency-chip:hover svg {
  transform: rotate(120deg);
}
.pricing-currency-chip strong {
  font-size: 1rem;
  color: var(--ta-violet, #669BBC);
}
.pricing-currency-note {
  flex: 1 1 100%;
  font-size: 0.78rem;
  color: var(--color-text-light, #9CA3AF);
  font-style: italic;
}
[data-theme="dark"] .pricing-currency-banner {
  background: rgba(102, 155, 188, 0.10);
  border-color: rgba(232, 237, 242, 0.14);
}
[data-theme="dark"] .pricing-currency-label,
[data-theme="dark"] .pricing-currency-note {
  color: rgba(232, 237, 242, 0.66);
}
[data-theme="dark"] .pricing-currency-chip {
  background: rgba(232, 237, 242, 0.08);
  border-color: rgba(232, 237, 242, 0.16);
  color: #fff;
}
[data-theme="dark"] .pricing-currency-chip:hover {
  background: rgba(232, 237, 242, 0.14);
}
@media (max-width: 560px) {
  .pricing-currency-banner {
    border-radius: 14px;
    padding: 12px 16px;
  }
  .pricing-currency-note {
    font-size: 0.75rem;
  }
}

/* --- v0.7.0 post-QA: hide the oversized "TALK ARABIC" wordmark band from
       the redesigned footer per Faruk's review. The brand band lived in the
       previous design but feels redundant alongside the new big-tagline band
       at the top of the footer. Also clamp the newsletter brand logo so it
       never overflows the left column. --- */
.footer-new .footer-ta-band {
  display: none !important;
}
/* (Previous clamp-logo rule removed in v0.7.0 round 2 — the bigger logo is
   now set further down at "BIGGER LOGO" — clamp(96px, 13vw, 192px).) */

/* ==========================================================================
   v0.7.0 footer polish — feature-piece logo + animated catchphrase reveal
   - Logo: fluid sizing, continuous float animation, hover lift
   - Catchphrase eyebrow: decorative gradient lines on left/right
   - Catchphrase: fade-up reveal on load
   - All animations respect prefers-reduced-motion
   ========================================================================== */

/* --- LOGO as feature piece: fluid scale + float --- */
.footer-new .footer-newsletter-brand {
  align-items: center;
  text-align: center;
}
.footer-new .footer-newsletter-brand .footer-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.footer-new .footer-newsletter-brand .footer-lockup-logo {
  /* Override the previous tight clamp so it scales as a real brand element. */
  height: clamp(64px, 9vw, 128px) !important;
  max-height: none !important;
  max-width: clamp(220px, 30vw, 360px) !important;
  width: auto !important;
  display: inline-block !important;
  filter: drop-shadow(0 10px 28px rgba(102, 155, 188, 0.18));
  animation: ta-footer-logo-float 7s ease-in-out infinite;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 320ms ease;
}
.footer-new .footer-newsletter-brand .footer-logo-link:hover .footer-lockup-logo,
.footer-new .footer-newsletter-brand .footer-logo-link:focus-visible .footer-lockup-logo {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 16px 36px rgba(102, 155, 188, 0.32));
}
.footer-new .footer-newsletter-brand .footer-desc-new {
  margin: 14px auto 0;
  max-width: 38ch;
  text-align: center;
}

@keyframes ta-footer-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- CATCHPHRASE EYEBROW: decorative gradient lines on each side --- */
.footer-catchphrase-eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 32px);
  margin: 0 0 18px !important;
  width: auto;
}
.footer-catchphrase-eyebrow::before,
.footer-catchphrase-eyebrow::after {
  content: "";
  display: inline-block;
  flex: 0 0 clamp(40px, 8vw, 100px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ta-violet, #669BBC) 35%,
    var(--ta-violet, #669BBC) 65%,
    transparent 100%);
  opacity: 0.72;
}

/* --- CATCHPHRASE: staggered fade-up reveal on load --- */
.footer-catchphrase .footer-catchphrase-eyebrow {
  animation: ta-footer-fade-up 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both;
}
.footer-catchphrase .footer-catchphrase-line {
  animation: ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms both;
}
.footer-catchphrase .footer-catchphrase-sub {
  animation: ta-footer-fade-up 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 420ms both;
}

@keyframes ta-footer-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .footer-new .footer-newsletter-brand .footer-lockup-logo,
  .footer-catchphrase .footer-catchphrase-eyebrow,
  .footer-catchphrase .footer-catchphrase-line,
  .footer-catchphrase .footer-catchphrase-sub {
    animation: none !important;
    transform: none !important;
  }
  .footer-new .footer-newsletter-brand .footer-logo-link:hover .footer-lockup-logo {
    transform: none !important;
  }
}

/* --- Mobile: tighten + drop the side-lines so eyebrow doesn't crowd --- */
@media (max-width: 560px) {
  .footer-new .footer-newsletter-brand .footer-lockup-logo {
    height: clamp(56px, 14vw, 96px) !important;
  }
  .footer-catchphrase-eyebrow::before,
  .footer-catchphrase-eyebrow::after {
    flex-basis: clamp(24px, 8vw, 56px);
  }
}

/* ==========================================================================
   v0.7.0 footer animations round 2 — elastic logo + scroll-grow + pulse
   - Logo: significantly larger base + elastic-band entry (scale overshoot)
   - Catchphrase: grows as the user scrolls into the footer (scroll-driven
     animation where supported) + continuous gentle filter pulse
   - Both effects respect prefers-reduced-motion and degrade cleanly on
     browsers without animation-timeline (Firefox today).
   ========================================================================== */

/* --- BIGGER LOGO --- */
.footer-new .footer-newsletter-brand .footer-lockup-logo {
  height: clamp(96px, 13vw, 192px) !important;
  max-height: none !important;
  max-width: clamp(320px, 40vw, 520px) !important;
  width: auto !important;
  display: inline-block !important;
  transform-origin: center center !important;
}

/* --- ELASTIC ENTRANCE keyframes for the logo --- */
@keyframes ta-logo-elastic-bounce {
  0%   { transform: scale(0.35) rotate(-3deg); opacity: 0; }
  35%  { transform: scale(1.22) rotate(2deg); opacity: 1; }
  55%  { transform: scale(0.92) rotate(-1deg); }
  75%  { transform: scale(1.07) rotate(0.5deg); }
  90%  { transform: scale(0.97); }
  100% { transform: scale(1) rotate(0); }
}

/* --- LOGO BREATH (continuous gentle drop-shadow pulse — non-transform
       so it can layer with hover/scale without fighting) --- */
@keyframes ta-logo-breath {
  0%, 100% { filter: drop-shadow(0 8px 24px rgba(102, 155, 188, 0.18)); }
  50%      { filter: drop-shadow(0 16px 38px rgba(102, 155, 188, 0.34)); }
}

/* --- CATCHPHRASE PULSE (continuous, brightness + glow — non-transform) --- */
@keyframes ta-catchphrase-pulse {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 0 rgba(232, 237, 242, 0);
  }
  50% {
    filter: brightness(1.06);
    text-shadow: 0 0 36px rgba(102, 155, 188, 0.20);
  }
}

/* --- CATCHPHRASE SCROLL-GROW keyframes --- */
@keyframes ta-catchphrase-scroll-grow {
  from { transform: scale(0.78); }
  to   { transform: scale(1); }
}

/* --- Browsers with scroll-driven animations (Chrome 115+, Safari 17+) ---
       Use view() timeline so the catchphrase scales up as the user scrolls
       through it, and the logo's elastic bounce plays linked to scroll
       position rather than a fixed timer. */
@supports (animation-timeline: view()) {
  .footer-new .footer-newsletter-brand .footer-lockup-logo {
    animation:
      ta-logo-elastic-bounce linear both,
      ta-logo-breath 6s ease-in-out infinite;
    animation-timeline: view(), auto;
    animation-range: entry 0% entry 80%, auto;
  }
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-catchphrase-scroll-grow linear,
      ta-catchphrase-pulse 4.5s ease-in-out infinite;
    animation-timeline: view(), auto;
    animation-range: entry 0% cover 35%, auto;
  }
}

/* --- Fallback for browsers without scroll-driven animations
       (Firefox today, older Chromium/Safari). One-shot elastic on load,
       continuous pulse afterwards. The earlier fade-up classes still apply. */
@supports not (animation-timeline: view()) {
  .footer-new .footer-newsletter-brand .footer-lockup-logo {
    animation:
      ta-logo-elastic-bounce 1400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) both,
      ta-logo-breath 6s ease-in-out 1400ms infinite;
  }
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms both,
      ta-catchphrase-pulse 4.5s ease-in-out 1300ms infinite;
  }
}

/* Reduced-motion: kill all the new ambient animations cleanly. */
@media (prefers-reduced-motion: reduce) {
  .footer-new .footer-newsletter-brand .footer-lockup-logo,
  .footer-catchphrase .footer-catchphrase-line {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 8px 24px rgba(102, 155, 188, 0.18)) !important;
  }
}

/* ==========================================================================
   v0.7.0 footer logo — STACKED layout (icon over wordmark)
   The horizontal lockup was replaced with: symbol SVG on top + "Talk Arabic"
   wordmark underneath. Inherits the existing .ta-wm-sans / .ta-wm-serif
   typography hooks so the wordmark matches the navbar treatment.
   ========================================================================== */

.footer-new .footer-newsletter-brand .footer-logo-link.footer-logo-stacked {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.footer-new .footer-newsletter-brand .footer-brand-icon {
  display: block !important;
  height: clamp(96px, 13vw, 192px) !important;
  width: auto !important;
  max-width: clamp(120px, 16vw, 220px) !important;
  filter: drop-shadow(0 10px 28px rgba(102, 155, 188, 0.18));
  transform-origin: center center !important;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 320ms ease;
}

.footer-new .footer-newsletter-brand .footer-brand-wordmark {
  display: inline-flex !important;
  align-items: baseline !important;
  font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-sans {
  font-family: var(--font-latin, 'Poppins', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  color: var(--ta-mist, #F7F2E8) !important;
}
.footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-serif {
  font-family: var(--font-serif, 'Lora', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--ta-violet, #8FB4CF) !important;
}

/* Hover: lift the whole stack as one piece */
.footer-new .footer-newsletter-brand .footer-logo-link.footer-logo-stacked:hover .footer-brand-icon,
.footer-new .footer-newsletter-brand .footer-logo-link.footer-logo-stacked:focus-visible .footer-brand-icon {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 16px 36px rgba(102, 155, 188, 0.32));
}

/* Elastic-band entrance + ambient breath glow apply to the new icon */
@supports (animation-timeline: view()) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    animation:
      ta-logo-elastic-bounce linear both,
      ta-logo-breath 6s ease-in-out infinite;
    animation-timeline: view(), auto;
    animation-range: entry 0% entry 80%, auto;
  }
}
@supports not (animation-timeline: view()) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    animation:
      ta-logo-elastic-bounce 1400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) both,
      ta-logo-breath 6s ease-in-out 1400ms infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    animation: none !important;
    transform: none !important;
  }
}
@media (max-width: 560px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(72px, 18vw, 120px) !important;
  }
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }
}

/* --- v0.7.0 footer logo: 2x the icon size per user request --- */
.footer-new .footer-newsletter-brand .footer-brand-icon {
  height: clamp(192px, 26vw, 384px) !important;
  max-width: clamp(240px, 32vw, 440px) !important;
}
.footer-new .footer-newsletter-brand .footer-brand-wordmark {
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
}
@media (max-width: 560px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(144px, 36vw, 240px) !important;
  }
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
}

/* ==========================================================================
   v0.7.0.1 mobile polish
   - Footer: keep 2 columns on phones (was collapsing to single = too long)
   - Mobile lang switch: enlarge tap target + ensure it's the visible switch
   ========================================================================== */

/* Footer link columns: stay in a 2x2 grid even on small phones so the
   footer isn't a 20-row vertical stack. Single column only on the very
   narrowest devices (<400px). */
@media (max-width: 560px) {
  .footer-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 18px !important;
  }
  .footer-new .footer-newsletter-band,
  .footer-new .footer-links-band,
  .footer-new .footer-catchphrase {
    padding-block: clamp(28px, 8vw, 44px) !important;
  }
  /* Tighten line spacing inside columns on phone */
  .footer-links-grid .footer-links-new {
    gap: 8px !important;
  }
  .footer-links-grid .footer-link-new {
    font-size: 0.86rem !important;
  }
}
@media (max-width: 399px) {
  .footer-links-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile language switch: make the converted .lang-switch-toggle in the
   mobile menu a full-width row that's obviously tappable. The desktop
   nav already styles it as a pill — on mobile it needs its own treatment. */
.mobile-menu .mobile-lang-dropdown {
  display: flex !important;
  justify-content: center !important;
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  padding-block: 4px !important;
}
.mobile-menu .mobile-lang-dropdown .lang-dropdown-toggle,
.mobile-menu .mobile-lang-dropdown .lang-switch-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  min-width: 140px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(232, 237, 242, 0.10) !important;
  border: 1px solid rgba(232, 237, 242, 0.18) !important;
  color: var(--ta-mist, #E8EDF2) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.mobile-menu .mobile-lang-dropdown .lang-dropdown-toggle:active,
.mobile-menu .mobile-lang-dropdown .lang-switch-toggle:active {
  transform: scale(0.97);
  background: rgba(232, 237, 242, 0.18) !important;
}
.mobile-menu .mobile-lang-dropdown .lang-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(232, 237, 242, 0.08);
}
.mobile-menu .mobile-lang-dropdown .lang-switch-label {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.55;
  transition: opacity 200ms ease;
}
.mobile-menu .mobile-lang-dropdown .lang-switch-toggle[aria-checked="true"] .lang-switch-label[data-switch-lang="tr"],
.mobile-menu .mobile-lang-dropdown .lang-switch-toggle[aria-checked="false"] .lang-switch-label[data-switch-lang="en"] {
  opacity: 1;
}

/* ==========================================================================
   v0.7.2 footer polish — container padding + animation reliability fix
   - .footer-new .container was inheriting "max-width: 100%" from an earlier
     override, leaving link columns flush against the viewport edges. Restore
     the standard container width + padding-inline.
   - Catchphrase animations weren't always firing because the i18n script
     re-writes textContent on load, which can cancel a CSS keyframe mid-tick.
     Apply animations to a wrapping inline-block instead of the h2 itself
     when possible, and ensure a solid base state is visible regardless.
   ========================================================================== */

.footer-new .container,
.footer-new .footer-main .container,
.footer-new .footer-bottom-new .container {
  max-width: var(--content-max, 1200px) !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
  margin-inline: auto !important;
}

/* Make sure catchphrase + logo entry animations have explicit fill-mode so
   they don't reset to invisible if a text replacement re-triggers them. */
.footer-catchphrase .footer-catchphrase-eyebrow,
.footer-catchphrase .footer-catchphrase-line,
.footer-catchphrase .footer-catchphrase-sub {
  opacity: 1; /* base state visible even if animations are removed/cancelled */
}

/* Force the logo entrance + pulse to play once on load regardless of
   scroll-timeline support — belt + braces. */
.footer-new .footer-newsletter-brand .footer-brand-icon {
  animation:
    ta-logo-elastic-bounce 1400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) both,
    ta-logo-breath 6s ease-in-out 1400ms infinite !important;
}
@supports (animation-timeline: view()) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    animation:
      ta-logo-elastic-bounce linear both,
      ta-logo-breath 6s ease-in-out infinite !important;
    animation-timeline: view(), auto !important;
    animation-range: entry 0% entry 80%, auto !important;
  }
}

/* Same for the catchphrase main line — guarantee a fade-up if scroll-timeline
   isn't supported or hasn't matched yet. */
.footer-catchphrase .footer-catchphrase-line {
  animation:
    ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
    ta-catchphrase-pulse 4.5s ease-in-out 1300ms infinite !important;
}
@supports (animation-timeline: view()) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-catchphrase-scroll-grow linear,
      ta-catchphrase-pulse 4.5s ease-in-out infinite !important;
    animation-timeline: view(), auto !important;
    animation-range: entry 0% cover 35%, auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-new .footer-newsletter-brand .footer-brand-icon,
  .footer-catchphrase .footer-catchphrase-line {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   v0.7.3 — make the catchphrase animation visibly alive, plus
   small mobile-footer proportions tune
   ========================================================================== */

/* --- Make the continuous pulse MUCH more visible:
       brightness + soft cyan glow + tiny letter-spacing breath.
       Letter-spacing breathing is a non-transform property so it composes
       cleanly with the scroll-driven scale on Chromium/Safari without
       fighting it. --- */
@keyframes ta-catchphrase-pulse-v2 {
  0%, 100% {
    filter: brightness(1);
    letter-spacing: -0.012em;
    text-shadow:
      0 0 0 rgba(232, 237, 242, 0),
      0 0 0 rgba(102, 155, 188, 0);
  }
  50% {
    filter: brightness(1.10);
    letter-spacing: -0.006em;
    text-shadow:
      0 0 18px rgba(232, 237, 242, 0.18),
      0 0 48px rgba(102, 155, 188, 0.28);
  }
}

/* Replace the existing pulse with the louder v2 — use !important so it
   beats the earlier ta-catchphrase-pulse declaration. */
.footer-catchphrase .footer-catchphrase-line {
  animation:
    ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
    ta-catchphrase-pulse-v2 3.6s ease-in-out 1300ms infinite !important;
}
@supports (animation-timeline: view()) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-catchphrase-scroll-grow linear,
      ta-catchphrase-pulse-v2 3.6s ease-in-out infinite !important;
    animation-timeline: view(), auto !important;
    animation-range: entry 0% cover 35%, auto !important;
  }
}

/* Also animate the eyebrow lines: subtle fade in/out so they feel alive */
@keyframes ta-eyebrow-line-shimmer {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.88; }
}
.footer-catchphrase-eyebrow::before,
.footer-catchphrase-eyebrow::after {
  animation: ta-eyebrow-line-shimmer 3.6s ease-in-out infinite !important;
}
.footer-catchphrase-eyebrow::after {
  animation-delay: 1.8s !important; /* alternate cadence so they breathe out of phase */
}

/* --- Mobile footer proportions tune --- */
@media (max-width: 560px) {
  /* Bigger wordmark relative to icon (was visually a bit small) */
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
    margin-top: 4px !important;
  }
  /* Slightly smaller icon so the proportion logo/text reads better */
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(112px, 28vw, 180px) !important;
  }
  /* Wider gap between the two link columns so they don't crowd */
  .footer-links-grid {
    column-gap: 20px !important;
    row-gap: 28px !important;
  }
  /* Newsletter form: tighter button height + comfortable input */
  .footer-email-btn {
    padding: 14px 22px !important;
    font-size: 0.96rem !important;
  }
  .footer-email-input {
    padding: 14px 16px !important;
  }
  /* Bottom legal row — keep on one line stack with tight gap */
  .footer-new .footer-bottom-new .container {
    gap: 8px !important;
    padding-block: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-catchphrase .footer-catchphrase-line,
  .footer-catchphrase-eyebrow::before,
  .footer-catchphrase-eyebrow::after {
    animation: none !important;
  }
}

/* ==========================================================================
   v0.7.4 — softer catchphrase pulse + force-center the whole catchphrase
   ========================================================================== */

/* The previous v2 pulse breathed letter-spacing and shifted text-shadow far,
   which made the line look like it was visibly redrawing every few seconds.
   Replace with a much gentler pulse: a tiny brightness wobble + faint glow,
   no letter-spacing change. Subtle enough to feel alive, not loud enough
   to read as "the text is changing." */
@keyframes ta-catchphrase-pulse-v3 {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 0 rgba(232, 237, 242, 0);
  }
  50% {
    filter: brightness(1.04);
    text-shadow: 0 0 22px rgba(102, 155, 188, 0.12);
  }
}

/* Override v2 with v3 — same selectors, !important, later in source. */
.footer-catchphrase .footer-catchphrase-line {
  animation:
    ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
    ta-catchphrase-pulse-v3 5.5s ease-in-out 1300ms infinite !important;
  letter-spacing: -0.01em !important; /* pin letter-spacing to one value */
}
@supports (animation-timeline: view()) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-catchphrase-scroll-grow linear,
      ta-catchphrase-pulse-v3 5.5s ease-in-out infinite !important;
    animation-timeline: view(), auto !important;
    animation-range: entry 0% cover 35%, auto !important;
  }
}
/* Calm the eyebrow line shimmer — was a bit busy with the louder pulse. */
.footer-catchphrase-eyebrow::before,
.footer-catchphrase-eyebrow::after {
  opacity: 0.6 !important;
  animation: none !important;
}

/* --- Force-center the ENTIRE catchphrase block including all children, on
       every viewport. The second screenshot showed the main line + sub line
       slipping left when the container was wide enough to NOT wrap the text. */
.footer-new .footer-catchphrase {
  text-align: center !important;
}
.footer-new .footer-catchphrase .container {
  text-align: center !important;
}
.footer-new .footer-catchphrase .footer-catchphrase-eyebrow,
.footer-new .footer-catchphrase .footer-catchphrase-line,
.footer-new .footer-catchphrase .footer-catchphrase-sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.footer-new .footer-catchphrase .footer-catchphrase-line {
  display: block !important;
  width: fit-content !important;
  max-width: min(100%, 22ch) !important;
}
.footer-new .footer-catchphrase .footer-catchphrase-sub {
  max-width: min(100%, 56ch) !important;
}

/* --- Mobile: ensure EVERY footer band is centered (logo+desc, newsletter
       signup form, link columns headings) per request. --- */
@media (max-width: 720px) {
  .footer-new .footer-newsletter-brand,
  .footer-new .footer-newsletter-signup,
  .footer-new .footer-col-new {
    text-align: center !important;
    align-items: center !important;
  }
  .footer-new .footer-newsletter-brand .footer-desc-new {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer-new .footer-newsletter-signup .footer-email-form {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer-new .footer-newsletter-signup .footer-newsletter-eyebrow,
  .footer-new .footer-newsletter-signup .footer-newsletter-heading,
  .footer-new .footer-newsletter-signup .footer-newsletter-sub,
  .footer-new .footer-newsletter-signup .footer-newsletter-note {
    text-align: center !important;
  }
  .footer-new .footer-links-grid .footer-links-new {
    align-items: center !important;
  }
  .footer-new .footer-links-grid .footer-link-new {
    justify-content: center !important;
  }
  .footer-new .footer-links-grid .footer-socials-new {
    justify-content: center !important;
  }
  .footer-new .footer-bottom-new .container {
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-catchphrase .footer-catchphrase-line {
    animation: none !important;
  }
}

/* ==========================================================================
   v0.7.5 — mobile catchphrase + animation refinements
   - Eyebrow lines hidden under 560px so the eyebrow text stays on one line
   - Catchphrase pulse made slightly more visible on small screens so it's
     perceptible without device-pixel-density washing it out
   - Tighter mobile rhythm
   ========================================================================== */

/* Hide the gradient flanker lines on phones so "SENİNLE TAM, SENSİZ EKSİK"
   doesn't get pushed into a two-line wrap. Eyebrow stays centered, just
   without the side-lines. */
@media (max-width: 560px) {
  .footer-catchphrase-eyebrow {
    display: block !important;     /* override inline-flex from desktop */
    text-align: center !important;
    letter-spacing: 0.18em !important;
    font-size: 0.74rem !important;
    white-space: normal !important;
  }
  .footer-catchphrase-eyebrow::before,
  .footer-catchphrase-eyebrow::after {
    display: none !important;
  }
  /* Tighten the catchphrase line on phone */
  .footer-catchphrase-line {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
    line-height: 1.1 !important;
    margin-block: 10px !important;
  }
  .footer-catchphrase-sub {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    max-width: 38ch !important;
  }
}

/* --- Make the catchphrase pulse visible on mobile screens. Mobile devices
       have high pixel density which washes out subtle filter:brightness
       changes. Boost the peak slightly + add a more visible text-shadow
       layer specifically on small viewports. --- */
@keyframes ta-catchphrase-pulse-mobile {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 0 rgba(232, 237, 242, 0);
  }
  50% {
    filter: brightness(1.10);
    text-shadow:
      0 0 24px rgba(232, 237, 242, 0.30),
      0 0 56px rgba(102, 155, 188, 0.30);
  }
}
@media (max-width: 768px) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
      ta-catchphrase-pulse-mobile 4.2s ease-in-out 1300ms infinite !important;
  }
}

/* --- Tighten footer spacing on mobile a little more --- */
@media (max-width: 560px) {
  .footer-new .footer-catchphrase,
  .footer-new .footer-newsletter-band,
  .footer-new .footer-links-band {
    padding-block: clamp(28px, 7vw, 40px) !important;
  }
  .footer-new .footer-newsletter-brand {
    gap: 10px !important;
  }
  .footer-new .footer-newsletter-brand .footer-desc-new {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }
  /* Vertical rhythm between the two grid rows of link columns */
  .footer-links-grid {
    row-gap: 32px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-catchphrase .footer-catchphrase-line {
    animation: none !important;
  }
}

/* ==========================================================================
   v0.7.6 — mobile footer alignment refinements per UX feedback
   - Link items inside each column: LEFT-aligned (was centered)
   - Section headings: stay centered
   - Social icons: centered (were left-edge of their column)
   - Copyright row: centered (was left-aligned by previous rule)
   - Tagline "Arabic begins here": stays centered
   ========================================================================== */

@media (max-width: 720px) {
  /* Section headings stay centered */
  .footer-new .footer-links-grid .footer-heading-new {
    text-align: center !important;
  }

  /* Link items — left-align the text, but center the ul block within
     the centered column so the list isn't flush against the column edge */
  .footer-new .footer-links-grid .footer-links-new {
    align-items: flex-start !important;
    text-align: left !important;
    width: fit-content !important;
    margin-inline: auto !important;
  }
  .footer-new .footer-links-grid .footer-link-new {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Social icons — centered cluster */
  .footer-new .footer-links-grid .footer-socials-new {
    justify-content: center !important;
    margin-inline: auto !important;
    margin-top: 14px !important;
  }

  /* Copyright row + tagline + legal links — all centered */
  .footer-new .footer-bottom-new {
    text-align: center !important;
  }
  .footer-new .footer-bottom-new .container {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .footer-new .footer-bottom-new p,
  .footer-new .footer-bottom-new .footer-tagline-new,
  .footer-new .footer-bottom-new .footer-bottom-legal {
    justify-self: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .footer-new .footer-bottom-new .footer-bottom-legal {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   v0.7.8 — mobile footer column alignment refinement
   The heading + link list inside each column should align to the same
   leftmost edge (left-aligned as a unit). The column-block as a whole
   stays centered inside its grid cell.
   ========================================================================== */
@media (max-width: 720px) {
  /* Wrap the heading + list together so they share the same left edge.
     Both inside .footer-col-new which is the column container. */
  .footer-new .footer-links-grid .footer-col-new {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;          /* center the block inside the cell */
  }
  .footer-new .footer-links-grid .footer-col-new > * {
    width: fit-content !important;            /* shrink to content */
  }
  .footer-new .footer-links-grid .footer-heading-new {
    text-align: left !important;
    margin-inline: 0 !important;
  }
  .footer-new .footer-links-grid .footer-links-new {
    align-items: flex-start !important;
    text-align: left !important;
    margin-inline: 0 !important;
  }
  .footer-new .footer-links-grid .footer-link-new {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  /* Socials stay centered as a row (they're icons, no flush-left needed) */
  .footer-new .footer-links-grid .footer-socials-new {
    align-self: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   v0.7.9 — louder, more apparent footer animations
   - Catchphrase pulse: wider brightness range, brighter glow, faster cycle
   - Eyebrow gradient lines: re-enabled shimmer (now visible)
   - Logo: more dramatic elastic + occasional emphasis "wiggle"
   - Link columns: scroll-driven stagger fade-up as user enters footer
   - Social icons: continuous gentle hover-attractor + brand-burst on hover
   - Bottom band: subtle continuous shimmer on the legal row
   ========================================================================== */

/* --- 1. CATCHPHRASE PULSE V4: louder + clearly readable as breathing --- */
@keyframes ta-catchphrase-pulse-v4 {
  0%, 100% {
    filter: brightness(1);
    text-shadow:
      0 0 0 rgba(232, 237, 242, 0),
      0 0 0 rgba(102, 155, 188, 0);
  }
  50% {
    filter: brightness(1.18);
    text-shadow:
      0 0 32px rgba(232, 237, 242, 0.32),
      0 0 72px rgba(102, 155, 188, 0.42);
  }
}
.footer-catchphrase .footer-catchphrase-line {
  animation:
    ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
    ta-catchphrase-pulse-v4 3.2s ease-in-out 1300ms infinite !important;
}
@supports (animation-timeline: view()) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-catchphrase-scroll-grow linear,
      ta-catchphrase-pulse-v4 3.2s ease-in-out infinite !important;
    animation-timeline: view(), auto !important;
    animation-range: entry 0% cover 35%, auto !important;
  }
}
@media (max-width: 768px) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
      ta-catchphrase-pulse-v4 3.2s ease-in-out 1300ms infinite !important;
  }
}

/* --- 2. EYEBROW LINES — re-enable shimmer at higher visibility --- */
@keyframes ta-eyebrow-shimmer-v2 {
  0%, 100% { opacity: 0.35; transform: scaleX(0.85); }
  50%      { opacity: 1;    transform: scaleX(1.05); }
}
@media (min-width: 561px) {
  .footer-catchphrase-eyebrow::before,
  .footer-catchphrase-eyebrow::after {
    opacity: 0.5 !important;
    transform-origin: center;
    animation: ta-eyebrow-shimmer-v2 3.2s ease-in-out infinite !important;
  }
  .footer-catchphrase-eyebrow::after {
    animation-delay: 1.6s !important; /* out of phase with ::before */
  }
}

/* --- 3. LOGO — more dramatic elastic + subtle continuous "wiggle"
       so the icon feels alive even after the entry plays. --- */
@keyframes ta-logo-elastic-bounce-v2 {
  0%   { transform: scale(0.25) rotate(-6deg); opacity: 0; }
  35%  { transform: scale(1.35) rotate(4deg); opacity: 1; }
  55%  { transform: scale(0.88) rotate(-2deg); }
  75%  { transform: scale(1.12) rotate(1deg); }
  90%  { transform: scale(0.96); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes ta-logo-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-1.5deg); }
  50%      { transform: rotate(0deg); }
  75%      { transform: rotate(1.5deg); }
}
@keyframes ta-logo-breath-v2 {
  0%, 100% {
    filter: drop-shadow(0 8px 24px rgba(102, 155, 188, 0.20));
  }
  50% {
    filter: drop-shadow(0 20px 48px rgba(102, 155, 188, 0.46));
  }
}
.footer-new .footer-newsletter-brand .footer-brand-icon {
  animation:
    ta-logo-elastic-bounce-v2 1500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) both,
    ta-logo-wiggle 7s ease-in-out 2000ms infinite,
    ta-logo-breath-v2 4s ease-in-out 2000ms infinite !important;
}
@supports (animation-timeline: view()) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    animation:
      ta-logo-elastic-bounce-v2 linear both,
      ta-logo-wiggle 7s ease-in-out infinite,
      ta-logo-breath-v2 4s ease-in-out infinite !important;
    animation-timeline: view(), auto, auto !important;
    animation-range: entry 0% entry 80%, auto, auto !important;
  }
}

/* --- 4. LINK COLUMNS — stagger fade-up reveal on entry --- */
@keyframes ta-footer-col-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  .footer-links-grid .footer-col-new {
    animation: ta-footer-col-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  .footer-links-grid .footer-col-new:nth-child(1) { animation-delay: 0ms; }
  .footer-links-grid .footer-col-new:nth-child(2) { animation-delay: 80ms; }
  .footer-links-grid .footer-col-new:nth-child(3) { animation-delay: 160ms; }
  .footer-links-grid .footer-col-new:nth-child(4) { animation-delay: 240ms; }
}
@supports not (animation-timeline: view()) {
  .footer-links-grid .footer-col-new {
    animation: ta-footer-col-reveal 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .footer-links-grid .footer-col-new:nth-child(1) { animation-delay: 1200ms; }
  .footer-links-grid .footer-col-new:nth-child(2) { animation-delay: 1320ms; }
  .footer-links-grid .footer-col-new:nth-child(3) { animation-delay: 1440ms; }
  .footer-links-grid .footer-col-new:nth-child(4) { animation-delay: 1560ms; }
}

/* --- 5. SOCIAL ICONS — gentle continuous attractor + dramatic hover --- */
@keyframes ta-social-attractor {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.03); }
}
.footer-links-grid .footer-socials-new .footer-social-new {
  animation: ta-social-attractor 4s ease-in-out infinite;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 200ms ease, color 200ms ease,
              border-color 200ms ease, box-shadow 280ms ease;
}
.footer-links-grid .footer-socials-new .footer-social-new:nth-child(1) { animation-delay: 0ms; }
.footer-links-grid .footer-socials-new .footer-social-new:nth-child(2) { animation-delay: 200ms; }
.footer-links-grid .footer-socials-new .footer-social-new:nth-child(3) { animation-delay: 400ms; }
.footer-links-grid .footer-socials-new .footer-social-new:nth-child(4) { animation-delay: 600ms; }
.footer-links-grid .footer-socials-new .footer-social-new:nth-child(5) { animation-delay: 800ms; }
.footer-links-grid .footer-socials-new .footer-social-new:hover {
  transform: translateY(-6px) scale(1.18) !important;
  background: rgba(102, 155, 188, 0.24) !important;
  border-color: rgba(102, 155, 188, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(102, 155, 188, 0.32);
  animation-play-state: paused;
}

/* --- 6. LINK HOVER — slightly more punch on the column links --- */
.footer-links-grid .footer-link-new:hover {
  color: #fff !important;
  transform: translateX(6px) !important;
  text-shadow: 0 0 16px rgba(102, 155, 188, 0.32);
}

/* --- Reduced motion guard --- */
@media (prefers-reduced-motion: reduce) {
  .footer-catchphrase .footer-catchphrase-line,
  .footer-catchphrase-eyebrow::before,
  .footer-catchphrase-eyebrow::after,
  .footer-new .footer-newsletter-brand .footer-brand-icon,
  .footer-links-grid .footer-col-new,
  .footer-links-grid .footer-socials-new .footer-social-new {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   v0.7.10 — Footer alignment + sizing + animation pass
   - Headings + link list share LEFT EDGE (column-block is centered as a unit)
   - Social icons enlarged as a "feature" element with stronger animation
   - "Talk Arabic" wordmark bigger
   - Catchphrase pulse +40% faster (3.2s -> 1.9s cycle)
   ========================================================================== */

/* --- 1. Headings + links share a single LEFT EDGE on mobile.
       Wrap the column itself with width: fit-content + margin-inline auto
       so the whole block is centered horizontally, then align children to
       flex-start so heading and list both flush-left to the block's edge. */
@media (max-width: 720px) {
  .footer-new .footer-links-grid .footer-col-new {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* children flush-left to block */
    width: fit-content !important;
    margin-inline: auto !important;     /* block centered in its cell */
  }
  .footer-new .footer-links-grid .footer-col-new > *,
  .footer-new .footer-links-grid .footer-heading-new,
  .footer-new .footer-links-grid .footer-links-new {
    width: auto !important;
    margin-inline: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .footer-new .footer-links-grid .footer-link-new {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  /* Social icons should still center as a row in the CONNECT cell */
  .footer-new .footer-links-grid .footer-socials-new {
    align-self: stretch !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* --- 2. Social icons as FEATURE element — bigger size + bolder animation
       + flex-wrap so they don't cut off on narrow columns. --- */
.footer-links-grid .footer-socials-new {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: center !important;
  margin-top: 18px !important;
}
.footer-links-grid .footer-socials-new .footer-social-new {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  border-width: 1.5px !important;
}
.footer-links-grid .footer-socials-new .footer-social-new svg {
  width: 22px !important;
  height: 22px !important;
}
/* Stronger continuous attractor + dramatic hover */
@keyframes ta-social-attractor-v2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.06); }
}
.footer-links-grid .footer-socials-new .footer-social-new {
  animation: ta-social-attractor-v2 3s ease-in-out infinite !important;
}
.footer-links-grid .footer-socials-new .footer-social-new:hover {
  transform: translateY(-10px) scale(1.22) !important;
  box-shadow: 0 18px 36px rgba(102, 155, 188, 0.42) !important;
}
@media (max-width: 560px) {
  .footer-links-grid .footer-socials-new .footer-social-new {
    width: 52px !important;
    height: 52px !important;
  }
  .footer-links-grid .footer-socials-new .footer-social-new svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* --- 3. "Talk Arabic" wordmark bigger under the logo --- */
.footer-new .footer-newsletter-brand .footer-brand-wordmark {
  font-size: clamp(2rem, 3.4vw, 2.9rem) !important;
}
@media (max-width: 560px) {
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(2.1rem, 10vw, 2.8rem) !important;
  }
}

/* --- 4. Catchphrase pulse 40% FASTER (3.2s -> 1.9s) --- */
.footer-catchphrase .footer-catchphrase-line {
  animation:
    ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
    ta-catchphrase-pulse-v4 1.9s ease-in-out 1300ms infinite !important;
}
@supports (animation-timeline: view()) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-catchphrase-scroll-grow linear,
      ta-catchphrase-pulse-v4 1.9s ease-in-out infinite !important;
    animation-timeline: view(), auto !important;
    animation-range: entry 0% cover 35%, auto !important;
  }
}
@media (max-width: 768px) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-footer-fade-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
      ta-catchphrase-pulse-v4 1.9s ease-in-out 1300ms infinite !important;
  }
}
/* Eyebrow shimmer also synced to ~40% faster (3.2s -> 1.9s) */
@media (min-width: 561px) {
  .footer-catchphrase-eyebrow::before,
  .footer-catchphrase-eyebrow::after {
    animation: ta-eyebrow-shimmer-v2 1.9s ease-in-out infinite !important;
  }
  .footer-catchphrase-eyebrow::after {
    animation-delay: 0.95s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-catchphrase .footer-catchphrase-line,
  .footer-catchphrase-eyebrow::before,
  .footer-catchphrase-eyebrow::after,
  .footer-links-grid .footer-socials-new .footer-social-new {
    animation: none !important;
    transform: none !important;
  }
}

/* --- v0.7.11 — scale down social icons on mobile (were too big at 52px,
       wrapping into 3+2). Aim for a single comfortable row. --- */
@media (max-width: 560px) {
  .footer-links-grid .footer-socials-new {
    gap: 10px !important;
  }
  .footer-links-grid .footer-socials-new .footer-social-new {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  .footer-links-grid .footer-socials-new .footer-social-new svg {
    width: 18px !important;
    height: 18px !important;
  }
}
@media (max-width: 380px) {
  .footer-links-grid .footer-socials-new .footer-social-new {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ==========================================================================
   v0.7.12 — social icons single-line + bigger mobile logo
   - 5 social icons must NEVER wrap. Force nowrap + scale down so they fit.
   - Logo icon bumped up on mobile so it reads as the feature piece.
   ========================================================================== */

/* --- Social icons: single line at all widths, shrink to fit --- */
.footer-links-grid .footer-socials-new {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(6px, 1.4vw, 14px) !important;
  max-width: 100% !important;
}
.footer-links-grid .footer-socials-new .footer-social-new {
  flex: 0 0 auto !important;
  width: clamp(32px, 9vw, 48px) !important;
  height: clamp(32px, 9vw, 48px) !important;
  border-radius: 12px !important;
}
.footer-links-grid .footer-socials-new .footer-social-new svg {
  width: clamp(14px, 4.5vw, 22px) !important;
  height: clamp(14px, 4.5vw, 22px) !important;
}

/* Belt + braces on the narrowest devices */
@media (max-width: 380px) {
  .footer-links-grid .footer-socials-new {
    gap: 5px !important;
  }
  .footer-links-grid .footer-socials-new .footer-social-new {
    width: 30px !important;
    height: 30px !important;
  }
  .footer-links-grid .footer-socials-new .footer-social-new svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* --- Logo: bigger feature size on mobile --- */
@media (max-width: 560px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(160px, 38vw, 220px) !important;
    max-width: clamp(160px, 38vw, 240px) !important;
  }
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
    margin-top: 8px !important;
  }
}

/* ==========================================================================
   v0.7.13 — final social row alignment + logo MUCH bigger
   - Social icons row: flush-LEFT like the rest of the column (was stretching
     full-width which broke the left-edge alignment with CONNECT heading)
   - Logo significantly enlarged across all viewports
   ========================================================================== */

/* --- 1. Social icons row: align with the column block, not stretch --- */
@media (max-width: 720px) {
  .footer-new .footer-links-grid .footer-socials-new {
    align-self: flex-start !important;      /* was stretch */
    justify-content: flex-start !important; /* was center */
    width: auto !important;                  /* was 100% — was forcing column wider */
    margin-top: 16px !important;
  }
}

/* --- 2. Logo MUCH bigger — feature element treatment everywhere --- */
.footer-new .footer-newsletter-brand .footer-brand-icon {
  height: clamp(240px, 30vw, 440px) !important;
  max-width: clamp(280px, 38vw, 520px) !important;
}
@media (max-width: 1024px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(220px, 32vw, 320px) !important;
  }
}
@media (max-width: 720px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(200px, 42vw, 280px) !important;
  }
}
@media (max-width: 480px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(180px, 46vw, 240px) !important;
  }
}

/* Wordmark proportional bump to match the new logo size */
.footer-new .footer-newsletter-brand .footer-brand-wordmark {
  font-size: clamp(2.4rem, 3.8vw, 3.4rem) !important;
}
@media (max-width: 720px) {
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(2.4rem, 9vw, 3.2rem) !important;
  }
}

/* ==========================================================================
   v0.7.14 — DESKTOP-ONLY: social row flush-left + logo ~3x bigger
   Mobile is already correct (per Faruk) — these rules target desktop +
   only nudge mobile if needed.
   ========================================================================== */

/* --- Social icons row: flush-left on ALL viewports, with highest specificity
       so it beats every prior `justify-content: center !important` rule. --- */
html .footer-new .footer-links-grid .footer-socials-new,
.footer-new .footer-links-band .footer-links-grid .footer-socials-new {
  justify-content: flex-start !important;
  align-self: flex-start !important;
  width: auto !important;
}

/* --- Logo: ~3x bigger on desktop. Was clamp(240-440px), now
       clamp(440-820px). On a 1200px viewport this evaluates to ~660px
       (was ~360px) — roughly tripling the visual weight. --- */
.footer-new .footer-newsletter-brand .footer-brand-icon {
  height: clamp(440px, 50vw, 820px) !important;
  max-width: clamp(440px, 56vw, 880px) !important;
}
/* Wordmark scales proportionally so it doesn't look tiny next to the icon */
.footer-new .footer-newsletter-brand .footer-brand-wordmark {
  font-size: clamp(3rem, 5vw, 4.4rem) !important;
  margin-top: 14px !important;
}

/* Tablet step-down */
@media (max-width: 1024px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(300px, 42vw, 460px) !important;
  }
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(2.4rem, 5vw, 3.4rem) !important;
  }
}

/* Mobile — Faruk said "mobile is okay now" so keep the v0.7.13 mobile sizing */
@media (max-width: 720px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(200px, 42vw, 280px) !important;
  }
  .footer-new .footer-newsletter-brand .footer-brand-wordmark {
    font-size: clamp(2.4rem, 9vw, 3.2rem) !important;
  }
}
@media (max-width: 480px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(180px, 46vw, 240px) !important;
  }
}

/* ==========================================================================
   v0.8.2 — Footer logo: pure WHITE + bigger (per Faruk feedback on screenshot)
   ---------------------------------------------------------------------------
   The SVG icon ships with cream/brand fill. Forcing it to pure white via
   filter: brightness(0) invert(1) — works regardless of SVG source colors.
   Wordmark "Talk Arabic" also forced to pure white. Size bumped from
   clamp(440-820px) to clamp(560-1000px) so it dominates the band.
   ========================================================================== */

/* Pure white icon */
.footer-new .footer-newsletter-brand .footer-brand-icon {
  filter: brightness(0) invert(1) !important;   /* force pure white */
  height: clamp(640px, 62vw, 1120px) !important;
  max-width: clamp(640px, 66vw, 1200px) !important;
}
/* Pure white wordmark (both serif + sans halves) */
.footer-new .footer-newsletter-brand .footer-brand-wordmark,
.footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-sans,
.footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-serif {
  color: #ffffff !important;
  font-size: clamp(3.4rem, 5.6vw, 5rem) !important;
}

/* Tablet step-down (override v0.7.14 tablet rule) */
@media (max-width: 1024px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(380px, 48vw, 560px) !important;
    max-width: clamp(380px, 52vw, 600px) !important;
  }
  .footer-new .footer-newsletter-brand .footer-brand-wordmark,
  .footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-sans,
  .footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-serif {
    font-size: clamp(2.6rem, 5.4vw, 3.8rem) !important;
  }
}

/* Mobile — keep it readable, also white, bigger again per Faruk */
@media (max-width: 720px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(300px, 60vw, 420px) !important;
    max-width: clamp(300px, 66vw, 460px) !important;
  }
  .footer-new .footer-newsletter-brand .footer-brand-wordmark,
  .footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-sans,
  .footer-new .footer-newsletter-brand .footer-brand-wordmark .ta-wm-serif {
    font-size: clamp(2.8rem, 11vw, 3.8rem) !important;
  }
}
@media (max-width: 480px) {
  .footer-new .footer-newsletter-brand .footer-brand-icon {
    height: clamp(270px, 64vw, 340px) !important;
    max-width: clamp(270px, 70vw, 380px) !important;
  }
}

/* ==========================================================================
   v0.8.8 — FOOTER LOGO FIX (the real one)
   ---------------------------------------------------------------------------
   ROOT CAUSE every prior logo edit failed: js/main.js initBrandKitLogos()
   REPLACES the static `.footer-brand-icon` <img> at runtime with a
   JS-created `<img class="footer-symbol-logo">` (54px) + a
   `<span class="footer-wordmark-logo">`. So all the v0.7.14 / v0.8.2 / v0.8.5
   rules targeting `.footer-brand-icon` applied to an element that no longer
   exists after JS runs. THIS rule targets the REAL rendered elements.
   ========================================================================== */
.footer-new .footer-newsletter-brand .footer-logo-link .footer-symbol-logo,
.footer-new .footer-symbol-logo {
  width: clamp(170px, 19vw, 310px) !important;   /* ~40% smaller (Faruk) */
  height: auto !important;
  max-width: 70% !important;
  filter: brightness(0) invert(1) !important;   /* force pure WHITE */
  margin-inline: auto !important;
}
.footer-new .footer-newsletter-brand .footer-wordmark-logo,
.footer-new .footer-wordmark-logo {
  color: #ffffff !important;
}
.footer-new .footer-newsletter-brand .footer-wordmark-logo span,
.footer-new .footer-newsletter-brand .footer-wordmark-logo em,
.footer-new .footer-wordmark-logo span,
.footer-new .footer-wordmark-logo em {
  font-size: clamp(1.5rem, 2.3vw, 2.1rem) !important;
  color: #ffffff !important;
}
@media (max-width: 720px) {
  .footer-new .footer-symbol-logo,
  .footer-new .footer-newsletter-brand .footer-logo-link .footer-symbol-logo {
    width: clamp(120px, 34vw, 180px) !important;
  }
  .footer-new .footer-wordmark-logo span,
  .footer-new .footer-wordmark-logo em {
    font-size: clamp(1.3rem, 6vw, 1.7rem) !important;
  }
}

/* ==========================================================================
   v0.7.15 — Social icons row no longer overflows the CONNECT column
   ---------------------------------------------------------------------------
   Problem: in a 4-col grid (~232px column at 1100px viewport), the icons
   at clamp(32, 9vw, 48) + 14px gaps measured ~296px — overflowing by ~64px,
   which is what was clipping the LinkedIn icon behind the WhatsApp FAB on
   desktop and going off-screen on mobile.

   Fix: cap icons at 34px on desktop (was 48), 32px on mobile (was 48),
   shrink the gap to 8px. New row width = 5×34 + 4×8 = 202px — fits inside
   232px column with breathing room. Highest-specificity selectors so this
   wins over every prior rule.
   ========================================================================== */
html .footer-new .footer-links-band .footer-links-grid .footer-socials-new,
html .footer-new .footer-links-grid .footer-socials-new {
  gap: 8px !important;
  max-width: 100% !important;
  overflow: visible !important;
}
html .footer-new .footer-links-band .footer-links-grid .footer-socials-new .footer-social-new,
html .footer-new .footer-links-grid .footer-socials-new .footer-social-new {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  flex: 0 0 34px !important;
}
html .footer-new .footer-links-band .footer-links-grid .footer-socials-new .footer-social-new svg,
html .footer-new .footer-links-grid .footer-socials-new .footer-social-new svg {
  width: 16px !important;
  height: 16px !important;
}

/* Mobile sizing — slightly smaller again so 5 icons + 4 gaps fit
   comfortably in a 360-420px viewport with horizontal page padding */
@media (max-width: 720px) {
  html .footer-new .footer-links-band .footer-links-grid .footer-socials-new,
  html .footer-new .footer-links-grid .footer-socials-new {
    gap: 8px !important;
  }
  html .footer-new .footer-links-band .footer-links-grid .footer-socials-new .footer-social-new,
  html .footer-new .footer-links-grid .footer-socials-new .footer-social-new {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  html .footer-new .footer-links-band .footer-links-grid .footer-socials-new .footer-social-new svg,
  html .footer-new .footer-links-grid .footer-socials-new .footer-social-new svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Very narrow phones — keep them readable but never overflow */
@media (max-width: 380px) {
  html .footer-new .footer-links-band .footer-links-grid .footer-socials-new,
  html .footer-new .footer-links-grid .footer-socials-new {
    gap: 6px !important;
  }
  html .footer-new .footer-links-band .footer-links-grid .footer-socials-new .footer-social-new,
  html .footer-new .footer-links-grid .footer-socials-new .footer-social-new {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }
}

/* ==========================================================================
   v0.7.16 — Login button drop shadow restored (without the violet halo)
   ---------------------------------------------------------------------------
   v0.6.90 killed every box-shadow on the Login button to remove the
   violet/cyan "halo" + the ::after radial-gradient glow. Side effect:
   the legitimate downward drop shadow was killed too. Theme toggle and
   language picker still cast `0 10px 24px rgba(7, 7, 12, 0.12)` so
   visually the shadow appears to START under the theme toggle and
   continue under the lang picker — looking like the Login's shadow is
   sliced off halfway.

   Fix: restore a clean, neutral drop shadow on the Login (matching the
   theme toggle / lang picker exactly) WITHOUT bringing back the violet
   halo or the ::after pseudo. All three pills now cast the same shadow
   so the row reads as a unified floating cluster.
   ========================================================================== */
.navbar .nav-actions a[href*="student-panel.html"],
.nav-actions a[href*="student-panel.html"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(7, 7, 12, 0.12) !important;
}
.navbar .nav-actions a[href*="student-panel.html"]:hover,
.navbar .nav-actions a[href*="student-panel.html"]:focus-visible,
.nav-actions a[href*="student-panel.html"]:hover,
.nav-actions a[href*="student-panel.html"]:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(7, 7, 12, 0.18) !important;
}
/* The ::after halo stays killed — only restore drop shadow on the element. */