/* ==========================================================================
   EasyUni Edu — Component Library v2
   Vibrant violet/cyan student theme. Buttons, cards, nav, hero, forms,
   badges, timeline, testimonials, FAQ, stats, footer, sticky CTA, modals.
   ========================================================================== */

/* ── 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: var(--weight-semibold);
  border-radius: var(--radius-full); border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all var(--duration-normal) var(--ease-out-expo);
  white-space: nowrap; user-select: none;
}

.btn-primary {
  background: var(--gradient-primary);
  background-clip: padding-box;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124,58,237,0.4), 0 0 0 3px rgba(124,58,237,0.1);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-ink);
  background: rgba(124,58,237,0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(124,58,237,0.08);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink-soft);
}
.btn-ghost:hover { color: var(--color-primary); background: rgba(124,58,237,0.06); transform: translateY(-1px); }

.btn-accent {
  background: var(--gradient-accent);
  background-clip: padding-box;
  color: #fff;
  box-shadow: 0 4px 16px rgba(244,63,94,0.3);
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(244,63,94,0.4), 0 0 0 3px rgba(244,63,94,0.1);
  color: #fff;
}

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

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; pointer-events: none; cursor: not-allowed;
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: var(--promo-offset, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  z-index: var(--z-sticky);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 68%, transparent);
  backdrop-filter: blur(14px) saturate(190%);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  height: var(--nav-height);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, width 0.4s cubic-bezier(0.16,1,0.3,1), top 0.4s cubic-bezier(0.16,1,0.3,1);
}
.navbar.scrolled {
  top: 16px;
  width: 90%;
  max-width: 1200px;
  min-height: 64px;
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 76%, transparent);   /* heavier tint for the
     floating pill: it sits over arbitrary scrolled content, so it needs more separation */
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  border-radius: 16px;
  /* one shadow, not two: this pair used to be a duplicate (the second silently won) and its
     inner sheen was a hard 60% white, which reads as a bright line in dark mode. Kept the violet
     glow, softened the top-edge sheen to something that reads as light catching glass. */
  box-shadow: 0 8px 40px rgba(124,58,237,0.10), 0 2px 8px rgba(0,0,0,0.04),
              inset 0 1px 0 rgba(255,255,255,0.14);
}
.navbar.scrolled .nav-inner {
  padding: 0 var(--space-5);
}
.navbar.scrolled .nav-actions {
  gap: var(--space-2);
}
.navbar.scrolled .nav-actions::before {
  display: none;
}
.navbar.scrolled .nav-cta {
  padding: 6px 14px;
  font-size: 0.8rem;
}
.navbar.scrolled .auth-login,
.navbar.scrolled .nav-cta-alt {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.nav-inner {
  max-width: 1320px; margin: 0 auto;
  height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--space-5);
}
.nav-links-wrap { grid-column: 2; }
.nav-actions { grid-column: 3; justify-self: end; }

/* ── Brand wordmark ────────────────────────────────────────────────────────
   Text-only lockup: "Easy" in ink + "Uni" in brand violet, with a violet→cyan
   underline that wipes in on hover. The .brand link used to hold an <img>
   lockup; the `.brand img` rules just below still cover that case if a logo is
   ever put back.
   `justify-self: start` matters: .nav-inner is a 1fr grid, so without it the
   link stretches across its whole column and the hover underline would run
   to the middle of the navbar instead of hugging the word. */
.brand {
  display: inline-flex; align-items: center; gap: 0;
  justify-self: start; width: max-content; white-space: nowrap;
  /* Hard clearance from the first nav link. .nav-inner's first column is a
     1fr track whose implicit minimum is this item's min-content contribution,
     so the margin is the only thing that stops the collapsed column from
     letting the wordmark butt up against "Home" in the narrower scrolled
     pill (measured 11px without it, 0px at 1024px wide). */
  margin-right: var(--space-6);
  font-weight: var(--weight-extrabold); font-size: 1.45rem;
  letter-spacing: -0.035em; line-height: 1;
  color: var(--color-ink); text-decoration: none;
  position: relative;
  transition: font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-easy { color: var(--color-ink); }
/* Solid violet, deliberately NOT background-clip:text: clipped gradient text
   inside a backdrop-filter ancestor (the navbar blurs) shimmers / repaints
   while the bar animates on scroll in Chromium. The two-tone lockup stays. */
.brand-uni { color: var(--color-primary); }

/* Scrolled pill: the links drop to 0.84rem and the CTAs to 0.8rem while the
   navbar animates to 90% width. The wordmark has to shrink with them —
   otherwise it stays 1.45rem and reads as oversized text shifting around
   mid-scroll. */
.navbar.scrolled .brand { font-size: 1.2rem; }

.brand::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, #06B6D4 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand:hover::after,
.brand:focus-visible::after { transform: scaleX(1); }

.brand img {
  height: 40px; width: auto; display: block; max-width: none;
}

/* ── Navbar separator line ──────────────────────────────────────────────── */
.navbar::after {
  content: '';
  position: absolute; bottom: 0; left: 8%; right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(99,102,241,0.08) 10%,
    rgba(99,102,241,0.18) 30%, 
    rgba(99,102,241,0.45) 50%, 
    rgba(99,102,241,0.18) 70%,
    rgba(99,102,241,0.08) 90%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(99,102,241,0.2), 0 1px 0 rgba(255,255,255,0.5);
  border-radius: 1px;
}

@media (max-width: 768px) {
  .brand { font-size: 1.25rem; letter-spacing: -0.03em; }
  .brand img { height: 34px; margin-top: 0; }
}

.brand-mark {
  width: 36px; height: 36px;
  background: var(--gradient-primary);
  color: #fff; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-extrabold); font-size: var(--text-lg);
}

.nav-links-wrap { display: flex; align-items: center; gap: var(--space-5); }
.nav-links { display: flex; gap: var(--space-2); }
.nav-links a {
  font-size: 0.84rem; font-weight: var(--weight-semibold);
  color: var(--color-ink-soft); text-decoration: none;
  padding: 5px 13px;
  white-space: nowrap;
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 35%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.nav-links a:hover {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 55%, transparent);
  border-color: rgba(99,102,241,0.25);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(99,102,241,0.15);
}
.nav-links a.active,
.nav-links a.nav-active {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 65%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
  font-weight: 700;
}

/* Scrolled — nav links on lavender glass */
.navbar.scrolled .nav-links a {
  color: var(--color-ink-soft);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 50%, transparent);
  border-color: rgba(255,255,255,0.6);
}
.navbar.scrolled .nav-links a:hover {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 70%, transparent);
  border-color: rgba(99,102,241,0.25);
  color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(99,102,241,0.1), 0 1px 3px rgba(0,0,0,0.04);
}

.navbar.scrolled .nav-links a.nav-active,
.navbar.scrolled .nav-links a.active {
  color: var(--color-primary);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 65%, transparent);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
  font-weight: 700;
}

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

