/* ================================================================
   STUDENT HELP SQUAD — Design System v2
   Light, bright, energetic. Soft gradients, indigo-tinted shadows,
   generous spacing, friendly micro-interactions.
   Variable NAMES preserved from v1 so embedded page styles inherit.
   ================================================================ */

:root {
  /* ── Brand: navy + sky, professional Corporate ── */
  --teal:        #1e40af;          /* primary navy-700 */
  --teal-light:  #dbeafe;          /* blue-100 tint */
  --teal-dark:   #1e3a8a;          /* navy-800 deep */
  --indigo:      #1e40af;          /* alias to primary */
  --violet:      #3b82f6;          /* blue-500 — replaces violet */
  --amber:       #f59e0b;          /* amber-500 warm CTA */
  --amber-light: #fef3c7;          /* amber-100 */
  --coral:       #10b981;          /* mint highlight (success) */
  --coral-light: #d1fae5;
  --blue:        #0ea5e9;          /* sky-500 accent */
  --blue-light:  #e0f2fe;          /* sky-100 */
  --purple:      #3b82f6;          /* alias to blue (no purple in pro palette) */
  --sun:         #fbbf24;          /* amber-400 */
  --sun-light:   #fef3c7;
  --pink:        #0ea5e9;          /* alias to sky (no pink in pro palette) */

  /* ── Surfaces ── */
  --cream:       #f8fafc;          /* slate-50 — cool professional white */
  --cream-dark:  #eff6ff;          /* blue-50 tint */
  --white:       #ffffff;

  /* ── Ink (text) ── */
  --ink:         #0f172a;          /* slate-900 */
  --ink-soft:    #475569;          /* slate-600 */
  --ink-muted:   #94a3b8;          /* slate-400 */

  /* ── Borders (navy-tinted) ── */
  --border:        rgba(30,64,175,0.10);
  --border-strong: rgba(30,64,175,0.22);

  /* ── Radii ── */
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* ── Shadows: navy-tinted, soft, professional ── */
  --shadow-sm:   0 1px 2px rgba(30,64,175,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --shadow:      0 4px 16px rgba(30,64,175,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:   0 18px 48px rgba(30,64,175,0.16), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-xl:   0 30px 80px rgba(30,64,175,0.22), 0 8px 24px rgba(15,23,42,0.08);
  --shadow-glow: 0 0 0 6px rgba(30,64,175,0.10);
  --ring:        0 0 0 4px rgba(30,64,175,0.18);

  /* ── Gradients (Corporate Navy + Sky) ── */
  --gradient-primary: linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%);
  --gradient-hero:    linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #f59e0b 100%);
  --gradient-warm:    linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --gradient-cool:    linear-gradient(135deg, #0ea5e9 0%, #1e40af 100%);
  --gradient-mint:    linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
  --gradient-sun:     linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --gradient-soft:    linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
  --gradient-aurora:  radial-gradient(ellipse at 20% 0%, rgba(30,64,175,0.10), transparent 50%),
                      radial-gradient(ellipse at 80% 0%, rgba(14,165,233,0.10), transparent 50%);

  /* ── Easing ── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Legacy aliases (so older embedded <style> blocks keep rendering) ── */
  --navy:        var(--teal-dark);
  --orange:      var(--amber);
  --offwhite:    var(--cream);
  --radius-md:   var(--radius);
  --radius-sm:   10px;
  --transition:  0.25s cubic-bezier(0.22, 1, 0.36, 1);
  --font-head:   'Fraunces', 'Times New Roman', serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
}

/* ================================================================
   RESET + BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  background-image:
    radial-gradient(1100px 600px at 12% -10%, rgba(30,64,175,0.07), transparent 60%),
    radial-gradient(900px 500px at 88% -8%, rgba(14,165,233,0.06), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(245,158,11,0.04), transparent 70%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(30,64,175,0.20); color: var(--ink); }

a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }

.display { font-family: 'Fraunces', 'Times New Roman', serif; }

/* ================================================================
   NAVIGATION — Floating glass-pill, modern
   ================================================================ */
nav {
  position: fixed;
  top: 14px;
  left: 0; right: 0;
  z-index: 100;
  padding: 0 max(20px, 4vw);
  pointer-events: none;
  transition: top 0.3s var(--ease-out);
}
nav.scrolled { top: 8px; }

.nav-inner {
  pointer-events: auto;
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 8px 0 22px;

  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 10px 40px rgba(30,64,175,0.10),
    0 4px 12px rgba(15,23,42,0.06);

  transition: all 0.35s var(--ease-out);
}
.nav-inner::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 23px;
  background: linear-gradient(135deg,
    rgba(30,64,175,0.20) 0%,
    transparent 30%,
    transparent 70%,
    rgba(245,158,11,0.16) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
nav.scrolled .nav-inner {
  background: rgba(255,255,255,0.92);
  height: 60px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 14px 48px rgba(30,64,175,0.14),
    0 6px 16px rgba(15,23,42,0.08);
}
nav.scrolled .nav-inner::before { opacity: 1; }

.nav-logo {
  position: relative;
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring);
}
.nav-logo::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: var(--gradient-primary);
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s ease;
}
.nav-logo:hover { transform: scale(1.05); }
.nav-logo:hover::before { opacity: 0.30; }
.nav-logo img,
.nav-logo .logo-img { display: block; height: 36px; width: auto; }
footer .nav-logo .logo-img { height: 36px; }

.logo-text {
  font-family: 'Fraunces', serif;
  font-size: 20px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.5px;
  display: inline-flex; align-items: flex-start; gap: 5px;
  line-height: 1.1;
}
.logo-badge {
  background: var(--gradient-warm);
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.2px;
  padding: 3px 10px;
  border-radius: 9px;
  position: relative; top: -5px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(245,158,11,0.30);
}
.logo-badge::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 8px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #f59e0b;
}
footer .logo-text { color: white; }

.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none;
  flex-wrap: nowrap;
}
.nav-links li { position: relative; }
.nav-links a {
  position: relative;
  display: block; padding: 9px 14px;
  border-radius: 11px;
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
  font-weight: 500; letter-spacing: -0.1px;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  width: 18px; height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-spring);
}
.nav-links a:hover {
  color: var(--teal-dark);
  background: rgba(30,64,175,0.08);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: translateX(-50%) scaleX(1); }
.nav-links a.active {
  color: var(--teal-dark);
  font-weight: 600;
  background: rgba(30,64,175,0.10);
}

/* AI link inherits default nav-link styling — no special pill */

.nav-divider {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
  margin: 0 4px; flex-shrink: 0;
}
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* ================================================================
   BUTTONS
   ================================================================ */
/* Mirrors .btn-partner: soft tinted resting state, then flips to the
   brand gradient with white text + colour-tinted shadow on hover.
   Shares min-width + fixed height + centred content so it sits as a
   pixel-equal peer of `.btn-partner` in the nav. */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 130px;
  height: 38px;
  padding: 0 16px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--teal-dark);
  background: var(--teal-light);
  border: 1px solid var(--border-strong);
  box-sizing: border-box;
  cursor: pointer; text-decoration: none;
  transition: all 0.25s var(--ease-out);
  letter-spacing: -0.1px; white-space: nowrap;
}
.btn-ghost:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30,64,175,0.35);
}

.btn-primary {
  padding: 10px 20px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  color: white;
  background: var(--gradient-primary); border: none;
  cursor: pointer; text-decoration: none;
  transition: all 0.25s var(--ease-out);
  letter-spacing: -0.1px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(30,64,175,0.32);
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(30,64,175,0.45);
}
.btn-primary:hover::after { transform: translateX(100%); }

.hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 11px;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: rgba(30,64,175,0.08);
  border: 1px solid var(--border);
  transition: background 0.2s ease;
}
.hamburger:hover { background: var(--teal-light); }
.hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-spring), opacity 0.25s ease;
  transform-origin: center;
}
nav.menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  padding: 124px 5vw 72px;
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: center;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: 80px; left: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--gradient-primary);
  filter: blur(120px);
  opacity: 0.25;
  z-index: -1;
  animation: float-slow 14s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  top: 200px; right: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--gradient-warm);
  filter: blur(120px);
  opacity: 0.18;
  z-index: -1;
  animation: float-slow 18s ease-in-out infinite reverse;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 16px 5px 5px;
  font-size: 13px; font-weight: 600; color: var(--teal-dark);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  animation: fadeUp 0.6s ease both;
}
.eyebrow-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(30,64,175,0.4);
}
.eyebrow-dot svg { width: 11px; height: 11px; fill: none; stroke: white; stroke-width: 3; }

.hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500; line-height: 1.08; letter-spacing: -1.8px;
  color: var(--ink);
  animation: fadeUp 0.6s 0.1s ease both;
  /* Subtle white halo so the headline reads in front of the cinematic
     WebGL canvas drifting behind it. */
  text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 0 14px rgba(255,255,255,0.45);
}
.hero h1 em {
  font-style: italic;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-sub {
  font-size: 17px;
  /* Brand-navy + heavier + halo so the description reads clearly
     above the cinematic 3D cluster — matching .section-sub site-wide. */
  color: var(--teal-dark);
  line-height: 1.7;
  margin: 22px 0 34px;
  font-weight: 500;
  max-width: 540px;
  text-shadow: 0 0 12px rgba(255,255,255,0.65), 0 1px 2px rgba(255,255,255,0.45);
  animation: fadeUp 0.6s 0.2s ease both;
}
.hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  animation: fadeUp 0.6s 0.3s ease both;
}

.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
  color: white;
  background: var(--gradient-primary);
  border: none;
  cursor: pointer; text-decoration: none;
  transition: all 0.3s var(--ease-out);
  letter-spacing: -0.2px;
  box-shadow: 0 8px 22px rgba(30,64,175,0.36);
  position: relative; overflow: hidden;
}
.btn-hero-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s var(--ease-out);
}
.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(30,64,175,0.50);
}
.btn-hero-primary:hover::after { transform: translateX(110%); }

.btn-hero-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--ink);
  background: white;
  border: 1px solid var(--border-strong);
  cursor: pointer; text-decoration: none;
  transition: all 0.3s var(--ease-out);
  letter-spacing: -0.2px;
  box-shadow: var(--shadow-sm);
}
.btn-hero-secondary:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* trust bar */
.trust-bar {
  display: flex; flex-wrap: wrap; gap: 32px;
  margin-top: 48px; padding-top: 40px;
  border-top: 1px solid var(--border);
  animation: fadeUp 0.6s 0.4s ease both;
}
.trust-item { display: flex; align-items: center; gap: 10px; }
.trust-num {
  font-family: 'Fraunces', serif;
  font-size: 28px; font-weight: 600;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}
.trust-label { font-size: 13px; color: var(--ink-muted); line-height: 1.3; }

/* hero visual — modern animated showcase */
.hero-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeUp 0.7s 0.2s ease both;
}

/* gradient blobs floating behind */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.hero-blob-1 {
  width: 340px; height: 340px;
  top: -20px; right: -40px;
  background: var(--gradient-primary);
  opacity: 0.45;
  animation: blob-drift-1 14s ease-in-out infinite;
}
.hero-blob-2 {
  width: 300px; height: 300px;
  bottom: -30px; left: -30px;
  background: var(--gradient-warm);
  opacity: 0.40;
  animation: blob-drift-2 16s ease-in-out infinite;
}
.hero-blob-3 {
  width: 260px; height: 260px;
  bottom: 40%; right: 30%;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  opacity: 0.30;
  animation: blob-drift-3 18s ease-in-out infinite;
}
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-30px, 40px) scale(1.10); }
  66%      { transform: translate(30px, -20px) scale(0.92); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.12); }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20px, -40px) scale(1.05); }
  66%      { transform: translate(-30px, 30px) scale(0.95); }
}

