/* ============================================================
   PAGE: index
   ============================================================ */

/* Visually-hidden utility (WCAG 4.1.2) */
body.page-index .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

body.page-index *, body.page-index *::before, body.page-index *::after, body.page-index { margin: 0; padding: 0; box-sizing: border-box; }

:root:has(body.page-index) {
  --blue-light: #4da6ff;
  --blue-dark: #0a1e3d;
  --bg: #050a14;
  --glass-border: rgba(255,255,255,0.25);
}

html:has(body.page-index) { scroll-behavior: smooth; overflow-x: hidden; }

body.page-index {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

/* ─── Nav ─── */

body.page-index .nav-wrapper {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 0 24px;
  pointer-events: none;
}

body.page-index .nav-wrapper.nav-enter {
  animation: navDrop 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
}
/* The page transition must never swallow this entrance: hold it at frame 0
   while the veil is up (html.ll-loading) so the full run plays the moment it
   lifts. Same pattern as the two product heroes. */
html.ll-loading body.page-index .nav-wrapper.nav-enter { animation-play-state: paused; }

body.page-index .nav { pointer-events: auto; }

body.page-index .nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}

body.page-index .nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  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='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
  z-index: 0;
}

body.page-index .nav a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 999px;
  transition: color 0.25s, background 0.25s, padding 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.page-index .nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
body.page-index .nav a.active { color: #fff; background: rgba(255,255,255,0.12); }

body.page-index .nav-icon { display: none; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

body.page-index .nav-label { display: inline; overflow: hidden; max-width: 100px; transition: opacity 0.25s ease; opacity: 1; text-overflow: ellipsis; }

body.page-index .light-only { display: none !important; }
[data-theme="light"] body.page-index .dark-only { display: none !important; }
[data-theme="light"] body.page-index .light-only { display: inline !important; }

@media (max-width: 640px) {
  body.page-index .nav { gap: 3px; padding: 8px 10px; }
  body.page-index .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-index .nav-icon { display: block; }
  body.page-index .nav-label { max-width: 0; opacity: 0; }
  body.page-index .nav a.active .nav-label { max-width: 70px; opacity: 1; font-size: 12px; }
  body.page-index .nav a.active { padding: 9px 14px; }
}

/* ─── Hero flash prevention ─── */
body.page-index .hero-hidden .hero { visibility: hidden; }

/* ─── Hero ─── */
body.page-index .hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 120px 24px 80px;
}

/* Gradient blobs - the orbs mirror the primaryLogo square grid: bright
   light blue top-left (g5), cyan top-right (g2), dim/deep blue bottom-left
   (g3), amber bottom-right (g4), with the big blue wash (g1) in the middle. */
body.page-index .hero-gradient {
  position: absolute;
  width: 700px;
  height: 430px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-48deg);
  background: radial-gradient(
    ellipse at 25% 25%,
    #7cc4ff 0%, #4da6ff 15%, #2b8ae6 30%, #1a5bb5 45%, #0f3d80 60%, #0a1e3d 80%, transparent 100%
  );
  border-radius: 50%;
  filter: blur(78px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
  animation: gradientDrift1 30s linear infinite;
  will-change: transform;
}

body.page-index .hero-gradient-2 {
  position: absolute;
  width: 420px;
  height: 300px;
  top: 35%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(20deg);
  background: radial-gradient(
    ellipse at 60% 30%,
    #c2f1f6 0%, #7ce4ee 20%, #2fbccb 40%, #0b4d57 70%, transparent 100%
  );
  border-radius: 50%;
  filter: blur(85px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  animation: gradientDrift2 36s linear infinite;
  will-change: transform;
}

body.page-index .hero-gradient-3 {
  position: absolute;
  width: 330px;
  height: 235px;
  top: 60%;
  left: 37%;
  transform: translate(-50%, -50%) rotate(65deg);
  background: radial-gradient(
    circle at 50% 50%,
    #5fb8ff 0%, #1c6ecf 35%, #0b2a5e 70%, transparent 100%
  );
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  animation: gradientDrift3 40s linear infinite;
  will-change: transform;
}

body.page-index .hero-gradient-4 {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 62%;
  left: 59%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle, #ffd98c 0%, #f5b342 45%, transparent 78%
  );
  border-radius: 50%;
  filter: blur(62px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  animation: gradientDrift4 26s linear infinite;
}

body.page-index .hero-gradient-5 {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 33%;
  left: 38%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle, #b8e0ff 0%, #4da6ff 40%, transparent 75%
  );
  border-radius: 50%;
  filter: blur(68px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  /* drift2 is transform-only, so this orb's own opacity holds (drift3/4
     animate opacity and would pin it low). */
  animation: gradientDrift2 32s linear infinite;
}

/* ── Implode → big bang → settle hero intro (only when <html> has .bang-intro) ── */
/* Group wrapper around the four orbs; identity at rest, scaled/spun during the intro. */
body.page-index .hero-orbs { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 50%; pointer-events: none; }
html.bang-intro body.page-index .hero-orbs {
  will-change: transform, opacity; backface-visibility: hidden;
  animation: heroBang 2.4s cubic-bezier(0.33, 1, 0.68, 1) 0s both;
}
/* Deep-blue flash at the moment of the bang (early, ~0.3s in). */
html.bang-intro body.page-index .hero::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 560px; height: 560px;
  transform: translate(-50%, -50%) scale(0.4); opacity: 0; z-index: 1;
  border-radius: 50%; pointer-events: none; filter: blur(36px);
  background: radial-gradient(circle, rgba(95,180,255,0.5) 0%, rgba(30,100,200,0.4) 38%, rgba(15,60,140,0.16) 60%, transparent 76%);
  animation: heroFlash 1.1s ease-out 0.2s forwards;
}
/* The page transition must never swallow this entrance: hold it at frame 0
   while the veil is up (html.ll-loading) so the full run plays the moment it
   lifts. Same pattern as the two product heroes. */
html.ll-loading body.page-index .hero-orbs,
html.ll-loading body.page-index .hero::before { animation-play-state: paused; }
/* Particle burst layer (spawned by JS at the bang, centred on the hero). */
body.page-index .hero-particles { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 1; pointer-events: none; }
body.page-index .hero-particles span {
  position: absolute; top: 0; left: 0; border-radius: 50%;
  background: radial-gradient(circle, #cfe8ff 0%, #6ec6ff 45%, rgba(77,166,255,0) 75%);
  box-shadow: 0 0 8px rgba(120,190,255,0.85); filter: blur(0.5px); opacity: 0;
}
/* Bang particles carry the logo palette: every 3rd cyan, every 4th amber. */
body.page-index .hero-particles span:nth-child(3n) {
  background: radial-gradient(circle, #d9f7fa 0%, #7ce4ee 45%, rgba(86,217,228,0) 75%);
  box-shadow: 0 0 8px rgba(86,217,228,0.85);
}
body.page-index .hero-particles span:nth-child(4n) {
  background: radial-gradient(circle, #ffedc9 0%, #f5b342 45%, rgba(245,179,66,0) 75%);
  box-shadow: 0 0 8px rgba(245,179,66,0.85);
}

body.page-index .hero-content { position: relative; z-index: 1; text-align: center; }

body.page-index footer a:has(> .footer-logo) { display: inline-block; }
body.page-index .footer-logo {
  width: 48px; height: auto; margin-bottom: 14px;
  filter: drop-shadow(0 0 6px rgba(77,166,255,0.4));
}

body.page-index .hero-title {
  font-size: clamp(56px, 10vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  color: #fff;
}

body.page-index .hero-title .laing { font-weight: 900; color: #fff; }
body.page-index .hero-title .logic { font-weight: 300; color: #fff; }

body.page-index .hero-subtitle {
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.page-index .hero-cta {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

body.page-index .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  border: none; min-height: 44px; /* WCAG 2.5.5 */ 
}

body.page-index .btn-primary { background: #fff; color: var(--bg); }
body.page-index .btn-primary:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(77,166,255,0.25); }

body.page-index .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
body.page-index .btn-outline:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); transform: translateY(-2px); }

/* ─── Partner badge ─── */
body.page-index .partner-section {
  padding: 60px 24px 40px;
  position: relative;
}

body.page-index .partner-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

body.page-index .partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 24px;
  color: #fff;
}

body.page-index .partner-badge img { height: 28px; width: auto; }

body.page-index .partner-badge span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

body.page-index a.partner-badge {
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s;
}

body.page-index a.partner-badge:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
}
body.page-index a.partner-badge:hover span { color: rgba(255,255,255,0.8); }

/* ─── Stats ─── */
body.page-index .stats-section {
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
}

body.page-index .stats-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.2), transparent);
}

body.page-index .stats-header { text-align: center; margin-bottom: 72px; }

body.page-index .stats-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}

