/* ACE Software Solutions - Design System v6 */
/* Fully backward compatible with v2, superset of v4, with advanced v6 features */

/* ===========================
   BACKWARD COMPATIBILITY LAYER (v2)
   All v2 classes and properties preserved exactly
   =========================== */

/* -----------------------------------------------------------
   v2 CSS Custom Properties (Preserved Exactly)
   ----------------------------------------------------------- */
:root {
  /* v2 Light Theme Surfaces & Text (unchanged) */
  --bg-primary: #F3F4F6;
  --bg-secondary: #F9FAFB;
  --bg-card: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;

  /* v2 Brand & Accents (unchanged) */
  --accent-primary: #1E3A8A;
  --accent-secondary: #3B82F6;
  --accent-navy: #1E40AF;
  --accent-gold: #F59E0B;
  --accent-success: #10B981;
  --accent-growth: #059669;
  --accent-mint: #6EE7B7;

  /* Section Heading Colors */
  --section-heading-blue: #6B93F6;
  --section-heading-default: var(--section-heading-blue);
  --section-heading-selected: var(--accent-secondary);

  /* v2 Borders & Other (unchanged) */
  --border-color: #E5E7EB;
  --focus-ring: var(--accent-secondary);
  --link-color: var(--accent-secondary);
  --link-hover: #60A5FA;

  /* v2 Shadow System (unchanged) */
  --shadow-light: 0 1px 3px 0 rgba(17, 24, 39, 0.06);
  --shadow-medium: 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-large: 0 12px 24px rgba(17, 24, 39, 0.12);

  /* v2 Spacing System (unchanged) */
  --container-max-width: 1200px;
  --container-padding: 0 1rem;
  --section-padding: 6rem 0;
  --card-padding: 2rem;
  --button-padding: 0.75rem 1.5rem;
  --grid-gap: 2rem;

  /* v2 Typography Scale (unchanged) */
  --font-hero-title: 3rem;
  --font-section-title: 2rem;
  --font-subsection-title: 1.25rem;
  --font-card-title: 1.25rem;
  --font-large: 1.125rem;
  --font-base: 1rem;
  --font-small: 0.875rem;

  /* v2 Transitions (unchanged) */
  --transition-default: all 0.3s ease;
  --transition-hover: 0.3s ease;
  --animation-duration: 0.6s ease-out;
}

/* v2 Dark Theme (unchanged) */
[data-theme="dark"] {
  --bg-primary: #0F172A;
  --bg-secondary: #111827;
  --bg-card: #1F2937;
  --text-primary: #F3F4F6;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --border-color: #334155;
  --bg-primary-rgb: 15, 23, 42;

  /* Section Heading Colors (Dark Theme) */
  --section-heading-blue: #93B4FF;
  --section-heading-default: var(--section-heading-blue);
  --section-heading-selected: #60A5FA;
}

/* ===========================
   v4 ENHANCED SYSTEM (Preserved)
   All v4 improvements maintained
   =========================== */