/* concentric pulsing rings behind image */
.hero-rings {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: 480px;
  z-index: 1;
  pointer-events: none;
}
.hero-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(30,64,175,0.30);
  animation: ring-pulse 4s ease-out infinite;
}
.hero-ring:nth-child(2) { animation-delay: 1.3s; border-color: rgba(59,130,246,0.30); }
.hero-ring:nth-child(3) { animation-delay: 2.6s; border-color: rgba(245,158,11,0.30); }
@keyframes ring-pulse {
  0%   { transform: scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* image wrap with gradient frame + subtle tilt */
.hero-image-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  animation: img-float 6s ease-in-out infinite;
}
@keyframes img-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-0.6deg); }
}

.hero-image-glow {
  position: absolute;
  inset: -40px;
  background: var(--gradient-hero);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  z-index: -1;
  animation: glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.50; transform: scale(1.05); }
}

.hero-image-frame {
  position: relative;
  border-radius: 28px;
  padding: 4px;
  background: linear-gradient(135deg,
    rgba(30,64,175,0.45) 0%,
    rgba(59,130,246,0.30) 50%,
    rgba(245,158,11,0.45) 100%);
  box-shadow:
    0 30px 80px rgba(30,64,175,0.30),
    0 12px 30px rgba(15,23,42,0.10);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out);
}
.hero-image-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: shimmer-frame 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  border-radius: 28px;
  opacity: 0.6;
}
@keyframes shimmer-frame {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.hero-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  position: relative;
  z-index: 0;
}
.hero-visual:hover .hero-image-frame { transform: translateY(-6px); }

/* sparkle accent badge */
.hero-sparkle {
  position: absolute;
  top: -22px; right: -22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gradient-warm);
  display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 12px 28px rgba(245,158,11,0.45);
  animation: sparkle-spin 8s linear infinite;
  z-index: 4;
}
.hero-sparkle svg { width: 26px; height: 26px; }
@keyframes sparkle-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.10); }
  100% { transform: rotate(360deg) scale(1); }
}

/* floating feature pills */
.hero-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px 14px;
  box-shadow: var(--shadow-lg);
  z-index: 3;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  cursor: default;
}
.hero-pill:hover {
  transform: scale(1.06) !important;
  box-shadow: var(--shadow-xl);
  animation-play-state: paused;
}

.pill-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.pill-icon svg { width: 16px; height: 16px; }
.pill-icon-mint   { background: var(--gradient-mint);    box-shadow: 0 4px 12px rgba(16,185,129,0.40); }
.pill-icon-indigo { background: var(--gradient-primary); box-shadow: 0 4px 12px rgba(30,64,175,0.40); }
.pill-icon-rose   { background: var(--gradient-warm);    box-shadow: 0 4px 12px rgba(245,158,11,0.40); }
.pill-icon-amber  { background: var(--gradient-sun);     box-shadow: 0 4px 12px rgba(251,191,36,0.40); }

.pill-content { line-height: 1.2; }
.pill-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.1px;
}
.pill-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
  font-weight: 500;
}

/* pill positions + independent float animations */
.hero-pill-1 {
  top: 8%; left: -8%;
  animation: pill-float-1 5s ease-in-out infinite;
}
.hero-pill-2 {
  top: 18%; right: -6%;
  animation: pill-float-2 6s ease-in-out infinite 0.4s;
}
.hero-pill-3 {
  bottom: 22%; left: -10%;
  animation: pill-float-3 5.5s ease-in-out infinite 0.8s;
}
.hero-pill-4 {
  bottom: 8%; right: -4%;
  animation: pill-float-4 6.5s ease-in-out infinite 1.2s;
}
@keyframes pill-float-1 {
  0%, 100% { transform: translate(0, 0) rotate(-1deg); }
  50%      { transform: translate(6px, -10px) rotate(1deg); }
}
@keyframes pill-float-2 {
  0%, 100% { transform: translate(0, 0) rotate(1deg); }
  50%      { transform: translate(-8px, 8px) rotate(-1deg); }
}
@keyframes pill-float-3 {
  0%, 100% { transform: translate(0, 0) rotate(-0.5deg); }
  50%      { transform: translate(10px, -6px) rotate(1.5deg); }
}
@keyframes pill-float-4 {
  0%, 100% { transform: translate(0, 0) rotate(0.5deg); }
  50%      { transform: translate(-6px, -10px) rotate(-1deg); }
}

/* leave legacy hero-card styles below (used elsewhere if needed) */
.hero-card {
  background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out);
}
.hero-card:hover { transform: translateY(-4px) rotate(-0.3deg); }

.hero-card-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 8px;
}
.card-dot { width: 10px; height: 10px; border-radius: 50%; }
.cd-red    { background: #ff5f57; }
.cd-yellow { background: #febc2e; }
.cd-green  { background: #28c840; }
.hero-card-header span { color: rgba(255,255,255,0.7); font-size: 12px; margin-left: 8px; font-weight: 500; }

.hero-card-body { padding: 22px 20px; }
.dash-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
.dash-stat {
  background: var(--cream);
  border-radius: 12px; padding: 13px 15px;
  border: 1px solid var(--border);
  transition: all 0.25s var(--ease-out);
}
.dash-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--teal); }
.dash-stat-num {
  font-family: 'Fraunces', serif;
  font-size: 24px; font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.dash-stat-lbl { font-size: 11px; color: var(--ink-muted); margin-top: 3px; }
.dash-stat.accent {
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(30,64,175,0.32);
}
.dash-stat.accent .dash-stat-num { color: white; }
.dash-stat.accent .dash-stat-lbl { color: rgba(255,255,255,0.85); }

.match-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: var(--cream);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
  transition: all 0.2s var(--ease-out);
}
.match-item:hover {
  border-color: var(--teal);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.match-logo {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; font-weight: 700;
}
.match-title { font-weight: 600; color: var(--ink); font-size: 13px; }
.match-co { color: var(--ink-muted); font-size: 12px; }
.match-score {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  background: var(--gradient-mint);
  color: white;
  padding: 3px 10px; border-radius: 100px;
  box-shadow: 0 2px 8px rgba(16,185,129,0.30);
}

.floating-badge {
  position: absolute;
  background: white;
  border-radius: var(--radius);
  padding: 11px 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.fb-1 { top: -22px; right: -28px; animation: float1 4s ease-in-out infinite; }
.fb-2 { bottom: 50px; left: -32px; animation: float2 5s ease-in-out infinite; }
.fb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(30,64,175,0.15);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ================================================================
   LOGOS BAR
   ================================================================ */
/* ================================================================
   UNIVERSITY LOGO WALL — premium infinite-scroll marquee
   ================================================================ */
.logos-section {
  padding: 56px 0 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.logos-section::after {
  content: '';
  position: absolute; left: 5vw; right: 5vw; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* Section label with thin dividers on each side */
.logos-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: var(--ink-muted);
  margin: 0 auto 36px;
  letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 600;
}
.logos-label::before,
.logos-label::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* Marquee viewport — soft fade at the edges so chips appear/disappear
   without a hard cut. */
.logos-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* The track holds two identical sets of chips (16 total). Animating
   to -50% scrolls one full set off-screen, at which point the second
   set's position visually matches the start — seamless loop. */
.logos-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: logos-scroll 42s linear infinite;
  padding: 6px 9px; /* leaves room for hover lift + shadows */
}
.logos-marquee:hover .logos-track { animation-play-state: paused; }
/* -50% is exact: the track has horizontal padding equal to one gap,
   which makes the duplicate-set's first chip land precisely where
   the original first chip started. */
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* University chip — monogram badge + name */
.uni-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 6px 14px rgba(30,64,175,0.10),
    0 2px 4px rgba(15,23,42,0.04);
  flex-shrink: 0;
  cursor: default;
  transition: transform 0.35s var(--ease-spring),
              box-shadow 0.35s var(--ease-out),
              border-color 0.3s var(--ease-out);
}
.uni-chip:hover {
  transform: translateY(-3px);
  border-color: rgba(30,64,175,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 16px 28px rgba(30,64,175,0.22),
    0 4px 8px rgba(15,23,42,0.06);
}

/* Circular monogram badge — university-crest feel */
.uni-mono {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  font-family: 'Fraunces', serif;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(15,23,42,0.18),
    0 4px 10px rgba(30,64,175,0.28);
  position: relative;
  isolation: isolate;
}
/* Glossy highlight overlay shared with the 3D icon system */
.uni-mono::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 65% 50% at 30% 18%, rgba(255,255,255,0.55), transparent 65%),
    radial-gradient(ellipse 80% 70% at 75% 115%, rgba(15,23,42,0.12), transparent 60%);
  pointer-events: none;
}
.uni-mono > * { position: relative; z-index: 1; }

/* Colour variants — rotate through the brand palette for visual rhythm */
.uni-mono-indigo { background: var(--gradient-primary); }
.uni-mono-amber  { background: var(--gradient-warm); box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(15,23,42,0.18),
    0 4px 10px rgba(245,158,11,0.32); }
.uni-mono-mint   { background: var(--gradient-mint); box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(15,23,42,0.18),
    0 4px 10px rgba(16,185,129,0.30); }
.uni-mono-sky    { background: var(--gradient-cool); box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(15,23,42,0.18),
    0 4px 10px rgba(14,165,233,0.30); }

.uni-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.1px;
  white-space: nowrap;
}

/* Mobile — slightly tighter and faster */
@media (max-width: 640px) {
  .uni-chip { padding: 8px 18px 8px 8px; gap: 10px; }
  .uni-mono { width: 34px; height: 34px; font-size: 12px; }
  .uni-name { font-size: 12.5px; }
  .logos-track { animation-duration: 34s; gap: 14px; }
  .logos-label { font-size: 11px; letter-spacing: 1.2px; }
}

/* Reduced motion — stop the marquee but keep chips visible */
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; transform: translateX(0); }
  .logos-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;
  }
}

/* ================================================================
   SECTION WRAPPER
   ================================================================ */
.section { padding: 76px 5vw; position: relative; }
.section-inner { max-width: 1240px; margin: 0 auto; }

.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 16px;
}
.section-label::before {
  content: ''; display: block;
  width: 22px; height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 500; letter-spacing: -1.2px; line-height: 1.12;
  color: var(--ink); margin-bottom: 18px;
}
.section-title em {
  font-style: italic;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.section-sub {
  font-size: 17px; color: var(--ink-soft); line-height: 1.7;
  max-width: 580px; font-weight: 400;
}

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 44px;
}
.how-card {
  --accent: var(--teal);
  --accent-soft: rgba(30,64,175,0.20);
  background: white;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  position: relative;
  transition:
    transform 0.35s var(--ease-spring),
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Themed corner glow — top-right radial bloom in --accent-soft */
.how-card::before {
  content: ''; position: absolute;
  top: 0; right: 0;
  width: 65%; height: 65%;
  background: radial-gradient(ellipse at top right, var(--accent-soft), transparent 70%);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
  z-index: 0;
}
.how-card > * { position: relative; z-index: 1; }
.how-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 52px var(--accent-soft),
    0 8px 18px rgba(15,23,42,0.06);
  border-color: var(--accent);
}
.how-card:hover::before { opacity: 0.85; }

.how-num {
  font-family: 'Fraunces', serif;
  font-size: 68px; font-weight: 500; line-height: 1;
  /* The big serif number takes on the card's accent colour */
  background: var(--accent, var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px;
  letter-spacing: -2px;
  opacity: 0.92;
}
.how-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  background: var(--teal-light);
  transition: transform 0.3s var(--ease-spring);
}
.how-card:hover .how-icon { transform: rotate(-6deg) scale(1.06); }
.how-icon svg { width: 24px; height: 24px; }
.how-card h3 {
  font-family: 'Fraunces', serif; font-size: 21px; font-weight: 600;
  color: var(--ink); margin-bottom: 12px; letter-spacing: -0.4px;
}
.how-card p {
  font-size: 14.5px; color: var(--ink-soft);
  line-height: 1.7; font-weight: 400;
}

