/* ═══════════════════════════════════════════════
   APTI AI Tutor — Cinematic Stylesheet
   ═══════════════════════════════════════════════ */

:root {
  --ink: #0A0E1A;
  --surface: #11162A;
  --royal: #3D5AFE;
  --violet: #9a6cff;
  --amber: #E8A33D;
  --paper: #F2F0EA;
  --slate: #40b5f0;
  --surface-light: #1a2040;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
a { color: inherit; text-decoration: none; cursor: none; }
button { cursor: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; border: none; background: none; color: inherit; }
.mono { font-family: 'JetBrains Mono', monospace; }
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ═══════════════════════════════════════════════
   CINEMATIC CURSOR SYSTEM
   ═══════════════════════════════════════════════ */
.cursor-system {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 100000;
  mix-blend-mode: screen;
}
.cursor-core {
  position: absolute; width: 8px; height: 8px;
  background: var(--royal);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.3s;
  box-shadow: 0 0 12px var(--royal), 0 0 30px rgba(61, 90, 254, 0.3);
}
.cursor-ring {
  position: absolute; width: 44px; height: 44px;
  border: 1.5px solid rgba(61, 90, 254, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-spring), height 0.4s var(--ease-spring),
              border-color 0.3s, background 0.3s, opacity 0.3s;
}
.cursor-glow {
  position: absolute; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(61, 90, 254, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s, opacity 0.3s;
}
.cursor-trail-canvas {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 99999;
}

/* Cursor states */
.cursor-system.hover-link .cursor-core { width: 4px; height: 4px; background: var(--violet); }
.cursor-system.hover-link .cursor-ring {
  width: 64px; height: 64px;
  border-color: var(--violet);
  background: rgba(154, 108, 255, 0.05);
}
.cursor-system.hover-card .cursor-core { width: 0; height: 0; }
.cursor-system.hover-card .cursor-ring {
  width: 80px; height: 80px;
  border-color: var(--royal);
  background: rgba(61, 90, 254, 0.03);
}
.cursor-system.hover-btn .cursor-core { width: 6px; height: 6px; background: white; }
.cursor-system.hover-btn .cursor-ring {
  width: 56px; height: 56px;
  border-color: white;
  background: rgba(255, 255, 255, 0.05);
}
.cursor-system.clicking .cursor-ring {
  width: 36px; height: 36px;
  border-color: var(--amber);
}

@media (hover: none), (max-width: 768px) {
  .cursor-system, .cursor-trail-canvas { display: none !important; }
  body, a, button { cursor: auto; }
}

/* ═══════════════════════════════════════════════
   FLOATING LEARNING ICONS
   ═══════════════════════════════════════════════ */
.floating-icons {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.float-icon {
  position: absolute;
  font-size: 22px;
  opacity: 0.07;
  transition: opacity 0.6s;
  will-change: transform;
  animation: floatDrift var(--dur, 20s) ease-in-out infinite alternate;
  filter: blur(0.5px);
}
.float-icon:nth-child(odd) { animation-direction: alternate-reverse; }

@keyframes floatDrift {
  0% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(5deg); }
  66% { transform: translateY(10px) rotate(-3deg); }
  100% { transform: translateY(-8px) rotate(2deg); }
}

@media (max-width: 768px) { .floating-icons { display: none; } }

/* ═══════════════════════════════════════════════
   BACKGROUND PARTICLES
   ═══════════════════════════════════════════════ */
.particle-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════
   NOISE OVERLAY
   ═══════════════════════════════════════════════ */
.noise-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 99998;
  opacity: 0.025;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════
   SECTION RAIL
   ═══════════════════════════════════════════════ */
.section-rail {
  position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
  z-index: 100; display: flex; flex-direction: column; align-items: center;
}
.section-rail::before, .section-rail::after {
  content: ''; display: block; width: 1px; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--slate), transparent);
}
.rail-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--slate); letter-spacing: 0.05em;
  padding: 8px 0;
  transition: color 0.3s;
}
@media (max-width: 1024px) { .section-rail { display: none; } }

/* ═══════════════════════════════════════════════
   GRADIENT MESH
   ═══════════════════════════════════════════════ */
.gradient-mesh {
  position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(61, 90, 254, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(154, 108, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(61, 90, 254, 0.04) 0%, transparent 50%);
  transition: background 1.5s ease;
}
.gradient-mesh.amber-shift {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(232, 163, 61, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(154, 108, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 70%, rgba(232, 163, 61, 0.06) 0%, transparent 50%);
}

/* ═══════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 20px 0;
  transition: padding 0.4s, background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.condensed {
  padding: 12px 0;
  background: rgba(10, 14, 26, 0.9);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom-color: rgba(61, 90, 254, 0.15);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-img {
  width: 40px; height: 40px; object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s var(--ease-out-expo), filter 0.3s;
  filter: drop-shadow(0 0 8px rgba(61, 90, 254, 0.3));
}
.nav-logo:hover .nav-logo-img {
  transform: scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 0 14px rgba(61, 90, 254, 0.5));
}
.nav.condensed .nav-logo-img { width: 34px; height: 34px; }
.nav-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 18px; }
.brand-accent { color: var(--royal); }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-size: 14px; color: var(--slate); transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0;
  height: 2px; background: linear-gradient(90deg, var(--royal), var(--violet));
  transition: width var(--transition); border-radius: 1px;
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  font-size: 13px; font-weight: 500; padding: 8px 20px;
  border: 1px solid var(--royal); border-radius: 100px;
  color: var(--royal); transition: all var(--transition);
  position: relative; overflow: hidden;
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--royal), var(--violet));
  opacity: 0; transition: opacity 0.3s;
}
.nav-cta:hover { color: white; border-color: transparent; }
.nav-cta:hover::before { opacity: 1; }
.nav-cta span, .nav-cta { position: relative; z-index: 1; }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--paper); transition: all var(--transition); }
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links.mobile-open {
    display: flex; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0; background: rgba(17, 22, 42, 0.95);
    backdrop-filter: blur(20px); padding: 24px; gap: 16px;
    border-bottom: 1px solid rgba(61, 90, 254, 0.1);
  }
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; border-radius: 100px; font-weight: 500;
  font-size: 15px; transition: all 0.4s var(--ease-out-expo); position: relative;
  overflow: hidden;
}
.btn-text { position: relative; z-index: 2; }
.btn-primary {
  background: linear-gradient(135deg, var(--royal), var(--violet));
  color: white;
  box-shadow: 0 4px 24px rgba(61, 90, 254, 0.3), 0 0 0 0 rgba(61, 90, 254, 0);
}
.btn-primary:hover {
  box-shadow: 0 8px 40px rgba(61, 90, 254, 0.5), 0 0 60px rgba(154, 108, 255, 0.2);
  transform: translateY(-3px);
}
.btn-shine {
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  z-index: 1;
  animation: btnShine 4s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 70%, 100% { left: -100%; }
  85% { left: 100%; }
}
.btn-ghost {
  border: 1px solid rgba(242, 240, 234, 0.2); color: var(--paper);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { border-color: var(--royal); color: var(--royal); background: rgba(61, 90, 254, 0.05); }
.btn-lg { padding: 18px 40px; font-size: 16px; }

/* ═══════════════════════════════════════════════
   GLOW CARD EFFECT
   ═══════════════════════════════════════════════ */
.glow-card {
  position: relative;
  transition: transform 0.4s var(--ease-out-expo), border-color 0.3s;
}
.glow-card:hover { transform: translateY(-4px); }
.card-glow {
  position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(61, 90, 254, 0.2), rgba(154, 108, 255, 0.2), rgba(61, 90, 254, 0.1));
  opacity: 0; transition: opacity 0.5s; z-index: -1;
  filter: blur(16px);
}
.glow-card:hover .card-glow { opacity: 1; }

/* ═══════════════════════════════════════════════
   EYEBROW LABELS
   ═══════════════════════════════════════════════ */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow-line {
  display: inline-block; width: 24px; height: 1px;
  background: var(--royal);
  transition: width 0.6s var(--ease-out-expo);
}
.eyebrow.in-view .eyebrow-line { width: 40px; }

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh; display: flex;
  align-items: center; overflow: hidden; padding-top: 80px;
}
.hero-mesh-canvas {
  position: absolute; inset: 0; z-index: 0;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px;
  align-items: center; width: 100%;
}

/* Hero character animation */
.hero-headline {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.1; margin-bottom: 24px;
  min-height: 1.2em;
}
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(-40deg);
  filter: blur(6px);
  transition: all 0.6s var(--ease-out-expo);
}
.hero-char.revealed {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
  filter: blur(0);
}
.hero-char.space { width: 0.3em; }

.hero-sub { font-size: 17px; color: var(--slate); max-width: 520px; line-height: 1.7; margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Mascot with glow */
.hero-mascot { position: relative; }
.mascot-glow {
  position: absolute; inset: -20%; z-index: -1;
  background: radial-gradient(circle, rgba(61, 90, 254, 0.15) 0%, transparent 60%);
  border-radius: 50%;
  animation: mascotPulse 4s ease-in-out infinite;
}
@keyframes mascotPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}
.mascot-img {
  width: 100%; max-width: 380px; margin: 0 auto;
  filter: drop-shadow(0 20px 60px rgba(61, 90, 254, 0.3));
  animation: mascotFloat 6s ease-in-out infinite;
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0.5; animation: fadeInUp 1s 2s both;
}
.scroll-text { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate); }
.scroll-arrow {
  font-size: 16px; color: var(--royal);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 0.5; transform: translate(-50%, 0); }
}

/* Audience strip continuous scrolling */
.audience-strip {
  position: relative; width: 100%; display: block;
  overflow: hidden; opacity: 0.95; z-index: 10;
  padding: 18px 0; margin: 0;
  background: rgba(13, 22, 48, 0.75);
  border-top: 1px solid rgba(85, 221, 255, 0.22);
  border-bottom: 1px solid rgba(85, 221, 255, 0.22);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.marquee-track {
  display: flex; width: max-content; gap: 36px; white-space: nowrap;
  animation: continuousMarquee 26s linear infinite;
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600;
  color: #c5d5f8; letter-spacing: 0.06em; text-transform: uppercase;
}
.marquee-track .dot { color: #43e2f5; text-shadow: 0 0 10px #43e2f5; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes continuousMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-mascot { order: -1; }
  .mascot-img { max-width: 200px; }
}

/* ═══════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════ */
.section { padding: 140px 0; position: relative; }
.section-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 24px; line-height: 1.2;
}
.section-intro { font-size: 16px; color: var(--slate); max-width: 720px; line-height: 1.8; margin-bottom: 48px; }
.sub-heading { font-size: clamp(1.2rem, 2.5vw, 1.6rem); margin-top: 48px; margin-bottom: 24px; }

/* ═══════════════════════════════════════════════
   KINETIC KEYWORDS
   ═══════════════════════════════════════════════ */
.kinetic {
  background: linear-gradient(135deg, var(--royal), var(--violet), var(--royal));
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kineticShift 6s ease-in-out infinite;
}
@keyframes kineticShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ═══════════════════════════════════════════════
   REVEAL ANIMATIONS (Enhanced)
   ═══════════════════════════════════════════════ */
.reveal-fade {
  opacity: 0; transform: translateY(20px);
  transition: all 0.8s var(--ease-out-expo);
}
.reveal-fade.in-view { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-30px);
  transition: all 0.8s var(--ease-out-expo);
}
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

.reveal-words {
  opacity: 0; transform: translateY(24px) scale(0.98);
  transition: all 0.9s var(--ease-out-expo);
  filter: blur(4px);
}
.reveal-words.in-view { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* Staggered children */
.reveal-fade[data-delay="0"] { transition-delay: 0s; }
.reveal-fade[data-delay="1"] { transition-delay: 0.12s; }
.reveal-fade[data-delay="2"] { transition-delay: 0.24s; }
.reveal-fade[data-delay="3"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal-fade, .reveal-left, .reveal-words { opacity: 1; transform: none; filter: none; }
  .hero-char { opacity: 1; transform: none; filter: none; }
  .mascot-img { animation: none; }
  .mascot-glow { animation: none; }
}

/* ═══════════════════════════════════════════════
   IMAGE TILT & FLOAT
   ═══════════════════════════════════════════════ */
.tilt-element {
  transition: transform 0.4s var(--ease-out-expo);
  will-change: transform;
}

/* ═══════════════════════════════════════════════
   STAT COUNTERS
   ═══════════════════════════════════════════════ */
.stat-card {
  background: var(--surface);
  border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius);
  padding: 32px; position: relative; overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--violet));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-card:hover { border-color: rgba(61, 90, 254, 0.25); }
.stat-number {
  display: block; font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600; color: var(--royal); margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-shadow: 0 0 20px rgba(61, 90, 254, 0.3);
}
.stat-label { font-size: 14px; color: var(--slate); line-height: 1.6; }
.stat-icon { color: var(--violet); text-shadow: 0 0 20px rgba(154, 108, 255, 0.3); }

/* ═══════════════════════════════════════════════
   FOUNDER
   ═══════════════════════════════════════════════ */
.founder-layout { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px; align-items: start; }
.founder-text p { font-size: 15px; color: var(--slate); line-height: 1.8; margin-bottom: 20px; }
.founder-pillars { display: flex; flex-direction: column; gap: 20px; margin: 24px 0; }
.founder-pillar {
  background: var(--surface); border-left: 3px solid var(--royal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 24px;
  transition: border-color 0.3s, background 0.3s;
}
.founder-pillar:hover { border-color: var(--violet); background: var(--surface-light); }
.founder-pillar:last-child { border-left-color: var(--violet); }
.founder-pillar h4 { font-size: 16px; margin-bottom: 8px; color: var(--paper); }
.founder-pillar p { font-size: 14px; color: var(--slate); margin-bottom: 0; line-height: 1.7; }
.founder-sign { margin-top: 32px; font-size: 14px; color: var(--slate); line-height: 1.8; }
.founder-sign strong { color: var(--paper); }
.founder-illustration img { max-width: 100%; opacity: 0.9; }
@media (max-width: 768px) { .founder-layout { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   CRISIS
   ═══════════════════════════════════════════════ */
.crisis-why {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius); padding: 32px; margin-bottom: 32px;
  position: relative; overflow: hidden;
}
.crisis-why::before {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--royal), var(--violet));
}
.crisis-why h3 { font-size: 18px; margin-bottom: 12px; color: var(--royal); }
.crisis-why p { font-size: 14px; color: var(--slate); line-height: 1.8; margin-bottom: 16px; }
.core-premise {
  padding: 16px 20px; border-left: 3px solid var(--violet);
  background: rgba(154, 108, 255, 0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 0 !important;
}
.crisis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

/* ═══════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════ */
.about-intro { font-size: 16px; color: var(--slate); max-width: 800px; line-height: 1.8; margin-bottom: 32px; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.about-col {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius); padding: 28px; position: relative; overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.about-col:hover { border-color: rgba(61, 90, 254, 0.25); transform: translateY(-4px); }
.about-col h3 { font-size: 18px; margin-bottom: 12px; color: var(--royal); }
.about-col p { font-size: 14px; color: var(--slate); line-height: 1.7; }
.about-contact {
  margin-top: 48px; padding: 24px; background: var(--surface);
  border: 1px solid rgba(61, 90, 254, 0.1); border-radius: var(--radius);
}
.about-contact p { font-size: 14px; color: var(--slate); margin-bottom: 8px; }
.about-contact .mono { color: var(--royal); }

/* ═══════════════════════════════════════════════
   TRANSFORMATION
   ═══════════════════════════════════════════════ */
.transform-content { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.transform-block {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.08);
  border-radius: var(--radius); padding: 28px;
}
.transform-block h3 { font-size: 18px; margin-bottom: 12px; color: var(--royal); }
.transform-block p { font-size: 14px; color: var(--slate); line-height: 1.7; margin-bottom: 12px; }
.detail-list { display: flex; flex-direction: column; gap: 12px; }
.detail-list li { font-size: 14px; color: var(--slate); line-height: 1.7; padding-left: 20px; position: relative; }
.detail-list li::before { content: '→'; position: absolute; left: 0; color: var(--violet); }
.detail-list li strong { color: var(--paper); }
.transform-illustration { text-align: center; margin-bottom: 40px; }
.transform-illustration img { max-width: 400px; margin: 0 auto; }
.transform-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
@media (max-width: 768px) { .transform-content { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   ECOSYSTEM
   ═══════════════════════════════════════════════ */
.ecosystem-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.eco-step {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius); padding: 32px; position: relative; overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.eco-step:hover { border-color: var(--violet); transform: translateY(-6px); }
.eco-step::after {
  content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(154, 108, 255, 0.06) 0%, transparent 60%);
  transition: opacity 0.5s; opacity: 0;
}
.eco-step:hover::after { opacity: 1; }
.step-num { display: block; font-size: 36px; font-weight: 600; color: var(--violet); margin-bottom: 12px; opacity: 0.6; }
.eco-step h3 { font-size: 20px; margin-bottom: 8px; position: relative; z-index: 1; }
.eco-step p { font-size: 14px; color: var(--slate); line-height: 1.7; position: relative; z-index: 1; }
.ecosystem-illustration { text-align: center; }
.ecosystem-illustration img { max-width: 500px; margin: 0 auto; }
@media (max-width: 768px) { .ecosystem-steps { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   PIPELINE SVG
   ═══════════════════════════════════════════════ */
.pipeline-wrapper { overflow-x: auto; padding: 20px 0; }
.pipeline-svg { width: 100%; min-width: 800px; }
.pipeline-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.pipe-node circle { transition: opacity 0.5s, r 0.3s; }
.pipe-node.active circle { opacity: 1; }

/* ═══════════════════════════════════════════════
   COMPARISON TABLE
   ═══════════════════════════════════════════════ */
.comparison-table-wrapper { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.comparison-table th {
  text-align: left; padding: 16px 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--slate); border-bottom: 1px solid rgba(61, 90, 254, 0.1);
}
.comparison-table th:last-child { color: var(--royal); }
.comparison-table td { padding: 20px; font-size: 14px; color: var(--slate); line-height: 1.7; border-bottom: 1px solid rgba(255,255,255,0.04); }
.comparison-table td.dim-label { font-weight: 600; color: var(--paper); white-space: nowrap; font-size: 13px; }
.comp-row { opacity: 0; transform: translateX(-20px); transition: all 0.6s var(--ease-out-expo); }
.comp-row.in-view { opacity: 1; transform: translateX(0); }

/* ═══════════════════════════════════════════════
   ARCHITECTURE
   ═══════════════════════════════════════════════ */
.arch-stack { display: flex; flex-direction: column; gap: 12px; }
.arch-layer {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius); overflow: hidden;
  transition: all 0.6s var(--ease-out-expo);
}
.arch-layer:hover { border-color: rgba(61, 90, 254, 0.3); transform: translateX(8px); }
.arch-layer[data-depth="0"] { border-left: 3px solid var(--royal); }
.arch-layer[data-depth="1"] { border-left: 3px solid var(--violet); }
.arch-layer[data-depth="2"] { border-left: 3px solid var(--royal); }
.arch-layer[data-depth="3"] { border-left: 3px solid var(--violet); }
.arch-layer-inner { padding: 28px 32px; }
.arch-label { display: block; font-size: 11px; color: var(--slate); margin-bottom: 6px; letter-spacing: 0.1em; }
.arch-layer h3 { font-size: 18px; margin-bottom: 6px; }
.arch-layer p { font-size: 14px; color: var(--slate); }

/* ═══════════════════════════════════════════════
   MODULE GRID (32 FLIP CARDS)
   ═══════════════════════════════════════════════ */
.module-filters { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.filter-btn {
  padding: 8px 20px; border-radius: 100px; font-size: 13px; color: var(--slate);
  border: 1px solid rgba(255,255,255,0.1); transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--royal); color: var(--paper); }
.filter-btn.active { background: linear-gradient(135deg, var(--royal), var(--violet)); color: white; border-color: transparent; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.flip-card { perspective: 1000px; height: 170px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s var(--ease-out-expo); transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner, .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.flip-front { background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1); }
.flip-back { background: linear-gradient(135deg, var(--surface), var(--surface-light)); border: 1px solid rgba(154, 108, 255, 0.2); transform: rotateY(180deg); }
.flip-back p { font-size: 12px; color: var(--slate); line-height: 1.6; }
.module-icon { font-size: 26px; margin-bottom: 10px; display: block; }
.module-name { font-size: 13px; font-weight: 500; }
.flip-card.hidden { display: none; }

/* ═══════════════════════════════════════════════
   PARADIGMS
   ═══════════════════════════════════════════════ */
.paradigm-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.paradigm-mesh-canvas {
  width: 100%; height: 400px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 60px rgba(61, 90, 254, 0.05);
}
.paradigm-cards { display: flex; flex-direction: column; gap: 16px; }
.paradigm-card {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius-sm); padding: 24px; position: relative; overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.paradigm-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.paradigm-card h3 { font-size: 16px; margin-bottom: 8px; color: var(--royal); }
.paradigm-card p { font-size: 13px; color: var(--slate); line-height: 1.6; }
@media (max-width: 768px) { .paradigm-layout { grid-template-columns: 1fr; } .paradigm-mesh-canvas { height: 280px; } }

/* ═══════════════════════════════════════════════
   STAKEHOLDERS
   ═══════════════════════════════════════════════ */
.stakeholder-tabs { display: flex; gap: 8px; margin-bottom: 32px; overflow-x: auto; padding-bottom: 8px; }
.stab-btn {
  padding: 10px 20px; border-radius: 100px; font-size: 13px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.1); color: var(--slate); transition: all var(--transition);
}
.stab-btn:hover { border-color: var(--royal); color: var(--paper); }
.stab-btn.active { background: linear-gradient(135deg, var(--royal), var(--violet)); color: white; border-color: transparent; }
.stab-panel { display: none; animation: panelIn 0.4s var(--ease-out-expo); }
.stab-panel.active { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.stab-panel h3 { font-size: 20px; margin-bottom: 16px; }
.stab-panel p { font-size: 15px; color: var(--slate); line-height: 1.8; }
.stab-illustration { margin-top: 24px; max-width: 300px; border-radius: var(--radius-sm); }

/* ═══════════════════════════════════════════════
   DASHBOARDS
   ═══════════════════════════════════════════════ */
.dashboard-showcase { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.dash-mockup {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(61, 90, 254, 0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.dash-mockup img { width: 100%; }
.dash-overlay { position: absolute; bottom: 20px; left: 20px; right: 20px; height: 80px; display: flex; align-items: flex-end; gap: 8px; }
.dash-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.dash-bar {
  width: 20px; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--royal), var(--violet));
  height: var(--h); transform: scaleY(0); transform-origin: bottom;
  transition: transform 1.2s var(--ease-out-expo);
  box-shadow: 0 0 8px rgba(61, 90, 254, 0.3);
}
.dash-bar.animate { transform: scaleY(1); }
.dash-features { display: flex; flex-direction: column; gap: 20px; }
.dash-feature {
  padding: 16px 20px; border-left: 2px solid rgba(61, 90, 254, 0.2);
  transition: border-color 0.3s;
}
.dash-feature:hover { border-color: var(--royal); }
.dash-feature h4 { font-size: 15px; margin-bottom: 6px; }
.dash-feature p { font-size: 13px; color: var(--slate); }
@media (max-width: 768px) { .dashboard-showcase { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   SECURITY
   ═══════════════════════════════════════════════ */
.security-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
.security-illustration img { max-width: 100%; }
.security-checklist { display: flex; flex-direction: column; gap: 12px; }
.sec-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.06);
  opacity: 0; transform: translateX(-24px);
  transition: all 0.6s var(--ease-out-expo);
}
.sec-item.in-view { opacity: 1; transform: translateX(0); }
.sec-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(61, 90, 254, 0.15); display: flex; align-items: center;
  justify-content: center; color: var(--royal); font-size: 11px;
  box-shadow: 0 0 12px rgba(61, 90, 254, 0.2);
}
.sec-item span:last-child { font-size: 13px; color: var(--slate); line-height: 1.6; }
.sec-item strong { color: var(--paper); }
@media (max-width: 768px) { .security-layout { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════ */
.timeline-bar-wrapper { padding: 40px 0; }
.timeline-bar { position: relative; height: 4px; background: rgba(61, 90, 254, 0.12); border-radius: 2px; margin-top: 80px; }
.timeline-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--royal), var(--violet));
  border-radius: 2px; width: 0%; transition: width 2.5s var(--ease-out-expo);
  box-shadow: 0 0 12px rgba(61, 90, 254, 0.4);
}
.timeline-fill.filled { width: 100%; }
.timeline-phases { position: absolute; top: -64px; left: 0; right: 0; display: flex; justify-content: space-between; }
.phase { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(12px); transition: all 0.6s var(--ease-out-expo); }
.phase.in-view { opacity: 1; transform: translateY(0); }
.phase-week { font-size: 11px; color: var(--slate); }
.phase-name { font-size: 12px; color: var(--paper); text-align: center; max-width: 100px; }

/* ═══════════════════════════════════════════════
   TRAINING
   ═══════════════════════════════════════════════ */
.training-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
.training-illustration img { max-width: 100%; }
.training-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.train-card {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius-sm); padding: 24px; position: relative; overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.train-card:hover { border-color: var(--violet); transform: translateY(-4px); }
.train-card h4 { font-size: 15px; margin-bottom: 8px; }
.train-card p { font-size: 13px; color: var(--slate); line-height: 1.6; }
@media (max-width: 768px) { .training-layout { grid-template-columns: 1fr; } .training-cards { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   SLA
   ═══════════════════════════════════════════════ */
.sla-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.sla-item {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.1);
  border-radius: var(--radius); padding: 32px; text-align: center;
  position: relative; overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.sla-item:hover { border-color: rgba(61, 90, 254, 0.25); transform: translateY(-4px); }
.sla-icon { display: block; font-size: 28px; margin-bottom: 16px; }
.sla-item h4 { font-size: 16px; margin-bottom: 8px; }
.sla-number { display: block; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 600; color: var(--royal); margin-bottom: 12px; text-shadow: 0 0 20px rgba(61, 90, 254, 0.3); }
.sla-item p { font-size: 14px; color: var(--slate); }

/* ═══════════════════════════════════════════════
   ROI
   ═══════════════════════════════════════════════ */
.roi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.roi-card {
  background: var(--surface); border: 1px solid rgba(232, 163, 61, 0.2);
  border-radius: var(--radius); padding: 40px; text-align: center;
  position: relative; overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.roi-card:hover { border-color: rgba(232, 163, 61, 0.4); transform: translateY(-4px); }
.roi-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(232, 163, 61, 0.08) 0%, transparent 60%);
}
.roi-number { display: block; font-size: clamp(2.5rem, 4.5vw, 3.5rem); font-weight: 600; margin-bottom: 16px; position: relative; }
.roi-number.amber { color: var(--amber); text-shadow: 0 0 30px rgba(232, 163, 61, 0.4); }
.roi-card p { font-size: 14px; color: var(--slate); line-height: 1.6; position: relative; }

/* ═══════════════════════════════════════════════
   ROADMAP
   ═══════════════════════════════════════════════ */
.roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.roadmap-card {
  background: var(--surface); border: 1px solid rgba(61, 90, 254, 0.08);
  border-radius: var(--radius); padding: 32px; opacity: 0.8;
  transition: all 0.4s var(--ease-out-expo);
}
.roadmap-card:hover { opacity: 1; border-color: rgba(61, 90, 254, 0.2); transform: translateY(-4px); }
.roadmap-quarter { display: block; font-size: 12px; color: var(--violet); margin-bottom: 12px; letter-spacing: 0.1em; }
.roadmap-card h4 { font-size: 17px; margin-bottom: 8px; }
.roadmap-card p { font-size: 13px; color: var(--slate); line-height: 1.6; }

/* ═══════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════ */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.pricing-card { height: 360px; }
.pricing-card .flip-front { justify-content: center; gap: 12px; }
.pricing-card .flip-back { justify-content: center; }
.pricing-card .flip-back ul { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pricing-card .flip-back li { font-size: 13px; color: var(--slate); padding-left: 16px; position: relative; }
.pricing-card .flip-back li::before { content: '✓'; position: absolute; left: 0; color: var(--royal); font-size: 11px; }
.tier-badge { display: inline-block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.tier-badge.amber { color: var(--amber); }
.pricing-card h3 { font-size: 22px; margin-bottom: 8px; }
.price { font-size: 28px; font-weight: 600; display: block; margin-bottom: 8px; }
.price-unit { font-size: 14px; font-weight: 400; color: var(--slate); }
.tier-desc { font-size: 13px; color: var(--slate); }
.flip-back-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--royal); margin-bottom: 12px; }
.pricing-card.enterprise .flip-front {
  border-color: rgba(232, 163, 61, 0.3);
  background: linear-gradient(135deg, var(--surface), rgba(232, 163, 61, 0.05));
  box-shadow: 0 0 40px rgba(232, 163, 61, 0.1);
}
.pricing-card.enterprise .flip-back { border-color: rgba(232, 163, 61, 0.2); }
.pricing-card.enterprise .flip-back li::before { color: var(--amber); }

/* ═══════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════ */
.faq-list { max-width: 700px; display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  border: 1px solid rgba(61, 90, 254, 0.08); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color var(--transition), background 0.3s;
}
.faq-item:hover { border-color: rgba(61, 90, 254, 0.2); background: rgba(17, 22, 42, 0.5); }
.faq-q {
  width: 100%; padding: 20px 24px; text-align: left; font-size: 15px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-arrow { font-size: 18px; color: var(--slate); transition: transform 0.4s var(--ease-spring), color 0.3s; }
.faq-item.open .faq-arrow { transform: rotate(45deg); color: var(--royal); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out-expo); }
.faq-item.open .faq-a { max-height: 200px; }
.faq-a p { padding: 0 24px 20px; font-size: 14px; color: var(--slate); line-height: 1.7; }

/* ═══════════════════════════════════════════════
   APPENDIX / IRT
   ═══════════════════════════════════════════════ */
.appendix { padding: 100px 0; }
.irt-block { max-width: 700px; margin: 0 auto; text-align: center; }
.irt-note-top { font-size: 14px; color: var(--slate); line-height: 1.8; margin-bottom: 24px; }
.irt-formula {
  font-size: clamp(1rem, 2vw, 1.3rem); color: var(--royal); margin-bottom: 32px;
  padding: 28px; background: var(--surface); border-radius: var(--radius);
  border: 1px solid rgba(61, 90, 254, 0.15);
  box-shadow: 0 0 40px rgba(61, 90, 254, 0.08);
  text-shadow: 0 0 16px rgba(61, 90, 254, 0.3);
  word-break: break-all;
}
.irt-formula sub { font-size: 0.75em; }
.irt-formula sup { font-size: 0.75em; }
.irt-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.irt-legend p { font-size: 13px; color: var(--slate); }
.irt-legend .mono { color: var(--violet); }

/* ═══════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════ */
.cta-section { text-align: center; padding: 120px 0 140px; }
.cta-illustration { margin-bottom: 32px; }
.cta-illustration img { max-width: 200px; margin: 0 auto; filter: drop-shadow(0 0 40px rgba(61, 90, 254, 0.2)); }
.cta-headline { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.cta-sub { font-size: 16px; color: var(--slate); max-width: 500px; margin: 0 auto 32px; line-height: 1.7; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.footer { border-top: 1px solid rgba(61, 90, 254, 0.08); padding: 60px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand p { font-size: 13px; color: var(--slate); margin-top: 12px; max-width: 260px; }
.footer-logo-img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  border-radius: 10px;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  filter: drop-shadow(0 0 10px rgba(61, 90, 254, 0.35));
  transition: transform 0.3s ease;
}
.footer-logo-img:hover {
  transform: scale(1.08) rotate(-2deg);
}
.footer-links h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate); margin-bottom: 16px; font-family: 'JetBrains Mono', monospace; }
.footer-links a { display: block; font-size: 14px; color: var(--slate); margin-bottom: 10px; transition: color var(--transition); }
.footer-links a:hover { color: var(--paper); }
/* Force telephone & contact number color to match email ID across all browsers & mobile detectors */
a[href^="tel:"],
a[href^="tel:"] *,
a[x-apple-data-detectors],
.contact-number-highlight,
.contact-number-highlight *,
.footer-links .contact-number-highlight,
.footer-links a[href^="tel:"] {
  color: #72dbff !important;
  -webkit-text-fill-color: #72dbff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  text-shadow: 0 0 12px rgba(114, 219, 255, 0.35) !important;
  transition: all 0.3s ease !important;
}
a[href^="tel:"]:hover,
.contact-number-highlight:hover,
.footer-links .contact-number-highlight:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 18px rgba(114, 219, 255, 0.8) !important;
  transform: translateX(4px);
}
.footer-links .email-visible, .footer-links .web-address-highlight {
  color: #72dbff !important;
  -webkit-text-fill-color: #72dbff !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  text-shadow: 0 0 12px rgba(114, 219, 255, 0.35) !important;
  transition: all 0.3s ease !important;
}
.footer-links .email-visible:hover, .footer-links .web-address-highlight:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateX(4px);
}
.footer-links .email-visible:hover, .footer-links .web-address-highlight:hover {
  color: #ffffff !important;
  transform: translateX(4px);
}
.footer-bottom {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}
.footer-bottom p {
  font-size: 13px;
  color: var(--slate);
  text-align: center;
  margin: 0 auto;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ═══════════════════════════════════════════════
   FOCUS & ACCESSIBILITY
   ═══════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 480px) {
  .section { padding: 80px 0; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ═══════════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed; bottom: 28px; right: 100px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4);
  transition: all 0.4s var(--ease-out-expo);
  cursor: none;
  animation: waPulseRing 3s ease-in-out infinite;
}
.whatsapp-float:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5);
}
.wa-tooltip {
  position: absolute; right: 68px; top: 50%; transform: translateY(-50%);
  background: var(--surface); color: var(--paper); font-size: 12px;
  padding: 6px 14px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
  border: 1px solid rgba(37, 211, 102, 0.2);
}
.whatsapp-float:hover .wa-tooltip { opacity: 1; }
.wa-pulse {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #25D366; opacity: 0;
  animation: waPulse 2.5s ease-out infinite;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes waPulseRing {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.3); }
  50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0); }
}
@media (max-width: 768px) {
  .whatsapp-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .wa-tooltip { display: none; }
}

