/* ═══════════════════════════════════════════════════════════════
   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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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.woff2') format('woff2'), 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(1rem, 0.95rem + 0.25vw, 1rem); /* pinned 16px — enforces the spec ≥16px floor on phones (was 15px min); desktop unchanged */
  --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: smooth; /* native smooth for anchors/scroll-to-top (wheel + touch stay native/instant) — replaces Lenis, no scroll lag */
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- 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: 16px;
  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: max(16px, var(--text-sm)); /* ≥16px so iOS Safari does not auto-zoom on field focus */
  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;
}

/* Native enquiry form (Formspree) — pre-purchase contact + homepage forms */
.ta-enquiry-form { display: flex; flex-direction: column; gap: var(--space-5); }
.ta-enquiry-form[hidden] { display: none !important; }
.ta-enquiry-submit { align-self: flex-start; margin-top: var(--space-1); }
.ta-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-status { margin: 0; font-size: var(--text-sm); min-height: 1.1em; }
.form-status.is-err { color: #c0341d; font-weight: 600; }
.form-status.is-ok { color: var(--color-teal); font-weight: 600; }
.form-success { display: none; background: rgba(8, 64, 62, 0.06); border: 1px solid rgba(8, 64, 62, 0.15); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; color: var(--color-teal); }
.form-success.visible { display: block; }
.form-success[hidden] { display: none; }
.form-success { padding: var(--space-8) var(--space-6); }
.form-success h3 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 700; }
.form-success p { margin: 0 0 var(--space-3); }
.form-success p:last-child { margin-bottom: 0; }
.form-success p[data-i18n="contact.successNext"] { font-size: var(--text-sm); opacity: 0.85; margin-top: var(--space-2); }
.form-success .btn { margin-top: var(--space-2); }
/* Animated success checkmark (injected by taRevealSuccessTick on submit success) */
.ta-success-tick { display: block; width: 60px; height: 60px; margin: 0 auto var(--space-4); }
.ta-success-tick .ta-tick-circle { stroke: var(--color-primary, #669BBC); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: taTickCircle .5s cubic-bezier(.65,0,.45,1) forwards; }
.ta-success-tick .ta-tick-check { stroke: var(--color-primary, #669BBC); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: taTickCheck .35s .45s cubic-bezier(.65,0,.45,1) forwards; }
@keyframes taTickCircle { to { stroke-dashoffset: 0; } }
@keyframes taTickCheck { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ta-success-tick .ta-tick-circle, .ta-success-tick .ta-tick-check { animation: none; stroke-dashoffset: 0; }
}
[data-theme="dark"] .ta-success-tick .ta-tick-circle,
[data-theme="dark"] .ta-success-tick .ta-tick-check { stroke: #7fb4d6; }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-text);
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
[data-theme="dark"] .form-success { background: rgba(102, 155, 188, 0.10); border-color: rgba(102, 155, 188, 0.30); color: #cfe4f1; }

/* --- 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(2, 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: 16px;
  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: 10px;
  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: 16px;
  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); }
}
/* Turkish & Arabic nav labels run much longer than English ("Programlar ve
   Ücretler" vs "Courses & Pricing"), so between the 961px desktop threshold and
   ~1200px the desktop nav overlaps the right-hand actions cluster. Collapse those
   two languages to the hamburger across that range; English fits from 961px and
   keeps the full bar. This is the same control set as the ≤960px mobile view. */
@media (min-width: 961px) and (max-width: 1199px) {
  html[lang="tr"] .nav-links,
  html[lang="ar"] .nav-links { display: none !important; }
  html[lang="tr"] .nav-actions .btn,
  html[lang="ar"] .nav-actions .btn { display: none !important; }
  html[lang="tr"] .mobile-toggle,
  html[lang="ar"] .mobile-toggle { display: flex !important; }
}
/* English labels fit from ~1080px but overlap the actions cluster in the
   961–1079px band; collapse English to the hamburger there too (same control
   set as ≤960px mobile). Above each language's fit width the full bar returns. */
@media (min-width: 961px) and (max-width: 1079px) {
  html[lang="en"] .nav-links { display: none !important; }
  html[lang="en"] .nav-actions .btn { display: none !important; }
  html[lang="en"] .mobile-toggle { display: flex !important; }
}

/* 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: 10px;
  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: 10px;
  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: 10px;
  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: 600; /* match every other card title (spec: card/sub headings = Poppins 600) */
  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: 16px;
  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: 16px;
  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: 10px;
  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: 16px;
  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: 16px;
  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(56px, 8vw, 96px) !important; /* normalised to the 96px section-rhythm ceiling */
}
.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: 16px;
  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: 16px !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;
  /* Type standard: programme heroes are Lora "page-title" tier — sized to sit
     just under the homepage hero (was up to 5.6rem/~90px, which dwarfed it). */
  font-size: clamp(2.5rem, 4.6vw, 3.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: 24px !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: 24px;
  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: 16px !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: 24px !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;
  }
}

/* Group packages (3 cards) stay 3-up from 1024px. minmax(0,1fr) lets the
   columns shrink to fit, so they can never overflow/clip the viewport.
   (The 5-card #birebir grid keeps its own higher-specificity 6-col override.) */
@media (min-width: 1024px) {
  html[data-i18n-title="meta.pricing.title"] .price-grid.grid-3,
  body.pricing-page .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(56px, 8vw, 96px) !important; /* normalised to the 96px section-rhythm ceiling */
}

.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: 24px !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;
}
/* v0.8.16 QA fix — pricing page DARK mode. The page's light-lock rules all reference
   --pricing-cream (a light surface) + --pricing-ink (dark text) with !important and
   higher specificity than the global dark flips, so the body stayed light in dark mode
   (dark nav over a light page). Flipping BOTH tokens here cascades through every locked
   rule and preserves contrast everywhere (cream-bg+ink-text pairs simply invert). The
   steel highlight stays constant. */
html[data-theme="dark"][data-i18n-title="meta.pricing.title"],
[data-theme="dark"] body.pricing-page {
  --pricing-ink: #EFF5F9;    /* was dark text  -> light text */
  --pricing-cream: #172235;  /* was light surface -> dark navy surface */
  --pricing-ice: #101827;
  --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: 10px !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: 16px !important;
}

.steps-showcase .step-number {
  border-radius: 16px !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: 16px !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: 16px !important;
}

.steps-showcase .step-number {
  border-radius: 16px !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: 6px 6px 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: 16px !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: 16px !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: 16px !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: 16px !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: 16px !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: 16px !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: 16px !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: 10px !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: 16px !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: 16px !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: 16px !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: 16px !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: 10px !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: 10px !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: 10px !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: 10px !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: 24px !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: 16px !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(135deg, rgba(232, 237, 242, 0.18), rgba(232, 237, 242, 0.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(7, 7, 12, 0.12) !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: 10px !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: 10px !important;
  }

  .theme-toggle.ta-theme-toggle .ta-theme-toggle-track {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px !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: 16px !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: 16px !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: 10px !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: 10px !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: 16px !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: 10px !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: 16px !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: 10px !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: 16px !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: 10px !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: 10px !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: 16px !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: 10px !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: 16px !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: 16px !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: 16px !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: 16px !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  html[data-i18n-title="meta.home.title"] .email-capture-art {
    border-radius: 16px 16px 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: 10px !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: 10px !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: 16px !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: 10px !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: 10px !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: 10px !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: 10px !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: 16px !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: 10px !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: 10px !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: 10px !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: 10px !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: 10px !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: 10px !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: 10px !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: 10px !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: 16px !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: 16px !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: 10px !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: 16px !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: 16px !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: 16px !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: 16px !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: 16px !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: 16px;
  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: 16px;
  }
}

/* ============================================================
   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: 10px !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-block: clamp(8px, 1.2vw, 16px) !important;
  margin-inline: auto !important;
  border-radius: 10px !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: 10px !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-block: clamp(8px, 1vw, 14px) !important;
  margin-inline: auto !important;
  border-radius: 16px !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;
  /* Type standard: homepage hero is the Poppins "display" tier at a Medium
     weight (was 700 via a generic .hero h1 override — too thick). */
  font-weight: 500 !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: 16px !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;
    width: 100% !important;      /* complete the intended full-bleed (was inheriting the 358px section width → pinned left) */
    max-width: none !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: 10px !important;
    padding: 10px 8px !important;
  }
}

/* ============================================================
   v0.6.89 — framed inner heroes, readable mobile card stacks,
   and Tally embed cleanup.
   ============================================================ */
.page-header,
.programme-hero {
  /* Match the floating-canvas section column (was near-full-bleed, leaving inner
     headers far wider than the 1380px nav + content sections). */
  width: min(var(--ta-canvas-max), calc(100% - 2 * var(--ta-canvas-gutter))) !important;
  margin: clamp(8px, 1vw, 14px) auto 0 !important;
  border-radius: 16px !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% - 32px) !important; /* match the 16px-each-side section column (was 10px each side → 6px proud) */
    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: 10px !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: 16px !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: 16px !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: 24px !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;
    /* Align the floating nav capsule to the same column as the canvas sections
       (was a near-full-bleed clamp(18-32px) inset, which left the bar far wider
       than the 1380px hero/section cards on large screens). */
    left: 0 !important;
    right: 0 !important;
    width: min(var(--ta-canvas-max), calc(100% - 2 * var(--ta-canvas-gutter))) !important;
    margin-inline: 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;
    max-width: none !important; /* fill the capsule (which now caps at the section width) */
  }

  .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;
    /* Reserve exactly the content width so the actions grid column never squeezes
       below it — otherwise the row overflows LEFT (justify-self:end) and the login
       pokes out past the glassy capsule's left edge. */
    min-width: max-content !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: 24px !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: 16px;
    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 !important;
}
@supports (animation-timeline: view()) {
  .footer-catchphrase .footer-catchphrase-line {
    animation:
      ta-catchphrase-scroll-grow linear !important;
    animation-timeline: view() !important;
    animation-range: entry 0% cover 35% !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: 16px !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: 10px !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: 10px !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. */

/* ==========================================================================
   v0.8.15 — Promise wallet: front card MUST be visible at every viewport
   ---------------------------------------------------------------------------
   Reyyan reported the Promise carousel "doesn't work when the page is small."
   Diagnosis (headless, 390px): the JS cycles correctly (the active card's
   data-wallet-pos flips to 0), but the front card computed to opacity:0 at
   small widths — so tapping the arrows swapped to an INVISIBLE card. Some
   rule in the deep wallet cascade was winning over the mobile pos=0 opacity.
   This maximally-specific, last-in-file rule guarantees the front card is
   fully visible + interactive at ALL sizes. Back cards keep their own rules.
   ========================================================================== */
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card.card-wallet-card[data-wallet-pos="0"],
html[data-i18n-title="meta.home.title"] .promise-track.is-wallet-stack .promise-card[data-wallet-pos="0"],
.promise-track.is-wallet-stack .promise-card[data-wallet-pos="0"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   v0.8.16 — Footer calligraphy watermark (the dove perches on the RIGHT)
   ---------------------------------------------------------------------------
   Reyyan/Faruk's brand calligraphy: the flying dove "كلام" sits on the right
   of the footer, tinted light + low opacity so it reads as a watermark that
   blends INTO the dark footer (not a pasted-on graphic). Graceful: if the
   asset isn't present yet the footer is completely unchanged (background-image
   simply doesn't paint — no broken icon).
   → Drop a TRANSPARENT-background dove PNG at img/calligraphy/footer-dove.png
   ========================================================================== */
.footer-new::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: clamp(-48px, -2vw, 0px);
  bottom: 0;
  width: clamp(300px, 42vw, 660px);
  height: min(100%, 540px);
  background: url('../img/calligraphy/footer-dove.png') no-repeat right bottom;
  background-size: contain;
  opacity: 0.13;
  filter: brightness(0) invert(1);   /* navy art → soft light watermark on the dark footer */
  pointer-events: none;
}
/* Keep all footer content above the watermark. */
.footer-new > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .footer-new::after { width: 72vw; opacity: 0.09; }
}

/* ==========================================================================
   v0.8.16 — Calligraphy watermarks that BRIDGE sections (tie the page together)
   ---------------------------------------------------------------------------
   Direction (Faruk): framing doves in the dark HERO (on the LEFT) + dark FOOTER
   (on the RIGHT), and animal motifs that STRADDLE the boundary lines between the
   light sections so the art "blends over" the section edges and ties things in —
   the way decorative elements bridge sections on polished sites.

   HOW THE BRIDGE WORKS: each motif lives on the LOWER section of a pair and
   spills UP (negative top) across the divider into the section above it. With the
   section content lifted to z-index:1 and the motif at z-index:0, the bird paints
   OVER both sections' backgrounds but UNDER all real content. All low-opacity,
   pointer-events:none; every rule no-ops gracefully if its asset is missing.
     • Hero      → WHITE dove, lower-LEFT
     • Gazelle   → on How-it-works, spills UP across the Features ↔ How-it-works line (LEFT)
     • Ibis      → on Promise, spills UP across the Programmes ↔ Promise line (RIGHT)
     • Contact   → navy dove, spills UP across the Promise ↔ Contact line (RIGHT), toward the footer
   (The footer dove itself is the v0.8.16 block directly above.)
   ========================================================================== */
html[data-i18n-title="meta.home.title"] #features,
html[data-i18n-title="meta.home.title"] #how-it-works,
html[data-i18n-title="meta.home.title"] #programmes,
html[data-i18n-title="meta.home.title"] #promise,
html[data-i18n-title="meta.home.title"] #contact { position: relative; }

/* keep every section's real content above the bridging watermark */
html[data-i18n-title="meta.home.title"] #features > *,
html[data-i18n-title="meta.home.title"] #how-it-works > *,
html[data-i18n-title="meta.home.title"] #programmes > *,
html[data-i18n-title="meta.home.title"] #promise > *,
html[data-i18n-title="meta.home.title"] #contact > * { position: relative; z-index: 1; }

html[data-i18n-title="meta.home.title"] #how-it-works::after,
html[data-i18n-title="meta.home.title"] #promise::after,
html[data-i18n-title="meta.home.title"] #contact::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
}
/* Gazelle bridges Features ↔ How-it-works (spills UP into Features), LEFT */
html[data-i18n-title="meta.home.title"] #how-it-works::after {
  left: clamp(-28px, 0vw, 24px); bottom: 0;
  width: clamp(220px, 24vw, 400px); height: min(74%, 360px);
  background-image: url('../img/calligraphy/gazelle.png');
  background-position: left bottom; opacity: 0.13;
}
/* Ibis bridges Programmes ↔ Promise (spills UP into Programmes), RIGHT */
html[data-i18n-title="meta.home.title"] #promise::after {
  right: clamp(-28px, 0vw, 24px); bottom: 0;
  width: clamp(220px, 24vw, 400px); height: min(74%, 360px);
  background-image: url('../img/calligraphy/ibis.png');
  background-position: right bottom; opacity: 0.12;
}
/* Contact dove bridges Promise ↔ Contact (spills UP into Promise), RIGHT — flies toward the footer */
html[data-i18n-title="meta.home.title"] #contact::after {
  right: clamp(-20px, 1vw, 30px); bottom: 0;
  width: clamp(220px, 26vw, 420px); height: min(82%, 400px);
  background-image: url('../img/calligraphy/watermark-dove.png');
  background-position: right bottom; opacity: 0.12;
}