/* ================================================================
   FEATURES (light tabbed section)
   ================================================================ */
.features-section {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(30,64,175,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(245,158,11,0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
  position: relative;
  overflow: hidden;
}
.features-section::before {
  content: '';
  position: absolute; top: -10%; left: -8%;
  width: 50%; height: 60%;
  background: radial-gradient(circle, rgba(30,64,175,0.18), transparent 60%);
  filter: blur(90px);
  pointer-events: none;
}
.features-section::after {
  content: '';
  position: absolute; bottom: -10%; right: -8%;
  width: 50%; height: 60%;
  background: radial-gradient(circle, rgba(245,158,11,0.16), transparent 60%);
  filter: blur(90px);
  pointer-events: none;
}
.features-section .section-inner { position: relative; z-index: 1; }
.features-section .section-label { color: var(--teal-dark); }
.features-section .section-label::before { background: var(--gradient-primary); }
.features-section .section-title { color: var(--ink); }
.features-section .section-title em {
  font-style: italic;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.features-section .section-sub { color: var(--ink-soft); }

.audience-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 44px 0;
  background: white;
  padding: 5px; border-radius: 14px;
  width: fit-content;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.tab-btn {
  padding: 10px 24px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ink-soft); background: transparent; border: none;
  cursor: pointer; transition: all 0.25s var(--ease-out);
  letter-spacing: -0.1px;
}
.tab-btn:hover { color: var(--teal-dark); background: var(--teal-light); }
.tab-btn.active {
  background: var(--gradient-primary); color: white;
  box-shadow: 0 6px 16px rgba(30,64,175,0.36);
}
.tab-panel { display: none; }
.tab-panel.active {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
  animation: fadeUp 0.45s var(--ease-out) both;
}
.feature-list { list-style: none; }
.feature-item {
  display: flex; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.25s var(--ease-out);
}
.feature-item:hover { padding-left: 4px; }
.feature-item:last-child { border-bottom: none; }
.feat-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease-spring);
}
.feature-item:hover .feat-icon { transform: scale(1.08) rotate(-5deg); }
.feat-icon svg { width: 20px; height: 20px; }
.feat-title { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.2px; }
.feat-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; font-weight: 400; }

.feature-mockup {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.feature-mockup:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.mockup-header {
  padding: 14px 18px;
  background: var(--cream-dark);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.mockup-header span { font-size: 12px; color: var(--ink-muted); margin-left: 8px; font-weight: 500; }
.mockup-body { padding: 22px 18px; }
.mock-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; }
.mock-stat {
  background: var(--cream);
  border-radius: 10px; padding: 12px;
  border: 1px solid var(--border);
  transition: all 0.25s var(--ease-out);
}
.mock-stat:hover { border-color: var(--teal); background: white; box-shadow: var(--shadow-sm); }
.mock-stat-n { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--ink); }
.mock-stat-l { font-size: 10px; color: var(--ink-muted); margin-top: 2px; font-weight: 500; }
.mock-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: var(--cream);
  border-radius: 10px; margin-bottom: 8px;
  border: 1px solid var(--border);
  transition: all 0.22s var(--ease-out);
}
.mock-row:hover { background: white; border-color: var(--teal-light); transform: translateX(2px); box-shadow: var(--shadow-sm); }
.mock-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white; flex-shrink: 0;
}
.mock-name { font-size: 13px; color: var(--ink); flex: 1; font-weight: 500; }
.mock-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 100px;
  font-weight: 600;
}

/* ================================================================
   ALL-IN-ONE
   ================================================================ */
.allinone-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-top: 44px;
}
.allinone-card {
  /* --accent / --accent-soft are set per-card inline; fallback to teal */
  --accent: var(--teal);
  --accent-soft: rgba(30,64,175,0.22);
  background: white;
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  border: 1px solid var(--border);
  /* Always-visible themed top edge */
  border-top: 3px solid var(--accent);
  transition:
    transform 0.35s var(--ease-spring),
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
/* Soft themed corner glow at top-right; brightens on hover */
.allinone-card::before {
  content: ''; position: absolute;
  top: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse at top right, var(--accent-soft), transparent 70%);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
  z-index: 0;
}
.allinone-card > * { position: relative; z-index: 1; }
.allinone-card:hover {
  transform: translateY(-5px);
  /* Tinted lift shadow in the card's own theme colour */
  box-shadow:
    0 22px 44px var(--accent-soft),
    0 6px 12px rgba(15,23,42,0.06);
  border-color: var(--accent);
}
.allinone-card:hover::before { opacity: 0.85; }
.aio-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.3s var(--ease-spring);
}
.allinone-card:hover .aio-icon { transform: scale(1.08) rotate(-4deg); }
.aio-icon svg { width: 26px; height: 26px; }
.aio-title {
  font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600;
  color: var(--ink); margin-bottom: 9px; letter-spacing: -0.3px;
}
.aio-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; font-weight: 400; }
.aio-tag {
  display: inline-block; margin-top: 14px;
  font-size: 11px; font-weight: 700; padding: 4px 12px;
  border-radius: 100px; letter-spacing: 0.4px; text-transform: uppercase;
}
.unique {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(30,64,175,0.30);
}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testimonials-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
  position: relative;
}
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;
  margin-top: 44px;
}
.testimonial-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  border: 1px solid var(--border);
  transition: all 0.3s var(--ease-out);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 16px; right: 24px;
  font-family: 'Fraunces', serif;
  font-size: 100px; line-height: 1;
  color: var(--teal-light);
  pointer-events: none;
  z-index: 0;
}
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--teal);
}
.stars {
  color: var(--sun); font-size: 15px;
  margin-bottom: 14px; letter-spacing: 2px;
  filter: drop-shadow(0 2px 4px rgba(251,191,36,0.4));
}
.testimonial-text {
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.75;
  font-style: italic; font-family: 'Fraunces', serif; font-weight: 300;
  margin-bottom: 22px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white; flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 4px 10px rgba(30,64,175,0.20),
    0 2px 4px rgba(15,23,42,0.06);
  overflow: hidden;
  background: var(--cream-dark);
}
.author-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.author-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.author-role { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }

/* ================================================================
   STATS — compact "Our Impact" card (rounded pill shape)
   ================================================================ */
.stats-section {
  padding: 56px 5vw;
  background: transparent;
  position: relative;
}
.stats-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 64px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 55%, #f59e0b 100%);
  border-radius: 56px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 30px 80px rgba(30,64,175,0.32),
    0 12px 30px rgba(15,23,42,0.10);
  position: relative;
  overflow: hidden;
}
.stats-inner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 28%, rgba(255,255,255,0.14), transparent 38%),
    radial-gradient(circle at 88% 72%, rgba(255,255,255,0.10), transparent 42%);
  pointer-events: none;
  border-radius: inherit;
}
.stats-inner > * { position: relative; z-index: 1; }
.stats-head .section-label {
  color: #e9d5ff;
  margin-bottom: 18px;
}
.stats-head .section-label::before {
  background: linear-gradient(90deg, #e9d5ff, #fbcfe8);
}
.stats-head .section-title {
  color: white;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -1.1px;
  line-height: 1.12;
  margin-bottom: 16px;
}
.stats-head .section-title em {
  font-style: italic;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 380px;
  font-weight: 400;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.stat-block {
  padding: 28px 30px;
  text-align: left;
  background: rgba(255,255,255,0.04);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.stat-block:hover {
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px);
}
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 3.8vw, 48px);
  font-weight: 600;
  color: white;
  line-height: 1;
  letter-spacing: -1.4px;
  margin-bottom: 8px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.05px;
}

/* ================================================================
   PRICING
   ================================================================ */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-top: 44px; align-items: start;
}
.pricing-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--border);
  position: relative;
  transition: all 0.35s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: var(--teal);
}
.pricing-card.featured {
  background: linear-gradient(160deg, #1e3a8a 0%, #1e40af 100%);
  border-color: transparent;
  box-shadow: 0 18px 48px rgba(30,64,175,0.35);
  transform: scale(1.03);
}
.pricing-card.featured:hover { transform: scale(1.03) translateY(-4px); }

.pricing-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gradient-warm);
  color: white;
  font-size: 11px; font-weight: 700; padding: 5px 16px;
  border-radius: 100px; letter-spacing: 0.5px; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(245,158,11,0.40);
}
.pricing-plan {
  font-size: 13px; font-weight: 700; color: var(--teal-dark);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.pricing-card.featured .pricing-plan { color: #bfdbfe; }
.pricing-price {
  font-family: 'Fraunces', serif; font-size: 46px; font-weight: 600;
  color: var(--ink); letter-spacing: -1.2px; margin-bottom: 6px;
  line-height: 1;
}
.pricing-card.featured .pricing-price { color: white; }
.pricing-price sup { font-size: 22px; vertical-align: super; font-weight: 500; }
.pricing-period { font-size: 13px; color: var(--ink-muted); margin-bottom: 24px; font-weight: 400; }
.pricing-card.featured .pricing-period { color: rgba(255,255,255,0.55); }
.pricing-desc { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 24px; line-height: 1.55; font-weight: 400; }
.pricing-card.featured .pricing-desc { color: rgba(255,255,255,0.75); }
.pricing-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 24px; }
.pricing-card.featured .pricing-divider { border-top-color: rgba(255,255,255,0.15); }
.pricing-features { list-style: none; margin-bottom: 30px; }
.pricing-features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--ink-soft); padding: 7px 0;
  font-weight: 400;
}
.pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.80); }
.check-icon { color: var(--coral); font-size: 16px; flex-shrink: 0; margin-top: 1px; font-weight: 700; }
.pricing-card.featured .check-icon { color: #6ee7b7; }

.btn-plan {
  width: 100%; padding: 14px; border-radius: 11px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: block; text-align: center;
  transition: all 0.25s var(--ease-out); letter-spacing: -0.1px;
}
.btn-plan-light {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-plan-light:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-plan-dark {
  background: white; color: var(--teal-dark); border: none;
}
.btn-plan-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,255,255,0.4);
}

/* ================================================================
   FAQ
   ================================================================ */
/* ================================================================
   FAQ — premium accordion. Numbered items, gradient accent rail,
   smooth chevron, depth on open. CSS counter handles 01–06 labels.
   ================================================================ */
.faq-list {
  max-width: 760px;
  margin: 44px auto 0;
  counter-reset: faq;
}

.faq-item {
  counter-increment: faq;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--border);
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  padding: 22px 26px 22px 72px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 4px rgba(15,23,42,0.04);
  transition:
    translate 0.45s var(--ease-spring),
    transform 0.45s var(--ease-spring),
    border-color 0.35s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    background 0.4s var(--ease-out);
}

/* Serif number 01-06 in the top-left */
.faq-item::before {
  content: counter(faq, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 26px;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: -0.5px;
  z-index: 1;
  transition: color 0.35s var(--ease-out),
              transform 0.45s var(--ease-spring);
}

/* Left accent rail — collapses to nothing when closed, slides in when open */
.faq-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  width: 3px;
  height: 64%;
  background: var(--gradient-primary);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  z-index: 2;
  transition:
    transform 0.45s var(--ease-spring),
    opacity 0.35s var(--ease-out);
}

/* Hover. Uses `translate` (independent of `transform`) so it composes
   with the existing .reveal entrance animation instead of fighting it. */
