/**
 * Zero Qubit Tech Holding - Design System
 * This file contains the core design system elements including colors, typography, and components.
 */

/* =======================================
   Apple-Inspired Light Color System 2025
   ======================================= */
:root {
  /* PRIMARY BRAND - Quantum Cyan adjusted for light backgrounds */
  --primary: #007acc;                    /* Main brand color - darker for contrast */
  --primary-light: #0099ff;              /* Light variant for subtle accents */
  --primary-dark: #005c99;               /* Darker variant for emphasis */
  --primary-hover: #0088e6;              /* Hover state */
  
  /* PRIMARY ALPHA VARIANTS */
  --primary-subtle: rgba(0, 122, 204, 0.06);  /* Very subtle background tint */
  --primary-light-bg: rgba(0, 122, 204, 0.04); /* Light hover backgrounds */
  --primary-medium-bg: rgba(0, 122, 204, 0.08); /* Active backgrounds */
  --primary-strong-bg: rgba(0, 122, 204, 0.12); /* Strong accent backgrounds */
  
  /* BACKGROUND SYSTEM - Apple-inspired whites and grays */
  --bg-primary: #ffffff;                 /* Pure white - main background */
  --bg-secondary: #f5f5f7;               /* Apple's signature off-white */
  --bg-tertiary: #f2f2f7;                /* Slightly cooler off-white */
  --bg-elevated: #fafafa;                /* Cards, modals, elevated surfaces */
  --bg-section: #fbfbfd;                 /* Section backgrounds */
  --bg-accent: #f8f9ff;                  /* Subtle cyan-tinted background */
  
  /* NEUTRAL SCALE - Teenage Engineering inspired precision */
  --neutral-50: #fafafa;                 /* Lightest gray */
  --neutral-100: #f4f4f5;                /* Very light gray */
  --neutral-200: #e4e4e7;                /* Light gray - borders, dividers */
  --neutral-300: #d4d4d8;                /* Medium light gray */
  --neutral-400: #a1a1aa;                /* Medium gray - placeholders */
  --neutral-500: #71717a;                /* Dark gray - secondary text */
  --neutral-600: #52525b;                /* Darker gray - primary text light */
  --neutral-700: #3f3f46;                /* Very dark gray */
  --neutral-800: #27272a;                /* Near black - headings */
  --neutral-900: #18181b;                /* True black - primary text */
  
  /* TEXT COLORS - High contrast for accessibility */
  --text-primary: #1d1d1f;               /* Apple's primary text (near black) */
  --text-secondary: #86868b;             /* Secondary text (medium gray) */
  --text-tertiary: #a1a1a6;              /* Tertiary text (light gray) */
  --text-inverse: #ffffff;               /* White text for dark backgrounds */
  --text-accent: var(--primary);         /* Brand color for links, accents */
  
  /* BORDER SYSTEM */
  --border-light: #e5e5e7;               /* Light borders, dividers */
  --border-medium: #d2d2d7;              /* Medium borders */
  --border-strong: #a1a1aa;              /* Strong borders */
  --border-accent: var(--primary);       /* Brand color borders */
  --border-focus: rgba(0, 122, 204, 0.5); /* Focus ring color */
  
  /* GLASS EFFECTS - Enhanced for Premium Feel */
  --glass-bg: rgba(255, 255, 255, 0.78); /* More transparent for better glass effect */
  --glass-border: rgba(0, 122, 204, 0.12); /* Stronger cyan glass border */
  --glass-border-hover: rgba(0, 122, 204, 0.24); /* Enhanced hover glass border */
  
  /* Enhanced Shadow System for Depth */
  --glass-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --glass-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  --glass-shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --glass-shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);
  
  /* Premium Glow Effects */
  --glow-primary: 0 0 20px rgba(0, 122, 204, 0.15);
  --glow-primary-strong: 0 0 40px rgba(0, 122, 204, 0.25);
  
  /* INTERACTIVE STATES */
  --hover-bg: rgba(0, 122, 204, 0.04);   /* Subtle hover background */
  --active-bg: rgba(0, 122, 204, 0.08);  /* Active/pressed background */
  --focus-bg: rgba(0, 122, 204, 0.06);   /* Focus background */
  --selected-bg: rgba(0, 122, 204, 0.1); /* Selected state background */
  
  /* SEMANTIC COLORS - Functional colors */
  --success: #28a745;                     /* Green for success states */
  --success-bg: rgba(40, 167, 69, 0.08);  /* Success background */
  --warning: #ffc107;                     /* Yellow for warnings */
  --warning-bg: rgba(255, 193, 7, 0.08);  /* Warning background */
  --error: #dc3545;                       /* Red for errors */
  --error-bg: rgba(220, 53, 69, 0.08);    /* Error background */
  --info: var(--primary);                 /* Info uses brand color */
  --info-bg: var(--primary-subtle);       /* Info background */
  
  /* Legacy Compatibility Variables - Updated for light theme */
  --color-bg: var(--bg-primary);              /* Main background */
  --color-text: var(--text-primary);          /* Primary text */
  --color-text-muted: var(--text-secondary);  /* Secondary text */
  --color-text-subtle: var(--text-tertiary);  /* Tertiary text */
  
  /* Quantum Brand Identity - Updated for light theme */
  --color-quantum-primary: var(--primary);    /* Main brand color */
  --color-quantum-secondary: var(--primary-dark); /* Darker variant */
  --color-quantum-accent: var(--primary-light); /* Light variant */
  --color-quantum-glow: rgba(0, 122, 204, 0.15); /* Subtle glow for light theme */
  
  /* Business-Focused Surfaces - Light theme */
  --color-surface-primary: var(--bg-elevated); /* Card backgrounds */
  --color-surface-secondary: var(--bg-secondary); /* Section backgrounds */
  --color-surface-elevated: var(--bg-tertiary); /* Elevated elements */
  
  /* Professional Glass System - Light theme */
  --glass-subtle: var(--glass-bg);         /* Light glass background */
  --glass-border: var(--glass-border);     /* Soft border */
  --glass-border-hover: var(--glass-border-hover); /* Interactive border */
  
  /* Business Status Colors */
  --color-success: #00c851;         /* Growth Green */
  --color-warning: #ff8f00;         /* Caution Orange */
  --color-error: #ff4444;           /* Alert Red */
  --color-revenue: #00e676;         /* Revenue Green */
  --color-efficiency: #2196f3;      /* Efficiency Blue */
  
  /* Interactive States */
  --hover-subtle: rgba(0, 229, 255, 0.08); /* Subtle Hover */
  --hover-medium: rgba(0, 229, 255, 0.15); /* Medium Hover */
  --active-state: rgba(0, 229, 255, 0.25); /* Active State */
  --focus-ring: rgba(0, 229, 255, 0.5);    /* Focus Ring */
  
  /* Legacy Compatibility (for existing components) */
  --color-primary: var(--color-quantum-primary);
  --color-primary-dark: var(--color-quantum-secondary);
  --color-primary-light: var(--color-quantum-accent);
  --color-bg-alt: var(--color-surface-secondary);
  --color-bg-light: var(--color-surface-elevated);
  --color-glow: var(--color-quantum-glow);
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-divider: rgba(255, 255, 255, 0.1);
  
  /* Executive Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-quantum-primary) 0%, var(--color-quantum-secondary) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface-primary) 100%);
  
  /* Quantum Opacity Variants */
  --color-quantum-10: rgba(0, 229, 255, 0.1);
  --color-quantum-20: rgba(0, 229, 255, 0.2);
  --color-quantum-50: rgba(0, 229, 255, 0.5);
}