body.page-index .stats-title {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 16px; color: #fff;
}

body.page-index .stats-subtitle {
  color: rgba(255,255,255,0.5); font-size: 16px;
  max-width: 520px; margin: 0 auto; line-height: 1.6;
}

body.page-index .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px; max-width: 1000px; margin: 0 auto;
}

body.page-index .stat-card {
  text-align: center; padding: 40px 24px; border-radius: 20px;
  background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)), var(--bg);
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.3s ease;
  overflow: visible;
  position: relative;
}

body.page-index .stat-card.visible { opacity: 1; transform: translateY(0); }

body.page-index .stat-card.visible:hover,
body.page-index .stat-card.visible:focus-within {
  border-color: rgba(77,166,255,0.2);
}

/* The percentage number itself is the source link - visually identical
   to plain text so the card looks the same as it did before sources
   were added. Cursor change on hover is the only affordance. */
body.page-index .stat-number-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
body.page-index .stat-number-link:hover, body.page-index .stat-number-link:focus { color: inherit; text-decoration: none; }

body.page-index .stat-card:nth-child(2) { transition-delay: 0.15s; }
body.page-index .stat-card:nth-child(3) { transition-delay: 0.3s; }
body.page-index .stat-card:nth-child(4) { transition-delay: 0.45s; }

body.page-index .stat-number {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 4px;
  color: var(--blue-light);
  background: linear-gradient(135deg, #fff 30%, var(--blue-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 2px 0;
}

body.page-index .stat-label { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 6px; }

body.page-index .stat-desc {
  font-size: 13px; color: rgba(255,255,255,0.5);
  line-height: 1.5; max-width: 240px; margin: 0 auto;
}

/* ─── Timeline ─── */
body.page-index .how-section { padding: 100px 24px; position: relative; }

body.page-index .how-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.15), transparent);
}