/* v4 Enhanced Color System */
:root {
  /* Grayscale System */
  --ace-gray-50: #fafbfc;
  --ace-gray-100: #f8f9fc;
  --ace-gray-200: #f1f3f9;
  --ace-gray-300: #dee3ed;
  --ace-gray-400: #c2c9d6;
  --ace-gray-500: #8f96a3;
  --ace-gray-600: #5e636e;
  --ace-gray-700: #2f3237;
  --ace-gray-800: #1d1e20;
  --ace-gray-900: #111213;
  
  /* Brand Color Scales */
  --ace-primary-50: #eff6ff;
  --ace-primary-100: #dbeafe;
  --ace-primary-200: #bfdbfe;
  --ace-primary-300: #93c5fd;
  --ace-primary-400: #60a5fa;
  --ace-primary-500: #3b82f6;
  --ace-primary-600: #2563eb;
  --ace-primary-700: #1d4ed8;
  --ace-primary-800: #1e40af;
  --ace-primary-900: #1e3a8a;
  
  /* Accent Color Scales */
  --ace-accent-50: #fffbeb;
  --ace-accent-100: #fef3c7;
  --ace-accent-200: #fde68a;
  --ace-accent-300: #fcd34d;
  --ace-accent-400: #fbbf24;
  --ace-accent-500: #f59e0b;
  --ace-accent-600: #d97706;
  --ace-accent-700: #b45309;
  --ace-accent-800: #92400e;
  --ace-accent-900: #78350f;
  
  /* Semantic Colors */
  --ace-success-50: #ecfdf5;
  --ace-success-500: #10b981;
  --ace-success-600: #059669;
  --ace-success-700: #047857;
  --ace-warning-50: #fffbeb;
  --ace-warning-500: #f59e0b;
  --ace-warning-700: #b45309;
  --ace-error-50: #fef2f2;
  --ace-error-500: #ef4444;
  --ace-error-700: #b91c1c;

  /* v4 Enhanced Spacing */
  --ace-space-0: 0;
  --ace-space-1: 0.25rem;
  --ace-space-2: 0.5rem;
  --ace-space-3: 0.75rem;
  --ace-space-4: 1rem;
  --ace-space-5: 1.25rem;
  --ace-space-6: 1.5rem;
  --ace-space-8: 2rem;
  --ace-space-10: 2.5rem;
  --ace-space-12: 3rem;
  --ace-space-16: 4rem;
  --ace-space-20: 5rem;
  --ace-space-24: 6rem;
  --ace-space-32: 8rem;

  /* v4 Enhanced Typography */
  --ace-font-size-xs: 0.75rem;
  --ace-font-size-sm: 0.875rem;
  --ace-font-size-base: 1rem;
  --ace-font-size-lg: 1.125rem;
  --ace-font-size-xl: 1.25rem;
  --ace-font-size-2xl: 1.5rem;
  --ace-font-size-3xl: 1.875rem;
  --ace-font-size-4xl: 2.25rem;
  --ace-font-size-5xl: 3rem;
  --ace-font-size-6xl: 3.75rem;
  --ace-font-size-7xl: 4.5rem;

  /* v4 Enhanced Shadows */
  --ace-shadow-xs: 0 1px 2px 0 rgba(17, 18, 19, 0.05);
  --ace-shadow-sm: 0 1px 3px 0 rgba(17, 18, 19, 0.08), 0 1px 2px 0 rgba(17, 18, 19, 0.02);
  --ace-shadow-md: 0 4px 6px -1px rgba(17, 18, 19, 0.08), 0 2px 4px -1px rgba(17, 18, 19, 0.04);
  --ace-shadow-lg: 0 10px 15px -3px rgba(17, 18, 19, 0.08), 0 4px 6px -2px rgba(17, 18, 19, 0.04);
  --ace-shadow-xl: 0 20px 25px -5px rgba(17, 18, 19, 0.08), 0 10px 10px -5px rgba(17, 18, 19, 0.02);
  --ace-shadow-2xl: 0 25px 50px -12px rgba(17, 18, 19, 0.15);

  /* ===========================
     v6 NEW FEATURES & ENHANCEMENTS
     =========================== */

  /* v6 Advanced Color System */
  --ace-neutral-50: #fafbfc;
  --ace-neutral-100: #f4f6f8;
  --ace-neutral-200: #e4e7ec;
  --ace-neutral-300: #d0d5dd;
  --ace-neutral-400: #98a2b3;
  --ace-neutral-500: #667085;
  --ace-neutral-600: #475467;
  --ace-neutral-700: #344054;
  --ace-neutral-800: #1d2939;
  --ace-neutral-900: #101828;

  /* v6 Financial Industry Colors */
  --ace-financial-trust: #0066cc;
  --ace-financial-security: #004d99;
  --ace-financial-growth: #00b386;
  --ace-financial-warning: #ff8c00;
  --ace-financial-critical: #dc2626;
  --ace-financial-premium: #7c3aed;

  /* v6 Advanced Gradients */
  --ace-gradient-primary: linear-gradient(135deg, var(--ace-primary-600) 0%, var(--ace-primary-800) 100%);
  --ace-gradient-accent: linear-gradient(135deg, var(--ace-accent-500) 0%, var(--ace-accent-700) 100%);
  --ace-gradient-success: linear-gradient(135deg, var(--ace-success-500) 0%, var(--ace-success-700) 100%);
  --ace-gradient-surface: linear-gradient(135deg, var(--ace-gray-50) 0%, var(--ace-gray-100) 100%);

  /* v6 Advanced Spacing (Fibonacci-based) */
  --ace-space-px: 1px;
  --ace-space-0_5: 0.125rem;
  --ace-space-1_5: 0.375rem;
  --ace-space-2_5: 0.625rem;
  --ace-space-3_5: 0.875rem;
  --ace-space-7: 1.75rem;
  --ace-space-9: 2.25rem;
  --ace-space-11: 2.75rem;
  --ace-space-14: 3.5rem;
  --ace-space-18: 4.5rem;
  --ace-space-28: 7rem;
  --ace-space-36: 9rem;
  --ace-space-44: 11rem;
  --ace-space-52: 13rem;
  --ace-space-60: 15rem;

  /* v6 Advanced Typography */
  --ace-font-size-2xs: 0.625rem;
  --ace-font-size-8xl: 6rem;
  --ace-font-size-9xl: 8rem;

  /* v6 Line Heights */
  --ace-leading-none: 1;
  --ace-leading-tight: 1.25;
  --ace-leading-snug: 1.375;
  --ace-leading-normal: 1.5;
  --ace-leading-relaxed: 1.625;
  --ace-leading-loose: 2;

  /* v6 Advanced Borders */
  --ace-border-width-0: 0px;
  --ace-border-width-1: 1px;
  --ace-border-width-2: 2px;
  --ace-border-width-4: 4px;
  --ace-border-width-8: 8px;

  /* v6 Advanced Border Radius */
  --ace-radius-none: 0px;
  --ace-radius-sm: 0.125rem;
  --ace-radius-base: 0.25rem;
  --ace-radius-md: 0.375rem;
  --ace-radius-lg: 0.5rem;
  --ace-radius-xl: 0.75rem;
  --ace-radius-2xl: 1rem;
  --ace-radius-3xl: 1.5rem;
  --ace-radius-4xl: 2rem;
  --ace-radius-full: 9999px;

  /* v6 Advanced Transitions */
  --ace-transition-none: none;
  --ace-transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ace-transition-default: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ace-transition-fast: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --ace-transition-slow: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ace-transition-bounce: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ace-transition-elastic: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* v6 Advanced Shadows with Color Tinting */
  --ace-shadow-colored-sm: 0 1px 3px 0 rgba(59, 130, 246, 0.1);
  --ace-shadow-colored-md: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
  --ace-shadow-colored-lg: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
  --ace-shadow-success: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
  --ace-shadow-warning: 0 4px 6px -1px rgba(245, 158, 11, 0.1);
  --ace-shadow-error: 0 4px 6px -1px rgba(239, 68, 68, 0.1);

  /* v6 Z-Index Scale */
  --ace-z-hide: -1;
  --ace-z-auto: auto;
  --ace-z-base: 0;
  --ace-z-docked: 10;
  --ace-z-dropdown: 1000;
  --ace-z-sticky: 1100;
  --ace-z-banner: 1200;
  --ace-z-overlay: 1300;
  --ace-z-modal: 1400;
  --ace-z-popover: 1500;
  --ace-z-skipLink: 1600;
  --ace-z-toast: 1700;
  --ace-z-tooltip: 1800;

  /* v6 Alternating Section Backgrounds (Light Theme) */
  --ace-section-bg-primary: #fafbfc;      /* Barely-there cool gray - subtle warmth */
  --ace-section-bg-secondary: #f8fafc;    /* Very light gray - subtle contrast */
  --ace-section-bg-tertiary: #f1f5f9;     /* Light gray - more noticeable */
  --ace-section-bg-quaternary: #e2e8f0;   /* Medium light - strong contrast */

  /* v6 Alternating Section Backgrounds with Brand Tints */
  --ace-section-bg-brand-light: #dbeafe;  /* Richer light blue tint - more visible */
  --ace-section-bg-brand-subtle: #bfdbfe; /* Medium blue tint */
  --ace-section-bg-accent-light: #fffbeb; /* Very light amber tint */
  --ace-section-bg-accent-subtle: #fef3c7; /* Light amber tint */

  /* v6 Lighter gradient variations for sections */
  --ace-section-bg-hero-lighter-start: #fefefe; /* Near white for lighter gradient */
  --ace-section-bg-hero-lighter-end: #eff6ff;   /* Very subtle blue tint */
  
  /* v6 Section Background Overlays */
  --ace-section-overlay-light: rgba(255, 255, 255, 0.5);
  --ace-section-overlay-brand: rgba(59, 130, 246, 0.03);
  --ace-section-overlay-accent: rgba(245, 158, 11, 0.03);
}

