/* ==========================================================================
   ACX TOTALITY — Master Stylesheet
   Design Guidelines Compliant (Inter, CSS Variables, Responsive System)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Imports & CSS Reset
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg-dark);
  color: var(--color-white);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. Design Tokens (Global CSS Variables)
   -------------------------------------------------------------------------- */
:root {
  /* Typography */
  --font-primary: 'Inter', sans-serif;

  /* Standard Typography Scale (from ACX Design Guidelines) */
  --font-size-hero: 42px;
  --font-size-section: 42px;
  --font-size-subheading: 18px;
  --font-size-body: 16px;
  --font-size-nav: 14px;
  --font-size-btn: 14px;
  --font-size-tag: 11px;
  --font-size-sm: 14px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Color Palette */
  --color-black: #000000;
  --color-bg-dark: #07060a;
  --color-bg-card: rgba(255, 255, 255, 0.03);
  --color-white: #ffffff;
  --color-text-muted: #9e9cb0;
  --color-border-glow: rgba(255, 255, 255, 0.12);

  /* Brand Accents & Gradients (Electric Blue, Vibrant Purple, Neon Pink) */
  --color-accent-blue: #3b82f6;
  --color-accent-purple: #a855f7;
  --color-accent-pink: #ec4899;
  --color-accent-primary: #a855f7;
  --color-accent-orange: #a855f7;
  --color-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #a855f7 50%, #ec4899 100%);
  --color-gradient-glow: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(59, 130, 246, 0.2) 45%, rgba(7, 6, 10, 0) 70%);

  /* Spacing System */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --section-gap: 96px;

  /* Layout Container */
  --container-max-width: 1280px;
  --container-padding: 32px;

  /* Glassmorphism */
  --glass-bg: rgba(18, 16, 25, 0.65);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(16px);
  --radius-pill: 50px;
  --radius-card: 16px;
  --radius-sm: 8px;
}

/* --------------------------------------------------------------------------
   3. Base Container & Utility Classes
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.gradient-text {
  background: var(--color-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  display: inline;
}

/* --------------------------------------------------------------------------
   4. Buttons System (Reusable across entire site)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  height: 48px;
  padding: 0 30px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-gradient-primary);
  background-size: 200% 200%;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.45);
  animation: fluidButtonGlow 5s ease infinite alternate;
}

@keyframes fluidButtonGlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(168, 85, 247, 0.75), 0 0 15px rgba(236, 72, 153, 0.5);
  filter: brightness(1.1);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   5. Header & Floating Glass Navbar
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-md);
}

.navbar {
  width: 100%;
  max-width: var(--container-max-width);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-left: 4px;
}

.brand-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  padding: 6px 6px;
  white-space: nowrap;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.nav-icon {
  font-size: 15px;
  opacity: 0.85;
  transition: transform 0.25s ease, color 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(192, 132, 252, 0.8);
}

/* Fixed Vertical Floating Demo Button (Right Edge 0px) */
.floating-side-demo-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  background: var(--color-gradient-primary);
  background-size: 200% 200%;
  color: #ffffff;
  padding: 22px 10px;
  border-radius: 8px 0 0 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-right: none;
  box-shadow: -4px 0 20px rgba(168, 85, 247, 0.45), 0 0 15px rgba(236, 72, 153, 0.3);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fluidButtonGlow 5s ease infinite alternate;
}

.floating-side-demo-btn span {
  font-family: var(--font-primary, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  user-select: none;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.floating-side-demo-btn:hover {
  transform: translateY(-50%) translateX(-4px);
  box-shadow: -6px 0 28px rgba(168, 85, 247, 0.75), 0 0 25px rgba(236, 72, 153, 0.6);
  filter: brightness(1.15);
  color: #ffffff;
}

.floating-side-demo-btn:active {
  transform: translateY(-50%) translateX(-2px);
}

@media (max-width: 768px) {
  .floating-side-demo-btn {
    padding: 16px 8px;
    border-radius: 6px 0 0 6px;
  }

  .floating-side-demo-btn span {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

/* ==========================================================================
   Request a Demo Pop-Up Modal (ACX TOTALITY Theme)
   ========================================================================== */
.demo-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.demo-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.demo-modal-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(88, 28, 135, 0.55) 0%, rgba(30, 27, 75, 0.72) 40%, rgba(6, 4, 14, 0.94) 85%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.35s ease;
}

.demo-modal-space-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 650px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.32) 0%, rgba(59, 130, 246, 0.2) 45%, transparent 75%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 1;
}

.demo-modal-space-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(168, 85, 247, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 85, 247, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

.demo-modal-stars-canvas-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  mask-image: 
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 12%, black 25%, black 75%, rgba(0, 0, 0, 0.7) 88%, transparent 100%),
    radial-gradient(ellipse 90% 85% at 50% 50%, black 45%, transparent 100%);
  -webkit-mask-image: 
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 12%, black 25%, black 75%, rgba(0, 0, 0, 0.7) 88%, transparent 100%),
    radial-gradient(ellipse 90% 85% at 50% 50%, black 45%, transparent 100%);
}

.demo-modal-stars-canvas-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.demo-modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
  display: flex;
  justify-content: center;
}

.demo-modal-card {
  position: relative;
  width: 100%;
  background: linear-gradient(145deg, rgba(22, 14, 38, 0.96) 0%, rgba(12, 8, 22, 0.98) 100%);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 20px;
  padding: 36px 36px 32px;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.8), 0 0 50px rgba(168, 85, 247, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  transform: scale(0.92) translateY(18px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
}

.demo-modal-backdrop.active .demo-modal-card {
  transform: scale(1) translateY(0);
}

[data-theme="light"] .demo-modal-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 246, 255, 0.98) 100%);
  border-color: rgba(168, 85, 247, 0.28);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 40px rgba(168, 85, 247, 0.15);
}

/* Ambient glow in modal */
.demo-modal-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}

/* Close Button */
.demo-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 3;
}

[data-theme="light"] .demo-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333333;
}

.demo-modal-close:hover {
  background: rgba(236, 72, 153, 0.25);
  border-color: rgba(236, 72, 153, 0.6);
  color: #ffffff;
  transform: rotate(90deg) scale(1.08);
}

/* Header */
.demo-modal-header {
  text-align: left;
  margin-bottom: 22px;
  padding-right: 42px;
}

.demo-modal-title {
  font-family: var(--font-primary, 'Inter', sans-serif);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}

[data-theme="light"] .demo-modal-title {
  color: #111827;
}

/* Form Layout */
.demo-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 540px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}

[data-theme="light"] .form-label {
  color: #374151;
}

.form-label .req {
  color: #ec4899;
  font-weight: 700;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: color 0.25s ease;
}

[data-theme="light"] .input-icon {
  color: rgba(0, 0, 0, 0.35);
}

.form-input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-family: var(--font-primary, 'Inter', sans-serif);
  font-size: 13.5px;
  color: #ffffff;
  outline: none;
  transition: all 0.25s ease;
}

[data-theme="light"] .form-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #111827;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

[data-theme="light"] .form-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.form-input:focus {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
}

.input-wrapper:focus-within .input-icon {
  color: #c084fc;
}

/* Captcha Verification Styling */
.form-row-captcha {
  grid-template-columns: 1fr;
}

.captcha-calc-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.captcha-equation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 44px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 8px;
  font-family: var(--font-primary, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
  user-select: none;
}

[data-theme="light"] .captcha-equation {
  background: rgba(168, 85, 247, 0.08);
  color: #111827;
}

.captcha-input {
  max-width: 110px;
  padding: 0 14px;
  text-align: center;
  font-weight: 700;
}

.captcha-reload-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.25s ease;
}

[data-theme="light"] .captcha-reload-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #555;
}

.captcha-reload-btn:hover {
  color: #ffffff;
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.5);
  transform: rotate(180deg);
}

/* Submit Button Row */
.form-submit-row {
  margin-top: 8px;
}

.demo-form-submit-btn {
  width: 100%;
  height: 50px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-gradient-primary);
  background-size: 200% 200%;
  color: #ffffff;
  box-shadow: 0 6px 24px rgba(168, 85, 247, 0.45);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fluidButtonGlow 5s ease infinite alternate;
}

.demo-form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(168, 85, 247, 0.75), 0 0 20px rgba(236, 72, 153, 0.5);
  filter: brightness(1.1);
}

.demo-form-submit-btn:active {
  transform: translateY(0);
}

.demo-form-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Feedback Box */
.demo-form-feedback {
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  animation: modalFadeIn 0.3s ease;
}

.demo-form-feedback.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.demo-form-feedback.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Toggle Hamburger */
.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-white);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
}

/* --------------------------------------------------------------------------
   6. Hero Section with Electric Purple/Blue Atmosphere
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 100vh;
  padding-top: 180px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 15%, #180d2b 0%, #0d0918 50%, #07060a 100%);
}

/* Radial Glow Layer behind Hero */
.hero-glow-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 700px;
  background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.35) 0%, rgba(59, 130, 246, 0.22) 45%, rgba(7, 6, 10, 0) 80%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}

/* Perspective Grid Floor Animation Effect */
.hero-grid-bg {
  display: none;
}

/* Horizon Ambient Lighting Line */
.hero-horizon-line {
  display: none;
}

/* Bottom Gradient Soft Transition Fade Overlay */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg-dark) 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Headline Styling */
.hero-title {
  font-family: var(--font-primary);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* Sub-headline Content */
.hero-description {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   6. Real Estate Dashboard Preview & Animated Border Gradient
   -------------------------------------------------------------------------- */
.dashboard-preview-wrapper {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: var(--space-lg) auto 0;
  border-radius: 20px;
  padding: 1.5px;
  background: transparent;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 35px rgba(168, 85, 247, 0.3);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  overflow: hidden;
}

.dashboard-preview-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 55px rgba(168, 85, 247, 0.55);
}

/* Fluid Gradient Ambient Glow Underlay */
.dashboard-fluid-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(147, 51, 234, 0.3) 50%, rgba(219, 39, 119, 0.25) 100%);
  background-size: 200% 200%;
  animation: fluidGradient 6s ease infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes fluidGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* Rotating Conic Border Mask Effect */
.dashboard-border-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 10;
}

.dashboard-border-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  width: 300%;
  transform: translate(-50%, -50%);
  background: conic-gradient(transparent 0%,
      transparent 60%,
      rgb(59, 130, 246) 80%,
      rgb(168, 85, 247) 90%,
      rgb(236, 72, 153) 100%);
  animation: spinConicBorder 4s linear infinite;
}

@keyframes spinConicBorder {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.dashboard-frame {
  position: relative;
  width: 100%;
  border-radius: 19px;
  overflow: hidden;
  background: #0a0b10;
  z-index: 2;
}

.dashboard-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 18px;
}



/* --------------------------------------------------------------------------
   7. Responsive Design System
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --font-size-hero: 44px;
    --font-size-subheading: 17px;
  }

  .site-header {
    top: 16px;
  }

  .hero-section {
    padding-top: 150px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-hero: 34px;
    --font-size-subheading: 15px;
    --container-padding: 20px;
  }

  .nav-menu {
    position: fixed;
    top: 80px;
    left: 20px;
    right: 20px;
    background: rgba(15, 13, 22, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    padding: var(--space-md);
    flex-direction: column;
    gap: var(--space-md);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-toggle {
    display: block;
  }

  .nav-actions {
    display: none;
  }



  .hero-horizon-line {
    top: 360px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-hero: 30px;
  }

  .brand-logo {
    height: 20px;
  }

  .navbar {
    padding: 8px 16px;
  }
}

/* --------------------------------------------------------------------------
   8. Trusted Partners & Scrolling Logo Section
   -------------------------------------------------------------------------- */
.partners-section {
  padding: 20px 0 80px;
  background: var(--color-bg-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: none;
}

.logo-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: marqueeInfiniteScroll 60s linear infinite;
}

.logo-marquee-wrapper:hover .logo-marquee-track {
  animation-play-state: paused;
}

.partner-logo {
  height: 42px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
  filter: brightness(0.95);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  user-select: none;
}

.partner-logo:hover {
  opacity: 1;
  filter: brightness(1.2);
  transform: scale(1.08);
}

@keyframes marqueeInfiniteScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   9. Breakthrough Real Estate Solutions Section & Carousel
   -------------------------------------------------------------------------- */
.solutions-section {
  padding: var(--section-gap) 0;
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, #120921 40%, var(--color-bg-dark) 100%);
  position: relative;
  overflow: hidden;
}

.solutions-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.solutions-header-text {
  max-width: 760px;
  text-align: left;
}

.solutions-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-section);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.solutions-subheading {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Header Navigation Arrows (Matching Reference Screenshot) */
.solutions-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.solutions-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.solutions-nav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(168, 85, 247, 0.4);
  transform: translateY(-2px);
  color: #c084fc;
}

.solutions-nav-btn:active {
  transform: translateY(0);
}

/* Horizontal Cards Carousel Track */
.solutions-carousel-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 10px 0 20px;
}

.solutions-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-top: 18px;
  padding-bottom: 24px;
  padding-left: max(var(--container-padding), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)));
  padding-right: max(var(--container-padding), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)));
  scroll-padding-left: max(var(--container-padding), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)));
  scroll-padding-right: max(var(--container-padding), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)));
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.solutions-track::after {
  content: '';
  flex: 0 0 1px;
  margin-right: max(calc(var(--container-padding) - 24px), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding) - 24px));
}

.solutions-track::-webkit-scrollbar {
  display: none;
}

/* Solution Card Design */
.solution-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: rgba(18, 15, 28, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  backdrop-filter: blur(12px);
}

.solution-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.25);
}

/* Card Visual Media Box */
.card-media-box {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: #120f1c;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-svg-graphic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tag Pill Badge */
.card-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.card-title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin-bottom: 8px;
  line-height: 1.3;
}

.card-desc {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .solutions-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .solutions-track {
    padding-top: 18px;
    padding-bottom: 24px;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    scroll-padding-left: var(--container-padding);
    scroll-padding-right: var(--container-padding);
  }
}

@media (max-width: 600px) {
  .solution-card {
    flex: 0 0 280px;
  }
}

/* --------------------------------------------------------------------------
   10. Customer Experience & Reliability Section (Swift, Effortless, Reliable)
   -------------------------------------------------------------------------- */
.experience-section {
  padding: var(--section-gap) 0;
  position: relative;
  background: var(--color-bg-dark);
  overflow: hidden;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* Left Content Column */
.experience-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.experience-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.experience-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #a855f7;
  box-shadow: 0 0 8px #a855f7;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/* Heading: Line 1 Gradient Text, Line 2 Plain Text */
.experience-title {
  font-family: var(--font-primary);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 20px;
}

.experience-gradient-text {
  background: var(--color-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  display: inline;
}

.experience-plain-text {
  color: var(--color-white);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  display: inline;
}

.experience-desc {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
}

.experience-highlights {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 480px;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.highlight-item:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.35);
  transform: translateX(4px);
}

/* Active Selected Highlight Box with Gradient Glow */
.highlight-item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(168, 85, 247, 0.22) 50%, rgba(236, 72, 153, 0.18) 100%);
  border: 1px solid rgba(168, 85, 247, 0.65);
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateX(6px);
}

.highlight-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Gradient Icon on Active Selected Box without border */
.highlight-item.active .highlight-icon {
  background: var(--color-gradient-primary);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.45);
}

.highlight-info h4 {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 2px;
  transition: color 0.3s ease;
}

.highlight-item.active .highlight-info h4 {
  color: #ffffff;
}

.highlight-info p {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.45;
  transition: color 0.3s ease;
}

.highlight-item.active .highlight-info p {
  color: rgba(255, 255, 255, 0.9);
}

/* Right Column: 600px Square Outer Box & Inner Square Box */
.experience-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.square-outer-box {
  width: 600px;
  height: 600px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: var(--radius-card);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.square-outer-box:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(168, 85, 247, 0.25);
}

.square-outer-glow {
  position: absolute;
  inset: -15px;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.22) 0%, rgba(59, 130, 246, 0.15) 50%, transparent 70%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.square-inner-box {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

/* Image Tab Panels (Anchored to Bottom-Right with 0 Gap and Top-Left Space) */
.experience-tab-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 0;
  padding-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate(14px, 14px) scale(0.97);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
  pointer-events: none;
}

.experience-tab-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}

.experience-panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  border-top-left-radius: var(--radius-card);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: none;
  border-bottom: none;
  box-shadow: -15px -15px 40px rgba(0, 0, 0, 0.35);
  display: block;
}

.site-visit-img {
  object-fit: cover;
  object-position: top left;
}

@media (max-width: 1100px) {
  .square-outer-box {
    width: 500px;
    height: 500px;
  }
}