body.page-index .how-header { text-align: center; margin-bottom: 64px; }

body.page-index .how-header .section-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}

body.page-index .how-header h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 16px; color: #fff;
}

body.page-index .how-header p {
  color: rgba(255,255,255,0.7); font-size: 16px;
  max-width: 560px; margin: 0 auto; line-height: 1.7;
}

body.page-index .timeline {
  position: relative; max-width: 640px; margin: 0 auto; padding-left: 48px;
}

body.page-index .timeline::before {
  content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, rgba(77,166,255,0.4), rgba(77,166,255,0.15), rgba(77,166,255,0.4));
}

body.page-index .timeline-item { position: relative; padding-bottom: 48px; }
body.page-index .timeline-item:last-child { padding-bottom: 0; }

body.page-index .timeline-dot {
  position: absolute; left: -48px; top: 4px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--bg); border: 2px solid rgba(77,166,255,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--blue-light); z-index: 1;
  transition: border-color 0.3s, box-shadow 0.3s;
}

body.page-index .timeline-content h3 {
  font-size: 18px; font-weight: 700; margin-bottom: 8px;
  letter-spacing: -0.01em; transition: color 0.3s; color: #fff;
}

body.page-index .timeline-content p {
  font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.65;
}

/* ─── Testimonials ─── */
body.page-index .testimonials-section { padding: 100px 24px; position: relative; }

body.page-index .testimonials-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.15), transparent);
}

body.page-index .testimonials-header { text-align: center; margin-bottom: 64px; }

body.page-index .testimonials-header .section-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}

body.page-index .testimonials-header h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: #fff;
}

body.page-index .testimonials-grid {
  /* min 340px so four cards read as a 2x2 grid (3 columns would need 1076px
     of track in a 1060px container), collapsing to one column on mobile. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px; max-width: 1060px; margin: 0 auto;
}

body.page-index .testimonial-card {
  position: relative; overflow: hidden;
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), var(--bg);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 20px;
  padding: 32px 32px 44px; display: flex; flex-direction: column; gap: 22px;
  transition: border-color 0.3s, transform 0.3s;
}

body.page-index .testimonial-card:hover, body.page-index .testimonial-card:focus-within { border-color: rgba(77,166,255,0.2); transform: translateY(-3px); }

/* The client's own home page across the top of the card, cut like the More
   page's demo previews: 16:10, pinned to the top of the page, a hairline under
   it. The negative margin takes it to the card's edges; the card's radius and
   overflow clip its corners. */
body.page-index .testimonial-shot {
  margin: -32px -32px 0; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(145deg, rgba(77,166,255,0.06), rgba(10,30,61,0.35));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.page-index .testimonial-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

body.page-index .testimonial-quote {
  font-size: 15px; color: rgba(255,255,255,0.6);
  line-height: 1.7; font-style: italic; flex: 1;
}

body.page-index .testimonial-quote::before { content: '\201C'; font-size: 28px; color: var(--blue-light); line-height: 0; vertical-align: -8px; margin-right: 4px; }

body.page-index .testimonial-meta { display: flex; align-items: center; gap: 14px; }

body.page-index .testimonial-logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(77,166,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--blue-light); flex-shrink: 0;
}

/* When the testimonial logo wraps an image (e.g. KellyKanine), repaint
   the container to match the card surface and put the old blueish tint
   on the border instead. The image itself shrinks to ~62% of the
   container and is fully centred so it doesn't crowd the box. */
body.page-index .testimonial-logo.has-logo-img {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(77,166,255,0.1);
  overflow: hidden;
  padding: 0;
}
body.page-index .testimonial-logo.has-logo-img img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  border-radius: 0;
  display: block;
  margin: 0 auto;
}

body.page-index .testimonial-info h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; color: #fff; }
body.page-index .testimonial-info p { font-size: 13px; color: rgba(255,255,255,0.5); }

/* Peeling-corner "View site": a rounded tab tucked into the card's bottom-right
   corner. At rest only the arrow shows; on hover/focus the label expands out to
   the left. The stub variant marks a testimonial whose site isn't public. */
body.page-index .testimonial-site-link {
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; line-height: 1;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--blue-light); text-decoration: none;
  background: rgba(77,166,255,0.12);
  border-top: 1px solid rgba(77,166,255,0.22);
  border-left: 1px solid rgba(77,166,255,0.22);
  border-top-left-radius: 14px;
  transition: background 0.2s, border-color 0.2s;
}
body.page-index .testimonial-site-link svg { flex-shrink: 0; }
body.page-index .testimonial-site-link .site-link-label {
  max-width: 0; margin-right: 0; overflow: hidden; opacity: 0;
  transition: max-width 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease, margin-right 0.3s ease;
}
/* .in-focus is the touch alias for :hover - JS puts it on the card nearest
   the viewport centre on mobile, same pattern as the demo sites' cards. */