/* ═══════════════════════════════════════════════════
   CHATBOT WIDGET
   ═══════════════════════════════════════════════════ */
.chatbot-widget {
  position: fixed; bottom: 28px; right: 28px; z-index: 9998;
}
.chatbot-toggle {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--royal), var(--violet));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 28px rgba(61, 90, 254, 0.4);
  transition: all 0.4s var(--ease-spring);
  cursor: none; position: relative;
}
.chatbot-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 36px rgba(61, 90, 254, 0.5);
}
.chatbot-toggle .chat-icon-close { display: none; }
.chatbot-widget.open .chatbot-toggle .chat-icon-open { display: none; }
.chatbot-widget.open .chatbot-toggle .chat-icon-close { display: block; }
.chatbot-badge {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber); color: var(--ink);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: badgePop 0.4s var(--ease-spring);
  box-shadow: 0 2px 8px rgba(232, 163, 61, 0.4);
}
.chatbot-badge.hidden { display: none; }
@keyframes badgePop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* Chat Panel */
.chatbot-panel {
  position: absolute; bottom: 72px; right: 0;
  width: 380px; height: 520px;
  background: var(--ink);
  border: 1px solid rgba(61, 90, 254, 0.15);
  border-radius: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(61, 90, 254, 0.08);
  transform: scale(0.8) translateY(20px);
  opacity: 0; pointer-events: none;
  transition: all 0.4s var(--ease-spring);
  transform-origin: bottom right;
}
.chatbot-widget.open .chatbot-panel {
  transform: scale(1) translateY(0);
  opacity: 1; pointer-events: all;
}

/* Chat Header */
.chatbot-header {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(61, 90, 254, 0.1), rgba(154, 108, 255, 0.08));
  border-bottom: 1px solid rgba(61, 90, 254, 0.1);
  display: flex; align-items: center; justify-content: space-between;
}
.chatbot-header-info { display: flex; align-items: center; gap: 12px; }
.chatbot-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(61, 90, 254, 0.2);
  overflow: hidden;
}
.chatbot-avatar-img {
  width: 100%; height: 100%; object-fit: cover;
}
.chatbot-name { display: block; font-size: 14px; font-weight: 600; }
.chatbot-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--slate);
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2ecc71; display: inline-block;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
}
.chatbot-minimize {
  padding: 4px; border-radius: 4px; color: var(--slate);
  transition: color 0.2s;
}
.chatbot-minimize:hover { color: var(--paper); }

/* Chat Messages */
.chatbot-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 90, 254, 0.2) transparent;
}
.chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.chat-bubble {
  padding: 12px 16px; border-radius: 14px;
  font-size: 13px; line-height: 1.6;
  animation: bubbleIn 0.3s var(--ease-out-expo);
}
.chat-msg.bot .chat-bubble {
  background: var(--surface);
  border: 1px solid rgba(61, 90, 254, 0.08);
  border-bottom-left-radius: 4px;
  color: var(--paper);
}
.chat-msg.user .chat-bubble {
  background: linear-gradient(135deg, var(--royal), var(--violet));
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-bubble p { margin-bottom: 4px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble strong { color: var(--royal); }
.chat-msg.user .chat-bubble strong { color: white; }
.chat-time { font-size: 10px; color: var(--slate); margin-top: 4px; padding: 0 4px; }
.chat-msg.user .chat-time { text-align: right; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Quick Replies */
.chat-quick-replies {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 4px;
  animation: bubbleIn 0.4s var(--ease-out-expo) 0.3s both;
}
.quick-reply {
  padding: 7px 14px; border-radius: 100px;
  font-size: 12px; color: var(--royal);
  border: 1px solid rgba(61, 90, 254, 0.2);
  background: rgba(61, 90, 254, 0.05);
  transition: all 0.2s; white-space: nowrap;
  cursor: none;
}
.quick-reply:hover {
  background: var(--royal); color: white;
  border-color: var(--royal);
  transform: translateY(-1px);
}

/* Typing Indicator */
.chatbot-typing {
  display: none; padding: 0 4px 8px;
  gap: 4px; align-items: center;
}
.chatbot-typing.active { display: flex; }
.chatbot-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate);
  animation: typingDot 1.4s ease-in-out infinite;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Chat Input */
.chatbot-input-area {
  padding: 12px 14px;
  border-top: 1px solid rgba(61, 90, 254, 0.1);
  background: var(--surface);
}
.chatbot-input-form { display: flex; gap: 8px; }
.chatbot-input {
  flex: 1; padding: 10px 16px; border-radius: 100px;
  background: var(--ink); border: 1px solid rgba(61, 90, 254, 0.12);
  color: var(--paper); font-size: 13px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color 0.3s;
  cursor: none;
}
.chatbot-input:focus { border-color: var(--royal); }
.chatbot-input::placeholder { color: var(--slate); }
.chatbot-send {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--royal), var(--violet));
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: none; flex-shrink: 0;
}
.chatbot-send:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(61, 90, 254, 0.4);
}

@media (max-width: 768px) {
  .chatbot-widget { bottom: 20px; right: 20px; }
  .chatbot-toggle { width: 54px; height: 54px; }
  .chatbot-panel { width: calc(100vw - 32px); height: 70vh; right: -12px; bottom: 66px; }
}

/* ═══════════════════════════════════════════════════
   FOOTER SOCIAL LINKS
   ═══════════════════════════════════════════════════ */
.footer-social {
  display: flex; gap: 10px; margin-top: 16px;
}
.footer-social-link {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(61, 90, 254, 0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate);
  transition: all 0.3s var(--ease-out-expo);
}
.footer-social-link:hover {
  color: var(--paper);
  border-color: var(--royal);
  background: rgba(61, 90, 254, 0.1);
  transform: translateY(-2px);
}
.footer-links a[href^="tel"] { color: var(--royal) !important; }

/* ═══════════════════════════════════════════════════
   2026 EXPERIENCE LAYER — luminous, compact, reactive
   ═══════════════════════════════════════════════════ */