.nav-actions > a,
.nav-actions > button {
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-actions::before {
  content: '';
  width: 1px; height: 24px;
  background: linear-gradient(180deg, transparent, rgba(99,102,241,0.3), transparent);
  margin-right: var(--space-2);
  flex-shrink: 0;
}

.auth-guest {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: all var(--duration-fast);
  position: relative;
}
.auth-login {
  background: transparent;
  color: var(--color-ink-soft);
  border: 1.5px solid rgba(99,102,241,0.25);
}
.auth-login:hover {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.6);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.1), 0 0 0 3px rgba(99,102,241,0.08);
}
.nav-cta-alt {
  background: var(--gradient-primary);
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25), 0 0 0 3px rgba(99,102,241,0.06);
}
.nav-cta-alt:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(99,102,241,0.45), 0 0 0 5px rgba(99,102,241,0.1);
}

.navbar.scrolled .auth-login {
  background: transparent;
  border-color: rgba(99,102,241,0.3);
  color: var(--color-primary);
}

.nav-cta {
  background: var(--gradient-primary);
  color: #fff !important;
  padding: 6px 13px;
  border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(124,58,237,0.35), 0 0 0 3px rgba(124,58,237,0.1);
}

/* Logged-in nav state (Firebase): Dashboard (primary pill) + Log Out (ghost pill) */
.nav-dashboard {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-decoration: none;
  background: var(--gradient-primary);
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25), 0 0 0 3px rgba(99,102,241,0.06);
  transition: all var(--duration-fast);
}
.nav-dashboard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(99,102,241,0.45), 0 0 0 5px rgba(99,102,241,0.1);
}
.nav-logout-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  font-family: inherit;
  background: transparent;
  color: var(--color-ink-soft);
  border: 1.5px solid rgba(99,102,241,0.25);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.nav-logout-btn:hover {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.6);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.1), 0 0 0 3px rgba(99,102,241,0.08);
}

.menu-toggle {
  display: none; background: none; border: 0;
  font-size: 1.5rem; color: var(--color-ink);
  cursor: pointer; padding: var(--space-2);
  /* line-height:1 + grid centring: the box was already vertically centred, but
     a `block` box with `line-height: normal` paints the ☰ at the TOP of its
     48px, so the glyph read as sitting above the wordmark (caught on an iPad
     screenshot, invisible to rect-based measurement). */
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Desktop nav layout (v1.11)
   `.nav-actions` lives INSIDE `.nav-links-wrap`, so on desktop the wrap was a single grid
   item occupying the middle column and the grid's third column - the one reserved for the
   actions - stayed empty. Measured blank space on the right: 135px @1280, 215px @1440,
   295px @1600, growing with the viewport, and the CTA cluster drifted with the link width
   instead of sitting flush right. Raising the wrap's children to grid items restores the
   layout the existing `.nav-actions { grid-column: 3; justify-self: end }` rule assumes:
   brand left, links centred, actions flush right, at every width.
   Scoped to >=1261px - below that the wrap is the off-canvas drawer and must stay a box.
   -------------------------------------------------------------------------- */
@media (min-width: 1261px) {
  .nav-links-wrap { display: contents; }
}

/* ── Nav collapse (drawer) ─────────────────────────────────────────────────
   Breakpoint is 1260px, not 900px, because that is where the desktop row
   actually stops fitting: brand column 112px + links/actions 1005px + 40px
   padding = 1157px unscrolled, and the scrolled pill is only 90% of the
   viewport (so it needs ~1252px of viewport). Below that the grid goes
   over-constrained, the right-hand pills spill past the navbar edge (measured
   212px past it at 1024px in the scrolled state, i.e. "Sign Up" clipped off
   screen) and the brand is squeezed against "Home". Verified with a headless
   browser across 1600/1440/1280/1152/1024 x top/scrolled. */
@media (max-width: 1260px) {
  /* The toggle is a direct child of .nav-inner, whose grid is `1fr auto 1fr`. That middle
     track belonged to .nav-links-wrap; at <=1260px the wrap is position:fixed (off-canvas),
     so it vacates the track and the toggle auto-places into it - measured dead centre of the
     bar (x=175 in a 393px bar, centre 197). Pin it to the last column and to the right edge. */
  .menu-toggle { display: grid; place-items: center; grid-column: 3; justify-self: end; }
  .navbar .brand { grid-column: 1; justify-self: start; }
  .nav-links-wrap {
    position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: flex-start; gap: var(--space-6);
    background: var(--color-bg-card);
    background: color-mix(in srgb, var(--color-bg-card) 96%, transparent);   /* was hardcoded
       rgba(238,242,255,0.95): a light panel with dark-mode ink on it, i.e. unreadable */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: var(--space-8) var(--space-6);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out-expo);
    z-index: var(--z-overlay);
  }
  /* Off-canvas hygiene: `translateX(-100%)` only moves it by its own width, and because the
     navbar is the containing block that leaves a ~20px sliver of the closed panel on screen
     next to the scrolled pill (invisible in dark mode, a white strip in light mode). visibility
     also keeps the closed menu out of the tab order. */
  .nav-links-wrap {
    visibility: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                visibility 0s linear var(--duration-normal);
  }
  .nav-links-wrap.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--duration-normal) var(--ease-out-expo), visibility 0s;
  }
  .nav-links { flex-direction: column; gap: var(--space-4); width: 100%; }
  .nav-actions { flex-direction: column; width: 100%; gap: var(--space-3); margin-top: var(--space-6); }

  /* Touch targets.
     These serve the drawer at every width it is used (≤1260px).
     Measured on a 375px viewport before this block: nav links were 22px tall,
     "Sign Up" 32px and "Log In" 35px. Apple's HIG asks for 44px and Android's
     Material for 48dp; below roughly 40px, mis-taps rise sharply — and in a
     vertical drawer a mis-tap means landing on the adjacent item, not on
     nothing. These are full-width rows in a drawer, so there is no layout cost
     to making them the right size; the previous values were simply inherited
     from the desktop pill styling. */
  .nav-links a,
  .nav-actions > a,
  .nav-actions > button {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    font-size: var(--text-lg);
    padding: var(--space-2) var(--space-3);
    box-sizing: border-box;
  }
  .nav-actions > a,
  .nav-actions > button { justify-content: center; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  margin-top: 0;
  padding-top: calc(var(--nav-height) + var(--space-20));
  background: var(--color-bg);
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: var(--space-16);
}

.hero-copy { max-width: 560px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-primary); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--space-4);
}

.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary);
  animation: badgePulse 2s infinite;
}

.hero-title {
  font-size: var(--text-6xl); font-weight: var(--weight-extrabold);
  line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  color: var(--color-ink);
}

.hero-highlight {
  background: var(--gradient-hero);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-logo {
  margin-bottom: 0;
}
.hero-logo img {
  height: 120px; width: auto; display: block;
  filter: drop-shadow(0 4px 24px rgba(99,102,241,0.25)) drop-shadow(0 0 60px rgba(99,102,241,0.10));
  transition: filter 0.6s ease, transform 0.6s ease;
}
.hero-logo img:hover {
  filter: drop-shadow(0 6px 32px rgba(99,102,241,0.35)) drop-shadow(0 0 80px rgba(99,102,241,0.18));
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .hero-logo img { height: 80px; }
}

.hero-subtitle {
  font-size: var(--text-lg); font-weight: var(--weight-medium);
  color: var(--color-ink-soft); line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6); margin-top: var(--space-3);
  letter-spacing: -0.01em;
}