/* ===========================
   BASE STYLES (v2 Compatible)
   =========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'SF Pro Text', 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: var(--transition-default);
}

/* ===========================
   v2 LAYOUT SYSTEM (Preserved Exactly)
   =========================== */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--container-padding);
}

/* ===========================
   v2 TYPOGRAPHY SYSTEM (Preserved Exactly)
   =========================== */
.hero-title {
  font-size: var(--font-hero-title);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: var(--font-section-title);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--section-heading-default);
  transition: color 0.3s ease;
}

.section-title.active,
.section-header.active .section-title {
  color: var(--section-heading-selected);
}

.subsection-title {
  font-size: var(--font-subsection-title);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 1rem;
  color: var(--section-heading-default);
}

.card-title {
  font-size: var(--font-card-title);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.text-large { font-size: var(--font-large); line-height: 1.7; }
.text-base { font-size: var(--font-base); line-height: 1.6; }
.text-small { font-size: var(--font-small); line-height: 1.5; }

/* ===========================
   v2 BUTTON SYSTEM (Preserved Exactly)
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--button-padding);
  border-radius: 0.625rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-hover);
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background: var(--accent-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-light);
}

.btn-primary:hover {
  background: var(--accent-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn-primary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn-secondary {
  background: transparent;
  color: var(--accent-primary);
  border: 2px solid var(--accent-primary);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  color: #FFFFFF;
}

[data-theme="dark"] .btn-secondary:hover {
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.btn-success {
  background: var(--accent-success);
  color: #052E2B;
}

/* ===========================
   v2 CARD SYSTEM (Preserved Exactly)
   =========================== */
.card {
  background: var(--bg-card);
  border-radius: 0.75rem;
  padding: var(--card-padding);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-color);
  transition: var(--transition-default);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

.card-metric {
  text-align: center;
  padding: 1.5rem;
}

/* ===========================
   v2 BADGE SYSTEM (Preserved Exactly)
   =========================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-gold);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  font-weight: 600;
}

.trust-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-muted);
}

/* ===========================
   v2 GRID SYSTEM (Preserved Exactly)
   =========================== */
.grid { display: grid; gap: var(--grid-gap); }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-clients { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-metrics { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-tech { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.section { padding: var(--section-padding); }
.section-header { text-align: center; margin-bottom: 4rem; }

/* ===========================
   v2 UTILITY CLASSES (Preserved Exactly)
   =========================== */
.text-center { text-align: center; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-primary); }
.text-gold { color: var(--accent-gold); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card { background-color: var(--bg-card); }

.border { border: 1px solid var(--border-color); }
.border-radius { border-radius: 0.5rem; }

.shadow-light { box-shadow: var(--shadow-light); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-large { box-shadow: var(--shadow-large); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { flex-direction: column; }

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }

.p-4 { padding: 2rem; }
.px-4 { padding-left: 2rem; padding-right: 2rem; }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }

.rounded { border-radius: 0.5rem; }
.rounded-lg { border-radius: 1rem; }
.rounded-full { border-radius: 50%; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.opacity-80 { opacity: 0.8; }
.opacity-60 { opacity: 0.6; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-1000 { z-index: 1000; }

.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

.transition { transition: var(--transition-default); }
.hover-transform:hover { transform: translateY(-2px); }

/* ===========================
   v2 ANIMATION SYSTEM (Preserved Exactly)
   =========================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
  opacity: 0;
  animation: fadeInUp var(--animation-duration) forwards;
}

/* ===========================
   v4 ENHANCED COMPONENTS (Preserved)
   =========================== */

/* v4 Enhanced Layout */
.ace-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--ace-space-4);
  padding-right: var(--ace-space-4);
}

.ace-container-fluid {
  width: 100%;
  padding-left: var(--ace-space-4);
  padding-right: var(--ace-space-4);
}

/* v4 Enhanced Grid */
.ace-grid {
  display: grid;
  gap: var(--ace-space-6);
}

.ace-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ace-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ace-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ace-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ace-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ace-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* v4 Enhanced Buttons */
.ace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ace-space-2);
  padding: var(--ace-space-3) var(--ace-space-6);
  font-family: inherit;
  font-size: var(--ace-font-size-sm);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ace-radius-lg);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  user-select: none;
}

.ace-btn-primary {
  background-color: var(--ace-primary-600);
  color: white;
  box-shadow: var(--ace-shadow-sm);
}

.ace-btn-primary:hover {
  background-color: var(--ace-primary-700);
  box-shadow: var(--ace-shadow-md);
  transform: translateY(-1px);
}

.ace-btn-secondary {
  background-color: white;
  color: var(--ace-gray-700);
  border-color: var(--ace-gray-300);
  box-shadow: var(--ace-shadow-xs);
}

.ace-btn-secondary:hover {
  background-color: var(--ace-gray-50);
  border-color: var(--ace-gray-400);
}

/* v4 Enhanced Cards */
.ace-card {
  background-color: white;
  border: 1px solid var(--ace-gray-200);
  border-radius: var(--ace-radius-xl);
  box-shadow: var(--ace-shadow-sm);
  overflow: hidden;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ace-card:hover {
  box-shadow: var(--ace-shadow-lg);
  transform: translateY(-2px);
}

/* ===========================
   v6 NEW ADVANCED FEATURES
   =========================== */

/* v6 Advanced Container System */
.ace-container-xs { max-width: 480px; margin: 0 auto; padding: 0 var(--ace-space-4); }
.ace-container-sm { max-width: 640px; margin: 0 auto; padding: 0 var(--ace-space-4); }
.ace-container-md { max-width: 768px; margin: 0 auto; padding: 0 var(--ace-space-4); }
.ace-container-lg { max-width: 1024px; margin: 0 auto; padding: 0 var(--ace-space-4); }
.ace-container-xl { max-width: 1280px; margin: 0 auto; padding: 0 var(--ace-space-4); }
.ace-container-2xl { max-width: 1536px; margin: 0 auto; padding: 0 var(--ace-space-4); }

/* v6 Advanced Typography System */
.ace-text-2xs { font-size: var(--ace-font-size-2xs); }
.ace-text-xs { font-size: var(--ace-font-size-xs); }
.ace-text-sm { font-size: var(--ace-font-size-sm); }
.ace-text-base { font-size: var(--ace-font-size-base); }
.ace-text-lg { font-size: var(--ace-font-size-lg); }
.ace-text-xl { font-size: var(--ace-font-size-xl); }
.ace-text-2xl { font-size: var(--ace-font-size-2xl); }
.ace-text-3xl { font-size: var(--ace-font-size-3xl); }
.ace-text-4xl { font-size: var(--ace-font-size-4xl); }
.ace-text-5xl { font-size: var(--ace-font-size-5xl); }
.ace-text-6xl { font-size: var(--ace-font-size-6xl); }
.ace-text-7xl { font-size: var(--ace-font-size-7xl); }
.ace-text-8xl { font-size: var(--ace-font-size-8xl); }
.ace-text-9xl { font-size: var(--ace-font-size-9xl); }

/* v6 Advanced Button Variants */
.ace-btn-gradient-primary {
  background: var(--ace-gradient-primary);
  color: white;
  border: none;
}

.ace-btn-gradient-accent {
  background: var(--ace-gradient-accent);
  color: white;
  border: none;
}

.ace-btn-financial {
  background: var(--ace-financial-trust);
  color: white;
  border: none;
}

.ace-btn-financial:hover {
  background: var(--ace-financial-security);
}

/* v6 Advanced Button Sizes */
.ace-btn-2xs {
  padding: var(--ace-space-1) var(--ace-space-2);
  font-size: var(--ace-font-size-2xs);
}

.ace-btn-xs {
  padding: var(--ace-space-1) var(--ace-space-3);
  font-size: var(--ace-font-size-xs);
}

.ace-btn-sm {
  padding: var(--ace-space-2) var(--ace-space-4);
  font-size: var(--ace-font-size-sm);
}

.ace-btn-lg {
  padding: var(--ace-space-4) var(--ace-space-8);
  font-size: var(--ace-font-size-lg);
}

.ace-btn-xl {
  padding: var(--ace-space-5) var(--ace-space-10);
  font-size: var(--ace-font-size-xl);
}

.ace-btn-2xl {
  padding: var(--ace-space-6) var(--ace-space-12);
  font-size: var(--ace-font-size-2xl);
}

/* v6 Advanced Card Variants */
.ace-card-elevated {
  box-shadow: var(--ace-shadow-lg);
}

.ace-card-floating {
  box-shadow: var(--ace-shadow-xl);
  border: none;
}

.ace-card-gradient {
  background: var(--ace-gradient-surface);
  border: none;
}

.ace-card-financial {
  border-left: 4px solid var(--ace-financial-trust);
}

.ace-card-success {
  border-left: 4px solid var(--ace-success-500);
}

.ace-card-warning {
  border-left: 4px solid var(--ace-warning-500);
}

/* v6 Advanced Grid Systems */
.ace-grid-responsive-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ace-grid-responsive-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ace-grid-responsive-lg { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* v6 Component Composition */
.ace-stack {
  display: flex;
  flex-direction: column;
}

.ace-stack > * + * {
  margin-top: var(--ace-space-4);
}

.ace-stack-sm > * + * { margin-top: var(--ace-space-2); }
.ace-stack-lg > * + * { margin-top: var(--ace-space-6); }
.ace-stack-xl > * + * { margin-top: var(--ace-space-8); }

.ace-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ace-space-4);
  align-items: center;
}

.ace-cluster-sm { gap: var(--ace-space-2); }
.ace-cluster-lg { gap: var(--ace-space-6); }

/* v6 Advanced Spacing Utilities */
.ace-m-px { margin: var(--ace-space-px); }
.ace-m-0_5 { margin: var(--ace-space-0_5); }
.ace-m-1_5 { margin: var(--ace-space-1_5); }
.ace-m-2_5 { margin: var(--ace-space-2_5); }
.ace-m-3_5 { margin: var(--ace-space-3_5); }
.ace-m-7 { margin: var(--ace-space-7); }
.ace-m-9 { margin: var(--ace-space-9); }
.ace-m-11 { margin: var(--ace-space-11); }
.ace-m-14 { margin: var(--ace-space-14); }
.ace-m-18 { margin: var(--ace-space-18); }
.ace-m-28 { margin: var(--ace-space-28); }
.ace-m-36 { margin: var(--ace-space-36); }
.ace-m-44 { margin: var(--ace-space-44); }
.ace-m-52 { margin: var(--ace-space-52); }
.ace-m-60 { margin: var(--ace-space-60); }

/* v6 Advanced Animation System */
@keyframes ace-fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ace-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ace-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ace-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes ace-glow {
  0%, 100% { box-shadow: 0 0 5px var(--ace-primary-400); }
  50% { box-shadow: 0 0 20px var(--ace-primary-400); }
}

/* v6 Animation Classes */
.ace-animate-fade-in-scale {
  animation: ace-fade-in-scale 0.4s ease-out;
}

.ace-animate-slide-in-right {
  animation: ace-slide-in-right 0.5s ease-out;
}

.ace-animate-slide-in-left {
  animation: ace-slide-in-left 0.5s ease-out;
}

.ace-animate-float {
  animation: ace-float 3s ease-in-out infinite;
}

.ace-animate-glow {
  animation: ace-glow 2s ease-in-out infinite;
}

/* v6 Interactive States */
.ace-interactive {
  transition: all var(--ace-transition-default);
}

.ace-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--ace-shadow-lg);
}