@media (max-width: 992px) {
  .experience-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .experience-content {
    max-width: 100%;
  }

  .square-outer-box {
    width: 100%;
    max-width: 520px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 768px) {
  .experience-title {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .experience-title {
    font-size: 28px;
  }

  .square-outer-box {
    padding: 0;
    border-radius: var(--radius-card);
  }

  .square-inner-box {
    border-radius: inherit;
  }

  .experience-tab-panel {
    padding-top: 24px;
    padding-left: 24px;
  }

  .experience-panel-img {
    border-top-left-radius: var(--radius-card);
  }

  .highlight-item {
    padding: 14px 16px;
    border-radius: var(--radius-card);
  }
}

/* --------------------------------------------------------------------------
   11. Built for Smarter Real Estate Growth Section
   -------------------------------------------------------------------------- */
.growth-section {
  padding: var(--section-gap) 0 140px;
  position: relative;
  background: var(--color-bg-dark);
  overflow: visible;
}

.growth-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.growth-title {
  font-family: var(--font-primary);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 16px;
}

.growth-subheading {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 760px;
  margin: 0 auto;
}

.growth-cards-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.growth-card {
  position: sticky;
  top: calc(96px + var(--card-index, 0) * 16px);
  z-index: calc(var(--card-index, 0) + 1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: 345px;
  background: #0d0b17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5), 0 20px 50px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  margin: 0 auto 70px;
  width: calc(100% - (5 - var(--card-index, 0)) * 18px);
}

.growth-card:last-child {
  margin-bottom: 0;
}

.growth-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 -8px 30px rgba(168, 85, 247, 0.25), 0 25px 60px rgba(0, 0, 0, 0.8);
}

.growth-card-content {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.growth-card-title {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 12px;
  line-height: 1.3;
}

.growth-card-desc {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.growth-card-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: 28px;
  padding-left: 16px;
  padding-right: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.growth-visual-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.growth-card-svg {
  width: 100%;
  height: 100%;
  max-height: 330px;
  object-fit: cover;
  display: block;
  border-top-left-radius: var(--radius-card);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-bottom: none;
  box-shadow: none;
}

@media (max-width: 992px) {
  .growth-card {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-bottom: 50px;
    top: calc(80px + var(--card-index, 0) * 12px);
  }

  .growth-card-visual {
    padding-top: 0;
    padding-left: 24px;
  }
}

@media (max-width: 768px) {
  .growth-title {
    font-size: 32px;
  }

  .growth-card-content {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .growth-title {
    font-size: 26px;
  }

  .growth-card-visual {
    padding-left: 16px;
  }
}

/* --------------------------------------------------------------------------
   12. Revenue Efficiency Comparison Section
   -------------------------------------------------------------------------- */
.efficiency-section {
  padding: var(--section-gap) 0 0 0;
  position: relative;
  background: var(--color-bg-dark);
  overflow: hidden;
}

.efficiency-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto var(--space-md);
}

.efficiency-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.efficiency-subheading {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto;
}

.efficiency-chart-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.fluid-chart-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  position: relative;
  box-shadow: none;
}

/* Crisp HTML Overlay Badges with Scroll Transition */
.chart-tag-badge {
  position: absolute;
  transform: translate(-50%, -30%) scale(0.85);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chart-tag-badge.tag-totality {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #090614 !important;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.chart-tag-badge.tag-totality .tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9333ea;
}

.chart-tag-badge.tag-current {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #090614 !important;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.chart-tag-badge.tag-current .tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
}

/* SVG Line Drawing & Area Fill Slow & Smooth Scroll Animation */
.totality-stroke-path {
  stroke-dasharray: 2800;
  stroke-dashoffset: 2800;
  transition: stroke-dashoffset 3.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
  will-change: stroke-dashoffset;
}

.current-stroke-path {
  opacity: 0;
  stroke-dasharray: 7 5;
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  will-change: opacity;
}

.wave-fill-path {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2.6s ease 0.6s, transform 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  will-change: opacity, transform;
}

.milestone-dot {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active In-View Animated States */
.fluid-chart-wrapper.chart-in-view .totality-stroke-path {
  stroke-dashoffset: 0;
}

.fluid-chart-wrapper.chart-in-view .current-stroke-path {
  opacity: 0.85;
}

.fluid-chart-wrapper.chart-in-view .wave-fill-path {
  opacity: 1;
  transform: translateY(0);
}

.fluid-chart-wrapper.chart-in-view .milestone-dot {
  opacity: 1;
  transform: scale(1);
}

.fluid-chart-wrapper.chart-in-view .milestone-dot:nth-of-type(1) {
  transition-delay: 1.6s;
}

.fluid-chart-wrapper.chart-in-view .milestone-dot:nth-of-type(2) {
  transition-delay: 2.1s;
}

.fluid-chart-wrapper.chart-in-view .milestone-dot:nth-of-type(3) {
  transition-delay: 2.6s;
}

.fluid-chart-wrapper.chart-in-view .milestone-dot:nth-of-type(4) {
  transition-delay: 1.4s;
}

.fluid-chart-wrapper.chart-in-view .milestone-dot:nth-of-type(5) {
  transition-delay: 1.9s;
}

.fluid-chart-wrapper.chart-in-view .chart-tag-badge.tag-totality {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 1.8s;
}

.fluid-chart-wrapper.chart-in-view .chart-tag-badge.tag-current {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 2.2s;
}

.fluid-wave-svg {
  width: 100%;
  height: 500px;
  display: block;
  margin: 0;
  padding: 0;
}

@media (max-width: 1200px) {
  .fluid-wave-svg {
    height: 420px;
  }
}

@media (max-width: 768px) {
  .efficiency-section {
    padding: 64px 0 0 0;
  }

  .fluid-wave-svg {
    height: 320px;
  }

  .chart-tag-badge {
    padding: 3px 10px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .fluid-wave-svg {
    height: 220px;
  }
}

.efficiency-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.efficiency-kpi-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px 20px;
  border-radius: var(--radius-card);
  transition: all 0.3s ease;
}

.efficiency-kpi-card:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.3);
  transform: translateY(-2px);
}

.kpi-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.kpi-data {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-value {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.kpi-label {
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

@media (max-width: 992px) {
  .efficiency-kpis-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .efficiency-title {
    font-size: 32px;
  }

  .efficiency-graph-card {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .efficiency-title {
    font-size: 26px;
  }

  .graph-card-header {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   13. Modern Glassmorphism Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--color-bg-dark);
  border: none;
  border-top: none;
  padding: 80px 0 0;
  overflow: hidden;
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Seamless Top Fade Effect - Softly blends preceding background into footer */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(7, 6, 10, 0.95) 0%, rgba(7, 6, 10, 0.5) 40%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.site-footer .container {
  position: relative;
  z-index: 10;
  max-width: 100%;
  padding-right: 0;
  padding-left: max(var(--container-padding), calc((100% - var(--container-max-width)) / 2 + var(--container-padding)));
}

.footer-ambient-glow {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  max-width: 95vw;
  height: 380px;
  background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.22) 0%, rgba(59, 130, 246, 0.12) 35%, rgba(236, 72, 153, 0.05) 60%, transparent 80%);
  filter: blur(25px);
  pointer-events: none;
  z-index: 0;
}

.footer-main-wrapper {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: flex-end;
}

.footer-left-content {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-bottom: 50px;
}

.footer-brand-col {
  max-width: 480px;
}

.footer-brand {
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.footer-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.footer-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 18px;
  transition: all 0.25s ease;
}

.social-link:hover {
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.1);
  transform: translateY(-2px);
}

/* Links row placed vertically below social icons */
.footer-links-row {
  display: flex;
  gap: 36px;
  padding-top: 8px;
}

.footer-links-row .footer-col {
  min-width: 170px;
}

.footer-col-title {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links li a {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-links li a:hover {
  color: var(--color-white);
  transform: translateX(4px);
}

.footer-bottom {
  position: relative;
  z-index: 2;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.footer-copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
}

/* Right side graphic - anchored to bottom right with 0px gap */
.footer-right-graphic {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: flex-end;
  line-height: 0;
  margin-right: 0;
  padding-right: 0;
}

/* 1. Dynamic Ambient Breathing Aura Behind X Element */
.footer-x-backdrop-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  max-width: 120%;
  max-height: 120%;
  background: radial-gradient(ellipse at 45% 45%, 
    rgba(168, 85, 247, 0.45) 0%, 
    rgba(59, 130, 246, 0.3) 35%, 
    rgba(236, 72, 153, 0.18) 60%, 
    transparent 75%);
  filter: blur(55px);
  pointer-events: none;
  z-index: 1;
  animation: footerXGlowBreath 8s ease-in-out infinite alternate;
}

/* 2. X Logo Element */
.footer-right-graphic .footer-x-element {
  position: relative;
  z-index: 5;
  width: auto;
  max-width: 100%;
  height: 530px;
  max-height: 530px;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  margin-right: 0;
  user-select: none;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
}

/* Keyframes for X Background Nebula Animation */
@keyframes footerXGlowBreath {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.75;
    filter: blur(55px);
  }
  50% {
    transform: translate(-48%, -52%) scale(1.08);
    opacity: 0.95;
    filter: blur(65px);
  }
  100% {
    transform: translate(-52%, -48%) scale(0.96);
    opacity: 0.8;
    filter: blur(50px);
  }
}

@media (max-width: 1024px) {
  .footer-main-wrapper {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-xl);
  }

  .footer-right-graphic .footer-x-element {
    height: 420px;
    max-height: 420px;
  }
}

@media (max-width: 860px) {
  .site-footer .container {
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
  }

  .footer-main-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
  }

  .footer-left-content {
    padding-bottom: 10px;
  }

  .footer-right-graphic {
    order: 2;
    justify-content: center;
    align-items: center;
    align-self: center;
    margin-top: 10px;
  }

  .footer-right-graphic .footer-x-element {
    height: 320px;
    max-height: 320px;
  }

  .footer-links-row {
    gap: 28px;
  }
}

@media (max-width: 580px) {
  .footer-links-row {
    flex-direction: column;
    gap: var(--space-md);
  }

  .footer-right-graphic .footer-x-element {
    height: 240px;
    max-height: 240px;
  }
}

/* --------------------------------------------------------------------------
   11. Floating Theme Toggle Switch (Bottom Right)
   -------------------------------------------------------------------------- */
.theme-toggle-wrapper {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
}

.theme-toggle-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(18, 16, 28, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  padding: 0;
}

.theme-toggle-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.6);
  border-color: rgba(168, 85, 247, 0.6);
}

.theme-toggle-indicator {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-icon-moon,
.theme-icon-sun {
  position: absolute;
  font-size: 24px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

/* Default Dark Mode State: Sun icon shows to toggle light mode */
.theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

.theme-icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
  color: #a855f7;
}

/* Tooltip on Hover */
.theme-toggle-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(12, 10, 20, 0.95);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.theme-toggle-btn:hover .theme-toggle-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* --------------------------------------------------------------------------
   12. Complete Light Theme [data-theme="light"] (Pure White Canvas)
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --color-bg-dark: #ffffff;
  --color-bg-card: #ffffff;
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-border-glow: rgba(0, 0, 0, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-blur: blur(20px);
}

[data-theme="light"] body {
  background-color: #ffffff;
  color: #0f172a;
}

[data-theme="light"] .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 20px rgba(168, 85, 247, 0.2);
}

[data-theme="light"] .theme-toggle-btn:hover {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16), 0 0 25px rgba(168, 85, 247, 0.4);
  border-color: #a855f7;
}

[data-theme="light"] .theme-icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

[data-theme="light"] .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #7c3aed;
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.4));
}

[data-theme="light"] .theme-toggle-tooltip {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Light Mode Navbar */
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .nav-link {
  color: #334155;
  font-weight: 500;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: #7c3aed;
}

[data-theme="light"] .nav-link:hover .nav-icon,
[data-theme="light"] .nav-link.active .nav-icon {
  color: #7c3aed;
}

[data-theme="light"] .mobile-toggle {
  color: #0f172a;
}

@media (max-width: 768px) {
  [data-theme="light"] .nav-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  }
}

/* Light Mode Logos */
[data-theme="light"] .brand-logo,
[data-theme="light"] .footer-logo {
  filter: brightness(0);
}

[data-theme="light"] .partner-logo {
  filter: none;
  opacity: 0.95;
}

[data-theme="light"] .partner-logo:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

/* Light Mode Hero Section */
[data-theme="light"] .hero-section {
  background: radial-gradient(120% 90% at 50% 0%, #faf5ff 0%, #f5f3ff 35%, #ffffff 75%);
}

[data-theme="light"] .hero-glow-bg {
  background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.18) 0%, rgba(59, 130, 246, 0.12) 45%, transparent 80%);
  opacity: 0.9;
}

[data-theme="light"] .hero-title {
  color: #0f172a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .hero-description {
  color: #475569;
}

[data-theme="light"] .hero-bottom-fade {
  background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}

/* Light Mode Dashboard Frame */
[data-theme="light"] .dashboard-preview-wrapper {
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12), 0 0 35px rgba(168, 85, 247, 0.2);
}

[data-theme="light"] .dashboard-preview-wrapper:hover {
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18), 0 0 45px rgba(168, 85, 247, 0.35);
}

[data-theme="light"] .dashboard-frame {
  background: #ffffff;
}

/* Light Mode Partners Section */
[data-theme="light"] .partners-section {
  background: #ffffff;
  border: none;
}

/* Light Mode Solutions Section */
[data-theme="light"] .solutions-section {
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 35%, #ffffff 100%);
}

[data-theme="light"] .solutions-title {
  color: #0f172a;
}

[data-theme="light"] .solutions-subheading {
  color: #475569;
}

[data-theme="light"] .solutions-nav-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .solutions-nav-btn:hover {
  background: #f8fafc;
  color: #7c3aed;
  border-color: #a855f7;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

/* Light Mode Solution Cards */
[data-theme="light"] .solution-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .solution-card:hover {
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.15), 0 0 25px rgba(59, 130, 246, 0.1);
  border-color: rgba(168, 85, 247, 0.45);
}

[data-theme="light"] .card-media-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .card-title {
  color: #0f172a;
}

[data-theme="light"] .card-desc {
  color: #475569;
}

[data-theme="light"] .card-tag {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color: #7c3aed;
}

/* Light Mode Card SVG Graphics Custom Tuning */
[data-theme="light"] .card-svg-graphic rect:first-of-type {
  fill: #f8fafc;
}

[data-theme="light"] .card-svg-graphic text[fill="white"],
[data-theme="light"] .card-svg-graphic text[fill="#ffffff"] {
  fill: #0f172a;
}

[data-theme="light"] .card-svg-graphic rect[fill="white"] {
  fill: #cbd5e1;
}

[data-theme="light"] .card-svg-graphic rect[fill="rgba(255,255,255,0.03)"],
[data-theme="light"] .card-svg-graphic rect[fill="rgba(255,255,255,0.05)"] {
  fill: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .card-svg-graphic rect[stroke="rgba(255,255,255,0.1)"],
[data-theme="light"] .card-svg-graphic rect[stroke="rgba(255,255,255,0.08)"] {
  stroke: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .card-svg-graphic text[fill="rgba(255,255,255,0.7)"],
[data-theme="light"] .card-svg-graphic text[fill="rgba(255,255,255,0.6)"],
[data-theme="light"] .card-svg-graphic text[fill="rgba(255,255,255,0.5)"],
[data-theme="light"] .card-svg-graphic text[fill="rgba(255,255,255,0.4)"] {
  fill: #64748b;
}

/* Light Mode Customer Experience Section */
[data-theme="light"] .experience-section {
  background: #ffffff;
}

[data-theme="light"] .experience-title {
  color: #000000;
}

[data-theme="light"] .experience-plain-text {
  color: #000000;
}

[data-theme="light"] .experience-desc {
  color: #475569;
}

[data-theme="light"] .highlight-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .highlight-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .highlight-item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(168, 85, 247, 0.16) 50%, rgba(236, 72, 153, 0.12) 100%);
  border: 1px solid rgba(168, 85, 247, 0.6);
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.18);
  transform: translateX(6px);
}

[data-theme="light"] .highlight-info h4 {
  color: #0f172a;
}

[data-theme="light"] .highlight-info p {
  color: #64748b;
}

[data-theme="light"] .highlight-item.active .highlight-info h4 {
  color: #0f172a;
}

[data-theme="light"] .highlight-item.active .highlight-info p {
  color: #334155;
}

[data-theme="light"] .highlight-icon {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #7c3aed;
}

[data-theme="light"] .highlight-item.active .highlight-icon {
  background: var(--color-gradient-primary);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
}

[data-theme="light"] .square-outer-box {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .square-outer-box:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 30px 60px rgba(168, 85, 247, 0.15), 0 0 30px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .square-outer-glow {
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.12) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
}

[data-theme="light"] .square-inner-box {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="light"] .experience-panel-img {
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  border-right: none;
  border-bottom: none;
  box-shadow: -15px -15px 35px rgba(15, 23, 42, 0.08);
}

/* Light Mode Built for Smarter Real Estate Growth */
[data-theme="light"] .growth-section {
  background: #ffffff;
}

[data-theme="light"] .growth-title {
  color: #0f172a;
}

[data-theme="light"] .growth-subheading {
  color: #475569;
}

[data-theme="light"] .growth-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05), 0 15px 35px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .growth-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 25px 50px rgba(168, 85, 247, 0.15);
}

[data-theme="light"] .growth-card-title {
  color: #0f172a;
}

[data-theme="light"] .growth-card-desc {
  color: #475569;
}

[data-theme="light"] .growth-card-svg rect:first-of-type {
  fill: #f8fafc;
}