.hero-tags {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.hero-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-radius: var(--radius-full);
  color: var(--color-ink-soft);
}

.hero-cta {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}
.hero-cta:hover {
  background: #111 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25), 0 0 0 3px rgba(99,102,241,0.2) !important;
}

.hero-trust {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-5);
}
.hero-trust-item {
  /* --color-ink-muted measured 4.15:1 on the glass pill (needs 4.5 for 12px);
     ink-soft is 7.6:1 light / 8.4:1 dark. */
  font-size: var(--text-xs); color: var(--color-ink-soft);
  font-weight: var(--weight-medium);
}

.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; gap: var(--space-8);
}

/* ── LOCKED HERO COMPOSITION ─────────────────────────────────────────────
   The girl image, the hand, and the "ABC.. University" card are ONE unit.
   To move or scale all three together, edit the three knobs below — do NOT
   reposition the three children independently.
     --hero-zoom     scale (1 = current size, 1.1 = 10% bigger, 0.9 = smaller)
     --hero-shift-x  horizontal move
     --hero-shift-y  vertical move */
.hero-composition {
  position: relative;
  width: 100%;
  --hero-zoom: 1;
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  transform: scale(var(--hero-zoom)) translate(var(--hero-shift-x), var(--hero-shift-y));
  transform-origin: center center;
}

/* The girl cut-out must sit physically identically in LTR and RTL. The 600px
   img lives inside a 560px block `<picture>`, so its block-level overflow side
   follows `direction` (right in LTR, left in RTL) — which would tear the locked
   girl+hand+card composition apart. Force LTR here so the overflow is always
   on the right, keeping Arabic/Urdu identical to English. */
.hero-model-bg {
  position: absolute;
  inset: -230px 0 -60px 0;
  display: flex; align-items: flex-start; justify-content: center;
  direction: ltr;
  z-index: 1;
  pointer-events: none;
}
.hero-model-bg .hero-model-img {
  max-height: 1150px; width: auto; max-width: 190%;
  display: block;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 8px 32px rgba(99,102,241,0.12));
}

.hero-card-stack {
  position: relative;
  z-index: 3;
  width: 100%; max-width: 400px;
  margin: 0 auto;
  transform: scale(0.70) translateX(95px) translateY(60px);
  transform-origin: center center;
}

.hero-card {
  background: var(--color-bg-card); border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  position: relative;
}

.hero-card-1 { z-index: 3; }
.hero-card-2 {
  position: absolute; top: 24px; left: 24px; right: -24px; bottom: -24px;
  z-index: 1; opacity: 0.6; transform: scale(0.95);
  filter: blur(1px);
}

/* Hand image — right side of card.
   top is a FIXED px (56% of the 263px English card height ≈ 147px), NOT a %.
   A % resolves against .hero-composition's height, which is driven by the
   card's translated text height and therefore changes per language — that
   drifted the hand ~9px in Arabic/Urdu and disconnected it from the girl.
   Fixed px keeps the locked girl+hand+card unit pixel-identical in every
   language, matching the girl's fixed `inset` anchoring. */
.hero-hand-right {
  position: absolute;
  top: 147px; right: -30px;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: none;
}
.hero-hand-img {
  max-height: 210px; width: auto;
  display: block;
}

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-10); }
  .hero-copy { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-title { font-size: var(--text-4xl); }
  .hero-visual { display: none; }
  .hero-eyebrow { justify-content: center; margin-left: auto; margin-right: auto; }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section { padding: var(--space-20) var(--space-6); }
.section-inner { max-width: var(--container-max); margin: 0 auto; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-bg-dark); color: var(--color-ink-inverse); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.section-header h2 { margin-bottom: var(--space-4); }

/* ── Stylish section header ─────────────────────────────────────────────── */
.section-header-stylish h2 {
  font-size: 2.4rem; font-weight: 800; letter-spacing: -0.5px;
  line-height: 1.3;
}
.text-gradient {
  background: linear-gradient(135deg, #7C3AED, #EC4899, #F59E0B);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-ornament {
  width: 60px; height: 3px;
  margin: var(--space-4) auto;
  background: linear-gradient(90deg, transparent, #7C3AED, #EC4899, #7C3AED, transparent);
  border-radius: 2px;
}
.section-header-stylish p {
  font-size: 1.05rem; color: var(--color-ink-soft); max-width: 480px; margin: 0 auto;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

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

/* ── Stats strip (below hero) — glassy elevated bar ───────────────────── */
.stats-strip {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 18%, transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  margin: -50px auto 0;
  max-width: 1100px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 32px rgba(124,58,237,0.12),
              0 1px 4px rgba(0,0,0,0.06),
              inset 0 1px 0 rgba(255,255,255,0.7);
}
.stats-strip-inner {
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-evenly;
  gap: var(--space-2);
}
.stats-strip-item {
  text-align: center;
  flex: 1;
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease-out-expo), background 0.3s ease;
}
.stats-strip-item:hover {
  background: rgba(124,58,237,0.06);
  transform: translateY(-2px);
}
.stats-strip-icon {
  font-size: 1.4rem;
  margin-bottom: var(--space-1);
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(236,72,153,0.08));
  border: 1px solid rgba(124,58,237,0.15);
}
.stats-strip-number {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 30%, #EC4899 70%, #F59E0B 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-1);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stats-strip-label {
  font-size: var(--text-xs);
  color: var(--color-ink-soft);   /* muted measured ~3:1 on the glass strip at 12px */
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stats-strip-divider {
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, rgba(124,58,237,0.12), transparent);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .stats-strip {
    margin: var(--space-6) auto 0;
    border-radius: var(--radius-xl);
    max-width: calc(100% - 2rem);
  }
  .stats-strip-inner { flex-wrap: wrap; gap: var(--space-6); }
  .stats-strip-item { flex: 1 1 40%; }
  .stats-strip-divider { display: none; }
}

@media (max-width: 480px) {
  .stats-strip-item { flex: 1 1 100%; }
}

/* ── Stats glass card grid — 4 cards in a row ────────────────────────────── */
.stats-glass-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  max-width: 1000px;
  margin: var(--space-8) auto 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .stats-glass-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 480px) {
  .stats-glass-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

/* ── CTA card ──────────────────────────────────────────────────────────── */
.cta-card {
  text-align: center;
  background: var(--gradient-dark);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--space-16) var(--space-8);
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 60% 30%, rgba(124,58,237,0.2), transparent 60%);
  pointer-events: none;
}

.cta-card h2 { color: #fff; margin-bottom: var(--space-4); }
.cta-card p { color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto var(--space-8); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-5); }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-2); color: var(--color-ink-soft); }

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

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

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