@media (max-width: 720px) {
  html[data-i18n-title="meta.home.title"] #how-it-works::after,
  html[data-i18n-title="meta.home.title"] #promise::after { width: 46vw; height: 52vw; opacity: 0.11; }
  html[data-i18n-title="meta.home.title"] #contact::after { width: 56vw; height: 58vw; opacity: 0.10; }
}

/* ==========================================================================
   v0.8.16 QA fixes (from full-site real-browser QA)
   ========================================================================== */

/* (a) Mobile heading clipping. html,body{overflow-x:hidden} (line ~4196) means an
   oversized display heading gets hard-CLIPPED (its last word disappears) instead of
   wrapping at narrow widths — e.g. pricing "Programlar ve Ücretler" / "Size Uygun
   Paketi Seçin". Cap the big display headings on small screens and always let long
   words wrap. */
@media (max-width: 600px) {
  h1, h2, h3,
  .section-title, .hero h1, .programme-hero h1, .page-header h1, [data-hero-title] {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    max-width: 100%;
  }
  .programme-hero h1,
  .page-header h1 {
    font-size: clamp(2rem, 8.6vw, 3rem) !important;
    max-width: 18ch;
  }
  .section-title { font-size: clamp(1.5rem, 6.2vw, 2rem) !important; }
}