[data-theme="light"] .growth-card-svg rect[fill="rgba(255,255,255,0.03)"],
[data-theme="light"] .growth-card-svg rect[fill="rgba(255,255,255,0.02)"] {
  fill: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .growth-card-svg rect[stroke="rgba(255,255,255,0.08)"],
[data-theme="light"] .growth-card-svg rect[stroke="rgba(255,255,255,0.06)"] {
  stroke: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .growth-card-svg text[fill="rgba(255,255,255,0.85)"] {
  fill: #0f172a;
}

[data-theme="light"] .growth-card-svg text[fill="rgba(255,255,255,0.5)"] {
  fill: #64748b;
}

[data-theme="light"] .growth-card-svg {
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  box-shadow: none;
}

/* Light Mode Revenue Efficiency Comparison */
[data-theme="light"] .efficiency-section {
  background: #ffffff;
}

[data-theme="light"] .efficiency-title {
  color: #0f172a;
}

[data-theme="light"] .efficiency-subheading {
  color: #475569;
}

[data-theme="light"] .efficiency-graph-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .efficiency-graph-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 25px 50px rgba(168, 85, 247, 0.15);
}

[data-theme="light"] .efficiency-chart-container {
  background: transparent;
  box-shadow: none;
}

[data-theme="light"] .chart-tag-badge.tag-totality {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .chart-tag-badge.tag-current {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .efficiency-kpi-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .efficiency-kpi-card .kpi-value:not(.gradient-text) {
  color: #0f172a;
}

[data-theme="light"] .efficiency-kpi-card .kpi-label {
  color: #64748b;
}

/* Light Mode Speak More, Type Less Section */
[data-theme="light"] .speak-more-section {
  background: #ffffff;
}

[data-theme="light"] .speak-ambient-glow {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, rgba(59, 130, 246, 0.04) 45%, transparent 75%);
}

[data-theme="light"] .speak-title .title-line-light {
  color: #000000;
}

[data-theme="light"] .speak-subtitle {
  color: #000000;
  font-weight: 600;
}

/* Light Mode 4 Workflow Step Boxes */
[data-theme="light"] .speak-boxes-container .step-totality {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .speak-boxes-container .step-totality:hover {
  background: #f1f5f9;
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.12);
}

[data-theme="light"] .speak-boxes-container .step-icon-wrapper.icon-totality {
  background: #f1f5f9;
  color: #7c3aed;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .speak-boxes-container .step-label {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .speak-conduit-path {
  stroke: #cbd5e1;
}

[data-theme="light"] .platform-command-heading .badge-brand,
[data-theme="light"] .platform-command-badge .badge-brand {
  color: #000000;
}

[data-theme="light"] .platform-command-heading .tag-cross,
[data-theme="light"] .platform-command-badge .tag-cross {
  color: #7c3aed;
}

[data-theme="light"] .platform-pillars-text {
  color: #000000;
}

/* Light Mode Audio Transcript Speech Bubble */
[data-theme="light"] .speak-speech-bubble {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .speak-speech-bubble::before {
  border-right-color: #e2e8f0;
}

[data-theme="light"] .speak-speech-bubble::after {
  border-right-color: #f8fafc;
}

[data-theme="light"] .speak-speech-bubble .normal-card-heading {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .transcript-quote {
  color: #000000;
  font-style: italic;
}

/* Light Mode Extract Key Information Card */
[data-theme="light"] .speak-info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .speak-info-card:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .speak-info-card .normal-card-heading {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .card-badge-header {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] .card-badge-title {
  color: #000000;
  background: none;
  -webkit-text-fill-color: initial;
}

[data-theme="light"] .extracted-key-list li {
  color: #000000;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .key-label {
  color: #000000;
  font-weight: 600;
}

[data-theme="light"] .key-label i {
  color: #7c3aed;
}

[data-theme="light"] .key-value {
  color: #000000 !important;
  font-weight: 700;
}

[data-theme="light"] .key-value.highlight-positive {
  color: #059669 !important;
  font-weight: 700;
}

[data-theme="light"] .key-value.highlight-action {
  color: #7c3aed !important;
  font-weight: 700;
}

[data-theme="light"] .speak-lady-img {
  filter: drop-shadow(0 15px 30px rgba(15, 23, 42, 0.12));
}

/* Light Mode Footer */
[data-theme="light"] .site-footer {
  background: #ffffff;
  border: none;
  border-top: none;
}

[data-theme="light"] .site-footer::before {
  background: linear-gradient(180deg, #f8fafc 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
}

[data-theme="light"] .footer-ambient-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.12) 0%, rgba(59, 130, 246, 0.06) 40%, transparent 70%);
}

[data-theme="light"] .footer-x-backdrop-glow {
  background: radial-gradient(ellipse at 45% 45%, 
    rgba(168, 85, 247, 0.25) 0%, 
    rgba(59, 130, 246, 0.16) 35%, 
    rgba(236, 72, 153, 0.08) 60%, 
    transparent 75%);
  filter: blur(45px);
}

[data-theme="light"] .footer-x-element {
  filter: drop-shadow(0 15px 35px rgba(15, 23, 42, 0.12));
}

[data-theme="light"] .footer-desc {
  color: #475569;
}

[data-theme="light"] .footer-col-title {
  color: #0f172a;
  font-weight: 700;
}

[data-theme="light"] .footer-links li a {
  color: #64748b;
  font-weight: 500;
}

[data-theme="light"] .footer-links li a:hover {
  color: #7c3aed;
  transform: translateX(4px);
}

[data-theme="light"] .social-link {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .social-link:hover {
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
  border-color: #a855f7;
}

[data-theme="light"] .footer-copyright {
  color: #64748b;
}

[data-theme="light"] .footer-badge {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

/* ==========================================================================
   TOTALITY PRODUCT SUITE SECTION (Left: Logo & Title | Right: Content & Stats)
   ========================================================================== */
.suite-tabs-section {
  padding: 70px 0 90px 0;
  position: relative;
  overflow: visible;
}

.suite-main-layout-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 40px;
}

.suite-main-layout-grid+.suite-main-layout-grid {
  margin-top: 120px;
  padding-top: 0;
  border-top: none;
}

[data-theme="light"] .suite-main-layout-grid+.suite-main-layout-grid {
  border-top: none;
}

/* Left Column: Logo and Main Brand Title (Sticky Top-Left) */
.suite-brand-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  z-index: 2;
}

.suite-overview-logo-wrap {
  display: inline-flex;
  align-items: center;
  margin-top: -24px;
  margin-bottom: -16px;
  margin-left: -8px;
}

.suite-overview-logo {
  height: 140px;
  width: auto;
  display: block;
}

/* Theme Logo Auto-Switching */
.suite-logo-light {
  display: none;
}

.suite-logo-dark {
  display: block;
}

[data-theme="light"] .suite-logo-light {
  display: block;
}

[data-theme="light"] .suite-logo-dark {
  display: none;
}

.suite-main-brand-title {
  font-family: var(--font-primary);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-top: 0;
}

/* Right Column: Content & Points List */
.suite-content-column {
  width: 100%;
}

.suite-overview-heading {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.suite-overview-subheading {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 28px;
}

/* Points List: Placed one by one */
.suite-stats-list,
.suite-stats-row {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  padding-top: 4px;
}

.suite-stat-point,
.suite-stat-col {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.suite-stat-point.point-in-view,
.suite-stat-col.point-in-view {
  opacity: 1;
  transform: translateY(0);
}

.suite-stat-point:nth-child(1) {
  transition-delay: 0.05s;
}

.suite-stat-point:nth-child(2) {
  transition-delay: 0.15s;
}

.suite-stat-point:nth-child(3) {
  transition-delay: 0.25s;
}

.suite-stat-point:nth-child(4) {
  transition-delay: 0.35s;
}

.suite-stat-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.suite-stat-number {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #000000;
  background: none;
  -webkit-text-fill-color: initial;
  display: inline-block;
  white-space: nowrap;
}

.suite-stat-label {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .suite-main-layout-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .suite-main-brand-title {
    font-size: 36px;
  }

  .suite-overview-heading {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .suite-tabs-section {
    padding: 50px 0 70px 0;
  }

  .suite-main-brand-title {
    font-size: 30px;
  }

  .suite-overview-heading {
    font-size: 20px;
  }

  .suite-stats-list,
  .suite-stats-row {
    gap: 18px;
  }

  .suite-main-layout-grid+.suite-main-layout-grid {
    margin-top: 50px;
    padding-top: 40px;
  }
}

@media (max-width: 480px) {

  .suite-stats-list,
  .suite-stats-row {
    gap: 16px;
  }

  .suite-stat-point,
  .suite-stat-col {
    gap: 10px;
  }
}

/* Light & Dark Theme Overrides */
[data-theme="dark"] .suite-stat-number {
  color: #ffffff;
}

[data-theme="light"] .suite-main-brand-title {
  color: #0f172a;
}

[data-theme="light"] .suite-overview-heading {
  color: #0f172a;
}

[data-theme="light"] .suite-overview-subheading {
  color: #64748b;
}

[data-theme="light"] .suite-stat-number {
  color: #000000;
  background: none;
  -webkit-text-fill-color: initial;
}

[data-theme="light"] .suite-stat-label {
  color: #64748b;
}

/* ==========================================================================
   ACX TOTALITY — Banner Section & 3D AI Circle System
   ========================================================================== */

.banner-section {
  position: relative;
  min-height: 100vh;
  padding: 160px 0 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 10%, #150b29 0%, #0c0819 45%, #07060a 100%);
  transition: background 0.3s ease;
}

/* Ambient Radial Lighting & Cosmic Nebula */
.banner-ambient-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 850px;
  background:
    radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 65% 35%, rgba(59, 130, 246, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.18) 0%, rgba(7, 6, 10, 0) 75%);
  filter: blur(85px);
  pointer-events: none;
  z-index: 1;
  animation: cosmicNebulaBreath 12s ease-in-out infinite alternate;
}

@keyframes cosmicNebulaBreath {
  0% {
    transform: translateX(-50%) scale(0.96);
    opacity: 0.85;
  }

  100% {
    transform: translateX(-50%) scale(1.05);
    opacity: 1;
  }
}

/* Atmospheric Stitch Mini Dots Matrix */
.banner-grid-matrix {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
  mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 2;
}

/* Background Particle Canvas with Smooth Edge Fade */
.banner-particles-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mask-image: 
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 10%, black 22%, black 78%, rgba(0, 0, 0, 0.75) 90%, transparent 100%),
    radial-gradient(ellipse 94% 86% at 50% 50%, black 50%, transparent 100%);
  -webkit-mask-image: 
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 10%, black 22%, black 78%, rgba(0, 0, 0, 0.75) 90%, transparent 100%),
    radial-gradient(ellipse 94% 86% at 50% 50%, black 50%, transparent 100%);
}

.banner-particles-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hero Wrapper */
.banner-hero-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Header Content */
.banner-header-content {
  max-width: 860px;
  margin: 0 auto 30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Eyebrow Badge (Subheading) */
.banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.banner-badge:hover {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.4);
}

.badge-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 10px #a855f7, 0 0 20px #ec4899;
  position: relative;
  display: inline-block;
  animation: badgeDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badgeDotPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px #a855f7;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.8;
    box-shadow: 0 0 16px #ec4899, 0 0 24px #3b82f6;
  }
}

.badge-text {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d8b4fe;
}

/* Main Heading */
.banner-title,
#banner-main-title {
  font-family: var(--font-primary);
  font-size: clamp(42px, 6.5vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
}

.banner-title span,
#banner-main-title span {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.3);
}

/* Content Description */
.banner-description {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 680px;
  margin: 0 auto 34px auto;
  text-align: center;
}

/* CTA Button */
.banner-cta-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.btn-totality-experience {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6 0%, #9333ea 50%, #ec4899 100%);
  background-size: 200% 200%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 28px rgba(147, 51, 234, 0.5), 0 0 15px rgba(236, 72, 153, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  animation: fluidButtonGlow 5s ease infinite alternate;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-totality-experience:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 38px rgba(147, 51, 234, 0.8), 0 0 25px rgba(236, 72, 153, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  filter: brightness(1.12);
  color: #ffffff;
}

.btn-totality-experience:active {
  transform: translateY(-1px) scale(0.99);
}

.btn-glow-layer {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.btn-totality-experience:hover .btn-glow-layer {
  opacity: 1;
  transform: scale(1);
}

.btn-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-arrow-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-totality-experience:hover .btn-arrow-icon {
  transform: translateX(4px);
}

/* ==========================================================================
   Banner Statement (Below 3D Diagram)
   ========================================================================== */

.banner-bottom-statement {
  position: relative;
  z-index: 10;
  max-width: 860px;
  margin: 30px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.banner-statement-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.banner-statement-title .statement-line {
  display: block;
  color: #ffffff;
}

.banner-statement-title .statement-line-gradient {
  background: var(--color-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 24px rgba(168, 85, 247, 0.55));
}

.banner-statement-subtitle {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  max-width: 680px;
  margin: 0 auto 28px auto;
  text-align: center;
}

.banner-section-footer {
  position: relative;
  padding: 100px 0 100px 0;
  min-height: auto;
  background: radial-gradient(120% 100% at 50% 30%, #150b29 0%, #0c0819 45%, var(--color-bg-dark) 90%);
}

#banner-footer-main-title,
.banner-section-footer .banner-title {
  color: #ffffff;
}

#banner-footer-main-title span,
.banner-section-footer .banner-title span {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.3);
}

/* Soft Fade Blend on Top to Match Preceding Section */
.banner-section-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, var(--color-bg-dark) 0%, rgba(7, 6, 10, 0.6) 50%, transparent 100%);
  pointer-events: none;
  z-index: 4;
}

/* Soft Fade Blend on Bottom to Seamlessly Connect with Footer Section */
.banner-section-footer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent 0%, rgba(12, 8, 25, 0.75) 50%, var(--color-bg-dark) 100%);
  pointer-events: none;
  z-index: 4;
}

/* Soften ambient glow and matrix mask for smooth seamless blend */
.banner-section-footer .banner-ambient-glow {
  top: 40px;
  opacity: 0.85;
}

.banner-section-footer .banner-grid-matrix {
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
    radial-gradient(circle at 50% 45%, black 30%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
    radial-gradient(circle at 50% 45%, black 30%, transparent 80%);
}

/* ==========================================================================
   3D AI Circle Interactive Stage System
   ========================================================================== */

.totality-ai-stage-container {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 30px auto 10px auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: center center;
}

.totality-3d-orbit-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out;
}

/* Synaptic Connection SVG Web */
.totality-synaptic-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.synaptic-beam-line {
  stroke: url(#synapticGrad);
  stroke-width: 1.8;
  stroke-dasharray: 6 4;
  opacity: 0.55;
  filter: url(#synapticGlow);
  animation: synapticLineFlow 25s linear infinite;
  transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
}

.synaptic-beam-line.active {
  stroke: url(#beamGradActive);
  stroke-width: 2.8;
  opacity: 1;
  stroke-dasharray: none;
}

@keyframes synapticLineFlow {
  to {
    stroke-dashoffset: -200;
  }
}

.synaptic-flow-particle {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px #c084fc) drop-shadow(0 0 10px #ec4899);
}

/* Holographic 3D AI Energy Orbit Rings */
.ai-orbit-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.ai-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ai-ring.ring-1 {
  width: 580px;
  height: 580px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.12), inset 0 0 40px rgba(168, 85, 247, 0.08);
  animation: orbitSpinClockwise 35s linear infinite;
}

.ai-ring.ring-1::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 14px #3b82f6, 0 0 24px #60a5fa;
}

.ai-ring.ring-2 {
  width: 440px;
  height: 440px;
  border: 1px dashed rgba(236, 72, 153, 0.25);
  animation: orbitSpinCounterClockwise 28s linear infinite;
}

.ai-ring.ring-2::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 30%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ec4899;
  box-shadow: 0 0 14px #ec4899;
}

.ai-ring.ring-3 {
  width: 320px;
  height: 320px;
  border: 1.5px solid rgba(96, 165, 250, 0.25);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.18);
  animation: orbitSpinClockwise 20s linear infinite;
}

.ai-ring-dashed {
  position: absolute;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  border: 1px dotted rgba(255, 255, 255, 0.1);
  animation: orbitSpinCounterClockwise 60s linear infinite;
}

/* Pulsing Sonar / Synaptic Waves */
.ai-pulse-wave {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.5);
  pointer-events: none;
}

.ai-pulse-wave.wave-1 {
  animation: aiSonarWave 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 0s;
}

.ai-pulse-wave.wave-2 {
  animation: aiSonarWave 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 1.3s;
}

.ai-pulse-wave.wave-3 {
  animation: aiSonarWave 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 2.6s;
}

@keyframes aiSonarWave {
  0% {
    width: 170px;
    height: 170px;
    opacity: 0.85;
    border-color: rgba(236, 72, 153, 0.7);
  }

  100% {
    width: 680px;
    height: 680px;
    opacity: 0;
    border-color: rgba(59, 130, 246, 0);
  }
}

@keyframes orbitSpinClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitSpinCounterClockwise {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* ==========================================================================
   Central 3D AI Sphere Core ("Totality")
   ========================================================================== */

.totality-center-core {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  animation: coreFloatBreath 6s ease-in-out infinite alternate;
}

@keyframes coreFloatBreath {
  0% {
    transform: translateZ(20px) scale(0.98);
  }

  100% {
    transform: translateZ(35px) scale(1.02);
  }
}

.totality-center-core:hover {
  transform: translateZ(45px) scale(1.06);
}

/* Deep Ambient Glow behind Sphere */
.core-depth-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(236, 72, 153, 0.35) 45%, rgba(59, 130, 246, 0.2) 65%, transparent 80%);
  filter: blur(28px);
  z-index: 1;
  animation: depthGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes depthGlowPulse {
  0% {
    opacity: 0.7;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* 3D Sphere Surface */
.core-sphere-surface {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  background: radial-gradient(circle at 35% 28%, #ff6ec7 0%, #b829ea 28%, #6d28d9 55%, #1e1b4b 85%, #0f0b20 100%);
  box-shadow:
    0 0 50px rgba(168, 85, 247, 0.6),
    0 0 90px rgba(236, 72, 153, 0.3),
    inset 0 4px 14px rgba(255, 255, 255, 0.7),
    inset 0 -8px 24px rgba(0, 0, 0, 0.8),
    inset -4px -4px 18px rgba(59, 130, 246, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Internal Generative Energy Mesh */
.core-energy-mesh {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.3) 0deg, transparent 60deg, rgba(236, 72, 153, 0.4) 120deg, transparent 180deg, rgba(59, 130, 246, 0.4) 260deg, transparent 320deg, rgba(255, 255, 255, 0.3) 360deg);
  mix-blend-mode: overlay;
  opacity: 0.65;
  animation: orbitSpinClockwise 12s linear infinite;
}

/* Inner Glow Highlight */
.core-inner-glow {
  position: absolute;
  top: 6px;
  left: 18px;
  width: 70px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 75%);
  transform: rotate(-30deg);
  pointer-events: none;
}

/* Brand Text Inside Sphere */
.core-brand-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}

.core-ai-sparkle {
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
  animation: sparkleTwinkle 2.5s ease-in-out infinite;
}

@keyframes sparkleTwinkle {

  0%,
  100% {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2) rotate(15deg);
    opacity: 1;
    filter: drop-shadow(0 0 12px #ff77e9);
  }
}

.core-title-text {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.6);
  line-height: 1.1;
}