:root {
  --ink: #10172b;
  --surface: rgba(25, 35, 67, .72);
  --surface-light: #25335c;
  --paper: #f7f8ff;
  --slate: #aeb9d5;
  --cyan: #43dcff;
  --line: rgba(139, 167, 255, .16);
}
body {
  background:
    radial-gradient(circle at 15% 0%, rgba(61,90,254,.18), transparent 32rem),
    radial-gradient(circle at 85% 22%, rgba(154, 108, 255, .14), transparent 34rem),
    linear-gradient(180deg, #111a33 0%, #151d36 46%, #10172b 100%);
}
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image: linear-gradient(rgba(138,165,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(138,165,255,.035) 1px,transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.container { max-width: 1240px; }
.section { padding: 88px 0; isolation:isolate; overflow:clip; }
.section::before {
  content:""; position:absolute; inset:10px 18px; z-index:-1; pointer-events:none;
  border:1px solid rgba(142,166,255,.07); border-radius:32px;
  background:linear-gradient(135deg,rgba(255,255,255,.028),rgba(61,90,254,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.section:nth-of-type(even)::before { background:linear-gradient(225deg,rgba(154, 108, 255, .055),rgba(255,255,255,.02)); }
.section::after {
  content:""; position:absolute; width:440px; height:440px; left:var(--spot-x,80%); top:var(--spot-y,30%);
  translate:-50% -50%; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(76,116,255,.09),transparent 67%); opacity:.8;
}
.section-heading { font-size:clamp(2rem,4.2vw,3.5rem); letter-spacing:-.045em; max-width:900px; }
.section-intro,.about-intro { color:#bbc5df; }
.eyebrow { color:#8fa7df; }
.eyebrow-line { box-shadow:0 0 14px var(--royal); }

/* Glass surfaces applied consistently across every content system */
.stat-card,.about-col,.transform-block,.eco-step,.arch-layer,.paradigm-card,.sec-item,.train-card,.sla-item,.roi-card,.roadmap-card,
.founder-pillar,.crisis-why,.about-contact,.faq-item,.irt-formula,.flip-front,.flip-back,.stab-panel {
  background:linear-gradient(145deg,rgba(34,47,86,.82),rgba(20,28,53,.76));
  border-color:var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 50px rgba(1,6,24,.16);
}
.glow-card,.transform-block,.roadmap-card,.dash-feature,.sec-item,.faq-item { will-change:transform; }
.glow-card:hover,.transform-block:hover,.roadmap-card:hover,.sec-item:hover {
  transform:translateY(-7px); border-color:rgba(154, 108, 255, .45); box-shadow:0 22px 55px rgba(3,8,28,.28),0 0 35px rgba(61,90,254,.08);
}
.section img[src*="images/"] { filter:drop-shadow(0 24px 45px rgba(0,0,0,.3)) saturate(1.1); }
.founder-illustration,.transform-illustration,.ecosystem-illustration,.security-illustration,.training-illustration,.cta-illustration {
  position:relative; border-radius:24px;
}
.founder-illustration::before,.transform-illustration::before,.ecosystem-illustration::before,.security-illustration::before,.training-illustration::before {
  content:""; position:absolute; inset:10% 5%; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(81,118,255,.26),transparent 68%); filter:blur(16px);
}

/* more visible floating symbols; JS uses translate property to preserve drift */
.float-icon { font-size:24px; opacity:.16; filter:grayscale(.15) drop-shadow(0 0 10px rgba(154, 108, 255, .6));
  padding:8px; border-radius:12px; background:rgba(74,100,190,.06); border:1px solid rgba(139,164,255,.08); }
.particle-canvas { opacity:.72; }
.cursor-glow { width:180px;height:180px;background:radial-gradient(circle,rgba(67,220,255,.12),rgba(61,90,254,.05) 38%,transparent 70%); }

/* Rich hero */
.hero { min-height:94vh; background:radial-gradient(circle at 72% 42%,rgba(75,111,255,.19),transparent 32rem); }
.hero::after { content:"AI · ADAPT · ACHIEVE"; position:absolute; right:-2vw; top:18%; font:700 clamp(4rem,11vw,10rem)/1 'Space Grotesk'; color:rgba(129,151,255,.025); writing-mode:vertical-rl; z-index:0; }
.hero-text { padding:32px 0; }
.hero-headline { text-wrap:balance; text-shadow:0 8px 45px rgba(0,0,0,.26); }
.hero-mascot { padding:24px; border-radius:40px; background:linear-gradient(145deg,rgba(154, 108, 255, .08),rgba(154, 108, 255, .03)); border:1px solid rgba(155,178,255,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.audience-strip { opacity:.58; }

/* Platform vision — animated orbital learning journey (100% ZOOM FIT) */
.vision-orbit { position:relative; min-height:440px; margin:6px auto 14px; max-width:880px; border-radius:28px; overflow:hidden;
  background:radial-gradient(circle at center,rgba(61,90,254,.17),rgba(24,34,66,.7) 45%,rgba(17,25,49,.82));
  border:1px solid rgba(131,157,255,.18); box-shadow:inset 0 1px rgba(255,255,255,.07),0 20px 60px rgba(2,6,25,.3); }
.vision-orbit::before { content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(129,157,255,.22) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,black,transparent 75%); }
.orbit-rings span { position:absolute; left:50%;top:50%; translate:-50% -50%; border:1px solid rgba(154, 108, 255, .14); border-radius:50%; animation:orbitBreathe 5s ease-in-out infinite; }
.orbit-rings span:nth-child(1){width:240px;height:240px}.orbit-rings span:nth-child(2){width:420px;height:310px;animation-delay:-1.2s}.orbit-rings span:nth-child(3){width:660px;height:420px;animation-delay:-2.4s}
@keyframes orbitBreathe{50%{scale:1.025;border-color:rgba(154, 108, 255, .3)}}
.stage-revolving-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 77.5%;
  height: 81%;
  border-radius: 50%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  z-index: 4;
  transition: transform 1.15s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -50%) rotate(0deg);
}
.stage-revolving-circle::after {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #56f2ff, #007aff);
  border: 1.5px solid #a8faff;
  box-shadow: 0 0 18px #00f0ff, 0 0 35px #007aff, inset 0 0 6px #ffffff;
}
.vision-core { position:absolute;left:50%;top:50%;translate:-50% -50%;width:174px;height:174px;box-sizing:border-box;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 12px;z-index:4;
  background:radial-gradient(circle at 40% 30%,#334c9e,#1b2851 65%);border:1.5px solid rgba(122,166,255,.65);box-shadow:0 0 55px rgba(61,90,254,.36),inset 0 0 25px rgba(154, 108, 255, .18); }
.core-icon{font-size:24px;line-height:1;color:var(--cyan);text-shadow:0 0 18px var(--cyan);animation:coreSpin 9s linear infinite;margin-bottom:5px}.vision-core strong{font-size:14.5px;line-height:1.25;color:#ffffff;display:block;margin:0 0 4px}.vision-core small{font-size:9.5px;line-height:1.3;color:#adc0eb;max-width:136px;display:block;margin:0 auto}.core-pulse{position:absolute;inset:-10px;border:1px solid rgba(67,220,255,.28);border-radius:50%;animation:corePulse 2.6s ease-out infinite}
@keyframes corePulse{to{scale:1.2;opacity:0}} @keyframes coreSpin{50%{rotate:180deg;scale:1.16}to{rotate:360deg}}
.vision-stage { position:absolute; width:130px; min-height:66px; padding:9px 11px; border-radius:13px; z-index:5;
  left:calc(50% + cos(calc(var(--i) * 51.43deg - 90deg))*38.5%);top:calc(50% + sin(calc(var(--i) * 51.43deg - 90deg))*40.5%);translate:-50% -50%;
  background:linear-gradient(145deg,rgba(47,65,119,.95),rgba(24,33,66,.95));border:1px solid rgba(127,154,255,.24);box-shadow:0 10px 22px rgba(0,0,0,.22);transition:.35s var(--ease-out-expo); }
.vision-stage:hover,.vision-stage.active{scale:1.09;border-color:var(--cyan);box-shadow:0 15px 35px rgba(0,0,0,.25),0 0 25px rgba(67,220,255,.16)}
.vision-stage span{font:600 8.5px 'JetBrains Mono';color:var(--cyan);display:block}.vision-stage strong{font-size:11.5px;display:block;margin:2px 0;line-height:1.2}.vision-stage small{font-size:8.5px;color:var(--slate);line-height:1.3;display:block}
.orbit-flow{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.orbit-flow path{fill:none;stroke:rgba(154, 108, 255, .38);stroke-width:1.5;stroke-dasharray:5 9}.flow-dot{fill:var(--cyan);filter:drop-shadow(0 0 8px var(--cyan))}
.vision-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:880px;margin:0 auto}.vision-proof span{padding:11px;text-align:center;border:1px solid var(--line);background:rgba(29,41,78,.65);border-radius:12px;color:var(--slate);font-size:11px}.vision-proof b{color:var(--paper);font-size:13.5px;margin-right:4px}

/* Contact field is deliberately high-contrast and always visible */
.demo-form { max-width:660px;margin:30px auto 22px;text-align:left;padding:10px;border-radius:20px;background:rgba(25,35,68,.82);border:1px solid rgba(136,164,255,.24);box-shadow:0 20px 55px rgba(0,0,0,.22); }
.demo-form label{display:block;font:500 11px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.12em;color:#adc0f4;padding:4px 10px 8px}
.demo-form-row{display:flex;gap:10px}.demo-form input{flex:1;min-width:0;border:1px solid rgba(157,179,255,.3);border-radius:999px;background:#f5f7ff;color:#15203d;padding:15px 20px;font:500 15px 'Inter';outline:none;cursor:text;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.demo-form input::placeholder{color:#13a0e7}.demo-form input:focus{border-color:#9a6cff;box-shadow:0 0 0 4px rgba(154, 108, 255, .18)}
.form-status{font-size:11px;color:var(--slate);padding:9px 10px 2px}.form-status.success{color:#70edb0}.email-visible{color:#8adfff!important;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

.nav.condensed { background:rgba(15,23,45,.82); }
.chatbot-panel { background:#121b34; }
.chatbot-input { background:#f5f7ff;color:#14203e;cursor:text; }
.chatbot-input::placeholder { color:#13a0e7; }

@media(max-width:900px){.section{padding:72px 0}.vision-orbit{min-height:auto;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.vision-core{position:relative;left:auto;top:auto;translate:0;width:auto;height:auto;border-radius:20px;grid-column:1/-1;min-height:150px}.vision-stage{position:relative;left:auto!important;top:auto!important;translate:0;width:auto}.orbit-flow,.orbit-rings{display:none}.vision-proof{grid-template-columns:1fr}}
@media(max-width:600px){.section{padding:58px 0}.section::before{inset:6px;border-radius:22px}.vision-orbit{grid-template-columns:1fr}.demo-form-row{flex-direction:column}.demo-form .btn{width:100%}.hero{min-height:auto;padding:110px 0 90px}.hero-scroll-indicator{display:none}}

/* ═══════════════════════════════════════════════════
   REFERENCE-INSPIRED HERO — deep space, neon learning
   ═══════════════════════════════════════════════════ */
.reference-nav { padding:12px 0; }
.reference-nav .nav-inner { display:flex;align-items:center;justify-content:space-between;max-width:1380px;margin:0 auto;padding:0 28px; }
.reference-nav .nav-logo { display:flex; align-items:center; gap:14px; text-decoration:none; }
.nav-logo-tile { width:56px;height:56px;display:flex;align-items:center;justify-content:center;padding:4px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(67,226,245,.85);border-radius:14px;box-shadow:0 0 22px rgba(67,226,245,.65),inset 0 0 16px rgba(255,255,255,.9);overflow:hidden;flex-shrink:0;transition:all .35s ease; }
.nav-logo:hover .nav-logo-tile { transform:scale(1.06) rotate(-2deg);border-color:#00f0ff;box-shadow:0 0 28px rgba(67,226,245,.85),0 6px 16px rgba(0,0,0,.4); }
.reference-nav .nav-logo-img { width:100%;height:100%;border-radius:0;filter:none;object-fit:contain;transform:none!important; }
.header-brand-name { display:flex; align-items:center; gap:7px; font-family:'Space Grotesk',sans-serif; font-size:clamp(1.4rem,2.3vw,1.8rem); font-weight:700; letter-spacing:-.02em; line-height:1; }
.header-brand-name b { color:#ffffff; font-weight:700; }
.header-brand-name span { background:linear-gradient(90deg,#43e2f5 0%,#5578ff 36%,#9a6cff 68%,#f28bc8 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase; }
@media (max-width: 650px) {
  .header-brand-name { font-size: 19px; }
}

/* Right center navigation with dropdown */
.right-center-nav { display:flex;align-items:center;justify-content:flex-end;gap:clamp(28px,3.5vw,46px);margin-left:auto;margin-right:clamp(16px,3vw,55px); }
.nav-item-link { color:#d8dbe8;font-weight:500;font-size:14px;text-decoration:none;transition:color .3s ease; }
.nav-item-link:hover { color:#ffffff; }
.nav-dropdown { position:relative;display:inline-block; }
.nav-dropdown-toggle { display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;color:#d8dbe8;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;padding:8px 0;transition:color .3s ease; }
.nav-dropdown-toggle:hover,.nav-dropdown.open .nav-dropdown-toggle { color:#ffffff; }
.dropdown-arrow { transition:transform .3s ease; }
.nav-dropdown.open .dropdown-arrow,.nav-dropdown:hover .dropdown-arrow { transform:rotate(180deg);color:#43e2f5; }
.nav-dropdown-menu { position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(12px) scale(.96);width:195px;background:linear-gradient(150deg,rgba(18,28,58,.96),rgba(9,15,34,.97));border:1.5px solid rgba(85,221,255,.35);border-radius:16px;padding:8px;box-shadow:0 25px 65px rgba(0,0,0,.65),0 0 35px rgba(67,226,245,.15);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.16,1,.3,1);z-index:1000;display:flex;flex-direction:column;gap:4px; }
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu { opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1); }
.dropdown-item { display:block;padding:10px 14px;border-radius:10px;color:#d8dbe8;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;text-decoration:none;transition:all .25s ease;border:1px solid transparent; }
.dropdown-item:hover { background:rgba(85,221,255,.1);border-color:rgba(85,221,255,.35);color:#ffffff;transform:translateX(4px); }
@media(max-width:900px) {
  .right-center-nav { margin-right:0; }
  .nav-dropdown-menu { position:relative;top:auto;right:auto;width:100%;box-shadow:none;background:rgba(255,255,255,.03);border:1px solid rgba(85,221,255,.15);margin-top:8px;display:none; }
  .nav-dropdown.open .nav-dropdown-menu { display:flex; }
}

.reference-nav .nav-cta { display:inline-flex;align-items:center;justify-content:center;color:white;border:0;padding:13px 27px;background:linear-gradient(115deg,#4c6cff,#9a6cff);box-shadow:0 0 28px rgba(154, 108, 255, .36); }
.reference-nav .nav-cta::before { background:linear-gradient(115deg,#21c9ff,#9a6cff); }

.reference-hero { min-height:100vh;padding:105px 0 65px;background:
  radial-gradient(circle at 63% 52%,rgba(2,213,255,.12),transparent 24%),
  radial-gradient(circle at 78% 50%,rgba(255,108,53,.12),transparent 25%),
  radial-gradient(circle at 30% 55%,rgba(26,85,180,.12),transparent 40%),
  linear-gradient(100deg,#091226 0%,#070d1d 58%,#0d0917 100%); }
.reference-hero::after { display:none; }
.reference-hero-content { max-width:1360px;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center; }
.reference-hero .hero-text { padding:20px 0 60px; }
.hero-badge { display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid rgba(137,156,218,.25);border-radius:999px;color:#cdd5eb;font-size:13px;background:rgba(16,29,56,.5);box-shadow:inset 0 1px rgba(255,255,255,.04);margin-bottom:28px; }
.hero-badge span { color:#42e3ff;text-shadow:0 0 12px #42e3ff; }
.reference-headline { font-size:clamp(3.2rem,5.3vw,5.5rem);line-height:1.03;letter-spacing:-.055em;margin-bottom:27px;text-wrap:balance; }
.reference-headline span { background:linear-gradient(100deg,#26d9f2 0%,#4774ff 48%,#9a6cff 100%);background-size:160%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:headlineFlow 5s ease-in-out infinite alternate; }
@keyframes headlineFlow { to { background-position:100% 50%; } }
.reference-sub { max-width:650px;color:#b6bed1;font-size:17px;line-height:1.75;margin-bottom:30px; }
.reference-actions { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.explore-btn { background:linear-gradient(110deg,#426fff,#9a6cff);color:white;box-shadow:0 10px 35px rgba(154, 108, 255, .35); }
.reference-ghost,.demo-btn { border:1px solid rgba(139,157,210,.25);background:rgba(10,18,38,.55);color:#f1f3fa; }
.reference-ghost:hover { border-color:#43d9ff;background:rgba(33,166,220,.08); }
.demo-btn { border-color:rgba(255,158,68,.4);box-shadow:inset 0 0 20px rgba(255,125,43,.04); }
.demo-btn:hover { border-color:#ff9e44;background:rgba(255,130,50,.08); }
.play-dot { color:#44dff4;font-size:18px;margin-right:9px; }.video-dot { color:#ffa143;margin-right:9px; }
.hero-metrics { display:flex;gap:48px;margin-top:48px; }
.hero-metrics div { display:flex;flex-direction:column; }
.hero-metrics strong { font:700 30px 'Space Grotesk';background:linear-gradient(100deg,#45dcff,#9a6cff);-webkit-background-clip:text;color:transparent; }
.hero-metrics span { color:#919bb3;font-size:11px;margin-top:1px; }

.reference-visual { min-height:570px;position:relative;display:grid;place-items:center;perspective:1000px; }
.visual-halo { position:absolute;width:620px;height:500px;border-radius:50%;background:conic-gradient(from 90deg,rgba(33,220,255,.13),rgba(255,90,120,.16),rgba(76,111,255,.13),rgba(33,220,255,.13));filter:blur(55px);animation:haloRotate 12s linear infinite; }
@keyframes haloRotate { to { rotate:360deg; } }
.logo-showcase { position:relative;width:min(420px,82%);aspect-ratio:1/.92;border-radius:34px;background:linear-gradient(145deg,#fff,#eef0fb);display:grid;place-items:center;box-shadow:0 35px 90px rgba(0,0,0,.35),0 0 65px rgba(255,255,255,.12);overflow:hidden;z-index:3; }
.logo-showcase::after { content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.8) 48%,transparent 62%);translate:-120% 0;animation:cardSheen 6s ease-in-out infinite; }
@keyframes cardSheen { 55%,100%{translate:120% 0} }
.logo-showcase img { width:86%;filter:none!important; }
.mascot-mini { position:absolute;left:3%;top:4%;width:180px;z-index:5;filter:drop-shadow(0 15px 25px rgba(38,176,255,.25));animation:miniFloat 5s ease-in-out infinite; }
.mascot-mini img { width:100%;filter:none!important; }
@keyframes miniFloat { 50%{translate:0 -13px;rotate:2deg} }
.visual-book { position:absolute;left:6%;bottom:9%;font-size:52px;z-index:5;filter:drop-shadow(0 0 16px rgba(42,205,255,.35));animation:miniFloat 6s -2s ease-in-out infinite; }
.visual-book span { display:block;font-size:30px;color:#28ddff;text-align:center;margin-top:-15px; }
.visual-brain { position:absolute;right:0;bottom:6%;width:118px;height:118px;border-radius:44% 56% 48% 52%;display:grid;place-items:center;font-size:75px;color:#4f61ff;background:radial-gradient(circle at 35% 30%,#4ee4ff,#9a6cff 55%,#9a6cff);box-shadow:0 0 40px rgba(71,90,255,.5);z-index:5;animation:brainMorph 7s ease-in-out infinite; }
@keyframes brainMorph { 50%{border-radius:58% 42% 60% 40%;translate:0 -10px;rotate:-4deg} }
.hero-shape { position:absolute;z-index:2;filter:drop-shadow(0 0 25px currentColor); }
.shape-blue { left:2%;top:20%;width:92px;height:100px;border-radius:28px 55px 44px 30px;background:linear-gradient(145deg,#3f65ff,#1de0ef);color:#30bfff;rotate:-10deg; }
.shape-coral { right:2.5%;top:28%;width:70px;height:80px;border-radius:25px 35px 26px 35px;background:linear-gradient(145deg,#ff833d,#ee42da);color:#f85dad;rotate:15deg; }
.hero-glyphs span { position:absolute;color:rgba(71,135,255,.27);font-size:44px;z-index:1;text-shadow:0 0 20px currentColor;animation:glyphFloat 8s ease-in-out infinite; }
.hero-glyphs span:nth-child(1){left:13%;top:18%}.hero-glyphs span:nth-child(2){left:27%;bottom:18%;animation-delay:-1s}.hero-glyphs span:nth-child(3){right:32%;top:13%;animation-delay:-2s}.hero-glyphs span:nth-child(4){left:34%;top:42%;color:rgba(154, 108, 255, .22);animation-delay:-3s}.hero-glyphs span:nth-child(5){right:8%;bottom:18%;color:rgba(58,224,255,.22);animation-delay:-4s}.hero-glyphs span:nth-child(6){left:5%;bottom:9%;color:rgba(255,121,53,.2);animation-delay:-5s}
@keyframes glyphFloat { 50%{translate:0 -18px;rotate:8deg;opacity:.75} }

@media(max-width:1000px){.reference-hero-content{grid-template-columns:1fr}.reference-visual{min-height:480px;order:-1}.mascot-mini{left:10%}.reference-hero .hero-text{text-align:center;padding-bottom:50px}.hero-badge{margin-inline:auto}.reference-sub{margin-inline:auto}.reference-actions{justify-content:center}}
@media(max-width:650px){.reference-hero{padding-top:92px}.header-brand-name{font-size:19px}.reference-headline{font-size:clamp(2.5rem,12vw,3.6rem)}.reference-sub{font-size:15px}.reference-visual{min-height:350px}.logo-showcase{width:75%;border-radius:24px}.mascot-mini{width:112px;left:0}.visual-brain{width:75px;height:75px;font-size:45px;right:2%}.visual-book{font-size:34px}.reference-actions .btn{width:100%}.shape-blue,.shape-coral{scale:.65}}

/* ═══════════════════════════════════════════════════
   SITE-WIDE DEEP-SPACE VISUAL LANGUAGE
   ═══════════════════════════════════════════════════ */
.section:not(.reference-hero) {
  background:
    radial-gradient(circle at var(--spot-x,82%) var(--spot-y,22%),rgba(54,215,255,.085),transparent 23rem),
    radial-gradient(circle at 8% 88%,rgba(154, 108, 255, .075),transparent 26rem);
}
.section:not(.reference-hero)::before {
  background:linear-gradient(145deg,rgba(33,47,91,.64),rgba(12,19,41,.54));
  border-color:rgba(122,151,255,.13);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 30px 90px rgba(1,5,22,.16);
}
.section-heading,.cta-headline {
  font-size:clamp(2.25rem,4.5vw,4rem);letter-spacing:-.052em;
  background:linear-gradient(105deg,#f8faff 0%,#f8faff 42%,#55dcff 64%,#9a6cff 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 35px rgba(28,61,150,.12));
}
.section-heading .kinetic { background-image:linear-gradient(90deg,#3de5f4,#5574ff,#9a6cff); }
.section-atmosphere { position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden; }
.section-atmosphere .ambient-orb { position:absolute;width:210px;height:210px;border-radius:50%;filter:blur(58px);opacity:.12;background:var(--orb-color,#4a70ff);left:var(--orb-x);top:var(--orb-y);animation:ambientRoam var(--orb-speed) ease-in-out infinite alternate; }
.section-atmosphere .ambient-symbol { position:absolute;left:var(--symbol-x);top:var(--symbol-y);font:400 var(--symbol-size) 'Space Grotesk';color:rgba(154, 108, 255, .15);text-shadow:0 0 22px currentColor;animation:ambientSymbol var(--symbol-speed) ease-in-out infinite alternate; }
@keyframes ambientRoam { to{translate:45px -35px;scale:1.25;opacity:.2} }
@keyframes ambientSymbol { to{translate:12px -22px;rotate:13deg;color:rgba(71,218,255,.22)} }

/* Universal luminous surfaces, sheen and cursor-reactive cards */
.stat-card,.about-col,.transform-block,.eco-step,.arch-layer,.flip-front,.flip-back,.paradigm-card,.stab-panel,.dash-feature,.sec-item,.train-card,.sla-item,.roi-card,.roadmap-card,.pricing-card,.faq-item,.irt-formula,.demo-form,.about-contact,.crisis-why,.founder-pillar {
  position:relative;overflow:hidden;
}
.stat-card::after,.about-col::after,.transform-block::after,.eco-step::before,.arch-layer::after,.paradigm-card::after,.stab-panel::after,.dash-feature::after,.sec-item::after,.train-card::after,.sla-item::after,.roi-card::after,.roadmap-card::after,.faq-item::after,.founder-pillar::after {
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.09) 45%,transparent 62%);
  translate:-110% 0;transition:translate .85s var(--ease-out-expo);
}
.stat-card:hover::after,.about-col:hover::after,.transform-block:hover::after,.eco-step:hover::before,.arch-layer:hover::after,.paradigm-card:hover::after,.stab-panel:hover::after,.dash-feature:hover::after,.sec-item:hover::after,.train-card:hover::after,.sla-item:hover::after,.roi-card:hover::after,.roadmap-card:hover::after,.faq-item:hover::after,.founder-pillar:hover::after { translate:110% 0; }
.section .btn-primary,.section .filter-btn.active,.section .stab-btn.active { background:linear-gradient(110deg,#376fff,#9a6cff);box-shadow:0 10px 32px rgba(83,77,255,.28),0 0 30px rgba(154, 108, 255, .08); }
.section .btn-primary:hover { box-shadow:0 15px 45px rgba(72,112,255,.42),0 0 45px rgba(154, 108, 255, .18); }
.section .eyebrow { padding:7px 12px;width:max-content;border:1px solid rgba(154, 108, 255, .14);border-radius:999px;background:rgba(20,31,61,.5);color:#a8bced; }

/* Implementation & onboarding — interactive mission-control rollout */
.timeline::before { background:linear-gradient(145deg,rgba(24,42,85,.8),rgba(15,19,44,.78))!important; }
.deployment-experience { position:relative;display:grid;grid-template-columns:.78fr 1.22fr;gap:34px;align-items:center;padding:24px;border:1px solid rgba(120,151,255,.16);border-radius:30px;background:linear-gradient(135deg,rgba(18,30,63,.82),rgba(10,16,37,.75));box-shadow:inset 0 1px rgba(255,255,255,.05),0 35px 90px rgba(0,0,0,.25);overflow:hidden; }
.deployment-aurora { position:absolute;inset:-45%;background:conic-gradient(from 90deg,transparent,rgba(46,211,255,.11),transparent 35%,rgba(154, 108, 255, .12),transparent 65%,rgba(255,136,42,.08),transparent);filter:blur(45px);animation:deployAurora 18s linear infinite; }
@keyframes deployAurora{to{rotate:360deg}}
.deployment-console { position:relative;z-index:2;min-height:520px;border-radius:24px;background:linear-gradient(160deg,rgba(34,50,96,.94),rgba(14,23,52,.94));border:1px solid rgba(128,158,255,.22);box-shadow:0 25px 65px rgba(0,0,0,.3),inset 0 0 70px rgba(66,98,210,.08);overflow:hidden; }
.console-top { height:48px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(125,151,238,.13);font-size:9px;letter-spacing:.08em;color:#91a5d6; }
.console-top>span { display:flex;gap:5px }.console-top i{display:block;width:7px;height:7px;border-radius:50%;background:#ff5b6d}.console-top i:nth-child(2){background:#ffc247}.console-top i:nth-child(3){background:#41dda0}.console-top em{font-style:normal;color:#54edb1;padding:4px 8px;border-radius:999px;background:rgba(39,222,145,.08);border:1px solid rgba(57,230,155,.2)}
.deployment-core { position:absolute;left:50%;top:47%;translate:-50% -50%;width:275px;height:275px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(50,76,151,.74),rgba(18,30,67,.88) 60%,transparent 61%); }
.deploy-ring { position:absolute;border-radius:50%;border:1px solid rgba(83,218,255,.25) }.ring-a{inset:-18px;border-style:dashed;animation:ringSpin 14s linear infinite}.ring-b{inset:-44px;border-color:rgba(154, 108, 255, .2);border-style:dotted;animation:ringSpin 20s linear reverse infinite}@keyframes ringSpin{to{rotate:360deg}}
.deploy-logo { width:88px;height:88px;border-radius:22px;background:#f7f8ff;display:grid;place-items:center;box-shadow:0 0 35px rgba(154, 108, 255, .4);margin-bottom:14px;overflow:hidden;animation:deployFloat 4s ease-in-out infinite }.deploy-logo img{width:82px;filter:none!important}@keyframes deployFloat{50%{translate:0 -7px}}
.deployment-core strong{font-size:22px}.deployment-core small{font-size:10px;color:#9eadd0;margin-top:5px}.deploy-readouts{position:absolute;left:15px;right:15px;bottom:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.deploy-readouts span{padding:9px 5px;text-align:center;border:1px solid rgba(126,153,239,.13);background:rgba(10,18,41,.55);border-radius:10px;color:#8f9cba;font-size:8px}.deploy-readouts b{display:block;color:#55ddff;font-size:14px}
.deployment-phases { position:relative;z-index:2;display:flex;flex-direction:column;gap:10px; }
.deploy-phase { min-height:90px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:15px;padding:15px 16px;border:1px solid rgba(120,150,243,.14);border-radius:17px;background:linear-gradient(120deg,rgba(37,51,96,.88),rgba(18,27,58,.86));box-shadow:0 12px 30px rgba(0,0,0,.14);opacity:0;transform:translateX(35px);transition:.65s var(--ease-out-expo); }
.deployment-experience.in-view .deploy-phase{opacity:1;transform:translateX(0);transition-delay:calc(var(--phase) * 120ms)}
.deploy-phase:hover{translate:-8px 0;border-color:rgba(75,221,255,.42);box-shadow:0 18px 40px rgba(0,0,0,.24),0 0 28px rgba(67,188,255,.08)}
.phase-orb{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:600 12px 'JetBrains Mono';color:#58e4ff;background:linear-gradient(145deg,rgba(54,112,255,.26),rgba(154, 108, 255, .18));border:1px solid rgba(103,157,255,.28);box-shadow:0 0 20px rgba(72,127,255,.12)}
.deploy-phase .mono{font-size:8px;letter-spacing:.1em;color:#8698c4}.deploy-phase h3{font-size:16px;margin:2px 0}.deploy-phase p{font-size:10px;color:#99a6c5;line-height:1.45}.phase-state{font:500 8px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.08em;color:#a6b2ce;padding:6px 9px;border-radius:999px;border:1px solid rgba(141,160,214,.17)}.phase-state.live{color:#57ecad;border-color:rgba(64,229,157,.35);box-shadow:0 0 17px rgba(64,229,157,.12)}

@media(max-width:900px){.deployment-experience{grid-template-columns:1fr}.deployment-console{min-height:440px}.deployment-core{width:230px;height:230px}.deploy-readouts{position:absolute}.section-atmosphere .ambient-symbol:nth-of-type(n+5){display:none}}
@media(max-width:600px){.deployment-experience{padding:12px;border-radius:22px}.deployment-console{min-height:390px}.deploy-readouts{grid-template-columns:1fr 1fr 1fr}.deploy-readouts span{font-size:7px}.deploy-phase{grid-template-columns:42px 1fr;padding:13px}.deploy-phase .phase-state{display:none}.deployment-core{width:205px;height:205px}.ring-b{inset:-25px}.section-heading,.cta-headline{font-size:clamp(2rem,10vw,3rem)}}

/* ═══════════════════════════════════════════════════
   ALIGNMENT, TRANSPARENCY & INTERACTION REFINEMENT
   ═══════════════════════════════════════════════════ */
/* Continuous transparent canvas — sections no longer look like opaque slabs */
.section:not(.reference-hero) { background:transparent!important; }
.section:not(.reference-hero)::before {
  background:linear-gradient(145deg,rgba(30,45,86,.16),rgba(12,19,42,.08))!important;
  border-color:rgba(124,151,236,.08)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
  backdrop-filter:none!important;
}
.timeline::before { background:linear-gradient(145deg,rgba(32,50,95,.14),rgba(15,22,48,.08))!important; }
.stat-card,.about-col,.transform-block,.eco-step,.arch-layer,.paradigm-card,.sec-item,.train-card,.sla-item,.roi-card,.roadmap-card,
.founder-pillar,.crisis-why,.about-contact,.faq-item,.irt-formula,.flip-front,.flip-back,.stab-panel,.dash-feature {
  background:linear-gradient(145deg,rgba(34,48,89,.46),rgba(17,25,52,.3))!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* Deployment alignment: true two-column control center */
.deployment-experience { grid-template-columns:minmax(330px,.82fr) minmax(430px,1.18fr);align-items:stretch; }
.deployment-console { width:100%;height:100%;min-height:540px; }
.deployment-phases { width:100%;height:100%;justify-content:center;gap:12px; }
.deploy-phase { width:100%;min-height:94px; }
@media(max-width:1050px){.deployment-experience{grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr)}}
@media(max-width:820px){.deployment-experience{grid-template-columns:1fr}.deployment-console{min-height:450px}.deployment-phases{padding-top:4px}}

/* Single Clickable Card for Enterprise Pricing */
.pricing-single-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 15px 0 25px;
}
.single-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 48px 40px;
  border-radius: 28px;
  text-decoration: none;
  color: white;
  background: linear-gradient(150deg, rgba(37, 52, 98, 0.75), rgba(16, 24, 53, 0.58));
  border: 1px solid rgba(122, 151, 245, 0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.08);
  transition: all 0.45s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  overflow: hidden;
  cursor: pointer;
}
.single-pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(84, 214, 255, 0.65);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.48), 0 0 45px rgba(69, 113, 255, 0.25);
}
.single-pricing-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(85, 221, 255, 0.24), rgba(61, 90, 254, 0.1));
  border: 1px solid rgba(85, 221, 255, 0.4);
  color: #55ddff;
  margin-bottom: 24px;
  transition: transform 0.4s ease;
}
.single-pricing-card:hover .single-pricing-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 0 28px rgba(85, 221, 255, 0.45);
}
.single-pricing-card h3 {
  display: block;
  width: 100%;
  font-size: clamp(1.6rem, 3.3vw, 2.3rem);
  font-weight: 700;
  margin: 14px 0 18px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  text-shadow: 0 2px 16px rgba(136, 212, 255, 0.45);
  line-height: 1.35;
  white-space: normal;
  word-wrap: break-word;
}
.single-pricing-card .tier-desc {
  font-size: 15px;
  color: #aab6d1;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 32px;
}
.single-pricing-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(105deg, #3d6dff, #9a6cff);
  color: white;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(61, 109, 255, 0.35);
  transition: all 0.35s ease;
}
.single-pricing-card:hover .single-pricing-cta {
  background: linear-gradient(105deg, #517fff, #9a6cff);
  box-shadow: 0 16px 40px rgba(61, 109, 255, 0.5);
  transform: translateY(-2px);
}
.single-pricing-cta .cta-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}
.single-pricing-card:hover .single-pricing-cta .cta-arrow {
  transform: translateX(6px);
}
@media (max-width: 650px) {
  .single-pricing-card {
    padding: 36px 24px;
  }
}

/* Text responds to the cursor without sacrificing readability */
.text-motion { --text-rx:0deg;--text-ry:0deg;--text-x:0px;--text-y:0px;transform:perspective(850px) translate3d(var(--text-x),var(--text-y),0) rotateX(var(--text-rx)) rotateY(var(--text-ry));transform-origin:center;transition:transform .22s ease-out,filter .22s;will-change:transform; }
.text-motion:hover { filter:drop-shadow(0 8px 20px rgba(67,190,255,.12)); }
.section-heading.text-motion,.cta-headline.text-motion { background-size:180% 100%;background-position:var(--shine-x,50%) center;transition:transform .22s ease-out,background-position .18s ease-out,filter .22s; }
@media(prefers-reduced-motion:reduce),(pointer:coarse){.text-motion{transform:none!important}}

/* ═══════════════════════════════════════════════════
   MODULE CARD VISIBILITY + TRUE TRANSPARENT SECTIONS
   ═══════════════════════════════════════════════════ */
/* One uninterrupted deep-space canvas, matching the transparent hero treatment */
body {
  background:
    radial-gradient(circle at 12% 18%,rgba(24,99,184,.13),transparent 35rem),
    radial-gradient(circle at 86% 42%,rgba(16, 137, 198, .1),transparent 38rem),
    linear-gradient(120deg,#091329 0%,#080f20 55%,#100b1b 100%) fixed!important;
}
.section:not(.reference-hero),.section:nth-of-type(even),.section:nth-of-type(odd) { background:transparent!important; }
.section:not(.reference-hero)::before,.section::before { display:none!important;content:none!important; }
.section:not(.reference-hero)::after { opacity:.42; }

/* Module cards no longer flip or clip halfway: title and description stay fully visible */
.module-grid { grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:16px;align-items:stretch; }
.module-grid .flip-card {
  height:auto;min-height:218px;perspective:none;position:relative;overflow:visible;border:1px solid rgba(154, 108, 255, .17);border-radius:19px;
  background:linear-gradient(145deg,rgba(35,50,93,.5),rgba(14,23,51,.34));backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  box-shadow:0 18px 45px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.045);transition:transform .4s var(--ease-out-expo),border-color .3s,box-shadow .4s;
}
.module-grid .flip-card:hover { transform:translateY(-7px);border-color:rgba(77,215,255,.4);box-shadow:0 26px 60px rgba(0,0,0,.24),0 0 32px rgba(64,134,255,.09); }
.module-grid .flip-card-inner { position:relative;width:100%;height:100%;display:flex;flex-direction:column;transform:none!important;transform-style:flat;transition:none;background:transparent;overflow:hidden;border-radius:inherit; }
.module-grid .flip-front,.module-grid .flip-back {
  position:relative;inset:auto;width:100%;height:auto;backface-visibility:visible;transform:none!important;border:0!important;background:transparent!important;box-shadow:none!important;
  align-items:flex-start;text-align:left;justify-content:flex-start;
}
.module-grid .flip-front { flex:0 0 auto;min-height:92px;padding:23px 22px 10px;display:grid;grid-template-columns:44px 1fr;gap:13px;align-items:center; }
.module-grid .flip-back { flex:1;padding:5px 22px 23px;display:block; }
.module-grid .module-icon { width:44px;height:44px;margin:0;border-radius:13px;display:grid;place-items:center;font-size:22px;background:linear-gradient(145deg,rgba(63,112,255,.23),rgba(154, 108, 255, .16));border:1px solid rgba(112,151,255,.22);filter:drop-shadow(0 0 12px rgba(80,130,255,.12)); }
.module-grid .module-name { color:#f3f6ff;font-size:14px;font-weight:600;line-height:1.35; }
.module-grid .flip-back p { color:#aab6d0;font-size:12px;line-height:1.7; }
.module-grid .flip-card-inner::before { content:"";position:absolute;width:180px;height:180px;right:-85px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(75,112,255,.17),transparent 70%);pointer-events:none; }
.module-grid .flip-card-inner::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07) 47%,transparent 62%);translate:-120% 0;transition:translate .8s var(--ease-out-expo); }
.module-grid .flip-card:hover .flip-card-inner::after { translate:120% 0; }
.module-grid .flip-card.hidden { display:none; }

/* Filters float directly over the transparent canvas */
.module-filters { padding:5px 0 4px; }
.module-filters .filter-btn { background:rgba(15,25,54,.32);backdrop-filter:blur(8px); }
.module-filters .filter-btn.active { background:linear-gradient(105deg,#3d70ff,#9a6cff); }

/* Keep major feature visualizations translucent rather than opaque */
.deployment-experience,.vision-orbit,.chatbot-panel {
  background:linear-gradient(145deg,rgba(22,35,73,.62),rgba(12,18,42,.48))!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
@media(max-width:720px){.module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.module-grid .flip-front{grid-template-columns:38px 1fr;padding:18px 16px 8px}.module-grid .module-icon{width:38px;height:38px}.module-grid .flip-back{padding:4px 16px 18px}.module-grid .flip-card{min-height:230px}}
@media(max-width:480px){.module-grid{grid-template-columns:1fr}.module-grid .flip-card{min-height:190px}}

/* ═══════════════════════════════════════════════════
   HERO — THREE SUPPLIED LEARNING VISUALS
   ═══════════════════════════════════════════════════ */
.hero-float-image { position:absolute;z-index:6;pointer-events:none;will-change:transform; }
.hero-float-image img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))!important; }
.hero-robot { width:190px;height:190px;left:-5%;top:1%;animation:heroAssetFloat 5.3s ease-in-out infinite; }
.hero-brain { width:145px;height:145px;right:-3%;bottom:0;animation:heroAssetFloat 6.4s -2s ease-in-out infinite; }
.hero-books { width:130px;height:130px;left:0;bottom:2%;animation:heroAssetFloat 5.8s -3.4s ease-in-out infinite; }
@keyframes heroAssetFloat { 50%{translate:0 -14px;rotate:2.5deg;scale:1.025} }
.hero-robot::before,.hero-brain::before,.hero-books::before { content:"";position:absolute;inset:20%;z-index:-1;border-radius:50%;background:rgba(43,213,255,.22);filter:blur(25px); }
.hero-brain::before{background:rgba(154, 108, 255, .3)}.hero-books::before{background:rgba(37,220,255,.22)}
@media(max-width:1000px){.hero-robot{left:5%}.hero-books{left:9%}.hero-brain{right:7%}}
@media(max-width:650px){.hero-robot{width:105px;height:105px;left:-1%;top:6%}.hero-books{width:82px;height:82px;left:2%;bottom:4%}.hero-brain{width:85px;height:85px;right:0;bottom:2%}}

/* ═══════════════════════════════════════════════════
   STAKEHOLDER VALUE — INTERACTIVE INTELLIGENCE MATRIX
   ═══════════════════════════════════════════════════ */
.stakeholder-experience { position:relative;display:grid;grid-template-columns:330px 1fr;gap:18px;min-height:535px;padding:18px;border:1px solid rgba(154, 108, 255, .16);border-radius:28px;background:linear-gradient(140deg,rgba(29,45,87,.43),rgba(12,20,45,.24));backdrop-filter:blur(12px);box-shadow:0 30px 80px rgba(0,0,0,.18);overflow:hidden; }
.stakeholder-experience::before { content:"";position:absolute;width:520px;height:520px;right:-180px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(154, 108, 255, .18),transparent 68%);pointer-events:none; }
.stakeholder-orbit i { position:absolute;right:10%;top:50%;translate:0 -50%;border:1px solid rgba(84,131,255,.1);border-radius:50%;animation:stakeOrbit 16s linear infinite;pointer-events:none }.stakeholder-orbit i:nth-child(1){width:280px;height:280px}.stakeholder-orbit i:nth-child(2){width:430px;height:430px;animation-direction:reverse}.stakeholder-orbit i:nth-child(3){width:600px;height:600px;animation-duration:24s}@keyframes stakeOrbit{to{rotate:360deg}}
.stakeholder-nav { position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;padding:8px; }
.stakeholder-nav .stab-btn { width:100%;min-height:78px;display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:12px;padding:11px 13px;text-align:left;border-radius:16px;white-space:normal;background:rgba(15,25,55,.3);border:1px solid rgba(40, 216, 304, .1);transition:.35s var(--ease-out-expo); }
.stakeholder-nav .stab-btn:hover { translate:5px 0;border-color:rgba(74,210,255,.32);background:rgba(30,49,91,.48); }
.stakeholder-nav .stab-btn.active { background:linear-gradient(105deg,rgba(55,104,255,.4),rgba(154, 108, 255, .3));border-color:rgba(101,177,255,.42);box-shadow:0 12px 35px rgba(42,73,170,.2),inset 0 1px rgba(255,255,255,.07); }
.stake-icon { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#55dfff;background:rgba(60,108,255,.14);border:1px solid rgba(105,151,255,.2);font-size:18px;box-shadow:0 0 18px rgba(65,125,255,.1) }.stab-btn.active .stake-icon{color:white;background:linear-gradient(145deg,#4176ff,#9a6cff);box-shadow:0 0 22px rgba(154, 108, 255, .3)}
.stakeholder-nav .stab-btn span:nth-child(2){display:flex;flex-direction:column;gap:2px}.stakeholder-nav .stab-btn b{font-size:13px;color:#f1f4ff}.stakeholder-nav .stab-btn small{font-size:9px;color:#8e9ab8}.stakeholder-nav .stab-btn em{font:500 9px 'JetBrains Mono';font-style:normal;color:#17a5ec}
.stakeholder-panels { position:relative;z-index:2;min-width:0; }
.stakeholder-panels .stab-panel { display:none;height:100%;min-height:499px;padding:48px 46px;border:1px solid rgba(154, 108, 255, .14);border-radius:21px;background:linear-gradient(145deg,rgba(35,51,96,.5),rgba(14,24,54,.34))!important;overflow:hidden;animation:stakePanelIn .55s var(--ease-out-expo); }
.stakeholder-panels .stab-panel.active { display:flex;flex-direction:column;justify-content:center; }
@keyframes stakePanelIn{from{opacity:0;translate:24px 0;filter:blur(8px)}to{opacity:1;translate:0;filter:blur(0)}}
.stakeholder-panels .stab-panel::before { content:"";position:absolute;width:280px;height:280px;right:-100px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(64,214,255,.16),transparent 69%); }
.stake-panel-head { max-width:660px;position:relative;z-index:2 }.stake-kicker{display:block;color:#56dcff;font-size:9px;letter-spacing:.16em;margin-bottom:14px}.stake-panel-head h3{font-size:clamp(2rem,3.5vw,3.1rem);line-height:1.08;letter-spacing:-.045em;margin-bottom:18px}.stake-panel-head h3 span{background:linear-gradient(90deg,#4adfff,#9a6cff);-webkit-background-clip:text;color:transparent}.stake-panel-head p{font-size:14px;color:#a9b5cf;line-height:1.75;max-width:620px}
.stake-benefits { display:flex;gap:9px;flex-wrap:wrap;margin:27px 0 }.stake-benefits span{padding:8px 12px;border-radius:999px;border:1px solid rgba(95,151,255,.18);background:rgba(28,48,91,.36);font-size:9px;color:#b8c7e8}.stake-benefits span::before{content:'✓';color:#53dfd0;margin-right:6px}
.stake-outcomes { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:650px }.stake-outcomes div{padding:15px 14px;border-radius:13px;border:1px solid rgba(154, 108, 255, .12);background:rgba(9,18,42,.34)}.stake-outcomes strong{display:block;font:600 18px 'Space Grotesk';color:#eef3ff}.stake-outcomes small{display:block;font-size:8px;color:#39b2ef;margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.stakeholder-footer { display:flex;align-items:center;gap:10px;margin-top:14px;padding:14px 18px;border-top:1px solid rgba(154, 108, 255, .09);color:#8d9ab6;font-size:11px }.stakeholder-footer p{flex:1}.stakeholder-footer a{color:#63dcff;font-weight:600}.stakeholder-footer a b{font-size:17px;margin-left:5px}.stakeholder-footer .status-dot{background:#48e4b0}
@media(max-width:900px){.stakeholder-experience{grid-template-columns:1fr}.stakeholder-nav{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));overflow-x:auto}.stakeholder-nav .stab-btn{grid-template-columns:38px 1fr;min-height:68px}.stakeholder-nav .stab-btn em{display:none}.stakeholder-panels .stab-panel{min-height:460px}}
@media(max-width:600px){.stakeholder-experience{padding:10px;border-radius:21px}.stakeholder-nav{grid-template-columns:repeat(5,145px)}.stakeholder-panels .stab-panel{padding:30px 22px;min-height:520px}.stake-outcomes{grid-template-columns:1fr}.stake-outcomes div{display:flex;align-items:center;justify-content:space-between}.stakeholder-footer{align-items:flex-start;flex-wrap:wrap}.stakeholder-footer p{flex-basis:80%}.stakeholder-footer a{margin-left:17px}}

/* ═══════════════════════════════════════════════════
   FINAL ALIGNMENT + GLASS CANVAS + CURSOR WORD WAVE
   ═══════════════════════════════════════════════════ */
/* The decorative orbit must never participate in the stakeholder grid flow. */
.stakeholder-orbit { position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; }
.stakeholder-experience { grid-template-columns:minmax(270px,330px) minmax(0,1fr);grid-template-rows:1fr;align-items:stretch; }
.stakeholder-nav { grid-column:1;grid-row:1;height:100%;justify-content:center; }
.stakeholder-panels { grid-column:2;grid-row:1;height:100%; }
.stakeholder-panels .stab-panel { width:100%;height:100%;min-height:535px; }
@media(max-width:900px){
  .stakeholder-experience{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .stakeholder-nav{grid-column:1;grid-row:1;height:auto;justify-content:flex-start}
  .stakeholder-panels{grid-column:1;grid-row:2}
  .stakeholder-panels .stab-panel{min-height:460px}
}

/* Every content section sits on a subtle transparent glass sheet. */
.section:not(.reference-hero) > .container { position:relative;isolation:isolate; }
.section:not(.reference-hero) > .container::before {
  content:"";position:absolute;z-index:-2;inset:-28px -34px;border-radius:30px;
  background:linear-gradient(145deg,rgba(31,47,88,.13),rgba(15,22,48,.055));
  border:1px solid rgba(130,158,235,.065);
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 28px 80px rgba(0,0,0,.055);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);pointer-events:none;
}
/* Nested interfaces remain readable but clearly transparent. */
.stakeholder-experience,.deployment-experience,.vision-orbit,.pricing-plan,.module-grid .flip-card,
.crisis-why,.about-contact,.irt-formula,.demo-form {
  background-color:rgba(15,25,53,.16)!important;
  border-color:rgba(125,155,239,.13)!important;
  backdrop-filter:blur(12px) saturate(1.12);-webkit-backdrop-filter:blur(12px) saturate(1.12);
}
@media(max-width:700px){.section:not(.reference-hero) > .container::before{inset:-14px -7px;border-radius:22px}}

/* Individual words form a local wave under the pointer. */
.wave-word { display:inline-block;position:relative;transform:translate3d(0,0,0);transition:transform .32s cubic-bezier(.16,1,.3,1),filter .28s,color .28s;will-change:transform; }
.wave-word.wave-active { filter:drop-shadow(0 7px 12px rgba(68,211,255,.24)); }
.text-motion.wave-hover { filter:drop-shadow(0 10px 25px rgba(69,172,255,.13)); }
.section-heading .wave-word.wave-active,.cta-headline .wave-word.wave-active { text-shadow:0 0 18px rgba(84,204,255,.2); }
@media(prefers-reduced-motion:reduce),(pointer:coarse){.wave-word{transform:none!important;filter:none!important}}

/* ═══════════════════════════════════════════════════
   HEADING RHYTHM + TRUE SECTION NAVIGATION
   ═══════════════════════════════════════════════════ */
/* Stable shared heading stack: no collisions, clipping or cursor displacement. */
.section:not(.reference-hero) > .container > .eyebrow {
  position:relative;z-index:4;display:flex;width:max-content;max-width:100%;
  margin:0 0 17px;transform:none!important;line-height:1.25;
}
.section-heading,.cta-headline {
  position:relative;z-index:4;display:block;width:100%;max-width:980px;
  margin-top:0!important;margin-bottom:25px!important;padding:0!important;
  line-height:1.13!important;letter-spacing:-.045em;text-wrap:balance;
  transform:none!important;translate:none!important;rotate:none!important;
  overflow:visible!important;isolation:isolate;
}
.section-heading .wave-word,.cta-headline .wave-word { display:inline!important;transform:none!important;filter:none!important; }
.section-intro,.about-intro { position:relative;z-index:3;margin-top:0;clear:both; }
.sub-heading { clear:both;position:relative;z-index:3;line-height:1.25; }
/* Protect anchor targets from the fixed navigation bar. */
section[id] { scroll-margin-top:92px; }

/* Navigation labels now map directly to real page sections. */
.reference-nav .nav-inner { max-width:1400px; }
.reference-nav .nav-links { gap:clamp(17px,2.2vw,34px);align-items:center;justify-content:center; }
.reference-nav .nav-links a { padding:9px 0;font-size:13px;white-space:nowrap;color:#cbd2e4; }
.reference-nav .nav-links a::after { bottom:2px;background:linear-gradient(90deg,#43dfff,#9a6cff);box-shadow:0 0 10px rgba(73,194,255,.35); }
.reference-nav .nav-links a.active { color:#fff; }
.reference-nav .nav-links a.active::after { width:100%; }
@media(max-width:1060px){.reference-nav .nav-links{gap:15px}.reference-nav .nav-links a{font-size:11px}.reference-nav .nav-cta{padding:11px 18px}}
@media(max-width:768px){
  .reference-nav .nav-links.mobile-open { display:flex;gap:5px;padding:14px 18px 20px;background:rgba(9,17,38,.92);border-bottom:1px solid rgba(154, 108, 255, .16);backdrop-filter:blur(20px) }
  .reference-nav .nav-links.mobile-open a { width:100%;padding:11px 8px;font-size:13px;border-bottom:1px solid rgba(44, 201, 280, .08) }
  .reference-nav .nav-links.mobile-open a::after{display:none}
}
@media(max-width:600px){.section-heading,.cta-headline{line-height:1.16!important;letter-spacing:-.035em;margin-bottom:20px!important}.section:not(.reference-hero) > .container > .eyebrow{margin-bottom:13px}}

/* Universal word-wave support, including stable primary headings */
.universal-wave-text .wave-word { display:inline-block;position:relative;will-change:transform;transition:transform .32s cubic-bezier(.16,1,.3,1),filter .28s,text-shadow .28s; }
.section-heading.universal-wave-text .wave-word,
.cta-headline.universal-wave-text .wave-word {
  display:inline-block!important;
  transform:var(--word-wave,translate3d(0,0,0))!important;
  vertical-align:baseline;
}
.universal-wave-text .wave-word.wave-active { filter:drop-shadow(0 7px 12px rgba(63,218,255,.24)); }
.section-heading.universal-wave-text .wave-word.wave-active,
.cta-headline.universal-wave-text .wave-word.wave-active { text-shadow:0 0 19px rgba(74,211,255,.24); }
@media(prefers-reduced-motion:reduce),(pointer:coarse){
  .universal-wave-text .wave-word{transform:none!important;filter:none!important;text-shadow:none!important}
}

/* ═══════════════════════════════════════════════════
   GUARANTEED SECTION-HEADING VISIBILITY
   ═══════════════════════════════════════════════════ */
/* Headings must never remain in a blurred pre-reveal state after navigation. */
.section-heading,
.section-heading.reveal-words,
.section-heading.reveal-words.in-view,
.cta-headline,
.cta-headline.reveal-words,
.cta-headline.reveal-words.in-view,
.sub-heading.reveal-words,
.sub-heading.reveal-words.in-view {
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
  translate:none!important;
  clip-path:none!important;
}
.section-heading,.cta-headline {
  color:#f5f8ff!important;
  background:linear-gradient(105deg,#f8faff 0%,#f8faff 42%,#55dcff 66%,#9a6cff 92%)!important;
  background-size:180% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}
/* Wrapped words paint reliably in every browser while retaining the gradient look. */
.section-heading .wave-word,.cta-headline .wave-word {
  opacity:1!important;visibility:visible!important;filter:none;
  background:linear-gradient(105deg,#f8faff 5%,#72dbff 58%,#9a6cff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.section-heading .kinetic .wave-word {
  background:linear-gradient(90deg,#43e2f5,#5578ff,#9a6cff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sub-heading { color:#f3f6ff!important;opacity:1!important;visibility:visible!important;filter:none!important; }

/* ═══════════════════════════════════════════════════
   PDF CONTENT ARCHITECTURE — FOUR PRODUCT PILLARS (100% ZOOM FIT)
   ═══════════════════════════════════════════════════ */
.content-architecture { scroll-margin-top:76px; }
.content-visual-grid { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:20px; align-items:stretch; }
.content-visual-grid.reverse { grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); }
.content-visual-grid.reverse .content-visual { order:2; }
.content-visual-grid.reverse .content-pillars { order:1; }
.content-visual { position:relative; min-height:100%; border:1px solid rgba(154, 108, 255, .15); border-radius:20px; overflow:hidden; background:linear-gradient(145deg,rgba(30,46,87,.4),rgba(12,20,45,.28)); box-shadow:0 20px 50px rgba(0,0,0,.18); display:flex; }
.content-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,13,31,.88),transparent 52%); pointer-events:none; }
.content-visual img { width:100%; height:100%; min-height:360px; object-fit:cover; filter:saturate(1.05) contrast(1.03)!important; }
.content-visual .visual-caption { position:absolute; z-index:2; left:20px; right:20px; bottom:16px; display:flex; flex-direction:column; gap:3px; }
.visual-caption b { font-size:14px; color:#f4f7ff; line-height:1.2; }
.visual-caption span { font:500 8px 'JetBrains Mono'; letter-spacing:.06em; color:#76dfff; }
.content-pillars { display:flex; flex-direction:column; justify-content:space-between; gap:10px; height:100%; }
.content-pillar { position:relative; padding:13px 16px; border:1px solid rgba(154, 108, 255, .13); border-radius:15px; background:linear-gradient(145deg,rgba(34,49,91,.43),rgba(16,25,53,.27)); backdrop-filter:blur(10px); overflow:hidden; transition:.3s var(--ease-out-expo); }
.content-pillar:hover { translate:0 -3px; border-color:rgba(72,211,255,.35); box-shadow:0 15px 35px rgba(0,0,0,.18),0 0 25px rgba(64,131,255,.07); }
.content-pillar::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.06) 47%,transparent 65%); translate:-110% 0; transition:translate .8s var(--ease-out-expo); pointer-events:none; }
.content-pillar:hover::after { translate:110% 0; }
.pillar-index { display:block; font-size:7.5px; letter-spacing:.12em; color:#53ddff; margin-bottom:4px; }
.content-pillar>h3 { font-size:15px; margin-bottom:8px; line-height:1.22; color:#f4f7ff; }
.feature-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.feature-pair>div { padding:9px 11px; border-radius:10px; border:1px solid rgba(8, 221, 327, .1); background:rgba(8,17,39,.24); }
.feature-pair h4 { font-size:11px; color:#dfe8ff; margin-bottom:3px; line-height:1.3; font-weight:600; }
.feature-pair p { font-size:10px; color:#96a4c2; line-height:1.4; margin:0; }
@media(max-width:900px){.content-visual-grid,.content-visual-grid.reverse{grid-template-columns:1fr}.content-visual,.content-visual-grid.reverse .content-visual{order:0;position:relative;min-height:300px}.content-visual-grid.reverse .content-pillars{order:0}.content-visual img{height:300px;min-height:300px}.feature-pair{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feature-pair{grid-template-columns:1fr}.content-pillar{padding:15px}.content-visual{min-height:240px}.content-visual img{height:240px;min-height:240px}}

/* Section labels use audience names only; numeric section rail removed. */
.section-rail { display:none!important; }

/* ═══════════════════════════════════════════════════
   ABOUT US — COMPACT 100% ZOOM FIT EXPERIENCE
   ═══════════════════════════════════════════════════ */
.about-us-section { padding-top:60px; }
.about-us-grid { display:grid; grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr); gap:22px; align-items:stretch; }
.about-us-visual { position:relative; min-height:100%; border:1px solid rgba(154, 108, 255, .16); border-radius:20px; overflow:hidden; background:radial-gradient(circle at 40% 32%,rgba(63,139,255,.18),transparent 38%),linear-gradient(145deg,rgba(30,46,88,.4),rgba(11,19,43,.28)); box-shadow:0 20px 50px rgba(0,0,0,.2); display:flex; }
.about-us-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,13,31,.9),transparent 56%); pointer-events:none; }
.about-us-visual>img { width:100%; height:100%; min-height:360px; object-fit:cover; filter:saturate(1.08) contrast(1.04)!important; }
.about-visual-orbit { position:absolute; inset:0; z-index:2; pointer-events:none; }
.about-visual-orbit i { position:absolute; left:50%; top:48%; translate:-50% -50%; border:1px solid rgba(78,211,255,.18); border-radius:50%; animation:aboutOrbit 14s linear infinite; }
.about-visual-orbit i:nth-child(1){width:150px;height:150px;}
.about-visual-orbit i:nth-child(2){width:260px;height:260px;animation-direction:reverse;animation-duration:19s;}
.about-visual-orbit i:nth-child(3){width:370px;height:370px;animation-duration:28s;border-style:dashed;}
.about-visual-badge { position:absolute; z-index:3; left:16px; right:16px; bottom:16px; display:grid; grid-template-columns:10px 1fr; align-items:center; column-gap:9px; padding:10px 14px; border:1px solid rgba(121,160,246,.18); border-radius:12px; background:rgba(11,21,47,.72); backdrop-filter:blur(14px); }
.about-visual-badge .status-dot { grid-row:1/3; }
.about-visual-badge b { font-size:12px; color:#ffffff; }
.about-visual-badge small { font-size:8.5px; color:#8fa0c2; }
.about-us-content { display:flex; flex-direction:column; justify-content:space-between; gap:10px; height:100%; }
.about-story { padding:14px 16px; border:1px solid rgba(154, 108, 255, .14); border-radius:15px; background:linear-gradient(145deg,rgba(34,50,93,.44),rgba(15,24,52,.27)); }
.about-story h3 { font-size:clamp(1.25rem,2.1vw,1.65rem); line-height:1.2; margin:4px 0 8px; color:#f4f7ff; }
.about-story p { font-size:11px; color:#a6b3ce; line-height:1.5; margin:0; }
.about-values { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.about-value { display:flex; flex-direction:column; gap:6px; padding:11px 12px; border:1px solid rgba(154, 108, 255, .12); border-radius:12px; background:rgba(26,40,78,.27); transition:.3s var(--ease-out-expo); overflow:hidden; }
.about-value:hover { translate:0 -3px; border-color:rgba(65,211,255,.35); background:rgba(33,51,96,.4); box-shadow:0 12px 30px rgba(0,0,0,.15); }
.about-value>span { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#57dfff; font-size:13px; background:linear-gradient(145deg,rgba(55,112,255,.23),rgba(154, 108, 255, .18)); border:1px solid rgba(105,151,255,.2); }
.about-value h4 { font-size:11.5px; margin:2px 0 3px; color:#ffffff; font-weight:600; }
.about-value p { font-size:9.5px; color:#95a3c0; line-height:1.4; margin:0; }
.about-facts.single-stat { display:flex; justify-content:center; align-items:center; margin-top:10px; }
.about-facts.single-stat div { width:100%; max-width:380px; display:flex; align-items:center; justify-content:center; gap:16px; padding:16px 28px; border:1px solid rgba(154, 108, 255, .25); border-radius:16px; background:linear-gradient(145deg,rgba(34,50,93,.45),rgba(15,24,52,.3)); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.about-facts.single-stat strong { display:inline-block; font:700 28px 'Space Grotesk'; background:linear-gradient(90deg,#52ddff,#9a6cff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin:0; }
.about-facts.single-stat span { display:inline-block; font-size:12px; color:#a0b2d8; text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin:0; }

/* Pricing now has a single clear contact path below fully visible cards. */
.pricing-plan { min-height:510px; }
.pricing-sales-note { margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border:1px solid rgba(116,150,237,.16);border-radius:17px;background:linear-gradient(105deg,rgba(41,63,119,.34),rgba(90,44,129,.24));backdrop-filter:blur(12px);box-shadow:0 18px 45px rgba(0,0,0,.14); }
.pricing-sales-note>span{font-size:12px;color:#99a7c4}.pricing-sales-note a{display:inline-flex;align-items:center;gap:8px;color:#f5f8ff;font-size:13px;font-weight:600;padding:11px 16px;border-radius:999px;background:linear-gradient(105deg,#3d70ff,#9a6cff);box-shadow:0 10px 28px rgba(73,94,255,.25);transition:.35s var(--ease-out-expo)}.pricing-sales-note a:hover{translate:0 -3px;box-shadow:0 15px 38px rgba(75,105,255,.4)}.pricing-sales-note b{font-size:18px}

/* Scroll progress gives the long-form experience a polished sense of position. */
.site-progress { position:fixed;left:0;top:0;width:100%;height:2px;z-index:10002;pointer-events:none;background:rgba(83,111,220,.08) }.site-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#38dfff,#596fff,#9a6cff);box-shadow:0 0 13px rgba(71,202,255,.55);transform-origin:left}
@media(max-width:980px){.about-us-grid{grid-template-columns:1fr}.about-us-visual,.about-us-visual>img{min-height:430px}.about-us-visual{max-height:520px}.reference-nav .nav-links a{font-size:10px}}
@media(max-width:600px){.about-us-visual,.about-us-visual>img{min-height:340px}.about-facts{grid-template-columns:1fr}.about-facts div{display:flex;align-items:center;justify-content:space-between}.pricing-sales-note{align-items:flex-start;flex-direction:column}.pricing-sales-note a{width:100%;justify-content:center}.about-contact-line{align-items:flex-start;flex-direction:column}}

/* ═══════════════════════════════════════════════════
   ROADMAP ALIGNMENT + SOFT PINK LIGHTING
   ═══════════════════════════════════════════════════ */
:root { --pink:#f28bc8;--pink-soft:rgba(242,139,200,.14);--rose:#ff7eb6; }
body {
  background:
    radial-gradient(circle at 12% 18%,rgba(24,99,184,.13),transparent 35rem),
    radial-gradient(circle at 88% 12%,rgba(242,139,200,.105),transparent 31rem),
    radial-gradient(circle at 82% 60%,rgba(192,79,177,.09),transparent 38rem),
    linear-gradient(120deg,#0a142b 0%,#0a1022 55%,#160d20 100%) fixed!important;
}
.gradient-mesh { background:radial-gradient(ellipse at 18% 42%,rgba(61,90,254,.07),transparent 50%),radial-gradient(ellipse at 83% 22%,rgba(242,139,200,.075),transparent 48%),radial-gradient(ellipse at 64% 82%,rgba(154, 108, 255, .05),transparent 48%)!important; }
.section-heading,.cta-headline { background-image:linear-gradient(105deg,#fbfaff 0%,#f8faff 38%,#65d9ff 61%,#9a6cff 79%,#f28bc8 100%)!important; }
.section-heading .kinetic .wave-word,.kinetic { background-image:linear-gradient(90deg,#4ce1f2,#9a6cff,#9a6cff,#f28bc8)!important; }
.reference-nav .nav-cta,.section .btn-primary,.explore-btn { background:linear-gradient(110deg,#4774ff,#9a6cff,#ef83c3)!important; }
.card-glow,.plan-glow { background:radial-gradient(circle,rgba(242,139,200,.18),transparent 69%)!important; }

/* Balanced roadmap composition */
.roadmap > .container { max-width:1240px; }
.roadmap .section-heading { max-width:850px;font-size:clamp(2.35rem,4.4vw,3.8rem);margin-bottom:38px!important; }
.roadmap-grid { position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch; }
.roadmap-grid::before { content:"";position:absolute;left:8%;right:8%;top:-18px;height:1px;background:linear-gradient(90deg,transparent,#9a6cff 22%,var(--pink) 78%,transparent);opacity:.38;box-shadow:0 0 16px rgba(242,139,200,.24); }
.roadmap-card { position:relative;min-width:0;min-height:250px;height:100%;display:flex;flex-direction:column;align-items:flex-start;padding:31px 30px!important;margin:0!important;opacity:1!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(38,54,99,.44),rgba(23,27,61,.3),rgba(72,30,67,.2))!important;border:1px solid rgba(217,132,212,.16)!important;box-shadow:inset 0 1px rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.14);overflow:hidden; }
.roadmap-card::before { content:"";position:absolute;width:190px;height:190px;right:-85px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(242,139,200,.18),transparent 68%);transition:.5s var(--ease-out-expo); }
.roadmap-card::after { content:"";position:absolute;left:29px;top:0;width:42px;height:2px;background:linear-gradient(90deg,#9a6cff,var(--pink));box-shadow:0 0 14px rgba(242,139,200,.45); }
.roadmap-card:hover { transform:translateY(-8px)!important;border-color:rgba(242,139,200,.4)!important;box-shadow:0 28px 65px rgba(0,0,0,.23),0 0 36px rgba(242,139,200,.09); }
.roadmap-card:hover::before { scale:1.25;opacity:.9; }
.roadmap-quarter { display:inline-flex!important;align-items:center;min-height:27px;margin:0 0 21px!important;padding:6px 11px;border-radius:999px;background:rgba(190,91,190,.09);border:1px solid rgba(242,139,200,.18);color:#e8a0d1!important;font-size:10px!important;line-height:1!important; }
.roadmap-card h4 { min-height:50px;margin:0 0 12px!important;font-size:18px!important;line-height:1.36!important;color:#f6f3fb; }
.roadmap-card p { margin:0!important;font-size:13px!important;line-height:1.7!important;color:#aeb6cc!important;max-width:100%; }
.roadmap-card:nth-child(2) { background:linear-gradient(145deg,rgba(43,55,105,.46),rgba(39,29,71,.32),rgba(91,37,81,.2))!important; }
.roadmap-card:nth-child(3) { background:linear-gradient(145deg,rgba(50,45,96,.44),rgba(54,27,68,.3),rgba(105,42,80,.22))!important; }

/* ── Buttons: simplified to two color gradient only ── */
.reference-nav .nav-cta,
.section .btn-primary,
.explore-btn {
  background: linear-gradient(110deg, #3D5AFE, #9a6cff) !important;
}
.card-glow,
.plan-glow {
  background: radial-gradient(circle, rgba(154, 108, 255, .18), transparent 69%) !important;
}
/* Fix pink hover overrides — keep buttons on brand two-color hover */
.content-pillar:hover,
.about-value:hover,
.pricing-plan:hover,
.stakeholder-nav .stab-btn:hover,
.deploy-phase:hover,
.module-grid .flip-card:hover {
  border-color: rgba(61, 90, 254, .34) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .19), 0 0 32px rgba(61, 90, 254, .075) !important;
}
.eyebrow { border-color:rgba(242,139,200,.14)!important;background:linear-gradient(90deg,rgba(34,54,101,.34),rgba(87,35,79,.18))!important; }
.eyebrow-line { background:linear-gradient(90deg,#587cff,var(--pink))!important;box-shadow:0 0 13px rgba(242,139,200,.34)!important; }

@media(max-width:900px){.roadmap-grid{grid-template-columns:1fr}.roadmap-grid::before{display:none}.roadmap-card{min-height:210px}.roadmap-card h4{min-height:0}.roadmap .section-heading{margin-bottom:28px!important}}
@media(max-width:600px){.roadmap-card{padding:25px 22px!important;min-height:auto}.roadmap .section-heading{font-size:clamp(2rem,10vw,3rem)}}

/* ═══════════════════════════════════════════════════
   TRUE SCREEN-FIT SECTION ENGINE
   Every section fits neatly to the viewport height when displayed
   ═══════════════════════════════════════════════════ */
.section {
  min-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6.5vh, 88px) 0;
  isolation: isolate;
  overflow: clip;
  position: relative;
  box-sizing: border-box;
}
.section > .container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.hero.reference-hero {
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
@media (min-width: 901px) {
  /* Ensure the 6 key long-form sections fit 100% on standard 100% zoom screens */
  .content-architecture, .about-us-section, .vision {
    padding: clamp(20px, 3vh, 38px) 0 !important;
    min-height: calc(100vh - 74px) !important;
    max-height: calc(100vh - 74px) !important;
    justify-content: center !important;
  }
  .content-architecture .section-heading, .about-us-section .section-heading, .vision .section-heading {
    font-size: clamp(1.65rem, 2.7vw, 2.3rem) !important;
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
  }
  .content-architecture .section-intro, .about-us-section .section-intro, .vision .section-intro {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    max-width: 760px;
  }
  .content-architecture .eyebrow, .about-us-section .eyebrow, .vision .eyebrow {
    margin-bottom: 6px !important;
    padding: 5px 11px !important;
    font-size: 10px !important;
  }
}
@media (max-width: 900px) {
  .section, .content-architecture, .about-us-section, .vision {
    min-height: auto !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding: clamp(48px, 6vh, 72px) 0 !important;
  }
  .reference-nav .nav-inner { padding: 0 16px; }
  .reference-hero { padding: 95px 0 50px; min-height: auto; }
}
@media (max-height: 780px) {
  .section, .content-architecture, .about-us-section, .vision {
    min-height: auto !important;
    max-height: none !important;
  }
}
@media (max-width: 540px) {
  .feature-pair, .about-values, .about-facts, .vision-proof { grid-template-columns: 1fr; }
  .reference-headline { font-size: clamp(2.2rem, 11vw, 3.1rem); }
  .section-heading { font-size: clamp(1.6rem, 7vw, 2.3rem) !important; }
}

/* ════════════════════════════════════════════════════════════════
   SCREEN-SIZE ADAPTABILITY LAYER
   Automatically fits the whole site to every device — from 320px
   phones up to 4K displays — by scaling typography, collapsing grids,
   protecting against horizontal scroll, and keeping touch controls
   from overlapping. Loaded last so it cleanly governs responsiveness.
   ════════════════════════════════════════════════════════════════ */

/* ── 0. Universal safeguards ───────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video, .marquee-track { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Fluid root: the whole site scales gently & proportionally with the
   viewport while staying inside comfortable bounds. */
:root { font-size: clamp(14px, 0.42vw + 13.2px, 17px); }

/* Notched / rounded phone gutters via safe-area insets. */
.container,
.nav-inner,
.reference-nav .nav-inner {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* ── 1. Large & 4K screens (≥1600px) ───────────────────────────── */
@media (min-width: 1600px) {
  .container { max-width: 1340px; }
  .reference-hero-content { max-width: 1480px; }
  .reference-nav .nav-inner { max-width: 1540px; }
  .section-heading { font-size: clamp(2.4rem, 2.6vw, 3.4rem); }
  .reference-headline { font-size: clamp(3.4rem, 4vw, 5rem); }
  .footer-grid { gap: 56px; }
}
@media (min-width: 2000px) {
  :root { font-size: 18px; }
  .container { max-width: 1480px; }
  .reference-hero-content { max-width: 1600px; }
  .reference-nav .nav-inner { max-width: 1660px; }
}

/* ── 2. Small laptop / large tablet (≤1280px) ──────────────────── */
@media (max-width: 1280px) {
  .reference-hero-content { max-width: 1180px; }
  .reference-nav .nav-inner { max-width: 1200px; }
  .right-center-nav { gap: clamp(18px, 2vw, 30px); margin-right: clamp(12px, 2vw, 32px); }
}

/* ── 3. Tablet landscape (≤1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
  .section-rail { display: none; }
  .content-visual-grid,
  .content-visual-grid.reverse { grid-template-columns: 1fr; }
  .content-visual-grid.reverse .content-visual,
  .content-visual-grid.reverse .content-pillars { order: 0; }
  .content-visual { min-height: 320px; }
  .content-visual img { height: 320px; min-height: 320px; }
  .training-layout { grid-template-columns: 1fr; }
  .dashboard-showcase { grid-template-columns: 1fr; }
  .footer-grid { gap: 32px; }
}

/* ── 4. Tablet portrait (≤900px) ───────────────────────────────── */
@media (max-width: 900px) {
  .about-us-grid { grid-template-columns: 1fr; }
  .about-us-visual, .about-us-visual > img { min-height: 380px; }
  .stakeholder-experience { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .stakeholder-nav { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); overflow-x: auto; height: auto; }
  .stakeholder-panels { grid-column: 1; grid-row: 2; }
  .stakeholder-nav .stab-btn { grid-template-columns: 38px 1fr; min-height: 68px; }
  .stakeholder-nav .stab-btn em { display: none; }
  .stakeholder-panels .stab-panel { min-height: 440px; padding: 30px 26px; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .roadmap-grid::before { display: none; }
  .roadmap-card { min-height: 200px; }
  .deployment-experience { grid-template-columns: 1fr; }
  .deployment-console { min-height: 440px; }
  .vision-orbit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: auto; padding: 28px; }
  .vision-core { position: relative; left: auto; top: auto; translate: 0; width: auto; height: auto; border-radius: 20px; grid-column: 1 / -1; min-height: 150px; }
  .vision-stage { position: relative; left: auto !important; top: auto !important; translate: 0; width: auto; }
  .orbit-flow, .orbit-rings, .stage-revolving-circle { display: none; }
  .vision-proof { grid-template-columns: 1fr; }
  .training-cards { grid-template-columns: 1fr 1fr; }
  .comparison-table { min-width: 0; }
  .reference-nav .nav-links a { font-size: 12px; }
}

/* ── 5. Mobile (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Navigation → hamburger */
  .reference-nav .nav-links,
  .reference-nav .nav-cta { display: none; }
  .reference-nav .nav-hamburger { display: flex; }
  .reference-nav .nav-links.mobile-open {
    display: flex; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(9, 17, 38, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 14px 20px 22px; gap: 4px;
    border-bottom: 1px solid rgba(154, 108, 255, 0.16);
  }
  .reference-nav .nav-links.mobile-open a {
    width: 100%; padding: 13px 8px; font-size: 15px; white-space: normal;
    border-bottom: 1px solid rgba(44, 201, 280, 0.08);
  }
  .reference-nav .nav-links.mobile-open a::after { display: none; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 13px 8px; font-size: 15px; border-bottom: 1px solid rgba(44, 201, 280, 0.08); }
  .nav-dropdown-menu {
    position: relative; top: auto; left: auto; transform: none; width: 100%;
    box-shadow: none; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(85, 221, 255, 0.15); display: none; margin-top: 6px;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; }
  /* Keep the primary CTA reachable on mobile as a compact pill */
  .reference-nav .nav-cta {
    display: inline-flex; order: 5; padding: 9px 14px; font-size: 11px;
  }

  /* Typography */
  .section-heading, .cta-headline { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
  .reference-sub { font-size: 15px; }

  /* Hero stacks & centers */
  .reference-hero-content { grid-template-columns: 1fr; gap: 32px; }
  .reference-visual { order: -1; min-height: 340px; }
  .reference-hero .hero-text { text-align: center; padding: 16px 0 50px; }
  .hero-badge { margin-inline: auto; }
  .reference-sub { margin-inline: auto; }
  .reference-actions { justify-content: center; }
  .reference-actions .btn { width: 100%; max-width: 340px; }

  /* Decorative motion off on touch */
  .floating-icons { display: none; }
  .cursor-system, .cursor-trail-canvas { display: none !important; }
  body, a, button { cursor: auto; }

  /* About */
  .about-values { grid-template-columns: 1fr; }
  .about-facts.single-stat div { flex-direction: column; gap: 4px; text-align: center; }

  /* Stakeholder */
  .stakeholder-nav { grid-template-columns: repeat(5, 148px); }
  .stake-outcomes { grid-template-columns: 1fr; }
  .stake-outcomes div { display: flex; align-items: center; justify-content: space-between; }

  /* Training */
  .training-cards { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-sales-note { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pricing-sales-note a { width: 100%; justify-content: center; }
  .single-pricing-card { padding: 36px 24px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* ── Floating action controls: stack so they never overlap ── */
  .whatsapp-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .wa-tooltip { display: none; }
  .chatbot-widget { bottom: 84px; right: 20px; }
  .chatbot-toggle { width: 54px; height: 54px; }
  .chatbot-panel { width: calc(100vw - 32px); height: 70vh; right: -12px; bottom: 66px; }
}

/* ── 6. Large phone (≤600px) ───────────────────────────────────── */
@media (max-width: 600px) {
  .section { padding: clamp(48px, 7vh, 64px) 0 !important; }
  .reference-hero { padding: 92px 0 50px; min-height: auto; }
  .reference-headline { font-size: clamp(2.1rem, 11vw, 3rem); }
  .feature-pair { grid-template-columns: 1fr; }
  .content-pillar { padding: 14px; }
  .content-visual, .content-visual img { min-height: 240px; height: 240px; }
  .vision-orbit { grid-template-columns: 1fr; }
  .stakeholder-nav { grid-template-columns: repeat(5, 132px); }
  .stakeholder-panels .stab-panel { min-height: 480px; padding: 26px 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .stakeholder-footer { align-items: flex-start; flex-wrap: wrap; }
  .stakeholder-footer p { flex-basis: 80%; }
  .stakeholder-footer a { margin-left: 17px; }
}

/* ── 7. Small phone (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .reference-nav .nav-inner { padding: 0 14px; }
  .header-brand-name { font-size: 17px; }
  .section-heading { font-size: clamp(1.55rem, 9vw, 2rem) !important; }
  .reference-headline { font-size: clamp(2rem, 12vw, 2.6rem); }
  .reference-actions .btn { padding: 14px 20px; font-size: 14px; }
  .module-grid { grid-template-columns: 1fr; }
  .module-grid .flip-card { min-height: 190px; }
  .footer-grid { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .vision-proof { gap: 8px; }
  .comparison-table td.dim-label { white-space: normal; }
  .single-pricing-card { padding: 30px 18px; }
  .training-illustration { order: -1; }
}

/* ── 8. Very small phone (≤380px) ──────────────────────────────── */
@media (max-width: 380px) {
  .reference-actions { flex-direction: column; }
  .reference-actions .btn { width: 100%; max-width: none; }
  .stakeholder-nav { grid-template-columns: repeat(5, 120px); }
  .header-brand-name span { font-size: 15px; }
}

/* ── 9. Short landscape phones (e.g. iPhone landscape) ─────────── */
@media (max-height: 520px) and (orientation: landscape) {
  .section, .content-architecture, .about-us-section, .vision {
    min-height: auto !important; max-height: none !important;
    padding: 48px 0 !important;
  }
  .reference-hero { min-height: auto; padding: 88px 0 48px; }
  .reference-visual { min-height: 240px; }
  .chatbot-panel { height: 80vh; }
}

/* ════════════════════════════════════════════════════════════════
   HIGHLIGHTED SCROLLING BANNER (audience-strip / marquee)
   Re-themed to the brand blue → violet → pink language and made
   prominent (was faded at opacity:.58) so it reads as a feature strip.
   ════════════════════════════════════════════════════════════════ */
.audience-strip {
  opacity: 1 !important;
  padding: 22px 0;
  background:
    linear-gradient(100deg,
      rgba(61, 90, 254, 0.12),
      rgba(61, 90, 254, 0.18) 50%,
      rgba(154, 108, 255, 0.16));
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #3D5AFE, #9a6cff, #3D5AFE) 1;
  box-shadow:
    0 0 38px rgba(85, 130, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  /* Very subtle edge fade so words never look "cut off" */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
}

/* Keep the logo a fixed size while scrolling (no zoom-out on .condensed) */
.reference-nav.nav.condensed .nav-logo-img,
.nav.condensed .nav-logo-tile .nav-logo-img {
  width: 100% !important;
  height: 100% !important;
}

/* Animated theme glow lines riding along the top & bottom edges */
.audience-strip::before,
.audience-strip::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3D5AFE, #9a6cff, transparent);
  background-size: 220% 100%;
  animation: stripGlow 6s linear infinite;
  opacity: 0.9;
  pointer-events: none;
}
.audience-strip::before { top: 0; animation-direction: reverse; }
.audience-strip::after  { bottom: 0; }
@keyframes stripGlow { to { background-position: 220% 0; } }

/* Marquee text — solid, fully-visible theme-tinted color (no clipping) */
.marquee-track {
  font-size: 15px;
  font-weight: 700;
  color: #dbe4ff;
  text-shadow: 0 0 14px rgba(80, 130, 255, 0.40);
  gap: 0;                 /* spacing moved to per-span margin for a seamless loop */
}
.marquee-track > span { margin-right: 36px; }

/* Divider dots glow in the theme cyan */
.marquee-track .dot {
  color: #43e2f5;
  text-shadow: 0 0 12px #43e2f5;
}

@media (prefers-reduced-motion: reduce) {
  .audience-strip::before,
  .audience-strip::after { animation: none; }
  .marquee-track { animation-play-state: paused; }
}

@media (max-width: 768px) {
  .audience-strip { padding: 16px 0; }
  .marquee-track { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   PRICING SPLIT + REQUEST-A-DEMO CARD + EMAIL MODAL + TOAST
   ════════════════════════════════════════════════════════════════ */
.pricing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}

/* Right column — Request a Demo card */
.demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 34px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(150deg, rgba(37, 52, 98, 0.75), rgba(16, 24, 53, 0.58));
  border: 1px solid rgba(122, 151, 245, 0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.45s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), border-color 0.3s, box-shadow 0.45s;
  overflow: hidden;
}
.demo-card:hover {
  transform: translateY(-8px);
  border-color: rgba(84, 214, 255, 0.65);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.48), 0 0 45px rgba(69, 113, 255, 0.25);
}
.demo-card-media {
  width: 100%;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.video-upload {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 16px;
  cursor: pointer;
  color: #cfe0ff;
  font-size: 13px;
  font-weight: 600;
  background: rgba(67, 226, 245, 0.08);
  border: 1px dashed rgba(85, 221, 255, 0.45);
  transition: all 0.3s ease;
}
.video-upload:hover {
  background: rgba(67, 226, 245, 0.16);
  border-color: #43e2f5;
  color: #fff;
  transform: translateY(-2px);
}
.video-upload-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  color: #43e2f5;
  background: rgba(67, 226, 245, 0.12);
  box-shadow: 0 0 18px rgba(67, 226, 245, 0.25);
}
.video-upload-text { white-space: nowrap; }
.video-file-name {
  font-size: 11px; color: #8fa6cf; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-card h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin: 6px 0 12px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow: 0 2px 16px rgba(136, 212, 255, 0.4);
}
.demo-card-desc {
  font-size: 14px;
  color: #aab6d1;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto 22px;
}
.demo-request-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(105deg, #3d6dff, #9a6cff);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(61, 109, 255, 0.35);
  transition: all 0.35s ease;
}
.demo-request-btn:hover {
  background: linear-gradient(105deg, #517fff, #9a6cff);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(61, 109, 255, 0.5);
}

/* Email request modal */
.demo-modal-overlay {
  position: fixed; inset: 0; z-index: 100020;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 11, 24, 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.demo-modal-overlay.open { opacity: 1; visibility: visible; }
.demo-modal {
  position: relative;
  width: 100%; max-width: 420px;
  padding: 38px 32px 32px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(150deg, rgba(24, 34, 66, 0.96), rgba(12, 18, 40, 0.98));
  border: 1px solid rgba(122, 151, 245, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(69, 113, 255, 0.18);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.demo-modal-overlay.open .demo-modal { transform: translateY(0) scale(1); }
.demo-modal-close {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 22px; line-height: 1; color: #aab6d1;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer; transition: all 0.25s ease;
}
.demo-modal-close:hover { color: #fff; border-color: rgba(85, 221, 255, 0.5); transform: rotate(90deg); }
.demo-modal-icon {
  width: 64px; height: 64px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 16px;
  color: #55ddff;
  background: rgba(67, 226, 245, 0.12);
  box-shadow: 0 0 24px rgba(67, 226, 245, 0.25);
}
.demo-modal h3 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.demo-modal-sub { font-size: 13px; color: #aab6d1; margin-bottom: 20px; }
.demo-modal-form { display: flex; gap: 10px; }
.demo-email-input {
  flex: 1; min-width: 0;
  padding: 14px 18px; border-radius: 999px;
  background: #f5f7ff; color: #14203e;
  border: 1px solid rgba(157, 179, 255, 0.4);
  font: 500 15px 'Inter'; outline: none;
}
.demo-email-input::placeholder { color: #13a0e7; }
.demo-email-input:focus { border-color: #9a6cff; box-shadow: 0 0 0 4px rgba(154, 108, 255, 0.18); }
.demo-ok-btn {
  padding: 0 26px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(105deg, #3d6dff, #9a6cff); color: #fff;
  font-weight: 600; font-size: 14px;
  box-shadow: 0 10px 28px rgba(61, 109, 255, 0.35);
  transition: all 0.3s ease;
}
.demo-ok-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(61, 109, 255, 0.5); }
.demo-modal-error { color: #ff8aa0; font-size: 12px; margin-top: 12px; min-height: 14px; }

/* Confirmation toast */
.demo-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 30px);
  z-index: 100030;
  padding: 14px 26px; border-radius: 999px;
  background: linear-gradient(105deg, #3d6dff, #9a6cff);
  color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(69, 113, 255, 0.3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), visibility 0.35s;
}
.demo-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Stack the two pricing cards on small screens */
@media (max-width: 768px) {
  .pricing-split { grid-template-columns: 1fr; max-width: 520px; }
}

/* ════════════════════════════════════════════════════════════════
   DEMO VIDEO BUTTON + VIDEO MODAL  (sky-blue theme)
   ════════════════════════════════════════════════════════════════ */
/* Play button inside the demo card */
.demo-video-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: #cfe0ff;
}
.demo-video-icon {
  display: grid;
  place-items: center;
  width: 70px; height: 70px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #38bdf8, #2f9fe0);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.demo-video-btn:hover .demo-video-icon {
  transform: scale(1.08);
  box-shadow: 0 0 36px rgba(56, 189, 248, 0.6);
}
.demo-video-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #bcd2f5; }

/* Video modal */
.demo-video-modal-overlay {
  position: fixed; inset: 0; z-index: 100021;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 11, 24, 0.8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.demo-video-modal-overlay.open { opacity: 1; visibility: visible; }
.demo-video-modal {
  position: relative;
  width: 100%; max-width: 820px;
  border-radius: 18px; overflow: hidden;
  background: #0b1120;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(56, 189, 248, 0.2);
  transform: scale(0.96);
  transition: transform 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.demo-video-modal-overlay.open .demo-video-modal { transform: scale(1); }
.demo-video-el { display: block; width: 100%; height: auto; background: #000; aspect-ratio: 16 / 9; }
.demo-video-modal .demo-modal-close { position: absolute; top: 10px; right: 12px; z-index: 2; background: rgba(0, 0, 0, 0.55); }

/* ════════════════════════════════════════════════════════════════
   HIGHLIGHTED FOOTER
   ════════════════════════════════════════════════════════════════ */
.footer {
  position: relative;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.07), rgba(56, 189, 248, 0.02));
  border-top: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 -10px 40px rgba(56, 189, 248, 0.12), inset 0 1px 0 rgba(56, 189, 248, 0.15);
}
.footer-links h4 { color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════════
   VIOLET ↔ BLUE ↔ CYAN ↔ PINK BLENDED THEME + CURSOR & CONTACT FIXES
   Re-introduces violet, blended with the brand blue / cyan / pink, for
   a more stunning look; fixes the cinematic cursor on the Pricing &
   Demo cards; and recolors the footer contact details + address to white.
   Loaded last so it cleanly governs the whole site.
   ════════════════════════════════════════════════════════════════ */

:root {
  --violet: #9a6cff;          /* vibrant violet, back in the mix   */
  --royal: #3D5AFE;           /* brand royal blue                  */
  --cyan: #43dcff;            /* brand cyan                        */
  --pink: #f28bc8;            /* brand pink accent                 */
  --brand-blend: linear-gradient(120deg, #3D5AFE 0%, #9a6cff 100%);
}

/* ── Primary brand gradients: violet → blue → cyan → pink ── */
.btn-primary,
.section .btn-primary,
.reference-nav .nav-cta,
.explore-btn,
.single-pricing-cta,
.demo-request-btn,
.demo-ok-btn,
.demo-toast,
.pricing-sales-note a,
.section .filter-btn.active,
.section .stab-btn.active,
.stakeholder-nav .stab-btn.active {
  background: var(--brand-blend) !important;
}
.nav-cta::before { background: linear-gradient(135deg, #9a6cff, #3D5AFE) !important; }
.reference-nav .nav-cta::before { background: linear-gradient(115deg, #9a6cff, #3D5AFE) !important; }

/* Nav underline + eyebrow now blend violet / cyan / pink */
.nav-links a::after,
.reference-nav .nav-links a::after {
  background: linear-gradient(90deg, #43dcff, #9a6cff, #f28bc8) !important;
  box-shadow: 0 0 10px rgba(154, 108, 255, .4) !important;
}
.eyebrow-line {
  background: linear-gradient(90deg, #43dcff, #9a6cff, #f28bc8) !important;
  box-shadow: 0 0 14px rgba(154, 108, 255, .45) !important;
}

/* ── Headings: blended violet / blue / cyan / pink text ── */
.section-heading, .cta-headline {
  background-image: linear-gradient(105deg, #fbfaff 0%, #bcd2ff 26%, #9a6cff 52%, #43dcff 76%, #f28bc8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.section-heading .wave-word,
.cta-headline .wave-word {
  background-image: linear-gradient(105deg, #fbfaff 0%, #bcd2ff 26%, #9a6cff 52%, #43dcff 76%, #f28bc8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.section-heading .kinetic .wave-word,
.kinetic {
  background-image: linear-gradient(90deg, #43dcff, #9a6cff, #f28bc8) !important;
}

/* ── Banner (audience strip) blends cyan → blue → violet → pink ── */
.audience-strip {
  background:
    linear-gradient(100deg,
      rgba(67, 226, 245, .12),
      rgba(61, 90, 254, .18) 34%,
      rgba(154, 108, 255, .18) 64%,
      rgba(242, 139, 200, .13)) !important;
  border-image: linear-gradient(90deg, #43e2f5, #3D5AFE, #9a6cff, #ef83c3, #43e2f5) 1 !important;
  box-shadow:
    0 0 42px rgba(154, 108, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -1px 0 rgba(255, 255, 255, .05) !important;
}
.audience-strip::before,
.audience-strip::after {
  background: linear-gradient(90deg, transparent, #43e2f5, #3D5AFE, #9a6cff, #ef83c3, transparent) !important;
}
.marquee-track .dot { color: #9a6cff; text-shadow: 0 0 12px #9a6cff; }

/* ── Global backdrop: violet glow so violet truly blends in ── */
.gradient-mesh {
  background:
    radial-gradient(ellipse at 18% 42%, rgba(61, 90, 254, .08), transparent 50%),
    radial-gradient(ellipse at 83% 22%, rgba(154, 108, 255, .09), transparent 48%),
    radial-gradient(ellipse at 64% 82%, rgba(242, 139, 200, .05), transparent 48%) !important;
}
body {
  background:
    radial-gradient(circle at 12% 18%, rgba(24, 99, 184, .13), transparent 35rem),
    radial-gradient(circle at 88% 12%, rgba(154, 108, 255, .14), transparent 31rem),
    radial-gradient(circle at 82% 60%, rgba(242, 139, 200, .09), transparent 38rem),
    linear-gradient(120deg, #0a142b 0%, #0a1022 55%, #160d20 100%) fixed !important;
}

/* ── Footer highlight: violet / blue glow ── */
.footer {
  background: linear-gradient(180deg, rgba(154, 108, 255, .08), rgba(61, 90, 254, .04)) !important;
  border-top: 1px solid rgba(154, 108, 255, .4) !important;
  box-shadow: 0 -10px 44px rgba(154, 108, 255, .15), inset 0 1px 0 rgba(154, 108, 255, .18) !important;
}
.footer-links h4 { color: #ffffff !important; }

/* ── Demo / pricing accents blend violet → blue ── */
.demo-video-icon { background: linear-gradient(135deg, #9a6cff, #3D5AFE) !important; box-shadow: 0 0 26px rgba(154, 108, 255, .5) !important; }
.demo-modal-icon { color: #b89bff !important; background: rgba(154, 108, 255, .14) !important; box-shadow: 0 0 24px rgba(154, 108, 255, .3) !important; }
.single-pricing-icon { background: radial-gradient(circle, rgba(154, 108, 255, .26), rgba(61, 90, 254, .12)) !important; border: 1px solid rgba(154, 108, 255, .45) !important; color: #b89bff !important; }
.demo-card:hover { border-color: rgba(154, 108, 255, .65) !important; box-shadow: 0 35px 90px rgba(0, 0, 0, .48), 0 0 45px rgba(154, 108, 255, .28) !important; }
.single-pricing-card:hover { border-color: rgba(154, 108, 255, .65) !important; box-shadow: 0 35px 90px rgba(0, 0, 0, .48), 0 0 45px rgba(154, 108, 255, .25) !important; }

/* ════════════════════════════════════════════════════════════════
   CURSOR FIX — Pricing & Demo cards
   The cards declared `cursor: pointer`, which surfaced the native OS
   arrow and made the cinematic cursor look "broken" there. Force the
   custom cursor only, and add a cursor-reactive violet/cyan glare.
   ════════════════════════════════════════════════════════════════ */
.single-pricing-card, .demo-card,
.single-pricing-card *, .demo-card * { cursor: none !important; }

.single-pricing-card::after, .demo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(154, 108, 255, .22), rgba(67, 220, 255, .10) 42%, transparent 62%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;
}
.single-pricing-card:hover::after, .demo-card:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   FOOTER CONTACT DETAILS + ADDRESS → WHITE
   Phone (Contact), email, web address and the street address now read
   in clean white to match the highlighted footer.
   ════════════════════════════════════════════════════════════════ */
.footer-links a[href^="tel:"],
.footer-links a[href^="tel:"] *,
a[href^="tel:"],
a[href^="tel:"] *,
.footer-links .email-visible,
.footer-links .web-address-highlight,
.email-visible,
.web-address-highlight {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, .18) !important;
}

/* ════════════════════════════════════════════════════════════════
   CLIENT UPDATE — Footer consistency, creative roadmap, FAQ answer stage
   ════════════════════════════════════════════════════════════════ */

/* Footer: keep all footer text in one clean color family and fix readable contact details. */
.footer,
.footer * {
  --footer-text: #f7fbff;
  --footer-muted: rgba(247, 251, 255, .86);
}
.footer .nav-brand,
.footer .nav-brand *,
.footer-brand p,
.footer-brand p *,
.footer-links h4,
.footer-links a,
.footer-links a *,
.footer-bottom p,
.footer .email-visible,
.footer .web-address-highlight,
.footer .contact-number-highlight,
.footer a[href^="tel:"],
.footer a[href^="mailto:"],
.footer a[href^="https://aptiaitutor.com"] {
  color: var(--footer-text) !important;
  -webkit-text-fill-color: var(--footer-text) !important;
  text-shadow: 0 0 14px rgba(255,255,255,.16) !important;
}
.footer-links a:hover,
.footer-links a:hover *,
.footer .email-visible:hover,
.footer .web-address-highlight:hover,
.footer .contact-number-highlight:hover {
  color: #72dbff !important;
  -webkit-text-fill-color: #72dbff !important;
  text-shadow: 0 0 18px rgba(114,219,255,.55) !important;
}
.footer-brand p,
.footer-bottom p { color: var(--footer-muted) !important; }
.footer-links h4 { letter-spacing: .13em; }

/* Training image: framed calmly now that the GIF itself has a slower frame delay. */
.training-illustration {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(67,220,255,.16);
  box-shadow: 0 28px 70px rgba(0,0,0,.25), 0 0 34px rgba(67,220,255,.08);
}
.training-illustration::after {
  content: "REALISTIC PACE";
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  color: #eafcff;
  background: rgba(4, 12, 29, .64);
  border: 1px solid rgba(67,220,255,.22);
  box-shadow: 0 0 18px rgba(67,220,255,.16);
}

/* Creative Strategic Roadmap */
.roadmap > .container { max-width: 1180px; }
.roadmap-creative {
  position: relative;
  min-height: 820px;
  padding: 24px 0 84px;
  isolation: isolate;
}
.roadmap-constellation {
  position: absolute;
  inset: -30px 0 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: .75;
}
.roadmap-constellation::before,
.roadmap-constellation::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
}
.roadmap-constellation::before {
  width: 360px; height: 360px; left: 8%; top: 8%;
  background: rgba(67,220,255,.14);
}
.roadmap-constellation::after {
  width: 420px; height: 420px; right: 7%; bottom: 5%;
  background: rgba(242,139,200,.12);
}
.roadmap-constellation span {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #72dbff;
  box-shadow: 0 0 18px #43dcff;
  animation: roadmapStar 3.6s ease-in-out infinite;
}
.roadmap-constellation span:nth-child(1){left:13%;top:12%;animation-delay:.1s}
.roadmap-constellation span:nth-child(2){left:78%;top:18%;background:#f28bc8;box-shadow:0 0 18px #f28bc8;animation-delay:.8s}
.roadmap-constellation span:nth-child(3){left:45%;top:7%;background:#9a6cff;box-shadow:0 0 18px #9a6cff;animation-delay:1.2s}
.roadmap-constellation span:nth-child(4){left:18%;top:75%;animation-delay:1.8s}
.roadmap-constellation span:nth-child(5){left:86%;top:72%;background:#9a6cff;box-shadow:0 0 18px #9a6cff;animation-delay:2.5s}
@keyframes roadmapStar { 0%,100%{transform:scale(.7);opacity:.35} 50%{transform:scale(1.6);opacity:1} }
.roadmap-spine {
  position: absolute;
  left: 50%; top: 54px; bottom: 96px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(67,220,255,.35), rgba(154,108,255,.34), rgba(242,139,200,.28), transparent);
  box-shadow: 0 0 22px rgba(67,220,255,.24);
  z-index: 1;
}
.roadmap-spine span {
  position: absolute;
  left: 50%; top: 0;
  width: 8px; height: 110px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #43dcff, #f28bc8, transparent);
  filter: blur(.5px);
  animation: roadmapScan 4.6s linear infinite;
}
@keyframes roadmapScan { from{top:-8%} to{top:100%} }
.roadmap-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 86px 1fr;
  align-items: center;
  margin: 0 0 58px;
}
.roadmap-node-right .roadmap-card { grid-column: 3; }
.roadmap-node-left .roadmap-card { grid-column: 1; }
.roadmap-orb {
  grid-column: 2;
  width: 70px; height: 70px;
  justify-self: center;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), rgba(67,220,255,.2) 34%, rgba(154,108,255,.18) 68%, rgba(2,8,22,.92));
  border: 1px solid rgba(67,220,255,.38);
  box-shadow: 0 0 36px rgba(67,220,255,.26), inset 0 0 24px rgba(154,108,255,.16);
}
.roadmap-orb::before,
.roadmap-orb::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 1px dashed rgba(67,220,255,.28);
  animation: roadmapRotate 8s linear infinite;
}
.roadmap-orb::after { inset: -18px; border-color: rgba(242,139,200,.2); animation-duration: 13s; animation-direction: reverse; }
.roadmap-orb span { font-size: 26px; filter: drop-shadow(0 0 14px rgba(67,220,255,.65)); }
@keyframes roadmapRotate { to { transform: rotate(360deg); } }
.roadmap-creative .roadmap-card {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  padding: 28px 28px 24px !important;
  border-radius: 24px !important;
  opacity: 1 !important;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(13, 24, 53, .86), rgba(21, 18, 48, .78)),
    radial-gradient(circle at 18% 0%, rgba(67,220,255,.13), transparent 42%) !important;
  border: 1px solid rgba(137, 201, 255, .18) !important;
  box-shadow: 0 24px 62px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translateZ(0);
}
.roadmap-creative .roadmap-card::before {
  content: attr(data-phase);
  position: absolute;
  right: -12px; top: -22px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,220,255,.16), transparent 66%);
  opacity: .85;
}
.roadmap-creative .roadmap-card::after {
  content: "";
  position: absolute;
  left: -30%; top: 0;
  width: 24%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-18deg);
  animation: roadmapCardSweep 5.8s ease-in-out infinite;
}
@keyframes roadmapCardSweep { 0%,72%{left:-35%;opacity:0} 82%{opacity:1} 100%{left:120%;opacity:0} }
.roadmap-creative .roadmap-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  border-color: rgba(67,220,255,.42) !important;
  box-shadow: 0 34px 80px rgba(0,0,0,.34), 0 0 44px rgba(67,220,255,.14) !important;
}
.roadmap-creative .roadmap-quarter {
  display: inline-flex !important;
  margin: 0 0 16px !important;
  color: #bff4ff !important;
  background: rgba(67,220,255,.08) !important;
  border: 1px solid rgba(67,220,255,.18) !important;
}
.roadmap-creative .roadmap-card h4 { min-height: 0 !important; font-size: 21px !important; }
.roadmap-creative .roadmap-card p { color: #b9c7dc !important; font-size: 13.5px !important; }
.roadmap-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.roadmap-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  font: 600 10px/1 'JetBrains Mono', monospace;
  color: #effdff;
  background: rgba(154,108,255,.12);
  border: 1px solid rgba(154,108,255,.22);
}
.roadmap-launch-pad {
  position: absolute;
  left: 50%; bottom: 18px;
  width: 96px; height: 96px;
  transform: translateX(-50%);
  z-index: 2;
}
.launch-ring,
.launch-core { position:absolute; inset:0; border-radius:50%; }
.launch-ring { border:1px solid rgba(67,220,255,.32); animation: roadmapPulse 2.8s ease-in-out infinite; }
.launch-core { inset: 34px; background:#43dcff; box-shadow:0 0 28px #43dcff; }
@keyframes roadmapPulse { 0%{transform:scale(.55);opacity:.9} 100%{transform:scale(1.35);opacity:0} }
@media (max-width: 900px) {
  .roadmap-creative { min-height: auto; padding-bottom: 58px; }
  .roadmap-spine { left: 35px; }
  .roadmap-node { grid-template-columns: 70px 1fr; gap: 18px; margin-bottom: 34px; }
  .roadmap-orb { grid-column: 1; width: 58px; height: 58px; }
  .roadmap-node-left .roadmap-card,
  .roadmap-node-right .roadmap-card { grid-column: 2; }
  .roadmap-launch-pad { left: 35px; width: 72px; height: 72px; }
}
@media (max-width: 560px) {
  .roadmap-node { grid-template-columns: 1fr; }
  .roadmap-spine, .roadmap-launch-pad { display: none; }
  .roadmap-orb { margin: 0 0 -10px 20px; }
  .roadmap-node-left .roadmap-card,
  .roadmap-node-right .roadmap-card { grid-column: 1; }
}

/* FAQ: left questions, right animated answer panel. */
.faq > .container { max-width: 1160px; }
.faq-shell {
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(360px, 1.14fr);
  gap: 26px;
  align-items: stretch;
}
.faq-shell .faq-list {
  max-width: none;
  gap: 12px;
}
.faq-shell .faq-item {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(16,28,61,.62), rgba(13,17,39,.48));
  border: 1px solid rgba(67,220,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.faq-shell .faq-item.open {
  background: linear-gradient(135deg, rgba(67,220,255,.13), rgba(154,108,255,.12), rgba(242,139,200,.06));
  border-color: rgba(67,220,255,.38);
  box-shadow: 0 18px 46px rgba(0,0,0,.18), 0 0 30px rgba(67,220,255,.1);
}
.faq-shell .faq-q {
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 18px 18px;
  color: #f7fbff;
  cursor: none;
}
.faq-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #9eefff;
  background: rgba(67,220,255,.08);
  border: 1px solid rgba(67,220,255,.16);
  font-size: 11px;
}
.faq-question-text { line-height: 1.45; }
.faq-shell .faq-arrow {
  color: #8ea5c3;
  transform: none !important;
  font-size: 16px;
}
.faq-shell .faq-item.open .faq-arrow,
.faq-shell .faq-item.open .faq-num { color: #ffffff !important; border-color: rgba(255,255,255,.24); }
.faq-shell .faq-a { display: none !important; }
.faq-answer-stage {
  position: sticky;
  top: 96px;
  min-height: 420px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(67,220,255,.2);
  background:
    linear-gradient(145deg, rgba(8, 18, 42, .92), rgba(13, 14, 36, .9)),
    radial-gradient(circle at 22% 18%, rgba(67,220,255,.18), transparent 38%),
    radial-gradient(circle at 85% 78%, rgba(242,139,200,.12), transparent 42%);
  box-shadow: 0 26px 76px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
}
.faq-answer-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(67,220,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,220,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
  pointer-events: none;
}
.faq-motion-field { position:absolute; inset:0; pointer-events:none; }
.faq-orbit {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(67,220,255,.22);
  transform: translate(-50%, -50%);
}
.faq-orbit-one { width: 250px; height: 250px; animation: faqOrbit 13s linear infinite; }
.faq-orbit-two { width: 340px; height: 170px; border-color: rgba(242,139,200,.2); animation: faqOrbit 18s linear infinite reverse; }
@keyframes faqOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.faq-pulse-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 110px; height: 110px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(67,220,255,.42);
  animation: faqPulse 2.8s ease-out infinite;
}
@keyframes faqPulse { from{scale:.55;opacity:.85} to{scale:2.3;opacity:0} }
.faq-motion-field i {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #43dcff;
  box-shadow: 0 0 18px #43dcff;
  animation: faqFloat 4s ease-in-out infinite;
}
.faq-motion-field i:nth-child(4){left:17%;top:24%;animation-delay:.2s}
.faq-motion-field i:nth-child(5){left:81%;top:20%;background:#9a6cff;box-shadow:0 0 18px #9a6cff;animation-delay:.9s}
.faq-motion-field i:nth-child(6){left:76%;top:76%;background:#f28bc8;box-shadow:0 0 18px #f28bc8;animation-delay:1.5s}
.faq-motion-field i:nth-child(7){left:20%;top:72%;animation-delay:2.1s}
@keyframes faqFloat { 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(-16px);opacity:1} }
.faq-answer-card {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 420px;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.faq-answer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #bff4ff;
  background: rgba(67,220,255,.08);
  border: 1px solid rgba(67,220,255,.18);
  font-size: 10px;
}
.faq-answer-card h3 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.2;
  margin-bottom: 18px;
  color: #fff;
  max-width: 680px;
}
.faq-answer-copy {
  max-width: 640px;
  color: #bfd0e5;
  font-size: 15px;
  line-height: 1.85;
}
.faq-answer-copy .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: faqWordIn .48s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i) * 22ms);
}
@keyframes faqWordIn { to { opacity: 1; transform: translateY(0); } }
.faq-answer-stage.is-swapping .faq-answer-card {
  animation: faqCardIn .52s cubic-bezier(.16,1,.3,1) both;
}
@keyframes faqCardIn { from{opacity:0;transform:translateX(22px) scale(.985);filter:blur(8px)} to{opacity:1;transform:none;filter:none} }
.faq-answer-signal { display:flex; gap:7px; margin-top:28px; align-items:flex-end; height:34px; }
.faq-answer-signal span {
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #43dcff, #9a6cff);
  box-shadow: 0 0 14px rgba(67,220,255,.42);
  animation: faqBars 1.2s ease-in-out infinite;
}
.faq-answer-signal span:nth-child(1){height:16px}
.faq-answer-signal span:nth-child(2){height:28px;animation-delay:.15s}
.faq-answer-signal span:nth-child(3){height:21px;animation-delay:.3s}
@keyframes faqBars { 50% { transform: scaleY(.55); opacity:.58; } }
@media (max-width: 900px) {
  .faq-shell { grid-template-columns: 1fr; }
  .faq-answer-stage { position: relative; top: auto; min-height: 360px; }
  .faq-answer-card { min-height: 360px; }
}
@media (max-width: 560px) {
  .faq-shell .faq-q { grid-template-columns: 34px 1fr 20px; min-height: 74px; padding: 15px 14px; }
  .faq-num { width: 30px; height: 30px; }
  .faq-answer-card { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-constellation span,
  .roadmap-spine span,
  .roadmap-orb::before,
  .roadmap-orb::after,
  .roadmap-creative .roadmap-card::after,
  .launch-ring,
  .faq-orbit,
  .faq-pulse-ring,
  .faq-motion-field i,
  .faq-answer-copy .word,
  .faq-answer-signal span {
    animation: none !important;
  }
  .faq-answer-copy .word { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE FIT PATCH — Roadmap + all-device screen fitting
   Keeps every major section inside the viewport on laptop, tablet,
   phone, landscape phone, and wide desktop screens.
   ════════════════════════════════════════════════════════════════ */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
@supports (overflow: clip) {
  html,
  body { overflow-x: clip !important; }
}
body { min-width: 320px; }

.section,
.nav,
.reference-hero,
.audience-strip,
.footer {
  max-width: 100vw;
  overflow-x: clip;
}

.container,
.reference-nav .nav-inner,
.nav-inner,
.reference-hero-content,
.hero-content {
  width: 100%;
  max-width: min(var(--fit-max, 1240px), 100vw) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(14px, 3vw, 28px) !important;
  padding-right: clamp(14px, 3vw, 28px) !important;
}
.reference-nav .nav-inner { --fit-max: 1400px; }
.reference-hero-content { --fit-max: 1360px; }

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Make text and cards shrink naturally instead of forcing horizontal scroll. */
.section-heading,
.cta-headline,
.reference-headline,
.content-pillar,
.train-card,
.roadmap-card,
.faq-item,
.faq-answer-card,
.single-pricing-card,
.demo-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Strategic Roadmap: fluid desktop layout, then stack before it can overflow. */
.roadmap {
  overflow: hidden;
}
.roadmap > .container {
  --fit-max: 1180px;
}
.roadmap .section-heading {
  width: min(100%, 850px);
  font-size: clamp(1.85rem, 5.2vw, 3.55rem) !important;
}
.roadmap-creative {
  width: 100%;
  max-width: 100%;
  min-height: auto !important;
  padding: clamp(8px, 2vw, 24px) 0 clamp(42px, 6vw, 78px) !important;
}
.roadmap-node {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) clamp(58px, 7vw, 86px) minmax(0, 1fr) !important;
  gap: clamp(10px, 2vw, 22px) !important;
  margin-bottom: clamp(28px, 5vw, 58px) !important;
}
.roadmap-node-left .roadmap-card,
.roadmap-node-right .roadmap-card {
  width: min(100%, 500px);
  max-width: 100%;
}
.roadmap-node-left .roadmap-card { justify-self: end; }
.roadmap-node-right .roadmap-card { justify-self: start; }
.roadmap-creative .roadmap-card {
  padding: clamp(20px, 2.7vw, 28px) !important;
}
.roadmap-creative .roadmap-card h4 {
  font-size: clamp(1.05rem, 2.1vw, 1.32rem) !important;
}
.roadmap-creative .roadmap-card p {
  font-size: clamp(.82rem, 1.35vw, .92rem) !important;
}
.roadmap-orb {
  width: clamp(54px, 6vw, 70px) !important;
  height: clamp(54px, 6vw, 70px) !important;
}
.roadmap-launch-pad {
  width: clamp(68px, 8vw, 96px) !important;
  height: clamp(68px, 8vw, 96px) !important;
}
.launch-core { inset: clamp(24px, 3vw, 34px) !important; }

/* Tablet and small laptop: one readable roadmap rail. */
@media (max-width: 1100px) {
  .roadmap > .container { --fit-max: 900px; }
  .roadmap-spine {
    left: clamp(34px, 7vw, 48px) !important;
    transform: none !important;
  }
  .roadmap-node {
    grid-template-columns: clamp(58px, 10vw, 76px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(12px, 3vw, 22px) !important;
  }
  .roadmap-orb {
    grid-column: 1 !important;
    justify-self: center !important;
  }
  .roadmap-node-left .roadmap-card,
  .roadmap-node-right .roadmap-card {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
  .roadmap-launch-pad {
    left: clamp(34px, 7vw, 48px) !important;
    transform: translateX(-50%);
  }
}

/* Phones: no side rail, cards become full-width and compact. */
@media (max-width: 640px) {
  .container,
  .reference-nav .nav-inner,
  .nav-inner,
  .reference-hero-content,
  .hero-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .roadmap .section-heading {
    font-size: clamp(1.65rem, 9vw, 2.25rem) !important;
    margin-bottom: 22px !important;
  }
  .roadmap-creative {
    padding-bottom: 28px !important;
  }
  .roadmap-spine,
  .roadmap-launch-pad {
    display: none !important;
  }
  .roadmap-node {
    display: block !important;
    margin-bottom: 24px !important;
  }
  .roadmap-orb {
    margin: 0 0 -12px 18px !important;
    position: relative;
    z-index: 3;
  }
  .roadmap-node-left .roadmap-card,
  .roadmap-node-right .roadmap-card {
    width: 100% !important;
  }
  .roadmap-creative .roadmap-card {
    border-radius: 18px !important;
    padding: 23px 18px 20px !important;
  }
  .roadmap-tags { gap: 6px; }
  .roadmap-tags span { font-size: 9px; padding: 6px 8px; }
}

@media (max-width: 380px) {
  body { min-width: 300px; }
  .container,
  .reference-nav .nav-inner,
  .nav-inner,
  .reference-hero-content,
  .hero-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .roadmap-creative .roadmap-card { padding: 21px 14px 18px !important; }
  .roadmap-quarter { font-size: 9px !important; }
}

/* Cross-section device fitting improvements. */
@media (max-width: 1100px) {
  .reference-hero-content,
  .hero-content,
  .content-visual-grid,
  .content-visual-grid.reverse,
  .training-layout,
  .pricing-split,
  .faq-shell {
    grid-template-columns: 1fr !important;
  }
  .content-visual-grid.reverse .content-visual,
  .content-visual-grid.reverse .content-pillars {
    order: initial !important;
  }
  .faq-answer-stage {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 760px) {
  .section { padding-left: 0 !important; padding-right: 0 !important; }
  .section-heading,
  .cta-headline {
    font-size: clamp(1.55rem, 8.5vw, 2.45rem) !important;
    line-height: 1.12 !important;
  }
  .section-intro,
  .reference-sub,
  .cta-sub {
    font-size: clamp(.92rem, 3.6vw, 1rem) !important;
  }
  .feature-pair,
  .training-cards,
  .stake-outcomes,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .content-visual,
  .content-visual img,
  .training-illustration,
  .training-illustration img {
    min-height: clamp(220px, 62vw, 340px) !important;
    height: auto !important;
  }
  .faq-shell .faq-q {
    grid-template-columns: 34px minmax(0, 1fr) 20px !important;
  }
}

@media (max-width: 520px) {
  .reference-actions,
  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .reference-actions .btn,
  .cta-buttons .btn,
  .nav-cta {
    width: 100%;
    justify-content: center;
  }
  .reference-visual {
    min-height: clamp(300px, 82vw, 440px) !important;
  }
  .hero-float-image,
  .logo-showcase {
    max-width: 86vw !important;
  }
  .faq-answer-card {
    min-height: 320px !important;
    padding: 24px 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FINAL RESPONSIVE DESKTOP/LAPTOP PATCH — 2026-07
   Fluid canvas, clearer ambient icons and a one-screen roadmap.
   This block intentionally loads last so it resolves older overrides.
   ════════════════════════════════════════════════════════════════ */

/* Scale the interface up progressively on wide displays without using
   browser zoom or a fixed transform (both of which create empty gutters). */
:root {
  font-size: clamp(15px, calc(0.32vw + 11px), 20px);
  --responsive-gutter: clamp(18px, 4vw, 72px);
  --responsive-max: 2200px;
}

.container,
.nav-inner,
.reference-nav .nav-inner,
.hero-content,
.reference-hero-content {
  width: min(calc(100vw - (2 * var(--responsive-gutter))), var(--responsive-max)) !important;
  max-width: var(--responsive-max) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.reference-nav .nav-inner { --responsive-max: 2200px; }
.reference-hero-content { --responsive-max: 2100px; }

/* Content should determine section height. This removes the oversized blank
   bands produced by forcing every section to be a full viewport tall. */
.section,
.content-architecture,
.about-us-section,
.vision {
  min-height: auto !important;
  max-height: none !important;
  padding: clamp(44px, 5.6vh, 78px) 0 !important;
  justify-content: flex-start !important;
}
.section > .container { position: relative; z-index: 2; }
.section-heading {
  font-size: clamp(2rem, 3.15vw, 4.25rem) !important;
  max-width: min(1100px, 82vw) !important;
}
.section-intro {
  font-size: clamp(.95rem, .38vw + .72rem, 1.15rem) !important;
  max-width: 900px !important;
  margin-bottom: clamp(22px, 3vh, 42px) !important;
}

/* Keep the hero cinematic and screen-filling, while allowing its two columns
   and art to grow on 1440p/4K desktops. */
.hero.reference-hero {
  min-height: 100svh !important;
  max-height: none !important;
  padding: clamp(96px, 11vh, 140px) 0 clamp(48px, 7vh, 90px) !important;
}
.reference-hero-content { gap: clamp(34px, 4vw, 88px) !important; }
.reference-headline { font-size: clamp(3rem, 4.65vw, 6.25rem) !important; }
.reference-sub { font-size: clamp(1rem, .4vw + .72rem, 1.28rem) !important; max-width: 820px; }
.reference-visual { min-height: clamp(500px, 55vh, 760px); }
.logo-showcase { width: min(500px, 78%); }

/* Clear, translucent ambient learning icons. They remain decorative, sit
   behind content, and use a glass outline rather than a blurry faint emoji. */
.floating-icons { z-index: 1; opacity: 1; }
.float-icon {
  font-size: clamp(22px, 1.35vw, 34px) !important;
  opacity: .30 !important;
  filter: saturate(.9) drop-shadow(0 0 12px rgba(91, 214, 255, .6)) !important;
  color: rgba(239, 248, 255, .95);
  padding: clamp(7px, .55vw, 11px) !important;
  border: 1px solid rgba(117, 217, 255, .22) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(67, 220, 255, .075), rgba(154, 108, 255, .055)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 22px rgba(61,90,254,.09);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mix-blend-mode: screen;
}
.float-icon:nth-child(3n) { opacity: .24 !important; }
.float-icon:nth-child(4n) { border-color: rgba(242,139,200,.22) !important; }

/* ── Strategic Roadmap: three phases visible in one desktop screen ─────── */
@media (min-width: 1101px) {
  .roadmap {
    min-height: calc(100svh - 72px) !important;
    max-height: none !important;
    padding: clamp(22px, 3.2vh, 42px) 0 !important;
    justify-content: center !important;
  }
  .roadmap > .container {
    --responsive-max: 1880px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .roadmap > .container > .eyebrow { margin-bottom: 8px !important; }
  .roadmap .section-heading {
    width: 100% !important;
    max-width: 980px !important;
    font-size: clamp(2rem, 3vw, 3.45rem) !important;
    margin-bottom: clamp(16px, 2.2vh, 28px) !important;
  }
  .roadmap-creative {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(18px, 2vw, 34px) !important;
    min-height: 0 !important;
    width: 100%;
    padding: clamp(34px, 5vh, 58px) 0 0 !important;
  }
  .roadmap-creative::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: clamp(55px, 7vh, 74px);
    height: 2px;
    background: linear-gradient(90deg, transparent, #43dcff 12%, #9a6cff 52%, #f28bc8 88%, transparent);
    box-shadow: 0 0 20px rgba(109,161,255,.35);
    opacity: .72;
    z-index: 1;
  }
  .roadmap-spine,
  .roadmap-launch-pad { display: none !important; }
  .roadmap-node {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(14px, 2vh, 22px) !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0;
  }
  .roadmap-orb {
    flex: 0 0 auto;
    align-self: center;
    width: clamp(54px, 4.2vw, 70px) !important;
    height: clamp(54px, 4.2vw, 70px) !important;
    z-index: 3;
  }
  .roadmap-node-left .roadmap-card,
  .roadmap-node-right .roadmap-card {
    flex: 1;
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
  .roadmap-creative .roadmap-card {
    display: flex !important;
    flex-direction: column;
    min-height: clamp(285px, 39vh, 390px) !important;
    padding: clamp(20px, 1.7vw, 30px) !important;
  }
  .roadmap-creative .roadmap-card h4 {
    font-size: clamp(1.08rem, 1.2vw, 1.42rem) !important;
    margin-bottom: 10px !important;
  }
  .roadmap-creative .roadmap-card p {
    font-size: clamp(.78rem, .66vw, .94rem) !important;
    line-height: 1.58 !important;
  }
  .roadmap-tags { margin-top: auto !important; padding-top: 16px; }
}

/* Compact laptop heights (e.g. 1366×768 and 1440×800). */
@media (min-width: 1101px) and (max-height: 820px) {
  .roadmap { padding: 18px 0 !important; }
  .roadmap .section-heading { font-size: clamp(1.85rem, 2.6vw, 2.8rem) !important; margin-bottom: 10px !important; }
  .roadmap-creative { padding-top: 27px !important; gap: 18px !important; }
  .roadmap-creative::before { top: 52px; }
  .roadmap-orb { width: 52px !important; height: 52px !important; }
  .roadmap-orb::after { inset: -12px; }
  .roadmap-creative .roadmap-card { min-height: 255px !important; padding: 19px 20px !important; }
  .roadmap-creative .roadmap-quarter { margin-bottom: 10px !important; }
  .roadmap-tags { padding-top: 10px; margin-top: auto !important; }
}

/* Laptop/tablet widths retain the readable vertical rail without artificial
   viewport clipping. */
@media (max-width: 1100px) {
  :root { --responsive-gutter: clamp(16px, 3vw, 30px); }
  .section, .content-architecture, .about-us-section, .vision, .roadmap {
    min-height: auto !important;
    max-height: none !important;
    padding: clamp(44px, 6vh, 68px) 0 !important;
  }
  .floating-icons { opacity: .72; }
}

@media (max-width: 768px) {
  :root { font-size: 16px; --responsive-gutter: 14px; }
  .floating-icons { display: none !important; }
  .hero.reference-hero { min-height: auto !important; }
  .reference-nav .nav-inner { width: calc(100vw - 28px) !important; }
}

/* Ultra-wide displays: enlarge rather than leaving the website stranded in
   the center of a large empty canvas. */
@media (min-width: 2000px) {
  :root { font-size: 20px; --responsive-max: 2200px; --responsive-gutter: 5vw; }
  .reference-nav .nav-inner { --responsive-max: 2400px; }
  .reference-hero-content { --responsive-max: 2250px; }
  .section-heading { max-width: 1300px !important; }
  .content-visual-grid { gap: 34px; }
  .content-pillar { padding: 18px 20px; }
}


/* ===== Arena requested fixes layered on top of live reference ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  border-radius: 12px;
  background: #0f1b3b;
  color: #ffffff;
  z-index: 100050;
  box-shadow: 0 0 0 2px rgba(67, 220, 255, 0.35);
}

/* Keep the desktop hero aligned like the live reference while removing side imbalance */
.reference-hero-content {
  max-width: 1360px !important;
  grid-template-columns: 1.02fr .98fr !important;
  gap: 42px !important;
  align-items: center !important;
}
.reference-hero .hero-text {
  padding: 20px 0 54px !important;
  max-width: 700px;
}
.reference-visual {
  min-height: 560px !important;
  place-items: center !important;
}
.logo-showcase {
  width: min(420px, 82%) !important;
}
.logo-showcase img {
  width: 84% !important;
  max-width: 84% !important;
  height: auto !important;
}

/* Make the three floating assets feel balanced without changing the overall reference composition too much */
.hero-robot,
.hero-books,
.hero-brain {
  width: 128px !important;
  height: 128px !important;
}
.hero-robot { left: 3% !important; top: 2% !important; }
.hero-books { left: 4% !important; bottom: 5% !important; }
.hero-brain { right: 2% !important; bottom: 5% !important; }
.hero-float-image img {
  object-fit: contain !important;
}

/* Slightly improve readability of smaller text without changing visible content */
.feature-pair p,
.about-story p,
.about-value p,
.stake-panel-head p,
.stake-benefits span,
.dash-feature p,
.train-card p,
.comparison-table td,
.roadmap-creative .roadmap-card p,
.faq-question-text,
.faq-answer-copy,
.footer-links a,
.footer-brand p,
.about-visual-badge small,
.vision-stage small,
.vision-proof span {
  font-size: clamp(15.5px, .22vw + 14.3px, 17px) !important;
  line-height: 1.7 !important;
}

/* Section cards close to original size, not oversized/congested */
.content-pillar { padding: 16px 18px !important; border-radius: 18px !important; }
.content-pillar > h3 { font-size: clamp(1.1rem, 1.45vw, 1.4rem) !important; margin-bottom: 8px !important; }
.feature-pair { gap: 10px !important; }
.feature-pair > div { padding: 12px 13px !important; }
.feature-pair h4 { font-size: 1rem !important; margin-bottom: 5px !important; }

/* Remove unwanted symbolic decorations */
.ambient-symbol { display: none !important; }

/* Keep section images in their own column and fully separate from text */
.content-visual-grid {
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.content-visual-grid.reverse {
  grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr) !important;
}
.content-pillars {
  position: relative;
  z-index: 2;
}
.content-visual,
.about-us-visual,
.dash-mockup,
.training-illustration {
  aspect-ratio: auto !important;
  align-self: stretch !important;
  min-height: 100% !important;
}
.content-visual {
  display: flex !important;
}
.content-visual img,
.about-us-visual > img,
.dash-mockup img,
.training-illustration img {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  max-height: none !important;
  object-fit: cover !important;
  padding: 0 !important;
}

/* Scroll controls for desktop/laptop */
.scroll-controls {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 997;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scroll-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(145deg, rgba(18,31,66,.94), rgba(12,18,39,.94));
  border: 1px solid rgba(67,220,255,.22);
  box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 0 18px rgba(67,220,255,.08);
  transition: transform .25s var(--ease-out-expo), border-color .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo);
}
.scroll-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(67,220,255,.45);
  box-shadow: 0 18px 34px rgba(0,0,0,.3), 0 0 24px rgba(67,220,255,.14);
}
.scroll-btn svg { width: 18px; height: 18px; }

/* Hero assets and vision fit tweaks */
.hero-robot,
.hero-books,
.hero-brain {
  width: 150px !important;
  height: 150px !important;
}
.hero-robot { left: 1.5% !important; top: 2% !important; }
.hero-books { left: 2% !important; bottom: 4% !important; }
.hero-brain { right: 1.5% !important; bottom: 4% !important; }
.hero-float-image img { object-fit: contain !important; }

.vision-orbit {
  overflow: hidden !important;
  max-width: 980px !important;
  padding-top: 18px !important;
}
.vision-stage {
  width: 122px !important;
  min-height: 70px !important;
  padding: 9px 10px !important;
  font-size: inherit;
}
.vision-stage strong { font-size: 11px !important; }
.vision-stage small { font-size: 9px !important; }

/* Mobile-specific requested tweaks */
@media (max-width: 900px) {
  .reference-hero-content { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .scroll-controls { display: none !important; }
  .reference-nav .nav-inner {
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    justify-content: flex-start !important;
  }
  .reference-nav .nav-logo {
    gap: 8px !important;
    min-width: 0;
    flex: 0 1 auto;
  }
  .nav-logo-tile {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    flex: 0 0 42px !important;
  }
  .header-brand-name {
    font-size: 15px !important;
    gap: 4px !important;
    min-width: 0;
  }
  .reference-nav .nav-cta {
    margin-left: auto !important;
    order: 2 !important;
    padding: 4px 6px !important;
    font-size: 6.5px !important;
    min-height: 24px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(71,116,255,.18) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .reference-nav .nav-hamburger {
    order: 3 !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
  }
  .about-us-grid,
  .content-visual-grid,
  .content-visual-grid.reverse,
  .dashboard-showcase,
  .training-layout {
    grid-template-columns: 1fr !important;
  }
  .about-us-visual,
  .content-visual,
  .dash-mockup,
  .training-illustration {
    aspect-ratio: 16 / 9 !important;
    min-height: 230px !important;
    max-height: 280px !important;
    align-self: start !important;
  }
  .about-us-visual > img,
  .content-visual img,
  .dash-mockup img,
  .training-illustration img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
  }
  .vision-orbit {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 18px 40px !important;
  }
  .vision-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    translate: 0 !important;
    width: auto !important;
    min-height: 96px !important;
    padding: 14px 16px 16px !important;
    overflow: visible !important;
  }
  .vision-stage:not(:last-of-type)::after {
    content: '↓';
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(145deg, rgba(67,220,255,.3), rgba(71,116,255,.26));
    border: 1px solid rgba(67,220,255,.22);
    box-shadow: 0 0 18px rgba(67,220,255,.12);
    z-index: 2;
  }
  .vision-stage:last-of-type::after {
    content: '↺';
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(145deg, rgba(154,108,255,.34), rgba(242,139,200,.28));
    border: 1px solid rgba(154,108,255,.24);
    box-shadow: 0 0 18px rgba(154,108,255,.14);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PLATFORM VISION — ORBITAL LOOP (matched to reference design)
   Geometry derived from the reference: 1100x543 stage, 208px core,
   7 cards on an ellipse (rx 455 / ry 228).
   ═══════════════════════════════════════════════════════════════ */

.vision-orbit {
  position: relative !important;
  display: block !important;
  width: 100%;
  max-width: 1100px !important;
  aspect-ratio: 1100 / 543;
  min-height: 0 !important;
  margin: 0 auto clamp(18px, 2.4vh, 28px) !important;
  padding: 0 !important;
  border: 1px solid rgba(120, 150, 235, .16);
  border-radius: 22px;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(56, 96, 200, .16), transparent 70%),
    linear-gradient(160deg, rgba(20, 30, 66, .72), rgba(14, 21, 50, .82));
  overflow: hidden !important;
  container-type: inline-size;
}
.vision-orbit::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(129, 157, 255, .16) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%);
}

/* ── concentric rings ─────────────────────────────────────── */
.orbit-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.orbit-rings span {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  border: 1px solid rgba(126, 152, 230, .13);
  border-radius: 50%;
  animation: orbitBreathe 6s ease-in-out infinite;
}
.orbit-rings span:nth-child(1) { width: 31.8%; aspect-ratio: 1; }
.orbit-rings span:nth-child(2) { width: 52%;   height: 78%; animation-delay: -2s; }
.orbit-rings span:nth-child(3) { width: 72%;   height: 96%; animation-delay: -4s; border-color: rgba(126,152,230,.09); }
@keyframes orbitBreathe { 50% { scale: 1.02; border-color: rgba(150, 175, 245, .22); } }

/* ── dashed orbit path + travelling dot ───────────────────── */
.orbit-flow {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
  overflow: visible;
}
.orbit-flow .orbit-ellipse {
  fill: none;
  stroke: rgba(150, 170, 240, .30);
  stroke-width: 1.4;
  stroke-dasharray: 6 10;
  vector-effect: non-scaling-stroke;
}
.orbit-flow .flow-dot {
  fill: #43dcff;
  filter: drop-shadow(0 0 9px rgba(67, 220, 255, .95));
}

/* ── core ─────────────────────────────────────────────────── */
.vision-core {
  position: absolute !important;
  left: 50%; top: 50.5%;
  translate: -50% -50%;
  width: 19.4%;
  aspect-ratio: 1;
  height: auto !important;
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 2.4% !important;
  border-radius: 50%;
  border: 1px solid rgba(120, 165, 255, .38);
  background:
    radial-gradient(circle at 50% 42%, rgba(84, 124, 232, .55), rgba(38, 60, 140, .42) 55%, rgba(24, 38, 92, .30) 100%);
  box-shadow: 0 0 70px rgba(60, 110, 235, .30), inset 0 0 46px rgba(96, 140, 255, .18);
}
.core-glow {
  position: absolute; inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(120, 170, 255, .16);
  animation: coreHalo 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes coreHalo { 0%,100% { transform: scale(1); opacity: .75 } 50% { transform: scale(1.06); opacity: .3 } }
.vision-core .core-icon {
  font-size: clamp(15px, 1.85cqi, 24px);
  line-height: 1;
  color: #4fd8ff;
  text-shadow: 0 0 20px rgba(79, 216, 255, .9);
  margin-bottom: 5.5%;
  animation: coreSpin 12s linear infinite;
}
@keyframes coreSpin { to { rotate: 360deg } }
.vision-core strong {
  display: block;
  font-size: clamp(10px, 1.36cqi, 17px);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3.5%;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.vision-core small {
  display: block;
  font-size: clamp(7.5px, 1.0cqi, 13px);
  line-height: 1.34;
  color: #9db0dc;
  max-width: 100%;
  margin: 0 auto;
}

/* ── stage cards ──────────────────────────────────────────── */
.vision-stage {
  position: absolute !important;
  width: 14.8% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  translate: -50% -50%;
  z-index: 5;
  padding: 1.05% 1.15% 1.25% !important;
  border-radius: 12px;
  border: 1px solid rgba(120, 148, 225, .22);
  background: linear-gradient(155deg, rgba(31, 44, 84, .96), rgba(23, 33, 68, .96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  text-align: left;
  transition: border-color .35s ease, box-shadow .35s ease, scale .35s cubic-bezier(.22,1,.36,1);
}
.vision-stage span {
  display: block;
  font: 600 clamp(7px, .92cqi, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace;
  color: #4cc8f5;
  margin-bottom: 3.5%;
}
.vision-stage strong {
  display: block;
  font-size: clamp(9px, 1.3cqi, 16px);
  line-height: 1.24;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3.5%;
}
.vision-stage small {
  display: block;
  font-size: clamp(7.5px, .98cqi, 13px);
  line-height: 1.3;
  color: #8fa3d2;
}
.vision-stage:hover,
.vision-stage.active {
  scale: 1.05;
  border-color: rgba(79, 216, 255, .85);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .38), 0 0 28px rgba(67, 220, 255, .22);
}

/* Positions measured from the reference layout (card centres, % of stage) */
.vision-stage[data-stage="01"] { left: 50%;   top: 9.4%;  }
.vision-stage[data-stage="02"] { left: 80%;   top: 24.9%; }
.vision-stage[data-stage="03"] { left: 87.4%; top: 59.5%; }
.vision-stage[data-stage="04"] { left: 66.6%; top: 87.2%; }
.vision-stage[data-stage="05"] { left: 33.3%; top: 87.2%; }
.vision-stage[data-stage="06"] { left: 12.6%; top: 59.5%; }
.vision-stage[data-stage="07"] { left: 20%;   top: 24.9%; }

/* ── proof chips ──────────────────────────────────────────── */
.vision-proof {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.vision-proof span {
  padding: 15px 12px;
  text-align: center;
  border: 1px solid rgba(120, 148, 225, .20);
  background: linear-gradient(155deg, rgba(31, 44, 84, .82), rgba(23, 33, 68, .82));
  border-radius: 14px;
  color: #93a7d6;
  font-size: clamp(11px, .82vw, 13.5px);
}
.vision-proof b { color: #fff; font-size: clamp(13px, 1vw, 16px); margin-right: 5px; }

/* ── responsive: keep the orbit while it still reads, then stack ── */
@media (max-width: 1120px) {
  .vision-orbit { max-width: 96vw !important; }
}
@media (max-width: 860px) {
  .vision-orbit {
    aspect-ratio: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 24px 18px !important;
    container-type: normal;
  }
  .vision-orbit::before,
  .orbit-rings, .orbit-flow { display: none !important; }
  .vision-core {
    position: relative !important;
    left: auto; top: auto; translate: 0;
    width: auto; aspect-ratio: auto;
    grid-column: 1 / -1;
    border-radius: 20px;
    padding: 22px 18px !important;
  }
  .vision-core .core-icon { font-size: 22px; margin-bottom: 8px; }
  .vision-core strong { font-size: 17px; margin-bottom: 6px; }
  .vision-core small { font-size: 12px; }
  .vision-stage {
    position: relative !important;
    left: auto !important; top: auto !important;
    translate: 0;
    width: auto !important;
    padding: 13px 14px !important;
  }
  .vision-stage span { font-size: 9px; margin-bottom: 5px; }
  .vision-stage strong { font-size: 13px; margin-bottom: 4px; }
  .vision-stage small { font-size: 10.5px; }
  .vision-proof { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .vision-orbit { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-rings span, .core-glow, .vision-core .core-icon { animation: none !important; }
  .orbit-flow .flow-dot { display: none; }
}

/* Retire the legacy stacked-arrow treatment from the previous vision layout. */
.vision-stage::after,
.vision-stage:not(:last-of-type)::after,
.vision-stage:last-of-type::after { content: none !important; display: none !important; }

/* ═══════════════════════════════════════════════════
   STRATEGIC PARTNER — CONGNISYNC FUTURE
   ═══════════════════════════════════════════════════ */
.partners { position: relative; }

.partner-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 22px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(154, 108, 255, .16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 12%, rgba(63, 139, 255, .13), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(242, 139, 200, .09), transparent 46%),
    linear-gradient(145deg, rgba(30, 46, 88, .38), rgba(11, 19, 43, .30));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.partner-aura {
  position: absolute; inset: -40% 55% 40% -20%;
  background: radial-gradient(circle, rgba(84, 204, 255, .10), transparent 62%);
  pointer-events: none;
  animation: partnerAura 16s ease-in-out infinite alternate;
}
@keyframes partnerAura {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  to   { transform: translate3d(14%, 10%, 0) scale(1.18); opacity: 1; }
}

/* ── Identity card ── */
.partner-identity {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 11px;
  padding: 20px 20px 22px;
  border: 1px solid rgba(121, 160, 246, .18);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(20, 33, 68, .78), rgba(11, 19, 43, .62));
  backdrop-filter: blur(14px);
  transition: .35s var(--ease-out-expo);
}
.partner-identity:hover {
  border-color: rgba(65, 211, 255, .34);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .24), 0 0 34px rgba(84, 204, 255, .08);
}
.partner-tag {
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content;
  padding: 6px 12px;
  border: 1px solid rgba(72, 228, 176, .26);
  border-radius: 999px;
  background: rgba(15, 46, 48, .42);
  color: #6ff0c2;
  font-size: 9px; font-weight: 600; letter-spacing: .14em;
}
.partner-tag .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #48e4b0; box-shadow: 0 0 10px #48e4b0; }

.partner-logo-frame {
  display: grid; place-items: center;
  padding: 20px 18px;
  min-height: 132px;
  border: 1px solid rgba(154, 108, 255, .14);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(12, 22, 48, .92), rgba(18, 30, 62, .78));
  overflow: hidden;
}
.partner-logo-img {
  width: auto; max-width: 100%;
  max-height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(84, 204, 255, .18));
  transition: .4s var(--ease-out-expo);
}
.partner-identity:hover .partner-logo-img { transform: scale(1.04); }

.partner-name {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.2;
  color: #f4f7ff;
  margin: 2px 0 0;
}
.partner-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #63dcff;
  margin: 0;
}
.partner-summary { font-size: 11px; line-height: 1.55; color: #a6b3ce; margin: 2px 0 0; }

.partner-meta { display: grid; gap: 7px; margin-top: 2px; }
.partner-meta span {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(154, 108, 255, .12);
  border-radius: 10px;
  background: rgba(26, 40, 78, .30);
  font-size: 10.5px; color: #c3cee6;
}
.partner-meta b {
  min-width: 62px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #8fa0c2;
}

.partner-visit {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: auto;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(105deg, #3d70ff, #9a6cff);
  color: #f5f8ff;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 10px 28px rgba(73, 94, 255, .25);
  transition: .35s var(--ease-out-expo);
}
.partner-visit:hover { translate: 0 -3px; box-shadow: 0 16px 38px rgba(75, 105, 255, .42); }
.partner-visit b { font-size: 15px; line-height: 1; }

/* ── Detail column ── */
.partner-detail {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
}
.partner-intro {
  padding: 16px 18px;
  border: 1px solid rgba(154, 108, 255, .14);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(34, 50, 93, .44), rgba(15, 24, 52, .27));
}
.partner-intro h4 {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.25;
  color: #f4f7ff;
  margin: 5px 0 8px;
}
.partner-intro p { font-size: 11px; line-height: 1.6; color: #a6b3ce; margin: 0; }

.partner-capabilities {
  padding: 15px 18px;
  border: 1px solid rgba(154, 108, 255, .12);
  border-radius: 16px;
  background: rgba(26, 40, 78, .24);
}
.partner-cap-label {
  display: block;
  font-size: 8.5px; letter-spacing: .14em; color: #8fa0c2;
  margin-bottom: 10px;
}
.partner-cap-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.partner-cap-grid span {
  padding: 7px 12px;
  border: 1px solid rgba(105, 151, 255, .18);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(55, 112, 255, .16), rgba(154, 108, 255, .12));
  font-size: 10px; color: #d3dcf1;
  transition: .3s var(--ease-out-expo);
}
.partner-cap-grid span:hover {
  border-color: rgba(65, 211, 255, .38);
  color: #ffffff;
  translate: 0 -2px;
}

.partner-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.partner-pillar {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 14px;
  border: 1px solid rgba(154, 108, 255, .12);
  border-radius: 14px;
  background: rgba(26, 40, 78, .27);
  transition: .3s var(--ease-out-expo);
}
.partner-pillar:hover {
  translate: 0 -3px;
  border-color: rgba(65, 211, 255, .32);
  background: rgba(33, 51, 96, .40);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
.partner-pillar-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(105, 151, 255, .20);
  background: linear-gradient(145deg, rgba(55, 112, 255, .23), rgba(154, 108, 255, .18));
  color: #57dfff; font-size: 13px;
}
.partner-pillar h5 { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 600; color: #ffffff; margin: 0 0 3px; }
.partner-pillar p { font-size: 9.5px; line-height: 1.45; color: #95a3c0; margin: 0; }

/* ── Footnote ── */
.partner-footnote {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 14px 18px;
  border-top: 1px solid rgba(154, 108, 255, .09);
  color: #8d9ab6; font-size: 11px;
}
.partner-footnote p { flex: 1; margin: 0; }
.partner-footnote .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #48e4b0; box-shadow: 0 0 10px #48e4b0; flex: none; }
.partner-footnote a { color: #63dcff; font-weight: 600; white-space: nowrap; }
.partner-footnote a b { font-size: 17px; margin-left: 5px; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .partner-showcase { grid-template-columns: 1fr; }
  .partner-visit { margin-top: 6px; }
}
@media (max-width: 760px) {
  .partner-pillars { grid-template-columns: 1fr; }
  .partner-pillar { flex-direction: row; align-items: flex-start; gap: 11px; }
  .partner-pillar-icon { flex: none; }
}
@media (max-width: 600px) {
  .partner-showcase { padding: 13px; border-radius: 20px; }
  .partner-identity { padding: 16px; }
  .partner-logo-frame { min-height: 112px; padding: 16px 14px; }
  .partner-logo-img { max-height: 78px; }
  .partner-footnote { flex-wrap: wrap; align-items: flex-start; }
  .partner-footnote p { flex-basis: 78%; }
  .partner-footnote a { margin-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-aura { animation: none; }
}

/* ═══════════════════════════════════════════════════
   FIX 1 — SECTION HEADINGS: SOLID WHITE + HIGHLIGHT
   Earlier rules clipped a multi-stop gradient to the
   text, so headings never rendered white. These
   overrides restore solid white and move the colour
   accent onto the .kinetic highlight words only.
   ═══════════════════════════════════════════════════ */
.section-heading,
.cta-headline,
.section-heading.reveal-words,
.section-heading.reveal-words.in-view,
.cta-headline.reveal-words,
.cta-headline.reveal-words.in-view,
.section-heading.text-motion,
.cta-headline.text-motion,
.section-heading.universal-wave-text,
.cta-headline.universal-wave-text,
.roadmap .section-heading {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  filter: none !important;
  text-shadow: 0 2px 26px rgba(9, 17, 40, .55) !important;
}

/* Plain words inside a heading stay white. */
.section-heading .wave-word,
.cta-headline .wave-word,
.section-heading.universal-wave-text .wave-word,
.cta-headline.universal-wave-text .wave-word {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── The highlight: .kinetic keywords — solid white like the rest of the heading ── */
.section-heading .kinetic,
.cta-headline .kinetic,
.section-heading .kinetic .wave-word,
.cta-headline .kinetic .wave-word,
.kinetic {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 2px 26px rgba(9, 17, 40, .55) !important;
  filter: none !important;
}

/* Keep the hero headline's own accent treatment intact. */
.reference-headline {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 2px 28px rgba(9, 17, 40, .5) !important;
}
.reference-headline span {
  background: linear-gradient(100deg, #3D5AFE 0%, #9a6cff 100%) !important;
  background-size: 160% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* Wave hover keeps its lift; only the glow is re-tuned for white text. */
.section-heading .wave-word.wave-active,
.cta-headline .wave-word.wave-active {
  text-shadow: 0 0 20px rgba(120, 190, 255, .45) !important;
}
.section-heading .kinetic .wave-word.wave-active,
.cta-headline .kinetic .wave-word.wave-active {
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   FIX 2 — "START LEARNING" NAV CTA
   The label was a bare text node, so the ::before
   gradient layer painted over it on hover and the
   text disappeared. The label now sits in its own
   stacking context above the hover fill.
   ═══════════════════════════════════════════════════ */
.nav-cta { position: relative; isolation: isolate; }
.nav-cta::before { z-index: 0; }
.nav-cta .nav-cta-label {
  position: relative;
  z-index: 2;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  white-space: nowrap;
}
.nav-cta:hover .nav-cta-label,
.nav-cta:focus-visible .nav-cta-label,
.reference-nav .nav-cta:hover .nav-cta-label,
.reference-nav .nav-cta:focus-visible .nav-cta-label {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  opacity: 1;
  visibility: visible;
}
.nav-cta:focus-visible {
  outline: 2px solid #9fd0ff;
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════
   PARTNER CARD — OFFICIAL LOGO + NO VISIT BUTTON
   The supplied logo is a gold-framed maroon mark that
   is taller than the previous wordmark, so the frame
   gets more room. The old cyan glow was tuned for a
   white logo and clashed with the gold, so it is
   replaced with a neutral depth shadow.
   ═══════════════════════════════════════════════════ */
.partner-logo-frame {
  min-height: 172px;
  padding: 18px 16px;
  background: linear-gradient(150deg, rgba(9, 17, 38, .96), rgba(16, 27, 56, .86));
}
.partner-logo-img {
  max-height: 148px;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .45));
}

/* With the CTA gone, the meta rows close out the card. */
.partner-identity .partner-meta { margin-top: auto; padding-top: 2px; }

@media (max-width: 980px) {
  .partner-identity .partner-meta { margin-top: 4px; }
}
@media (max-width: 600px) {
  .partner-logo-frame { min-height: 140px; padding: 14px 12px; }
  .partner-logo-img { max-height: 118px; }
}

/* ═══════════════════════════════════════════════════
   HEADER BRAND NAME — SOLID WHITE
   "AI TUTOR" carried a cyan→pink gradient clipped to
   the text. Both words now render solid white so the
   full brand name reads as one consistent lockup.
   ═══════════════════════════════════════════════════ */
.header-brand-name,
.header-brand-name b,
.header-brand-name span {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════
   ALL HEADINGS — PURE WHITE
   Sub-headings were rendering in off-white tints
   (#dfe8ff, #f4f7ff, #f7f8ff, #f6f3fb) rather than
   true white. Every h1–h6 is now #ffffff.

   Two deliberate accents are preserved:
     · .kinetic   — the gradient keyword in section headings
     · .stake-panel-head h3 span — the stakeholder accent phrase
   ═══════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
.footer h4,
.footer-links h4,
.content-pillar h3,
.content-pillar h4,
.feature-pair h4,
.about-story h3,
.about-value h4,
.stake-panel-head h3,
.roadmap-card h4,
.train-card h4,
.partner-name,
.partner-intro h4,
.partner-pillar h5,
.sub-heading,
h1.text-motion, h2.text-motion, h3.text-motion,
h4.text-motion, h5.text-motion, h6.text-motion {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Restore the two intended gradient accents — these must stay VISIBLE white. */
.section-heading .kinetic,
.cta-headline .kinetic,
.section-heading .kinetic .wave-word,
.cta-headline .kinetic .wave-word,
.kinetic {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 2px 26px rgba(9, 17, 40, .55) !important;
}
/* The word-wave engine wraps EVERY word in <span class="wave-word">, so the
   accent must target only the original unclassed span (and its wave-words
   inside it), never every span in the heading. */
.stake-panel-head h3 > span:not([class]),
.stake-panel-head h3 > span:not([class]) .wave-word {
  background: linear-gradient(90deg, #4adfff, #9a6cff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Plain wave-words in these headings stay white. */
.stake-panel-head h3 > .wave-word {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
/* Hero headline keeps its own accent span. */
.reference-headline span {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ═══════════════════════════════════════════════════════
   FINAL GUARD — ALL HEADING TEXT MUST BE VISIBLE WHITE
   This sits at the very end so no earlier rule can
   leave headings invisible or transparent.
   ═══════════════════════════════════════════════════════ */
.section-heading,
.section-heading *,
.cta-headline,
.cta-headline *,
.section-heading .kinetic,
.section-heading .kinetic .wave-word,
.cta-headline .kinetic,
.cta-headline .kinetic .wave-word,
.section-heading .wave-word,
.cta-headline .wave-word,
.section-heading.universal-wave-text .wave-word,
.cta-headline.universal-wave-text .wave-word,
.section-heading.text-motion,
.cta-headline.text-motion,
.roadmap .section-heading,
.roadmap .section-heading * {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════
   STRATEGIC PARTNERSHIP — BOOST SMALL TEXT READABILITY
   ═══════════════════════════════════════════════════════ */
.partner-tag { font-size: 11px !important; padding: 8px 14px !important; }
.partner-tagline { font-size: 11.5px !important; }
.partner-summary { font-size: 13px !important; line-height: 1.6 !important; }
.partner-meta span { font-size: 12.5px !important; }
.partner-meta b { font-size: 10px !important; }
.partner-intro p { font-size: 13px !important; line-height: 1.65 !important; }
.partner-cap-label { font-size: 10px !important; }
.partner-cap-grid span { font-size: 11.5px !important; padding: 9px 14px !important; }
.partner-pillar p { font-size: 11.5px !important; line-height: 1.5 !important; }
.partner-footnote { font-size: 12.5px !important; }