/* (b) Calligraphy watermarks: the bridging motifs use a single steel tint for both
   themes, but on the DARK navy sections the steel ibis/gazelle/contact-dove read
   too faintly (navy-on-navy). In dark mode, tint them light (like the hero/footer
   doves) so each motif reads clearly; light mode keeps steel-on-cream. */
[data-theme="dark"] html[data-i18n-title="meta.home.title"] #how-it-works::after,
[data-theme="dark"] html[data-i18n-title="meta.home.title"] #promise::after,
[data-theme="dark"] html[data-i18n-title="meta.home.title"] #contact::after {
  filter: brightness(0) invert(1);
  opacity: 0.13;
}

/* (c) Pricing package-selector shell: its background is a hardcoded LIGHT gradient
   (line ~13852) that beats the global dark flip + the token flip, so this band stayed
   cream in dark mode. Provide a matching dark gradient under dark theme. */
[data-theme="dark"] html[data-i18n-title="meta.pricing.title"] .pricing-plan-shell,
[data-theme="dark"] body.pricing-page .pricing-plan-shell {
  background: linear-gradient(180deg, #141d2e 0%, #0e1726 100%) !important;
}

/* (d) Pricing cards: a hardcoded light gradient ("rescue polish", ~line 11457,
   specificity 0,2,1, all widths) locked .price-card light, so mobile dark mode kept
   light cards. Outrank it (0,3,1) under dark theme for desktop + mobile alike. */
[data-theme="dark"] html[data-i18n-title="meta.pricing.title"] .price-card,
[data-theme="dark"] html[data-i18n-title="meta.pricing.title"] .price-card.featured,
[data-theme="dark"] body.pricing-page .price-card,
[data-theme="dark"] body.pricing-page .price-card.featured {
  background: linear-gradient(180deg, #16213a 0%, #0f1828 100%) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34) !important;
}

/* (e) Pricing DARK MODE — explicit element pass. The price-number light-lock sets
   color:var(--color-text), which stays INK in dark mode → the big prices were
   dark-on-dark/invisible. The selector island + toggle pills + per-hour chips use
   hardcoded LIGHT backgrounds that don't flip → they inverted to light blocks.
   Force every element to read on the dark surface. background:none +
   -webkit-text-fill-color also defeats any gradient-clipped number text. */
[data-theme="dark"] body.pricing-page .price-card .price-big,
[data-theme="dark"] body.pricing-page .price-card .price-big span,
[data-theme="dark"] body.pricing-page .price-card .price-monthly,
[data-theme="dark"] body.pricing-page .price-card [data-ta-total],
[data-theme="dark"] body.pricing-page .price-card [data-ta-monthly] {
  background: none !important;
  -webkit-text-fill-color: #F3F7FA !important;
  color: #F3F7FA !important;
}
[data-theme="dark"] body.pricing-page .price-card .price-big .price-unit,
[data-theme="dark"] body.pricing-page .price-card .price-sub,
[data-theme="dark"] body.pricing-page .price-card .price-sub [data-ta-total],
[data-theme="dark"] body.pricing-page .price-card .meta,
[data-theme="dark"] body.pricing-page .price-card .hours,
[data-theme="dark"] body.pricing-page .price-card .pricing-card-schedule {
  -webkit-text-fill-color: rgba(232, 237, 242, 0.82) !important;
  color: rgba(232, 237, 242, 0.82) !important;
}
[data-theme="dark"] body.pricing-page .price-card .price-hour,
[data-theme="dark"] body.pricing-page .price-card .pricing-card-schedule {
  background: rgba(232, 237, 242, 0.10) !important;
  color: #EFF5F9 !important;
  -webkit-text-fill-color: #EFF5F9 !important;
}
/* Selector island + tab/level pills → dark glass, light text, steel active */
[data-theme="dark"] body.pricing-page .pricing-control-island,
[data-theme="dark"] body.pricing-page .pricing-toggle,
[data-theme="dark"] body.pricing-page .pricing-subtoggle {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(232, 237, 242, 0.12) !important;
}
[data-theme="dark"] body.pricing-page .pricing-toggle-btn,
[data-theme="dark"] body.pricing-page .pricing-subtoggle-btn,
[data-theme="dark"] body.pricing-page .pricing-level-feedback {
  color: rgba(232, 237, 242, 0.80) !important;
}
[data-theme="dark"] body.pricing-page .pricing-toggle-btn.active,
[data-theme="dark"] body.pricing-page .pricing-subtoggle-btn.active {
  background: #669BBC !important;
  color: #0c1320 !important;
  box-shadow: 0 6px 18px rgba(102, 155, 188, 0.30) !important;
}


/* ═══════════ v0.9.2 — audit fixes (docs/EXECUTION-BRIEF-v0.9.2.md) ═══════════ */

/* P0-1: .btn-outline was illegible in dark mode site-wide (about, programmes, student-panel) */
[data-theme="dark"] .btn-outline { color: #E8EDF2 !important; border-color: rgba(232,237,242,0.38) !important; background: transparent !important; }
[data-theme="dark"] .btn-outline:hover, [data-theme="dark"] .btn-outline:focus-visible { color: #FFFFFF !important; border-color: #8BB5D2 !important; background: rgba(102,155,188,0.14) !important; }

/* P0-2: pricing dark — #courses program cards were white-on-white (token flip vs legacy dark rules) */
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .course-card-header,
[data-theme="dark"] body.pricing-page #courses .course-card-header { background: #14213D !important; }
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .course-card-title,
[data-theme="dark"] body.pricing-page #courses .course-card-title { color: #FDF0D5 !important; }
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .course-card-body,
[data-theme="dark"] body.pricing-page #courses .course-card-body { background: #101A2B !important; }
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .course-card-body .card-desc,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] #courses .course-card-desc,
[data-theme="dark"] body.pricing-page #courses .course-card-body .card-desc,
[data-theme="dark"] body.pricing-page #courses .course-card-desc { color: rgba(232,237,242,0.82) !important; }

/* P0-3: pricing dark — active filter pill (--ta-ink never flips) */
[data-theme="dark"] body.pricing-page .filter-btn.active,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .filter-btn.active,
[data-theme="dark"] body.pricing-page .filter-btn.active:hover,
[data-theme="dark"] body.pricing-page .filter-btn.active:focus-visible { color: #F7F9FC !important; background: rgba(102,155,188,0.30) !important; }

/* P0-4: Promise wallet — back-card ghost text; only blank card edges may peek */
html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card:not([data-wallet-pos="0"]) > * { opacity: 0 !important; transition: opacity 300ms ease; }
html[data-i18n-title="meta.home.title"] .card-wallet-track.is-wallet-stack .card-wallet-card[data-wallet-pos="0"] > * { opacity: 1; transition: opacity 300ms ease 120ms; }
html[data-theme="dark"][data-i18n-title="meta.home.title"] .promise-card { background: #17243A !important; }

/* P1-9: pricing dark — promo strip kept light metallic gradient + berry-on-berry kicker */
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-promo-strip,
[data-theme="dark"] body.pricing-page .pricing-promo-strip { background: linear-gradient(135deg, rgba(137,52,105,0.22) 0%, rgba(20,29,46,0.92) 48%, rgba(102,155,188,0.14) 100%) !important; border-color: rgba(137,52,105,0.42) !important; color: #E8EDF2 !important; }
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-promo-strip p,
[data-theme="dark"] body.pricing-page .pricing-promo-strip p { color: rgba(232,237,242,0.80) !important; }
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-promo-strip .pricing-opening-kicker,
[data-theme="dark"] body.pricing-page .pricing-promo-strip .pricing-opening-kicker { background: #893469 !important; color: #FDF0D5 !important; border-color: rgba(253,240,213,0.28) !important; }

/* P1-10: pricing dark — duration tag pills white-on-white */
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .price-card .tag,
[data-theme="dark"] body.pricing-page .price-card .tag { color: #1C1C2E !important; background: rgba(232,237,242,0.85) !important; }

/* P1-11: form UX — select chevron (appearance:none stripped the native one) */
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C2E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 2.6em; }
[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8EDF2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px !important; }
/* dark focus ring was invisible (blanket dark border rules beat :focus) */
[data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .form-textarea:focus { border-color: #669BBC !important; box-shadow: 0 0 0 3px rgba(102,155,188,0.25) !important; }
/* unselected select looked pre-filled */
.form-select:not(:focus):has(option[value=""]:checked) { color: var(--color-text-muted); }

/* P1-12: dark-mode contrast set */
[data-theme="dark"] .dialect-phrase .ar { color: #EFF5F9 !important; }
[data-theme="dark"] svg[stroke="var(--color-teal)"] { stroke: #7FD1C0; }
[data-theme="dark"] .level-test-option { background: rgba(255,255,255,0.06); color: #E8EDF2; border-color: rgba(102,155,188,0.35); }
[data-theme="dark"] .level-test-option:hover { background: rgba(102,155,188,0.18); }
[data-theme="dark"] .level-test-option.is-selected { background: #669BBC; color: #0C1320; }
[data-theme="dark"] .student-nav-link { color: rgba(232,237,242,0.80); }
[data-theme="dark"] .student-panel-layout, [data-theme="dark"] .student-panel-main { background: transparent !important; }

/* P1-13: blog hero — calligraphy image fought the headline; stronger, more even scrim */
html[data-i18n-title="meta.blog.title"] .page-header { background-image: linear-gradient(115deg, rgba(28,28,46,0.94) 0%, rgba(16,42,68,0.88) 50%, rgba(16,42,68,0.78) 100%), url('../img/social/og_home.webp') !important; }

/* P1-14: dialect marquee hard-clipped at viewport edges */
.dialects-marquee-band .ta-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* P1-15: mobile footer — zigzag centering + excessive height */
@media (max-width: 480px) {
  .footer-links-grid { justify-items: start; }
  .footer-col-new { text-align: left; width: 100%; max-width: 280px; margin-inline: auto; }
  .footer-links-new a { padding: 5px 0; line-height: 1.45; display: inline-block; }
  .footer-links-new li { margin-bottom: 2px; }
}

/* P2-16: FAQ — dark mode now matches the light divider style (was boxed cards) */
[data-theme="dark"] .faq-list .faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(232,237,242,0.14) !important; border-radius: 0 !important; box-shadow: none !important; }
[data-theme="dark"] .faq-list .faq-item.open { background: transparent !important; border-bottom-color: rgba(232,237,242,0.26) !important; }
/* ═══════════ end v0.9.2 audit fixes ═══════════ */

/* v0.10.0: nav Login button joins the glassy pill family (was a heavy dark slab
   next to the theme/lang pills — user report). Overrides its inline styles. */
.nav-actions a.btn-outline[href*="student-panel.html"],
.nav-actions .btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  margin-right: var(--space-2) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  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;
  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, transform 180ms ease !important;
}
.nav-actions a.btn-outline[href*="student-panel.html"]:hover,
.nav-actions .btn-outline:hover,
.nav-actions .btn-outline: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;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}


/* ═══ v0.10.0 follow-ups (user screenshots) ═══ */
/* Course program cards: header band was #EFF5F9 with CREAM titles in BOTH themes
   (token soup). Decisive: navy band + cream title everywhere. */
html[data-i18n-title="meta.pricing.title"] .course-card-header,
body.pricing-page .course-card-header,
html[data-i18n-title="meta.pricing.title"] .course-card-icon,
body.pricing-page .course-card-icon {
  background: #14213D !important;
  color: #FDF0D5 !important;
  border-color: #14213D !important;
}
html[data-i18n-title="meta.pricing.title"] .course-card-header .course-card-title,
body.pricing-page .course-card-header .course-card-title { color: #FDF0D5 !important; }

/* Pricing dark contrast (still hard to read): promo title, discount note, labels, card CTAs */
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-promo-strip strong,
[data-theme="dark"] body.pricing-page .pricing-promo-strip strong,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-promo-strip b,
[data-theme="dark"] body.pricing-page .pricing-promo-strip b { color: #F3E9DA !important; }
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .pricing-discount-note,
[data-theme="dark"] body.pricing-page .pricing-discount-note {
  color: #E8A8C9 !important;
  background: rgba(232, 168, 201, 0.10) !important;
}
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .price-card .meta,
[data-theme="dark"] body.pricing-page .price-card .meta,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .price-card .price-unit,
[data-theme="dark"] body.pricing-page .price-card .price-unit { color: rgba(238, 244, 249, 0.78) !important; }
[data-theme="dark"] body.pricing-page .price-card:not(.featured) .btn,
html[data-theme="dark"][data-i18n-title="meta.pricing.title"] .price-card:not(.featured) .btn {
  border: 1px solid rgba(238, 244, 249, 0.34) !important;
  color: #F7F9FC !important;
}

/* Programme hero: a 560px/174px !important rule was beating the inline reduction —
   the hero rendered as a near-full-viewport empty slab. */
section.hero.programme-hero {
  min-height: 46vh !important;
  padding-top: 7.5rem !important;
  padding-bottom: 4.5rem !important;
}


/* v0.10.0 loop-iteration-2 fixes */
[data-theme="dark"] .blog-filter-btn:not(.active) { background: rgba(255, 255, 255, 0.06) !important; color: #E8EDF2 !important; border-color: rgba(102, 155, 188, 0.35) !important; }
/* faint hairline seam above dark bands in light mode (subpixel gradient gap) */
.tagline-banner, .footer-new { margin-top: -1px; }

/* ═══════════ v0.10.0 FLOAT-CANVAS + NAV CAPSULE + PROGRESSIVE BLUR (Faruk-approved plan) ═══════════ */

/* A. Nav controls: one shared glassy capsule (kills the half-cut shadow band) */
@media (min-width: 1241px) {
  .nav-actions {
    background:
      linear-gradient(135deg, rgba(232, 237, 242, 0.10), rgba(232, 237, 242, 0.03)),
      #131C2E;
    border: 1px solid rgba(232, 237, 242, 0.28);
    border-radius: 999px;
    padding: 5px 6px;
    margin-right: clamp(2px, 0.6vw, 10px);
    gap: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(7, 7, 12, 0.16);
  }
  .nav-actions a.btn-outline[href*="student-panel.html"],
  .nav-actions .btn-outline {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    margin-right: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .nav-actions a.btn-outline[href*="student-panel.html"]:hover,
  .nav-actions .btn-outline:hover,
  .nav-actions .btn-outline:focus-visible {
    background: rgba(232, 237, 242, 0.12) !important;
    border-color: rgba(232, 237, 242, 0.25) !important;
    transform: none;
  }
  .nav-actions .theme-toggle.ta-theme-toggle,
  .nav-actions .lang-switch-toggle,
  .nav-actions .lang-dropdown-toggle {
    box-shadow: none !important;
  }
}

/* B. Progressive blur under the floating navbar (KVA-style) */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 170px;
  pointer-events: none;
  z-index: 90;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.35) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.35) 62%, transparent 100%);
}

/* C. Floating sections on a continuous canvas (balanced: ~24-32px gutters, 24px radius) */
:root {
  --ta-canvas-gutter: clamp(16px, 2.6vw, 32px);
  --ta-canvas-radius: 24px;
  --ta-canvas-max: 1380px;
  --ta-canvas-gap: clamp(12px, 1.6vw, 22px);
}
html { background-color: #DEE6EF; }
html[data-theme="dark"] { background-color: #0A101C; }
body { background: transparent !important; }
/* canvas texture — faint blobs + dot grid that parallax against the scroll */
body::after {
  content: "";
  position: fixed;
  inset: -12% 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(640px 420px at 12% 18%, rgba(102, 155, 188, 0.10), transparent 70%),
    radial-gradient(560px 400px at 88% 64%, rgba(137, 52, 105, 0.06), transparent 70%),
    radial-gradient(rgba(16, 24, 40, 0.05) 1px, transparent 1.5px);
  background-size: auto, auto, 26px 26px;
  transform: translate3d(0, calc(var(--ta-canvas-shift, 0) * 1px), 0);
  will-change: transform;
}
html[data-theme="dark"] body::after {
  background-image:
    radial-gradient(640px 420px at 12% 18%, rgba(102, 155, 188, 0.09), transparent 70%),
    radial-gradient(560px 400px at 88% 64%, rgba(137, 52, 105, 0.07), transparent 70%),
    radial-gradient(rgba(232, 237, 242, 0.045) 1px, transparent 1.5px);
}
@media (prefers-reduced-motion: reduce) {
  body::after { transform: none; }
}

body > section,
main > section {
  width: min(var(--ta-canvas-max), calc(100% - 2 * var(--ta-canvas-gutter)));
  margin-inline: auto;
  margin-block: var(--ta-canvas-gap);
  border-radius: var(--ta-canvas-radius);
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.07);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.10);
  background-color: var(--color-white);
}
[data-theme="dark"] body > section,
[data-theme="dark"] main > section {
  border-color: rgba(232, 237, 242, 0.08);
  background-color: #101827;
}
[data-theme="dark"] body > section,
[data-theme="dark"] main > section {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}
/* sticky sidebar inside the student panel needs visible overflow */
#student-panel-app { overflow: visible; }
/* footer (incl. catchphrase band inside it) stays full-bleed by design */