/* ── Testimonials ──────────────────────────────────────────────────────── */
.testi-carousel {
  overflow: hidden; position: relative;
  padding: var(--space-3) 0;
}
/* Fade edges */
.testi-carousel::before,
.testi-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.testi-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-bg-alt), transparent);
}
.testi-carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-bg-alt), transparent);
}
.testi-track {
  display: flex; gap: var(--space-6);
  width: max-content;
  padding: var(--space-2) 0;
}
.testimonial-card {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 25%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  flex-shrink: 0; width: 340px;
  box-shadow: 0 8px 32px rgba(124,58,237,0.06), 0 2px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 40%, transparent);
  box-shadow: 0 16px 48px rgba(124,58,237,0.14), 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}
.testi-stars {
  font-size: 1rem; color: var(--color-warning-text); margin-bottom: var(--space-3);
  letter-spacing: 2px;
}
.testimonial-text {
  font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

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

.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold); font-size: var(--text-sm);
}

.testimonial-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.testimonial-role { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* ── FAQ accordion ─────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }

.faq-item {
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 25%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(124,58,237,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
}

.faq-question {
  width: 100%; padding: var(--space-5) var(--space-6);
  display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0;
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-ink); cursor: pointer;
  text-align: left;
}

.faq-question::after {
  content: '+'; font-size: 1.25rem; color: var(--color-primary);
  font-weight: var(--weight-normal); transition: transform var(--duration-fast);
}

.faq-item.open .faq-question::after { content: '−'; }

.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-out-expo);
}

.faq-item.open .faq-answer { max-height: 500px; }

.faq-answer-inner {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-ink-soft); font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ── Timeline / process steps ──────────────────────────────────────────── */
.timeline { position: relative; padding-left: var(--space-8); }
.timeline::before {
  display: none;
}

.timeline-step { 
  position: relative; margin-bottom: var(--space-10); padding-left: var(--space-8);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 45%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-8) + var(--space-5));
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 16px rgba(124,58,237,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.timeline-step:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 24px rgba(124,58,237,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}

.timeline-step::before {
  content: attr(data-step);
  position: absolute; left: -24px; top: 50%;
  width: 48px; height: 48px;
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 15%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: var(--color-primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%);
  font-size: 1.1rem; font-weight: var(--weight-extrabold);
  z-index: 1;
  box-shadow:
    0 4px 24px rgba(124,58,237,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(124,58,237,0.1);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.timeline-step:hover::before {
  transform: translateY(-50%) scale(1.15);
  background: rgba(124,58,237,0.12);
  box-shadow:
    0 8px 32px rgba(124,58,237,0.25),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(124,58,237,0.15);
}

.timeline-step:last-child { margin-bottom: 0; }

.timeline-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.timeline-step p { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* ── Badges / tags ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.badge-primary { background: rgba(124,58,237,0.1); color: var(--color-primary); }
.badge-cyan    { background: rgba(6,182,212,0.1); color: var(--color-secondary-text); }
.badge-accent  { background: rgba(244,63,94,0.1); color: var(--color-accent); }
.badge-success { background: rgba(16,185,129,0.1); color: var(--color-success-text); }

/* ── University & scholarship cards ────────────────────────────────────── */
.uni-card, .scholar-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: box-shadow var(--duration-normal), transform var(--duration-normal);
}

.uni-card:hover, .scholar-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--color-primary-light);
}

/* ── Dynamic card internals (created by JS) ────────────────────────────── */
.scholarship-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border);
}

.uni-card-top, .scholar-card-top {
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uni-card-logo {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-bg-card);
  padding: 3px;
}

.uni-card-idx, .scholar-card-idx {
  width: 32px; height: 32px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.uni-card-body, .scholar-card-body {
  margin-bottom: var(--space-3);
}

.uni-card-badge {
  display: inline-block;
  background: rgba(124,58,237,0.08);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.uni-uni, .scholar-uni {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.uni-program, .scholar-program {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-relaxed);
}

.uni-card-footer, .scholar-card-footer {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

/* ── Filter chips ──────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.filter-chip {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--duration-fast);
}

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

.filter-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Program cards ─────────────────────────────────────────────────────── */
.program-card {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 25%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  cursor: pointer;
  transition: all var(--duration-normal);
  box-shadow:
    0 8px 32px rgba(124,58,237,0.06),
    0 2px 8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.15);
}

.program-card:hover {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 45%, transparent);
  border-color: rgba(255,255,255,0.6);
  box-shadow:
    0 12px 40px rgba(124,58,237,0.15),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.25);
  transform: translateY(-4px);
}

.card-includes {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-xs); color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

/* ── Pricing cards ─────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6); max-width: 960px; margin: 0 auto;
}
.pricing-card {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 25%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(124,58,237,0.06), 0 2px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, background 0.35s ease;
}
.pricing-card:hover {
  transform: translateY(-6px);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 40%, transparent);
  box-shadow: 0 20px 56px rgba(124,58,237,0.16), 0 6px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
.pricing-card .btn {
  margin-top: auto;
}
.pricing-premium {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 8px 32px rgba(124,58,237,0.12);
}
.pricing-badge {
  display: inline-block;
  padding: 3px 12px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  background: rgba(124,58,237,0.08); color: var(--color-primary);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.pricing-badge-hot {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.pricing-price {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: var(--weight-extrabold);
  color: var(--color-ink);
  line-height: 1; margin-bottom: var(--space-1);
  letter-spacing: -0.03em;
}
.pricing-label {
  font-size: var(--text-sm); color: var(--color-ink-muted);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}
.pricing-features {
  list-style: none; padding: 0;
}
.pricing-features {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-6);
}
/* Circled tick drawn with ::before rather than a literal "✓ " in the markup,
   so the check stays aligned to the first line when a feature wraps onto two
   lines and screen readers don't announce a stray character per item. */
.pricing-features li {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) 28px;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background:
    /* tick */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px 11px no-repeat;
}
/* Featured card inherits the accent so the tick doesn't clash with its border. */
.pricing-card .btn { margin-top: auto; }
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
  background: var(--color-bg-dark);
  /* NOT --color-ink-inverse: the footer bar is dark in BOTH themes, but the
     inverse token flips to near-black in dark mode → dark-on-dark footer text
     (measured 2.5:1, and the vision check called it "too faint to read"). */
  color: var(--color-ink-on-dark);
  padding: var(--space-16) var(--space-6) var(--space-8);
}

.footer-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
}

.footer-brand { font-size: var(--text-xl); font-weight: var(--weight-extrabold); margin-bottom: var(--space-4); }

.footer-desc { color: rgba(255,255,255,0.62); font-size: var(--text-sm); max-width: 280px; }

footer h4 { color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: 0.05em; }

footer a, footer span {
  display: block; color: rgba(255,255,255,0.62); font-size: var(--text-sm);
  margin-bottom: var(--space-2); text-decoration: none;
  transition: color var(--duration-fast);
}
footer a:hover { color: #fff; }

.footer-social {
  display: flex; gap: 12px; margin-top: 12px;
}
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.social-icon:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  transform: translateY(-2px);
}

.footer-bottom {
  max-width: var(--container-max); margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between;
  font-size: var(--text-xs); color: rgba(255,255,255,0.62);   /* 0.3 measured 2.5:1 on the dark footer bar */
}

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