/* Color Accessibility Helpers */
.color-primary { color: var(--color-primary); }
.color-text { color: var(--color-text); }
.color-muted { color: var(--color-text-muted); }
.color-success { color: var(--color-accent-success); }
.color-warning { color: var(--color-accent-warning); }
.color-error { color: var(--color-accent-error); }
.color-info { color: var(--color-accent-info); }

.bg-primary { background-color: var(--color-primary); }
.bg-dark { background-color: var(--color-bg); }
.bg-alt { background-color: var(--color-bg-alt); }
.bg-light { background-color: var(--color-bg-light); }
.bg-gradient-primary { background-image: var(--gradient-primary); }
.bg-gradient-dark { background-image: var(--gradient-dark); }

/* =======================================
   Typography System
   ======================================= */
/* Apple System Fonts - No external imports needed */
:root {
  /* Font Families - Apple-inspired system fonts */
  --font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "JetBrains Mono", "Fira Code", "Roboto Mono", Consolas, monospace;
  --font-secondary: var(--font-display); /* For backward compatibility */
  
  /* Modern Typography Scale - Perfect Modular Scale */
  --font-size-xs: 0.875rem;     /* 14px - Small text, captions (increased from 12px) */
  --font-size-sm: 0.9375rem;    /* 15px - Supporting text (increased from 14px) */
  --font-size-base: 1rem;       /* 16px - Body text */
  --font-size-lg: 1.125rem;     /* 18px - Lead paragraphs */
  --font-size-xl: 1.5rem;       /* 24px - H3 titles */
  --font-size-2xl: 1.875rem;    /* 30px - H2 sub-sections */
  --font-size-3xl: 2.5rem;      /* 40px - H1 section headers */
  --font-size-4xl: 3.5rem;      /* 56px - Display titles */
  
  /* Font Weights - Enhanced for Apple-style Impact */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* Line Heights - Optimized for readability */
  --line-height-tight: 1.1;     /* For large headings */
  --line-height-snug: 1.3;      /* For medium headings */
  --line-height-base: 1.5;      /* For body text */
  --line-height-relaxed: 1.7;   /* For long-form content */
  
  /* Letter Spacing - Refined */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.1em;
  
  /* Spacing Scale - Consistent vertical rhythm */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */
}

