/* ================================================================
   AskCampus — Premium Design System v2
   Inspired by Linear, Vercel, Framer quality bar
   ================================================================ */

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #F1F5F9; background: #020817; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --blue:         #2563EB;
  --blue-bright:  #60A5FA;
  --blue-dark:    #1E40AF;
  --blue-deep:    #064E3B;
  --blue-light:   #EFF6FF;
  --violet:       #10B981;
  --violet-bright:#34D399;
  --violet-dark:  #047857;
  --violet-light: #ECFDF5;
  --cyan:         #06B6D4;
  --cyan-bright:  #22D3EE;
  --emerald:      #10B981;
  --amber:        #F59E0B;
  --rose:         #F43F5E;

  /* Surfaces — dark only */
  --bg-base:     #020817;
  --bg-surface:  #0F172A;
  --bg-elevated: #1E293B;
  --bg-high:     #334155;

  /* Legacy aliases */
  --dark-0:  #020817;
  --dark-1:  #0F172A;
  --dark-2:  #1E293B;
  --dark-3:  #334155;
  --dark-4:  #475569;

  /* Text */
  --text-1:   #F8FAFC;
  --text-2:   #CBD5E1;
  --text-3:   #64748B;
  --text-inv: #020817;

  /* Borders */
  --border-subtle:  rgba(255,255,255,.05);
  --border-default: rgba(255,255,255,.09);
  --border-strong:  rgba(255,255,255,.16);
  --border: rgba(255,255,255,.09);
  --border-dark: rgba(255,255,255,.09);

  /* Gradients */
  --grad-brand:    linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --grad-brand-r:  linear-gradient(135deg, #10B981 0%, #2563EB 100%);
  --grad-text:     linear-gradient(135deg, #60A5FA 0%, #34D399 50%, #34D399 100%);
  --grad-text-alt: linear-gradient(135deg, #F8FAFC 30%, #34D399 100%);
  --grad-hero:     linear-gradient(135deg, #1A2E6B 0%, #2D1B69 100%);
  --grad-surface:  linear-gradient(180deg, rgba(15,23,42,.0) 0%, rgba(15,23,42,1) 100%);

  /* Glow shadows */
  --glow-blue:   0 0 60px rgba(59,130,246,.35), 0 0 120px rgba(59,130,246,.15);
  --glow-violet: 0 0 60px rgba(16,185,129,.35), 0 0 120px rgba(16,185,129,.15);
  --glow-sm:     0 0 20px rgba(59,130,246,.2);
  --shadow-glow: 0 0 40px rgba(59,130,246,.25);
  --shadow-glow-v: 0 0 40px rgba(16,185,129,.25);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4);

  /* Light surfaces for dropdowns */
  --surface-0: #FFFFFF;
  --surface-1: #F8FAFC;
  --surface-2: #F1F5F9;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-3xl:  40px;
  --r-pill: 9999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Layout */
  --nav-h: 68px;
  --section-gap: 120px;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.container        { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container-wide   { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.container-narrow { width: 100%; max-width: 860px;  margin: 0 auto; padding: 0 28px; }

/* ── Typography ─────────────────────────────────────────────────── */
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-alt {
  background: var(--grad-text-alt);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 14px;
  border-radius: var(--r-pill); margin-bottom: 20px;
}
.eyebrow-blue   { background: rgba(59,130,246,.1);  color: var(--blue-bright); border: 1px solid rgba(59,130,246,.2); }
.eyebrow-violet { background: rgba(16,185,129,.1);  color: var(--violet-bright); border: 1px solid rgba(16,185,129,.2); }
.eyebrow-dark   { background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); border: 1px solid var(--border-default); }
.eyebrow-emerald { background: rgba(16,185,129,.1); color: #34D399; border: 1px solid rgba(16,185,129,.2); }

.section-title {
  font-size: clamp(30px, 4.5vw, 56px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.08;
  color: var(--text-1);
}
.section-sub {
  font-size: 17px; line-height: 1.8; color: var(--text-3);
  margin-top: 18px; max-width: 580px;
}
.section-header { text-align: center; }
.section-header .section-sub { margin-left: auto; margin-right: auto; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; line-height: 1;
  padding: 13px 26px; border-radius: var(--r-lg);
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap; position: relative; overflow: hidden;
  letter-spacing: -.01em;
}

/* Shimmer overlay for all buttons */
.btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.btn:hover::before { left: 150%; }

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset,
              0 4px 8px rgba(59,130,246,.25),
              0 12px 32px rgba(59,130,246,.2),
              0 0 0 1px rgba(59,130,246,.3);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset,
              0 6px 16px rgba(59,130,246,.35),
              0 20px 40px rgba(59,130,246,.25),
              0 0 0 1px rgba(59,130,246,.4);
}
.btn-primary:active { transform: translateY(0); }

/* Ghost button */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r-lg);
  font-size: 14px; font-weight: 700; font-family: inherit;
  background: rgba(255,255,255,.06);
  color: var(--text-2);
  border: 1px solid var(--border-default);
  cursor: pointer; text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
  position: relative; overflow: hidden; white-space: nowrap;
  letter-spacing: -.01em;
}
.btn-ghost::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-slow) var(--ease-out);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--border-strong);
  color: var(--text-1);
  transform: translateY(-1px);
}
.btn-ghost:hover::before { left: 150%; }
.btn-ghost:active { transform: translateY(0); }

/* Ghost dark (for light bg contexts) */
.btn-ghost-dark {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border-default);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.07); border-color: var(--border-strong); color: var(--text-1); }

.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: var(--r-md); }
.btn-lg { padding: 16px 36px; font-size: 16px; border-radius: var(--r-xl); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.6);
  border: 1px solid var(--border-default);
}

/* ── Navigation ─────────────────────────────────────────────────── */
.ac-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(2,8,23,.6);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.ac-nav.scrolled {
  background: rgba(2,8,23,.85);
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 32px rgba(0,0,0,.4);
}

.nav-inner {
  display: flex; align-items: center;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 32px; gap: 8px;
}

/* Logo */
.nav-logo {
  display: flex; align-items: center; gap: 3px;
  margin-right: 28px; flex-shrink: 0;
  font-size: 20px; font-weight: 900; letter-spacing: -.04em; color: #fff;
  text-decoration: none;
}
.nav-logo span {
  background: var(--grad-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Nav items */
.nav-menu, .nav-links {
  display: flex; align-items: center; gap: 2px; flex: 1;
}
.nav-item, .nav-links .nav-item { position: relative; }
.has-dropdown { position: relative; }

.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.65);
  transition: all var(--dur-fast);
}
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.07); }
.nav-link svg { width: 11px; height: 11px; transition: transform var(--dur-base); opacity: .5; }
.nav-item:hover .nav-link svg,
.has-dropdown:hover .nav-link svg { transform: rotate(180deg); opacity: 1; }

/* Dropdown */
.nav-dropdown {
  display: none; position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  background: #0F172A;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 6px rgba(0,0,0,.3), 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  padding: 8px; min-width: 230px; z-index: 300;
  animation: dropIn .15s var(--ease-out) both;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1); }
}
.nav-item:hover .nav-dropdown,
.has-dropdown:hover .nav-dropdown { display: block; }

.nav-dropdown .dd-link,
.dd-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.7); border-radius: var(--r-md);
  transition: all var(--dur-fast); text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown .dd-link:hover,
.dd-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-dropdown .dd-link.active,
.dd-link.active { color: var(--blue-bright); }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-sign {
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.6);
  padding: 7px 13px; border-radius: var(--r-sm); transition: all var(--dur-fast);
}
.nav-sign:hover { color: #fff; background: rgba(255,255,255,.07); }

/* Mobile hamburger */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; cursor: pointer; margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.7); border-radius: 2px;
  transition: all 200ms;
}

/* Mobile menu */
.mobile-menu {
  display: none; position: fixed;
  top: var(--nav-h); left: 0; right: 0; z-index: 490;
  background: rgba(9,15,31,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 24px 24px;
  flex-direction: column; gap: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.mobile-menu.open { display: flex; }
.mobile-link {
  display: block; padding: 12px 16px; font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.7); border-radius: var(--r-md);
  transition: all var(--dur-fast); text-decoration: none;
}
.mobile-link:hover { background: rgba(255,255,255,.07); color: #fff; }

/* ── Background FX — Aurora beams ──────────────────────────────── */
.aurora-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.aurora-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .55;
  animation: orbFloat 18s ease-in-out infinite alternate;
}
.aurora-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,.45) 0%, transparent 70%);
  top: -15%; left: -8%;
  animation-delay: 0s; animation-duration: 22s;
}
.aurora-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(16,185,129,.4) 0%, transparent 70%);
  top: -10%; right: -5%;
  animation-delay: -8s; animation-duration: 18s;
}
.aurora-orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,.3) 0%, transparent 70%);
  bottom: 5%; left: 30%;
  animation-delay: -14s; animation-duration: 24s;
}
@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 30px) scale(.97); }
  100% { transform: translate(15px, -10px) scale(1.03); }
}

/* Grid dot pattern */
.grid-pattern {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* Noise texture overlay */
.noise-overlay {
  position: absolute; inset: 0; z-index: 0;
  opacity: .03; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Light beam */
.light-beam {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 280px;
  background: linear-gradient(180deg, transparent, rgba(16,185,129,.6), transparent);
  pointer-events: none; z-index: 0;
}
.light-beam::after {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 280px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(16,185,129,.15), transparent);
  pointer-events: none;
}

/* ── Hero base ───────────────────────────────────────────────────── */
.hero-dark {
  background: var(--bg-base);
  position: relative; overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-mesh {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 20% 30%, rgba(59,130,246,.15) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 80% 20%, rgba(16,185,129,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 55% 85%, rgba(6,182,212,.06) 0%, transparent 55%);
  animation: meshFloat 14s ease-in-out infinite alternate;
}
@keyframes meshFloat {
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.04) translate(-1.5%,1%); }
  100% { transform: scale(1) translate(1%,-1%); }
}
.hero-grid-pattern {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 30%, transparent 100%);
}
.hero-noise {
  position: absolute; inset: 0; z-index: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Cards ───────────────────────────────────────────────────────── */

/* Base card */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: 28px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(59,130,246,.1);
  transform: translateY(-2px);
}

/* Gradient-border card — premium look */
.card-glow {
  position: relative; border-radius: var(--r-xl);
  background: var(--bg-surface);
  padding: 1px; /* border trick */
  transition: all var(--dur-base);
}
.card-glow::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(16,185,129,.2), rgba(6,182,212,.1));
  opacity: 0; transition: opacity var(--dur-base);
}
.card-glow:hover::before { opacity: 1; }
.card-glow-inner {
  background: var(--bg-surface);
  border-radius: calc(var(--r-xl) - 1px);
  padding: 28px; height: 100%;
}

/* Glass card */
.card-glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-xl);
  padding: 28px;
  transition: all var(--dur-base);
}
.card-glass:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}

/* Bento card — for grid layouts */
.bento-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-2xl);
  overflow: hidden;
  position: relative;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.bento-card:hover {
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 0 0 1px rgba(59,130,246,.1), 0 12px 40px rgba(0,0,0,.4);
  transform: translateY(-2px);
}
.bento-card-inner { padding: 28px 28px 24px; height: 100%; }

/* Feature icon container */
.feature-icon-wrap {
  width: 48px; height: 48px; border-radius: var(--r-lg);
  display: grid; place-items: center; font-size: 22px;
  margin-bottom: 16px; position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  transition: all var(--dur-base);
}
.feature-icon-wrap.blue   { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.2); }
.feature-icon-wrap.violet { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.2); }
.feature-icon-wrap.cyan   { background: rgba(6,182,212,.1);   border-color: rgba(6,182,212,.2); }
.feature-icon-wrap.emerald{ background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.2); }
.feature-icon-wrap.amber  { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.2); }

/* ── Stats ───────────────────────────────────────────────────────── */
.stat-number {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-label { font-size: 14px; color: var(--text-3); margin-top: 8px; font-weight: 500; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.stat-item {
  padding: 32px 28px; background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-align: center;
  transition: background var(--dur-base);
}
.stat-item:first-child { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.stat-item:last-child  { border-radius: 0 var(--r-xl) var(--r-xl) 0; }
.stat-item:hover { background: rgba(59,130,246,.05); }

/* ── Testimonials ────────────────────────────────────────────────── */
.testi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-2xl);
  padding: 28px; position: relative;
  transition: all var(--dur-base);
}
.testi-card:hover {
  border-color: rgba(16,185,129,.25);
  box-shadow: 0 0 0 1px rgba(16,185,129,.08), 0 16px 40px rgba(0,0,0,.35);
}
.testi-quote {
  font-size: .95rem; line-height: 1.75;
  color: var(--text-2); font-style: italic; margin-bottom: 20px;
}
.testi-author { display: flex; gap: 12px; align-items: center; }
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: var(--grad-brand); flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.1);
}
.testi-name { font-size: .9rem; font-weight: 700; color: var(--text-1); }
.testi-role { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.testi-stars { color: #FBBF24; font-size: .85rem; margin-bottom: 14px; letter-spacing: 2px; }

/* ── Reveal animations ───────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-up {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }
.reveal-scale {
  opacity: 0; transform: scale(.97);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.d1 { transition-delay: .06s; }
.d2 { transition-delay: .12s; }
.d3 { transition-delay: .18s; }
.d4 { transition-delay: .24s; }
.d5 { transition-delay: .30s; }
.d6 { transition-delay: .36s; }

/* ── Marquee ─────────────────────────────────────────────────────── */
.marquee-wrap { overflow: hidden; position: relative; }
.marquee-wrap::before, .marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg-base), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--bg-base), transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-default);
  font-size: 13px; font-weight: 600; color: var(--text-3);
  white-space: nowrap; flex-shrink: 0;
  transition: all var(--dur-fast);
}
.marquee-item:hover { border-color: var(--border-strong); color: var(--text-2); }

/* ── Accordion ───────────────────────────────────────────────────── */
.accordion-item {
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-surface);
  transition: border-color var(--dur-base);
}
.accordion-item.open { border-color: rgba(59,130,246,.3); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 20px 24px; text-align: left;
  font-size: .95rem; font-weight: 700; color: var(--text-1);
  cursor: pointer; transition: color var(--dur-fast);
}
.accordion-trigger:hover { color: var(--blue-bright); }
.accordion-trigger::after {
  content: '+'; font-size: 20px; font-weight: 400;
  color: var(--text-3); flex-shrink: 0;
  transition: transform var(--dur-base), color var(--dur-base);
}
.accordion-item.open .accordion-trigger::after { transform: rotate(45deg); color: var(--blue-bright); }
.accordion-content {
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease-in-out), padding var(--dur-base);
  padding: 0 24px;
}
.accordion-item.open .accordion-content { max-height: 400px; padding: 0 24px 20px; }
.accordion-content p { font-size: .88rem; color: var(--text-3); line-height: 1.75; }

/* ── Tab system ──────────────────────────────────────────────────── */
.tab-strip {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg); padding: 4px;
  width: fit-content; margin-bottom: 32px;
}
.tab-btn {
  padding: 8px 18px; border-radius: calc(var(--r-md) - 2px);
  border: none; background: transparent;
  color: var(--text-3); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast);
  font-family: inherit;
}
.tab-btn:hover { color: var(--text-1); }
.tab-btn.active {
  background: rgba(59,130,246,.15);
  color: var(--blue-bright);
  box-shadow: 0 0 0 1px rgba(59,130,246,.2);
}
.tab-panel { display: none; animation: fadeIn .2s var(--ease-out); }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Section spacing ─────────────────────────────────────────────── */
.section-gap    { padding: 96px 0; }
.section-gap-sm { padding: 64px 0; }
.section-gap-lg { padding: 128px 0; }

/* ── Divider gradient ────────────────────────────────────────────── */
.divider-gradient {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
}

/* ── Trust logos ─────────────────────────────────────────────────── */
.trust-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-subtle);
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.35);
  transition: all var(--dur-base); white-space: nowrap;
}
.trust-logo:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); border-color: var(--border-default); }

/* ── CTA Band ────────────────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-3xl);
  background: linear-gradient(135deg, #0F172A 0%, #022C22 50%, #0F172A 100%);
  border: 1px solid rgba(16,185,129,.2);
  padding: 80px 60px; text-align: center;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(16,185,129,.15), transparent);
  pointer-events: none;
}
.cta-band::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(16,185,129,.15), rgba(6,182,212,.08));
  z-index: -1;
}
.cta-band h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900; letter-spacing: -.03em; color: #fff;
  margin-bottom: 16px; position: relative;
}
.cta-band p { font-size: 17px; color: var(--text-3); margin-bottom: 36px; position: relative; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ── Page hero (solution/product pages) ──────────────────────────── */
.page-hero {
  background: var(--bg-base); padding: calc(var(--nav-h) + 64px) 0 80px;
  text-align: center; position: relative; overflow: hidden;
}
.page-hero h1 { font-size: clamp(32px, 5vw, 64px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; color: var(--text-1); }
.page-hero p  { font-size: 17px; color: var(--text-3); line-height: 1.8; margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; }
.page-hero-actions { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Pricing toggle ──────────────────────────────────────────────── */
.toggle-track {
  width: 52px; height: 28px;
  background: rgba(59,130,246,.25);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: var(--r-pill);
  cursor: pointer; position: relative;
  transition: background .3s;
}
.toggle-track.annual { background: rgba(59,130,246,.5); }
.toggle-thumb {
  width: 22px; height: 22px; background: #fff;
  border-radius: 50%; position: absolute; top: 2px; left: 3px;
  transition: transform .3s var(--ease-spring);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.toggle-track.annual .toggle-thumb { transform: translateX(24px); }

/* ── Footer ─────────────────────────────────────────────────────── */
.ac-footer {
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  padding: 80px 0 0;
}
.footer-top {
  display: grid; grid-template-columns: 280px repeat(4, 1fr);
  gap: 48px; padding-bottom: 64px;
}
.footer-grid {
  display: grid; grid-template-columns: 280px repeat(2, 1fr);
  gap: 48px; padding-bottom: 64px;
}
.footer-brand p { font-size: 13px; color: var(--text-3); line-height: 1.7; margin-bottom: 20px; max-width: 240px; }
.footer-logo {
  font-size: 20px; font-weight: 900; letter-spacing: -.04em;
  color: #fff; margin-bottom: 14px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 3px;
}
.footer-logo span {
  background: var(--grad-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--grad-brand); display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; margin-right: 8px; }
.footer-logo-name { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: -.03em; }
.footer-tagline { font-size: 13px; color: var(--text-3); line-height: 1.7; margin-bottom: 24px; max-width: 240px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06); border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-3); transition: all var(--dur-fast);
}
.footer-social a:hover { background: rgba(255,255,255,.1); color: var(--text-1); }
.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.footer-badges .badge, .footer-badges span {
  padding: 3px 10px; border-radius: var(--r-xs); font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.4);
  border: 1px solid var(--border-subtle);
}
.footer-col h4, .footer-col h5 {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13px; color: var(--text-3); transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--text-1); }
.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding: 24px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-bottom p, .footer-bottom-left { font-size: 12px; color: var(--text-3); }
.footer-bottom a { color: var(--text-3); transition: color var(--dur-fast); }
.footer-bottom a:hover { color: var(--text-1); }
.footer-bottom-center { display: flex; gap: 8px; }
.footer-badge { padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.05); color: rgba(255,255,255,.35); border: 1px solid var(--border-subtle); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 12px; color: var(--text-3); }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shimmer {
  from { left: -100%; }
  to   { left: 150%; }
}