/* ── Promo banner ─────────────────────────────────────────────────────── */
.promo-banner {
  background: linear-gradient(135deg, #FF1A3A, #DC143C, #B22222, #C8102E, #E8193A, #FF1A3A, #DC143C, #B22222);
  background-size: 400% 400%;
  animation: bannerFluid 6s linear infinite;
  color: #fff; text-align: center;
  padding: 5px var(--space-4);
  font-size: 0.78rem; font-weight: var(--weight-bold);
  letter-spacing: 0.2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0 2px 16px rgba(220,20,60,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative; overflow: hidden; z-index: 1;
}
@keyframes bannerFluid {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}
.promo-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: bannerSheen 3s linear infinite;
  pointer-events: none; z-index: 1;
}
@keyframes bannerSheen {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
.promo-banner-inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); flex-wrap: nowrap;
  width: 100%; position: relative;
}
.promo-marquee {
  flex: 1; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.promo-marquee-track {
  display: flex;
  will-change: transform;
  animation: marqueeScroll 20s linear infinite;
}
.promo-marquee-track span {
  display: inline-block; flex-shrink: 0;
  padding-right: 5rem;
  font-size: 0.85rem; white-space: nowrap;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-66.66%); }
}

/* Static content — visible only on hover */
.promo-static {
  display: none;
  align-items: center; gap: var(--space-5);
}
.promo-banner:hover .promo-marquee { display: none; }
.promo-banner:hover .promo-static { display: flex; }
.promo-banner:hover .promo-marquee-track { animation-play-state: paused; }

.promo-banner-cta {
  background: rgba(255,255,255,0.22); color: #fff;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: var(--weight-bold);
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 18px rgba(255,255,255,0.15);
  animation: ctaPulse 2s ease-in-out infinite;
  transition: all var(--duration-fast);
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,255,255,0.12); transform: scale(1); }
  50%      { box-shadow: 0 0 28px rgba(255,255,255,0.28); transform: scale(1.04); }
}
.promo-banner-cta:hover {
  background: rgba(255,255,255,0.38); color: #fff;
  box-shadow: 0 0 32px rgba(255,255,255,0.4);
  animation: none; transform: scale(1.06);
}

/* ── WhatsApp float ────────────────────────────────────────────────────── */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: #25D366; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; box-shadow: var(--shadow-lg);
  z-index: var(--z-sticky);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-back);
}
.whatsapp-float:hover { transform: scale(1.1); }

/* ── Theme toggle (light / dark / system) ─────────────────────────────────
   Fourth and topmost button in the fixed bottom-right column. The stack, from
   the bottom up, is:
       whatsapp-float   bottom 24px   56px tall  ->  24–80
       back-to-top      bottom 92px   48px tall  ->  92–140
       lang-widget      bottom 160px  50px tall  -> 160–210
       theme-toggle     bottom 222px  44px tall  -> 222–266
   Change one and check the others; they share a column and nothing enforces
   the spacing but these numbers. */
.theme-toggle {
  position: fixed;
  bottom: 222px;
  right: 24px;
  z-index: 950;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-out-back),
              box-shadow var(--duration-fast) ease,
              background var(--duration-fast) ease;
}
.theme-toggle:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--shadow-lg);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Phones: the column is tight and the on-screen keyboard eats the lower half,
   so the toggle moves up out of the thumb zone rather than stacking further. */
@media (max-width: 560px) {
  .theme-toggle { bottom: auto; top: 76px; width: 40px; height: 40px; font-size: 17px; }
}

/* ── Sticky CTA bar ───────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--color-bg-card); border-top: 1px solid var(--color-border-light);
  padding: var(--space-4); text-align: center;
  z-index: var(--z-sticky);
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-inner {
  display: inline-block;
  background: var(--gradient-primary);
  color: #fff; padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold); font-size: var(--text-sm);
  text-decoration: none;
}

/* ── Quiz ──────────────────────────────────────────────────────────────── */
.quiz-container {
  max-width: 520px; margin: 0 auto;
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 25%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(124,58,237,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  padding: var(--space-8);
}

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

.quiz-option,
.quiz-choice {
  width: 100%; padding: var(--space-4) var(--space-5);
  background: var(--color-bg-alt); border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  cursor: pointer; text-align: left;
  color: var(--color-ink);
  font-family: inherit;
  transition: all var(--duration-fast);
}
.quiz-option:hover,
.quiz-choice:hover {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(6,182,212,0.04));
  transform: translateX(4px);
}
.quiz-option:focus-visible,
.quiz-choice:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Cost calculator ───────────────────────────────────────────────────── */
.calc-card {
  max-width: 780px; margin: 0 auto;
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 25%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(124,58,237,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: var(--space-8);
}

.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.calc-field { margin-bottom: 0; }
.calc-field .form-label { font-weight: var(--weight-semibold); }

.calc-select {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' 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 var(--space-4) center;
  background-size: 16px 16px;
  padding-right: var(--space-10);
}

.calc-currency {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.calc-currency-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-soft); }

.calc-toggle {
  display: inline-flex; gap: 4px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px;
}
.calc-toggle-btn {
  border: none; background: transparent; cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-ink-soft); font-family: inherit;
  transition: all var(--duration-fast);
}
.calc-toggle-btn:hover { color: var(--color-ink); }
.calc-toggle-btn.active {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

.calc-results {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}
.calc-total-block {
  text-align: center;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--gradient-card);
  border: 1px solid rgba(124,58,237,0.12);
  border-radius: var(--radius-lg);
}
.calc-total-label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}
.calc-total {
  font-size: 3.25rem; font-weight: var(--weight-extrabold);
  line-height: 1.05; margin: var(--space-2) 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.calc-total-sub { font-size: var(--text-sm); color: var(--color-ink-soft); font-weight: var(--weight-medium); }

.calc-save {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--radius-full);
  color: #059669;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.calc-save[hidden] { display: none; }

.calc-breakdown {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); margin-bottom: var(--space-5);
}
.calc-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.calc-item-icon { font-size: 1.5rem; line-height: 1; }
.calc-item-label {
  font-size: var(--text-xs); color: var(--color-ink-muted);
  font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em;
}
.calc-item-value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-ink); }

.calc-note { text-align: center; font-size: var(--text-xs); color: var(--color-ink-muted); margin: 0 0 var(--space-4); }

.calc-cta { display: block; max-width: 320px; margin: 0 auto; text-align: center; }

.calc-scholarships {
  max-width: 780px; margin: var(--space-8) auto 0;
  text-align: center;
}
.calc-scholarships-head { margin-bottom: var(--space-6); }
.calc-scholarships-head h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.calc-scholarships-head p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }

.calc-scholarship-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4); text-align: left;
}
.calc-scholarship-card {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 55%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.calc-scholarship-name { font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--color-ink); }
.calc-scholarship-type {
  font-size: var(--text-xs); color: var(--color-primary);
  font-weight: var(--weight-semibold); margin: var(--space-1) 0 var(--space-2);
}
.calc-scholarship-coverage { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.6; }

@media (max-width: 720px) {
  .calc-scholarship-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .calc-fields { grid-template-columns: 1fr; }
  .calc-breakdown { grid-template-columns: 1fr; }
  .calc-total { font-size: 2.5rem; }
}