.ace-interactive-scale:hover {
  transform: scale(1.02);
}

.ace-interactive-glow:hover {
  box-shadow: 0 0 20px var(--ace-primary-200);
}

/* v6 Advanced Form Components */
.ace-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ace-space-2);
}

.ace-form-label {
  font-size: var(--ace-font-size-sm);
  font-weight: 500;
  color: var(--ace-gray-700);
}

.ace-form-input {
  padding: var(--ace-space-3) var(--ace-space-4);
  border: 1px solid var(--ace-gray-300);
  border-radius: var(--ace-radius-lg);
  font-size: var(--ace-font-size-base);
  transition: all var(--ace-transition-fast);
}

.ace-form-input:focus {
  outline: none;
  border-color: var(--ace-primary-500);
  box-shadow: 0 0 0 3px var(--ace-primary-100);
}

.ace-form-error {
  color: var(--ace-error-500);
  font-size: var(--ace-font-size-sm);
}

.ace-form-help {
  color: var(--ace-gray-500);
  font-size: var(--ace-font-size-sm);
}

/* v6 Advanced Badge System */
.ace-badge-financial {
  background: var(--ace-financial-trust);
  color: white;
}

.ace-badge-premium {
  background: var(--ace-gradient-primary);
  color: white;
}

.ace-badge-outline {
  background: transparent;
  border: 1px solid var(--ace-primary-500);
  color: var(--ace-primary-600);
}