.faq-item:hover {
  translate: 0 -1px;
  border-color: rgba(30,64,175,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 24px rgba(30,64,175,0.10),
    0 3px 6px rgba(15,23,42,0.05);
}
.faq-item:hover::before { color: var(--teal); }
.faq-item:hover .faq-icon {
  background: var(--teal-light);
  translate: 0 -1px;
}

/* Open state */
.faq-item.open {
  border-color: rgba(30,64,175,0.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(245,158,11,0.06), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(30,64,175,0.07), transparent 55%),
    white;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 22px 46px -10px rgba(30,64,175,0.22),
    0 6px 12px rgba(15,23,42,0.06);
  translate: 0 -1px;
}
.faq-item.open::before {
  color: var(--teal);
  transform: scale(1.06);
}
.faq-item.open::after {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

/* Question row */
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.45;
}

/* Icon — repurposed from a "+" text node into a chevron disc.
   The original "+" character is hidden (font-size: 0) and a chevron
   SVG is rendered via the ::before pseudo-element so the HTML stays
   unchanged. The whole disc rotates 180° on open. */
.faq-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream-dark);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 5px rgba(15,23,42,0.06);
  transition:
    background 0.35s var(--ease-out),
    transform 0.55s var(--ease-spring),
    translate 0.35s var(--ease-spring),
    box-shadow 0.4s var(--ease-out);
}
.faq-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: background-image 0s;
}
.faq-item.open .faq-icon {
  background: var(--gradient-primary);
  transform: rotate(180deg);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    0 8px 18px rgba(30,64,175,0.42);
}
.faq-item.open .faq-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Answer — smooth height + fade-in + slight slide */
.faq-a {
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.75;
  font-weight: 400;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 0.55s var(--ease-out),
    opacity 0.4s ease 0.05s,
    transform 0.5s var(--ease-spring) 0.05s,
    padding-top 0.4s var(--ease-out);
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding-top: 16px;
  opacity: 1;
  transform: translateY(0);
}

/* Mobile — slightly tighter padding so the number badge still fits */
@media (max-width: 560px) {
  .faq-item { padding: 20px 22px 20px 60px; border-radius: var(--radius); }
  .faq-item::before { left: 22px; font-size: 17px; top: 20px; }
  .faq-q { font-size: 14.5px; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-icon::before { background-size: 12px 12px; }
  .faq-a { font-size: 13.5px; }
}

/* ================================================================
   CTA BANNER
   ================================================================ */
.cta-section {
  padding: 84px 5vw;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: var(--gradient-hero);
  opacity: 0.10;
  filter: blur(110px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta-inner {
  max-width: 860px; margin: 0 auto; text-align: center;
  position: relative; z-index: 1;
}
.cta-inner h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500; letter-spacing: -1.8px; line-height: 1.08;
  color: var(--ink); margin-bottom: 20px;
}
.cta-inner h2 em {
  font-style: italic;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-inner p { font-size: 17px; color: var(--ink-soft); margin-bottom: 38px; line-height: 1.7; font-weight: 400; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ================================================================
   FOOTER
   ================================================================ */
footer {
  background: linear-gradient(180deg, var(--cream-dark) 0%, #e0e7ff 100%);
  color: var(--ink-soft);
  padding: 56px 5vw 32px;
  border-top: 1px solid var(--border);
  position: relative;
}
.footer-inner { max-width: 1240px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 36px; border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.footer-brand p {
  font-size: 14px; line-height: 1.7;
  margin-top: 16px; font-weight: 400;
  max-width: 300px; color: var(--ink-soft);
}
.footer-social { display: flex; gap: 8px; margin-top: 20px; }
.social-link {
  width: 38px; height: 38px; border-radius: 10px;
  background: white;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); text-decoration: none;
  transition: all 0.25s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.social-link:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30,64,175,0.35);
}
.footer-col h4 {
  font-size: 13px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
  font-weight: 500; transition: color 0.2s, transform 0.2s;
  display: inline-block;
}
.footer-col a:hover { color: var(--teal-dark); transform: translateX(3px); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 13px; color: var(--ink-soft); }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a {
  font-size: 13px; color: var(--ink-muted); text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--teal-dark); }

.trust-logos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.trust-logo {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 8px;
  background: white; border: 1px solid var(--border);
  font-size: 11px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm);
  /* Match `.social-link` hover behaviour for visual consistency in
     the footer — soft pill at rest → brand-gradient pop on hover. */
  cursor: default;
  transition: all 0.25s var(--ease-out);
}
.trust-logo:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30,64,175,0.35);
}
.gdpr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--coral-light); border: 1px solid rgba(16,185,129,0.30);
  font-size: 11px; color: #047857; font-weight: 600;
}

/* ================================================================
   PARTNER BUTTON + DROPDOWN
   ================================================================ */
.partner-wrap { position: relative; display: inline-flex; }
.btn-partner {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 130px;
  height: 38px;
  padding: 0 16px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--teal-dark); background: var(--teal-light);
  border: 1px solid var(--border-strong);
  box-sizing: border-box;
  cursor: pointer; text-decoration: none;
  transition: all 0.25s var(--ease-out);
  letter-spacing: -0.1px; white-space: nowrap;
}
.btn-partner:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30,64,175,0.35);
}
.partner-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px; padding: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-spring), visibility 0.22s;
  z-index: 200;
}
.partner-wrap:hover .partner-dropdown,
.partner-wrap.open .partner-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.partner-dropdown a {
  display: block; padding: 11px 14px; border-radius: 10px;
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
  font-weight: 500; letter-spacing: -0.1px;
  transition: all 0.18s ease; white-space: nowrap;
}
.partner-dropdown a:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
  transform: translateX(2px);
}

/* ================================================================
   MOBILE APP SECTION
   ================================================================ */
.app-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.app-phone {
  background: linear-gradient(160deg, #1e3a8a 0%, #1e40af 100%);
  border-radius: 38px; padding: 14px;
  box-shadow: var(--shadow-xl);
  max-width: 280px; margin: 0 auto; position: relative;
  border: 1px solid rgba(255,255,255,0.10);
}
.app-phone-screen {
  background: linear-gradient(160deg, #1a1d2e 0%, #0f0f23 100%);
  border-radius: 28px; overflow: hidden; padding: 18px;
}
.app-notch {
  width: 76px; height: 18px; background: #0f0f23;
  border-radius: 0 0 12px 12px; margin: -2px auto 14px;
}
.app-store-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn-appstore {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: white;
  background: var(--ink);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all 0.25s var(--ease-out);
  letter-spacing: -0.1px;
  box-shadow: var(--shadow);
}
.btn-appstore:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-appstore-light {
  background: white;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-appstore-light:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-color: var(--teal);
}

.app-feature-list { list-style: none; margin: 26px 0; }
.app-feature-item {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: 15px; color: var(--ink-soft); padding: 12px 0;
  font-weight: 400; border-bottom: 1px solid var(--border);
}
.app-feature-item:last-child { border-bottom: none; }
.app-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gradient-mint);
  color: white;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
  box-shadow: 0 4px 10px rgba(16,185,129,0.35);
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes float1 {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(8px); }
}
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20px, -30px) scale(1.05); }
  66%      { transform: translate(-15px, 15px) scale(0.95); }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,64,175,0.30); }
  50%      { box-shadow: 0 0 0 8px rgba(30,64,175,0); }
}
@keyframes shimmer {
  0%   { background-position: -300% 0; }
  100% { background-position: 300% 0; }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ================================================================
   RESPONSIVE — MAIN BREAKPOINTS
   ================================================================ */
@media (max-width: 1100px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 6px 9px; font-size: 13.5px; }
}

@media (max-width: 900px) {
  nav { top: 12px; padding: 0 16px; }
  .nav-inner {
    height: 60px;
    padding: 0 8px 0 18px;
    border-radius: 18px;
  }
  .nav-divider,
  .btn-partner,
  .btn-ghost { display: none; }
  .nav-actions { gap: 6px; }
  .hamburger { display: flex; }

  /* mobile dropdown panel */
  .nav-links {
    pointer-events: auto;
    position: fixed;
    top: 84px; left: 16px; right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-xl);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-spring), visibility 0.3s;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  nav.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .nav-links a {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 12px;
  }
  .nav-links a::after { display: none; }
  .nav-links a.nav-ai { margin-left: 0; margin-top: 4px; text-align: center; }

  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 100px 5vw 52px;
  }
  .hero-visual { order: -1; min-height: 380px; max-width: 460px; margin: 0 auto; }
  .hero-rings { width: 380px; height: 380px; }
  .hero-image-wrap { max-width: 380px; }
  .hero-pill-1 { top: 4%; left: 0; }
  .hero-pill-2 { top: 14%; right: 0; }
  .hero-pill-3 { bottom: 18%; left: 0; }
  .hero-pill-4 { bottom: 4%; right: 0; }
  .fb-1, .fb-2 { display: none; }

  .how-grid,
  .testimonials-grid,
  .pricing-grid { grid-template-columns: 1fr; }
  .tab-panel.active { grid-template-columns: 1fr; gap: 36px; }
  .stats-section { padding: 44px 5vw; }
  .stats-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 30px;
    border-radius: 36px;
  }
  .stats-sub { max-width: none; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1/-1; }
  .app-grid { grid-template-columns: 1fr; gap: 48px; }
  .allinone-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card.featured { transform: none; }
  .pricing-card.featured:hover { transform: translateY(-4px); }
  .section { padding: 60px 5vw; }
}

@media (max-width: 560px) {
  .allinone-grid { grid-template-columns: 1fr; }
  .stats-section { padding: 44px 4vw; }
  .stats-inner { padding: 40px 26px; border-radius: 32px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-block { padding: 22px 18px; }
  .stat-num { font-size: 32px; letter-spacing: -0.8px; }
  .stat-label { font-size: 12px; }
  .footer-top { grid-template-columns: 1fr; }
  .audience-tabs { width: 100%; }
  .tab-btn { flex: 1; text-align: center; font-size: 13px; padding: 10px 12px; }
  .trust-bar { gap: 22px; }
  .hero-ctas { flex-direction: column; }
  .btn-hero-primary, .btn-hero-secondary { justify-content: center; width: 100%; }
  .section { padding: 48px 5vw; }
  .how-card { padding: 24px 22px; }
  .hero h1 { letter-spacing: -1px; }

  /* hero visual: tighter on small phones */
  .hero-visual { min-height: 320px; }
  .hero-rings { width: 280px; height: 280px; }
  .hero-image-wrap { max-width: 300px; }
  .hero-pill { padding: 8px 11px; gap: 8px; }
  .pill-icon { width: 28px; height: 28px; }
  .pill-icon svg { width: 14px; height: 14px; }
  .pill-title { font-size: 12px; }
  .pill-meta { font-size: 10px; }
  /* hide 2 pills on very narrow screens to prevent overlap */
  .hero-pill-3 { display: none; }
  .hero-sparkle { width: 44px; height: 44px; top: -16px; right: -16px; }
  .hero-sparkle svg { width: 20px; height: 20px; }
}

/* ================================================================
   DISCOVER (search/filter/cards)
   ================================================================ */
.discover-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.disc-search-wrap { margin: 52px auto 38px; max-width: 640px; }
.disc-search-inner {
  display: flex; align-items: center;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.disc-search-inner:focus-within {
  border-color: var(--teal);
  box-shadow: var(--ring), var(--shadow-lg);
  transform: translateY(-2px);
}
.disc-search-icon {
  padding: 0 16px; color: var(--ink-muted);
  display: flex; align-items: center; flex-shrink: 0;
}
.disc-search-input {
  flex: 1; padding: 16px 0; border: none; background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--ink); outline: none;
}
.disc-search-input::placeholder { color: var(--ink-muted); }
.disc-search-btn {
  margin: 6px; padding: 11px 24px; border-radius: 11px;
  background: var(--gradient-primary);
  color: white; border: none; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all 0.25s var(--ease-out);
  letter-spacing: -0.1px;
  box-shadow: 0 4px 14px rgba(30,64,175,0.32);
}
.disc-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(30,64,175,0.45);
}