/* ── Utility ─────────────────────────────────────────────────────── */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .footer-top  { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .stats-row   { grid-template-columns: repeat(2, 1fr); }
  .stat-item:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .stat-item:last-child  { border-radius: 0 0 var(--r-xl) var(--r-xl); }
}
@media (max-width: 768px) {
  :root { --nav-h: 60px; --section-gap: 80px; }
  .container, .container-wide, .container-narrow { padding: 0 20px; }
  .nav-menu, .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-actions .btn { display: none; }
  .section-gap    { padding: 72px 0; }
  .section-gap-lg { padding: 88px 0; }
  .section-sub    { font-size: 15px; }
  .footer-top  { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .stats-row   { grid-template-columns: 1fr 1fr; }
  .cta-band    { padding: 56px 28px; border-radius: var(--r-2xl); }
}
@media (max-width: 480px) {
  .footer-top, .footer-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .cta-band-actions { flex-direction: column; align-items: stretch; }
  .cta-band-actions .btn { justify-content: center; }
  .stat-item:first-child, .stat-item:last-child { border-radius: 0; }
  .stats-row .stat-item:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .stats-row .stat-item:last-child  { border-radius: 0 0 var(--r-xl) var(--r-xl); }
}

/* ════════════════════════════════════════════════════════════════
   v3 — Content-rich components (NeverSkip/PowerSchool style)
   Less aurora spam, more substance.
   ════════════════════════════════════════════════════════════════ */

/* ── Light sections (break the all-dark monotony) ──────────────── */
.section-light {
  background: #F8FAFC;
  color: #0F172A;
  position: relative;
}
.section-cream {
  background: #FAF8F4;
  color: #1A1A1A;
  position: relative;
}
.section-light .eyebrow,
.section-cream .eyebrow {
  background: rgba(59,130,246,.08);
  color: #1E40AF;
  border: 1px solid rgba(59,130,246,.2);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 9999px;
  margin-bottom: 18px;
}
.section-light h2,
.section-cream h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  color: #0F172A;
}
.section-light .lede,
.section-cream .lede {
  font-size: 17px; line-height: 1.7; color: #475569;
  margin-top: 16px; max-width: 620px;
}
.section-light .text-muted,
.section-cream .text-muted { color: #64748B; }

/* ── Customer logo wall ───────────────────────────────────────── */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-top: 1px solid #E2E8F0;
  border-left: 1px solid #E2E8F0;
}
.logo-wall .logo-cell {
  border-right: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  padding: 28px 16px;
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  color: #64748B;
  text-align: center; line-height: 1.25;
  transition: all 200ms;
  background: #fff;
}
.logo-wall .logo-cell:hover {
  background: #F1F5F9;
  color: #0F172A;
}
.logo-wall.dark { border-color: rgba(255,255,255,.06); }
.logo-wall.dark .logo-cell {
  background: transparent; color: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.06);
}
.logo-wall.dark .logo-cell:hover { background: rgba(255,255,255,.03); color: rgba(255,255,255,.8); }