.ace-badge-lg {
  padding: var(--ace-space-2) var(--ace-space-4);
  font-size: var(--ace-font-size-sm);
}

.ace-badge-xl {
  padding: var(--ace-space-3) var(--ace-space-6);
  font-size: var(--ace-font-size-base);
}

/* v6 Advanced Navigation */
.ace-nav {
  display: flex;
  align-items: center;
  gap: var(--ace-space-6);
}

.ace-nav-item {
  color: var(--ace-gray-700);
  text-decoration: none;
  font-weight: 500;
  transition: var(--ace-transition-fast);
}

.ace-nav-item:hover {
  color: var(--ace-primary-600);
}

.ace-nav-item.active {
  color: var(--ace-primary-600);
  font-weight: 600;
}

/* v6 Advanced Responsive Utilities */
@media (max-width: 640px) {
  .ace-responsive-stack {
    flex-direction: column !important;
  }
  
  .ace-responsive-hide-sm {
    display: none !important;
  }
  
  .ace-responsive-full-sm {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .ace-responsive-hide-md {
    display: none !important;
  }
  
  .ace-responsive-stack-md {
    flex-direction: column !important;
  }
}

@media (max-width: 1024px) {
  .ace-responsive-hide-lg {
    display: none !important;
  }
}

/* v6 Advanced Accessibility */
.ace-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ace-focus-visible:focus-visible {
  outline: 2px solid var(--ace-primary-500);
  outline-offset: 2px;
}

/* ===========================
   v6 ALTERNATING SECTION BACKGROUNDS
   =========================== */

/* Basic Alternating Backgrounds */
.ace-section-bg-primary {
  background-color: var(--ace-section-bg-primary);
}

.ace-section-bg-secondary {
  background-color: var(--ace-section-bg-secondary);
}

.ace-section-bg-tertiary {
  background-color: var(--ace-section-bg-tertiary);
}

.ace-section-bg-quaternary {
  background-color: var(--ace-section-bg-quaternary);
}

/* Brand Tinted Backgrounds */
.ace-section-bg-brand-light {
  background-color: var(--ace-section-bg-brand-light);
}

.ace-section-bg-brand-subtle {
  background-color: var(--ace-section-bg-brand-subtle);
}

.ace-section-bg-accent-light {
  background-color: var(--ace-section-bg-accent-light);
}

.ace-section-bg-accent-subtle {
  background-color: var(--ace-section-bg-accent-subtle);
}

/* Alternating Pattern Classes */
.ace-section-alternate:nth-child(odd) {
  background-color: var(--ace-section-bg-primary);
}

.ace-section-alternate:nth-child(even) {
  background-color: var(--ace-section-bg-secondary);
}

.ace-section-alternate-strong:nth-child(odd) {
  background-color: var(--ace-section-bg-primary);
}

.ace-section-alternate-strong:nth-child(even) {
  background-color: var(--ace-section-bg-tertiary);
}

.ace-section-alternate-brand:nth-child(odd) {
  background-color: var(--ace-section-bg-primary);
}

.ace-section-alternate-brand:nth-child(even) {
  background-color: var(--ace-section-bg-brand-light);
}

.ace-section-alternate-accent:nth-child(odd) {
  background-color: var(--ace-section-bg-primary);
}

.ace-section-alternate-accent:nth-child(even) {
  background-color: var(--ace-section-bg-accent-light);
}

/* Three-way Alternating (for more complex patterns) */
.ace-section-triple:nth-child(3n+1) {
  background-color: var(--ace-section-bg-primary);
}

.ace-section-triple:nth-child(3n+2) {
  background-color: var(--ace-section-bg-secondary);
}

.ace-section-triple:nth-child(3n+3) {
  background-color: var(--ace-section-bg-tertiary);
}

/* Section with Overlay Effects */
.ace-section-overlay {
  position: relative;
}

.ace-section-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ace-section-overlay-light);
  pointer-events: none;
}