/* ── Auth gate ─────────────────────────────────────────────────────────── */
.auth-gate {
  min-height: calc(100vh - var(--nav-height) - 100px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8);
}

.auth-gate-card {
  width: 100%; max-width: 440px;
  background: var(--color-bg-card); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-light);
  padding: var(--space-10);
}

.auth-gate-card h2 { text-align: center; margin-bottom: var(--space-2); }
.auth-gate-card .sub { text-align: center; color: var(--color-ink-muted); margin-bottom: var(--space-8); font-size: var(--text-sm); }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
.dashboard-shell {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 240px 1fr;
  min-height: calc(100vh - var(--nav-height));
}

.dashboard-sidebar {
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border-light);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}

.dashboard-main { padding: var(--space-8); }

.dashboard-nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-ink-soft); border: 0; background: none;
  cursor: pointer; width: 100%; text-align: left;
  transition: all var(--duration-fast);
}
.dashboard-nav-link:hover { background: rgba(124,58,237,0.06); color: var(--color-ink); }
.dashboard-nav-link.active { background: var(--color-primary); color: #fff; font-weight: var(--weight-semibold); }

.tab-panel { min-height: 400px; }
.tab-panel.hidden { display: none !important; }

@media (max-width: 768px) {
  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-sidebar {
    position: fixed; top: var(--nav-height); left: 0; bottom: 0;
    width: 260px; transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out-expo);
    z-index: var(--z-overlay); box-shadow: var(--shadow-xl);
  }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-main { padding: var(--space-6); }
}

/* ── Admin table ───────────────────────────────────────────────────────── */
.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--color-bg-card); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}

.admin-table th {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-ink-muted); text-transform: uppercase;
  letter-spacing: 0.05em; background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border-light);
}

.admin-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-light);
}

.admin-table tr:last-child td { border-bottom: 0; }

/* ── Notifications panel ──────────────────────────────────────────────── */
.notifications-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--color-bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); border: 1px solid var(--color-border-light);
  padding: var(--space-4);
  z-index: var(--z-overlay);
}

.notifications-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* ── Skeleton loaders ─────────────────────────────────────────────────── */
.skeleton-row { height: 16px; margin-bottom: var(--space-3); }
.skeleton-row:last-child { margin-bottom: 0; width: 60%; }

/* ── Utility: glass backdrop ──────────────────────────────────────────── */
.glass {
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.3);
}

/* ── Pricing toggle ──────────────────────────────────────────────────── */
.pricing-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-bg-alt); border-radius: var(--radius-full);
  padding: var(--space-1);
}