/* ── Big number stats (NeverSkip uses these heavily) ──────────── */
.stats-big {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  margin: 0;
}
.stats-big .stat-cell {
  padding: 56px 32px;
  border-right: 1px solid #E2E8F0;
  text-align: left;
}
.stats-big .stat-cell:last-child { border-right: none; }
.stats-big .stat-num {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: #0F172A;
  font-feature-settings: "tnum";
}
.stats-big .stat-num .accent { color: #1D4ED8; }
.stats-big .stat-label {
  font-size: 13px; font-weight: 600; color: #64748B;
  margin-top: 12px; line-height: 1.5;
}
.stats-big.dark { border-color: rgba(255,255,255,.08); }
.stats-big.dark .stat-cell { border-color: rgba(255,255,255,.08); }
.stats-big.dark .stat-num { color: #F8FAFC; }
.stats-big.dark .stat-num .accent { color: #60A5FA; }
.stats-big.dark .stat-label { color: rgba(203,213,225,.7); }

/* ── Module category card ─────────────────────────────────────── */
.module-cat-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  transition: border-color 250ms, transform 250ms;
}
.module-cat-card:hover {
  border-color: #94A3B8;
  transform: translateY(-2px);
}
.module-cat-card .mc-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: #EFF6FF; color: #1D4ED8;
  display: grid; place-items: center; font-size: 22px;
  margin-bottom: 16px;
}
.module-cat-card.cat-finance .mc-icon { background: #ECFDF5; color: #059669; }
.module-cat-card.cat-people  .mc-icon { background: #ECFDF5; color: #059669; }
.module-cat-card.cat-ops     .mc-icon { background: #FEF3C7; color: #1D4ED8; }
.module-cat-card.cat-comm    .mc-icon { background: #DBEAFE; color: #1E40AF; }
.module-cat-card.cat-comp    .mc-icon { background: #DBEAFE; color: #2563EB; }
.module-cat-card h3 {
  font-size: 17px; font-weight: 800; color: #0F172A;
  letter-spacing: -.02em; margin-bottom: 6px;
}
.module-cat-card p {
  font-size: 13px; color: #64748B; line-height: 1.55; margin-bottom: 16px;
}
.module-cat-card .mc-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.module-cat-card .mc-list span {
  font-size: 12px; font-weight: 500; color: #475569;
  background: #F1F5F9; padding: 4px 10px; border-radius: 6px;
}

/* ── Story (testimonial) card with avatar — NeverSkip style ────── */
.story-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 20px;
  transition: border-color 250ms, box-shadow 250ms;
}
.story-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 12px 24px -8px rgba(15,23,42,.08);
}
.story-quote {
  font-size: 18px; line-height: 1.6; color: #1E293B;
  font-weight: 500; letter-spacing: -.01em;
  flex: 1;
}
.story-quote::before {
  content: '"'; display: block; font-size: 36px;
  font-weight: 900; color: #1D4ED8; line-height: 1;
  margin-bottom: 4px;
}
.story-meta {
  display: flex; align-items: center; gap: 14px;
  padding-top: 20px; border-top: 1px solid #F1F5F9;
}
.story-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.story-avatar.av-1 { background: linear-gradient(135deg, #2563EB, #1E40AF); }
.story-avatar.av-2 { background: linear-gradient(135deg, #10B981, #047857); }
.story-avatar.av-3 { background: linear-gradient(135deg, #1D4ED8, #1E3A8A); }
.story-avatar.av-4 { background: linear-gradient(135deg, #10B981, #047857); }
.story-avatar.av-5 { background: linear-gradient(135deg, #F59E0B, #B45309); }
.story-avatar.av-6 { background: linear-gradient(135deg, #06B6D4, #0E7490); }
.story-name {
  font-size: 14px; font-weight: 700; color: #0F172A; letter-spacing: -.01em;
}
.story-role {
  font-size: 12px; color: #64748B; margin-top: 2px;
}
.story-school {
  font-size: 12px; color: #475569; font-weight: 600; margin-top: 2px;
}
.story-result {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 12px; font-weight: 700; color: #059669;
  background: #ECFDF5; border: 1px solid #A7F3D0;
  padding: 4px 10px; border-radius: 6px;
  width: fit-content;
}

/* ── Multi-platform showcase (Web + Teacher + Parent + Student) ── */
.platforms-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.platform-card {
  background: #0F172A;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
}
.platform-card .pc-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(59,130,246,.12); color: #60A5FA;
  display: grid; place-items: center; font-size: 22px;
  margin-bottom: 18px;
}
.platform-card h4 {
  font-size: 15px; font-weight: 800; color: #F8FAFC; letter-spacing: -.01em;
  margin-bottom: 6px;
}
.platform-card p {
  font-size: 13px; color: rgba(203,213,225,.65); line-height: 1.55;
  margin-bottom: 18px;
}
.platform-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.platform-card ul li {
  font-size: 12px; color: rgba(203,213,225,.7);
  display: flex; gap: 8px;
}
.platform-card ul li::before {
  content: '✓'; color: #60A5FA; font-weight: 700;
}
.platform-store {
  display: flex; gap: 8px; margin-top: 16px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4);
}

/* ── Implementation timeline ──────────────────────────────────── */
.impl-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative;
}
.impl-step {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  position: relative;
}
.impl-step .impl-num {
  font-size: 11px; font-weight: 700; color: #1D4ED8;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.impl-step h4 {
  font-size: 16px; font-weight: 800; color: #0F172A; letter-spacing: -.01em;
  margin-bottom: 6px;
}
.impl-step .impl-when {
  font-size: 12px; color: #64748B; margin-bottom: 12px;
}
.impl-step p {
  font-size: 13px; color: #475569; line-height: 1.6;
}

/* ── Awards strip ─────────────────────────────────────────────── */
.awards-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  background: #0F172A;
}
.awards-row .award {
  padding: 24px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.awards-row .award:last-child { border-right: none; }
.award-icon {
  font-size: 24px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 10px;
  color: #FBBF24;
}
.award-name {
  font-size: 11px; font-weight: 700; color: #F8FAFC;
  letter-spacing: -.01em; line-height: 1.3;
}
.award-year {
  font-size: 10px; color: rgba(203,213,225,.5);
}

/* ── Press strip ──────────────────────────────────────────────── */
.press-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
}
.press-strip .press-logo {
  flex: 1;
  min-width: 160px;
  padding: 32px 20px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; font-weight: 700;
  color: #94A3B8; letter-spacing: -.01em;
  border-right: 1px solid #E2E8F0;
}
.press-strip .press-logo:last-child { border-right: none; }
.press-strip .press-logo i {
  font-style: italic; font-weight: 600;
}

/* ── Resource cards (article previews) ────────────────────────── */
.resource-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 250ms, box-shadow 250ms;
  display: flex; flex-direction: column;
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -10px rgba(15,23,42,.1);
}
.resource-thumb {
  height: 160px;
  background: linear-gradient(135deg, #DBEAFE 0%, #DBEAFE 50%, #F3E8FF 100%);
  position: relative;
  display: grid; place-items: center;
  font-size: 48px;
}
.resource-card.r-2 .resource-thumb { background: linear-gradient(135deg, #DCFCE7 0%, #A7F3D0 50%, #5EEAD4 100%); }
.resource-card.r-3 .resource-thumb { background: linear-gradient(135deg, #FEF3C7 0%, #BFDBFE 50%, #BFDBFE 100%); }
.resource-body { padding: 22px 24px 26px; }
.resource-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: #1D4ED8; text-transform: uppercase; margin-bottom: 10px;
}
.resource-title {
  font-size: 16px; font-weight: 800; color: #0F172A;
  letter-spacing: -.01em; line-height: 1.35; margin-bottom: 8px;
}
.resource-meta {
  font-size: 12px; color: #64748B; margin-top: 14px;
  display: flex; gap: 12px; align-items: center;
}

/* ── FAQ accordion (NeverSkip-style detailed) ─────────────────── */
.faq-list {
  max-width: 780px; margin: 48px auto 0;
}
.faq-list .faq-item {
  border-bottom: 1px solid #E2E8F0;
  background: transparent;
  border-radius: 0;
}
.faq-list .faq-q {
  padding: 24px 0; font-size: 17px; font-weight: 700;
  color: #0F172A; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  letter-spacing: -.01em;
  transition: color 200ms;
}
.faq-list .faq-q:hover { color: #1D4ED8; }
.faq-list .faq-q .arrow {
  width: 28px; height: 28px;
  border: 1.5px solid #CBD5E1; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; color: #64748B;
  transition: transform 250ms;
  flex-shrink: 0; margin-left: 16px;
}
.faq-list .faq-item.open .faq-q .arrow {
  background: #1D4ED8; border-color: #1D4ED8; color: #fff;
  transform: rotate(45deg);
}
.faq-list .faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 350ms ease;
}
.faq-list .faq-item.open .faq-a { max-height: 400px; }
.faq-list .faq-a p {
  padding: 0 0 24px; font-size: 15px;
  color: #475569; line-height: 1.7;
}

/* ── Differentiator card (icon + title + bullets) ─────────────── */
.diff-card {
  background: #0F172A;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 30px 28px;
}
.diff-card .diff-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(59,130,246,.1);
  display: grid; place-items: center; font-size: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(59,130,246,.2);
}
.diff-card h3 {
  font-size: 17px; font-weight: 800; color: #F8FAFC;
  letter-spacing: -.02em; margin-bottom: 8px;
}
.diff-card p {
  font-size: 13px; color: rgba(203,213,225,.65); line-height: 1.65;
  margin-bottom: 16px;
}
.diff-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.diff-card ul li {
  font-size: 12px; color: rgba(203,213,225,.75);
  padding-left: 16px; position: relative; line-height: 1.5;
}
.diff-card ul li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: #60A5FA;
}

/* ── Compliance badge row (DPDP, NEP, etc.) ───────────────────── */
.compliance-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.comp-pill {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
}
.comp-pill .cp-name {
  font-size: 14px; font-weight: 800; color: #0F172A; letter-spacing: -.01em;
  margin-bottom: 4px;
}
.comp-pill .cp-desc {
  font-size: 11px; color: #64748B; line-height: 1.4;
}

/* ── Pricing teaser (small) ───────────────────────────────────── */
.pricing-teaser {
  background: #0F172A;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 48px 40px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 40px;
}
.pricing-teaser h3 {
  font-size: 28px; font-weight: 800; color: #F8FAFC;
  letter-spacing: -.02em; margin-bottom: 8px;
}
.pricing-teaser p {
  font-size: 15px; color: rgba(203,213,225,.65); line-height: 1.65;
}
.pricing-teaser-amounts {
  display: flex; gap: 32px;
}
.pta-block {
  text-align: left;
}
.pta-num {
  font-size: 24px; font-weight: 800; color: #60A5FA;
  letter-spacing: -.02em;
}
.pta-label {
  font-size: 11px; color: rgba(203,213,225,.55);
  text-transform: uppercase; letter-spacing: .1em; margin-top: 4px;
}

/* Mobile responsive for new components */
@media (max-width: 1100px) {
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
  .stats-big { grid-template-columns: repeat(2, 1fr); }
  .stats-big .stat-cell { border-bottom: 1px solid #E2E8F0; }
  .platforms-row { grid-template-columns: repeat(2, 1fr); }
  .impl-timeline { grid-template-columns: repeat(2, 1fr); }
  .awards-row { grid-template-columns: repeat(3, 1fr); }
  .compliance-row { grid-template-columns: repeat(3, 1fr); }
  .pricing-teaser { grid-template-columns: 1fr; }
  .pricing-teaser-amounts { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .stats-big { grid-template-columns: 1fr; }
  .platforms-row { grid-template-columns: 1fr; }
  .impl-timeline { grid-template-columns: 1fr; }
  .awards-row { grid-template-columns: repeat(2, 1fr); }
  .compliance-row { grid-template-columns: repeat(2, 1fr); }
  .stats-big .stat-cell { padding: 36px 24px; }
}

/* ════════════════════════════════════════════════════════════════
   v4 — Enterprise components (problem/solution, verticals, 
   competitive matrix, integrations, demo booking, sticky CTAs)
   ════════════════════════════════════════════════════════════════ */

/* ── Problem statement cards ──────────────────────────────────── */
.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid #1E293B; border-radius: 16px; overflow: hidden;
  background: #0B1220;
}
.problem-card {
  padding: 32px;
  border-right: 1px solid #1E293B;
  border-bottom: 1px solid #1E293B;
}
.problem-card:nth-child(3n) { border-right: none; }
.problem-card:nth-last-child(-n+3) { border-bottom: none; }
.problem-card .pc-num {
  display: inline-block; width: 28px; height: 28px;
  border: 1.5px solid #DC2626; color: #F87171;
  border-radius: 50%; text-align: center; line-height: 26px;
  font-size: 13px; font-weight: 800;
  margin-bottom: 16px;
}
.problem-card h4 {
  font-size: 16px; font-weight: 800; color: #F8FAFC;
  letter-spacing: -.01em; line-height: 1.3; margin-bottom: 8px;
}
.problem-card p {
  font-size: 13.5px; color: rgba(203,213,225,.65); line-height: 1.6;
}
.problem-card .pc-stat {
  margin-top: 14px; font-size: 11px;
  color: #FBBF24; font-weight: 700;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.2);
  padding: 4px 10px; border-radius: 9999px;
  display: inline-block;
}

/* ── Solution flow diagram ────────────────────────────────────── */
.solution-flow {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 48px;
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 40px;
}
.sf-before, .sf-after {
  display: flex; flex-direction: column; gap: 10px;
}
.sf-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px;
}
.sf-before .sf-label { color: #DC2626; }
.sf-after .sf-label { color: #059669; }
.sf-tool {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  background: #F1F5F9; color: #475569;
  border: 1px solid #E2E8F0;
}
.sf-tool .sf-icon { font-size: 16px; flex-shrink: 0; }
.sf-after .sf-tool {
  background: linear-gradient(90deg, #EFF6FF, #ECFDF5);
  border-color: #BFDBFE; color: #1E40AF;
  font-weight: 700;
}
.sf-arrow {
  width: 96px; height: 96px;
  background: linear-gradient(135deg, #1D4ED8, #059669);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 36px; color: #fff; flex-shrink: 0;
  box-shadow: 0 12px 32px rgba(37,99,235,.3);
}

/* ── Vertical selector grid (THE FOR-EVERYONE statement) ──────── */
.vertical-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.vertical-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  position: relative;
  transition: transform 250ms, border-color 250ms, box-shadow 250ms;
  display: flex; flex-direction: column;
}
.vertical-card:hover {
  transform: translateY(-3px);
  border-color: #94A3B8;
  box-shadow: 0 16px 32px -8px rgba(15,23,42,.1);
}
.vertical-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; font-size: 28px;
  margin-bottom: 18px;
}
.vertical-card.v-blue   .vertical-icon { background: #DBEAFE; }
.vertical-card.v-violet .vertical-icon { background: #D1FAE5; }
.vertical-card.v-amber  .vertical-icon { background: #FEF3C7; }
.vertical-card.v-pink   .vertical-icon { background: #DBEAFE; }
.vertical-card.v-emerald .vertical-icon { background: #D1FAE5; }
.vertical-card.v-cyan   .vertical-icon { background: #CFFAFE; }
.vertical-card.v-indigo .vertical-icon { background: #DBEAFE; }
.vertical-card.v-rose   .vertical-icon { background: #FFE4E6; }
.vertical-card.v-orange .vertical-icon { background: #EFF6FF; }
.vertical-card h3 {
  font-size: 18px; font-weight: 800; color: #0F172A;
  letter-spacing: -.02em; margin-bottom: 6px;
}
.vertical-card .v-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: #64748B; background: #F1F5F9; border-radius: 6px;
  padding: 2px 8px; margin-bottom: 10px;
}
.vertical-card .v-desc {
  font-size: 13.5px; color: #475569; line-height: 1.6; margin-bottom: 16px;
  flex: 1;
}
.vertical-card .v-features {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.vertical-card .v-features li {
  font-size: 12.5px; color: #475569;
  padding-left: 18px; position: relative;
}
.vertical-card .v-features li::before {
  content: '→'; position: absolute; left: 0; color: #1D4ED8; font-weight: 700;
}
.vertical-card .v-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: #1D4ED8;
  margin-top: auto;
}
.vertical-card .v-link::after { content: '→'; transition: transform 200ms; }
.vertical-card:hover .v-link::after { transform: translateX(3px); }
.vertical-card .v-count {
  position: absolute; top: 20px; right: 20px;
  font-size: 11px; font-weight: 700; color: #94A3B8;
}

/* ── Competitive matrix ───────────────────────────────────────── */
.compete-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid #E2E8F0;
}
.compete-table th, .compete-table td {
  padding: 16px 20px; text-align: center;
  border-bottom: 1px solid #E2E8F0;
  font-size: 14px;
}
.compete-table th:first-child,
.compete-table td:first-child {
  text-align: left; font-weight: 600; color: #1E293B;
}
.compete-table thead th {
  background: #F8FAFC; font-size: 13px;
  font-weight: 700; color: #475569; letter-spacing: -.01em;
  border-bottom: 2px solid #E2E8F0;
}
.compete-table thead th.us {
  background: linear-gradient(180deg, #EFF6FF 0%, #fff 100%);
  color: #1E40AF; border-bottom-color: #1D4ED8;
}
.compete-table thead th.us::before {
  content: '★ '; color: #FBBF24;
}
.compete-table .cat-row td {
  background: #F8FAFC; font-weight: 800;
  font-size: 12px; letter-spacing: .08em;
  color: #64748B; text-transform: uppercase;
  text-align: left; padding: 12px 20px;
}
.compete-table .col-us {
  background: rgba(239,246,255,.5);
  font-weight: 600; color: #0F172A;
}
.compete-table .yes  { color: #059669; font-weight: 700; }
.compete-table .no   { color: #CBD5E1; }
.compete-table .part { color: #1D4ED8; font-weight: 600; font-size: 12px; }

/* ── Integration ecosystem grid ────────────────────────────────── */
.integ-section {
  background: #fff; border: 1px solid #E2E8F0;
  border-radius: 20px; padding: 48px; margin-top: 48px;
}
.integ-cat-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 24px; margin-bottom: 32px;
}
.integ-cat-pill {
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 9999px;
  background: #F1F5F9; color: #475569;
  border: 1px solid #E2E8F0;
}
.integ-cat-pill.active {
  background: #1E40AF; color: #fff; border-color: #1E40AF;
}
.integ-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.integ-tile {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
  transition: all 200ms;
}
.integ-tile:hover {
  background: #fff; border-color: #94A3B8;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(15,23,42,.08);
}
.integ-tile-icon {
  font-size: 24px; margin-bottom: 8px;
}
.integ-tile-name {
  font-size: 12px; font-weight: 700; color: #1E293B;
  letter-spacing: -.01em;
}
.integ-tile-cat {
  font-size: 10px; color: #94A3B8; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

/* ── ROI / value calculator card ──────────────────────────────── */
.roi-band {
  background: linear-gradient(135deg, #0F172A 0%, #022C22 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 56px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
  position: relative; overflow: hidden;
}
.roi-band::before {
  content: ''; position: absolute; right: -10%; top: -30%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(96,165,250,.15) 0%, transparent 70%);
  pointer-events: none;
}
.roi-content { position: relative; }
.roi-content .roi-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #34D399; margin-bottom: 12px;
}
.roi-content h3 {
  font-size: 32px; font-weight: 800; color: #F8FAFC;
  letter-spacing: -.03em; line-height: 1.15; margin-bottom: 16px;
}
.roi-content p {
  font-size: 15px; color: rgba(203,213,225,.75); line-height: 1.65;
  margin-bottom: 24px;
}
.roi-stats { position: relative; }
.roi-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.roi-stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 22px;
}
.roi-num {
  font-size: 32px; font-weight: 800;
  background: linear-gradient(135deg, #60A5FA, #3B82F6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.03em; line-height: 1;
}
.roi-num small { font-size: 14px; }
.roi-label {
  font-size: 11px; color: rgba(203,213,225,.55);
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: 8px; font-weight: 600;
}
.roi-sub {
  font-size: 13px; color: rgba(203,213,225,.85);
  margin-top: 6px;
}

/* ── Demo booking widget ──────────────────────────────────────── */
.demo-band {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 48px;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 48px; align-items: center;
}
.demo-band-left h2 {
  font-size: 36px; font-weight: 800; color: #0F172A;
  letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px;
}
.demo-band-left .demo-bullets {
  list-style: none; padding: 0; margin: 24px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.demo-band-left .demo-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: #1E293B;
}
.demo-band-left .demo-bullets li svg { color: #1D4ED8; flex-shrink: 0; margin-top: 2px; }
.demo-presenter {
  display: flex; gap: 14px; align-items: center;
  margin-top: 28px; padding: 16px;
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 12px;
}
.demo-presenter-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #1D4ED8, #059669);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 18px;
}
.demo-presenter-info .dpi-name {
  font-size: 14px; font-weight: 800; color: #0F172A;
}
.demo-presenter-info .dpi-role {
  font-size: 12px; color: #64748B;
}

/* Calendar mock */
.demo-calendar {
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 16px; padding: 24px;
}
.demo-cal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.demo-cal-head h4 {
  font-size: 14px; font-weight: 800; color: #0F172A;
}
.demo-cal-tz { font-size: 11px; color: #64748B; }
.demo-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 20px;
}
.demo-cal-day {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #475569;
  border-radius: 8px; cursor: pointer;
  transition: all 150ms;
}
.demo-cal-day.head {
  font-size: 10px; color: #94A3B8; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: default;
}
.demo-cal-day.muted { color: #CBD5E1; }
.demo-cal-day.avail { background: #DBEAFE; color: #1E40AF; }
.demo-cal-day.avail:hover { background: #93C5FD; color: #fff; }
.demo-cal-day.selected { background: #1D4ED8; color: #fff; }
.demo-cal-day.today { box-shadow: inset 0 0 0 2px #1D4ED8; }
.demo-slot-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.demo-slot {
  font-size: 12px; font-weight: 600; color: #1D4ED8;
  background: #fff; border: 1px solid #BFDBFE;
  padding: 8px 14px; border-radius: 8px;
  cursor: pointer;
}
.demo-slot:hover { background: #1D4ED8; color: #fff; border-color: #1D4ED8; }
.demo-slot.selected { background: #1D4ED8; color: #fff; border-color: #1D4ED8; }
.demo-cta {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #1D4ED8, #059669);
  color: #fff; font-size: 14px; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 150ms, box-shadow 150ms;
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.demo-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.35); }

/* ── Floating WhatsApp button ─────────────────────────────────── */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9000;
  display: flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  padding: 12px 18px 12px 14px;
  border-radius: 9999px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37,211,102,.35), 0 4px 8px rgba(0,0,0,.2);
  transition: transform 200ms, box-shadow 200ms;
}
.whatsapp-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 32px rgba(37,211,102,.45), 0 4px 8px rgba(0,0,0,.2);
}
.whatsapp-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.whatsapp-fab .wa-text { display: inline; white-space: nowrap; }
.whatsapp-fab::before {
  content: ''; position: absolute; inset: -4px;
  border-radius: 9999px;
  border: 2px solid rgba(37,211,102,.4);
  animation: waPulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* ── Sticky bottom CTA bar ────────────────────────────────────── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 8500;
  background: rgba(15,23,42,.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 24px;
  display: none;
  transform: translateY(100%);
  transition: transform 300ms var(--ease-out);
  box-shadow: 0 -8px 24px rgba(0,0,0,.3);
}
.sticky-cta.visible { display: block; transform: translateY(0); }
.sticky-cta-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.sticky-cta-text {
  flex: 1; min-width: 0;
  font-size: 14px; color: rgba(248,250,252,.85); font-weight: 500;
}
.sticky-cta-text b { color: #F8FAFC; font-weight: 700; }
.sticky-cta-actions {
  display: flex; gap: 10px;
}
.sticky-cta-close {
  background: transparent; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; padding: 4px 8px; font-size: 18px;
}
.sticky-cta-close:hover { color: #fff; }

/* When sticky bar visible, push WhatsApp button up */
body.has-sticky-cta .whatsapp-fab { bottom: 88px; }

/* ── Inline mid-page CTA (between sections) ───────────────────── */
.inline-cta {
  background: linear-gradient(90deg, #1E40AF 0%, #065F46 100%);
  color: #fff;
  border-radius: 18px;
  padding: 32px 40px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 32px;
  margin: 24px 0;
}
.inline-cta-text h4 {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 6px;
}
.inline-cta-text p {
  font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.55;
}
.inline-cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
.inline-cta .btn-white {
  background: #fff; color: #1E40AF;
  font-size: 14px; font-weight: 700;
  padding: 12px 22px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* ── Customer mega-stat row ───────────────────────────────────── */
.mega-stat-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: #0B1220;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
}
.mega-stat {
  padding: 36px 24px;
  border-right: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.mega-stat:last-child { border-right: none; }
.mega-stat .ms-num {
  font-size: 36px; font-weight: 800;
  color: #F8FAFC; letter-spacing: -.03em; line-height: 1;
}
.mega-stat .ms-num .accent {
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mega-stat .ms-label {
  font-size: 12px; color: rgba(203,213,225,.6);
  margin-top: 8px; font-weight: 500;
}

/* Responsive */
@media (max-width: 1100px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-card:nth-child(3n) { border-right: 1px solid #1E293B; }
  .problem-card:nth-child(2n) { border-right: none; }
  .vertical-grid { grid-template-columns: repeat(2, 1fr); }
  .integ-grid { grid-template-columns: repeat(4, 1fr); }
  .solution-flow { grid-template-columns: 1fr; gap: 24px; }
  .sf-arrow { width: 64px; height: 64px; font-size: 24px; transform: rotate(90deg); }
  .roi-band { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
  .demo-band { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
  .mega-stat-row { grid-template-columns: repeat(3, 1fr); }
  .mega-stat:nth-child(3) { border-right: none; }
  .mega-stat:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.06); }
  .compete-table th, .compete-table td { padding: 12px 10px; font-size: 12px; }
  .inline-cta { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { border-right: none !important; }
  .vertical-grid { grid-template-columns: 1fr; }
  .integ-grid { grid-template-columns: repeat(3, 1fr); }
  .mega-stat-row { grid-template-columns: 1fr 1fr; }
  .demo-cal-grid { gap: 2px; }
  .whatsapp-fab .wa-text { display: none; }
  .whatsapp-fab { padding: 14px; }
  .roi-stat-grid { grid-template-columns: 1fr; }
  .demo-band-left h2 { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════════
   v5 — Enterprise Premium polish
   (announcement bar, stakeholder tabs, 24-module grid, app
   ratings, trust seals, success team, video testimonial)
   ════════════════════════════════════════════════════════════════ */

/* ── Top announcement banner (above nav) ───────────────────────── */
.announce-bar {
  background: linear-gradient(90deg, #022C22 0%, #064E3B 50%, #022C22 100%);
  color: #F8FAFC;
  padding: 10px 24px;
  text-align: center;
  font-size: 13px; font-weight: 500;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.announce-bar a {
  color: #FBBF24; font-weight: 700; text-decoration: none;
  border-bottom: 1px dashed rgba(251,191,36,.4);
}
.announce-bar .pill {
  display: inline-block;
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.3);
  color: #FBBF24;
  padding: 1px 8px; border-radius: 9999px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  margin-right: 8px; vertical-align: middle;
}
.announce-bar .close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: rgba(248,250,252,.5);
  cursor: pointer; font-size: 18px; padding: 4px 8px;
}
.announce-bar .close:hover { color: #fff; }
body.has-announce .ac-nav { top: 38px; }

/* ── Stakeholder tabs ─────────────────────────────────────────── */
.stake-tabs {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 56px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.stake-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}
.stake-tab {
  padding: 24px 20px;
  background: transparent; border: none;
  text-align: center; cursor: pointer;
  border-right: 1px solid #E2E8F0;
  border-bottom: 3px solid transparent;
  transition: all 200ms;
}
.stake-tab:last-child { border-right: none; }
.stake-tab .st-icon {
  font-size: 28px; margin-bottom: 8px;
  display: block;
  filter: grayscale(40%); opacity: .7;
  transition: all 200ms;
}
.stake-tab .st-name {
  font-size: 14px; font-weight: 700; color: #475569;
  letter-spacing: -.01em;
  transition: color 200ms;
}
.stake-tab .st-sub {
  font-size: 11px; color: #94A3B8;
  margin-top: 2px; font-weight: 500;
}
.stake-tab:hover .st-icon { filter: grayscale(0); opacity: 1; }
.stake-tab:hover .st-name { color: #0F172A; }
.stake-tab.active {
  background: #fff;
  border-bottom-color: #1D4ED8;
  margin-bottom: -1px;
}
.stake-tab.active .st-icon { filter: grayscale(0); opacity: 1; transform: scale(1.05); }
.stake-tab.active .st-name { color: #1D4ED8; }

.stake-panel {
  display: none;
  padding: 48px;
  grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.stake-panel.active { display: grid; }
.stake-panel .sp-headline {
  font-size: 28px; font-weight: 800; color: #0F172A;
  letter-spacing: -.025em; line-height: 1.15; margin-bottom: 14px;
}
.stake-panel .sp-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #1D4ED8, #059669);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stake-panel p {
  font-size: 15px; color: #475569; line-height: 1.7; margin-bottom: 24px;
}
.stake-panel .sp-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.stake-panel .sp-bullets li {
  display: flex; gap: 14px; align-items: flex-start;
}
.stake-panel .sp-bullets li .sp-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: #EFF6FF; color: #1D4ED8;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.stake-panel .sp-bullets li .sp-text strong {
  display: block; font-size: 14px; font-weight: 800;
  color: #0F172A; letter-spacing: -.01em; margin-bottom: 2px;
}
.stake-panel .sp-bullets li .sp-text span {
  font-size: 13px; color: #64748B; line-height: 1.55;
}

/* Stakeholder visual mockup */
.stake-visual {
  background: linear-gradient(135deg, #0F172A 0%, #022C22 100%);
  border-radius: 16px; padding: 28px;
  position: relative; min-height: 320px;
  overflow: hidden;
}
.stake-visual::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(96,165,250,.18), transparent);
  pointer-events: none;
}
.sv-card {
  position: relative; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 16px;
  margin-bottom: 10px;
}
.sv-card-row {
  display: flex; align-items: center; gap: 12px;
}
.sv-card-row .sv-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  font-size: 13px; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
}
.sv-card-row .sv-name {
  font-size: 13px; font-weight: 700; color: #F8FAFC;
}
.sv-card-row .sv-sub {
  font-size: 11px; color: rgba(203,213,225,.55); margin-top: 1px;
}
.sv-card-row .sv-status {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 9999px;
}
.sv-status.green { background: rgba(16,185,129,.15); color: #34D399; border: 1px solid rgba(16,185,129,.25); }
.sv-status.amber { background: rgba(251,191,36,.15); color: #FBBF24; border: 1px solid rgba(251,191,36,.25); }
.sv-status.blue  { background: rgba(59,130,246,.15); color: #60A5FA; border: 1px solid rgba(59,130,246,.25); }
.sv-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px;
}
.sv-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px; padding: 10px;
}
.sv-stat-num { font-size: 18px; font-weight: 800; color: #F8FAFC; letter-spacing: -.02em; line-height: 1; }
.sv-stat-label { font-size: 10px; color: rgba(203,213,225,.5); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* "Spend more time" mega-headline pattern */
.spend-more {
  background: linear-gradient(135deg, #EFF6FF 0%, #ECFDF5 100%);
  border: 1px solid #DBEAFE;
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  margin-top: 24px;
}
.spend-more h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(22px, 3vw, 32px); font-weight: 800;
  color: #1E293B; letter-spacing: -.025em; line-height: 1.25;
}
.spend-more h3 .more {
  background: linear-gradient(135deg, #059669, #16A34A);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.spend-more h3 .less {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 24-module micro-grid (NeverSkip-style) ───────────────────── */
.module-mega-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  background: #fff; border: 1px solid #E2E8F0;
  border-radius: 18px; padding: 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.mm-tile {
  background: #FAFBFC;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none;
  transition: all 200ms;
  position: relative;
}
.mm-tile:hover {
  background: #fff; border-color: #DBEAFE;
  box-shadow: 0 8px 16px -4px rgba(37,99,235,.1);
  transform: translateY(-2px);
}
.mm-tile-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; font-size: 16px;
}
.mm-tile-icon.c-blue   { background: #EFF6FF; color: #1D4ED8; }
.mm-tile-icon.c-green  { background: #ECFDF5; color: #059669; }
.mm-tile-icon.c-violet { background: #ECFDF5; color: #059669; }
.mm-tile-icon.c-amber  { background: #FEF3C7; color: #1D4ED8; }
.mm-tile-icon.c-pink   { background: #DBEAFE; color: #1E40AF; }
.mm-tile-icon.c-cyan   { background: #CFFAFE; color: #0891B2; }
.mm-tile-icon.c-rose   { background: #FFE4E6; color: #BE123C; }
.mm-tile-icon.c-indigo { background: #DBEAFE; color: #2563EB; }
.mm-tile-name {
  font-size: 13px; font-weight: 800; color: #0F172A;
  letter-spacing: -.01em; line-height: 1.25;
}
.mm-tile-desc {
  font-size: 11.5px; color: #64748B; line-height: 1.45;
}
.mm-tile-link {
  font-size: 11px; font-weight: 700; color: #1D4ED8;
  margin-top: auto; padding-top: 4px;
  display: inline-flex; gap: 3px; align-items: center;
}

/* ── App ratings band ─────────────────────────────────────────── */
.app-ratings {
  background: #fff; border: 1px solid #E2E8F0;
  border-radius: 18px; padding: 32px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: center; gap: 32px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.app-ratings .ar-headline {
  font-size: 17px; font-weight: 800; color: #0F172A;
  letter-spacing: -.02em; line-height: 1.3;
}
.app-ratings .ar-sub {
  font-size: 12.5px; color: #64748B; margin-top: 4px;
}
.ar-stat { display: flex; align-items: center; gap: 12px; }
.ar-stat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
}
.ar-stat-icon.gp { background: #ECFDF5; color: #059669; }
.ar-stat-icon.as { background: #EFF6FF; color: #1D4ED8; }
.ar-stat-icon.dl { background: #FEF3C7; color: #1D4ED8; }
.ar-stat-info .ar-num {
  font-size: 18px; font-weight: 800; color: #0F172A;
  letter-spacing: -.02em; line-height: 1;
}
.ar-stat-info .ar-num .stars { color: #FBBF24; font-size: 14px; }
.ar-stat-info .ar-label {
  font-size: 11px; color: #64748B;
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; margin-top: 4px;
}

/* ── Trust seals row ──────────────────────────────────────────── */
.trust-seals {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; align-items: center;
  padding: 24px 0;
}
.trust-seal {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: #fff; border: 1px solid #E2E8F0;
  border-radius: 12px;
  font-size: 12px; font-weight: 700;
  color: #475569; letter-spacing: -.01em;
}
.trust-seal .ts-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0;
}
.trust-seal .ts-icon.green { background: #ECFDF5; color: #059669; }
.trust-seal .ts-icon.blue  { background: #EFF6FF; color: #1D4ED8; }
.trust-seal .ts-icon.violet { background: #ECFDF5; color: #059669; }
.trust-seal .ts-icon.amber { background: #FEF3C7; color: #1D4ED8; }

/* ── Customer success team card ───────────────────────────────── */
.success-team-card {
  background: linear-gradient(135deg, #0F172A 0%, #022C22 60%, #064E3B 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 56px 48px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 56px; align-items: center;
  position: relative; overflow: hidden;
}
.success-team-card::before {
  content: ''; position: absolute; right: -20%; top: -30%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(96,165,250,.12) 0%, transparent 60%);
  pointer-events: none;
}
.stc-content { position: relative; }
.stc-content .stc-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #34D399; margin-bottom: 12px;
}
.stc-content h3 {
  font-size: 32px; font-weight: 800; color: #F8FAFC;
  letter-spacing: -.03em; line-height: 1.15; margin-bottom: 16px;
}
.stc-content h3 em {
  font-style: normal;
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stc-content p {
  font-size: 15px; color: rgba(203,213,225,.75); line-height: 1.65;
  margin-bottom: 28px;
}
.stc-content .stc-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
}
.stc-meta-item .smi-num {
  font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, #60A5FA, #3B82F6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stc-meta-item .smi-label {
  font-size: 11px; color: rgba(203,213,225,.55);
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; margin-top: 2px;
}
.stc-team {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
}
.stc-member {
  display: flex; gap: 16px; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 18px 20px;
}
.stc-member-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 20px;
  flex-shrink: 0;
}
.stc-member-avatar.a1 { background: linear-gradient(135deg, #1D4ED8, #1E40AF); }
.stc-member-avatar.a2 { background: linear-gradient(135deg, #059669, #065F46); }
.stc-member-avatar.a3 { background: linear-gradient(135deg, #059669, #047857); }
.stc-member-info {
  flex: 1; min-width: 0;
}
.stc-member-name {
  font-size: 14px; font-weight: 800; color: #F8FAFC; letter-spacing: -.01em;
}
.stc-member-role {
  font-size: 12px; color: rgba(203,213,225,.6); margin-top: 2px;
}
.stc-member-info .stc-prev {
  font-size: 11px; color: rgba(203,213,225,.45); margin-top: 4px;
}
.stc-member-channels {
  display: flex; gap: 6px; margin-left: auto; flex-shrink: 0;
}
.stc-channel {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;
  font-size: 12px; color: rgba(203,213,225,.7);
}

/* ── Video testimonial overlay ────────────────────────────────── */
.story-card.featured-video {
  grid-column: span 2;
  background: linear-gradient(135deg, #0F172A 0%, #022C22 100%);
  border: 1px solid rgba(255,255,255,.1);
  color: #F8FAFC;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px;
  padding: 0; overflow: hidden;
  position: relative;
}
.story-card.featured-video .video-thumb {
  position: relative;
  background: linear-gradient(135deg, #1E40AF 0%, #047857 100%);
  min-height: 280px;
  display: grid; place-items: center;
}
.story-card.featured-video .video-thumb::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: .6;
}
.video-play {
  position: relative; z-index: 2;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: #1E40AF;
  display: grid; place-items: center;
  font-size: 32px;
  cursor: pointer;
  transition: transform 200ms;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.video-play:hover { transform: scale(1.08); }
.video-play::after {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  animation: vidPulse 2s ease-out infinite;
}
@keyframes vidPulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.video-meta {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  color: #fff; padding: 6px 12px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
  display: inline-flex; gap: 8px; align-items: center;
}
.story-card.featured-video .video-info {
  padding: 36px 36px 36px 0;
  display: flex; flex-direction: column; justify-content: center;
}
.story-card.featured-video .story-quote {
  color: #F1F5F9; font-size: 22px; line-height: 1.4; font-weight: 500;
}
.story-card.featured-video .story-quote::before { color: #60A5FA; }
.story-card.featured-video .story-result {
  background: rgba(16,185,129,.15); color: #34D399;
  border-color: rgba(16,185,129,.3);
}
.story-card.featured-video .story-meta {
  border-top-color: rgba(255,255,255,.08);
}
.story-card.featured-video .story-name { color: #F8FAFC; }
.story-card.featured-video .story-role { color: rgba(203,213,225,.6); }
.story-card.featured-video .story-school { color: rgba(203,213,225,.75); }

/* ── Premium CTA — dual button (Demo + Free Trial) ───────────── */
.dual-cta {
  display: inline-flex; gap: 10px; flex-wrap: wrap;
}
.btn-trial {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-lg);
  font-size: 14px; font-weight: 700;
  background: rgba(16,185,129,.15);
  color: #34D399;
  border: 1px solid rgba(16,185,129,.35);
  text-decoration: none;
  transition: all 200ms;
}
.btn-trial:hover {
  background: rgba(16,185,129,.25);
  border-color: rgba(16,185,129,.5);
  transform: translateY(-1px);
}
.btn-trial::before {
  content: '✦'; color: #FBBF24; margin-right: 2px;
}

/* Responsive */
@media (max-width: 1100px) {
  .stake-strip { grid-template-columns: repeat(2, 1fr); }
  .stake-tab { border-bottom: 1px solid #E2E8F0; }
  .stake-panel.active { grid-template-columns: 1fr; padding: 32px 24px; }
  .module-mega-grid { grid-template-columns: repeat(4, 1fr); }
  .app-ratings { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
  .app-ratings .ar-headline-block { grid-column: 1 / -1; }
  .success-team-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
  .story-card.featured-video { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .story-card.featured-video .video-info { padding: 32px; }
}
@media (max-width: 700px) {
  .module-mega-grid { grid-template-columns: repeat(2, 1fr); }
  .app-ratings { grid-template-columns: 1fr; }
  .stake-strip { grid-template-columns: 1fr; }
  .announce-bar { font-size: 11.5px; padding: 8px 36px 8px 16px; }
  body.has-announce .ac-nav { top: 36px; }
}

/* ════════════════════════════════════════════════════════════════
   v6 — LIGHT theme hero + enterprise polish
   ════════════════════════════════════════════════════════════════ */

/* ── Light hero (replaces dark hero) ─────────────────────────── */
.hero-light {
  position: relative;
  padding: 140px 0 100px;
  background: linear-gradient(180deg, #FAFBFC 0%, #F8FAFC 60%, #EFF6FF 100%);
  overflow: hidden;
  text-align: center;
}
.hero-light::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(59,130,246,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 30%, rgba(16,185,129,.08) 0%, transparent 50%),
    radial-gradient(ellipse 30% 30% at 15% 25%, rgba(245,158,11,.06) 0%, transparent 50%);
}
.hero-light::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 90%);
}
.hero-light .hero-inner {
  position: relative; z-index: 2;
  max-width: 1000px; margin: 0 auto;
}

.hero-tag-light {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid #BFDBFE;
  border-radius: 9999px;
  padding: 5px 16px 5px 5px;
  font-size: 13px; font-weight: 500;
  color: #1E293B;
  margin-bottom: 32px;
  box-shadow: 0 4px 12px rgba(59,130,246,.08);
  text-decoration: none;
}
.hero-tag-light .new {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 9999px;
}
.hero-tag-light .arrow { color: #2563EB; font-weight: 700; }

.hero-light h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 800; letter-spacing: -.045em; line-height: 1.04;
  color: #0F172A;
  max-width: 940px; margin: 0 auto 28px;
}
.hero-light h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-light .hero-lede {
  font-size: 19px; line-height: 1.65;
  color: #475569;
  max-width: 700px; margin: 0 auto 40px;
}
.hero-light .hero-lede b { color: #0F172A; font-weight: 700; }

.hero-light .hero-actions {
  display: flex; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-light .play-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #475569;
  padding: 6px 4px; text-decoration: none;
}
.hero-light .play-link .play-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1px solid #E2E8F0;
  display: grid; place-items: center; color: #2563EB;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}

.hero-light .hero-trust {
  display: flex; justify-content: center;
  gap: 36px; align-items: center; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid #E2E8F0;
  max-width: 720px; margin: 0 auto;
}
.hero-light .hero-trust-item { display: flex; align-items: center; gap: 8px; }
.hero-light .hero-trust-item svg { color: #10B981; flex-shrink: 0; }
.hero-light .hero-trust-item span { font-size: 13px; color: #475569; font-weight: 500; }

/* Light hero — button overrides for light bg */
.hero-light .btn-primary {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 8px 16px rgba(79,70,229,.25),
    0 16px 40px rgba(79,70,229,.18),
    0 0 0 1px rgba(79,70,229,.4);
}
.hero-light .btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 12px 24px rgba(79,70,229,.32),
    0 24px 48px rgba(79,70,229,.22),
    0 0 0 1px rgba(79,70,229,.5);
}
.hero-light .btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-lg);
  font-size: 14px; font-weight: 700;
  background: #fff; color: #1E293B;
  border: 1px solid #CBD5E1;
  text-decoration: none;
  transition: all 200ms;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.hero-light .btn-secondary:hover {
  border-color: #94A3B8;
  background: #F8FAFC;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
}
.hero-light .btn-trial {
  background: rgba(16,185,129,.08);
  color: #047857;
  border: 1px solid rgba(16,185,129,.3);
  box-shadow: 0 1px 2px rgba(16,185,129,.1);
}
.hero-light .btn-trial:hover {
  background: rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.5);
  box-shadow: 0 4px 12px rgba(16,185,129,.18);
}
.hero-light .btn-trial::before { color: #F59E0B; }

/* Hero browser shadow on light bg — needs more drama */
.hero-light .hero-product { margin-top: 80px; }
.hero-light .browser {
  box-shadow:
    0 0 0 1px rgba(15,23,42,.06),
    0 32px 80px -16px rgba(15,23,42,.25),
    0 60px 120px -24px rgba(79,70,229,.2);
}

/* ── "Make the switch" section (replaces Before/After) ────────── */
.switch-band {
  background: linear-gradient(135deg, #fff 0%, #FAFBFC 100%);
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 56px;
  margin-top: 48px;
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
.switch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 36px;
}
.switch-pillar {
  background: linear-gradient(180deg, #FAFBFC 0%, #fff 100%);
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
}
.switch-pillar::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px;
  height: 3px; border-radius: 0 0 3px 3px;
}
.switch-pillar.p-1::before { background: linear-gradient(90deg, #2563EB, #6366F1); }
.switch-pillar.p-2::before { background: linear-gradient(90deg, #10B981, #34D399); }
.switch-pillar.p-3::before { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.switch-pillar .sp-num {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #94A3B8; margin-bottom: 10px;
}
.switch-pillar.p-1 .sp-num { color: #2563EB; }
.switch-pillar.p-2 .sp-num { color: #059669; }
.switch-pillar.p-3 .sp-num { color: #1D4ED8; }
.switch-pillar h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px; font-weight: 800; color: #0F172A;
  letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px;
}
.switch-pillar p {
  font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 16px;
}
.switch-pillar .sp-stat {
  font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 9999px; display: inline-block;
}
.switch-pillar.p-1 .sp-stat { background: #EFF6FF; color: #1D4ED8; }
.switch-pillar.p-2 .sp-stat { background: #ECFDF5; color: #059669; }
.switch-pillar.p-3 .sp-stat { background: #FEF3C7; color: #1D4ED8; }

.competitor-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 24px;
}
.comp-tag {
  font-size: 12px; font-weight: 600; color: #64748B;
  padding: 6px 14px; border-radius: 9999px;
  background: #F1F5F9; border: 1px solid #E2E8F0;
}

/* ── AskBooks promo card ─────────────────────────────────────── */
.askbooks-card {
  background: linear-gradient(135deg, #022C22 0%, #064E3B 60%, #047857 100%);
  border-radius: 24px;
  padding: 48px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(16,185,129,.2);
}
.askbooks-card::before {
  content: ''; position: absolute; right: -10%; top: -50%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(52,211,153,.18) 0%, transparent 60%);
  pointer-events: none;
}
.askbooks-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 36px; flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(16,185,129,.3);
}
.askbooks-content { position: relative; }
.askbooks-content .ab-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #34D399; margin-bottom: 6px;
}
.askbooks-content h4 {
  font-size: 22px; font-weight: 800; color: #F8FAFC;
  letter-spacing: -.02em; margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.askbooks-content h4 .new-pill {
  background: rgba(245,158,11,.2); color: #FBBF24;
  border: 1px solid rgba(245,158,11,.3);
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 9999px;
}
.askbooks-content p {
  font-size: 14.5px; color: rgba(203,213,225,.85); line-height: 1.6;
  max-width: 540px;
}
.askbooks-cta {
  background: #fff; color: #047857;
  font-size: 13px; font-weight: 800;
  padding: 12px 24px; border-radius: 10px;
  text-decoration: none; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform 200ms, box-shadow 200ms;
}
.askbooks-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

@media (max-width: 1100px) {
  .switch-grid { grid-template-columns: 1fr; }
  .askbooks-card { grid-template-columns: 1fr; text-align: center; }
  .askbooks-icon { margin: 0 auto; }
  .askbooks-cta { margin: 0 auto; }
}
@media (max-width: 700px) {
  .hero-light { padding: 110px 0 60px; }
  .hero-light h1 { font-size: clamp(36px, 9vw, 52px); }
  .hero-light .hero-lede { font-size: 16px; }
  .switch-band { padding: 32px 24px; }
}

/* ════════════════════════════════════════════════════════════════
   v7 — BRIGHT theme · clear typography · centered headers
   ════════════════════════════════════════════════════════════════ */

/* ── Centered section header (drop-in helper) ─────────────────── */
.centered-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.centered-header .eyebrow,
.centered-header .section-eyebrow {
  margin-left: auto; margin-right: auto;
}
.centered-header h2,
.centered-header .section-title {
  text-align: center; margin-left: auto; margin-right: auto;
}
.centered-header .lede,
.centered-header p,
.centered-header .section-sub {
  margin: 16px auto 0; max-width: 640px;
  text-align: center;
}

/* ── Improved typography clarity ──────────────────────────────── */
.section-light h2.display-font,
.section-cream h2.display-font,
section.section-bright h2 {
  color: #0F172A;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.section-light .lede,
.section-cream .lede,
section.section-bright .lede {
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
}

/* New "bright" sections — pure white with subtle accents */
.section-bright {
  background: #FFFFFF;
  color: #0F172A;
  position: relative;
}
.section-soft {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  color: #0F172A;
}
.section-blue-tint {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #DBEAFE 100%);
  color: #0F172A;
  position: relative;
}

/* ── Light Problem section (replaces dark problem-grid) ───────── */
.problem-grid-light {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid #FEE2E2; border-radius: 20px; overflow: hidden;
  background: #FFFFFF;
}
.problem-grid-light .problem-card-light {
  padding: 32px;
  border-right: 1px solid #FEE2E2;
  border-bottom: 1px solid #FEE2E2;
  position: relative;
  background: linear-gradient(180deg, #FFFAFA 0%, #FFFFFF 100%);
}
.problem-grid-light .problem-card-light:nth-child(3n) { border-right: none; }
.problem-grid-light .problem-card-light:nth-last-child(-n+3) { border-bottom: none; }
.problem-grid-light .pc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: #FEF2F2; color: #DC2626;
  border: 1.5px solid #FECACA;
  border-radius: 50%;
  font-size: 14px; font-weight: 800;
  margin-bottom: 16px;
}
.problem-grid-light h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px; font-weight: 800; color: #0F172A;
  letter-spacing: -.015em; line-height: 1.3; margin-bottom: 10px;
}
.problem-grid-light p {
  font-size: 14px; color: #475569; line-height: 1.65;
  font-weight: 400;
}
.problem-grid-light .pc-stat {
  margin-top: 16px; font-size: 11.5px;
  color: #DC2626; font-weight: 700;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  padding: 5px 11px; border-radius: 9999px;
  display: inline-block;
  letter-spacing: -.01em;
}

/* ── Light Differentiator card (replaces dark .diff-card) ──── */
.diff-card-light {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 32px 28px;
  transition: transform 250ms, border-color 250ms, box-shadow 250ms;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.diff-card-light:hover {
  transform: translateY(-3px);
  border-color: #BFDBFE;
  box-shadow: 0 16px 32px -8px rgba(37,99,235,.12);
}
.diff-card-light .diff-icon-light {
  width: 52px; height: 52px; border-radius: 13px;
  background: #EFF6FF; color: #2563EB;
  display: grid; place-items: center;
  font-size: 24px; margin-bottom: 18px;
}
.diff-card-light.d-pink .diff-icon-light { background: #EFF6FF; color: #1E40AF; }
.diff-card-light.d-amber .diff-icon-light { background: #FEF3C7; color: #1D4ED8; }
.diff-card-light.d-emerald .diff-icon-light { background: #ECFDF5; color: #059669; }
.diff-card-light.d-violet .diff-icon-light { background: #EFF6FF; color: #1D4ED8; }
.diff-card-light.d-cyan .diff-icon-light { background: #CFFAFE; color: #0891B2; }
.diff-card-light h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19px; font-weight: 800; color: #0F172A;
  letter-spacing: -.02em; margin-bottom: 10px;
}
.diff-card-light p {
  font-size: 14px; color: #475569; line-height: 1.65;
  margin-bottom: 18px;
}
.diff-card-light ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.diff-card-light ul li {
  font-size: 13px; color: #1E293B; font-weight: 500;
  padding-left: 22px; position: relative; line-height: 1.5;
}
.diff-card-light ul li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: #059669; font-weight: 800;
}

/* ── Light Multi-platform card (replaces dark .platform-card) ─── */
.platform-card-light {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  transition: all 250ms;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.platform-card-light:hover {
  border-color: #BFDBFE;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(37,99,235,.12);
}
.platform-card-light .pc-icon-light {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 26px; margin-bottom: 20px;
}
.platform-card-light.p-blue .pc-icon-light { background: #EFF6FF; color: #2563EB; }
.platform-card-light.p-pink .pc-icon-light { background: #EFF6FF; color: #1E40AF; }
.platform-card-light.p-amber .pc-icon-light { background: #FEF3C7; color: #1D4ED8; }
.platform-card-light.p-emerald .pc-icon-light { background: #ECFDF5; color: #059669; }
.platform-card-light h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px; font-weight: 800; color: #0F172A;
  letter-spacing: -.015em; margin-bottom: 8px;
}
.platform-card-light p {
  font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 18px;
}
.platform-card-light ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.platform-card-light ul li {
  font-size: 13px; color: #1E293B; font-weight: 500;
  display: flex; gap: 8px; line-height: 1.5;
}
.platform-card-light ul li::before {
  content: '✓'; color: #059669; font-weight: 800; flex-shrink: 0;
}
.platform-card-light .platform-store {
  display: inline-block; margin-top: 18px;
  font-size: 11px; font-weight: 700; color: #94A3B8;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── Light mega-stat row (replaces dark version) ──────────────── */
.mega-stat-row-light {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
.mega-stat-row-light .mega-stat {
  padding: 40px 24px;
  border-right: 1px solid #E2E8F0;
  text-align: center;
}
.mega-stat-row-light .mega-stat:last-child { border-right: none; }
.mega-stat-row-light .ms-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 40px; font-weight: 800;
  color: #0F172A; letter-spacing: -.035em; line-height: 1;
}
.mega-stat-row-light .ms-num .accent {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mega-stat-row-light .ms-num small {
  font-size: .55em; color: #64748B; font-weight: 700;
}
.mega-stat-row-light .ms-label {
  font-size: 12.5px; color: #64748B;
  margin-top: 10px; font-weight: 600;
  letter-spacing: -.005em;
}

/* ── Light awards strip ───────────────────────────────────────── */
.awards-row-light {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.awards-row-light .award {
  padding: 24px 16px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: all 200ms;
}
.awards-row-light .award:hover {
  border-color: #FBBF24;
  background: #FFFBEB;
  transform: translateY(-2px);
}
.awards-row-light .award-icon {
  font-size: 26px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  color: #1D4ED8;
}
.awards-row-light .award-name {
  font-size: 12px; font-weight: 700; color: #0F172A;
  letter-spacing: -.01em; line-height: 1.35;
}
.awards-row-light .award-year {
  font-size: 10.5px; color: #94A3B8; font-weight: 600;
}

/* ── Light pricing teaser ─────────────────────────────────────── */
.pricing-teaser-light {
  background: linear-gradient(135deg, #EFF6FF 0%, #EFF6FF 100%);
  border: 1px solid #DBEAFE;
  border-radius: 24px;
  padding: 56px 48px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 40px;
  box-shadow: 0 8px 24px rgba(37,99,235,.05);
}
.pricing-teaser-light h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 30px; font-weight: 800; color: #0F172A;
  letter-spacing: -.025em; line-height: 1.15; margin-bottom: 10px;
}
.pricing-teaser-light p {
  font-size: 15.5px; color: #475569; line-height: 1.65;
  max-width: 540px;
}
.pricing-teaser-light .pricing-teaser-amounts {
  display: flex; gap: 32px;
  margin-top: 14px;
}
.pricing-teaser-light .pta-block { text-align: left; }
.pricing-teaser-light .pta-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px; font-weight: 800;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em;
}
.pricing-teaser-light .pta-num small {
  font-size: 13px; color: #64748B; font-weight: 500;
  background: none !important;
  -webkit-text-fill-color: #64748B;
  background-clip: initial !important;
}
.pricing-teaser-light .pta-label {
  font-size: 11px; color: #64748B;
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: 4px; font-weight: 600;
}

/* ── Light success team card (replaces dark version) ──────────── */
.success-team-card-light {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 56px 48px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 56px; align-items: center;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(15,23,42,.06);
}
.success-team-card-light::before {
  content: ''; position: absolute; right: -10%; top: -30%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 60%);
  pointer-events: none;
}
.success-team-card-light .stc-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #1E40AF; margin-bottom: 12px;
}
.success-team-card-light h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px; font-weight: 800; color: #0F172A;
  letter-spacing: -.025em; line-height: 1.15; margin-bottom: 16px;
}
.success-team-card-light h3 em {
  font-style: normal;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.success-team-card-light p {
  font-size: 15px; color: #475569; line-height: 1.65;
  margin-bottom: 28px;
}
.success-team-card-light .stc-meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid #E2E8F0;
}
.success-team-card-light .smi-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px; font-weight: 800;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em;
}
.success-team-card-light .smi-label {
  font-size: 11px; color: #64748B;
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; margin-top: 4px;
}
.success-team-card-light .stc-member {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; gap: 16px; align-items: center;
  transition: all 200ms;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.success-team-card-light .stc-member:hover {
  border-color: #BFDBFE; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.success-team-card-light .stc-member-name {
  font-size: 14.5px; font-weight: 800; color: #0F172A; letter-spacing: -.01em;
}
.success-team-card-light .stc-member-role {
  font-size: 12.5px; color: #475569; margin-top: 2px;
}
.success-team-card-light .stc-prev {
  font-size: 11.5px; color: #94A3B8; margin-top: 4px;
}
.success-team-card-light .stc-channel {
  background: #F8FAFC; border-color: #E2E8F0; color: #475569;
}

/* ── Update old dark sections to be lighter where they remain ─── */
/* Hero-tag-light better contrast */
.hero-tag-light .new {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
}
.hero-tag-light .arrow { color: #1E40AF; }
.hero-light h1 em {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Improve readability everywhere — bump font sizes/weights ── */
body { font-feature-settings: "ss01", "cv01", "cv11"; }
.lede { font-size: 17px !important; line-height: 1.7 !important; }
.section-light p:not(.lede):not(.dpi-name):not(.fn-title):not(.fn-desc),
.section-cream p:not(.lede):not(.dpi-name):not(.fn-title):not(.fn-desc) {
  color: #475569;
}

/* Better eyebrow contrast */
.eyebrow {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  font-weight: 700;
  letter-spacing: .12em !important;
}

/* Better button hierarchy on light bg */
.btn-primary {
  font-weight: 700 !important;
  letter-spacing: -.005em;
}

/* Cleaner card hover effects */
.module-cat-card { box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.module-cat-card:hover {
  box-shadow: 0 12px 24px -8px rgba(37,99,235,.1);
}

/* Switch pillars — make brighter */
.switch-pillar h4 {
  font-size: 18.5px;
  color: #0F172A;
  font-weight: 800;
}
.switch-pillar p {
  color: #475569; font-size: 14.5px; line-height: 1.65;
}

/* Mega-stat-row dark → use light variant by default */
.mega-stat-row { background: #FFFFFF; border-color: #E2E8F0; }
.mega-stat-row .mega-stat { border-color: #E2E8F0; }
.mega-stat-row .ms-num { color: #0F172A; }
.mega-stat-row .ms-num .accent {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mega-stat-row .ms-label { color: #64748B; }

/* Better focus states for accessibility */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid #2563EB; outline-offset: 3px; border-radius: 4px;
}

@media (max-width: 1100px) {
  .problem-grid-light { grid-template-columns: repeat(2, 1fr); }
  .problem-grid-light .problem-card-light:nth-child(3n) { border-right: 1px solid #FEE2E2; }
  .problem-grid-light .problem-card-light:nth-child(2n) { border-right: none; }
  .mega-stat-row-light { grid-template-columns: repeat(2, 1fr); }
  .mega-stat-row-light .mega-stat:nth-child(2) { border-right: none; }
  .mega-stat-row-light .mega-stat { border-bottom: 1px solid #E2E8F0; }
  .awards-row-light { grid-template-columns: repeat(3, 1fr); }
  .pricing-teaser-light { grid-template-columns: 1fr; }
  .success-team-card-light { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
}
@media (max-width: 700px) {
  .problem-grid-light { grid-template-columns: 1fr; }
  .problem-grid-light .problem-card-light { border-right: none !important; }
  .mega-stat-row-light { grid-template-columns: 1fr; }
  .awards-row-light { grid-template-columns: repeat(2, 1fr); }
  .pricing-teaser-light .pricing-teaser-amounts { flex-direction: column; gap: 16px; }
  .pricing-teaser-light { padding: 32px 24px; }
}

/* ════════════════════════════════════════════════════════════════
   v8 — VERTICAL hero light theme override (bright across)
   ════════════════════════════════════════════════════════════════ */
.sol-hero, .prod-hero, .pricing-hero, .about-hero, .contact-hero, .sec-hero {
  background: linear-gradient(180deg, #FAFBFC 0%, #F8FAFC 60%, #EFF6FF 100%) !important;
  position: relative; overflow: hidden;
}
.sol-hero::before, .prod-hero::before, .pricing-hero::before,
.about-hero::before, .contact-hero::before, .sec-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(37,99,235,.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 30%, rgba(37,99,235,.06) 0%, transparent 50%);
}
.sol-hero::after, .prod-hero::after, .pricing-hero::after,
.about-hero::after, .contact-hero::after, .sec-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 90%);
}
.sol-hero .container, .prod-hero .container, .pricing-hero .container,
.about-hero .container, .contact-hero .container, .sec-hero .container {
  position: relative; z-index: 2;
}
/* Convert vertical hero: text colors + center it */
.sol-hero h1, .prod-hero h1, .pricing-hero h1, .about-hero h1, .contact-hero h1, .sec-hero h1 {
  color: #0F172A !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.06 !important;
  font-size: clamp(40px, 6vw, 68px) !important;
  text-align: center !important;
  max-width: 900px; margin: 0 auto 24px auto !important;
}
.sol-hero h1 span, .prod-hero h1 span, .pricing-hero h1 span,
.about-hero h1 span, .contact-hero h1 span, .sec-hero h1 span {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.sol-hero p, .prod-hero p, .pricing-hero p,
.about-hero p, .contact-hero p, .sec-hero p {
  color: #475569 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  text-align: center !important;
  max-width: 700px !important;
  margin: 0 auto 36px auto !important;
}
/* Convert 2-col grid hero layout to single-col centered */
.sol-hero .container > div[style*="grid-template-columns"],
.prod-hero .container > div[style*="grid-template-columns"] {
  grid-template-columns: 1fr !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}
.sol-hero .container > div[style*="grid-template-columns"] > div:first-child,
.prod-hero .container > div[style*="grid-template-columns"] > div:first-child {
  text-align: center !important;
}
.sol-hero .container > div[style*="grid-template-columns"] > div:first-child > div[style*="display:flex"] {
  justify-content: center !important;
}
/* Hero badge — bright pill */
.sol-hero-badge, .prod-badge, .sec-badge, .hero-eyebrow {
  background: #fff !important;
  border: 1px solid #BFDBFE !important;
  color: #1D4ED8 !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.06);
  margin-bottom: 28px !important;
  display: inline-flex !important;
}
/* Stat counters in hero — make readable on light */
.sol-hero [data-target], .sol-hero div[style*="font-weight:900"][style*="color:"] {
  color: #1D4ED8 !important;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sol-hero div[style*="color:rgba(255,255,255,.5)"],
.sol-hero div[style*="color: rgba(255,255,255,.5)"] {
  color: #64748B !important;
}
/* Hero buttons on light bg */
.sol-hero .btn-ghost, .prod-hero .btn-ghost {
  background: #fff !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
.sol-hero .btn-ghost:hover, .prod-hero .btn-ghost:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

/* Right-side dashboard mockups inside vertical hero — keep them dark (looks great on light bg) */
.k12-dash, .uni-dash, .eng-dash, .coaching-dash, .playschool-mockup, .dash-mock, .fee-dash {
  background: #0F172A !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 64px -16px rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.04);
  max-width: 720px;
  margin: 32px auto 0;
}

/* Center every section title across the site — final polish */
section h2.section-title,
section .section-title {
  text-align: center !important;
}
section .reveal[style*="text-align:center"], section .reveal[style*="text-align: center"] {
  margin-left: auto !important; margin-right: auto !important;
}

/* ════════════════════════════════════════════════════════════════
   v9 — LIGHT NAV + force bright across (highest specificity)
   ════════════════════════════════════════════════════════════════ */

/* LIGHT navigation bar */
nav.ac-nav, .ac-nav {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
nav.ac-nav.scrolled, .ac-nav.scrolled {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: #E2E8F0 !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06) !important;
}

/* Logo on light nav */
.nav-logo {
  color: #0F172A !important;
}
.nav-logo span {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Nav links on light bg */
.nav-link {
  color: #475569 !important;
}
.nav-link:hover, .nav-link.active {
  color: #0F172A !important;
  background: #F1F5F9 !important;
}
.nav-link svg { color: #94A3B8; }

/* Sign-in link */
.nav-sign {
  color: #475569 !important;
}
.nav-sign:hover {
  color: #0F172A !important;
  background: #F1F5F9 !important;
}

/* Ghost button on light nav */
.nav-actions .btn-ghost {
  background: #fff !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
.nav-actions .btn-ghost:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

/* Mobile hamburger */
.nav-hamburger span {
  background: #475569 !important;
}

/* Dropdowns — keep dark since they're elevated panels (good contrast) OR make light */
.nav-dropdown {
  background: #fff !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 6px rgba(15,23,42,.04), 0 20px 60px rgba(15,23,42,.12) !important;
}
.nav-dropdown .dd-link, .dd-link {
  color: #475569 !important;
}
.nav-dropdown .dd-link:hover, .dd-link:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
.nav-dropdown .dd-link.active, .dd-link.active {
  color: #2563EB !important;
}

/* Mobile menu — light */
.mobile-menu {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.mobile-link {
  color: #475569 !important;
}
.mobile-link:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Force HERO to be LIGHT on EVERY page (override inline styles) */
section.hero, section.hero.hero-light {
  background: linear-gradient(180deg, #FAFBFC 0%, #F8FAFC 60%, #EEF2FF 100%) !important;
}
section.hero::before, section.hero.hero-light::before {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(37,99,235,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 30%, rgba(37,99,235,.08) 0%, transparent 50%),
    radial-gradient(ellipse 30% 30% at 15% 25%, rgba(245,158,11,.06) 0%, transparent 50%) !important;
}
section.hero::after, section.hero.hero-light::after {
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px) !important;
}

/* Force hero TEXT to be DARK + centered */
section.hero h1 {
  color: #0F172A !important;
  text-align: center !important;
  max-width: 940px; margin: 0 auto 28px !important;
}
section.hero h1 em {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
section.hero .hero-lede, section.hero p.hero-lede {
  color: #475569 !important;
  max-width: 700px; margin: 0 auto 40px !important;
  text-align: center !important;
}
section.hero .hero-lede b {
  color: #0F172A !important;
}
section.hero .hero-actions {
  justify-content: center !important;
}
section.hero .hero-trust {
  justify-content: center !important;
  border-top-color: #E2E8F0 !important;
  margin: 0 auto !important;
}
section.hero .hero-trust-item span {
  color: #475569 !important;
}
section.hero .hero-trust-item svg { color: #059669 !important; }

/* hero-tag-light fix */
.hero-tag, .hero-tag-light {
  background: #fff !important;
  border: 1px solid #BFDBFE !important;
  color: #1E293B !important;
  margin: 0 auto 28px !important;
  display: inline-flex !important;
}
.hero-tag .new, .hero-tag-light .new {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  color: #fff !important;
}

/* Center hero-inner content */
.hero-inner {
  text-align: center !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* play-link */
.hero .play-link, .hero-light .play-link {
  color: #475569 !important;
}
.hero .play-link .play-circle, .hero-light .play-link .play-circle {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  color: #2563EB !important;
}

/* Body background — soft white default */
body {
  background: #FFFFFF !important;
  color: #0F172A;
}

/* ════════════════════════════════════════════════════════════════
   v10 — Tighter spacing + centered nav links + single-color polish
   ════════════════════════════════════════════════════════════════ */

/* === CENTERED NAV LINKS === */
.nav-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
}
.nav-logo {
  margin-right: 0 !important;
}
.nav-menu, .nav-links {
  justify-content: center !important;
  gap: 4px !important;
  flex: none !important;
}
.nav-actions {
  margin-left: 0 !important;
}

/* === TIGHTER SECTION SPACING === */
section { padding: 56px 0 !important; }
section.tight { padding: 40px 0 !important; }
section.snug  { padding: 28px 0 !important; }
section.hero, section.hero-light {
  padding: 110px 0 50px !important;
}
.hero-product { margin-top: 48px !important; }

/* Tighten internal section margin-bottoms */
.centered-header { margin-bottom: 36px !important; }
[class*="section"] [style*="margin-bottom: 56px"] { margin-bottom: 32px !important; }
[class*="section"] [style*="margin-bottom: 48px"] { margin-bottom: 28px !important; }
[class*="section"] [style*="margin-bottom: 64px"] { margin-bottom: 36px !important; }

/* Tighter card padding */
.module-cat-card { padding: 22px !important; }
.story-card { padding: 28px 24px !important; }
.diff-card-light { padding: 24px 22px !important; }
.platform-card-light { padding: 24px 22px !important; }
.problem-card-light { padding: 24px !important; }
.success-team-card-light { padding: 36px 32px !important; gap: 36px !important; }
.pricing-teaser-light { padding: 36px !important; }
.module-tabs .mt-panel { padding: 28px 32px !important; gap: 32px !important; }
.demo-band { padding: 32px !important; gap: 32px !important; }
.askbooks-card { padding: 32px !important; }

/* Tighter switch-band */
.switch-band { padding: 36px !important; margin-top: 24px !important; }
.switch-grid { gap: 16px !important; margin-top: 24px !important; }
.switch-pillar { padding: 22px !important; }

/* === SINGLE-COLOR PROFESSIONAL — Royal Blue ===
   Standardize ALL gradient text/buttons on a single blue gradient */
h1 em,
.hero h1 em, .hero-light h1 em,
.section-light h2 em, .section-cream h2 em, section h2 em,
.success-team-card-light h3 em,
.mega-stat-row .ms-num .accent,
.mega-stat-row-light .ms-num .accent,
.pricing-teaser-light .pta-num,
.askbooks-content h4 em,
.spend-more h3 .more, .spend-more h3 .less {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* "less" stays red as semantic */
.spend-more h3 .less {
  background: none !important;
  -webkit-text-fill-color: #DC2626 !important;
}

/* Standardize all buttons on single Royal Blue */
.btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 4px 12px rgba(37,99,235,.25),
    0 0 0 1px rgba(37,99,235,.3) !important;
}
.btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 8px 18px rgba(37,99,235,.32),
    0 0 0 1px rgba(37,99,235,.4) !important;
}

/* Hero pill announcement — clean blue */
.hero-tag-light .new {
  background: #2563EB !important;
}
.hero-tag-light .arrow { color: #2563EB !important; }

/* Eyebrow — single style */
.eyebrow, .section-eyebrow.eyebrow-blue {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  font-size: 11px !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
}

/* Tighter header margin-bottom inside centered-header */
.centered-header h2,
section h2 {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
}
.centered-header .lede,
section .lede {
  margin-top: 12px !important;
}

/* Center every section title — sledgehammer */
section .section-title,
section h2.display-font,
section h2 {
  text-align: center !important;
}

/* Center the section header wrappers that have max-width */
section > .container > div[style*="max-width"]:first-child {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Demo band — center heading */
.demo-band-left h2 { text-align: center !important; }
.demo-band-left .demo-bullets { max-width: 480px; margin: 24px auto !important; }

/* Final CTA — keep single-color blue */
section[style*="#020817"] [style*="linear-gradient(135deg, #1E3A8A 0%, #1E3A8A 100%"],
.cta-band {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%) !important;
}

/* Mobile responsive — keep nav grid working */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr auto !important; }
}

/* Tighten mobile spacing more */
@media (max-width: 768px) {
  section { padding: 40px 0 !important; }
  section.tight { padding: 28px 0 !important; }
  section.snug  { padding: 20px 0 !important; }
  section.hero { padding: 90px 0 36px !important; }
  .hero-product { margin-top: 32px !important; }
}

/* ════════════════════════════════════════════════════════════════
   v11 — FIX ALL READABILITY · vertical pages were unreadable
   The vertical pages had inline `color: #fff` everywhere because
   they were designed for dark bg. After bright-theme conversion,
   white text on white = invisible. This forces all text to dark.
   ════════════════════════════════════════════════════════════════ */

/* === Tab buttons (used in k12 module-tabs etc) === */
.tab-btn {
  background: #fff !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
  font-weight: 600 !important;
  transition: all 200ms !important;
}
.tab-btn:hover {
  background: #F8FAFC !important;
  border-color: #BFDBFE !important;
  color: #0F172A !important;
}
.tab-btn.active {
  background: #2563EB !important;
  color: #fff !important;
  border-color: #2563EB !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.25) !important;
}

/* === Tab panel content (titles, descriptions, lists) === */
.tp-title, .tab-panel h3, .tab-panel .tp-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
}
.tp-desc, .tab-panel p, .tab-panel .tp-desc {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.tp-list li, .tab-panel ul li {
  color: #1E293B !important;
  font-size: 14px !important;
}
.tp-list li::before {
  color: #2563EB !important;
  font-weight: 800 !important;
}
/* tp-visual stays as a dark "product screenshot" container for contrast */
.tp-visual {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 32px -8px rgba(15,23,42,.2);
}

/* === Module tab section background — light === */
.module-tabs-section {
  background: #F8FAFC !important;
  padding: 56px 0 !important;
}

/* === Feature cards (vertical pages) — light === */
.feature-card {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}
.feature-card:hover {
  border-color: #BFDBFE !important;
  box-shadow: 0 12px 24px -8px rgba(37,99,235,.12) !important;
}
.feature-card h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.feature-card p {
  color: #475569 !important;
}
.feature-icon {
  background: #EFF6FF !important;
  color: #2563EB !important;
}

/* === Section eyebrows on vertical pages === */
.features-section .section-eyebrow,
.module-tabs-section .section-eyebrow,
.testimonial-section .section-eyebrow,
section .section-eyebrow {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  margin-bottom: 14px !important;
}
.features-section .section-title,
.module-tabs-section .section-title,
.testimonial-section .section-title,
section h2.section-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  text-align: center !important;
}

/* === Testimonial cards — light === */
.testi-card, .testimonial-section .testi-card {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
.testi-card:hover {
  border-color: #BFDBFE !important;
  box-shadow: 0 12px 24px -8px rgba(37,99,235,.1) !important;
}
.testi-text {
  color: #1E293B !important;
}
.testi-name {
  color: #0F172A !important;
}
.testi-role {
  color: #64748B !important;
}
.testi-avatar {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
}

/* === sol-cta on vertical pages — light === */
.sol-cta {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid #BFDBFE !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.06) !important;
  color: #0F172A !important;
}
.sol-cta::before { display: none !important; }
.sol-cta h2 {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.sol-cta p {
  color: #475569 !important;
}

/* === Module category cards (vertical pages) === */
.module-cat-card {
  background: #fff !important;
  border-color: #E2E8F0 !important;
}
.module-cat-card h3 { color: #0F172A !important; }
.module-cat-card p { color: #475569 !important; }
.module-cat-card .mc-list span {
  background: #F1F5F9 !important;
  color: #475569 !important;
}

/* === Problem cards on dark vertical sections — keep them readable === */
.problem-grid .problem-card,
section[style*="020817"] .problem-card {
  background: rgba(255,255,255,.04) !important;
  color: #F8FAFC !important;
}
.problem-card h4 { color: #F8FAFC !important; }
.problem-card p { color: rgba(203,213,225,.7) !important; }

/* === Light versions of problem grid (already exists, ensure visible) === */
.problem-grid-light, .problem-card-light, .problem-card-light h4, .problem-card-light p {
  color: inherit;
}
.problem-card-light h4 { color: #0F172A !important; }
.problem-card-light p { color: #475569 !important; }

/* === Compliance pills, badges, generic text on vertical pages === */
.naac-grade, .compliance-section .comp-badge .label {
  color: #0F172A !important;
}
.dept-name { color: #475569 !important; }
.dept-students { color: #2563EB !important; }
.naac-text { color: #475569 !important; }
.comp-badge {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
}
.comp-badge .label { color: #0F172A !important; }
.comp-badge .sub { color: #64748B !important; }

.compliance-section {
  background: #F8FAFC !important;
}

/* === Features section background reset === */
.features-section {
  background: #fff !important;
  padding: 56px 0 !important;
}
.features-grid { gap: 16px !important; margin-top: 32px !important; }

/* === Hostel/Boarding/etc sections — light === */
.exam-types, .compliance-section, .reminder-section, .parent-section, .how-section,
.audit-section, .arch-section, .uptime-section, .pillars-section, .dpdp-section {
  background: #F8FAFC !important;
  padding: 56px 0 !important;
}
/* Force any text inside these to dark */
.exam-types h2, .compliance-section h2, .reminder-section h2, .parent-section h2,
.how-section h2, .audit-section h2, .pillars-section h2,
.exam-types .section-title, .compliance-section .section-title,
.reminder-section .section-title, .pillars-section .section-title {
  color: #0F172A !important;
}

/* === sol-hero stat counters — readable dark === */
.sol-hero div[style*="font-weight:900"],
.sol-hero div[data-target] {
  color: #2563EB !important;
  background: none !important;
  -webkit-text-fill-color: #2563EB !important;
}
.sol-hero div[style*="rgba(255,255,255,.5)"],
.sol-hero div[style*="rgba(255,255,255,.65)"] {
  color: #475569 !important;
}

/* === Force ANY remaining `color: #fff` on light-bg sections to dark === */
section.section-light *[style*="color:#fff"], section.section-light *[style*="color: #fff"],
section.section-bright *[style*="color:#fff"], section.section-bright *[style*="color: #fff"],
section.section-cream *[style*="color:#fff"], section.section-cream *[style*="color: #fff"] {
  color: #0F172A !important;
}

/* === Reveal animations — force visible immediately if JS hasn't run === */
.reveal, .reveal-up { opacity: 1 !important; transform: none !important; }

/* === FURTHER tighten spacing — was still too loose === */
section { padding: 48px 0 !important; }
section.tight { padding: 32px 0 !important; }
section.snug  { padding: 24px 0 !important; }
section.hero, section.hero-light { padding: 96px 0 40px !important; }
.hero-product { margin-top: 36px !important; }
section .container > div[style*="margin-bottom: 56px"],
section .container > div[style*="margin-bottom: 48px"],
section .container > div[style*="margin-bottom: 64px"],
section .container > div[style*="margin-bottom: 36px"] {
  margin-bottom: 28px !important;
}

/* === Final CTA section — tighten === */
section[style*="padding: 96px 0 80px"] { padding: 56px 0 48px !important; }

/* Pricing-hero, about-hero, contact-hero, sec-hero — tighten too */
.pricing-hero, .about-hero, .contact-hero, .sec-hero {
  padding: 90px 0 36px !important;
}
.sol-hero, .prod-hero {
  padding: 96px 0 40px !important;
}

/* ════════════════════════════════════════════════════════════════
   v12 — FINAL bulletproof readability + UI consistency
   ════════════════════════════════════════════════════════════════ */

/* === Force ALL inline-style sections that had dark bg to use light === */
section[style*="background:#020817"],
section[style*="background: #020817"],
section[style*="background:#0F172A"],
section[style*="background: #0F172A"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  color: #0F172A !important;
}

/* === Force ALL section h2 inside light pages to be DARK and visible === */
section[style*="background"] h2,
.section-light h2,
.section-cream h2,
.section-bright h2,
section.features-section h2,
section.module-tabs-section h2,
section.testimonial-section h2 {
  color: #0F172A !important;
  text-align: center !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}

/* The h2 might have an em that needs gradient on light bg */
section h2 em {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal !important;
}

/* === Force ALL section subtitles/lede to be readable === */
section .section-sub, section .lede, section[style*="background"] p:not(.testi-text):not(.story-quote):not(.tp-desc) {
  color: #475569 !important;
  text-align: center !important;
  margin: 12px auto 0 !important;
  max-width: 640px !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* === Problem cards — ensure light variant always renders correctly === */
.problem-grid, .problem-grid-light {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  border: 1px solid #FECACA !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  margin-top: 32px !important;
}
.problem-grid .problem-card,
.problem-grid-light .problem-card,
.problem-grid-light .problem-card-light,
.problem-grid .problem-card-light {
  background: #FFFAFA !important;
  color: #0F172A !important;
  padding: 24px !important;
  border-right: 1px solid #FECACA !important;
  border-bottom: 1px solid #FECACA !important;
}
.problem-grid .problem-card:nth-child(3n),
.problem-grid-light .problem-card-light:nth-child(3n),
.problem-grid .problem-card-light:nth-child(3n) { border-right: none !important; }
.problem-grid .problem-card:nth-last-child(-n+3),
.problem-grid-light .problem-card-light:nth-last-child(-n+3) { border-bottom: none !important; }

/* Responsive: collapse the 3-col problem grid on tablets/phones (override !important above) */
@media (max-width: 1100px) {
  .problem-grid, .problem-grid-light { grid-template-columns: repeat(2, 1fr) !important; }
  .problem-grid .problem-card:nth-child(3n),
  .problem-grid-light .problem-card-light:nth-child(3n) { border-right: 1px solid #FECACA !important; }
  .problem-grid .problem-card:nth-child(2n),
  .problem-grid-light .problem-card-light:nth-child(2n) { border-right: none !important; }
}
@media (max-width: 700px) {
  .problem-grid, .problem-grid-light { grid-template-columns: 1fr !important; }
  .problem-grid .problem-card,
  .problem-grid-light .problem-card-light { border-right: none !important; }
}

.problem-card h4, .problem-card-light h4 {
  color: #0F172A !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}
.problem-card p, .problem-card-light p {
  color: #475569 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.problem-card .pc-num, .problem-card-light .pc-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1.5px solid #FECACA !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}
.problem-card .pc-stat, .problem-card-light .pc-stat {
  margin-top: 14px !important;
  font-size: 11.5px !important;
  color: #DC2626 !important;
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  font-weight: 700 !important;
}

/* === Module-cat-card consistency — light === */
.module-cat-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  padding: 22px !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
.module-cat-card h3 { color: #0F172A !important; font-weight: 800 !important; }
.module-cat-card p { color: #475569 !important; }
.module-cat-card .mc-icon {
  background: #EFF6FF !important;
  color: #2563EB !important;
}
.module-cat-card .mc-list span {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
}

/* === Vertical-page CTA section background fix === */
section[style*="padding:0 0 80px"], section[style*="padding: 0 0 80px"] {
  padding: 32px 0 56px !important;
  background: #FFFFFF !important;
}
.sol-cta {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 24px !important;
  padding: 48px !important;
  margin: 0 !important;
  text-align: center !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.06) !important;
}
.sol-cta h2 {
  color: #0F172A !important;
  margin-bottom: 12px !important;
  font-size: clamp(24px, 3.5vw, 36px) !important;
}
.sol-cta p {
  color: #475569 !important;
  margin-bottom: 28px !important;
  font-size: 16px !important;
}
.sol-cta .btn-primary { display: inline-flex !important; }

/* === Tab strip — premium look === */
.tab-strip {
  display: inline-flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  background: #F1F5F9 !important;
  padding: 6px !important;
  border-radius: 12px !important;
  margin: 0 auto 28px !important;
  border: 1px solid #E2E8F0 !important;
}
section[data-tabs] {
  text-align: center !important;
}
section[data-tabs] .tab-strip {
  margin-left: auto !important;
  margin-right: auto !important;
}
.tab-btn {
  padding: 10px 18px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  color: #475569 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.tab-btn:hover { background: rgba(255,255,255,.7) !important; color: #0F172A !important; box-shadow: none !important; }
.tab-btn.active {
  background: #FFFFFF !important;
  color: #2563EB !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
}
.tab-panel {
  text-align: left !important;
  margin-top: 28px !important;
}
.tab-panel.active { display: grid !important; }

/* === Vertical hero stats — readable on light === */
.sol-hero div[style*="font-size:1.6rem"],
.sol-hero div[style*="font-size: 1.6rem"] {
  color: #2563EB !important;
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* === Vertical hero subtext labels === */
.sol-hero div[style*="rgba(255,255,255"] { color: #64748B !important; }

/* === Force testi-card text to be readable (dark on light) === */
.testi-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; padding: 24px !important; }
.testi-text { color: #1E293B !important; }
.testi-name { color: #0F172A !important; }
.testi-role { color: #64748B !important; }
.stars { color: #F59E0B !important; }

/* === Force feature-card text === */
.feature-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; padding: 22px !important; box-shadow: 0 1px 3px rgba(15,23,42,.04) !important; }
.feature-card h3 { color: #0F172A !important; }
.feature-card p { color: #475569 !important; }
.feature-icon { background: #EFF6FF !important; color: #2563EB !important; }

/* === Generic h2/h3 readability on any section === */
section h3 { color: #0F172A; }
section p { color: #475569; }
section ul li { color: #1E293B; }

/* === The "spend more time / less" callout === */
.spend-more {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 16px !important;
  padding: 28px 36px !important;
  text-align: center !important;
  margin-top: 24px !important;
}
.spend-more h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.5vw, 24px) !important;
}
.spend-more h3 .more {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.spend-more h3 .less {
  color: #DC2626 !important;
  background: none !important;
  -webkit-text-fill-color: #DC2626 !important;
  -webkit-background-clip: initial !important;
}

/* === Final sanity check — never let any text be invisible === */
* { text-rendering: optimizeLegibility; }
section [style*="color: rgba(255,255,255"] { color: #475569 !important; }
section [style*="color:rgba(255,255,255"] { color: #475569 !important; }
section [style*="color: #fff"] { color: #0F172A !important; }
section [style*="color:#fff"] { color: #0F172A !important; }
section [style*="color: #F8FAFC"] { color: #0F172A !important; }
section [style*="color:#F8FAFC"] { color: #0F172A !important; }

/* But preserve white text in: footer, dark-CTA, dark dashboard mockups, dark notif elements */
footer * { color: revert !important; }
footer a, footer span, footer h4, footer li { color: rgba(203,213,225,.65) !important; }
footer h4 { color: #F8FAFC !important; }
.cta-band *, [class*="cta-band"] *,
.k12-dash *, .uni-dash *, .eng-dash *, .coaching-dash *, .playschool-mockup *,
.dash-mock *, .fee-dash *, .stake-visual *, .browser *, .sv-card *,
.success-team-card-light .stc-member *, .success-team-card-light .stc-content {
  color: revert !important;
}
.askbooks-card *, .float-notif * { color: revert !important; }

/* Browser mockup is dark — preserve white text */
.browser, .browser * { color: revert !important; }
.b-side, .b-side *, .b-main, .b-main *, .b-kpi *, .b-chart-card * {
  color: revert !important;
}

/* Final CTA dark band — preserve white */
section[style*="background: #020817; padding: 96px 0 80px"] *,
section[style*="background: #020817; padding:96px 0 80px"] * {
  color: revert !important;
}

/* === REDUCE all section gaps even more === */
section { padding: 40px 0 !important; }
section.tight { padding: 28px 0 !important; }
section.snug  { padding: 20px 0 !important; }
section.hero, section.hero-light { padding: 80px 0 32px !important; }
.sol-hero, .prod-hero, .pricing-hero, .about-hero, .contact-hero, .sec-hero {
  padding: 88px 0 36px !important;
}
.features-section, .module-tabs-section, .testimonial-section,
.parent-section, .how-section, .compliance-section, .reminder-section,
.exam-types, .pillars-section, .audit-section, .arch-section, .uptime-section, .dpdp-section {
  padding: 40px 0 !important;
}
.hero-product { margin-top: 24px !important; }
.centered-header { margin-bottom: 24px !important; }

/* ════════════════════════════════════════════════════════════════
   v13 — FIX dashboard mockup text (was being clobbered by overrides)
   ════════════════════════════════════════════════════════════════ */

/* Browser product mockup — RESTORE all original text colors  */
.browser, .browser *,
.browser-bar, .browser-bar *,
.browser-body, .browser-body *,
.b-side, .b-side *,
.b-main, .b-main *,
.b-nav-group, .b-nav-group *,
.b-nav-item, .b-nav-item *,
.b-nav-label,
.b-main-head, .b-main-head *,
.b-kpis, .b-kpis *,
.b-kpi, .b-kpi *,
.b-charts, .b-charts *,
.b-chart-card, .b-chart-card *,
.b-chart-title, .b-chart-title *,
.b-bars, .b-bars *,
.b-bar-labels, .b-bar-labels *,
.b-list, .b-list *,
.b-list-row, .b-list-row *,
.b-list-name, .b-list-meta, .b-list-status,
.b-side .b-logo, .b-side .b-logo *,
.b-url, .b-url * {
  color: unset;
}

/* Now explicitly set the right colors INSIDE the browser */
.browser-body { background: #0F172A; }
.b-side .b-logo { color: #F8FAFC !important; font-weight: 800; }
.b-side .b-logo span {
  background: linear-gradient(135deg, #60A5FA, #3B82F6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.b-nav-label {
  color: rgba(203,213,225,.4) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.b-nav-item {
  color: rgba(203,213,225,.65) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.b-nav-item.active {
  background: rgba(59,130,246,.12) !important;
  color: #60A5FA !important;
}
.b-nav-item .b-badge {
  background: #DC2626 !important;
  color: #fff !important;
}

.b-main-head h3 { color: #F8FAFC !important; font-size: 17px !important; font-weight: 800 !important; }
.b-main-head p { color: rgba(203,213,225,.5) !important; font-size: 11.5px !important; margin-top: 2px !important; }
.b-main-head .term-pill {
  background: rgba(16,185,129,.1) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16,185,129,.25) !important;
}
.b-kpi-label {
  color: rgba(203,213,225,.4) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.b-kpi-val { color: #F8FAFC !important; font-size: 20px !important; font-weight: 800 !important; }
.b-kpi-delta.up { color: #34D399 !important; }
.b-kpi-delta.down { color: #F87171 !important; }
.b-chart-title { color: #F8FAFC !important; font-size: 12px !important; font-weight: 700 !important; }
.b-chart-title small { color: rgba(203,213,225,.4) !important; font-size: 10px !important; font-weight: 500 !important; }
.b-bar-labels span { color: rgba(203,213,225,.4) !important; font-size: 9.5px !important; }
.b-list-row { background: rgba(255,255,255,.02) !important; }
.b-list-name { color: rgba(203,213,225,.85) !important; font-size: 11.5px !important; font-weight: 500 !important; }
.b-list-meta { color: rgba(203,213,225,.4) !important; font-size: 10.5px !important; }
.b-list-status.warn { background: rgba(251,191,36,.1) !important; color: #FBBF24 !important; border: 1px solid rgba(251,191,36,.2) !important; }
.b-list-status.info { background: rgba(59,130,246,.1) !important; color: #60A5FA !important; border: 1px solid rgba(59,130,246,.2) !important; }
.b-url { color: rgba(203,213,225,.6) !important; }

/* Floating notif chips — preserve white card with dark text */
.float-notif {
  background: #fff !important;
  color: #0F172A !important;
}
.float-notif .fn-title { color: #0F172A !important; font-weight: 700 !important; }
.float-notif .fn-desc { color: #64748B !important; }

/* Stake-visual (stakeholder mockups) — preserve dark */
.stake-visual, .stake-visual * { color: unset; }
.stake-visual { background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important; }
.sv-card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.sv-card-row .sv-name { color: #F8FAFC !important; font-size: 13px !important; font-weight: 700 !important; }
.sv-card-row .sv-sub { color: rgba(203,213,225,.55) !important; font-size: 11px !important; }
.sv-stat { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.05) !important; }
.sv-stat-num { color: #F8FAFC !important; font-size: 18px !important; font-weight: 800 !important; }
.sv-stat-label { color: rgba(203,213,225,.5) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .05em !important; font-weight: 600 !important; }

/* Vertical-page dashboard mockups — preserve dark with white text */
.k12-dash, .uni-dash, .eng-dash, .coaching-dash,
.playschool-mockup, .dash-mock, .fee-dash {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  color: #F8FAFC !important;
}
.k12-dash *, .uni-dash *, .eng-dash *, .coaching-dash *,
.playschool-mockup *, .dash-mock *, .fee-dash *,
.tp-visual *, .mt-visual * {
  /* Reset to allow original styles to apply */
}
.dash-title, .dash-topbar, .dash-topbar *,
.kpi-val, .kpi-label, .att-label, .att-class, .att-pct,
.exam-name, .exam-sub,
.dept-name, .dept-students,
.placement-title, .co-name, .co-pkg, .co-count,
.po-code, .po-score,
.batch-name, .batch-exam, .batch-strength,
.rank-label, .rank-student, .rank-score, .rank-change,
.fee-month, .fee-trend, .col-label, .col-amount, .col-of,
.fee-bk-val, .fee-bk-label, .txn-label, .txn-name, .txn-amount,
.mock-title, .mock-sub, .day-card .label, .day-card .val,
.milestone-row .m-label, .m-chip,
.notif-card *, .phone-status,
.naac-text, .naac-grade, .naac-badge, .naac-badge *,
.obe-strip, .obe-strip *, .obe-title,
.pipe-label, .pipe-count {
  color: revert !important;
}

/* MT visual stays dark */
.mt-visual {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.mt-visual .mt-stat {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.mt-visual .mt-stat-num { color: #F8FAFC !important; font-weight: 800 !important; }
.mt-visual .mt-stat-label { color: rgba(203,213,225,.55) !important; }

/* CTA-band dark — preserve white text */
.cta-band, .cta-band * { color: unset; }
.cta-band h2 { color: #fff !important; }
.cta-band p { color: rgba(203,213,225,.85) !important; }
.cta-band a { color: #fff; }

/* Final CTA section (the dark blue/violet band before footer) */
section[style*="background: #020817; padding: 96px 0 80px"] *,
section[style*="background:#020817; padding: 96px 0 80px"] * { color: unset; }
section[style*="background: #020817; padding: 96px 0 80px"] h2 { color: #fff !important; }
section[style*="background: #020817; padding: 96px 0 80px"] p { color: rgba(203,213,225,.85) !important; }
section[style*="background: #020817; padding: 96px 0 80px"] .btn-ghost {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
}

/* Footer — preserve dark with light text */
footer, footer * { color: unset; }
footer h4 { color: #F8FAFC !important; font-weight: 800 !important; }
footer a, footer ul li, footer span:not(.new-pill) {
  color: rgba(203,213,225,.65) !important;
}
footer .nav-logo { color: #fff !important; font-size: 24px !important; }
footer .nav-logo span {
  background: linear-gradient(135deg, #60A5FA, #3B82F6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* AskBooks card preserve its dark green look */
.askbooks-card, .askbooks-card * { color: unset; }
.askbooks-content .ab-tag { color: #34D399 !important; font-weight: 700 !important; }
.askbooks-content h4 { color: #F8FAFC !important; font-size: 22px !important; font-weight: 800 !important; }
.askbooks-content p { color: rgba(203,213,225,.85) !important; }
.askbooks-cta { background: #fff !important; color: #047857 !important; font-weight: 800 !important; }

/* WhatsApp fab preserve white */
.whatsapp-fab, .whatsapp-fab * { color: #fff !important; }

/* Sticky CTA bar dark — preserve white text */
.sticky-cta, .sticky-cta * { color: unset; }
.sticky-cta-text { color: rgba(248,250,252,.85) !important; }
.sticky-cta-text b { color: #F8FAFC !important; }
.sticky-cta-close { color: rgba(255,255,255,.4) !important; }

/* ════════════════════════════════════════════════════════════════
   v14 — FINAL light-only system (footer is the ONLY dark element)
   ════════════════════════════════════════════════════════════════ */

/* === LIGHT inline-cta (was dark blue/violet) === */
.inline-cta {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  color: #0F172A !important;
  border: 1px solid #BFDBFE !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.06) !important;
}
.inline-cta-text h4 { color: #0F172A !important; font-weight: 800 !important; font-size: 22px !important; }
.inline-cta-text p { color: #475569 !important; font-size: 14.5px !important; }
.inline-cta .btn-white {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.25) !important;
}

/* === LIGHT askbooks card === */
.askbooks-card {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important;
  border: 1px solid #A7F3D0 !important;
  box-shadow: 0 8px 24px rgba(16,185,129,.08) !important;
  color: #0F172A !important;
}
.askbooks-card::before { display: none !important; }
.askbooks-icon {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  box-shadow: 0 6px 16px rgba(16,185,129,.3) !important;
}
.askbooks-content { color: #0F172A !important; }
.askbooks-content .ab-tag {
  color: #047857 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.askbooks-content h4 {
  color: #0F172A !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 6px !important;
}
.askbooks-content h4 .new-pill {
  background: #047857 !important;
  color: #fff !important;
  border: none !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  letter-spacing: .08em !important;
  font-weight: 800 !important;
}
.askbooks-content p {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  max-width: 540px !important;
}
.askbooks-cta {
  background: linear-gradient(135deg, #047857, #065F46) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(4,120,87,.25) !important;
}

/* === LIGHT final CTA === */
section[style*="background: #020817; padding: 96px 0 80px"] {
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%) !important;
  padding: 56px 0 48px !important;
}
section[style*="background: #020817; padding: 96px 0 80px"] > .container > div {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 24px !important;
  padding: 56px 40px !important;
  text-align: center !important;
  box-shadow: 0 20px 48px -12px rgba(37,99,235,.4) !important;
}
section[style*="background: #020817; padding: 96px 0 80px"] h2 {
  color: #fff !important;
  font-size: clamp(28px, 4.5vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  margin-bottom: 16px !important;
}
section[style*="background: #020817; padding: 96px 0 80px"] p {
  color: rgba(255,255,255,.92) !important;
  font-size: 16px !important;
  margin-bottom: 28px !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
section[style*="background: #020817; padding: 96px 0 80px"] .btn-primary {
  background: #fff !important;
  color: #1D4ED8 !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.15) !important;
}
section[style*="background: #020817; padding: 96px 0 80px"] .btn-ghost {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  backdrop-filter: blur(8px) !important;
}
section[style*="background: #020817; padding: 96px 0 80px"] a[href*="wa.me"] {
  background: #25D366 !important;
  color: #fff !important;
  border: none !important;
}
section[style*="background: #020817; padding: 96px 0 80px"] a[href*="tel:"] {
  color: #FBBF24 !important;
  font-weight: 700 !important;
}

/* === LIGHT vertical selector inline CTA at bottom of vertical-grid === */
.section-light .inline-cta {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
}

/* === Stake-visual mockup card text (Anjali greeting card) === */
.sv-card-row .sv-name {
  color: #F8FAFC !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.sv-card-row .sv-sub {
  color: rgba(203,213,225,.6) !important;
  font-size: 11px !important;
}
.sv-status.green {
  background: rgba(16,185,129,.18) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16,185,129,.3) !important;
}
.sv-status.amber {
  background: rgba(251,191,36,.18) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(251,191,36,.3) !important;
}
.sv-status.blue {
  background: rgba(59,130,246,.18) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(59,130,246,.3) !important;
}
.sv-stat-num { color: #F8FAFC !important; font-weight: 800 !important; font-size: 18px !important; }
.sv-stat-label { color: rgba(203,213,225,.6) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .05em !important; font-weight: 600 !important; }

/* === Mt-visual stat numbers === */
.mt-visual .mt-stat-num { color: #F8FAFC !important; font-weight: 800 !important; font-size: 22px !important; }
.mt-visual .mt-stat-label { color: rgba(203,213,225,.55) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .08em !important; }

/* === FOOTER — clear & readable === */
footer {
  background: #0B1220 !important;
  color: #CBD5E1 !important;
  padding: 56px 0 32px !important;
}
footer * { color: unset; }
footer .nav-logo {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}
footer .nav-logo span {
  background: linear-gradient(135deg, #60A5FA, #3B82F6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
footer p {
  color: rgba(203,213,225,.7) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
footer h4 {
  color: #F8FAFC !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  margin-bottom: 18px !important;
}
footer ul li, footer ul li a {
  color: rgba(203,213,225,.75) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
footer ul li a:hover { color: #fff !important; }
footer .new-pill, footer span[style*="background:#10B981"] {
  background: #10B981 !important;
  color: #fff !important;
}
footer span[style*="background:#2563EB"] {
  background: #2563EB !important;
  color: #fff !important;
}
footer div[style*="background: rgba(255,255,255,.03)"] {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
footer div[style*="background: rgba(255,255,255,.03)"] div {
  color: revert !important;
}
footer .nav-logo + p { color: rgba(203,213,225,.7) !important; }
footer span[style*="color: rgba(203,213,225,.5)"] { color: rgba(203,213,225,.5) !important; }
footer span[style*="color: rgba(203,213,225,.6)"] { color: rgba(203,213,225,.6) !important; }
footer span[style*="color: rgba(203,213,225,.85)"] { color: rgba(203,213,225,.85) !important; }
footer div[style*="font-size: 11px"][style*="color: rgba(203,213,225,.5)"] { color: rgba(203,213,225,.5) !important; }
footer div[style*="font-size: 13px"][style*="color: rgba(203,213,225,.85)"] { color: #F8FAFC !important; }
footer div[style*="font-size: 12px"][style*="color: rgba(203,213,225,.6)"] { color: rgba(203,213,225,.6) !important; }

/* Social icons in footer */
footer a[style*="border-radius:8px"] {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(203,213,225,.8) !important;
}
footer a[style*="border-radius:8px"]:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* "All systems operational" pill */
footer span[style*="background: rgba(16,185,129,.1)"] {
  background: rgba(16,185,129,.15) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16,185,129,.25) !important;
}

/* ════════════════════════════════════════════════════════════════
   v15 — END-TO-END mockup-text fix across ALL vertical pages
   Every product-screenshot mockup stays DARK with WHITE text
   ════════════════════════════════════════════════════════════════ */

/* === ALL dashboard / mockup containers — force dark with proper text === */
.k12-dash, .uni-dash, .eng-dash, .coaching-dash,
.playschool-mockup, .dash-mock, .fee-dash,
.parent-phone, .ib-dash, .skill-dash, .boarding-dash,
.mc-dash, .dept-row, .pipeline {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #F8FAFC !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,.25) !important;
}

/* === PLAYSCHOOL mockup classes === */
.playschool-mockup, .playschool-mockup * { color: revert !important; }
.mock-header { color: #F8FAFC !important; }
.mock-title { color: #F8FAFC !important; font-size: 15px !important; font-weight: 700 !important; }
.mock-sub { color: rgba(203,213,225,.5) !important; font-size: 12px !important; }
.day-grid .day-card { background: rgba(255,255,255,.06) !important; }
.day-card .label { color: rgba(203,213,225,.5) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.day-card .val { color: #F8FAFC !important; font-size: 14px !important; font-weight: 700 !important; }
.milestone-row { background: rgba(255,255,255,.05) !important; }
.milestone-row .m-label { color: rgba(203,213,225,.5) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.m-chip { background: rgba(251,191,36,.15) !important; color: #FBBF24 !important; border: 1px solid rgba(251,191,36,.25) !important; }
.m-chip.done { background: rgba(16,185,129,.15) !important; color: #34D399 !important; border-color: rgba(16,185,129,.25) !important; }

/* Playschool parent phone mockup */
.parent-phone { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important; max-width: 280px !important; padding: 20px !important; border-radius: 32px !important; }
.phone-status { color: rgba(203,213,225,.45) !important; font-size: 11px !important; }
.notif-card { background: rgba(255,255,255,.06) !important; color: #F8FAFC !important; border-radius: 12px !important; padding: 12px 14px !important; margin-bottom: 10px !important; display: flex !important; gap: 10px !important; align-items: flex-start !important; }
.notif-card * { color: revert !important; }
.notif-body .n-title { color: #F8FAFC !important; font-size: 12px !important; font-weight: 700 !important; }
.notif-body .n-text { color: rgba(203,213,225,.6) !important; font-size: 11px !important; margin-top: 2px !important; }
.notif-body .n-time { color: rgba(203,213,225,.35) !important; font-size: 10px !important; margin-top: 4px !important; }

/* Playschool steps */
.step-num { background: linear-gradient(135deg, #2563EB, #1D4ED8) !important; color: #fff !important; }
.step-box h4 { color: #0F172A !important; }
.step-box p { color: #475569 !important; }

/* === K-12 dashboard mockup === */
.k12-dash *, .uni-dash *, .eng-dash *, .coaching-dash *, .dash-mock *, .fee-dash * {
  color: revert !important;
}
.dash-title { color: #F8FAFC !important; font-size: 14px !important; font-weight: 700 !important; }
.dash-date { color: rgba(203,213,225,.45) !important; font-size: 11px !important; }
.kpi { background: rgba(255,255,255,.06) !important; }
.kpi-val { color: #F8FAFC !important; font-size: 1.4rem !important; font-weight: 900 !important; }
.kpi-label { color: rgba(203,213,225,.5) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.att-bar-wrap { background: rgba(255,255,255,.05) !important; }
.att-label { color: rgba(203,213,225,.5) !important; font-size: 11px !important; }
.att-class { color: rgba(203,213,225,.6) !important; font-size: 11px !important; }
.att-bar-bg { background: rgba(255,255,255,.1) !important; }
.att-bar-fill { background: linear-gradient(90deg, #2563EB, #60A5FA) !important; }
.att-pct { color: rgba(203,213,225,.5) !important; font-size: 10px !important; }
.exam-row { background: rgba(255,255,255,.05) !important; }
.exam-name { color: #F8FAFC !important; font-size: 12px !important; font-weight: 600 !important; }
.exam-sub { color: rgba(203,213,225,.45) !important; font-size: 10px !important; }
.exam-badge { background: rgba(16,185,129,.15) !important; color: #34D399 !important; border: 1px solid rgba(16,185,129,.3) !important; }

/* === HIGHER-ED university dashboard === */
.dept-item { background: rgba(255,255,255,.04) !important; }
.dept-name { color: rgba(248,250,252,.85) !important; font-size: 12px !important; font-weight: 600 !important; }
.dept-students { color: #60A5FA !important; font-size: 12px !important; font-weight: 700 !important; }
.naac-badge { background: linear-gradient(135deg, rgba(37,99,235,.2), rgba(96,165,250,.2)) !important; border: 1px solid rgba(37,99,235,.3) !important; }
.naac-grade { color: #60A5FA !important; font-size: 1.6rem !important; font-weight: 900 !important; }
.naac-text { color: rgba(203,213,225,.65) !important; font-size: 11px !important; }

/* === ENGINEERING placement dashboard === */
.placement-title { color: #F8FAFC !important; font-size: 13px !important; font-weight: 700 !important; }
.placed-pct { color: #34D399 !important; font-size: 1.8rem !important; font-weight: 900 !important; }
.company-row { background: rgba(255,255,255,.04) !important; }
.co-name { color: #F8FAFC !important; font-size: 12px !important; font-weight: 700 !important; }
.co-pkg { color: #34D399 !important; font-size: 12px !important; font-weight: 700 !important; }
.co-count { color: rgba(203,213,225,.45) !important; font-size: 10px !important; }
.obe-strip { background: rgba(37,99,235,.08) !important; border: 1px solid rgba(37,99,235,.15) !important; }
.obe-title { color: rgba(203,213,225,.45) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.po-item { background: rgba(255,255,255,.06) !important; }
.po-code { color: #60A5FA !important; font-size: 10px !important; font-weight: 700 !important; }
.po-score { color: #F8FAFC !important; font-size: 11px !important; font-weight: 700 !important; }

/* === COACHING dashboard === */
.batch-row { background: rgba(255,255,255,.04) !important; }
.batch-name { color: #F8FAFC !important; font-size: 12px !important; font-weight: 700 !important; }
.batch-exam { color: rgba(203,213,225,.5) !important; font-size: 10px !important; }
.batch-strength { color: #FBBF24 !important; font-size: 12px !important; font-weight: 700 !important; }
.rank-box { background: rgba(251,191,36,.08) !important; border: 1px solid rgba(251,191,36,.15) !important; }
.rank-label { color: rgba(203,213,225,.45) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.rank-student { color: rgba(203,213,225,.7) !important; font-size: 11px !important; }
.rank-score { color: #FBBF24 !important; font-size: 11px !important; font-weight: 700 !important; }
.rank-change { color: #34D399 !important; font-size: 10px !important; }

/* === FEES dashboard === */
.fee-month { color: #F8FAFC !important; font-size: 13px !important; font-weight: 700 !important; }
.fee-trend { color: #34D399 !important; font-size: 11px !important; font-weight: 700 !important; }
.collection-bar { background: rgba(255,255,255,.06) !important; }
.col-label { color: rgba(203,213,225,.45) !important; font-size: 11px !important; }
.col-amount { color: #F8FAFC !important; font-size: 2rem !important; font-weight: 900 !important; }
.col-of { color: rgba(203,213,225,.45) !important; font-size: 12px !important; }
.col-bar { background: rgba(255,255,255,.08) !important; }
.col-bar-fill { background: linear-gradient(90deg, #34D399, #2563EB) !important; }
.fee-bk { background: rgba(255,255,255,.05) !important; }
.fee-bk-val { color: #F8FAFC !important; font-size: 1rem !important; font-weight: 900 !important; }
.fee-bk-label { color: rgba(203,213,225,.45) !important; font-size: 10px !important; }
.recent-txn { background: rgba(255,255,255,.04) !important; }
.txn-label { color: rgba(203,213,225,.4) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.txn-row { border-bottom: 1px solid rgba(255,255,255,.04) !important; }
.txn-name { color: rgba(203,213,225,.7) !important; font-size: 11px !important; }
.txn-amount { color: #34D399 !important; font-size: 11px !important; font-weight: 700 !important; }

/* === ADMISSIONS pipeline mockup === */
.pipeline { padding: 24px !important; }
.pipe-circle { background: rgba(37,99,235,.15) !important; }
.pipe-label { color: rgba(203,213,225,.5) !important; font-size: 10px !important; font-weight: 600 !important; }
.pipe-count { color: #F8FAFC !important; font-size: 13px !important; font-weight: 900 !important; }
.pipe-stage::after { color: rgba(255,255,255,.25) !important; }

/* === BOARDING / INTERNATIONAL / SKILLS / MULTI-CAMPUS — generic fallback === */
.boarding-mock, .ib-mock, .skill-mock, .mc-mock,
.boarding-mockup, .ib-mockup, .skill-mockup, .mc-mockup {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  padding: 24px !important;
}
.boarding-mock *, .ib-mock *, .skill-mock *, .mc-mock *,
.boarding-mockup *, .ib-mockup *, .skill-mockup *, .mc-mockup * {
  color: revert !important;
}

/* === Generic safety net: any element with class containing "-dash" or "-mockup" or "-mock" === */
[class*="-dash"]:not(.dash-title):not(.dash-date):not(.dash-topbar) { color: #F8FAFC; }
[class*="-mockup"] { color: #F8FAFC; }

/* === Section eyebrow style consistency across vertical pages === */
.section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
}

/* === Force ALL section titles in vertical pages to be readable, centered === */
.features-section .section-title,
.module-tabs-section .section-title,
.testimonial-section .section-title,
.exam-types .section-title,
.compliance-section .section-title,
.parent-section .section-title,
.how-section .section-title,
.audit-section .section-title,
.pillars-section .section-title,
.arch-section .section-title,
.uptime-section .section-title,
.dpdp-section .section-title,
.reminder-section .section-title,
.investors-section .section-title,
.press-section .section-title,
.team-section .section-title,
.timeline-section .section-title,
.values-section .section-title,
.mission-section .section-title,
.about-stats .section-title,
.compare-section h2 {
  color: #0F172A !important;
  text-align: center !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  margin: 0 auto 14px !important;
}

/* === Reveal wrappers — ensure visible immediately === */
.reveal, .reveal-up { opacity: 1 !important; transform: none !important; }

/* === Remove leftover dark overlays/borders === */
.compliance-section, .mission-section, .values-section, .timeline-section,
.investors-section, .press-section, .team-section, .about-stats,
.parent-section, .how-section, .reminder-section, .arch-section,
.dpdp-section, .uptime-section, .audit-section, .pillars-section,
.exam-types, .compare-section, .faq-section {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
}

/* ════════════════════════════════════════════════════════════════
   v16 — DEFINITIVE fix · Final CTA + Contact form + all dark cards
   The bug: `color: unset` was inheriting from body (#0F172A = dark)
   The fix: use EXPLICIT colors, never unset/revert
   ════════════════════════════════════════════════════════════════ */

/* ─── HOMEPAGE FINAL CTA — explicit white text on blue gradient ─── */
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"],
section[style*="background:#020817"] > .container > div[style*="border-radius: 28px"] {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 28px !important;
}
/* Force every descendant inside that final CTA inner div to be visible */
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] h2,
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] h2 * {
  color: #FFFFFF !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] p {
  color: rgba(255,255,255,.92) !important;
  font-size: 17px !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] p:last-of-type {
  color: rgba(255,255,255,.7) !important;
  font-size: 13px !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] a[href*="tel:"] {
  color: #FBBF24 !important;
  font-weight: 700 !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] .btn-primary {
  background: #FFFFFF !important;
  color: #1D4ED8 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.15) !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] .btn-primary:hover {
  background: #F8FAFC !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.2) !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] .btn-ghost {
  background: rgba(255,255,255,.15) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  backdrop-filter: blur(8px) !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] a[href*="wa.me"] {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-color: #25D366 !important;
}
section[style*="background: #020817"] > .container > div[style*="border-radius: 28px"] a[href*="wa.me"] svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ─── CONTACT page — convert dark form/cards to light ─── */
.contact-hero {
  background: linear-gradient(180deg, #FAFBFC 0%, #F8FAFC 100%) !important;
}
.contact-hero h1 { color: #0F172A !important; }
.contact-hero p { color: #475569 !important; }

/* Contact info panel */
.contact-info h2 { color: #0F172A !important; font-size: 1.5rem !important; font-weight: 800 !important; }
.contact-info p { color: #475569 !important; line-height: 1.75 !important; }
.info-icon {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #2563EB !important;
}
.info-label {
  color: #94A3B8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.info-value {
  color: #0F172A !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.info-sub { color: #64748B !important; font-size: 13px !important; }

/* Promise strip → light card */
.promise-strip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
.promise-strip h4 { color: #0F172A !important; font-weight: 800 !important; }
.promise-item { color: #475569 !important; font-size: 14px !important; }
.promise-item::before { color: #10B981 !important; font-weight: 800 !important; }

/* Contact form wrap → light card */
.contact-form-wrap {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.02) !important;
}
.form-header h3 { color: #0F172A !important; font-weight: 800 !important; }
.form-header p { color: #64748B !important; }
.form-label {
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
}
.form-control {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
.form-control:focus {
  border-color: #2563EB !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}
.form-control::placeholder { color: #94A3B8 !important; }
select.form-control option { background: #FFFFFF !important; color: #0F172A !important; }
.form-submit {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.25) !important;
}
.form-submit:hover {
  box-shadow: 0 10px 24px rgba(37,99,235,.32) !important;
}
.form-note { color: #94A3B8 !important; }
.form-success h3 { color: #0F172A !important; }
.form-success p { color: #475569 !important; }

/* Offices grid → light cards */
.office-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
.office-city { color: #0F172A !important; font-weight: 800 !important; }
.office-type { color: #1D4ED8 !important; font-weight: 700 !important; }
.office-addr { color: #475569 !important; }
.offices-section { background: #F8FAFC !important; }
.offices-section h2.section-title { color: #0F172A !important; }

/* Trust strip in contact → light pills */
section[style*="padding:60px 0 80px"] {
  background: #FFFFFF !important;
}
section[style*="padding:60px 0 80px"] span[style*="background:#0F172A"] {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

/* ─── PRICING page — same fixes ─── */
.pricing-hero h1 { color: #0F172A !important; }
.pricing-hero p { color: #475569 !important; }
.plan-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
.plan-card.popular {
  border: 2px solid #2563EB !important;
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 40%) !important;
  box-shadow: 0 0 60px rgba(37,99,235,.12), 0 4px 24px rgba(15,23,42,.05) !important;
}
.popular-badge {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  color: #FFFFFF !important;
}
.plan-name { color: #475569 !important; font-weight: 700 !important; }
.price-amount { color: #0F172A !important; font-weight: 900 !important; }
.price-per { color: #64748B !important; }
.plan-desc { color: #64748B !important; }
.plan-features li {
  color: #1E293B !important;
  font-weight: 500 !important;
}
.plan-features li::before { color: #10B981 !important; font-weight: 800 !important; }
.plan-features li.na { color: #CBD5E1 !important; }
.plan-features li.na::before { color: #CBD5E1 !important; }
.plan-cta.primary {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.25) !important;
}
.plan-cta.ghost {
  background: #FFFFFF !important;
  color: #1E293B !important;
  border: 1px solid #E2E8F0 !important;
}
.plan-cta.ghost:hover {
  border-color: #94A3B8 !important;
  background: #F8FAFC !important;
}

/* Compare table — light */
.compare-table {
  background: #FFFFFF !important;
}
.compare-table th { background: #F8FAFC !important; color: #475569 !important; border-bottom: 2px solid #E2E8F0 !important; }
.compare-table td { color: #1E293B !important; border-bottom-color: #F1F5F9 !important; }
.compare-table tr:hover td { background: #F8FAFC !important; }
.cat-row td { color: #1D4ED8 !important; background: #EFF6FF !important; }
.tick { color: #10B981 !important; }
.cross { color: #CBD5E1 !important; }
.partial { color: #F59E0B !important; }

/* Pricing FAQ — light */
.faq-section .faq-item, .pricing-section .faq-item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
}
.faq-section .faq-q, .pricing-section .faq-q { color: #0F172A !important; font-weight: 700 !important; }
.faq-section .faq-a p, .pricing-section .faq-a p { color: #475569 !important; }
.faq-q .arrow { color: #94A3B8 !important; }

/* Enterprise card on pricing */
.enterprise-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid #BFDBFE !important;
  color: #0F172A !important;
}
.enterprise-card h2 { color: #0F172A !important; }
.enterprise-card p { color: #475569 !important; }
.e-perk {
  background: #FFFFFF !important;
  border: 1px solid #BFDBFE !important;
  color: #1D4ED8 !important;
  font-weight: 600 !important;
}

/* ─── ABOUT page same treatment ─── */
.about-hero h1 { color: #0F172A !important; }
.about-hero h1 span {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.about-hero p { color: #475569 !important; }
.about-stats { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; }
.a-stat-val { color: #0F172A !important; font-weight: 900 !important; }
.a-stat-label { color: #64748B !important; }
.mission-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.mission-card h4 { color: #0F172A !important; }
.mission-card p { color: #475569 !important; }
.value-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.value-num { color: #1D4ED8 !important; font-weight: 800 !important; }
.value-title { color: #0F172A !important; }
.value-desc { color: #475569 !important; }
.team-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.team-name { color: #0F172A !important; }
.team-role { color: #64748B !important; }
.team-prev { color: #94A3B8 !important; }
.timeline::before { background: linear-gradient(180deg, #2563EB, #1D4ED8) !important; }
.tl-dot { background: linear-gradient(135deg, #2563EB, #1D4ED8) !important; color: #FFFFFF !important; }
.tl-year { color: #1D4ED8 !important; }
.tl-title { color: #0F172A !important; }
.tl-desc { color: #475569 !important; }
.investor-chip { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; color: #475569 !important; }
.press-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.press-outlet { color: #1D4ED8 !important; }
.press-headline { color: #0F172A !important; }
.press-date { color: #94A3B8 !important; }

/* ─── SECURITY page ─── */
.sec-hero h1 { color: #0F172A !important; }
.sec-hero p { color: #475569 !important; }
.cert-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.cert-name { color: #0F172A !important; }
.cert-status { background: #ECFDF5 !important; color: #047857 !important; }
.pillar-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.pillar-title { color: #0F172A !important; }
.pillar-desc { color: #475569 !important; }
.pd-item { color: #475569 !important; }
.pd-item::before { color: #10B981 !important; }
.dpdp-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.dpdp-card-title { color: #0F172A !important; }
.dpdp-card-desc { color: #475569 !important; }
.uptime-display {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid #BFDBFE !important;
}
.uptime-number {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.uptime-label { color: #475569 !important; }
.audit-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; }
.audit-who { color: #1D4ED8 !important; }
.audit-type { color: #0F172A !important; }
.audit-date { color: #94A3B8 !important; }
.audit-result { background: #ECFDF5 !important; color: #047857 !important; }
.arch-layer-name { color: #0F172A !important; }
.arch-layer-sub { color: #64748B !important; }
.arch-arrow { color: #CBD5E1 !important; }

/* Final defensive overrides — never let any inline style="color:rgba(255,255,255..." remain visible-broken */
section.section-light [style*="color: #fff"]:not(.btn-primary):not([class*="cta"]):not(.notif-card *),
section.section-bright [style*="color: #fff"]:not(.btn-primary):not([class*="cta"]):not(.notif-card *) {
  color: #0F172A !important;
}

/* ════════════════════════════════════════════════════════════════
   v13 — Normalize ALL vertical pages to one consistent pattern.
   The 4 pages using `.v-hero` (boarding/international/multi-campus/skills)
   shipped with self-contained dark inline <style> blocks that were
   never converted to the light theme that sol-hero pages got.
   This block forces them onto the same look as sol-hero pages:
   light background, dark text, top padding clears the fixed nav,
   same heading scale, readable body copy, and a CTA band that
   actually has legible text.
   ════════════════════════════════════════════════════════════════ */

/* Hero — match sol-hero treatment exactly */
.v-hero {
  background: linear-gradient(180deg, #FAFBFC 0%, #F8FAFC 60%, #EFF6FF 100%) !important;
  padding: calc(var(--nav-h, 68px) + 56px) 0 64px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  position: relative; overflow: hidden;
}
.v-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(37,99,235,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 30%, rgba(37,99,235,.05) 0%, transparent 50%);
}
.v-hero .container { position: relative; z-index: 2; }

.v-hero-inner {
  display: grid !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap: 56px !important;
  align-items: center !important;
}
.v-eyebrow {
  background: rgba(37,99,235,.08) !important;
  border: 1px solid rgba(37,99,235,.18) !important;
  color: #1D4ED8 !important;
}
.v-hero h1 {
  color: #0F172A !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  letter-spacing: -.03em !important;
  line-height: 1.08 !important;
}
.v-hero h1 em {
  font-style: normal !important;
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
.v-hero p.lede {
  color: #475569 !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}
.v-hero-stats {
  border-top: 1px solid #E2E8F0 !important;
}
.v-hero-stats .s-num { color: #0F172A !important; }
.v-hero-stats .s-lbl { color: #64748B !important; }

/* Embedded dashboard panel inside the now-light hero — keep dark for contrast */
.v-panel {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  box-shadow: 0 20px 60px -20px rgba(15,23,42,.35) !important;
}

/* Section heads in body */
.v-section-head h2 { color: #0F172A !important; }
.v-section-head p  { color: #475569 !important; }

/* Final CTA band — same single-color blue as the rest of the site, readable text */
.v-cta {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%) !important;
  color: #fff !important;
}
.v-cta h2 { color: #fff !important; }
.v-cta p  { color: rgba(226,232,240,.92) !important; }

/* Mobile: stack hero, tighter padding */
@media (max-width: 960px) {
  .v-hero { padding: calc(var(--nav-h, 68px) + 32px) 0 48px !important; }
  .v-hero-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
  .v-hero h1 { font-size: clamp(30px, 7vw, 42px) !important; }
}

/* ── Final-CTA dark sections on every page (the "Run your campus..." band) ──
   Several pages use inline-styled <section> with dark bg + nested gradient
   div. The body paragraph and "Or call ..." footnote inherit dark text via
   inline color — force light text so they're legible on dark backgrounds.
   Specificity is bumped via :not(#__never__) chains because earlier
   `section[style*="background"] p:not(.testi-text):not(.story-quote):not(.tp-desc)`
   block was outranking a flat selector. */
section[style*="#020817"] p:not(#__a__):not(#__b__):not(#__c__):not(#__d__),
section[style*="#0F172A"] p:not(#__a__):not(#__b__):not(#__c__):not(#__d__) {
  color: rgba(226,232,240,.92) !important;
}
section[style*="#020817"] p:last-of-type:not(#__a__):not(#__b__):not(#__c__):not(#__d__),
section[style*="#0F172A"] p:last-of-type:not(#__a__):not(#__b__):not(#__c__):not(#__d__) {
  color: rgba(226,232,240,.7) !important;
}
section[style*="#020817"] p a:not(.btn):not(#__a__):not(#__b__):not(#__c__):not(#__d__),
section[style*="#0F172A"] p a:not(.btn):not(#__a__):not(#__b__):not(#__c__):not(#__d__) {
  color: #93C5FD !important;
}

/* ════════════════════════════════════════════════════════════════
   v14 — LIGHT FOOTER. Footer was a dark navy slab; the user wants
   the entire site on a single light theme. Override the inline
   `<footer style="background: #020817; ...">` and force light
   surface, dark headings, mid-gray links, etc.
   ════════════════════════════════════════════════════════════════ */

footer[style*="#020817"],
footer[style*="020817"] {
  background: #FAFBFC !important;
  color: #475569 !important;
  border-top: 1px solid #E2E8F0 !important;
}
footer[style*="020817"] *,
footer[style*="#020817"] * {
  border-color: #E2E8F0 !important;
}
footer[style*="020817"] h4,
footer[style*="#020817"] h4 {
  color: #0F172A !important;
}
footer[style*="020817"] a,
footer[style*="020817"] li,
footer[style*="020817"] p,
footer[style*="020817"] span:not(.new-pill),
footer[style*="#020817"] a,
footer[style*="#020817"] li,
footer[style*="#020817"] p,
footer[style*="#020817"] span:not(.new-pill) {
  color: #475569 !important;
}
footer[style*="020817"] a:hover,
footer[style*="#020817"] a:hover {
  color: #1D4ED8 !important;
}
footer[style*="020817"] .nav-logo,
footer[style*="#020817"] .nav-logo {
  color: #0F172A !important;
}
footer[style*="020817"] .nav-logo span,
footer[style*="#020817"] .nav-logo span {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* Social icon squares — were tinted-on-dark, now tinted-on-light */
footer[style*="020817"] a[style*="border-radius:8px"],
footer[style*="#020817"] a[style*="border-radius:8px"] {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}
footer[style*="020817"] a[style*="border-radius:8px"]:hover,
footer[style*="#020817"] a[style*="border-radius:8px"]:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}
/* HQ address card */
footer[style*="020817"] [style*="HEADQUARTERS"],
footer[style*="020817"] div[style*="rgba(255,255,255,.04)"],
footer[style*="#020817"] div[style*="rgba(255,255,255,.04)"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
footer[style*="020817"] div[style*="rgba(255,255,255,.04)"] *,
footer[style*="#020817"] div[style*="rgba(255,255,255,.04)"] * {
  color: #475569 !important;
}
/* Bottom-bar separator and copyright */
footer[style*="020817"] [style*="border-top"],
footer[style*="#020817"] [style*="border-top"] {
  border-top: 1px solid #E2E8F0 !important;
}
/* AskBooks "more from Ask" pill stays brand-tinted on light */
footer[style*="020817"] a[href*="askbooks"],
footer[style*="#020817"] a[href*="askbooks"] {
  color: #047857 !important;
  font-weight: 600 !important;
}
/* Trust/legal badges (ISO/SOC2/etc small pills along bottom) */
footer[style*="020817"] .footer-badge,
footer[style*="#020817"] .footer-badge {
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
}
/* Old-class footer (non-inline) — keep parity */
footer:not([style*="020817"]):not([style*="#020817"]) {
  background: #FAFBFC !important;
  border-top: 1px solid #E2E8F0 !important;
}
footer:not([style*="020817"]) h4 { color: #0F172A !important; }
footer:not([style*="020817"]) a,
footer:not([style*="020817"]) ul li {
  color: #475569 !important;
}

/* ═══════ JS-driven dropdown open class (works on every page) ═══════ */
.ac-nav .has-dropdown.open > .nav-dropdown { display: block !important; }
.ac-nav .has-dropdown.open > .nav-link svg { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES (v3)
   ════════════════════════════════════════════════════════════════ */

/* Tables: horizontal scroll on mobile so wide columns don't get cut off */
@media (max-width: 700px) {
  .compete-table,
  .compare-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    width: 100% !important;
  }
  .compete-table thead,
  .compete-table tbody,
  .compare-table thead,
  .compare-table tbody {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  .compete-table th,
  .compete-table td,
  .compare-table th,
  .compare-table td {
    white-space: normal !important;
    min-width: 92px !important;
  }
  .compete-table th:first-child,
  .compete-table td:first-child,
  .compare-table th:first-child,
  .compare-table td:first-child {
    min-width: 130px !important;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
  .compete-table .cat-row td,
  .compare-table .cat-row td {
    position: static !important;
    background: #EFF6FF !important;
  }
}

/* Integrations panel: shrink chrome on mobile so 6-column grid actually fits */
@media (max-width: 900px) {
  .integ-section { padding: 28px 20px !important; }
}
@media (max-width: 600px) {
  .integ-section { padding: 20px 14px !important; border-radius: 16px !important; }
  .integ-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .integ-tile { padding: 16px 10px !important; }
  .integ-tile-icon { font-size: 22px !important; }
  .integ-cat-strip { gap: 6px !important; padding-bottom: 16px !important; margin-bottom: 20px !important; }
  .integ-cat-pill { font-size: 11px !important; padding: 5px 11px !important; }
}

/* ── Scroll-up/down floating nav (all pages, mobile + desktop) ── */
#ac-scroll-nav {
  position: fixed;
  left: 16px;
  bottom: 96px;
  z-index: 9000;
  display: none;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
#ac-scroll-nav.visible { display: flex; }
.ac-scroll-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1E40AF;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12), 0 2px 4px rgba(15, 23, 42, .06);
  transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
  padding: 0;
}
.ac-scroll-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  color: #1D4ED8;
}
.ac-scroll-btn:active { transform: translateY(0); }
@media (max-width: 700px) {
  #ac-scroll-nav { left: 12px; bottom: 84px; }
  .ac-scroll-btn { width: 38px; height: 38px; }
}