body.page-index .testimonial-card:hover .testimonial-site-link,
body.page-index .testimonial-card:focus-within .testimonial-site-link,
body.page-index .testimonial-card.in-focus .testimonial-site-link {
  background: rgba(77,166,255,0.18); border-color: rgba(77,166,255,0.4);
}
body.page-index .testimonial-card:hover .testimonial-site-link .site-link-label,
body.page-index .testimonial-card:focus-within .testimonial-site-link .site-link-label,
body.page-index .testimonial-card.in-focus .testimonial-site-link .site-link-label {
  max-width: 90px; margin-right: 6px; opacity: 1;
}
body.page-index .testimonial-site-link:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
body.page-index .testimonial-site-link.is-stub {
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-index .testimonial-site-link .site-link-label { transition: opacity 0.25s ease; }
}
/* On touch the peel is driven by scroll position (.in-focus), not a pointer,
   so it reads better slightly slower and softer than the desktop hover. Same
   gate as the nearest-centre JS. */
@media (hover: none), (max-width: 640px) {
  body.page-index .testimonial-site-link { transition: background 0.4s ease, border-color 0.4s ease; }
  body.page-index .testimonial-site-link .site-link-label {
    transition: max-width 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease, margin-right 0.55s cubic-bezier(0.22,1,0.36,1);
  }
}
body.page-index .testimonials-cta { text-align: center; margin-top: 40px; }

/* ─── FAQ ─── */
body.page-index .faq-section { padding: 100px 24px; position: relative; }

body.page-index .faq-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.15), transparent);
}

body.page-index .faq-header { text-align: center; margin-bottom: 64px; }

body.page-index .faq-header .section-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}

body.page-index .faq-header h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; color: #fff; }

body.page-index .faq-header p { color: rgba(255,255,255,0.5); font-size: 16px; max-width: 480px; margin: 0 auto; line-height: 1.6; }

body.page-index .faq-container { max-width: 680px; margin: 0 auto; }
body.page-index .faq-item { border-bottom: 1px solid rgba(255,255,255,0.06); }

body.page-index .faq-q {
  width: 100%; background: none; border: none; color: #fff;
  font-size: 16px; font-weight: 600; text-align: left; padding: 24px 0;
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; font-family: inherit; transition: color 0.2s;
}

body.page-index .faq-q:hover { color: var(--blue-light); }

body.page-index .faq-q::after {
  content: '+'; font-size: 22px; font-weight: 300;
  color: rgba(255,255,255,0.3); transition: transform 0.3s, color 0.3s;
  flex-shrink: 0; margin-left: 16px;
}

body.page-index .faq-q.open::after { transform: rotate(45deg); color: var(--blue-light); }

/* FAQ answer (Ellis, 2026-08-20; was an animated max-height 0 -> 300px).
   The 300px cap was an invisible guillotine: the longest answer already
   needed 238px at 360px wide, so a couple more lines of copy would have
   silently cut one off with no way to scroll it. A 0fr -> 1fr grid track
   animates to whatever the content actually measures, so the cap is gone
   and nothing can clip. It also drops the max-height/padding animation the
   design hook flagged - grid-template-rows is the interpolatable property
   here, and the padding now sits on the inner element inside the clipped
   track rather than being animated separately.
   visibility on the inner is what keeps a COLLAPSED answer out of the tab
   order: two of these answers contain links, and while the panel was merely
   height-0 a keyboard user could tab onto an invisible link and lose the
   focus ring off screen. The 0.35s delay applies only on the way closed, so
   the text stays visible while the track collapses and reappears instantly
   on open. visibility also removes it from the accessibility tree, which
   height alone never did. */
/* FAQ answer (Ellis, 2026-08-20; was max-height 0 -> a fixed 300px).
   The 300px cap was an invisible guillotine: the longest answer already
   needed 286px at 360px wide, so a couple more lines of copy would have
   silently cut one off with no way to scroll it. toggleFaq() now measures
   scrollHeight and sets the exact pixel height inline, so the cap is gone,
   nothing can ever clip, and the 0.35s reads evenly because the distance
   matches the content instead of always running to 300.
   The 2000px here is a fail-OPEN safety net, not a cap - it only applies in
   the impossible case where .open lands without the inline measurement, and
   showing the answer untidily beats hiding half of it.
   (0fr -> 1fr on a grid track is the tidier modern idiom and would satisfy
   the design hook's layout-transition rule. It was tried and it lays out
   correctly, but animating grid-template-rows needs Chrome 107 / Firefox 127
   / Safari 17.4, and iOS 16 is still enough of this site's traffic to matter -
   there it would snap open with no animation at all. max-height animates
   everywhere. Neither can clip, so coverage decided it.)
   visibility on the inner is what keeps a COLLAPSED answer out of the tab
   order: two of these answers contain links, and while the panel was merely
   height-0 a keyboard user could tab onto an invisible link and lose the
   focus ring off screen. The 0.35s delay applies only on the way closed, so
   the text stays put while the panel collapses and reappears instantly on
   open. visibility also removes it from the accessibility tree, which
   height alone never did. */
body.page-index .faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
  color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.7;
}

body.page-index .faq-a > .faq-a-inner {
  visibility: hidden; padding-bottom: 24px;
  transition: visibility 0s linear 0.35s;
}

body.page-index .faq-a.open { max-height: 2000px; }
body.page-index .faq-a.open > .faq-a-inner { visibility: visible; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  body.page-index .faq-a { transition: none; }
  body.page-index .faq-a > .faq-a-inner { transition: none; }
}