/* Base Typography - Apple-inspired */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apple-Inspired Heading System - Enhanced for Impact */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
  color: var(--text-primary);
  text-rendering: optimizeLegibility;
  text-align: center; /* Zero Qubit: center-aligned for better visual hierarchy */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display Typography - Apple 2024 style: bolder, center-aligned */
.headline-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);      /* 48-80px responsive */
  font-weight: 800;                        /* Extra bold for impact */
  line-height: 1.02;                       /* Very tight for large text */
  letter-spacing: -0.03em;                 /* Tight tracking */
  color: var(--text-primary);
  text-align: center;                      /* Zero Qubit: center-aligned for better visual hierarchy */
}

.headline-large {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem); /* 36-56px responsive */
  font-weight: 700;                        /* Bold for hierarchy */
  line-height: 1.05;                       /* Tight for impact */
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-align: center;
}

.headline-section {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem); /* 28-36px responsive */
  font-weight: 650;                        /* Semi-bold plus */
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-align: center;
}

.headline-subsection {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem); /* 20-24px responsive */
  font-weight: 600;                        /* Semi-bold */
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-align: center;
}

/* Body Typography - Optimized for readability */
.body-large {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2.25vw, 1.25rem); /* 18-20px responsive */
  font-weight: 400;
  line-height: 1.6;                        /* Generous for readability */
  color: var(--text-primary);
  letter-spacing: 0;
}

.body-regular {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);   /* 16-18px responsive */
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  letter-spacing: 0;
}

.body-small {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.75vw, 1rem); /* 14-16px responsive */
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Utility Typography */
.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-accent {
  color: var(--text-accent);
  font-weight: 500;
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

/* Display Heading - Hero titles only - Enhanced Impact */
.display-title {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tighter);
  font-weight: 800;
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* H1 - Section headers - Bolder Impact */
h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-xl);
  font-weight: 800;
}

/* H2 - Sub-sections - Enhanced Weight */
h2 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
  font-weight: 700;
}

/* H3 - Card titles - Refined */
h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.2;
  font-weight: 650;
  margin-bottom: var(--space-md);
  letter-spacing: -0.015em;
}

/* H4 - Sub-card titles */
h4 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
}

/* H5 - Small headings */
h5 {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
}

/* H6 - Overlines/Labels */
h6 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

/* Paragraphs */
p {
  margin-top: 0;
  margin-bottom: var(--space-md);
  line-height: var(--line-height-base);
}

/* Lead paragraphs */
.lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

/* Small text */
.small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Typography Utility Classes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }
.font-mono { font-family: var(--font-mono); }

.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-base { line-height: var(--line-height-base); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }

.text-uppercase { text-transform: uppercase; }

/* Spacing Utility Classes */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* =======================================
   Spacing System
   ======================================= */
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-11: 6rem;    /* 96px */
  --space-12: 8rem;    /* 128px */
}

/* Margin Helpers */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }

/* Padding Helpers */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* =======================================
   Layout System
   ======================================= */
:root {
  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  
  /* Border Radius */
  --radius-sm: 0.125rem;  /* 2px */
  --radius-md: 0.25rem;   /* 4px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;  /* Fully rounded */
  
  /* Enhanced Shadow System - Apple-inspired Depth */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.09), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px rgba(0, 122, 204, 0.15);
  
  /* Z-index */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-sm {
  max-width: var(--container-sm);
}

.container-md {
  max-width: var(--container-md);
}

.container-lg {
  max-width: var(--container-lg);
}

.container-xl {
  max-width: var(--container-xl);
}