.core-sub-tag {
  font-family: var(--font-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #fbcfe8;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 2px;
}

/* Orbiting Satellites Around Central Sphere */
.core-orbital-particles {
  position: absolute;
  width: 250px;
  height: 250px;
  pointer-events: none;
}

.satellite-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.satellite-particle.p1 {
  width: 8px;
  height: 8px;
  background: #ffffff;
  box-shadow: 0 0 12px #60a5fa, 0 0 20px #3b82f6;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: satelliteOrbit1 8s linear infinite;
}

.satellite-particle.p2 {
  width: 6px;
  height: 6px;
  background: #f472b6;
  box-shadow: 0 0 12px #ec4899;
  bottom: 10%;
  right: 15%;
  animation: satelliteOrbit2 11s linear infinite reverse;
}

.satellite-particle.p3 {
  width: 7px;
  height: 7px;
  background: #c084fc;
  box-shadow: 0 0 12px #a855f7;
  left: 10%;
  top: 40%;
  animation: satelliteOrbit3 9s linear infinite;
}

@keyframes satelliteOrbit1 {
  from {
    transform: rotate(0deg) translateX(120px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(120px) rotate(-360deg);
  }
}

@keyframes satelliteOrbit2 {
  from {
    transform: rotate(0deg) translateX(105px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(105px) rotate(-360deg);
  }
}

@keyframes satelliteOrbit3 {
  from {
    transform: rotate(0deg) translateX(130px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(130px) rotate(-360deg);
  }
}

/* ==========================================================================
   7 Surrounding Orbital Nodes
   ========================================================================== */

.totality-nodes-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.totality-node-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -50%) translateZ(25px);
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  user-select: none;
}

/* Base Position Calculations for 7 Points */
/* 1. Lead (Top: 270 deg) */
.totality-node-item[data-index="0"] {
  top: 6.5%;
  left: 50%;
  animation: nodeFloat0 5s ease-in-out infinite alternate;
}

/* 2. Contact (~321.4 deg) */
.totality-node-item[data-index="1"] {
  top: 21%;
  left: 85%;
  animation: nodeFloat1 5.5s ease-in-out infinite alternate;
}

/* 3. Conversation (~12.9 deg) */
.totality-node-item[data-index="2"] {
  top: 57%;
  left: 93%;
  animation: nodeFloat2 6s ease-in-out infinite alternate;
}

/* 4. Visit (~64.3 deg) */
.totality-node-item[data-index="3"] {
  top: 89%;
  left: 71%;
  animation: nodeFloat3 5.2s ease-in-out infinite alternate;
}

/* 5. Proposal (~115.7 deg) */
.totality-node-item[data-index="4"] {
  top: 89%;
  left: 29%;
  animation: nodeFloat4 5.8s ease-in-out infinite alternate;
}

/* 6. Booking (~167.1 deg) */
.totality-node-item[data-index="5"] {
  top: 57%;
  left: 7%;
  animation: nodeFloat5 6.2s ease-in-out infinite alternate;
}

/* 7. Attribution (~218.6 deg) */
.totality-node-item[data-index="6"] {
  top: 21%;
  left: 15%;
  animation: nodeFloat6 5.4s ease-in-out infinite alternate;
}

/* Subtle Desynchronized Floating Animations */
@keyframes nodeFloat0 {
  0% {
    transform: translate(-50%, -50%) translateY(0px) translateZ(25px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(-6px) translateZ(30px);
  }
}

@keyframes nodeFloat1 {
  0% {
    transform: translate(-50%, -50%) translateY(0px) translateZ(25px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(5px) translateZ(30px);
  }
}

@keyframes nodeFloat2 {
  0% {
    transform: translate(-50%, -50%) translateY(0px) translateZ(25px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(-5px) translateZ(30px);
  }
}

@keyframes nodeFloat3 {
  0% {
    transform: translate(-50%, -50%) translateY(0px) translateZ(25px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(6px) translateZ(30px);
  }
}

@keyframes nodeFloat4 {
  0% {
    transform: translate(-50%, -50%) translateY(0px) translateZ(25px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(-5px) translateZ(30px);
  }
}

@keyframes nodeFloat5 {
  0% {
    transform: translate(-50%, -50%) translateY(0px) translateZ(25px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(5px) translateZ(30px);
  }
}

@keyframes nodeFloat6 {
  0% {
    transform: translate(-50%, -50%) translateY(0px) translateZ(25px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(-6px) translateZ(30px);
  }
}

/* Node Pill Capsule */
.node-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(18, 14, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(168, 85, 247, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.node-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(168, 85, 247, 0.35) 50%, rgba(236, 72, 153, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 16px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.node-label {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  transition: color 0.3s ease;
}

.node-halo {
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, transparent 70%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Node Signal Pulse Radar Dot */
.node-signal-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  opacity: 0;
  pointer-events: none;
}

/* Hover & Active States */
.totality-node-item:hover {
  transform: translate(-50%, -50%) translateZ(45px) scale(1.08) !important;
  z-index: 40;
}

.totality-node-item:hover .node-pill,
.totality-node-item.active .node-pill {
  background: rgba(28, 20, 48, 0.95);
  border-color: rgba(168, 85, 247, 0.8);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(168, 85, 247, 0.6), 0 0 10px rgba(236, 72, 153, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.totality-node-item:hover .node-halo,
.totality-node-item.active .node-halo {
  opacity: 1;
}

.totality-node-item:hover .node-icon-box {
  transform: scale(1.15) rotate(5deg);
  background: linear-gradient(135deg, #3b82f6 0%, #a855f7 50%, #ec4899 100%);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.8);
}

.totality-node-item:hover .node-label {
  color: #f3e8ff;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */

@media (max-width: 992px) {
  .banner-section {
    padding: 140px 0 80px 0;
  }

  .totality-ai-stage-container {
    max-width: 660px;
  }

  .totality-center-core {
    width: 160px;
    height: 160px;
  }

  .core-title-text {
    font-size: 22px;
  }

  .ai-ring.ring-1 {
    width: 500px;
    height: 500px;
  }

  .ai-ring.ring-2 {
    width: 380px;
    height: 380px;
  }

  .ai-ring.ring-3 {
    width: 280px;
    height: 280px;
  }

  .ai-ring-dashed {
    width: 560px;
    height: 560px;
  }

  .node-pill {
    padding: 8px 16px;
    gap: 8px;
  }

  .node-icon-box {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .node-label {
    font-size: 14px;
    font-weight: 700;
  }
}

@media (max-width: 768px) {
  .banner-section {
    padding: 120px 0 60px 0;
  }

  .banner-badge {
    padding: 6px 16px;
    margin-bottom: 18px;
  }

  .badge-text {
    font-size: 11px;
  }

  .totality-ai-stage-container {
    max-width: 520px;
    margin-top: 15px;
  }

  .totality-center-core {
    width: 135px;
    height: 135px;
  }

  .core-title-text {
    font-size: 19px;
  }

  .core-sub-tag {
    font-size: 8px;
    padding: 1px 6px;
  }

  .ai-ring.ring-1 {
    width: 400px;
    height: 400px;
  }

  .ai-ring.ring-2 {
    width: 300px;
    height: 300px;
  }

  .ai-ring.ring-3 {
    width: 220px;
    height: 220px;
  }

  .ai-ring-dashed {
    width: 440px;
    height: 440px;
  }

  .node-pill {
    padding: 6px 12px;
    gap: 6px;
  }

  .node-icon-box {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .node-label {
    font-size: 11px;
  }
}

@media (max-width: 540px) {
  .banner-section {
    padding: 110px 0 50px 0;
  }

  .banner-title {
    font-size: 34px;
  }

  .banner-description {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .btn-totality-experience {
    height: 48px;
    padding: 0 28px;
    font-size: 14px;
    font-weight: 600;
  }

  .totality-ai-stage-container {
    max-width: 370px;
    margin-top: 10px;
  }

  .totality-center-core {
    width: 110px;
    height: 110px;
  }

  .core-title-text {
    font-size: 16px;
  }

  .core-sub-tag {
    font-size: 7px;
    padding: 1px 4px;
  }

  .ai-ring.ring-1 {
    width: 290px;
    height: 290px;
  }

  .ai-ring.ring-2 {
    width: 220px;
    height: 220px;
  }

  .ai-ring.ring-3 {
    width: 170px;
    height: 170px;
  }

  .ai-ring-dashed {
    width: 320px;
    height: 320px;
  }

  .node-pill {
    padding: 5px 9px;
    gap: 4px;
  }

  .node-icon-box {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .node-label {
    font-size: 10px;
  }
}

/* ==========================================================================
   Light Mode Theme Adaptation
   ========================================================================== */

[data-theme="light"] .banner-section {
  background: radial-gradient(120% 100% at 50% 10%, #f1edf9 0%, #f8f7fd 45%, #ffffff 100%);
}

[data-theme="light"] .banner-ambient-glow {
  background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.18) 0%, rgba(59, 130, 246, 0.12) 40%, transparent 70%);
}

[data-theme="light"] .banner-grid-matrix {
  background-image: radial-gradient(rgba(100, 75, 140, 0.18) 1px, transparent 1px);
}

[data-theme="light"] .banner-badge {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.1);
}

[data-theme="light"] .badge-text {
  color: #7e22ce;
}

[data-theme="light"] .banner-title .gradient-text {
  background: linear-gradient(135deg, #0f172a 10%, #6b21a8 45%, #2563eb 80%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(147, 51, 234, 0.15));
}

[data-theme="light"] .banner-description {
  color: #475569;
}

[data-theme="light"] .banner-statement-title .statement-line {
  color: #0f172a;
}

[data-theme="light"] .banner-statement-title .statement-line-gradient {
  background: linear-gradient(135deg, #0f172a 10%, #6b21a8 45%, #2563eb 80%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(147, 51, 234, 0.15));
}

[data-theme="light"] .banner-statement-subtitle {
  color: #7c3aed;
}

[data-theme="light"] .banner-section-footer {
  background: radial-gradient(120% 100% at 50% 30%, #f1edf9 0%, #f8f7fd 45%, #ffffff 90%);
}

[data-theme="light"] .banner-section-footer::before {
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
}

[data-theme="light"] .banner-section-footer::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(241, 237, 249, 0.75) 50%, #ffffff 100%);
}

[data-theme="light"] .node-pill {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(168, 85, 247, 0.2);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .node-label {
  color: #1e1b4b;
}

[data-theme="light"] .totality-node-item:hover .node-pill,
[data-theme="light"] .totality-node-item.active .node-pill {
  background: #ffffff;
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 12px 32px rgba(147, 51, 234, 0.25), 0 0 15px rgba(236, 72, 153, 0.2);
}

[data-theme="light"] .totality-node-item:hover .node-label {
  color: #6b21a8;
}

[data-theme="light"] .ai-ring.ring-1 {
  border-color: rgba(168, 85, 247, 0.18);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.08);
}

[data-theme="light"] .ai-ring.ring-2 {
  border-color: rgba(236, 72, 153, 0.18);
}

[data-theme="light"] .ai-ring.ring-3 {
  border-color: rgba(59, 130, 246, 0.18);
}

/* ==========================================================================
   CRM vs TOTALITY (Second Brain) Comparison Section
   ========================================================================== */

.crm-comparison-section {
  position: relative;
  padding: 100px 0 120px 0;
  background: var(--color-bg-dark);
  overflow: hidden;
  border-top: none;
}

.comparison-ambient-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(59, 130, 246, 0.08) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.comparison-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 56px auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comparison-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  margin-bottom: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.comparison-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.title-line-crm {
  color: #ffffff;
}

.title-line-totality {
  display: block;
}

.comparison-desc-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  max-width: 820px;
  margin: 0 auto;
}

.desc-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.desc-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(168, 85, 247, 0.4);
  transform: translateY(-2px);
}

.desc-bullet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  font-size: 12px;
}

/* Comparison Boxes Grid */
.comparison-boxes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  position: relative;
  z-index: 2;
}

.comparison-card {
  position: relative;
  border-radius: 24px;
  padding: 36px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.comparison-card:hover {
  transform: translateY(-4px);
}

/* Box 1: CRM */
.card-crm {
  background: rgba(18, 16, 25, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.card-crm:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}

/* Box 2: TOTALITY */
.card-totality {
  background: radial-gradient(120% 120% at 50% 0%, rgba(168, 85, 247, 0.12) 0%, rgba(18, 14, 28, 0.85) 60%);
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 32px rgba(168, 85, 247, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.card-totality:hover {
  border-color: rgba(168, 85, 247, 0.75);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 45px rgba(168, 85, 247, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Card Top Bar */
.card-top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
  padding-bottom: 0;
  border: none;
  border-bottom: none;
}

.card-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.card-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-crm {
  background: #64748b;
  box-shadow: 0 0 8px rgba(100, 116, 139, 0.6);
}

.dot-totality {
  background: #a855f7;
  box-shadow: 0 0 12px #a855f7, 0 0 20px #ec4899;
  animation: badgeDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.card-badge-name {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-transform: uppercase;
}

.card-status-label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.tag-ai-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d8b4fe;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

/* Workflow Container */
.card-workflow-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.workflow-step-box {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 16px 2px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}

.workflow-step-box:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.step-totality {
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.step-totality:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.2);
}

.step-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 20px;
  transition: all 0.3s ease;
}

.step-crm:hover .step-icon-wrapper {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.icon-totality {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(168, 85, 247, 0.35) 50%, rgba(236, 72, 153, 0.25) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.step-totality:hover .icon-totality {
  transform: scale(1.1);
  background: linear-gradient(135deg, #3b82f6 0%, #a855f7 50%, #ec4899 100%);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

.step-content-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.step-label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.step-sub {
  font-family: var(--font-primary);
  font-size: 11px;
  color: var(--color-text-muted);
}

.workflow-arrow-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  padding: 0 1px;
  flex-shrink: 0;
}

/* Continuous Running Arrow Animation in Totality Box */
.arrow-totality {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 28px;
  overflow: visible;
}

.arrow-totality i {
  display: inline-block;
  font-size: 22px;
  color: #c084fc;
  will-change: transform, opacity, filter;
  animation: arrowContinuousRun 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes arrowContinuousRun {
  0% {
    transform: translateX(-12px) scale(0.75);
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
    color: #9333ea;
  }

  3% {
    opacity: 0.6;
    color: #c084fc;
  }

  12% {
    transform: translateX(1px) scale(1.2);
    opacity: 1;
    filter: drop-shadow(0 0 8px #c084fc) drop-shadow(0 0 16px #ec4899);
    color: #ffffff;
  }

  20% {
    transform: translateX(10px) scale(0.95);
    opacity: 0.7;
    filter: drop-shadow(0 0 6px #a855f7);
    color: #f472b6;
  }

  25% {
    transform: translateX(18px) scale(0.65);
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
  }

  26%,
  100% {
    opacity: 0;
    transform: translateX(-12px) scale(0.75);
  }
}

/* Stagger sequential flow across all 3 arrows */
.totality-workflow .arrow-totality:nth-child(2) i {
  animation-delay: 0.45s;
}

.totality-workflow .arrow-totality:nth-child(4) i {
  animation-delay: 1.35s;
}

.totality-workflow .arrow-totality:nth-child(6) i {
  animation-delay: 2.25s;
}

/* 4-Stage Sequential Wave: Box 1 -> Arrow 1 -> Box 2 -> Arrow 2 -> Box 3 -> Arrow 3 -> Box 4 -> Loop */
@keyframes stepBoxSequentialWave {
  0% {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.2);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }

  4% {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.8);
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.45), 0 0 15px rgba(236, 72, 153, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    transform: translateY(-4px) scale(1.04);
  }

  16% {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 6px 24px rgba(168, 85, 247, 0.35);
    transform: translateY(-3px) scale(1.03);
  }

  24% {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.2);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }

  25%,
  100% {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.2);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }
}

.totality-workflow .step-totality:nth-child(1) {
  animation: stepBoxSequentialWave 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 0s;
}

.totality-workflow .step-totality:nth-child(3) {
  animation: stepBoxSequentialWave 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 0.9s;
}

.totality-workflow .step-totality:nth-child(5) {
  animation: stepBoxSequentialWave 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 1.8s;
}

.totality-workflow .step-totality:nth-child(7) {
  animation: stepBoxSequentialWave 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 2.7s;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .comparison-boxes-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .crm-comparison-section {
    padding: 70px 0 80px 0;
  }

  .comparison-card {
    padding: 24px 18px;
  }

  .card-top-bar {
    margin-bottom: 16px;
  }

  .card-workflow-container {
    flex-wrap: wrap;
    gap: 12px 6px;
  }

  .workflow-step-box {
    flex: 1 1 calc(50% - 24px);
    min-width: 110px;
    padding: 12px 6px;
  }

  .workflow-arrow-divider {
    display: none;
  }
}

/* Light Theme Support */
[data-theme="light"] .crm-comparison-section {
  background: #f8f7fd;
  border-top: none;
}

[data-theme="light"] .comparison-ambient-glow {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.04) 45%, transparent 70%);
}

[data-theme="light"] .comparison-badge {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
}

[data-theme="light"] .title-line-crm {
  color: #0f172a;
}

[data-theme="light"] .desc-item {
  color: #334155;
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .card-crm {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .card-totality {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.12);
}

[data-theme="light"] .card-badge-name {
  color: #0f172a;
}

[data-theme="light"] .step-label {
  color: #0f172a;
}

[data-theme="light"] .card-crm .workflow-step-box {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .card-totality .workflow-step-box {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.18);
}

[data-theme="light"] .arrow-totality i {
  color: #9333ea;
}

[data-theme="light"] .totality-workflow .step-totality:nth-child(1) {
  animation: stepBoxSequentialWaveLight 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 0s;
}

[data-theme="light"] .totality-workflow .step-totality:nth-child(3) {
  animation: stepBoxSequentialWaveLight 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 0.9s;
}

[data-theme="light"] .totality-workflow .step-totality:nth-child(5) {
  animation: stepBoxSequentialWaveLight 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 1.8s;
}

[data-theme="light"] .totality-workflow .step-totality:nth-child(7) {
  animation: stepBoxSequentialWaveLight 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite 2.7s;
}

@keyframes stepBoxSequentialWaveLight {
  0% {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.18);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }

  4% {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.22), 0 0 10px rgba(236, 72, 153, 0.15);
    transform: translateY(-4px) scale(1.04);
  }

  16% {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.16);
    transform: translateY(-3px) scale(1.03);
  }

  24% {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.18);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }

  25%,
  100% {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.18);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   Customer Journey & Non-Linear Funnel Reality Section
   ========================================================================== */

.customer-funnel-section {
  position: relative;
  padding: 100px 0 120px 0;
  background: var(--color-bg-dark);
  overflow: hidden;
}

.funnel-ambient-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 950px;
  height: 500px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, rgba(59, 130, 246, 0.08) 40%, rgba(236, 72, 153, 0.05) 60%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
}

.funnel-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 56px auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.funnel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  margin-bottom: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.funnel-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.title-line-light {
  color: #ffffff;
}

.funnel-subtitle {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}

/* Funnel Display Stack (Borderless Clean Layout) */
.funnel-display-stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.funnel-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.funnel-section-title {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.funnel-section-title.gradient-text {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
}

/* Designed Path Wrapper (5 Boxes in Row) */
.designed-steps-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.funnel-node-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}

.funnel-node-box:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 19px;
  transition: all 0.3s ease;
}

.funnel-node-box:hover .node-icon {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.node-final .node-icon {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(245, 158, 11, 0.35) 100%);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.node-text {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-transform: uppercase;
}

.node-connector-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 18px;
  flex-shrink: 0;
  padding: 0 2px;
}

/* Actual Journey SVG Wave Container (Matching Reference Image) */
.actual-journey-svg-container {
  width: 100%;
  position: relative;
  background: transparent;
  padding: 12px 0;
  overflow-x: auto;
}

.journey-wave-svg {
  width: 100%;
  min-width: 600px;
  height: auto;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.wave-path-glow,
.wave-path-main,
.wave-path-core {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Animated Wave Line Core & Photon */
.wave-line-flow {
  stroke-dasharray: 24 180;
  stroke-dashoffset: 204;
  animation: waveLineFlow 3.5s linear infinite;
}

@keyframes waveLineFlow {
  0% {
    stroke-dashoffset: 204;
  }

  100% {
    stroke-dashoffset: -204;
  }
}

.wave-energy-photon {
  filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px rgba(168, 85, 247, 0.9));
}

/* SVG Typography & Node Styling */
.svg-node-label {
  font-family: var(--font-primary), monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}

.cyan-label {
  fill: #38bdf8;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}

.pink-label {
  fill: #f472b6;
  filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.6));
}

.lavender-label {
  fill: #e9d5ff;
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.6));
}

.peach-label {
  fill: #fdba74;
  filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.6));
}

.win-label {
  fill: #ffffff;
  font-weight: 700;
  font-size: 14px;
  filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.9));
}

/* Static Touchpoint Nodes */
.svg-touchpoint-node {
  transition: transform 0.25s ease;
  cursor: pointer;
}

.svg-touchpoint-node:hover {
  filter: brightness(1.3);
}

.node-halo {
  opacity: 0.35;
  transform-origin: center;
}

.pulse-halo {
  opacity: 0.6;
  filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.7));
}

/* Bottom Takeaway Statement (Clean, Centered, No Box) */
.totality-takeaway-statement {
  text-align: center;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

.takeaway-text {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  display: inline-block;
}

.takeaway-text .gradient-text {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
}

/* Responsive Rules */
@media (max-width: 640px) {
  .customer-funnel-section {
    padding: 70px 0 80px 0;
  }

  .funnel-display-stack {
    gap: 36px;
    margin-bottom: 36px;
  }

  .designed-steps-wrapper {
    flex-wrap: wrap;
    gap: 12px 6px;
  }

  .funnel-node-box {
    flex: 1 1 calc(50% - 24px);
    min-width: 110px;
    padding: 12px 6px;
  }

  .node-connector-arrow {
    display: none;
  }

  .actual-journey-svg-container {
    padding: 12px 0;
  }


}

/* Light Theme Support */
[data-theme="light"] .customer-funnel-section {
  background: #f8f7fd;
}

[data-theme="light"] .funnel-ambient-glow {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.04) 40%, transparent 70%);
}

[data-theme="light"] .funnel-badge {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
}

[data-theme="light"] .title-line-light {
  color: #0f172a;
}

[data-theme="light"] .funnel-subtitle {
  color: #334155;
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .funnel-section-title {
  color: #0f172a;
}

[data-theme="light"] .funnel-node-box {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .node-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}

[data-theme="light"] .funnel-node-box:hover .node-icon {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

[data-theme="light"] .node-text {
  color: #0f172a;
}

[data-theme="light"] .node-connector-arrow {
  color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .node-bg-circle {
  fill: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .cyan-label {
  fill: #0284c7;
  filter: none;
}

[data-theme="light"] .pink-label {
  fill: #db2777;
  filter: none;
}

[data-theme="light"] .lavender-label {
  fill: #7e22ce;
  filter: none;
}

[data-theme="light"] .peach-label {
  fill: #c2410c;
  filter: none;
}

[data-theme="light"] .win-label {
  fill: #e11d48;
  filter: none;
}

[data-theme="light"] .takeaway-text {
  color: #0f172a;
}

/* ==========================================================================
   THE TOTALITY SYSTEM (Every Sale Has 7 Links) Section
   ========================================================================== */

.totality-system-section {
  position: relative;
  padding: 110px 0 130px 0;
  background: var(--color-bg-dark);
  overflow: hidden;
}

.system-ambient-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 500px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(56, 189, 248, 0.09) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.system-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.system-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  margin-bottom: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.system-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 10px #c084fc;
  animation: pulseDot 2s infinite ease-in-out;
}

.system-badge-text {
  font-family: var(--font-primary);
  font-size: var(--font-size-tag);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e9d5ff;
}

.system-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   Continuous 7-Link Chain Track Interface
   -------------------------------------------------------------------------- */
.totality-chain-wrapper {
  position: relative;
  z-index: 3;
  margin-bottom: 30px;
  padding: 56px 20px 42px 20px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
}

.totality-chain-wrapper::-webkit-scrollbar {
  height: 6px;
}

.totality-chain-wrapper::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 3px;
}

.chain-progress-bar-bg {
  position: absolute;
  top: 50%;
  left: 30px;
  right: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  border-radius: 2px;
}

.chain-progress-bar-fill {
  height: 100%;
  width: 14.28%;
  background: linear-gradient(90deg, #38bdf8 0%, #a855f7 50%, #ec4899 100%);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}

/* ==========================================================================
   Futuristic Circular Synaptic Chain Timeline Navigation (Reference Design)
   ========================================================================== */

.synaptic-chain-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-width: 980px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 24px 0 20px 0;
  overflow: visible;
}

.synaptic-node-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  position: relative;
  flex: 1 1 0px;
  min-width: 0;
  width: 0;
  overflow: visible;
}

.synaptic-node-item:last-child {
  flex: 1 1 0px;
  min-width: 0;
  width: 0;
}

/* Concentric Circular Pod */
.synaptic-circle-pod {
  width: 76px;
  height: 76px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  z-index: 3;
}

/* Ambient Radial Glow Halo (Hidden in black/dark idle state, ignites on pass/active) */
.orbital-glow-halo {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Outer Orbital Ring & Spinning Laser Arc (Dark/black in idle state) */
.orbital-outer-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: #08070d;
  box-shadow: none;
  transition: all 0.4s ease;
  overflow: hidden;
}

.orbital-laser-arc {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border-top: 2.5px solid #ffffff;
  border-right: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  border-left: 2.5px solid transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: laserArcSpin 2.5s linear infinite;
}

@keyframes laserArcSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Middle Concentric Ring */
.orbital-middle-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.4s ease;
}

/* Core Center Disc with Number (Black idle state) */
.orbital-core-disc {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #09080e;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: all 0.4s ease;
}

.node-tab-icon,
.node-num {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
}

.node-num {
  font-family: var(--font-primary), monospace;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Centered Label Underneath */
.synaptic-node-label {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 14px;
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* ==========================================================================
   Continuous Organic Flared Synaptic Bridge (Black Default -> Color on Pass)
   ========================================================================== */
.synaptic-bridge-neck {
  position: absolute;
  top: 38px;
  left: calc(50% + 38px);
  width: calc(100% - 76px);
  height: 40px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.bridge-neck-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Default/Idle Bridge State: Dark / Black Muted Silhouette */
.bridge-flare-top,
.bridge-flare-bot {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1.5px;
  fill: none;
  filter: none;
  transition: stroke 0.45s ease, stroke-width 0.45s ease, filter 0.45s ease;
}

.bridge-line-core {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 1px;
  fill: none;
  filter: none;
  transition: stroke 0.45s ease, stroke-width 0.45s ease, filter 0.45s ease;
}

.bridge-pulse-photon {
  position: absolute;
  top: 50%;
  left: -20px;
  width: 32px;
  height: 4px;
  border-radius: 4px;
  background: #ffffff;
  filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px currentColor);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Bridge Color Palette (Distinct non-repeating progression) */
.bridge-purple-blue {
  color: #a855f7;
}

.bridge-blue-cyan {
  color: #2563eb;
}

.bridge-cyan-orange {
  color: #00f5d4;
}

.bridge-orange-magenta {
  color: #f97316;
}

.bridge-magenta-green {
  color: #d946ef;
}

.bridge-green-gold {
  color: #10b981;
}

/* Color Pod Themes — Brand Theme Color Gradient */
.synaptic-circle-pod {
  color: #a855f7;
}

.synaptic-circle-pod .orbital-glow-halo {
  background: var(--color-gradient-primary);
}

.synaptic-circle-pod .orbital-laser-arc {
  border-top-color: #a855f7;
  border-right-color: #ec4899;
}

/* Passed, Active & Transferring Bridge States — Gradient Theme Conduit */
.synaptic-node-item.is-passed .bridge-flare-top,
.synaptic-node-item.is-passed .bridge-flare-bot,
.synaptic-node-item.is-transferring .bridge-flare-top,
.synaptic-node-item.is-transferring .bridge-flare-bot,
.synaptic-node-item.is-active .bridge-flare-top,
.synaptic-node-item.is-active .bridge-flare-bot {
  stroke: #a855f7;
  stroke-width: 2px;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
}

.synaptic-node-item.is-passed .bridge-line-core,
.synaptic-node-item.is-transferring .bridge-line-core,
.synaptic-node-item.is-active .bridge-line-core {
  stroke: #ec4899;
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.8));
}

.synaptic-node-item.is-transferring .bridge-pulse-photon {
  animation: photonBridgePass 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes photonBridgePass {
  0% {
    left: -20px;
    opacity: 0;
    transform: translateY(-50%) scaleX(0.5);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1.4);
  }

  100% {
    left: calc(100% + 15px);
    opacity: 0;
    transform: translateY(-50%) scaleX(0.5);
  }
}

/* Hover State */
.synaptic-node-item:hover .synaptic-circle-pod {
  transform: translateY(-2px);
}

.synaptic-node-item:hover .orbital-glow-halo {
  opacity: 0.3;
}

.synaptic-node-item:hover .orbital-outer-ring {
  border-color: rgba(168, 85, 247, 0.4);
}

.synaptic-node-item:hover .synaptic-node-label {
  color: #ffffff;
}

/* Active State */
.synaptic-node-item.is-active .synaptic-circle-pod {
  transform: scale(1.08);
}

.synaptic-node-item.is-active .orbital-glow-halo {
  background: var(--color-gradient-primary);
  opacity: 0.9;
  width: 106px;
  height: 106px;
  filter: blur(18px);
}

.synaptic-node-item.is-active .orbital-outer-ring {
  border-width: 2px;
  border-color: #ec4899;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
}

.synaptic-node-item.is-active .orbital-laser-arc {
  opacity: 1;
}

.synaptic-node-item.is-active .orbital-core-disc {
  background: var(--color-gradient-primary);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
}

.synaptic-node-item.is-active .node-tab-icon,
.synaptic-node-item.is-active .node-num {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  transform: scale(1.12);
}

.synaptic-node-item.is-active .synaptic-node-label {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

/* Passed State on Pods (Persist color glow after animation traverses) */
.synaptic-node-item.is-passed .orbital-glow-halo {
  opacity: 0.45;
  filter: blur(14px);
}

.synaptic-node-item.is-passed .orbital-outer-ring {
  border-color: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.synaptic-node-item.is-passed .orbital-laser-arc {
  opacity: 0.4;
}

.synaptic-node-item.is-passed .orbital-middle-ring {
  border-color: rgba(255, 255, 255, 0.2);
}

.synaptic-node-item.is-passed .orbital-core-disc {
  background: #0e0c1a;
  border-color: currentColor;
  box-shadow: 0 0 10px currentColor, inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.synaptic-node-item.is-passed .node-tab-icon,
.synaptic-node-item.is-passed .node-num {
  color: #ffffff;
}

.synaptic-node-item.is-passed .synaptic-node-label {
  color: #ffffff;
}

/* Arrival Surge Pop */
.synaptic-node-item.is-surging .synaptic-circle-pod {
  animation: synapticPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes synapticPop {
  0% {
    transform: scale(0.95);
    filter: brightness(1.5);
  }

  40% {
    transform: scale(1.14);
    filter: brightness(1.8);
  }

  100% {
    transform: scale(1.08);
    filter: brightness(1);
  }
}

.chain-link-item.is-active .link-icon {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: iconPulse 2s infinite ease-in-out;
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.chain-link-item.is-active .link-title {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.chain-link-item.is-active .link-tag {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.chain-link-item.is-passed .chain-interlink .interlink-line {
  background: linear-gradient(90deg, #38bdf8, #a855f7);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

.chain-link-item.is-passed .chain-interlink .interlink-node {
  color: #a855f7;
}

/* --------------------------------------------------------------------------
   Dynamic Display Card Stage
   -------------------------------------------------------------------------- */
.system-cards-stage {
  position: relative;
  z-index: 3;
  margin-top: 30px;
}

.system-detail-card {
  display: none;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

.system-detail-card.is-active {
  display: block;
  animation: cardReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card-ambient-highlight {
  display: none;
}

.detail-card-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  max-width: 1060px;
  margin: 0 auto;
}

/* Center Info */
.detail-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 3;
}

.detail-main-content {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 12px;
  text-align: center;
}

/* Center Visual Screenshot Frame below content */
.detail-card-visual {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
}

.visual-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #07060a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.15);
}

.visual-img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.system-detail-card:hover .visual-img {
  transform: none;
}

.visual-floating-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(11, 9, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.badge-dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 1.8s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   Responsive Rules
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .detail-card-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .system-detail-card {
    padding: 32px 24px;
  }
}

@media (max-width: 640px) {
  .totality-system-section {
    padding: 70px 0 80px 0;
  }

  .system-subtitle {
    font-size: 14px;
  }

  .detail-main-content {
    font-size: 16px;
  }

  .detail-metrics-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .metric-pill {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Light Theme Support
   -------------------------------------------------------------------------- */
[data-theme="light"] .totality-system-section {
  background: #f8fafc;
}

[data-theme="light"] .system-badge {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
}

[data-theme="light"] .system-badge-text {
  color: #7e22ce;
}

[data-theme="light"] .system-subtitle {
  color: #334155;
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .chain-link-pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .link-title {
  color: #0f172a;
}

[data-theme="light"] .link-tag {
  color: #64748b;
}

[data-theme="light"] .link-number {
  background: rgba(0, 0, 0, 0.05);
  color: #475569;
}

[data-theme="light"] .link-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #64748b;
}

[data-theme="light"] .synaptic-node-label {
  color: #334155;
}

[data-theme="light"] .orbital-core-disc {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .node-num {
  color: #0f172a;
}

[data-theme="light"] .synaptic-node-item.is-active .orbital-core-disc {
  background: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}

[data-theme="light"] .synaptic-node-item.is-active .node-num {
  color: #0f172a;
}

[data-theme="light"] .synaptic-node-item.is-active .synaptic-node-label {
  color: #7e22ce;
}

[data-theme="light"] .bridge-flare-top,
[data-theme="light"] .bridge-flare-bot {
  stroke: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .bridge-line-core {
  stroke: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .system-detail-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .detail-link-title {
  color: #0f172a;
}

[data-theme="light"] .detail-main-content {
  color: #7e22ce;
}

[data-theme="light"] .detail-feature-item .feature-text {
  color: #334155;
}

[data-theme="light"] .detail-feature-item .feature-text strong {
  color: #0f172a;
}

[data-theme="light"] .metric-pill {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .metric-val {
  color: #0f172a;
}

[data-theme="light"] .visual-floating-badge {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

/* ==========================================================================
   AI-NATIVE BY DESIGN Section
   ========================================================================== */
.ai-native-section {
  position: relative;
  padding: 100px 0;
  background-color: var(--color-bg-dark);
  overflow: hidden;
}

.ai-native-ambient-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.ai-native-header {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 50px auto;
  position: relative;
  z-index: 2;
}

.ai-native-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}

.ai-native-title .title-line-light {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ai-native-title .title-line-gradient {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* 3 Feature Pillars Grid */
.ai-native-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}

.ai-pillar-card {
  position: relative;
  background: linear-gradient(135deg, rgba(18, 15, 30, 0.75) 0%, rgba(11, 9, 20, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.pillar-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ai-pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.2);
}

.ai-pillar-card:hover .pillar-card-glow {
  opacity: 1;
}

.pillar-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
  transition: all 0.35s ease;
}

.ai-pillar-card:hover .pillar-icon-box {
  background: var(--color-gradient-primary);
  border-color: transparent;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}

.pillar-heading {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.pillar-content {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) {
  .ai-native-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* --------------------------------------------------------------------------
   Dynamic 7 Links to Totality Brain Neural Matrix Diagram
   -------------------------------------------------------------------------- */
.brain-matrix-stage {
  margin-top: 80px;
  position: relative;
  z-index: 3;
}

.brain-matrix-header {
  text-align: center;
  margin-bottom: 44px;
}

.matrix-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.matrix-title {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.brain-matrix-container {
  display: grid;
  grid-template-columns: 220px minmax(60px, 1fr) 300px minmax(60px, 1fr) 220px;
  align-items: center;
  margin: 0 auto;
}

/* Vertical Link Card Stacks (Left & Right) */
.vertical-links-stack {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 4;
  height: 320px;
  justify-content: space-between;
  box-sizing: border-box;
}

.stack-left {
  gap: 0;
}

.stack-right {
  gap: 0;
  padding: 26px 0;
}

.v-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(18, 15, 30, 0.88) 0%, rgba(11, 9, 20, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.stack-left .v-link-card:hover {
  transform: translateX(6px);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.25);
}

.stack-right .v-link-card:hover {
  transform: translateX(-6px);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.25);
}

.v-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #c084fc;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.v-link-card:hover .v-link-icon {
  background: var(--color-gradient-primary);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.5);
}

.v-link-info {
  display: flex;
  flex-direction: column;
}

.v-link-title {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.v-link-pulse {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  max-width: 8px;
  max-height: 8px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background: #a855f7;
  margin-left: auto;
  box-shadow: 0 0 10px #a855f7;
  animation: pulseBeacon 1.6s infinite ease-in-out;
}

.stack-right .v-link-pulse {
  margin-left: 0;
  margin-right: 0;
}

.stack-right .v-link-icon {
  margin-left: auto;
}

@keyframes pulseBeacon {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* Conduits on Both Sides (Left & Right) */
.brain-conduit-area {
  position: relative;
  height: 320px;
  width: 100%;
}

.conduit-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.conduit-line {
  stroke: rgba(168, 85, 247, 0.45);
  stroke-width: 2px;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.3));
  transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

/* Soft Dimming for Non-Active Lines when focused */
.brain-matrix-container.has-focus .conduit-line:not(.is-active):not(.is-highlighted) {
  opacity: 0.25;
  stroke-width: 1.5px;
}

/* Active & Highlighted Conduits with Luminescence */
.conduit-line.line-0.is-active,
.conduit-line.line-0.is-highlighted {
  stroke: #a855f7 !important;
  stroke-width: 3.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.95)) !important;
}

.conduit-line.line-1.is-active,
.conduit-line.line-1.is-highlighted {
  stroke: #3b82f6 !important;
  stroke-width: 3.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.95)) !important;
}

.conduit-line.line-2.is-active,
.conduit-line.line-2.is-highlighted {
  stroke: #00f5d4 !important;
  stroke-width: 3.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(0, 245, 212, 0.95)) !important;
}

.conduit-line.line-3.is-active,
.conduit-line.line-3.is-highlighted {
  stroke: #f97316 !important;
  stroke-width: 3.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.95)) !important;
}

.conduit-line.line-4.is-active,
.conduit-line.line-4.is-highlighted {
  stroke: #d946ef !important;
  stroke-width: 3.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(217, 70, 239, 0.95)) !important;
}

.conduit-line.line-5.is-active,
.conduit-line.line-5.is-highlighted {
  stroke: #10b981 !important;
  stroke-width: 3.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.95)) !important;
}

.conduit-line.line-6.is-active,
.conduit-line.line-6.is-highlighted {
  stroke: #eab308 !important;
  stroke-width: 3.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.95)) !important;
}

/* SVG Path Signal Particles */
.signal-dot {
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.brain-matrix-container.has-focus .signal-dot:not(.is-active):not(.is-highlighted) {
  opacity: 0.3;
}

/* Left Conduit Inflow Paths (Left Cards -> Center Brain) */
.dot-0-in {
  offset-path: path("M 0,28 C 80,28 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 0s;
}

.dot-1-in {
  offset-path: path("M 0,116 C 80,116 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 0.7s;
}

.dot-2-in {
  offset-path: path("M 0,204 C 80,204 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 1.4s;
}

.dot-3-in {
  offset-path: path("M 0,292 C 80,292 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 2.1s;
}

/* Left Secondary Dense Inflow */
.dot-0-in-b {
  offset-path: path("M 0,28 C 80,28 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 2.1s;
}

.dot-1-in-b {
  offset-path: path("M 0,116 C 80,116 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 2.8s;
}

.dot-2-in-b {
  offset-path: path("M 0,204 C 80,204 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 3.5s;
}

.dot-3-in-b {
  offset-path: path("M 0,292 C 80,292 80,160 160,160");
  animation: travelPathForward 4.2s infinite linear 0.3s;
}

/* Left Revert Outflow (Center Brain -> Left Cards) */
.dot-0-out {
  offset-path: path("M 0,28 C 80,28 80,160 160,160");
  animation: travelPathBackward 4.2s infinite linear 2.1s;
}

.dot-1-out {
  offset-path: path("M 0,116 C 80,116 80,160 160,160");
  animation: travelPathBackward 4.2s infinite linear 2.8s;
}

.dot-2-out {
  offset-path: path("M 0,204 C 80,204 80,160 160,160");
  animation: travelPathBackward 4.2s infinite linear 3.5s;
}

.dot-3-out {
  offset-path: path("M 0,292 C 80,292 80,160 160,160");
  animation: travelPathBackward 4.2s infinite linear 0.5s;
}

/* Right Conduit Inflow Paths (Right Cards -> Center Brain: reverse along path) */
.dot-4-in {
  offset-path: path("M 0,160 C 80,160 80,54 160,54");
  animation: travelPathBackward 4.2s infinite linear 0.4s;
}

.dot-5-in {
  offset-path: path("M 0,160 L 160,160");
  animation: travelPathBackward 4.2s infinite linear 1.2s;
}

.dot-6-in {
  offset-path: path("M 0,160 C 80,160 80,266 160,266");
  animation: travelPathBackward 4.2s infinite linear 2.0s;
}

/* Right Secondary Dense Inflow */
.dot-4-in-b {
  offset-path: path("M 0,160 C 80,160 80,54 160,54");
  animation: travelPathBackward 4.2s infinite linear 2.5s;
}

.dot-5-in-b {
  offset-path: path("M 0,160 L 160,160");
  animation: travelPathBackward 4.2s infinite linear 3.3s;
}

.dot-6-in-b {
  offset-path: path("M 0,160 C 80,160 80,266 160,266");
  animation: travelPathBackward 4.2s infinite linear 4.1s;
}

/* Right Revert Outflow (Center Brain -> Right Cards: forward along path) */
.dot-4-out {
  offset-path: path("M 0,160 C 80,160 80,54 160,54");
  animation: travelPathForward 4.2s infinite linear 2.5s;
}

.dot-5-out {
  offset-path: path("M 0,160 L 160,160");
  animation: travelPathForward 4.2s infinite linear 3.3s;
}

.dot-6-out {
  offset-path: path("M 0,160 C 80,160 80,266 160,266");
  animation: travelPathForward 4.2s infinite linear 0.5s;
}

/* Accelerated Particle Flow on Active Path */
.signal-dot.is-active,
.signal-dot.is-highlighted {
  opacity: 1 !important;
  transform: scale(1.4);
  animation-duration: 2.1s !important;
}

@keyframes travelPathForward {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes travelPathBackward {
  0% {
    offset-distance: 100%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    offset-distance: 0%;
    opacity: 0;
  }
}

/* Left & Right Cards Active States */
.stack-left .v-link-card.is-active,
.stack-left .v-link-card.is-highlighted {
  transform: translateX(8px);
  border-color: rgba(255, 255, 255, 0.4);
}

.stack-right .v-link-card.is-active,
.stack-right .v-link-card.is-highlighted {
  transform: translateX(-8px);
  border-color: rgba(255, 255, 255, 0.4);
}

.v-link-card.pod-purple.is-active,
.v-link-card.pod-purple.is-highlighted {
  border-color: #a855f7;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(168, 85, 247, 0.45);
}

.v-link-card.pod-blue.is-active,
.v-link-card.pod-blue.is-highlighted {
  border-color: #3b82f6;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(59, 130, 246, 0.45);
}

.v-link-card.pod-cyan.is-active,
.v-link-card.pod-cyan.is-highlighted {
  border-color: #00f5d4;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 245, 212, 0.45);
}

.v-link-card.pod-orange.is-active,
.v-link-card.pod-orange.is-highlighted {
  border-color: #f97316;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(249, 115, 22, 0.45);
}

.v-link-card.pod-magenta.is-active,
.v-link-card.pod-magenta.is-highlighted {
  border-color: #d946ef;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(217, 70, 239, 0.45);
}

.v-link-card.pod-green.is-active,
.v-link-card.pod-green.is-highlighted {
  border-color: #10b981;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.45);
}

.v-link-card.pod-gold.is-active,
.v-link-card.pod-gold.is-highlighted {
  border-color: #eab308;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(234, 179, 8, 0.45);
}

/* Right Column: 3D Neural Totality Brain Matrix */
.brain-sphere-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 4;
}

.neural-brain-wrapper {
  width: 100%;
  max-width: 360px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: neuralBrainFloat 4.5s ease-in-out infinite alternate;
}

@keyframes neuralBrainFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

/* Dynamic Animated Backside Shadow & Luminescent Energy Field */
.neural-backside-shadow {
  position: absolute;
  inset: -12% -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.45) 0%, rgba(168, 85, 247, 0.38) 35%, rgba(59, 130, 246, 0.22) 60%, transparent 80%);
  filter: blur(40px);
  animation: neuralBacksideShadowPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes neuralBacksideShadowPulse {
  0% {
    transform: scale(0.88);
    opacity: 0.6;
    filter: blur(35px);
  }

  50% {
    transform: scale(1.14);
    opacity: 0.95;
    filter: blur(48px);
  }

  100% {
    transform: scale(0.98);
    opacity: 0.75;
    filter: blur(38px);
  }
}

/* Holographic Synaptic Aura Background */
.neural-aura-glow {
  position: absolute;
  inset: -20% -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.3) 0%, rgba(168, 85, 247, 0.24) 40%, rgba(59, 130, 246, 0.12) 65%, transparent 80%);
  filter: blur(45px);
  animation: neuralAuraPulse 3.5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
  transition: background 0.5s ease;
}

@keyframes neuralAuraPulse {
  0% {
    transform: scale(0.92) rotate(0deg);
    opacity: 0.65;
  }

  100% {
    transform: scale(1.1) rotate(4deg);
    opacity: 1;
  }
}

/* 3D Brain Visual Container & Image */
.neural-brain-visual {
  position: relative;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neural-brain-img {
  width: 100%;
  height: auto;
  max-height: 290px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 25px rgba(0, 210, 255, 0.5)) drop-shadow(0 0 55px rgba(168, 85, 247, 0.4)) drop-shadow(0 0 90px rgba(59, 130, 246, 0.25));
  animation: neuralBrainShadowGlow 4s ease-in-out infinite alternate;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.neural-brain-wrapper:hover .neural-brain-img,
.brain-matrix-container.has-focus .neural-brain-img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 35px rgba(0, 210, 255, 0.75)) drop-shadow(0 0 75px rgba(168, 85, 247, 0.6)) drop-shadow(0 0 110px rgba(59, 130, 246, 0.4));
}

@keyframes neuralBrainShadowGlow {
  0% {
    filter: drop-shadow(0 0 20px rgba(0, 210, 255, 0.4)) drop-shadow(0 0 45px rgba(168, 85, 247, 0.35)) drop-shadow(0 0 80px rgba(59, 130, 246, 0.2)) brightness(0.98);
  }

  100% {
    filter: drop-shadow(0 0 36px rgba(0, 210, 255, 0.75)) drop-shadow(0 0 80px rgba(168, 85, 247, 0.55)) drop-shadow(0 0 120px rgba(59, 130, 246, 0.35)) brightness(1.12);
  }
}

/* Neural Network Synaptic Nodes & Firing Energy Flares */
.neural-synapse-node {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
}

.synapse-core {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff, 0 0 16px #00d2ff, 0 0 24px #ec4899;
  z-index: 2;
  position: relative;
  animation: synapseCorePulse 2.2s infinite ease-in-out;
}

.synapse-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 210, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
  animation: synapseRippleExpand 2.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
}

.synapse-flare {
  position: absolute;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(0, 210, 255, 0.6) 30%, rgba(236, 72, 153, 0.25) 60%, transparent 80%);
  border-radius: 50%;
  transform: rotate(45deg);
  animation: synapseFlareFlash 2.8s infinite ease-in-out;
  pointer-events: none;
}

.synapse-flare::before,
.synapse-flare::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  border-radius: 2px;
}

.synapse-flare::before {
  top: 50%;
  left: -20%;
  width: 140%;
  height: 1.5px;
  transform: translateY(-50%);
  box-shadow: 0 0 6px #00d2ff;
}

.synapse-flare::after {
  left: 50%;
  top: -20%;
  height: 140%;
  width: 1.5px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px #ec4899;
}

/* Active Node Boost */
.neural-synapse-node.is-active,
.neural-synapse-node.is-highlighted {
  transform: translate(-50%, -50%) scale(1.6);
}

.neural-synapse-node.is-active .synapse-core,
.neural-synapse-node.is-highlighted .synapse-core {
  background: #ffffff;
  box-shadow: 0 0 12px #ffffff, 0 0 25px #00f5d4, 0 0 40px #ec4899;
  animation-duration: 1.2s;
}

.neural-synapse-node.is-active .synapse-ripple,
.neural-synapse-node.is-highlighted .synapse-ripple {
  border-color: #ffffff;
  animation-duration: 1.5s;
}

/* Staggered Synaptic Firing Timings */
.syn-node-0 .synapse-core {
  animation-delay: 0s;
}

.syn-node-0 .synapse-ripple {
  animation-delay: 0s;
}

.syn-node-0 .synapse-flare {
  animation-delay: 0s;
}

.syn-node-1 .synapse-core {
  animation-delay: 0.4s;
}

.syn-node-1 .synapse-ripple {
  animation-delay: 0.4s;
}

.syn-node-1 .synapse-flare {
  animation-delay: 0.4s;
}

.syn-node-2 .synapse-core {
  animation-delay: 0.8s;
}

.syn-node-2 .synapse-ripple {
  animation-delay: 0.8s;
}

.syn-node-2 .synapse-flare {
  animation-delay: 0.8s;
}

.syn-node-3 .synapse-core {
  animation-delay: 1.2s;
}

.syn-node-3 .synapse-ripple {
  animation-delay: 1.2s;
}

.syn-node-3 .synapse-flare {
  animation-delay: 1.2s;
}

.syn-node-4 .synapse-core {
  animation-delay: 1.6s;
}

.syn-node-4 .synapse-ripple {
  animation-delay: 1.6s;
}

.syn-node-4 .synapse-flare {
  animation-delay: 1.6s;
}

.syn-node-5 .synapse-core {
  animation-delay: 2.0s;
}

.syn-node-5 .synapse-ripple {
  animation-delay: 2.0s;
}

.syn-node-5 .synapse-flare {
  animation-delay: 2.0s;
}

.syn-node-6 .synapse-core {
  animation-delay: 1.0s;
}

.syn-node-6 .synapse-ripple {
  animation-delay: 1.0s;
}

.syn-node-6 .synapse-flare {
  animation-delay: 1.0s;
}

@keyframes synapseCorePulse {

  0%,
  100% {
    transform: scale(0.85);
    opacity: 0.7;
    box-shadow: 0 0 6px #ffffff, 0 0 12px #00d2ff;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
    box-shadow: 0 0 12px #ffffff, 0 0 24px #00d2ff, 0 0 35px #ec4899;
  }
}

@keyframes synapseRippleExpand {
  0% {
    transform: scale(0.6);
    opacity: 0.95;
  }

  70% {
    transform: scale(2.8);
    opacity: 0.25;
  }

  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}

@keyframes synapseFlareFlash {

  0%,
  100% {
    transform: rotate(45deg) scale(0.7);
    opacity: 0.4;
  }

  50% {
    transform: rotate(45deg) scale(1.3);
    opacity: 1;
    filter: drop-shadow(0 0 10px #ffffff);
  }
}

/* Brain HUD Title */
.neural-brain-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  z-index: 3;
}

.neural-hud-title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  margin: 0;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
}

/* Interactive Link Intelligence Info Card */
.brain-intel-stage {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 4;
}

.brain-intel-card {
  width: 100%;
  max-width: 680px;
  background: linear-gradient(135deg, rgba(18, 15, 30, 0.82) 0%, rgba(10, 8, 18, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 16px 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.intel-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.intel-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  transition: all 0.3s ease;
}

.intel-badge-icon {
  font-size: 14px;
}

.intel-sync-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #10b981;
}

.intel-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseBeacon 1.5s infinite ease-in-out;
}

.intel-description {
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (max-width: 1100px) {
  .brain-matrix-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .brain-conduit-area {
    display: none;
  }

  .stage-center {
    order: -1;
    margin-bottom: 8px;
  }

  .stack-left {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  .stack-right {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  .stack-right .v-link-card:hover,
  .stack-right .v-link-card.is-active,
  .stack-right .v-link-card.is-highlighted {
    transform: translateX(6px);
  }

  .neural-brain-wrapper {
    max-width: 280px;
  }
}

/* ==========================================================================
   CUSTOMER CONTINUITY / DON'T REPEAT THEMSELVES SECTION (SYMMETRICAL CONSTELLATION)
   ========================================================================== */

.customer-repeat-section {
  padding: 90px 0 45px;
  position: relative;
  overflow: visible;
  background: transparent;
}

.repeat-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(59, 130, 246, 0.09) 45%, transparent 75%);
  filter: blur(120px);
  pointer-events: none;
  z-index: 1;
}

/* Center Aligned Section Header */
.repeat-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}

.repeat-title {
  font-family: var(--font-primary);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.repeat-title .title-line-light {
  color: var(--color-white);
}

.repeat-title .title-line-gradient {
  background: var(--color-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Top Customer Card (Center Aligned) */
.repeat-top-customer-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 5;
}

.repeat-customer-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(18, 15, 30, 0.94) 0%, rgba(11, 9, 20, 0.98) 100%);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(168, 85, 247, 0.25);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: relative;
  z-index: 5;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.repeat-customer-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent-purple);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 35px rgba(168, 85, 247, 0.45);
}

.customer-avatar-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}

.customer-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.customer-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.customer-name {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.customer-meta {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #c084fc;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.customer-location {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 4px;
}

.customer-card-pulse {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  max-width: 8px;
  max-height: 8px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background: var(--color-accent-purple);
  margin-left: 4px;
  box-shadow: 0 0 10px var(--color-accent-purple);
  animation: pulseBeacon 1.5s infinite ease-in-out;
}

/* 5-Column Constellation Stage */
.repeat-constellation-stage {
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(30px, 1fr) minmax(220px, 250px) minmax(30px, 1fr) minmax(290px, 340px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/* Side Stacks (Left & Right 2 Boxes) */
.repeat-side-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  padding: 10px 0;
  position: relative;
  z-index: 4;
}

/* Node Cards in ACX Totality Brand Theme (Matches 7 Links Signal Matrix Exact Card Layout) */
.repeat-node-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(18, 15, 30, 0.88) 0%, rgba(11, 9, 20, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.repeat-node-card .v-link-info {
  flex: 1;
  min-width: 0;
}

.repeat-node-card .v-link-title {
  white-space: nowrap;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

.stack-left .repeat-node-card:hover {
  transform: translateX(6px);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.25);
}

.stack-right .repeat-node-card:hover {
  transform: translateX(-6px);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.25);
}

.repeat-node-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.repeat-node-title {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
  letter-spacing: -0.01em;
}

.repeat-node-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Card Pulse Dot Anchor on Connecting Side (Theme Purple) */
.repeat-card-node-pulse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent-purple);
  box-shadow: 0 0 12px var(--color-accent-purple);
  z-index: 5;
}

.stack-left .repeat-card-node-pulse {
  right: -5px;
}

.stack-right .repeat-card-node-pulse {
  left: -5px;
}

.pod-marketing .repeat-card-node-pulse,
.pod-presales .repeat-card-node-pulse,
.pod-sales .repeat-card-node-pulse,
.pod-broker .repeat-card-node-pulse {
  background: var(--color-accent-purple);
  box-shadow: 0 0 12px var(--color-accent-purple);
}

/* SVG Conduit Columns (Solid Neural Conduits in Theme Purple) */
.repeat-conduit-col {
  height: 300px;
  width: 100%;
  position: relative;
  pointer-events: none;
  z-index: 2;
}

.repeat-conduit-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.repeat-conduit-path,
.path-l1,
.path-l2,
.path-r1,
.path-r2 {
  fill: none;
  stroke: rgba(168, 85, 247, 0.55) !important;
  stroke-width: 2px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45)) !important;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

/* Active & Highlighted Luminescence on Hover (Purple Theme) */
.path-l1.is-active,
.path-l2.is-active,
.path-r1.is-active,
.path-r2.is-active,
.repeat-constellation-stage.focus-step-1 .path-l1,
.repeat-constellation-stage.focus-step-2 .path-l2,
.repeat-constellation-stage.focus-step-3 .path-r1,
.repeat-constellation-stage.focus-step-4 .path-r2 {
  stroke: #a855f7 !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.95)) !important;
}

/* Dim non-active lines when a box is hovered */
.repeat-constellation-stage.has-focus .repeat-conduit-path:not(.is-active) {
  opacity: 0.25;
  stroke-width: 1.5px;
}

/* Continuous Signal Flow Particles Along Paths */
.repeat-flow-dot {
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.repeat-constellation-stage.has-focus .repeat-flow-dot:not(.is-active) {
  opacity: 0.3;
}

.dot-l1 {
  offset-path: path("M 0,38 C 80,38 80,150 160,150");
  animation: conduitSignalTravel 3.2s infinite linear 0s;
}

.dot-l1-b {
  offset-path: path("M 0,38 C 80,38 80,150 160,150");
  animation: conduitSignalTravel 3.2s infinite linear 1.6s;
}

.dot-l2 {
  offset-path: path("M 0,262 C 80,262 80,150 160,150");
  animation: conduitSignalTravel 3.2s infinite linear 0.8s;
}

.dot-l2-b {
  offset-path: path("M 0,262 C 80,262 80,150 160,150");
  animation: conduitSignalTravel 3.2s infinite linear 2.4s;
}

.dot-r1 {
  offset-path: path("M 0,150 C 80,150 80,38 160,38");
  animation: conduitSignalTravel 3.2s infinite linear 0.4s;
}

.dot-r1-b {
  offset-path: path("M 0,150 C 80,150 80,38 160,38");
  animation: conduitSignalTravel 3.2s infinite linear 2.0s;
}

.dot-r2 {
  offset-path: path("M 0,150 C 80,150 80,262 160,262");
  animation: conduitSignalTravel 3.2s infinite linear 1.2s;
}

.dot-r2-b {
  offset-path: path("M 0,150 C 80,150 80,262 160,262");
  animation: conduitSignalTravel 3.2s infinite linear 2.8s;
}

@keyframes conduitSignalTravel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* Center Totality Brain Stage */
.repeat-center-brain-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 4;
}

/* Vertical Top Connector Beam from Customer Card to Brain */
.repeat-top-connector {
  width: 2px;
  height: 44px;
  margin-top: -16px;
  margin-bottom: 2px;
  position: relative;
  background: var(--color-gradient-primary);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
  overflow: hidden;
}

.repeat-top-particle {
  position: absolute;
  top: 0;
  left: -1px;
  width: 4px;
  height: 12px;
  border-radius: 4px;
  background: var(--color-white);
  box-shadow: 0 0 10px var(--color-white), 0 0 16px var(--color-accent-purple);
  animation: flowTopParticle 1.8s infinite linear;
}

@keyframes flowTopParticle {
  0% {
    top: -14px;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Brain Core & Wrapper */
.repeat-brain-core-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}

.repeat-brain-aura {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(59, 130, 246, 0.25) 45%, rgba(236, 72, 153, 0.1) 65%, transparent 80%);
  filter: blur(35px);
  animation: repeatBrainAuraPulse 4s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.repeat-brain-core {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.repeat-brain-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.65)) drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  animation: floatRepeatBrain 5s infinite ease-in-out;
}

.repeat-brain-synapses {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.repeat-synapse-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 12px var(--color-accent-blue), 0 0 18px var(--color-accent-purple);
}

.repeat-synapse-dot.s1 {
  top: 25%;
  left: 32%;
  animation: synapseFlash 2.4s infinite ease-in-out 0s;
}

.repeat-synapse-dot.s2 {
  top: 20%;
  left: 64%;
  animation: synapseFlash 2.4s infinite ease-in-out 0.6s;
}

.repeat-synapse-dot.s3 {
  top: 50%;
  left: 48%;
  animation: synapseFlash 2.4s infinite ease-in-out 1.2s;
}

.repeat-synapse-dot.s4 {
  top: 68%;
  left: 60%;
  animation: synapseFlash 2.4s infinite ease-in-out 1.8s;
}

.repeat-brain-caption {
  position: relative;
  z-index: 3;
  margin-top: 6px;
}

.repeat-brain-title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin: 0;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.5), 0 0 24px rgba(168, 85, 247, 0.7);
}

@keyframes repeatBrainAuraPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.7;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
}

@keyframes floatRepeatBrain {

  0%,
  100% {
    transform: translateY(0px) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.02);
  }
}

@keyframes synapseFlash {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.4;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
    box-shadow: 0 0 16px #ffffff, 0 0 24px #a855f7;
  }
}

/* Bottom Conclusion Caption below boxes */
.repeat-bottom-caption {
  text-align: center;
  margin-top: 36px;
  position: relative;
  z-index: 4;
}

.repeat-bottom-text {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  display: inline-block;
  margin: 0;
}

/* Responsive Constellation Layout */
@media (max-width: 1080px) {
  .repeat-constellation-stage {
    grid-template-columns: minmax(250px, 280px) minmax(20px, 1fr) minmax(180px, 220px) minmax(20px, 1fr) minmax(250px, 280px);
  }

  .repeat-node-title {
    font-size: 14px;
  }

  .repeat-node-desc {
    font-size: 11.5px;
  }

  .repeat-brain-core {
    width: 170px;
    height: 170px;
  }
}

@media (max-width: 860px) {
  .customer-repeat-section {
    padding: 70px 0 90px;
  }

  .repeat-constellation-stage {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    max-width: 460px;
  }

  .repeat-side-stack {
    height: auto;
    gap: 16px;
    width: 100%;
  }

  .repeat-node-card {
    height: auto;
    min-height: 80px;
  }

  .repeat-conduit-col {
    display: none;
  }

  .repeat-top-connector {
    height: 24px;
    margin-top: 0;
  }

  .stack-left .repeat-card-node-pulse,
  .stack-right .repeat-card-node-pulse {
    display: none;
  }
}

/* ==========================================================================
   SPEAK MORE, TYPE LESS SECTION
   ========================================================================== */
.speak-more-section {
  position: relative;
  padding: 85px 0 120px;
  background: transparent;
  overflow: visible;
}

.speak-ambient-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(59, 130, 246, 0.09) 45%, transparent 75%);
  filter: blur(120px);
  pointer-events: none;
  z-index: 1;
}

.speak-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 3;
}

.speak-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 0 0 16px;
}