.disc-cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.disc-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: white;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
  transition: all 0.25s var(--ease-out);
  letter-spacing: -0.1px;
  box-shadow: var(--shadow-sm);
}
.disc-cat svg { width: 16px; height: 16px; flex-shrink: 0; }
.disc-cat:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.disc-cat.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 20px rgba(30,64,175,0.40);
}

.disc-panel { display: none; }
.disc-panel.active { display: block; animation: fadeUp 0.4s var(--ease-out); }

.disc-layout {
  display: grid; grid-template-columns: 248px 1fr;
  gap: 28px; align-items: start;
}
.disc-filters {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 24px;
  position: sticky; top: 96px;
  box-shadow: var(--shadow-sm);
}
.disc-filter-title {
  font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600;
  color: var(--ink); margin-bottom: 22px; letter-spacing: -0.2px;
  display: flex; align-items: center; justify-content: space-between;
}
.disc-clear {
  font-size: 12px; font-family: 'DM Sans', sans-serif;
  color: var(--teal-dark); cursor: pointer; font-weight: 600;
}
.disc-clear:hover { text-decoration: underline; }
.disc-fg { margin-bottom: 20px; }
.disc-fg:last-child { margin-bottom: 0; }
.disc-fl {
  font-size: 11.5px; font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; display: block;
}
.disc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.disc-pill {
  padding: 6px 13px; border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: var(--cream);
  font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
  transition: all 0.2s var(--ease-out);
  font-family: 'DM Sans', sans-serif; white-space: nowrap; user-select: none;
}
.disc-pill:hover {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal-dark);
}
.disc-pill.sel {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 10px rgba(30,64,175,0.35);
}

.disc-range { display: flex; gap: 8px; align-items: center; }
.disc-range-sep { font-size: 12px; color: var(--ink-muted); flex-shrink: 0; }
.disc-rinput {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: white;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ink);
  outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.disc-rinput:focus { border-color: var(--teal); box-shadow: var(--ring); }
.disc-divider { height: 1px; background: var(--border); margin: 18px 0; }

.disc-results-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.disc-count { font-size: 13.5px; color: var(--ink-muted); font-weight: 400; }
.disc-count strong { color: var(--ink); font-weight: 600; }
.disc-sort {
  padding: 8px 14px; border-radius: 10px; font-size: 13px;
  border: 1px solid var(--border-strong);
  background: white;
  font-family: 'DM Sans', sans-serif; color: var(--ink); cursor: pointer; outline: none;
  transition: border-color 0.2s;
}
.disc-sort:hover { border-color: var(--teal); }

.disc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.disc-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.35s var(--ease-out);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.disc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal);
}
.disc-card-img {
  height: 140px; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 100%);
}
.disc-card:hover .disc-card-img::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,64,175,0.10) 0%, rgba(245,158,11,0.10) 100%);
  pointer-events: none;
}
.disc-card-img svg { width: 44px; height: 44px; opacity: 0.85; }
.disc-card-body { padding: 16px 18px 14px; }
.disc-card-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px;
  margin-bottom: 9px; letter-spacing: 0.4px; text-transform: uppercase;
}
.disc-card-title {
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600;
  color: var(--ink); margin-bottom: 5px; letter-spacing: -0.2px; line-height: 1.3;
}
.disc-card-loc {
  font-size: 12.5px; color: var(--ink-muted);
  display: flex; align-items: center; gap: 4px;
}
.disc-card-loc svg { width: 13px; height: 13px; flex-shrink: 0; }
.disc-card-footer {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.disc-price {
  font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.3px;
}
.disc-price-unit {
  font-size: 12px; color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif; font-weight: 400;
}
.disc-mpills { display: flex; gap: 6px; flex-wrap: wrap; }
.disc-mpill {
  font-size: 11px; padding: 4px 9px; border-radius: 100px;
  background: var(--cream-dark);
  color: var(--ink-soft);
  font-weight: 500;
}
.disc-cta-row { margin-top: 52px; text-align: center; }

@media (max-width: 960px) {
  .disc-layout { grid-template-columns: 1fr; }
  .disc-filters { position: static; }
}
@media (max-width: 600px) {
  .disc-cards { grid-template-columns: 1fr; }
}

/* ================================================================
   CONTACT
   ================================================================ */
.contact-section { background: white; }
.contact-layout {
  display: grid; grid-template-columns: 1fr 1.55fr; gap: 64px;
  align-items: start; margin-top: 44px;
}
.contact-eyebrow {
  font-size: 12px; font-weight: 700; color: var(--teal-dark);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.contact-eyebrow::before {
  content:''; width: 22px; height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.contact-heading {
  font-family: 'Fraunces', serif; font-size: clamp(28px,3.5vw,42px);
  font-weight: 500; color: var(--ink); letter-spacing: -1px;
  line-height: 1.12; margin-bottom: 16px;
}
.contact-heading em {
  font-style: italic;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-sub {
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.7;
  font-weight: 400; margin-bottom: 38px;
}
.contact-info-items {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 32px;
}
.contact-info-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--border);
  transition: all 0.25s var(--ease-out);
}
.contact-info-item:hover {
  border-color: var(--teal);
  background: white;
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.contact-info-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.contact-info-icon svg { width: 20px; height: 20px; }
.contact-info-label {
  font-size: 11.5px; font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px;
}
.contact-info-value { font-size: 14px; color: var(--ink); font-weight: 500; line-height: 1.5; }
.contact-info-value a { color: var(--ink); text-decoration: none; }
.contact-info-value a:hover { color: var(--teal-dark); }

.contact-reg {
  font-size: 12.5px; color: var(--ink-muted); line-height: 1.6;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px dashed var(--border-strong); font-weight: 400;
  background: var(--cream);
}
.contact-reg strong { color: var(--ink-soft); font-weight: 600; }

.contact-form-card {
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  padding: 44px 48px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.contact-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradient-hero);
}
.contact-form-title {
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px; letter-spacing: -0.4px;
}
.contact-form-sub { font-size: 14.5px; color: var(--ink-muted); font-weight: 400; margin-bottom: 30px; }

.contact-textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--cream);
  color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 14.5px;
  outline: none; resize: vertical; min-height: 130px; line-height: 1.6;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.contact-textarea:focus {
  border-color: var(--teal);
  background: white;
  box-shadow: var(--ring);
}
.contact-textarea::placeholder { color: var(--ink-muted); }

.contact-success {
  display: none; text-align: center; padding: 44px 20px;
}
.contact-success.show { display: block; animation: fadeUp 0.4s var(--ease-out); }
.contact-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gradient-mint);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 12px 28px rgba(16,185,129,0.40);
}
.contact-success-icon svg { width: 28px; height: 28px; color: white; stroke: white; }
.contact-success h4 {
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;
  color: var(--ink); margin-bottom: 10px; letter-spacing: -0.4px;
}
.contact-success p { font-size: 14.5px; color: var(--ink-soft); font-weight: 400; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .contact-form-card { padding: 32px 26px; }
}

/* ================================================================
   ADMISSION FLOW
   ================================================================ */
.admission-section { background: white; }
.adm-journey {
  position: relative; margin-top: 48px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.adm-journey::after {
  content: ''; position: absolute;
  top: 28px; left: calc(10% + 4px); right: calc(10% + 4px); height: 3px;
  background: linear-gradient(90deg,
    var(--teal-light) 0%,
    var(--teal) 30%,
    var(--violet) 50%,
    var(--pink) 70%,
    var(--teal-light) 100%);
  z-index: 0;
  border-radius: 3px;
  background-size: 200% 100%;
  animation: gradient-shift 8s ease-in-out infinite;
}
.adm-step {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px;
}
.adm-step-circle {
  width: 60px; height: 60px; border-radius: 50%;
  background: white;
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 22px; flex-shrink: 0;
  box-shadow: 0 0 0 8px white, var(--shadow-sm);
  transition: all 0.35s var(--ease-spring);
}
.adm-step:hover .adm-step-circle {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  transform: scale(1.10);
  box-shadow: 0 0 0 8px white, 0 12px 24px rgba(30,64,175,0.40);
}

.adm-step-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.adm-step-icon svg { width: 22px; height: 22px; }
.adm-step h4 {
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600;
  color: var(--ink); text-align: center; margin-bottom: 8px; letter-spacing: -0.2px;
}
.adm-step p {
  font-size: 13px; color: var(--ink-muted); line-height: 1.6;
  text-align: center; font-weight: 400;
}

.adm-divider {
  display: flex; align-items: center; gap: 18px;
  margin: 44px 0 32px;
}
.adm-divider::before, .adm-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.adm-divider-text {
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500;
  color: var(--ink); white-space: nowrap; letter-spacing: -0.4px;
}
.adm-divider-text em {
  font-style: italic;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.adm-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.adm-tool {
  /* --accent / --accent-soft are set per-card inline; fallback to teal */
  --accent: var(--teal);
  --accent-soft: rgba(30,64,175,0.22);
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  border: 1px solid var(--border);
  /* Themed permanent top-edge accent — always visible, scales on hover */
  border-top: 3px solid var(--accent);
  transition:
    transform 0.35s var(--ease-spring),
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    background 0.35s var(--ease-out);
  position: relative; overflow: hidden;
}
/* Soft corner glow in the card's theme colour — subtle on idle,
   blooms on hover.  Uses a radial gradient pseudo so it doesn't
   fight the white background. */
.adm-tool::before {
  content: ''; position: absolute;
  top: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse at top right, var(--accent-soft), transparent 70%);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
  z-index: 0;
}
.adm-tool > * { position: relative; z-index: 1; }

.adm-tool:hover {
  transform: translateY(-5px);
  background: white;
  border-color: var(--accent);
  /* Colour-tinted lift shadow — depth in the card's own hue */
  box-shadow:
    0 22px 44px var(--accent-soft),
    0 6px 12px rgba(15,23,42,0.06);
}
.adm-tool:hover::before { opacity: 0.85; }

.adm-tool-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 18px;
}
.adm-tool h4 {
  font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600;
  color: var(--ink); margin-bottom: 9px; letter-spacing: -0.3px;
}
.adm-tool p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; font-weight: 400; }
.adm-tool-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 13px; font-weight: 600;
  /* Link colour matches the card's theme so each card visually owns its row */
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.2s var(--ease-out);
}
.adm-tool-link:hover { gap: 12px; }

.adm-cta {
  margin-top: 44px; text-align: center;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.adm-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(245,158,11,0.30), transparent 50%);
  pointer-events: none;
}
.adm-cta > * { position: relative; z-index: 1; }
.adm-cta h3 {
  font-family: 'Fraunces', serif; font-size: clamp(26px, 3vw, 36px); font-weight: 500;
  color: white; letter-spacing: -0.6px; margin-bottom: 12px;
}
.adm-cta h3 em {
  font-style: italic;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.adm-cta p { font-size: 16px; color: rgba(255,255,255,0.90); font-weight: 400; margin-bottom: 32px; }
.adm-cta-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .adm-journey { grid-template-columns: 1fr 1fr; gap: 36px; }
  .adm-journey::after { display: none; }
  .adm-step-circle { box-shadow: var(--shadow-sm); }
  .adm-tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .adm-journey { grid-template-columns: 1fr; }
  .adm-tools { grid-template-columns: 1fr; }
  .adm-cta { padding: 40px 26px; }
}

/* ================================================================
   PAGE BANNER (inner page hero) — LIGHT lavender→peach with blobs
   ================================================================ */