/* ─── Glow line ─── */
body.page-index .cta-glow-line { text-align: center; padding: 0 24px 48px; }
body.page-index .cta-glow-line span {
  display: inline-block; width: 60px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
  opacity: 0;
  transition: opacity 1s ease, width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1s ease;
  filter: drop-shadow(0 0 0 rgba(77,166,255,0));
}
body.page-index .cta-glow-line.glow span {
  opacity: 1; width: 180px;
  filter: drop-shadow(0 0 8px rgba(77,166,255,0.6));
  animation: lineGlow 3s ease-in-out infinite 1.2s;
}

/* ─── Schedule CTA ─── */
body.page-index .schedule-cta { padding: 40px 24px; text-align: center; }

body.page-index .schedule-cta-box {
  max-width: 600px; margin: 0 auto; padding: 56px 40px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px;
}

body.page-index .schedule-cta-box h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; color: #fff; }
body.page-index .schedule-cta-box p { color: rgba(255,255,255,0.45); font-size: 15px; margin-bottom: 32px; line-height: 1.6; }

/* ─── Footer ─── */
body.page-index footer {
  text-align: center; padding: 48px 24px 32px; color: rgba(255,255,255,0.2);
  font-size: 13px; border-top: 1px solid rgba(255,255,255,0.04);
}
body.page-index .footer-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
body.page-index .footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.25s, border-color 0.25s, transform 0.25s; }
body.page-index .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); transform: translateY(-2px); }
body.page-index .footer-social a svg { width: 14px; height: 14px; }
body.page-index footer .footer-links { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 4px; margin-bottom: 24px; }
body.page-index footer .footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; font-size: clamp(11px, 3vw, 13px);
  /* inline-block + padding lifts these from a 14px-tall target to 24px,
     the WCAG 2.2 AA 2.5.8 minimum. They wrap onto two rows on a phone,
     so a short target here meant real mis-taps between legal pages. */
  display: inline-block; padding: 5px 0; }
body.page-index footer .footer-links a:hover { color: rgba(255,255,255,0.6); }
body.page-index footer .footer-sep { color: rgba(255,255,255,0.3); margin: 0 clamp(4px, 1.5vw, 10px); }
body.page-index footer .address { color: rgba(255,255,255,0.48); margin-bottom: 8px; }
body.page-index footer .footer-copy { color: rgba(255,255,255,0.46); }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  body.page-index .hero { padding: 120px 20px 160px; }
  body.page-index .hero-gradient { width: 420px; height: 300px; filter: blur(60px); }
  body.page-index .hero-gradient-2 { width: 280px; height: 200px; filter: blur(70px); }
  body.page-index .hero-gradient-3 { width: 220px; height: 160px; filter: blur(70px); }
  body.page-index .hero-gradient-4 { width: 130px; height: 130px; filter: blur(50px); }
  body.page-index .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.page-index .stat-card { padding: 24px 12px; }
  body.page-index .stat-number { font-size: clamp(32px, 8vw, 40px); }
  body.page-index .partner-badge img { height: 22px; }
  body.page-index .partner-badge span { font-size: 12px; }
  body.page-index .testimonials-grid { grid-template-columns: 1fr; }
  body.page-index .timeline { padding-left: 40px; }
  body.page-index .timeline-dot { left: -40px; width: 26px; height: 26px; font-size: 11px; }
  body.page-index .timeline::before { left: 12px; }
}

@media (max-width: 480px) {
  body.page-index .stats-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-index .hero-gradient, body.page-index .hero-gradient-2, body.page-index .hero-gradient-3, body.page-index .hero-gradient-4 { animation: none; }
}

/* ─── Timeline scroll highlight (every width) ───
   The step in the reading band lights up as it is scrolled through; the
   others sit dimmed. This replaced the desktop hover treatment on
   2026-08-27 (Ellis): the same effect on every device, driven by scroll
   position rather than the pointer. The observer in index.html sets
   .scroll-active. */
body.page-index .timeline-item .timeline-dot, body.page-index .timeline-item .timeline-content h3, body.page-index .timeline-item .timeline-content p {
  transition: border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}
body.page-index .timeline-item .timeline-content p { opacity: 0.5; }
body.page-index .timeline-item.scroll-active .timeline-dot {
  border-color: var(--blue-light); box-shadow: 0 0 16px rgba(77,166,255,0.3);
}
body.page-index .timeline-item.scroll-active .timeline-content h3 { color: var(--blue-light); }
body.page-index .timeline-item.scroll-active .timeline-content p { opacity: 1; }

/* ─── Theme toggle ─── */
body.page-index .theme-toggle {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border: none; background: transparent;
  cursor: pointer; border-radius: 50%; margin-left: 2px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65); transition: color 0.25s, background 0.25s;
  text-decoration: none; padding: 0; font-size: 0; min-width: 34px; flex-shrink: 0;
}
body.page-index .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ─── Mobile header bubble (the client portal sign-in link since 2026-09-17) ─── */
body.page-index .theme-toggle-mobile {
  display: none; pointer-events: auto;
  width: 48px; height: 48px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  cursor: pointer; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65);
  transition: color 0.25s, border-color 0.25s;
  padding: 0; font-size: 0; margin-left: 8px; flex-shrink: 0;
}
body.page-index .theme-toggle-mobile:hover { border-color: rgba(255,255,255,0.2); }
:root:has(body.page-index) { --nav-scale: 1; }
body.page-index .nav-fit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: none;
  transform: scale(var(--nav-scale));
  transform-origin: center top;
  pointer-events: auto;
  will-change: transform;
}
body.page-index .nav-fit.nav-fit-transitions { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }

/* ─── Mobile nav-link click animation ───
   .nav-collapsed = active label is currently at width 0.
   .nav-anim      = transition is currently enabled (only present during the
   collapse-on-click window on the outgoing page, and during the expand-on-
   load window on the incoming page).
   Without .nav-anim, refresh and breakpoint resize both snap - preserves
   the "no character-by-character reveal" guarantee from the previous fix. */
@media (max-width: 640px) {
  html.nav-collapsed:has(body.page-index) .nav a.active .nav-label {
    max-width: 0;
    opacity: 0;
  }
  html.nav-anim:has(body.page-index) .nav a.active .nav-label {
    transition: max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 180ms ease;
  }
  /* Neutralise the active highlight during the collapsed state so all 5
     links read as plain icons (no grey background, no brighter text, no
     widened padding). The existing `transition: color 0.25s, background
     0.25s` on `.nav a` smoothly fades the styling out and back in. */
  html.nav-collapsed:has(body.page-index) .nav a.active {
    background: transparent;
    color: rgba(255,255,255,0.65);
    /* Symmetric padding + zero gap so the active pill collapses to a true
       circle (16px icon + 9px padding × 2 = 34×34) instead of an oval. */
    padding: 9px;
    gap: 0;
  }
  html[data-theme="light"].nav-collapsed:has(body.page-index) .nav a.active {
    color: rgba(0,0,0,0.6);
  }
}
body.page-index .nav { gap: 6px; padding: 8px 10px; }
body.page-index .nav a { font-size: 14px; padding: 8px 20px; gap: 6px; }
body.page-index .nav-icon { width: 16px; height: 16px; }
body.page-index .nav-label { max-width: 100px; }
body.page-index .theme-toggle { width: 34px; height: 34px; min-width: 34px; margin-left: 2px; }
body.page-index .theme-toggle-mobile { width: 48px; height: 48px; margin-left: 0; }
@media (max-width: 640px) {
  body.page-index .nav-fit { gap: 8px; }
  body.page-index .nav { gap: 3px; padding: 8px 10px; }
  body.page-index .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-index .nav a:not(.active) .nav-label { max-width: 0; opacity: 0; }
  body.page-index .nav a.active .nav-label { max-width: 70px; font-size: 12px; }
  body.page-index .nav a.active { padding: 9px 14px; }
}
[data-theme="light"] body.page-index .theme-toggle-mobile { border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.6); background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-index .theme-toggle-mobile:hover { border-color: rgba(0,0,0,0.2); }
@media (max-width: 640px) {
  body.page-index .nav .theme-toggle { display: none; }
  body.page-index .theme-toggle-mobile { display: flex; }
}