/* Flexbox Helpers */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Grid Helpers */
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Position Helpers */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-0 { z-index: var(--z-0); }
.z-10 { z-index: var(--z-10); }
.z-20 { z-index: var(--z-20); }
.z-30 { z-index: var(--z-30); }
.z-40 { z-index: var(--z-40); }
.z-50 { z-index: var(--z-50); }
.z-auto { z-index: var(--z-auto); }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* =======================================
   Responsive Breakpoints
   ======================================= */
/* 
Use these media queries for responsive design:

@media (min-width: 640px) { ... } // sm
@media (min-width: 768px) { ... } // md
@media (min-width: 1024px) { ... } // lg
@media (min-width: 1280px) { ... } // xl
*/

/* Responsive Display Helpers */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }

@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:inline-block { display: inline-block; }
  .sm\:inline { display: inline; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:inline { display: inline; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:inline-block { display: inline-block; }
  .lg\:inline { display: inline; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
}

@media (min-width: 1280px) {
  .xl\:hidden { display: none; }
  .xl\:block { display: block; }
  .xl\:inline-block { display: inline-block; }
  .xl\:inline { display: inline; }
  .xl\:flex { display: flex; }
  .xl\:grid { display: grid; }
}

/* =======================================
   Missing Template Components
   ======================================= */

/* APPLE-INSPIRED CONTAINER SYSTEM */
.container-standard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-full {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* APPLE-INSPIRED GRID SYSTEM */
.grid {
  display: grid;
  gap: 2rem;
}

.grid-2 { 
  grid-template-columns: repeat(2, 1fr); 
}

.grid-3 { 
  grid-template-columns: repeat(3, 1fr); 
}

.grid-4 { 
  grid-template-columns: repeat(4, 1fr); 
}

/* APPLE-INSPIRED BUTTON SYSTEM */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  color: var(--text-inverse);
  padding: 1rem 2.5rem;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  color: var(--text-inverse) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 122, 204, 0.35), var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px var(--border-focus);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 122, 204, 0.2);
}

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  outline: none;
}

.btn-secondary:hover {
  background: var(--primary);
  color: var(--text-inverse);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.2);
}

.btn-tertiary {
  background: transparent;
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  outline: none;
}

.btn-tertiary:hover {
  border-color: var(--border-medium);
  background: var(--hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--glass-shadow-light);
}

.btn-large {
  padding: 1.125rem 2.5rem;
  font-size: 1rem;
  border-radius: 14px;
}

.btn-small {
  padding: 0.625rem 1.5rem;
  font-size: 0.825rem;
  border-radius: 10px;
}

/* APPLE-INSPIRED CARD SYSTEM - Enhanced Glass Effect */
.card-executive {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow-medium);
}

.card-executive::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-executive:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--glass-shadow-elevated);
  background: rgba(255, 255, 255, 0.88);
}

.card-executive:hover::before {
  opacity: 1;
}

.card-minimal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.card-minimal:hover {
  border-color: var(--border-medium);
  box-shadow: 0 4px 12px var(--glass-shadow-light);
}

.card-accent {
  background: var(--bg-accent);
  border: 1px solid var(--primary-subtle);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
}

.card-accent::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* GAP UTILITIES USING SPACING SYSTEM */
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }

/* RESPONSIVE GRID BEHAVIOR */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .container-wide,
  .container-standard,
  .container-narrow {
    padding: 0 1rem;
  }
}

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

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

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* =======================================
   Executive-Ready Components 2025
   ======================================= */

/* Executive Cards */
.executive-card {
  background: var(--glass-subtle);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 2.5rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.executive-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 20px var(--color-quantum-glow);
}

/* Business Value Cards */
.value-card {
  background: var(--glass-subtle);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.value-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 20px var(--color-quantum-glow);
}

.value-card .value-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  background: var(--color-quantum-glow);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-card .value-title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.value-card .value-description {
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Professional Navigation */
.professional-nav {
  background: var(--glass-subtle);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}

.professional-nav .nav-link {
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.professional-nav .nav-link:hover {
  color: var(--color-text);
  background: var(--hover-subtle);
}

.professional-nav .nav-link.active {
  color: var(--color-quantum-primary);
  background: var(--hover-medium);
}

/* Professional CTA Buttons */
.quantum-cta {
  background: transparent;
  border: 2px solid var(--color-quantum-primary);
  color: var(--color-quantum-primary);
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.quantum-cta:hover {
  background: var(--color-quantum-primary);
  color: var(--color-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-quantum-glow);
}

.quantum-cta:active {
  transform: translateY(0);
}

.quantum-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, 
    var(--color-quantum-primary) 0%, 
    transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.quantum-cta:active::after {
  opacity: 0.3;
  transform: scale(1);
}

/* Business Outcome Visualizations */
.outcome-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.outcome-item {
  background: var(--color-surface-primary);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.outcome-item .outcome-metric {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-quantum-primary);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px var(--color-quantum-glow);
}

.outcome-item .outcome-description {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.5;
}

.outcome-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-quantum-primary), transparent);
  animation: quantumScan 4s infinite;
}