.speak-title .title-line-light {
  color: var(--color-white);
  display: block;
}

.speak-title .title-line-gradient {
  background: var(--color-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.speak-subtitle {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

/* 4 Horizontal Boxes Layout (Strict Border-to-Border Line Connection) */
.speak-boxes-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  max-width: 980px;
  margin: 0 auto 22px;
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Platform & Pillars Meta Block Below 4 Boxes (Centered) */
.speak-platform-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 36px auto 38px;
  text-align: center;
  position: relative;
  z-index: 3;
}

.platform-command-heading,
.platform-command-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.platform-command-heading .badge-brand,
.platform-command-badge .badge-brand {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

.platform-command-heading .tag-cross,
.platform-command-badge .tag-cross {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.platform-pillars-text {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  letter-spacing: 0.02em;
  text-align: center;
}

.speak-boxes-container .step-totality {
  flex: 1;
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, rgba(20, 14, 36, 0.98) 0%, rgba(12, 8, 22, 0.99) 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.speak-boxes-container .step-totality:hover {
  background: linear-gradient(135deg, rgba(30, 20, 54, 0.98) 0%, rgba(18, 12, 34, 0.99) 100%);
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 6px 25px rgba(168, 85, 247, 0.35);
  transform: translateY(-2px);
}

.speak-boxes-container .step-icon-wrapper {
  width: 38px;
  height: 38px;
  font-size: 18px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.speak-boxes-container .step-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-white);
  white-space: nowrap;
}

/* Animated SVG Conduit Connectors (Strictly Outer Border to Border) */
.speak-conduit-connector {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  position: relative;
  z-index: 1;
  overflow: visible;
  margin: 0;
}

.speak-conduit-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.speak-conduit-path {
  fill: none;
  stroke: rgba(168, 85, 247, 0.65);
  stroke-width: 2px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}

.speak-signal-dot,
.speak-signal-dot-inner {
  offset-path: path("M 0,10 L 100,10");
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.flow-c1,
.flow-c1-b {
  animation: speakSignalFlow 2.4s infinite linear 0s;
}

.flow-c2,
.flow-c2-b {
  animation: speakSignalFlow 2.4s infinite linear 0.8s;
}

.flow-c3,
.flow-c3-b {
  animation: speakSignalFlow 2.4s infinite linear 1.6s;
}

@keyframes speakSignalFlow {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@media (max-width: 992px) {
  .speak-boxes-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .speak-conduit-connector {
    display: none;
  }
}

@media (max-width: 576px) {
  .speak-boxes-container {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FEATURED SALES EXECUTIVE LADY STAGE & FULL-WIDTH AUDIO WAVE BACKGROUND
   ========================================================================== */
.speak-lady-stage {
  margin-top: 10px;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.speak-lady-wrapper {
  position: relative;
  max-width: 960px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.speak-lady-img {
  height: 400px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6));
  transition: transform 0.4s ease, filter 0.4s ease;
  flex-shrink: 0;
}

.speak-lady-wrapper:hover .speak-lady-img {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.75));
}

/* Speech Bubble: Audio Transcript Box (Positioned beside lady's face while lady remains dead-centered) */
.speak-speech-bubble {
  position: absolute;
  left: calc(50% + 120px);
  top: 30px;
  z-index: 4;
  max-width: 320px;
  width: 100%;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(28, 18, 50, 0.95), rgba(18, 12, 34, 0.98));
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 16px;
  border-top-left-radius: 4px;
  /* Message shape */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(168, 85, 247, 0.18);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Speech Bubble Tail Pointing Left Towards Lady's Face */
.speak-speech-bubble::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 32px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 11px solid rgba(168, 85, 247, 0.5);
}

.speak-speech-bubble::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 32px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #1c1232;
}

.speak-speech-bubble:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 132, 252, 0.8);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 32px rgba(168, 85, 247, 0.32);
}

/* High-Density Cyan Audio Frequency Waveform Canvas (Passes behind lady chest) */
.speak-cyan-waveform-bg {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 940px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.cyan-waveform-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Gentle pulse animation on cyan frequency lines */
.cyan-wave-lines {
  animation: cyanWavePulse 2.5s infinite ease-in-out alternate;
}

.cyan-wave-lines line {
  stroke-linecap: round;
}

@keyframes cyanWavePulse {
  0% {
    opacity: 0.85;
    filter: drop-shadow(0 0 4px #a855f7);
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #c084fc) drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));
  }

  100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 6px #8b5cf6);
  }
}

/* Individual Vertical Frequency Line Animation for Live Audio Visualizer Effect */
.fl-line {
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 0.2s ease;
}

.fl-line.f1 {
  animation: voiceFreqBounce1 1.2s infinite ease-in-out alternate;
}

.fl-line.f2 {
  animation: voiceFreqBounce2 0.85s infinite ease-in-out alternate;
}

.fl-line.f3 {
  animation: voiceFreqBounce3 1.4s infinite ease-in-out alternate;
}

.fl-line.f4 {
  animation: voiceFreqBounce4 0.95s infinite ease-in-out alternate;
}

.fl-line.f5 {
  animation: voiceFreqBounce5 1.1s infinite ease-in-out alternate;
}

@keyframes voiceFreqBounce1 {
  0% {
    transform: scaleY(0.65);
    opacity: 0.8;
  }

  50% {
    transform: scaleY(1.35);
    opacity: 1;
  }

  100% {
    transform: scaleY(0.75);
    opacity: 0.85;
  }
}

@keyframes voiceFreqBounce2 {
  0% {
    transform: scaleY(1.3);
    opacity: 1;
  }

  50% {
    transform: scaleY(0.5);
    opacity: 0.75;
  }

  100% {
    transform: scaleY(1.2);
    opacity: 0.95;
  }
}

@keyframes voiceFreqBounce3 {
  0% {
    transform: scaleY(0.7);
    opacity: 0.85;
  }

  50% {
    transform: scaleY(1.45);
    opacity: 1;
    filter: drop-shadow(0 0 8px #c084fc);
  }

  100% {
    transform: scaleY(0.6);
    opacity: 0.75;
  }
}

@keyframes voiceFreqBounce4 {
  0% {
    transform: scaleY(1.25);
    opacity: 0.95;
  }

  50% {
    transform: scaleY(0.55);
    opacity: 0.8;
  }

  100% {
    transform: scaleY(1.35);
    opacity: 1;
  }
}

@keyframes voiceFreqBounce5 {
  0% {
    transform: scaleY(0.55);
    opacity: 0.75;
  }

  50% {
    transform: scaleY(1.3);
    opacity: 1;
  }

  100% {
    transform: scaleY(0.8);
    opacity: 0.9;
  }
}

/* Voice AI Output Single Card (Below Lady Stage) */
.speak-output-single {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.speak-info-card {
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(28, 18, 48, 0.9), rgba(18, 12, 34, 0.94));
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(168, 85, 247, 0.12);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.speak-info-card.text-center {
  align-items: flex-start;
}

.speak-info-card:hover {
  transform: translateY(-3px);
  border-color: rgba(192, 132, 252, 0.7);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 28px rgba(168, 85, 247, 0.28);
}

.normal-card-heading {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  width: 100%;
}

.card-badge-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 15px;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 20px;
}

.card-badge-icon {
  font-size: 1.05rem;
  color: #c084fc;
}

.card-badge-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e9d5ff 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.card-body-content {
  width: 100%;
  text-align: left;
}

.transcript-quote {
  font-size: 14px;
  line-height: 1.65;
  color: #f3e8ff;
  margin: 0;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  text-align: left;
}

/* Extracted Key Information List */
.extracted-key-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.extracted-key-list li {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #e9d5ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
  padding-bottom: 8px;
}

.extracted-key-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.key-label {
  font-weight: 700;
  color: #c084fc;
  font-size: 14px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Increased gap between icon and text */
  white-space: nowrap;
  flex-shrink: 0;
}

.key-label i {
  font-size: 17px;
  /* Increased icon size */
  color: #d8b4fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.key-value {
  color: #ffffff !important;
  font-weight: 700;
  text-align: right;
  font-size: 14px;
  text-transform: uppercase;
  white-space: nowrap;
}

.key-value.highlight-positive {
  color: #ffffff !important;
  font-weight: 700;
}

.key-value.highlight-action {
  color: #ffffff !important;
  font-weight: 700;
}

@media (max-width: 992px) {
  .speak-cyan-waveform-bg {
    max-width: 740px;
    left: 50%;
  }

  .speak-lady-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .speak-speech-bubble {
    position: relative;
    left: auto;
    top: auto;
    max-width: 460px;
    margin: 16px auto 0;
    border-radius: 16px;
  }

  .speak-speech-bubble::before {
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid rgba(168, 85, 247, 0.5);
    border-top: none;
  }

  .speak-speech-bubble::after {
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #1c1232;
    border-top: none;
  }
}

@media (max-width: 768px) {
  .speak-lady-img {
    max-width: 250px;
  }

  .speak-cyan-waveform-bg {
    max-width: 520px;
  }
}

@media (max-width: 576px) {
  .speak-cyan-waveform-bg {
    max-width: 340px;
  }
}

/* ==========================================================================
   BUILT FOR REAL ESTATE. BUILT TO SCALE. (3 STATISTICS SECTION)
   ========================================================================== */
.scale-stats-section {
  position: relative;
  padding: 100px 0 90px;
  background-color: var(--color-bg-dark);
  overflow: hidden;
  z-index: 2;
}

.scale-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.scale-header {
  max-width: 800px;
  margin: 0 auto 50px;
  position: relative;
  z-index: 3;
  text-align: center;
}

.scale-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 0;
}

.scale-title .title-line-light {
  color: var(--color-white);
  display: block;
}

.scale-title .title-line-gradient {
  background: var(--color-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

/* 3 Statistics Row with Vertical Dividers */
.scale-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.scale-stat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 24px;
}

.scale-stat-divider {
  width: 1px;
  height: 72px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.25), transparent);
  flex-shrink: 0;
}

.scale-stat-number {
  font-family: var(--font-primary);
  font-size: 62px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 40%, #e9d5ff 80%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.45));
}

.scale-stat-label {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   AUTOMATIC INFINITE HORIZONTAL LOGO TICKER / MARQUEE
   ========================================================================== */
.scale-marquee-header {
  text-align: center;
  margin-top: 55px;
  margin-bottom: 16px;
  position: relative;
  z-index: 3;
}

.scale-marquee-header.integrations-header {
  margin-top: 42px;
  margin-bottom: 16px;
}

.scale-marquee-title {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

.scale-logos-wrapper {
  margin-top: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
  padding: 14px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.scale-logos-track {
  display: flex;
  align-items: center;
  gap: 52px;
  width: max-content;
  animation: scaleLogoScroll 50s linear infinite;
  will-change: transform;
}

.scale-logos-wrapper:hover .scale-logos-track {
  animation-play-state: paused;
}

.scale-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  height: 64px;
  opacity: 0.76;
  filter: grayscale(1) brightness(1.6) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-logo-item:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1.15) drop-shadow(0 0 16px rgba(168, 85, 247, 0.45));
  transform: translateY(-2px) scale(1.08);
}

.scale-client-logo {
  max-height: 50px;
  max-width: 155px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes scaleLogoScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   SECOND LOGO SCROLL: INTEGRATIONS IMAGE STRIP MARQUEE
   ========================================================================== */
.scale-integrations-wrapper {
  margin-top: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
  padding: 12px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.scale-integrations-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: scaleIntegrationsScroll 45s linear infinite;
  will-change: transform;
}

.scale-integrations-wrapper:hover .scale-integrations-track {
  animation-play-state: paused;
}

.integrations-strip-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.integrations-strip-img {
  height: 40px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  display: block;
  opacity: 0.78;
  filter: brightness(1.25) contrast(1.1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-integrations-wrapper:hover .integrations-strip-img {
  opacity: 0.95;
  filter: brightness(1.35) contrast(1.15) drop-shadow(0 0 16px rgba(168, 85, 247, 0.4));
}

@keyframes scaleIntegrationsScroll {
  0% {
    transform: translateX(calc(-50% - 30px));
  }

  100% {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .scale-stats-section {
    padding: 70px 0;
  }

  .scale-stats-row {
    flex-direction: column;
    gap: 28px;
  }

  .scale-stat-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
  }

  .scale-logos-wrapper {
    margin-top: 45px;
  }

  .scale-logos-track {
    gap: 38px;
    animation-duration: 35s;
  }

  .scale-client-logo {
    max-height: 40px;
    max-width: 120px;
  }

  .scale-integrations-wrapper {
    margin-top: 18px;
  }

  .scale-integrations-track {
    gap: 40px;
    animation-duration: 32s;
  }

  .integrations-strip-img {
    height: 30px;
  }

  @keyframes scaleIntegrationsScroll {
    0% {
      transform: translateX(calc(-50% - 20px));
    }

    100% {
      transform: translateX(0);
    }
  }
}

/* ==========================================================================
   COMPREHENSIVE LIGHT THEME OVERRIDES [data-theme="light"]
   Theme Black Text (#000000 / #0f172a) & Theme Gray / White Boxes (#f8fafc / #ffffff)
   ========================================================================== */

/* --- 1. Global & Common Elements in Light Mode --- */
[data-theme="light"] {
  --color-bg-dark: #ffffff;
  --color-bg-card: #f8fafc;
  --color-text-main: #000000;
  --color-text-muted: #475569;
}

[data-theme="light"] .title-line-light,
[data-theme="light"] .title-line-crm {
  color: #000000 !important;
}

[data-theme="light"] .desc-item .desc-text {
  color: #334155 !important;
}

[data-theme="light"] .desc-bullet-icon {
  color: #7c3aed !important;
}

/* --- 2. ACX TOTALITY Banner Sections (Top Hero & Pre-Footer Banner) --- */
[data-theme="light"] .banner-section,
[data-theme="light"] .banner-section-footer {
  background: radial-gradient(120% 100% at 50% 10%, #fdfcff 0%, #f8f6fc 45%, #ffffff 100%);
}

[data-theme="light"] .banner-ambient-glow {
  background:
    radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.14) 0%, transparent 55%),
    radial-gradient(circle at 65% 35%, rgba(59, 130, 246, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.08) 0%, transparent 75%);
  filter: blur(75px);
}

[data-theme="light"] .banner-grid-matrix {
  background-image: radial-gradient(rgba(100, 116, 139, 0.2) 1px, transparent 1px);
}

[data-theme="light"] .banner-section-footer::before {
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
}

[data-theme="light"] .banner-section-footer::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.75) 50%, #ffffff 100%);
}

[data-theme="light"] .banner-badge {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.28);
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.12);
}

[data-theme="light"] .badge-text {
  color: #7c3aed;
  font-weight: 700;
}

[data-theme="light"] .banner-title,
[data-theme="light"] #banner-main-title,
[data-theme="light"] #banner-footer-main-title,
[data-theme="light"] .banner-section-footer .banner-title {
  color: #000000 !important;
}

[data-theme="light"] .banner-title span,
[data-theme="light"] #banner-main-title span,
[data-theme="light"] #banner-footer-main-title span,
[data-theme="light"] .banner-section-footer .banner-title span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

[data-theme="light"] .banner-description,
[data-theme="light"] #banner-main-desc {
  color: #475569 !important;
}