.ace-section-overlay-brand::before {
  background: var(--ace-section-overlay-brand);
}

.ace-section-overlay-accent::before {
  background: var(--ace-section-overlay-accent);
}

/* Section Transition Effects */
.ace-section-smooth {
  transition: background-color var(--ace-transition-slow);
}

/* Gradient Section Backgrounds */
.ace-section-gradient-subtle {
  background: linear-gradient(180deg, 
    var(--ace-section-bg-primary) 0%, 
    var(--ace-section-bg-secondary) 100%);
}

.ace-section-gradient-brand {
  background: linear-gradient(180deg, 
    var(--ace-section-bg-primary) 0%, 
    var(--ace-section-bg-brand-light) 100%);
}

.ace-section-gradient-accent {
  background: linear-gradient(180deg, 
    var(--ace-section-bg-primary) 0%, 
    var(--ace-section-bg-accent-light) 100%);
}

/* v6 Dark Mode Enhancements */
[data-theme="dark"] {
  /* Enhanced dark theme colors */
  --ace-bg-primary: var(--ace-neutral-900);
  --ace-bg-secondary: var(--ace-neutral-800);
  --ace-bg-tertiary: var(--ace-neutral-700);
  --ace-bg-card: var(--ace-neutral-800);
  --ace-text-primary: var(--ace-neutral-50);
  --ace-text-secondary: var(--ace-neutral-200);
  --ace-text-tertiary: var(--ace-neutral-300);
  --ace-border-light: var(--ace-neutral-700);
  --ace-border-default: var(--ace-neutral-600);

  /* v6 Alternating Section Backgrounds (Dark Theme) */
  --ace-section-bg-primary: #0f172a;      /* Deep dark blue - cleanest sections */
  --ace-section-bg-secondary: #1e293b;    /* Medium dark - subtle contrast */
  --ace-section-bg-tertiary: #334155;     /* Lighter dark - more noticeable */
  --ace-section-bg-quaternary: #475569;   /* Medium gray - strong contrast */

  /* v6 Alternating Section Backgrounds with Brand Tints (Dark) */
  --ace-section-bg-brand-light: #1e293b;  /* Slate-800 - more neutral, less saturated */
  --ace-section-bg-brand-subtle: #1e40af; /* Slightly lighter brand blue */
  --ace-section-bg-accent-light: #92400e; /* Dark amber tint */
  --ace-section-bg-accent-subtle: #b45309; /* Lighter amber tint */

  /* v6 Lighter gradient variations for sections (Dark) */
  --ace-section-bg-hero-lighter-start: #1e293b; /* Dark slate for lighter gradient */
  --ace-section-bg-hero-lighter-end: #1e3a5f;   /* Very subtle blue tint in dark mode */
  
  /* v6 Section Background Overlays (Dark) */
  --ace-section-overlay-light: rgba(15, 23, 42, 0.5);
  --ace-section-overlay-brand: rgba(30, 58, 138, 0.3);
  --ace-section-overlay-accent: rgba(146, 64, 14, 0.3);
}