@keyframes quantumScan {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Trust-Building Elements */
.credibility-section {
  background: var(--color-surface-secondary);
  border-radius: 20px;
  padding: 3rem;
  margin: 4rem 0;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.expertise-item {
  text-align: center;
}

.expertise-item .expertise-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  background: var(--color-quantum-glow);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.expertise-item .expertise-title {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.expertise-item .expertise-description {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Executive Typography */
.executive-headline {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.value-proposition {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-quantum-primary);
  margin-bottom: 1rem;
}

.business-content {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(16px, 2.5vw, 18px);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 65ch;
}

.business-metric {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-quantum-primary);
  text-shadow: 0 0 15px var(--color-quantum-glow);
}

/* =======================================
   Executive Three-Column Footer Design 2025
   ======================================= */

/* Executive Footer Container */
.site-footer {
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface-primary) 100%);
  border-top: 1px solid var(--glass-border);
  padding: 60px 0 25px;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-quantum-primary), transparent);
  animation: quantumScan 6s infinite;
}

/* Three-Column Layout Optimization */
.footer-widgets-container .ast-row {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.footer-widget-area {
  padding: 0 15px;
  flex: 1;
  min-width: 0;
}

/* Column 1: Company Branding */
.footer-company-column {
  max-width: 320px;
}

.footer-branding .footer-logo {
  font-family: var(--font-secondary);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.footer-branding .footer-tagline {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  color: var(--color-quantum-primary);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.footer-description p {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

/* Column 2: Quick Links */
.footer-links-column {
  max-width: 280px;
}

.footer-widget-area .widget-title {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-quantum-primary);
  display: inline-block;
}

.footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-navigation li {
  margin-bottom: 12px;
}

.footer-navigation a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  position: relative;
  padding-left: 0;
  display: block;
}

.footer-navigation a:hover {
  color: var(--color-quantum-primary);
  padding-left: 8px;
}

.footer-navigation a::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: var(--color-quantum-primary);
  transition: width 0.2s ease;
}

.footer-navigation a:hover::before {
  width: 6px;
}

/* Column 3: Contact & Social */
.footer-contact-column {
  max-width: 300px;
}

.footer-contact-info {
  margin-bottom: 0;
}

.footer-email {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem !important;
  font-size: 0.95rem;
  line-height: 1.4;
}

.footer-email strong {
  color: var(--color-text);
  display: inline;
  margin-right: 0.5rem;
}

.footer-email a {
  color: var(--color-quantum-primary);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.footer-email a:hover {
  color: var(--color-quantum-accent);
  text-shadow: 0 0 8px var(--color-quantum-glow);
}

/* Compact Office Locations */
.office-locations {
  margin-top: 0;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.office-location {
  padding: 0.75rem;
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.office-location:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
}

.office-location p:first-child {
  font-weight: 600;
  color: var(--color-quantum-primary);
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.office-location p:last-child {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.3;
  margin: 0;
}

/* Social Media Section */
.footer-social-section {
  margin-top: 1.5rem;
}

.social-title {
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.footer-social-links {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1;
}

.social-link svg,
.social-link i {
  display: block;
  width: 16px;
  height: 16px;
  text-align: center;
}

.social-link:hover {
  background: var(--color-quantum-primary);
  color: var(--color-bg);
  border-color: var(--color-quantum-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--color-quantum-glow);
}

/* Executive Footer Bottom */
.site-info {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid var(--glass-border);
}

.copyright-text p {
  color: var(--text-tertiary);
  font-size: 0.9rem;
  margin: 0;
}

.footer-links-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
  justify-content: flex-end;
}

.footer-links-navigation a {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-links-navigation a:hover {
  color: var(--primary);
}

/* Professional AI Circuit Pattern */
.ai-circuit-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.02;
  background-image: 
    radial-gradient(circle at 25% 25%, var(--primary) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, var(--primary) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: circuitFlow 20s linear infinite;
}

@keyframes circuitFlow {
  0% { background-position: 0 0, 30px 30px; }
  100% { background-position: 60px 60px, 90px 90px; }
}

/* Desktop Three-Column Layout */
@media (min-width: 1024px) {
  .site-footer {
    padding: 60px 0 25px;
  }
  
  .footer-widgets-container {
    margin-bottom: 20px;
  }
  
  .footer-widgets-container .ast-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  
  .footer-widget-area {
    padding: 0 20px;
    flex: 1 1 33.333%;
    max-width: 33.333%;
  }
  
  /* Optimize column spacing */
  .footer-company-column {
    padding-right: 30px;
    max-width: 350px;
  }
  
  .footer-links-column {
    padding: 0 20px;
    max-width: 280px;
  }
  
  .footer-contact-column {
    padding-left: 30px;
    max-width: 320px;
  }
}

/* Tablet Layout */
@media (min-width: 769px) and (max-width: 1023px) {
  .site-footer {
    padding: 50px 0 25px;
  }
  
  .footer-widget-area {
    margin-bottom: 2rem;
    padding: 0 15px;
  }
  
  .footer-company-column,
  .footer-links-column,
  .footer-contact-column {
    max-width: none;
  }
}

/* Mobile Footer Responsive */
@media (max-width: 768px) {
  .site-footer {
    padding: 40px 0 20px;
  }
  
  .footer-widgets-container .ast-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }
  
  .footer-widget-area {
    margin-bottom: 2.5rem;
    padding: 0 10px;
    max-width: none !important;
    flex: none !important;
    width: 100%;
  }
  
  .footer-company-column,
  .footer-links-column {
    margin-bottom: 2.5rem;
  }
  
  .footer-contact-column {
    margin-bottom: 1rem;
  }
  
  .footer-links-navigation ul {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .copyright-text {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .footer-social-links {
    justify-content: center;
    margin-top: 1.5rem;
  }
  
  /* Mobile-specific adjustments */
  .footer-branding .footer-logo {
    font-size: 1.6rem;
    text-align: center;
  }
  
  .footer-branding .footer-tagline {
    text-align: center;
    font-size: 1rem;
  }
  
  .footer-description p {
    text-align: center;
    font-size: 0.9rem;
  }
  
  .footer-widget-area .widget-title {
    text-align: center;
    font-size: 1.1rem;
  }
  
  .footer-navigation {
    text-align: center;
  }
  
  .footer-email {
    text-align: center;
  }
  
  .social-title {
    text-align: center;
  }
}

/* =======================================
   Apple-Inspired Form Components & Focus Management
   ======================================= */

/* INPUT FIELDS */
.input-field {
  background: var(--bg-primary);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  padding: 0.875rem 1.125rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
  outline: none;
  width: 100%;
}

.input-field::placeholder {
  color: var(--text-tertiary);
}

.input-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--border-focus);
  background: var(--bg-elevated);
}

.input-field:hover:not(:focus) {
  border-color: var(--border-medium);
}

/* TEXTAREA */
.textarea-field {
  background: var(--bg-primary);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  padding: 1rem 1.125rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
  outline: none;
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.textarea-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--border-focus);
}

/* FORM LABELS */
.form-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  display: block;
}

.form-label.required::after {
  content: ' *';
  color: var(--error);
}

/* FOCUS STYLES - Consistent across all interactive elements */
*:focus {
  outline: none;
}

button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
  box-shadow: 0 0 0 3px var(--border-focus);
  outline: none;
}

/* Component Focus Management */
.executive-cta-button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-tertiary:focus-visible,
.quantum-cta:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

.executive-value-card:focus-within,
.executive-card:focus-within,
.card-executive:focus-within,
.value-card:focus-within {
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 0 3px var(--primary-subtle);
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =======================================
   Header Language Switcher Styling
   ======================================= */

/* Header Actions Container */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 24px space between language switcher and contact button */
}

/* Language Switcher Container */
.header-language-switcher {
  display: flex;
  align-items: center;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .header-actions {
    gap: 1rem; /* Reduce gap on mobile */
  }
  
  /* On mobile, ensure language switcher doesn't interfere with menu toggle */
  .header-language-switcher {
    order: -1; /* Place language switcher before other elements */
    margin-right: auto; /* Push to the left, keeping contact button on right */
  }
}

@media (max-width: 480px) {
  .header-actions {
    gap: 0.75rem; /* Even smaller gap on very small screens */
  }
}