[data-theme="light"] .banner-statement-title .statement-line {
  color: #000000 !important;
}

[data-theme="light"] .banner-statement-subtitle {
  color: #334155 !important;
  font-weight: 700;
}

/* 3D Orbit Stage in Light Mode */
[data-theme="light"] .node-pill {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 0 12px rgba(168, 85, 247, 0.12) !important;
}

[data-theme="light"] .node-icon-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #7c3aed !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .node-label {
  color: #000000 !important;
  font-weight: 700;
}

[data-theme="light"] .totality-node-item:hover .node-pill,
[data-theme="light"] .totality-node-item.active .node-pill {
  background: #ffffff !important;
  border-color: #a855f7 !important;
  box-shadow: 0 10px 28px rgba(147, 51, 234, 0.18), 0 0 15px rgba(168, 85, 247, 0.25) !important;
}

[data-theme="light"] .totality-node-item:hover .node-label {
  color: #7c3aed !important;
}

[data-theme="light"] .totality-center-core .core-depth-glow {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(59, 130, 246, 0.2) 50%, transparent 75%);
}

[data-theme="light"] .ai-ring.ring-1 {
  border-color: rgba(168, 85, 247, 0.2);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.08);
}

[data-theme="light"] .ai-ring.ring-2 {
  border-color: rgba(236, 72, 153, 0.2);
}