/* ===========================
   v2 COMPATIBLE ALTERNATING BACKGROUNDS
   =========================== */

/* v2-style alternating sections using existing v2 variables */
.section-alt:nth-child(odd) {
  background-color: var(--bg-primary);
}

.section-alt:nth-child(even) {
  background-color: var(--bg-secondary);
}

/* v2-style with card backgrounds */
.section-card-alt:nth-child(odd) {
  background-color: var(--bg-secondary);
}

.section-card-alt:nth-child(even) {
  background-color: var(--bg-card);
}

/* Enhanced v2 compatibility with smooth transitions */
.section-smooth {
  transition: var(--transition-default);
}

/* v6 Print Optimization */
@media print {
  .ace-print-hidden {
    display: none !important;
  }
  
  .ace-card {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
  
  .ace-btn {
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
}

/* v6 Performance Optimizations */
.ace-will-change-transform {
  will-change: transform;
}

.ace-will-change-scroll {
  will-change: scroll-position;
}

.ace-backface-hidden {
  backface-visibility: hidden;
}

.ace-gpu-accelerate {
  transform: translateZ(0);
}

/* ===========================
   v2 RESPONSIVE (Preserved Exactly)
   =========================== */
@media (max-width: 768px) {
  :root {
    --font-hero-title: 2.5rem;
    --font-section-title: 2rem;
    --section-padding: 4rem 0;
    --grid-gap: 1.5rem;
  }
  
  .hero-title { font-size: var(--font-hero-title); }
  .section-title { font-size: var(--font-section-title); }
}