.page-banner {
  padding: 116px 5vw 64px;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(30,64,175,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 78%, rgba(245,158,11,0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute;
  top: -120px; left: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--gradient-primary);
  filter: blur(120px);
  opacity: 0.20;
  pointer-events: none;
  animation: float-slow 18s ease-in-out infinite;
}
.page-banner::after {
  content: '';
  position: absolute;
  bottom: -120px; right: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--gradient-warm);
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
  animation: float-slow 22s ease-in-out infinite reverse;
}
.page-banner-inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  animation: fadeUp 0.7s var(--ease-out) both;
}
.page-banner-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-banner-label::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.page-banner h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: var(--ink);
  margin-bottom: 20px;
}
.page-banner h1 em {
  font-style: italic;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-banner p {
  font-size: 17px;
  /* Brand-navy so banner descriptions match .section-sub site-wide.
     White halo keeps the text legible if a coloured 3D shape drifts
     directly behind a word. */
  color: var(--teal-dark);
  line-height: 1.7;
  font-weight: 500;
  max-width: 500px;
  text-shadow: 0 0 12px rgba(255,255,255,0.65), 0 1px 2px rgba(255,255,255,0.45);
}
.page-banner h1 {
  /* Existing h1 colour/size kept; add a subtle white halo so the
     headline pops in front of the canvas too. */
  text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 0 14px rgba(255,255,255,0.45);
}
.page-banner-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-banner-img img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 24px 48px rgba(30,64,175,0.20));
}

/* ── Collage variant: 3 circular cut-out portraits on coloured discs ── */
.page-banner-img.collage {
  position: relative;
  height: 360px;
  display: block;
  filter: none;
}
.page-banner-img.collage img {
  filter: none;
  border-radius: 50%;
  max-height: none;
}
.collage-circle {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* Thick coloured ring around the photo. --ring-color comes from
     the .cc-bg-* variant. --border-w is overridden per disc size. */
  border: var(--border-w, 8px) solid var(--ring-color, #fbbf24);
  box-sizing: border-box;
  /* Layered shadow: subtle inset highlight + lip + colour-tinted halo +
     soft contact shadow.  --halo is set per-variant below. */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.30),
    0 0 32px var(--halo, rgba(15,23,42,0.20)),
    0 22px 44px rgba(15,23,42,0.18);
  transition:
    scale 0.45s var(--ease-spring),
    box-shadow 0.45s var(--ease-out);
  cursor: pointer;
}
/* Glossy highlight overlay — sits above the photo so the whole disc
   reads like a single 3D object lit from upper-left.  Uses overlay
   blend so it works over any colour. */
.collage-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 50% at 30% 18%, rgba(255,255,255,0.50), transparent 60%),
    radial-gradient(ellipse 80% 70% at 75% 110%, rgba(15,23,42,0.18), transparent 60%);
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}
.collage-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Tiny saturation bump so the photo feels lively against the disc */
  filter: saturate(108%) contrast(102%);
  transition: filter 0.5s var(--ease-out);
}
/* Hover — scale gently and brighten.  Uses the independent `scale`
   property so it composes with the existing float keyframe transforms
   (no jump when the cursor enters). */
.collage-circle:hover {
  scale: 1.04;
  animation-play-state: paused;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -4px 0 rgba(15,23,42,0.12),
    0 0 60px var(--halo, rgba(15,23,42,0.30)),
    0 32px 60px rgba(15,23,42,0.24);
}
.collage-circle:hover img { filter: saturate(118%) contrast(105%); }

.collage-circle--center {
  width: 240px; height: 240px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  --border-w: 12px;
  animation: collage-float-center 7s ease-in-out infinite;
}
.collage-circle--left {
  width: 130px; height: 130px;
  left: 0; top: 16%;
  z-index: 1;
  --border-w: 7px;
  animation: collage-float-left 6s ease-in-out infinite 0.4s;
}
.collage-circle--right {
  width: 140px; height: 140px;
  right: 0; top: 20%;
  z-index: 1;
  --border-w: 7px;
  animation: collage-float-right 7.5s ease-in-out infinite 0.8s;
}
@keyframes collage-float-center {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1deg); }
  50%      { transform: translate(-50%, calc(-50% - 10px)) rotate(1deg); }
}
@keyframes collage-float-left {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
@keyframes collage-float-right {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%      { transform: translateY(-12px) rotate(-1deg); }
}

/* Coloured ring + halo per variant. --ring-color paints the chunky
   border around the photo; --halo tints the outer glow.  The disc
   background stays the same colour as a fallback while the image
   loads (so you never see a hollow white circle). */
.cc-bg-yellow { background: #fbbf24; --ring-color: #fbbf24; --halo: rgba(251,191,36,0.55); }
.cc-bg-coral  { background: #fbbf24; --ring-color: #fbbf24; --halo: rgba(251,191,36,0.55); }
.cc-bg-blue   { background: #06b6d4; --ring-color: #06b6d4; --halo: rgba(6,182,212,0.55); }
.cc-bg-mint   { background: #34d399; --ring-color: #34d399; --halo: rgba(52,211,153,0.50); }
.cc-bg-purple { background: #3b82f6; --ring-color: #3b82f6; --halo: rgba(59,130,246,0.50); }
.cc-bg-rose   { background: #f59e0b; --ring-color: #f59e0b; --halo: rgba(245,158,11,0.55); }
.cc-bg-indigo { background: #818cf8; --ring-color: #818cf8; --halo: rgba(129,140,248,0.55); }
.cc-bg-amber  { background: #fb923c; --ring-color: #fb923c; --halo: rgba(251,146,60,0.55); }
.cc-bg-pink   { background: #bae6fd; --ring-color: #bae6fd; --halo: rgba(186,230,253,0.65); }
.cc-bg-teal   { background: #2dd4bf; --ring-color: #2dd4bf; --halo: rgba(45,212,191,0.50); }
.cc-bg-lime   { background: #a3e635; --ring-color: #a3e635; --halo: rgba(163,230,53,0.50); }
.cc-bg-sky    { background: #38bdf8; --ring-color: #38bdf8; --halo: rgba(56,189,248,0.50); }

/* Photo fills the entire interior (inside the border).
   box-sizing: border-box on .collage-circle insets the content area
   by the border width, so 100% here = interior diameter. */
.collage-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .page-banner-img.collage { display: none; }
}
@media (max-width: 900px) {
  .page-banner { padding: 116px 5vw 64px; }
  .page-banner-inner { grid-template-columns: 1fr; gap: 36px; }
  .page-banner-img { display: none; }
}

/* ================================================================
   PARTNER SIGN-UP MODALS
   ================================================================ */
.pmodal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pmodal-overlay.open { opacity: 1; visibility: visible; }
.pmodal-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  width: 100%; max-width: 520px;
  padding: 40px 44px;
  position: relative; max-height: 90vh; overflow-y: auto;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s var(--ease-spring);
}
.pmodal-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradient-hero);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.pmodal-overlay.open .pmodal-card { transform: translateY(0) scale(1); }

.pmodal-close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--cream);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted);
  transition: all 0.2s var(--ease-out);
}
.pmodal-close:hover {
  background: var(--amber);
  color: white;
  border-color: var(--amber);
  transform: rotate(90deg);
}

.pmodal-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600;
  color: var(--ink); margin-bottom: 24px; text-decoration: none;
}
.pmodal-logo-icon {
  width: 30px; height: 30px;
  background: var(--gradient-primary);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(30,64,175,0.30);
}
.pmodal-logo-icon svg { width: 16px; height: 16px; fill: white; }
.pmodal-logo-img { display: block; height: 36px; width: auto; }

.pmodal-title {
  font-family: 'Fraunces', serif; font-size: 30px; font-weight: 500;
  letter-spacing: -0.6px; color: var(--ink); line-height: 1.15; margin-bottom: 6px;
}
.pmodal-sub {
  font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500;
  color: var(--teal-dark); margin-bottom: 30px; letter-spacing: -0.2px;
}

.pform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.pform-group { margin-bottom: 18px; }
.pform-group-inline { margin-bottom: 0; }
.pform-label {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--ink); margin-bottom: 7px; letter-spacing: -0.1px;
}
.pform-label .req { color: var(--amber); margin-right: 2px; }

.pform-input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--cream);
  color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 14.5px;
  outline: none;
  transition: all 0.18s var(--ease-out);
}
.pform-input:hover { border-color: var(--teal-light); }
.pform-input:focus {
  border-color: var(--teal);
  background: white;
  box-shadow: var(--ring);
}
.pform-input::placeholder { color: var(--ink-muted); }

.pform-phone-wrap {
  display: flex; align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--cream);
  overflow: hidden;
  transition: all 0.18s var(--ease-out);
}
.pform-phone-wrap:focus-within {
  border-color: var(--teal);
  background: white;
  box-shadow: var(--ring);
}
.pform-phone-prefix {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-right: 1px solid var(--border-strong);
  font-size: 14.5px; color: var(--ink); flex-shrink: 0; font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  background: white;
}
.pform-phone-input {
  flex: 1; padding: 12px 14px; border: none; background: transparent;
  color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 14.5px;
  outline: none;
}
.pform-phone-input::placeholder { color: var(--ink-muted); }

.pform-error { font-size: 12.5px; color: var(--amber); margin-top: 6px; display: none; font-weight: 500; }
.pform-error.show { display: block; animation: fadeIn 0.2s ease; }

.pform-pass-wrap { position: relative; }
.pform-pass-wrap .pform-input { padding-right: 44px; }
.pform-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--ink-muted);
  padding: 0; display: flex; align-items: center;
  transition: color 0.2s;
}
.pform-eye:hover { color: var(--teal-dark); }

.btn-pform-submit {
  width: 100%; padding: 14px; border-radius: 11px; margin-top: 10px;
  background: var(--gradient-primary);
  color: white; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
  cursor: pointer; letter-spacing: -0.2px;
  transition: all 0.25s var(--ease-out);
  box-shadow: 0 6px 18px rgba(30,64,175,0.36);
  position: relative; overflow: hidden;
}
.btn-pform-submit::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s var(--ease-out);
}
.btn-pform-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(30,64,175,0.50);
}
.btn-pform-submit:hover::after { transform: translateX(110%); }

.pform-divider {
  text-align: center; font-size: 13.5px; color: var(--ink-muted);
  margin: 18px 0 0;
}
.pform-divider a { color: var(--teal-dark); text-decoration: none; font-weight: 600; }
.pform-divider a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .pform-row { grid-template-columns: 1fr; gap: 0; }
  .pform-row > * { margin-bottom: 16px !important; }
  .pmodal-card { padding: 32px 24px; }
}

/* role tab selector */
.pmodal-role-tabs {
  display: flex; gap: 0; margin-bottom: 26px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px;
  background: var(--cream);
}
.pmodal-role-tab {
  flex: 1; padding: 10px 8px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500;
  color: var(--ink-muted);
  transition: all 0.2s var(--ease-out); letter-spacing: -0.1px;
}
.pmodal-role-tab:hover { color: var(--ink); }
.pmodal-role-tab.active {
  background: white; color: var(--teal-dark); font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.pform-forgot { text-align: right; margin-top: -10px; margin-bottom: 18px; }
.pform-forgot a {
  font-size: 13px; color: var(--teal-dark); text-decoration: none;
  font-weight: 500;
  transition: color 0.18s;
}
.pform-forgot a:hover { color: var(--violet); text-decoration: underline; }

.pform-org { display: none; }
.pform-org.show { display: block; animation: fadeUp 0.25s var(--ease-out); }

/* ================================================================
   CHATBOT WIDGET
   ================================================================ */
.chatbot-widget {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 200;
  font-family: 'DM Sans', sans-serif;
}
.chatbot-trigger {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--gradient-primary);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(30,64,175,0.45), 0 2px 6px rgba(0,0,0,0.10);
  transition: all 0.3s var(--ease-spring);
  position: relative;
}
.chatbot-trigger::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: var(--gradient-primary);
  opacity: 0.4;
  filter: blur(12px);
  z-index: -1;
  animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.10); opacity: 0.6; }
}
.chatbot-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 36px rgba(30,64,175,0.55);
}
.chatbot-trigger .trigger-close-icon { display: none; }
.chatbot-widget.open .trigger-chat-icon { display: none; }
.chatbot-widget.open .trigger-close-icon { display: block; }
.chatbot-widget.open .chatbot-trigger::before { animation: none; opacity: 0.2; }