[data-theme="light"] .ai-ring.ring-3 {
  border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .ai-ring-dashed {
  border-color: rgba(148, 163, 184, 0.25);
}

/* --- 3. CRM vs TOTALITY Section (#crm-vs-totality) --- */
[data-theme="light"] .crm-comparison-section {
  background: #ffffff;
}

[data-theme="light"] .comparison-ambient-glow {
  background: radial-gradient(ellipse at 50% 40%, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.05) 50%, transparent 75%);
}

[data-theme="light"] .comparison-card.card-crm {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .comparison-card.card-crm:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .comparison-card.card-totality {
  background: #f8fafc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.08);
}

[data-theme="light"] .comparison-card.card-totality:hover {
  background: #ffffff;
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 18px 45px rgba(168, 85, 247, 0.16);
}

[data-theme="light"] .card-brand-badge {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .card-badge-name {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .workflow-step-box.step-crm {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .workflow-step-box.step-crm:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .workflow-step-box.step-totality {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.06);
}

[data-theme="light"] .workflow-step-box.step-totality:hover {
  background: #f1f5f9;
  border-color: rgba(168, 85, 247, 0.45);
}

[data-theme="light"] .workflow-step-box .step-icon-wrapper {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}

[data-theme="light"] .workflow-step-box .step-icon-wrapper.icon-totality {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #7c3aed;
}

[data-theme="light"] .workflow-step-box .step-label {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .workflow-step-box .step-sub {
  color: #475569;
}

[data-theme="light"] .workflow-arrow-divider {
  color: #94a3b8;
}

[data-theme="light"] .workflow-arrow-divider.arrow-totality {
  color: #a855f7;
}

/* --- 4. Customer Funnel Section (#customer-funnel) --- */
[data-theme="light"] .customer-funnel-section {
  background: #ffffff;
}

[data-theme="light"] .funnel-ambient-glow {
  background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
}

[data-theme="light"] .funnel-section-title {
  color: #000000;
}

[data-theme="light"] .funnel-node-box.node-designed {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .funnel-node-box.node-designed:hover {
  background: #ffffff;
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .funnel-node-box.node-designed .node-icon {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #7c3aed;
}

[data-theme="light"] .funnel-node-box.node-designed.node-final .node-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #9333ea 50%, #ec4899 100%);
  color: #ffffff;
  border: none;
}

[data-theme="light"] .funnel-node-box.node-designed .node-text {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .node-connector-arrow {
  color: #94a3b8;
}

[data-theme="light"] .node-bg-circle {
  fill: #ffffff !important;
  stroke-width: 2px;
}

[data-theme="light"] .svg-node-label {
  fill: #000000 !important;
  font-weight: 700;
}

[data-theme="light"] .wave-path-core {
  stroke: #7c3aed !important;
}

[data-theme="light"] .takeaway-text {
  color: #000000 !important;
  font-weight: 700;
}

/* --- 5. Totality System 7 Links Section (#totality-system) --- */
[data-theme="light"] .totality-system-section {
  background: #ffffff;
}

[data-theme="light"] .system-ambient-glow {
  background: radial-gradient(ellipse at 50% 20%, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 70%);
}

[data-theme="light"] .synaptic-circle-pod {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .synaptic-node-item:hover .synaptic-circle-pod,
[data-theme="light"] .synaptic-node-item.is-active .synaptic-circle-pod {
  background: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.2);
}

[data-theme="light"] .synaptic-node-label {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .system-detail-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .detail-main-content {
  color: #000000;
}

[data-theme="light"] .visual-frame {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .visual-floating-badge {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #000000;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* --- 6. AI-Native by Design Section (#ai-native) --- */
[data-theme="light"] .ai-native-section {
  background: #ffffff;
}

[data-theme="light"] .ai-native-ambient-glow {
  background: radial-gradient(ellipse at 50% 30%, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 70%);
}

[data-theme="light"] .ai-pillar-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .ai-pillar-card:hover {
  background: #ffffff;
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 14px 35px rgba(168, 85, 247, 0.12);
}

[data-theme="light"] .pillar-icon-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #7c3aed;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .pillar-heading {
  color: #000000;
  font-weight: 800;
}

[data-theme="light"] .pillar-content {
  color: #475569;
}

[data-theme="light"] .matrix-title {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .v-link-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .v-link-card:hover,
[data-theme="light"] .v-link-card.is-active {
  background: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.16);
}

[data-theme="light"] .v-link-icon {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #7c3aed;
}

[data-theme="light"] .v-link-title {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .neural-hud-title {
  color: #000000;
  font-weight: 800;
}

[data-theme="light"] .conduit-line {
  stroke: #cbd5e1;
}

/* --- 7. Customer Continuity / Repeat Section (#customer-repeat) --- */
[data-theme="light"] .customer-repeat-section {
  background: #ffffff;
}

[data-theme="light"] .repeat-ambient-glow {
  background: radial-gradient(ellipse at 50% 30%, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 70%);
}

[data-theme="light"] .repeat-customer-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .customer-name {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .customer-meta {
  color: #475569;
}

[data-theme="light"] .customer-location {
  color: #64748b;
}

[data-theme="light"] .repeat-brain-title {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .repeat-bottom-text {
  color: #000000;
  font-weight: 800;
}

[data-theme="light"] .repeat-conduit-path {
  stroke: #cbd5e1;
}

/* --- 8. Built for Real Estate. Built to Scale. (#built-to-scale) --- */
[data-theme="light"] .scale-stats-section {
  background: #ffffff;
}

[data-theme="light"] .scale-ambient-glow {
  background: radial-gradient(circle at 50% 40%, rgba(168, 85, 247, 0.08) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 70%);
}

[data-theme="light"] .scale-stat-number {
  color: #000000;
  background: none;
  -webkit-text-fill-color: initial;
}

[data-theme="light"] .scale-stat-label {
  color: #475569;
  font-weight: 700;
}

[data-theme="light"] .scale-stat-divider {
  background: #e2e8f0;
}

[data-theme="light"] .scale-marquee-title {
  color: #000000;
  font-weight: 700;
}

[data-theme="light"] .scale-logo-item {
  filter: grayscale(1) opacity(0.8);
}

[data-theme="light"] .scale-logo-item:hover {
  filter: grayscale(0) opacity(1);
}

[data-theme="light"] .scale-logos-wrapper,
[data-theme="light"] .scale-integrations-wrapper {
  background: transparent;
}

[data-theme="light"] .integrations-strip-img {
  filter: none;
  opacity: 0.85;
}

/* --- 9. Request a Demo Pop-Up Modal (#demo-modal) --- */
[data-theme="light"] .demo-modal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.16), 0 0 40px rgba(168, 85, 247, 0.12);
}

[data-theme="light"] .demo-modal-title {
  color: #000000;
}

[data-theme="light"] .form-label {
  color: #0f172a;
}

[data-theme="light"] .form-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #000000;
}

[data-theme="light"] .form-input:focus {
  background: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

[data-theme="light"] .form-input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .input-icon {
  color: #64748b;
}

[data-theme="light"] .captcha-equation {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #000000;
}

[data-theme="light"] .captcha-reload-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #000000;
}

[data-theme="light"] .captcha-reload-btn:hover {
  background: #e2e8f0;
  color: #7c3aed;
}

[data-theme="light"] .demo-modal-close {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #000000;
}

[data-theme="light"] .demo-modal-close:hover {
  background: #e2e8f0;
  color: #7c3aed;
}