.pricing-toggle button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); border: 0;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  background: transparent; color: var(--color-ink-soft);
  cursor: pointer; transition: all var(--duration-fast);
}
.pricing-toggle button.active {
  background: var(--color-bg-card); color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
/* ── Back-to-Top Button ───────────────────────────────── */
.back-to-top {
    position: fixed; bottom: 92px; right: 24px;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #EC4899);
    color: #fff; border: 0; cursor: pointer;
    font-size: 22px; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
    transform: translateY(12px);
    z-index: 999;
    box-shadow: 0 4px 20px rgba(124,58,237,0.35);
}
.back-to-top.visible {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 28px rgba(124,58,237,0.5);
}


/* ── Save / bookmark button (assets/js/saved-programs.js) ────────────────
   Shared by /universities/ (absolute, card top-right) and /programs/ (inline
   at the row end via .prog-save). Both write through window.EasyUniSaved. */
.uni-save-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--color-bg-card) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #7C3AED);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 0 0 3px var(--accent-light, rgba(124,58,237,0.08));
}
.uni-save-btn .uni-save-icon {
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.uni-save-btn:hover {
  transform: scale(1.1);
  border-color: var(--accent, #7C3AED);
  background: var(--accent, #7C3AED);
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-glow, rgba(124,58,237,0.25));
}
.uni-save-btn:active {
  transform: scale(0.92);
}
.uni-save-btn:disabled {
  cursor: default;
  opacity: 0.5;
  transform: none;
}
.uni-save-btn.is-saved {
  border-color: var(--accent, #7C3AED);
  background: var(--accent, #7C3AED);
  color: #fff;
  box-shadow: 0 4px 20px var(--accent-glow, rgba(124,58,237,0.3));
  animation: savePopIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.uni-save-btn.is-saved .uni-save-icon {
  fill: #fff;
  stroke: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.uni-save-btn.is-saved:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px var(--accent-glow, rgba(124,58,237,0.4));
  border-color: var(--accent, #7C3AED);
  background: var(--accent, #7C3AED);
}
@keyframes savePopIn {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.uni-save-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* The button is absolutely positioned, so its card needs to be the
   containing block. */
.uni-card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .uni-save-btn, .uni-save-btn:hover { transition: none; transform: none; }
}

/* ── /programs/ card + inline save button ───────────────────────────────
   The card is a flex row rather than a single <a>, because a <button> may
   not be nested inside an anchor. The title link is "stretched" over the
   whole card with ::after so the row stays fully clickable, and the save
   button sits above it on a higher z-index. */
.prog-card { position: relative; }
.prog-card .prog-link { text-decoration: none; color: inherit; }
.prog-card .prog-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.prog-save {
  position: relative;   /* overrides the shared absolute placement */
  top: auto;
  right: auto;
  z-index: 2;
  flex-shrink: 0;
}

/* ── Cookie consent banner (assets/js/consent.js) ───────────────────────
   Injected on every public page. Sits above the WhatsApp float and the
   back-to-top button so the choice can't be hidden behind them. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;                 /* above .whatsapp-float (999) */
  padding: var(--space-4);
  transform: translateY(110%);
  transition: transform .35s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner-inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16);
}
.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-banner-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.cookie-banner-desc {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.cookie-banner-desc a { color: var(--color-primary); font-weight: var(--weight-semibold); }

.cookie-banner-state {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);   /* muted measured ~3:1 on the glass strip at 12px */
}
.cookie-banner-state strong { color: var(--color-ink); font-weight: var(--weight-semibold); }

.cookie-banner-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-btn {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}
.cookie-btn-primary { background: var(--gradient-primary); color: #fff; }
.cookie-btn-primary:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cookie-btn-ghost {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-ink-soft);
}
.cookie-btn-ghost:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }

@media (max-width: 760px) {
  /* Compact consent sheet: the old stacked version was 298px tall on an
     852px phone screen — 35% of the viewport, sitting on top of the hero CTA
     and the trust row. Buttons side by side + tighter type keeps it readable
     and out of the way. */
  .cookie-banner { padding: var(--space-3); }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); }
  .cookie-banner-desc { font-size: 0.8125rem; line-height: 1.5; }
  .cookie-banner-state { margin-top: var(--space-1); }
  .cookie-banner-actions { flex-direction: row; gap: var(--space-2); }
  .cookie-btn { flex: 1; width: auto; min-height: 44px; padding: var(--space-2) var(--space-3); }
}
/* Home-indicator clearance (needs viewport-fit=cover in the viewport meta). */
.cookie-banner { padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* Legal links in the footer bottom bar. */
.footer-legal { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; }
.footer-legal a { font-size: var(--text-xs); }

/* ── Blog: "Keep reading" related posts ─────────────────────────────────
   Every article previously ended with nothing after the CTA, so a reader who
   finished a post had no route to the other five. */
.blog-related {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.blog-related-h {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.blog-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
}
.blog-rel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.blog-rel-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-rel-cat {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.blog-rel-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-ink);
}
.blog-rel-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.blog-rel-meta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
  .blog-rel-card, .blog-rel-card:hover { transition: none; transform: none; }
}

/* ==========================================================================
   Mobile & safe-area pass (v1.6)
   Measurements this comes from (headless Chrome, iPhone 15 / Android / iPad):
   - #menuToggle was 38x48 and every card-footer button 22-34px tall; the
     drawer rows were already 44px, so only the always-visible controls below
     are raised to the 44px HIG/Material floor.
   - .promo-banner-cta rendered at 11.5px.
   - Notched phones: the promo banner sits at y=0 and the floating widgets sit
     at the bottom edge, both inside the unsafe area once the page opts into
     the full bleed with viewport-fit=cover.
   ========================================================================== */

/* Notch / home-indicator insets. max() keeps the desktop value when the
   browser reports 0 (every non-notched device, all desktop browsers). */
.promo-banner { padding-top: calc(5px + env(safe-area-inset-top, 0px)); }
.nav-inner {
  padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
}
.nav-links-wrap { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.whatsapp-float { bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
.back-to-top { bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 84px)); }
.go-top, .scroll-top { bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }

/* The hamburger is only ever visible in the collapsed (<=1260px) nav, so its
   touch size needs no media query — it is a no-op on desktop. */
.menu-toggle { min-width: 44px; min-height: 44px; }

@media (max-width: 1024px) {
  /* 44px minimum touch targets on the always-visible controls. */
  .filter-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .btn-sm { min-height: 44px; }
  .prog-card .prog-link { min-height: 44px; display: flex; align-items: center; }
  /* The brand link was a 77x20 hit area. A negative-inset pseudo-element grows
     the touch area without moving the wordmark or its hover underline. */
  .brand::before { content: ''; position: absolute; inset: -12px -8px; }

  /* Small-type floor: 11.5px is below comfortable phone reading size. */
  .promo-banner-cta { font-size: 0.8125rem; }
  .hero-trust-item { font-size: 0.8125rem; }
}

/* Full-height layouts: track the live viewport instead of the iOS large one. */
.auth-gate { min-height: calc(100dvh - var(--nav-height) - 100px); }
.dashboard-shell { min-height: calc(100dvh - var(--nav-height)); }
/* Footer nav links measured 22px tall on touch widths. Padding inside the list
   items only — the footer's own headings and brand link are untouched. */
@media (max-width: 1024px) {
  footer li > a { display: inline-block; padding-block: 5px; }
}

/* ==========================================================================
   Mobile navbar + drawer (v1.10)
   Three measured defects, all in the collapsed (<=1260px) nav:

   1. The hamburger sat dead centre of the bar (x=175 in a 393px bar; centre 197).
      It is a direct child of .nav-inner, whose grid is `1fr auto 1fr`; the middle
      track belonged to .nav-links-wrap, and once that wrap became `position: fixed`
      it vacated the track, so the toggle auto-placed into it. Pinned to column 3.
   2. The bar was `color-mix(card 4%)` at rest, 12% scrolled (both with a backdrop
      blur): page text underneath read through and tinted the wordmark. Now opaque.
   3. Opening the menu gave links floating over the live page with NO panel behind
      them (panel measured 64px tall while its children ran to y=629). Cause:
      `backdrop-filter` on .navbar makes it the CONTAINING BLOCK for its fixed
      descendants, so the drawer's `bottom: 0` resolved against the 64px navbar,
      not the viewport. Removing the filter fixes the quirk as well as the mobile
      scroll-jank from recomputing a 28px blur every frame; the drawer then gets
      explicit viewport geometry instead of relying on that quirk.

   Desktop (>=1261px) keeps the light glass pill it was designed with: scoped, not
   a global restyle.
   ========================================================================== */
@media (max-width: 1260px) {
  .navbar,
  .navbar.scrolled {
    background: var(--color-bg-card);          /* opaque: nothing reads through */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;             /* also drops the containing-block quirk */
  }
  .navbar {
    border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  }
  .navbar.scrolled {
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    box-shadow: 0 10px 30px -12px rgba(8, 12, 24, 0.45);
  }

  /* Explicit geometry. `top` stays relative to the NAVBAR, not the viewport: the navbar's
     own `transform: translateX(-50%)` (and/or its backdrop-filter) makes it the containing
     block for fixed descendants, and the navbar is itself already offset by --promo-offset,
     so adding the promo here would double it (measured y=128 instead of 96). The explicit
     `height` is what was missing - it is a length, so it resolves against the viewport
     regardless of the containing block, and gives the panel the full screen. */
  .nav-links-wrap {
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: auto;
    height: calc(100vh - var(--nav-height) - var(--promo-offset, 0px));
    height: calc(100dvh - var(--nav-height) - var(--promo-offset, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1100;   /* above the consent sheet (z-index 1000) - it used to cover the open menu */
    background: var(--color-bg-card);          /* opaque panel: was rgba(238,242,255,0.95),
                                                   a light sheet with dark-mode ink on it */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* While the sheet is open the bar must NOT be the floating pill: the navbar is the
     containing block for the fixed drawer, so the pill's 90% width + 16px inset shrink and
     offset the panel (measured y=81 h=756 -> bottom 837, inset 20px, instead of 96..852). */
  html.nav-open .navbar {
    top: var(--promo-offset, 0px);
    width: 100%;
    max-width: 100%;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
    border-radius: 0;
    box-shadow: none;
  }
  /* Stacking-context trap: the drawer's own z-index (1100) is scoped INSIDE the navbar's
     stacking context, because .navbar is positioned with z-index 100. The consent sheet
     (z-index 1000) lives outside that context, so it painted over the open menu - hit tests
     showed it swallowing the "Log In" and "Sign Up" buttons - and the floating language
     widget covered "Free Consultation". Lift the NAVBAR itself while the menu is open, and
     park the floating widgets that have no business over an open sheet. */
  html.nav-open .navbar { z-index: 2000; }
  html.nav-open .lang-widget,
  html.nav-open .whatsapp-float,
  html.nav-open .back-to-top,
  html.nav-open .sticky-cta { display: none; }

  /* the page must not scroll behind the open sheet */
  html.nav-open,
  html.nav-open body { overflow: hidden; }

  /* the glyph stays a hamburger while the menu is open, which reads as "nothing happened" */
  .nav-links-wrap.open ~ .menu-toggle { font-size: 0; }
  .nav-links-wrap.open ~ .menu-toggle::before { content: "\2715"; font-size: 1.5rem; line-height: 1; }
}

/* ==========================================================================
   Mobile premium pass (v1.7)
   Measured before this block (393px iPhone, 360px Android):
   - headlines were 56px (14% of the viewport per line) with 11-12 distinct
     font sizes per page; there was no phone type scale at all. Page h1s set
     `style="font-size: var(--text-5xl)"` INLINE, so a media query can only win
     with !important.
   - sections carried 80px top AND bottom → ~160px of dead space between every
     block on a 393px screen.
   - four fixed widgets stacked up the right edge (sticky CTA 0-72px, WhatsApp
     24-80px = overlapping it, back-to-top 92-140px, language button 160-210px).
   - three pages scrolled horizontally: a 501px program card, a footer column
     and a transformed contact card.
   ========================================================================== */
@media (max-width: 768px) {
  /* ── phone type scale ── */
  h1, .hero-title, .page-hero h1, .auth-title, .blog-title {
    font-size: 2.125rem !important;      /* 56px -> 34px */
    line-height: 1.16 !important;
    letter-spacing: -0.02em !important;
  }
  h2, .section-title, .section-header h2 { font-size: 1.625rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.25rem !important; line-height: 1.3 !important; }
  h4 { font-size: 1.0625rem !important; }
  body, p, li { font-size: 1rem; line-height: 1.65; }
  .hero-eyebrow, .section-eyebrow, [class*="eyebrow"] { font-size: 0.75rem; letter-spacing: 0.08em; }
  .btn { font-size: 0.9375rem; }

  /* ── spacing rhythm: 56px instead of 80px per side ── */
  section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .hero { padding-top: calc(var(--nav-height) + var(--space-10)); padding-bottom: var(--space-12); }
  .grid-2, .grid-3, .grid-4 { gap: var(--space-5); }

  /* ── two-line gradient headline: keep one sweep across both lines ── */
  .hero-highlight {
    background-image: linear-gradient(90deg, #7C3AED 0%, #06B6D4 55%, #8B5CF6 100%) !important;
  }

  /* ── floating chrome: one bottom-anchored CTA, nothing on top of it ── */
  .sticky-cta { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .back-to-top { display: none; }                 /* swipe-up is native on touch */
  .lang-widget { left: 16px; right: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); align-items: flex-start; }
  .lang-widget-menu { left: 0; right: auto; }
  /* keep the last footer row clear of the sticky bar */
  body:has(.sticky-cta) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* ── kill the three real horizontal-scroll sources ── */
  .prog-card { min-width: 0; flex-wrap: wrap; }
  .prog-card > * { min-width: 0; }
  .footer-inner > * { min-width: 0; }
  .footer-inner { gap: var(--space-8); }
}

/* Belt and braces: no future element can make the page scroll sideways. */
html, body { overflow-x: clip; max-width: 100%; }
/* Inline-styled flex rows (the pages use them heavily for filter bars and
   contact details) never wrap, so a long <select> or a wide card ran 36-111px
   off the right edge. Wrapping is the correct phone behaviour for all of them;
   scoped to content areas so the nav/menus keep their own layout. */
@media (max-width: 768px) {
  main [style*="display:flex"], section [style*="display:flex"], .container [style*="display:flex"] {
    flex-wrap: wrap;
  }
  select, input:not([type=checkbox]):not([type=radio]), textarea { max-width: 100%; min-width: 0; }
}
/* Consent sheet → native-style bottom sheet on phones. It read as a card
   floating over the hero (flagged twice in the screenshot review), which is
   the least premium thing on the page. Full bleed, hairline top edge, rounded
   top corners only, and the copy kept to two lines. */
@media (max-width: 768px) {
  .cookie-banner {
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cookie-banner-inner {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.22);
  }
  .cookie-banner-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Value-prop pill rows sat tight against the search bar / card below. */
  .hero-tags, .hero-trust, .uni-hero-tags, .process-hero-tags, .scholar-hero-tags { margin-block: var(--space-5); gap: var(--space-3); }
  .hero-tag, .hero-trust-item, .uni-hero-tag { margin: 0; }
}
/* Inline SVG icon sizing. Lucide icons are 24x24 stroke art, so they scale cleanly
   at any size and inherit currentColor from their context (nav, card, button…).
   The sprite itself is inlined in the page, so these make no network request. */
.ico {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  flex: none; pointer-events: none;
}
.ico-lg { width: 1.5em; height: 1.5em; }
.ico-xl { width: 1.75em; height: 1.75em; }
/* Inline SVG icon sizing. Lucide icons are 24x24 stroke art, so they scale cleanly
   at any size and inherit currentColor from their context (nav, card, button…).
   The sprite itself is inlined in the page, so these make no network request. */
.ico {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  flex: none; pointer-events: none;
}
.ico-lg { width: 1.5em; height: 1.5em; }
.ico-xl { width: 1.75em; height: 1.75em; }

/* Card header banners: a monochrome icon reads far better than a colour
   illustration on a saturated gradient, so these are whitened. */
.card-art .ico { color: #fff; opacity: 0.95; }

/* Solid variant for rating stars — filled, not outlined. */
.ico-solid { fill: currentColor; stroke: none; }

/* ── Confirm dialog ──────────────────────────────────────────────────────────
   Replaces window.confirm(), which renders OS chrome that ignores the design
   system entirely (and prints the origin URL above the message). Markup is
   built by EasyUniDialog in main.js; the action buttons ARE the .btn system,
   so they inherit the brand gradient, hover lift and focus ring for free.
   Mirrors .uni-modal in universities.css so the two feel like one component. */
.dlg {
  position: fixed; inset: 0; z-index: 1300;   /* above .uni-modal (1200) */
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.dlg[hidden] { display: none; }

.dlg-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.dlg.is-open .dlg-backdrop { opacity: 1; }

.dlg-panel {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  background: var(--color-bg-card, var(--color-bg, #fff));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.42);
  padding: var(--space-6) var(--space-6) var(--space-5);
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity .2s ease, transform .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dlg.is-open .dlg-panel { opacity: 1; transform: none; }

.dlg-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(124, 58, 237, 0.12);
  color: var(--color-primary);
}
.dlg-icon .ico { width: 24px; height: 24px; }
.dlg-icon.is-danger { background: rgba(220, 38, 38, 0.12); color: var(--color-danger, #DC2626); }

/* .btn-outline's border is deliberately faint, which is right inside page
   content but leaves the Cancel button reading as loose text against the dark
   panel — the pair stops looking like two buttons. Give it a tinted fill and
   the primary border (this is exactly what .btn-outline:hover already does,
   so it still reads as the same component). var(--color-primary) is #A78BFA in
   dark and #7C3AED in light, which clears the 3:1 non-text threshold in both. */
.dlg-actions .btn-outline {
  background: rgba(124, 58, 237, 0.06);
  border-color: var(--color-primary);
}

.dlg-msg {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
}

.dlg-actions {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  margin-top: var(--space-6);
}
.dlg-actions .btn { padding: var(--space-2) var(--space-5); }
.dlg-actions .btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Stacked, full-width actions on small screens; primary action on top. */
@media (max-width: 420px) {
  .dlg-actions { flex-direction: column-reverse; }
  .dlg-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dlg-panel, .dlg-backdrop { transition: none; }
}
body.dlg-open { overflow: hidden; }