/* ─── Light mode ─── */
[data-theme="light"]:has(body.page-index) { --bg: #eef1f6; --blue-light: #1a66b5; --glass-border: rgba(0,0,0,0.13); }
[data-theme="light"] body.page-index { background: var(--bg); color: #1a1a2e; }

[data-theme="light"] body.page-index .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .theme-toggle:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }
[data-theme="light"] body.page-index .nav { background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-index .nav::before { opacity: 0.5; }
[data-theme="light"] body.page-index .nav a { color: rgba(0,0,0,0.6); text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
[data-theme="light"] body.page-index .nav a:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }
[data-theme="light"] body.page-index .nav a.active { color: #1a1a2e; background: rgba(0,0,0,0.11); }

/* ── Adaptive nav text ── */
body.page-index .nav.nav-dark-adaptive a { color: rgba(0,0,0,0.7); text-shadow: 0 1px 2px rgba(255,255,255,0.3); }
body.page-index .nav.nav-dark-adaptive a:hover { color: rgba(0,0,0,0.9); }
body.page-index .nav.nav-dark-adaptive a.active { color: rgba(0,0,0,0.9); }
body.page-index .nav.nav-dark-adaptive .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .nav.nav-light-adaptive a { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
[data-theme="light"] body.page-index .nav.nav-light-adaptive a:hover { color: #fff; }
[data-theme="light"] body.page-index .nav.nav-light-adaptive a.active { color: #fff; }
[data-theme="light"] body.page-index .nav.nav-light-adaptive .theme-toggle { color: rgba(255,255,255,0.8); }

[data-theme="light"] body.page-index .hero-gradient {
  opacity: 0.55;
  background: radial-gradient(ellipse at 25% 25%, #b8daf5 0%, #8ec4ef 15%, #6aade4 30%, #4d96d4 45%, #3a82c2 60%, #2b6fb3 80%, transparent 100%);
}
[data-theme="light"] body.page-index .hero-gradient-2 {
  opacity: 0.48;
  background: radial-gradient(ellipse at 60% 30%, #cdeef3 0%, #a3e2ea 20%, #6cc9d6 40%, #3fa5b4 70%, transparent 100%);
}
[data-theme="light"] body.page-index .hero-gradient-3 {
  opacity: 0.42;
  background: radial-gradient(circle at 50% 50%, #a8d4f5 0%, #7bbde8 35%, #4d9fd4 70%, transparent 100%);
}
[data-theme="light"] body.page-index .hero-gradient-4 {
  opacity: 0.38;
  background: radial-gradient(circle, #ffe2a6 0%, #efae33 45%, transparent 78%);
}
[data-theme="light"] body.page-index .hero-gradient-5 {
  opacity: 0.38;
  background: radial-gradient(circle, #d0ebfc 0%, #8ec8f0 40%, transparent 75%);
}
[data-theme="light"] body.page-index .hero-title { color: #1a1a2e; }
[data-theme="light"] body.page-index .hero-title .laing, [data-theme="light"] body.page-index .hero-title .logic { color: #1a1a2e; }
[data-theme="light"] body.page-index .hero-subtitle { color: rgba(0,0,0,0.6); }

[data-theme="light"] body.page-index .partner-badge { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.11); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .partner-badge span { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .partner-badge img.dark-only { display: none; }
[data-theme="light"] body.page-index .partner-badge img.light-only { display: inline; }
[data-theme="light"] body.page-index a.partner-badge:hover { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.08); }
[data-theme="light"] body.page-index a.partner-badge:hover span { color: #1a1a2e; }
[data-theme="light"] body.page-index .stats-title { color: #1a1a2e; }
[data-theme="light"] body.page-index .stats-subtitle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .stat-card { background: linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.04)), var(--bg); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-index .stat-card.visible:hover,
[data-theme="light"] body.page-index .stat-card.visible:focus-within { border-color: rgba(43,127,212,0.2); }
[data-theme="light"] body.page-index .stat-number { background: linear-gradient(135deg, #1a1a2e 30%, var(--blue-light)); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] body.page-index .stat-label { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .stat-desc { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .how-header h2 { color: #1a1a2e; }
[data-theme="light"] body.page-index .how-header p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .timeline::before { background: linear-gradient(180deg, rgba(43,127,212,0.2), rgba(43,127,212,0.05)); }
[data-theme="light"] body.page-index .timeline-dot { background: var(--bg); border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.55); }
[data-theme="light"] body.page-index .timeline-content h3 { color: #1a1a2e; }
[data-theme="light"] body.page-index .timeline-content p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .testimonial-card { background: linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.04)), var(--bg); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-index .testimonial-card:hover { border-color: rgba(43,127,212,0.2); }
[data-theme="light"] body.page-index .testimonial-shot { background: linear-gradient(145deg, rgba(43,127,212,0.08), rgba(77,166,255,0.04)); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] body.page-index .testimonial-logo.has-logo-img { background: rgba(0,0,0,0.04); border-color: rgba(43,127,212,0.15); }
[data-theme="light"] body.page-index .testimonials-header h2 { color: #1a1a2e; }
[data-theme="light"] body.page-index .testimonial-quote { color: rgba(0,0,0,0.65); }
[data-theme="light"] body.page-index .testimonial-info h3 { color: #1a1a2e; }
[data-theme="light"] body.page-index .testimonial-info p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .testimonial-rating { color: var(--blue-light); }
[data-theme="light"] body.page-index .testimonial-site-link { color: #2b7fd4; background: rgba(43,127,212,0.1); border-color: rgba(43,127,212,0.22); }
[data-theme="light"] body.page-index .testimonial-card:hover .testimonial-site-link,
[data-theme="light"] body.page-index .testimonial-card:focus-within .testimonial-site-link { background: rgba(43,127,212,0.16); border-color: rgba(43,127,212,0.4); }
[data-theme="light"] body.page-index .testimonial-site-link.is-stub { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] body.page-index .faq-header h2 { color: #1a1a2e; }
[data-theme="light"] body.page-index .faq-header p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .faq-item { border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-index .faq-q { color: #1a1a2e; }
[data-theme="light"] body.page-index .faq-q::after { color: rgba(0,0,0,0.4); }
[data-theme="light"] body.page-index .faq-q.open::after { color: var(--blue-light); }
[data-theme="light"] body.page-index .faq-a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .schedule-cta-box { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-index .schedule-cta-box h2 { color: #1a1a2e; }
[data-theme="light"] body.page-index .schedule-cta-box p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .cta-glow-line span { background: linear-gradient(90deg, transparent, var(--blue-light), transparent); }
[data-theme="light"] body.page-index .btn-primary { background: #1a1a2e; color: #fff; }
[data-theme="light"] body.page-index .btn-primary:hover { background: #2a2a4e; box-shadow: 0 8px 30px rgba(43,127,212,0.2); }
[data-theme="light"] body.page-index .btn-outline { color: #1a1a2e; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] body.page-index .btn-outline:hover { border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); }
[data-theme="light"] body.page-index footer { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-index footer .footer-logo { filter: drop-shadow(0 0 6px rgba(43,127,212,0.3)); }
/* Light-theme footer (de-duplicated 2026-08-20). Five of these rules were
   declared twice, and the second copy of .footer-links a:hover set the SAME
   colour as the resting state, so hovering a footer link did nothing in light
   mode. The surviving declarations are the ones that were already winning, so
   nothing changes visually except the hover, which is restored to #1a1a2e. */
[data-theme="light"] body.page-index footer .address { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .footer-social a { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); }
[data-theme="light"] body.page-index footer .footer-links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index footer .footer-links a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-index footer .footer-sep { color: rgba(0,0,0,0.45); }
[data-theme="light"] body.page-index footer .footer-copy { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-index .stats-section::before, [data-theme="light"] body.page-index .how-section::before, [data-theme="light"] body.page-index .testimonials-section::before, [data-theme="light"] body.page-index .faq-section::before { background: linear-gradient(90deg, transparent, rgba(43,127,212,0.15), transparent); }

/* ─── Skeleton ─── */
body.page-index .skeleton-text { height: 12px; margin-bottom: 8px; width: 80%; }
body.page-index .skeleton-text.short { width: 40%; }
body.page-index .skeleton-text.medium { width: 60%; }
body.page-index .skeleton-heading { height: 28px; width: 50%; margin-bottom: 12px; border-radius: 8px; }
body.page-index .skeleton-heading.large { height: 42px; width: 70%; }
body.page-index .skeleton-pill { height: 28px; width: 100px; border-radius: 999px; }
body.page-index .skeleton-bar { height: 4px; width: 100%; border-radius: 999px; }
body.page-index .skeleton-circle { width: 48px; height: 48px; border-radius: 50%; }
body.page-index .skeleton-btn { height: 48px; width: 200px; border-radius: 14px; }
body.page-index .skeleton-card { border-radius: 20px; padding: 24px; min-height: 120px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); }
body.page-index .skeleton-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; gap: 12px; }
body.page-index .skeleton-row .skeleton-text { margin-bottom: 0; }
body.page-index .skeleton-dot { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
body.page-index .skeleton-dots-row { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
body.page-index .skeleton-amount { height: 56px; width: 120px; margin: 0 auto 8px; border-radius: 8px; }
/* Match real .hero-title clamp(56px, 10vw, 120px) so the swap is invisible */
body.page-index .hero-title-sk { height: clamp(56px, 10vw, 120px); }
/* Match real .hero-subtitle clamp(14px, 2vw, 18px) */
body.page-index .hero-sub-sk { height: clamp(14px, 2vw, 18px); }
/* .real-content is display:contents when loaded, so its children lay out
   directly in each section's own formatting context (flex sections size and
   blockify them as items). The skeleton copy must do the same or its box
   constrains the children to different widths (one measured 1010.8px wide
   inside a 1392px section). Hence display:contents here too -
   and because opacity has no effect on a display:contents box, the fade
   moves onto the children (same pattern as pageContact.css). */
body.page-index .skeleton-content { display: contents; }
body.page-index .skeleton-content > * { opacity: 0; transition: opacity 0.2s; }
body.page-index.show-skeleton .skeleton-content > * { opacity: 1; }
body.page-index.loaded .skeleton-content { display: none !important; }
body.page-index:not(.loaded) .real-content { display: none; }
body.page-index.loaded .real-content { display: contents; }
@media (max-width: 640px) {
  /* Match real .stat-number mobile clamp(32px, 8vw, 40px) */
  /* Match real .partner-badge ~36px on mobile */
  /* Match real .timeline padding-left: 40px at ≤640px */
}
/* Tablet - match real CSS 
/* Respect prefers-reduced-motion (WCAG 2.2 AA 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  body.page-index *, body.page-index *::before, body.page-index *::after, body.page-index {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.page-index .skip-link {position:fixed;top:-48px;left:0;background:#2b7fd4;color:#fff;padding:10px 16px;z-index:99999;text-decoration:none;font-weight:600;border-radius:0 0 4px 0;transition:top .2s ease,opacity .2s ease;font-size:14px;opacity:0;pointer-events:none;white-space:nowrap}
body.page-index .skip-link:focus, body.page-index .skip-link:focus-visible {top:0;opacity:1;pointer-events:auto;outline:2px solid #fff;outline-offset:-4px}

/* Global :focus-visible - keyboard accessibility (WCAG 2.4.7) */
body.page-index a:focus-visible, body.page-index button:focus-visible, body.page-index [role="button"]:focus-visible, body.page-index input:focus-visible, body.page-index select:focus-visible, body.page-index textarea:focus-visible, body.page-index .btn:focus-visible, body.page-index .theme-toggle:focus-visible, body.page-index .theme-toggle-mobile:focus-visible {
  outline: 2px solid var(--blue-light, #4da6ff);
  outline-offset: 2px;
  border-radius: 4px;
}
body.page-index .btn:focus-visible { border-radius: 999px; }

/* ============================================================
   Faster home - skip rendering the below-the-fold sections until
   they're near the viewport. This cuts the home page's initial
   layout/paint cost (the heaviest part of the first render that the
   cross-document view-transition waits on), so the crossfade into
   home settles sooner.

   Parity-safe by construction: content-visibility:auto only skips
   contents while a section is OFF-SCREEN; the moment it scrolls into
   view it renders exactly as before. Each section here is also safe
   under the paint/layout containment it implies - .stats-section
   already sets overflow:hidden, and the others carry only a 1px inset
   top-divider ::before with their content held inside 100px padding,
   so nothing visual reaches (or overflows) the section's border box.
   .hero and .partner-section are deliberately excluded (above the
   fold - must paint immediately). 'auto' in contain-intrinsic-size
   lets the browser remember each section's real height after first
   render, so the scrollbar doesn't drift.
   ============================================================ */
body.page-index .stats-section,
body.page-index .how-section,
body.page-index .testimonials-section,
body.page-index .faq-section,
body.page-index .schedule-cta {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}