.chatbot-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  background: var(--amber);
  color: white;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cream);
  animation: chatbadge 0.45s var(--ease-spring);
  box-shadow: 0 2px 8px rgba(245,158,11,0.40);
}
.chatbot-badge.hidden { display: none; }
@keyframes chatbadge {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.chatbot-window {
  position: absolute;
  bottom: 76px; right: 0;
  width: 380px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: scale(0.92) translateY(14px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease-spring), opacity 0.22s ease;
}
.chatbot-widget.open .chatbot-window {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}
.chatbot-header {
  background: var(--gradient-primary);
  padding: 18px 18px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}
.chatbot-header::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15), transparent 50%);
  pointer-events: none;
}
.chatbot-header-info { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.chatbot-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
  border: 2px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
}
.chatbot-name { font-size: 14.5px; font-weight: 700; color: white; }
.chatbot-status { font-size: 11.5px; color: rgba(255,255,255,0.80); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.chatbot-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 0 2px rgba(110,231,183,0.30);
  display: inline-block;
}
.chatbot-close {
  background: rgba(255,255,255,0.18);
  border: none; border-radius: 9px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: white;
  transition: all 0.2s ease;
  position: relative; z-index: 1;
}
.chatbot-close:hover { background: rgba(255,255,255,0.30); transform: scale(1.05); }

.chatbot-messages {
  flex: 1;
  padding: 18px;
  display: flex; flex-direction: column; gap: 11px;
  overflow-y: auto;
  max-height: 320px;
  scroll-behavior: smooth;
  background: var(--cream);
}
.chatbot-messages::-webkit-scrollbar { width: 5px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.chat-msg {
  display: flex; gap: 8px; align-items: flex-end;
  animation: chatfade 0.3s var(--ease-out);
}
@keyframes chatfade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg.bot  { justify-content: flex-start; }
.chat-msg.user { justify-content: flex-end; }
.chat-bubble {
  max-width: 80%;
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 13.5px; line-height: 1.55;
}
.chat-msg.bot .chat-bubble {
  background: white;
  color: var(--ink);
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.chat-msg.user .chat-bubble {
  background: var(--gradient-primary);
  color: white;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px rgba(30,64,175,0.30);
}

.chat-typing {
  display: flex; gap: 5px; align-items: center;
  padding: 4px 0;
}
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  animation: typingdot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingdot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

.chatbot-suggestions {
  padding: 4px 14px 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 0;
  background: var(--cream);
  border-top: 1px solid var(--border);
}
.chat-chip {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 6px 13px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s var(--ease-out);
}
.chat-chip:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,64,175,0.30);
}

.chatbot-input-row {
  padding: 12px 14px;
  display: flex; gap: 8px; align-items: center;
  background: white;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chatbot-input {
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; color: var(--ink);
  background: var(--cream);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.chatbot-input:focus {
  border-color: var(--teal);
  background: white;
  box-shadow: var(--ring);
}
.chatbot-input::placeholder { color: var(--ink-muted); }

.chatbot-send {
  width: 40px; height: 40px;
  background: var(--gradient-primary);
  color: white;
  border: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all 0.2s var(--ease-spring);
  box-shadow: 0 4px 12px rgba(30,64,175,0.35);
}
.chatbot-send:hover { transform: scale(1.06) rotate(-4deg); box-shadow: 0 8px 18px rgba(30,64,175,0.50); }
.chatbot-send:active { transform: scale(0.96); }

@media (max-width: 480px) {
  .chatbot-window { width: calc(100vw - 32px); right: 0; }
  .chatbot-widget { right: 16px; bottom: 20px; }
}

/* ================================================================
   ACCESSIBILITY HELPERS
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ================================================================
   PREMIUM ENHANCEMENTS LAYER v3
   Subtle, conversion-focused polish — layered on top of base system.
   "Less but better": each effect earns its place.
   ================================================================ */

/* ── Page loader ── */
.page-loader {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 22px;
  opacity: 1;
  transition: opacity 0.55s var(--ease-out), visibility 0.55s var(--ease-out);
  pointer-events: all;
}
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader-spinner {
  width: 46px; height: 46px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0deg, var(--teal) 90deg, var(--blue) 200deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: loader-spin 0.95s linear infinite;
}
.page-loader-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* ── Body fade-in on first paint, so loader → content is seamless ── */
body.is-loading { /* loader phase: keep content invisible */ }
body.is-loading > nav,
body.is-loading > section,
body.is-loading > div:not(.page-loader):not(.pmodal-overlay):not(.chatbot-widget),
body.is-loading > footer {
  opacity: 0;
}
body.is-ready > nav,
body.is-ready > section,
body.is-ready > div:not(.page-loader):not(.pmodal-overlay):not(.chatbot-widget),
body.is-ready > footer {
  animation: page-fade-in 0.7s var(--ease-out) both;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll progress bar (top of viewport) ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gradient-primary);
  z-index: 200;
  pointer-events: none;
  transition: width 0.12s linear;
  box-shadow: 0 0 10px rgba(30,64,175,0.50);
  border-radius: 0 3px 3px 0;
}

/* ── 3D tilt: JS writes inline transform on mousemove (inline beats :hover).
   This class only handles transition/easing + perf hints. ── */
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.tilt.is-tilting {
  transition: transform 0.06s linear, box-shadow 0.3s var(--ease-out);
}

/* ── Refined card hover: gentle lift + soft indigo glow ── */
.how-card,
.testimonial-card,
.stat-block {
  transition: transform 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out),
              border-color 0.3s var(--ease-out);
}
.how-card:hover,
.testimonial-card:hover {
  box-shadow:
    0 22px 50px rgba(30,64,175,0.18),
    0 8px 18px rgba(15,23,42,0.06),
    0 0 0 1px rgba(30,64,175,0.10);
}

/* ── Button ripple — click feedback ── */
.btn-hero-primary,
.btn-hero-secondary,
.btn-primary,
.btn-ghost,
.btn-pform-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.55);
  pointer-events: none;
  animation: ripple-expand 0.65s var(--ease-out) forwards;
  /* button has isolation:isolate so -1 is safely scoped, and stays below text */
  z-index: -1;
}
.btn-hero-secondary .btn-ripple,
.btn-ghost .btn-ripple {
  background: rgba(30,64,175,0.22);
}
@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Subtle press-down feedback on all primary CTAs ── */
.btn-hero-primary:active,
.btn-hero-secondary:active,
.btn-primary:active { transform: translateY(-1px) scale(0.985); }

/* ── Animated counters: tabular numerics prevent reflow during count-up ── */
.trust-num,
.stat-num,
.counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Staggered reveal: opt-in grid wrappers get auto-stagger ──
   Apply .reveal-stagger on the parent; child .reveal items animate in waves. */
.reveal-stagger > .reveal { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.40s; }

/* ── Parallax-ready hints (no-op without JS) ── */
.parallax {
  will-change: transform;
  transition: transform 0.12s linear;
}

/* ── Smooth focus-glow for inputs (premium feel) ── */
.pform-input:focus,
.chatbot-input:focus {
  box-shadow:
    0 0 0 4px rgba(30,64,175,0.12),
    0 2px 6px rgba(30,64,175,0.10);
}

/* ================================================================
   3D ICON SYSTEM — chunky, embossed depth on every icon badge.
   Works over both inline solid backgrounds AND existing gradient
   variants. No HTML changes required.
   ================================================================ */

/* Group A — icons sitting on flat pastel backgrounds (inline-styled).
   These get the full depth treatment: top highlight, bottom lip,
   tinted floating shadow. */
.how-icon,
.aio-icon,
.feat-icon,
.adm-step-icon,
.contact-info-icon {
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.85),
    inset 0 -2px 0 rgba(15,23,42,0.07),
    inset 0 0 0 0.5px rgba(255,255,255,0.30),
    0 10px 20px -4px rgba(30,64,175,0.22),
    0 3px 6px rgba(15,23,42,0.05);
  transition: transform 0.45s var(--ease-spring),
              box-shadow 0.45s var(--ease-out);
}

/* Group B — icons that already carry rich gradient backgrounds
   and color-tinted shadows from their variant classes. We only
   add the glossy highlight overlay and SVG depth here, leaving
   their existing box-shadow intact. */
.pill-icon,
.fi-icon {
  position: relative;
  isolation: isolate;
}

/* Shared glossy highlight — a pseudo-element layered over any
   background (color or gradient). Pseudo-elements don't conflict
   with inline `style="background: ..."` on the parent. */
.how-icon::before,
.aio-icon::before,
.feat-icon::before,
.adm-step-icon::before,
.contact-info-icon::before,
.pill-icon::before,
.fi-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 28% 16%, rgba(255,255,255,0.55), transparent 65%),
    radial-gradient(ellipse 85% 75% at 75% 115%, rgba(15,23,42,0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Push the SVG (and any other inner content) above the highlight. */
.how-icon > *,
.aio-icon > *,
.feat-icon > *,
.adm-step-icon > *,
.contact-info-icon > *,
.pill-icon > *,
.fi-icon > * {
  position: relative;
  z-index: 1;
}

/* Embossed look on the stroke icons themselves. */
.how-icon svg,
.aio-icon svg,
.feat-icon svg,
.adm-step-icon svg,
.contact-info-icon svg,
.pill-icon svg,
.fi-icon svg {
  filter: drop-shadow(0 1px 1.5px rgba(15,23,42,0.22));
  transition: transform 0.4s var(--ease-spring), filter 0.3s ease;
}

/* When a parent card is hovered, the icon's floating shadow deepens.
   We only touch box-shadow here so existing transform-based hover
   rotations (e.g. .how-card:hover .how-icon { transform: rotate(...) })
   keep working untouched. */
.how-card:hover .how-icon,
.aio-card:hover .aio-icon {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -2px 0 rgba(15,23,42,0.08),
    inset 0 0 0 0.5px rgba(255,255,255,0.40),
    0 18px 30px -6px rgba(30,64,175,0.35),
    0 6px 12px rgba(15,23,42,0.08);
}
.how-card:hover .how-icon svg,
.aio-card:hover .aio-icon svg {
  filter: drop-shadow(0 2px 3px rgba(15,23,42,0.28));
}

/* App feature checkmarks — small but they deserve the same polish. */
.app-check {
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(15,23,42,0.08),
    0 4px 9px -1px rgba(16,185,129,0.32),
    0 2px 4px rgba(15,23,42,0.05);
}
.app-check::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 30% 18%, rgba(255,255,255,0.55), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.app-check > * { position: relative; z-index: 1; }

/* Hero pulse-rings + sparkle already act 3D; the eyebrow dot at the
   top of the hero gets a matching emboss for visual continuity. */
.eyebrow-dot {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(15,23,42,0.10),
    0 4px 12px rgba(30,64,175,0.45);
}

/* ================================================================
   ADMISSION JOURNEY — REDESIGN v2 (Premium Timeline)
   Big 3D icon discs as the focal point, number badges floating at
   the top of each disc, animated gradient connector passing behind
   the discs (no more "struck-through" digits).
   ================================================================ */
.adm-journey {
  position: relative;
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* No connector line — replaced with arrows between steps (see below). */
.adm-journey::after { display: none; }

/* Arrow between adjacent steps. Positioned in the gap between
   each pair of columns, vertically aligned with the disc centres. */
.adm-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 70px;
  right: -14px;
  transform: translateY(-50%);
  width: 32px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14'><path d='M2 7 H24 M19 2 L25 7 L19 12' stroke='%231e40af' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-spring);
}
/* Hover anywhere in the journey nudges the arrows forward + brightens */
.adm-journey:hover .adm-step:not(:last-child)::after {
  opacity: 0.75;
  transform: translateY(-50%) translateX(2px);
}

.adm-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 12px 0;
  text-align: center;
}

/* Number badge — repurposes the existing .adm-step-circle.
   Floats at the top, half-overlapping the icon disc below. */
.adm-step-circle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal-dark);
  letter-spacing: -0.2px;
  margin: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 4px white,
    0 6px 14px rgba(30,64,175,0.20),
    0 2px 4px rgba(15,23,42,0.06);
  transition: background 0.4s var(--ease-out),
              color 0.4s var(--ease-out),
              transform 0.4s var(--ease-spring),
              box-shadow 0.4s var(--ease-out);
}

/* Big 3D icon disc — focal point of each step. */
.adm-step-icon {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
  /* Richer depth than the generic icon-system shadow */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.85),
    inset 0 -2.5px 0 rgba(15,23,42,0.10),
    inset 0 0 0 0.5px rgba(255,255,255,0.45),
    0 18px 32px -8px rgba(30,64,175,0.28),
    0 8px 14px rgba(15,23,42,0.07);
  transition: transform 0.4s var(--ease-spring),
              box-shadow 0.4s var(--ease-out);
}
.adm-step-icon svg {
  width: 32px;
  height: 32px;
}

/* Refine the highlight ellipse for the larger disc */
.adm-step-icon::before {
  background:
    radial-gradient(ellipse 60% 50% at 30% 18%, rgba(255,255,255,0.60), transparent 65%),
    radial-gradient(ellipse 80% 70% at 75% 115%, rgba(15,23,42,0.13), transparent 60%);
}

/* Hover the step — icon lifts, number badge flips to brand gradient.
   Override the original `.adm-step:hover .adm-step-circle` rule. */
.adm-step:hover .adm-step-icon {
  transform: translateY(-6px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -2.5px 0 rgba(15,23,42,0.12),
    inset 0 0 0 0.5px rgba(255,255,255,0.55),
    0 28px 46px -10px rgba(30,64,175,0.42),
    0 10px 18px rgba(15,23,42,0.10);
}
.adm-step:hover .adm-step-circle {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateX(-50%) scale(1.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 0 0 4px white,
    0 14px 28px rgba(30,64,175,0.55),
    0 4px 8px rgba(15,23,42,0.10);
}

.adm-step h4 {
  font-family: 'Fraunces', serif;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
  text-align: center;
}
.adm-step p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  font-weight: 400;
  max-width: 210px;
  margin: 0 auto;
  text-align: center;
}

/* Tablet — keep horizontal but reduce gaps and prose width */
@media (max-width: 1080px) {
  .adm-journey { gap: 8px; }
  .adm-step { padding: 28px 6px 0; }
  .adm-step-icon { width: 76px; height: 76px; border-radius: 22px; }
  .adm-step-icon svg { width: 28px; height: 28px; }
  .adm-step p { font-size: 12.5px; }
  .adm-step:not(:last-child)::after {
    top: 66px;
    right: -10px;
    width: 26px;
  }
}

/* Mobile — vertical timeline. Reuse the existing CSS grid by
   re-positioning each child via grid-row/grid-column (no HTML edits). */
@media (max-width: 760px) {
  .adm-journey {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 40px;
  }
  /* Downward arrow between stacked steps (vertical version).
     Sits fully inside the 28px row-gap between adjacent steps. */
  .adm-step:not(:last-child)::after {
    top: auto;
    bottom: -26px;
    right: auto;
    left: 40px;
    transform: translateX(-50%);
    width: 14px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'><path d='M7 2 V16 M2 12 L7 18 L12 12' stroke='%231e40af' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
  .adm-journey:hover .adm-step:not(:last-child)::after {
    transform: translateX(-50%) translateY(2px);
  }

  .adm-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 8px;
    align-items: start;
    padding: 0;
    text-align: left;
  }
  .adm-step-circle {
    position: static;
    transform: none;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    margin: 6px 0 0;
  }
  .adm-step-icon {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin: 0;
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }
  .adm-step-icon svg { width: 26px; height: 26px; }
  .adm-step h4 {
    grid-column: 2;
    grid-row: 1;
    margin: 6px 0 0;
    align-self: start;
    text-align: left;
    font-size: 17px;
  }
  .adm-step p {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin: 0;
    text-align: left;
  }
  .adm-step:hover .adm-step-circle {
    transform: scale(1.10);
  }
}

/* ================================================================
   CINEMATIC LAYER — WebGL hero canvas + layered depth backdrops
   Works with js/cinematic.js (three.js + GSAP ScrollTrigger).
   ================================================================ */

/* The hero needs to be a stacking context that contains the canvas
   and depth layers. It's already `position: relative` from earlier. */
.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Slight blur so geometry edges feel cinematic rather than crisp */
  filter: saturate(105%) contrast(102%);
  /* Hidden until cinematic.js boots and marks the body ready */
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
body.cinematic-ready .hero-3d-canvas { opacity: 1; }

/* Two layered backdrop "atmosphere" planes for added depth illusion.
   They sit between the canvas and the content. GSAP drives them on
   scroll via yPercent. They're purely decorative — no DOM clicks. */
.hero-depth-layer {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-depth-far {
  background:
    radial-gradient(ellipse 55% 40% at 18% 28%, rgba(30,64,175,0.10), transparent 65%),
    radial-gradient(ellipse 60% 45% at 82% 18%, rgba(245,158,11,0.08), transparent 65%);
  filter: blur(40px);
  opacity: 0.85;
}
.hero-depth-mid {
  background:
    radial-gradient(ellipse 40% 30% at 30% 75%, rgba(14,165,233,0.10), transparent 60%),
    radial-gradient(ellipse 50% 35% at 75% 80%, rgba(16,185,129,0.07), transparent 60%);
  filter: blur(24px);
  opacity: 0.9;
}

/* Lift hero content & visual above the new canvas/layers */
.hero-content,
.hero-visual {
  position: relative;
  z-index: 2;
}

/* Scope the z-index bump to the cinematic hero only — other pages
   that use `.hero` (e.g. studenthelpsquad.html) keep their original
   `z-index: -1` for the gradient blobs. */
.hero-cinematic::before,
.hero-cinematic::after { z-index: 0; }

/* Same treatment for page-banner across every other page: the
   decorative blobs render at z-index 0 so they sit alongside the
   canvas + depth layers (z-index 0) but below content (z-index 1+). */
.page-banner::before,
.page-banner::after { z-index: 0; }
/* When cinematic.js injects the canvas, put it (and its sibling
   depth layers) at the bottom of the stacking order. */
.page-banner > .hero-3d-canvas,
.page-banner > .hero-depth-layer { z-index: 0; }
.page-banner > .page-banner-inner { position: relative; z-index: 2; }

/* And the same for the Skills Development page's custom .skills-hero. */
.skills-hero::before,
.skills-hero::after { z-index: 0; }
.skills-hero > .hero-3d-canvas,
.skills-hero > .hero-depth-layer { z-index: 0; }
.skills-hero > .skills-hero-content { position: relative; z-index: 2; }

/* Text-heavy banners (every page except the home hero) cap the
   cinematic canvas opacity so the 3D shapes stay atmospheric and
   the headline + description read clearly in front of them. */
.page-banner > .hero-3d-canvas,
.skills-hero > .hero-3d-canvas {
  --cinematic-max-opacity: 0.55;
}
body.cinematic-ready .page-banner > .hero-3d-canvas,
body.cinematic-ready .skills-hero > .hero-3d-canvas {
  opacity: 0.55;
}

/* ================================================================
   GRADIENT-TEXT HALO — every italic emphasis word (the ones
   filled with a gradient via `background-clip: text`) gets a white
   drop-shadow halo so it reads cleanly when a 3D shape drifts
   directly behind it.  `filter: drop-shadow()` works correctly on
   gradient-clipped text (text-shadow only sees the glyph mask).
   ================================================================ */
.hero h1 em,
.page-banner h1 em,
.section-title em,
.contact-heading em,
.adm-divider-text em,
.cta-inner h2 em,
.display em,
.trust-num,
.how-num,
.audience-num,
.audience-row em,
.skills-hero h1 span,
.skills-hero h1 em {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.80))
    drop-shadow(0 0 8px rgba(255,255,255,0.55));
}

/* Reduced motion / small screens: hide the canvas + depth layers.
   cinematic.js also skips initialising the WebGL scene in these
   cases, so the page is exactly what it was before. */
@media (max-width: 760px) {
  .hero-3d-canvas { display: none; }
}

/* ── Reduced motion: respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tilt { transform: none !important; }
  .parallax { transform: none !important; }
  .hero-blob,
  .hero-ring,
  .hero-image-wrap,
  .hero-image-glow,
  .hero-sparkle { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-3d-canvas { display: none; }
  .hero-depth-layer { display: none; }
}

/* ================================================================
   AUDIENCE ROWS — replaces the old .audience-tabs / .tab-panel UI.
   Four roles stack vertically; image alternates left/right per row.
   ================================================================ */
.audience-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text visual";
  gap: 72px;
  align-items: center;
  margin-top: 88px;
  padding-top: 24px;
  position: relative;
}
.audience-row + .audience-row {
  border-top: 1px solid var(--border);
  padding-top: 72px;
}
.audience-row--flip {
  grid-template-areas: "visual text";
}
.audience-text   { grid-area: text; }
.audience-visual { grid-area: visual; }

/* Role header — chunky serif number + role title + tagline */
.audience-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}
.audience-num {
  flex-shrink: 0;
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2px;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.95;
}
.audience-role {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.8px;
  line-height: 1.1;
  margin: 0 0 6px;
}
.audience-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.1px;
  line-height: 1.5;
  margin: 0;
  max-width: 440px;
}

/* Image wrapper inside the row — adds gentle lift on hover */
.audience-visual .feature-image {
  position: relative;
  transition: transform 0.6s var(--ease-out);
}
.audience-row:hover .audience-visual .feature-image {
  transform: translateY(-4px);
}

/* Subtle floating animation per row — different phase so they don't
   all bob in sync (depth-illusion cue). */
.audience-row:nth-child(odd)  .audience-visual { animation: aud-float-a 9s ease-in-out infinite; }
.audience-row:nth-child(even) .audience-visual { animation: aud-float-b 11s ease-in-out infinite; }
@keyframes aud-float-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes aud-float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Tighten the feature-list spacing inside each row a touch */
.audience-row .feature-list { margin-top: 0; }
.audience-row .feature-item { padding: 18px 0; }
.audience-row .feature-item:first-child { padding-top: 0; }

/* Mobile — stack each row into a single column, image-first */
@media (max-width: 880px) {
  .audience-row,
  .audience-row--flip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "text";
    gap: 32px;
    margin-top: 56px;
    padding-top: 40px;
  }
  .audience-num { font-size: 36px; }
  .audience-role { font-size: 26px; }
  .audience-tagline { font-size: 15px; }
  .audience-row:nth-child(odd)  .audience-visual,
  .audience-row:nth-child(even) .audience-visual {
    animation: none;
  }
}

/* Reduced motion — kill the bobbing */
@media (prefers-reduced-motion: reduce) {
  .audience-row:nth-child(odd)  .audience-visual,
  .audience-row:nth-child(even) .audience-visual { animation: none !important; }
}