:root {
    --solutions-top: 200px;
    --solutions-axis: 20px;
    --solutions-bottom: 200px;
    --solutions-connector: 48px;
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
    
    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
  
  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  
  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

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

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

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

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

/* 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 {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* UTSPL Professional Website Styles - FIXED FONT COLORS */
/* Using exact brand colors: #1E90FF (light blue) and #2C3E50 (dark navy) */
/* LIGHT THEME: Dark text only - NO WHITE TEXT */
/* DARK THEME: White text on dark backgrounds */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #2C3E50; /* Default dark text for light theme */
    overflow-x: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

/* Dark theme body styles */
[data-color-scheme="dark"] body {
    background: #1a1a1a;
    color: #ffffff; /* White text for dark theme */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Navigation Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(30, 144, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(30, 144, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(44, 62, 80, 0.1);
}

.navbar.scrolled {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.98) 0%, rgba(30, 144, 255, 0.98) 100%);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.2);
    transform: translateY(0);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff; /* Always white in navbar */
    font-weight: 700;
    font-size: 18px;
    animation: fadeInLeft 0.8s ease-out;
}

.brand-logo {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
}

.logo-image {
    width: auto;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    display: block;
}


.nav-menu {
    display: flex;
    list-style: none;
    gap: 32px;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.nav-item {
    position: relative;
}

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(44, 62, 80, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 32px rgba(44, 62, 80, 0.25);
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-has-submenu:hover .nav-submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-has-submenu:focus-within .nav-submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-sublink {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-sublink:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.nav-link {
    color: rgba(255, 255, 255, 0.9); /* Always white in navbar */
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 0;
}

.nav-link:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #1E90FF, #ffffff);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    animation: fadeInRight 0.8s ease-out 0.4s both;
}

.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff; /* Always white in navbar */
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.hamburger {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #ffffff; /* Always white in navbar */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #2C3E50 0%, #1E90FF 100%);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.9) 0%, rgba(30, 144, 255, 0.9) 100%);
}

.hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(30deg, transparent 40%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, transparent 60%),
        linear-gradient(-30deg, transparent 40%, rgba(30, 144, 255, 0.1) 40%, rgba(30, 144, 255, 0.1) 60%, transparent 60%);
    background-size: 120px 120px, 80px 80px;
    animation: patternMove 20s ease-in-out infinite;
}

.engineering-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.engineering-element {
    position: absolute;
    opacity: 0.1;
    animation: engineeringFloat 8s ease-in-out infinite;
}

.engineering-element.gear-1 {
    top: 15%;
    left: 8%;
    width: 80px;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z'/%3E%3C/svg%3E") center/contain no-repeat;
    animation-delay: 0s;
    animation-duration: 10s;
}

.engineering-element.gear-2 {
    top: 65%;
    right: 12%;
    width: 60px;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z'/%3E%3C/svg%3E") center/contain no-repeat;
    animation-delay: 2s;
    animation-duration: 8s;
    animation-direction: reverse;
}

.engineering-element.circuit-1 {
    top: 25%;
    right: 20%;
    width: 100px;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' fill='none'%3E%3Cpath d='M10 30L20 30M20 20L20 40M20 30L30 30M30 15L30 45M30 30L40 30M40 25L40 35M40 30L50 30M50 20L50 40M50 30L60 30M60 15L60 45M60 30L70 30M70 25L70 35M70 30L80 30M80 20L80 40M80 30L90 30' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='20' cy='30' r='3' fill='%23ffffff'/%3E%3Ccircle cx='40' cy='30' r='3' fill='%23ffffff'/%3E%3Ccircle cx='60' cy='30' r='3' fill='%23ffffff'/%3E%3Ccircle cx='80' cy='30' r='3' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
    animation-delay: 1s;
    animation-duration: 12s;
}

.engineering-element.circuit-2 {
    bottom: 30%;
    left: 15%;
    width: 80px;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50' fill='none'%3E%3Cpath d='M10 25L70 25M25 10L25 40M40 15L40 35M55 10L55 40' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='20' y='20' width='10' height='10' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='35' y='20' width='10' height='10' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='50' y='20' width='10' height='10' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
    animation-delay: 3s;
    animation-duration: 14s;
}

.engineering-element.hexagon-1 {
    top: 45%;
    left: 25%;
    width: 70px;
    height: 70px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.5 3.5L22 12L17.5 20.5H6.5L2 12L6.5 3.5H17.5Z' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M12 8V16M8 12H16' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
    animation-delay: 4s;
    animation-duration: 16s;
}

.engineering-element.hexagon-2 {
    top: 75%;
    right: 35%;
    width: 50px;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.5 3.5L22 12L17.5 20.5H6.5L2 12L6.5 3.5H17.5Z' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
    animation-delay: 6s;
    animation-duration: 18s;
}

.hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    min-height: 100vh;
    padding: 120px 0 60px;
}

.hero-text {
    animation: fadeInUp 1s ease-out 0.5s both;
}

.hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #ffffff; /* Always white in hero */
}

.company-name {
    display: block;
    background: linear-gradient(135deg, #ffffff 0%, #1E90FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 3s ease-in-out infinite;
}

.hero-subtitle {
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9); /* Always white in hero */
    margin-bottom: 16px;
    animation: fadeInUp 0.8s ease-out 0.8s both;
}

.hero-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8); /* Always white in hero */
    line-height: 1.6;
    margin-bottom: 32px;
    animation: fadeInUp 0.8s ease-out 1s both;
}

.hero-features {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 1.2s both;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9); /* Always white in hero */
    font-weight: 500;
}

.feature-icon {
    font-size: 20px;
    animation: bounce 2s ease-in-out infinite;
}

.hero-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out 1.4s both;
}

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

.stat-number {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: #1E90FF;
    margin-bottom: 4px;
    text-shadow: 0 2px 10px rgba(30, 144, 255, 0.3);
}

.stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7); /* Always white in hero */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    gap: 20px;
    animation: fadeInUp 0.8s ease-out 1.6s both;
}

.hero-visual {
    animation: fadeInRight 1s ease-out 0.8s both;
}

.hero-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(44, 62, 80, 0.3);
    animation: cardFloat 6s ease-in-out infinite;
}

.card-header {
    margin-bottom: 24px;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff; /* Always white in hero card */
    margin-bottom: 8px;
}

.card-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7); /* Always white in hero card */
}

.card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.service-preview {
    background: rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-preview:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(30, 144, 255, 0.2);
}

.service-preview .service-icon {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.service-preview .service-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9); /* Always white in hero card */
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #1E90FF 0%, #2C3E50 100%);
    color: #ffffff; /* Always white text on primary buttons */
    box-shadow: 0 8px 24px rgba(30, 144, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(30, 144, 255, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff; /* White text on hero secondary buttons */
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

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

/* Light theme secondary buttons in regular sections */
body .btn-secondary:not(.hero .btn-secondary) {
    background: rgba(44, 62, 80, 0.05);
    color: #2C3E50;
    border: 2px solid rgba(44, 62, 80, 0.2);
}

[data-color-scheme="dark"] .btn-secondary:not(.hero .btn-secondary) {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-full-width {
    width: 100%;
    justify-content: center;
}

.btn-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Section Styles */
section {
    padding: 120px 0;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
    animation: fadeInUp 0.8s ease-out;
}

.section-tag {
    display: inline-block;
    background: linear-gradient(135deg, #1E90FF, #2C3E50);
    color: #ffffff; /* Always white on section tags */
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* LIGHT THEME: Dark text for section titles and content */
.section-title {
    font-size: 48px;
    font-weight: 800;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 16px;
    line-height: 1.2;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-subtitle {
    font-size: 20px;
    color: #666; /* Dark gray for light theme */
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DARK THEME: White text for section titles and content */
[data-color-scheme="dark"] .section-title {
    color: #ffffff; /* White text for dark theme */
}

[data-color-scheme="dark"] .section-subtitle {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

/* About Section */
.about {
    background: linear-gradient(135deg, #f8fafe 0%, #ffffff 100%);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .about {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

.about-text {
    max-width: 900px;
    margin: 0 auto;
}

.about-description p {
    font-size: 16px;
    color: #555; /* Dark text for light theme */
    line-height: 1.8;
    margin-bottom: 20px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .about-description p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.company-values {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

.value-item {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: #ffffff; /* Light background for light theme */
    border-radius: 16px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .value-item {
    background: #2a2a2a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.value-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.1);
    border-color: rgba(30, 144, 255, 0.2);
}

[data-color-scheme="dark"] .value-item:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.value-icon {
    font-size: 32px;
    min-width: 48px;
    animation: pulse 2s ease-in-out infinite;
}

.value-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .value-content h4 {
    color: #ffffff; /* White text for dark theme */
}

.value-content p {
    font-size: 16px;
    color: #555; /* Dark text for light theme */
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .value-content p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

/* Solutions Section */
.solutions {
    background: radial-gradient(900px circle at 10% 0%, rgba(30, 144, 255, 0.10), transparent 60%),
                linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .solutions {
    background: radial-gradient(900px circle at 10% 0%, rgba(30, 144, 255, 0.12), transparent 60%),
                linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.solutions-timeline {
    margin-top: 40px;
}

.solutions-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: var(--solutions-top) var(--solutions-connector) var(--solutions-axis) var(--solutions-connector) var(--solutions-bottom);
    column-gap: 32px;
    row-gap: 0;
    padding: 48px 0;
    align-items: stretch;
}

.solutions-track::before {
    content: '';
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    align-self: center;
    height: 12px;
    background: rgba(44, 62, 80, 0.12);
    border-radius: 999px;
}

[data-color-scheme="dark"] .solutions-track::before {
    background: rgba(255, 255, 255, 0.12);
}

.solution-item {
    display: grid;
    grid-template-rows: var(--solutions-top) var(--solutions-connector) var(--solutions-axis) var(--solutions-connector) var(--solutions-bottom);
    justify-items: center;
    text-align: center;
    row-gap: 0;
}

.solution-item.top,
.solution-item.bottom {
    padding: 0;
}

.solution-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .solution-content h4 {
    color: #ffffff; /* White text for dark theme */
}

.solution-content p {
    font-size: 14px;
    color: #555; /* Dark text for light theme */
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-content {
    max-width: 240px;
}

[data-color-scheme="dark"] .solution-content p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

/* USP Section */
.usp {
    background: #ffffff;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .usp {
    background: #1a1a1a;
}

.usp .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.usp-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}

.usp-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px dashed rgba(44, 62, 80, 0.35);
    transform: translateY(-50%);
    z-index: 0;
}

[data-color-scheme="dark"] .usp-timeline::before {
    border-top-color: rgba(255, 255, 255, 0.3);
}

.usp-step {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.usp-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0F2D6B;
    border-radius: 10px;
    transform: rotate(45deg);
    box-shadow: 0 8px 24px rgba(15, 45, 107, 0.2);
    z-index: -1;
}

.usp-step:nth-child(2)::before,
.usp-step:nth-child(4)::before {
    background: #2d8bba;
    box-shadow: 0 8px 24px rgba(0, 166, 166, 0.2);
}

.usp-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.usp-card {
    position: relative;
    padding: 40px 32px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.06);
    text-align: center;
    min-height: 320px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.usp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1E90FF, #2C3E50);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.usp-card:hover::before {
    transform: scaleX(1);
}

.usp-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 48px rgba(44, 62, 80, 0.15);
    border-color: rgba(30, 144, 255, 0.3);
}

[data-color-scheme="dark"] .usp-card {
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="dark"] .usp-card:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.usp-card--navy,
.usp-card--teal {
    background: inherit;
}

.usp-icon {
    width: 72px;
    height: 72px;
    background: #ffffff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(30, 144, 255, 0.2);
    box-shadow: 0 10px 24px rgba(44, 62, 80, 0.08);
}

[data-color-scheme="dark"] .usp-icon {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.2);
}

.usp-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transform: rotate(0deg);
}

.usp-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #2C3E50;
}

.usp-card p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    color: #555;
}

[data-color-scheme="dark"] .usp-card h3 {
    color: #ffffff;
}

[data-color-scheme="dark"] .usp-card p {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
    .usp-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .usp-timeline {
        display: none;
    }
}

@media (max-width: 768px) {
    .usp-cards {
        grid-template-columns: 1fr;
    }
}

/* Target Market Section */
.target-market {
    background: #ffffff; /* Match Services light background */
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .target-market {
    background: #1a1a1a; /* Match Services dark background */
}

.target-market .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.target-market-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 32px 40px;
    align-items: center;
}

.target-card {
    background: #ffffff; /* Match service-card */
    padding: 32px 28px;
    border-radius: 20px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
    animation: fadeInUp 0.8s ease-out;
}

[data-color-scheme="dark"] .target-card {
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.target-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1E90FF, #2C3E50);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.target-card:hover::before {
    transform: scaleX(1);
}

.target-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 48px rgba(44, 62, 80, 0.15);
    border-color: rgba(30, 144, 255, 0.3);
}

[data-color-scheme="dark"] .target-card:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.target-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 10px;
}

[data-color-scheme="dark"] .target-card h3 {
    color: #ffffff;
}

.target-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

[data-color-scheme="dark"] .target-card p {
    color: rgba(255, 255, 255, 0.8);
}

.target-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    color: #2C3E50;
}

[data-color-scheme="dark"] .target-icon {
    color: #ffffff;
}

.target-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.target-center {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.target-logo {
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.target-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .target-market-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 32px;
    }

    .target-center {
        grid-column: auto;
        grid-row: auto;
        order: 3;
    }
}

@media (max-width: 768px) {
    .target-logo {
        width: 200px;
        height: 200px;
    }
}

.solution-diamond {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 16px;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(30, 144, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.7);
    margin: 8px 0;
}

.solution-icon {
    transform: rotate(-45deg);
    font-size: 34px;
    color: #ffffff;
    line-height: 1;
}

.solution-number {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #1E90FF;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transform: rotate(-45deg);
    box-shadow: 0 6px 16px rgba(30, 144, 255, 0.3);
}

/* Even items: number badge on right edge, centered vertically */

.solution-item.solution-rotated .solution-diamond {
    transform: rotate(135deg);
}

.solution-item.solution-rotated .solution-icon {
    transform: rotate(-135deg);
}

.solution-item.solution-rotated .solution-number {
    transform: rotate(-135deg);
}

.solution-connector,
.solution-dot {
    display: block;
}

.solution-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #1E90FF;
    box-shadow: 0 0 0 6px rgba(30, 144, 255, 0.15);
    grid-row: 3;
    align-self: center;
}

.solution-connector {
    width: 4px;
    height: 100%;
    background: #1E90FF;
    border-radius: 999px;
    justify-self: center;
}

.solution-item:nth-child(odd) .solution-diamond {
    grid-row: 1;
    align-self: end;
}

.solution-item:nth-child(odd) .solution-connector {
    grid-row: 2;
    align-self: stretch;
}

.solution-item:nth-child(odd) .solution-content {
    grid-row: 5;
    align-self: start;
    margin-top: 12px;
}

.solution-item:nth-child(even) .solution-content {
    grid-row: 1;
    align-self: end;
    margin-bottom: 12px;
}

.solution-item:nth-child(even) .solution-connector {
    grid-row: 4;
    align-self: stretch;
}

.solution-item:nth-child(even) .solution-diamond {
    grid-row: 5;
    align-self: start;
}

.solution-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.solution-item.tone-teal .solution-diamond,
.solution-item.tone-teal .solution-connector,
.solution-item.tone-teal .solution-dot,
.solution-item.tone-teal .solution-number {
    background: #00A6A6;
}

.solution-item.tone-blue .solution-diamond,
.solution-item.tone-blue .solution-connector,
.solution-item.tone-blue .solution-dot,
.solution-item.tone-blue .solution-number {
    background: #0F2D6B;
}

.solution-item.tone-blue .solution-number {
    background: #1E90FF;
}

.solution-item.tone-teal .solution-number {
    background: #00A6A6;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.capability-card {
    background: #ffffff; /* Light background for light theme */
    padding: 32px 24px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.6s ease-out;
}

[data-color-scheme="dark"] .capability-card {
    background: #2a2a2a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.capability-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(30, 144, 255, 0.15);
    border-color: rgba(30, 144, 255, 0.3);
}

[data-color-scheme="dark"] .capability-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.capability-icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: block;
    animation: bounce 2s ease-in-out infinite;
}

.capability-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 12px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .capability-card h4 {
    color: #ffffff; /* White text for dark theme */
}

.capability-card p {
    font-size: 15px;
    color: #666; /* Dark text for light theme */
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .capability-card p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

/* Services Section */
.services {
    background: #ffffff; /* Light background for light theme */
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .services {
    background: #1a1a1a; /* Dark background for dark theme */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.service-card {
    background: #ffffff; /* Light background for light theme */
    padding: 40px 32px;
    border-radius: 20px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
}

[data-color-scheme="dark"] .service-card {
    background: #2a2a2a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1E90FF, #2C3E50);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 48px rgba(44, 62, 80, 0.15);
    border-color: rgba(30, 144, 255, 0.3);
}

[data-color-scheme="dark"] .service-card:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.service-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.service-icon {
    font-size: 40px;
}

.theme-icon,
.feature-icon,
.value-icon,
.solution-icon,
.service-icon,
.product-icon,
.category-icon,
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.theme-icon i,
.feature-icon i,
.value-icon i,
.solution-icon i,
.service-icon i,
.product-icon i,
.category-icon i,
.contact-icon i {
    font-size: 1em;
}

.service-title {
    font-size: 24px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin: 0;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .service-title {
    color: #ffffff; /* White text for dark theme */
}

.service-description {
    font-size: 16px;
    color: #555; /* Dark text for light theme */
    line-height: 1.7;
    margin-bottom: 24px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .service-description {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.service-features h4 {
    font-size: 16px;
    font-weight: 600;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .service-features h4 {
    color: #ffffff; /* White text for dark theme */
}

.service-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.service-features li {
    padding: 6px 0;
    color: #555; /* Dark text for light theme */
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .service-features li {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #1E90FF;
    font-weight: 700;
}

.service-applications h4 {
    font-size: 16px;
    font-weight: 600;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .service-applications h4 {
    color: #ffffff; /* White text for dark theme */
}

.application-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.application-tag {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.1), rgba(44, 62, 80, 0.1));
    color: #2C3E50; /* Dark text for light theme */
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(30, 144, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .application-tag {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(30, 144, 255, 0.1));
    color: #ffffff; /* White text for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.application-tag:hover {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.2), rgba(44, 62, 80, 0.2));
    transform: translateY(-2px);
}

[data-color-scheme="dark"] .application-tag:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(30, 144, 255, 0.2));
}

/* Products Section */
.products {
    background: linear-gradient(135deg, #f8fafe 0%, #ffffff 100%);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .products {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.products-showcase {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.product-category {
    background: #ffffff; /* Light background for light theme */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(44, 62, 80, 0.08);
    border: 1px solid rgba(30, 144, 255, 0.1);
    animation: fadeInUp 0.8s ease-out;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .product-category {
    background: #2a2a2a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}

.category-header {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.05), rgba(44, 62, 80, 0.05));
    padding: 40px 32px;
    text-align: center;
    border-bottom: 1px solid rgba(30, 144, 255, 0.1);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .category-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(30, 144, 255, 0.05));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    animation: pulse 3s ease-in-out infinite;
}

.category-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 12px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .category-header h3 {
    color: #ffffff; /* White text for dark theme */
}

.category-description {
    font-size: 18px;
    color: #666; /* Dark text for light theme */
    max-width: 600px;
    margin: 0 auto;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .category-description {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    padding: 40px 32px;
}

.product-card {
    background: #ffffff; /* Light background for light theme */
    border-radius: 16px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.05);
}

[data-color-scheme="dark"] .product-card {
    background: #1a1a1a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(44, 62, 80, 0.12);
    border-color: rgba(30, 144, 255, 0.3);
}

[data-color-scheme="dark"] .product-card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.product-visual {
    height: 200px;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.05), rgba(44, 62, 80, 0.05));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(30, 144, 255, 0.1);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .product-visual {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(30, 144, 255, 0.05));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.product-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: float 4s ease-in-out infinite;
}

.product-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #1E90FF, #2C3E50);
    color: #ffffff; /* Always white on badges */
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-info {
    padding: 24px;
}

.product-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 12px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .product-info h4 {
    color: #ffffff; /* White text for dark theme */
}

.product-info p {
    font-size: 15px;
    color: #555; /* Dark text for light theme */
    line-height: 1.6;
    margin-bottom: 16px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .product-info p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spec-tag {
    background: rgba(30, 144, 255, 0.1);
    color: #2C3E50; /* Dark text for light theme */
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(30, 144, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .spec-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff; /* White text for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Customers Section */
.customers {
    background: #ffffff; /* Light background for light theme */
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .customers {
    background: #1a1a1a; /* Dark background for dark theme */
}

.customers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.customer-category {
    background: #ffffff; /* Light background for light theme */
    padding: 40px 32px;
    border-radius: 20px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.8s ease-out;
}

[data-color-scheme="dark"] .customer-category {
    background: #2a2a2a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.customer-category:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(44, 62, 80, 0.12);
    border-color: rgba(30, 144, 255, 0.3);
}

[data-color-scheme="dark"] .customer-category:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.customer-category .category-header {
    background: none;
    padding: 0;
    margin-bottom: 24px;
    text-align: left;
    border: none;
}

.customer-category .category-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.customer-category h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 12px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .customer-category h3 {
    color: #ffffff; /* White text for dark theme */
}

.category-desc {
    font-size: 16px;
    color: #666; /* Dark text for light theme */
    line-height: 1.6;
    margin-bottom: 24px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .category-desc {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.customer-list {
    margin-bottom: 24px;
}

.customer-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(30, 144, 255, 0.1);
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .customer-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.customer-item:last-child {
    border-bottom: none;
}

.customer-info h4 {
    font-size: 18px;
    font-weight: 600;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .customer-info h4 {
    color: #ffffff; /* White text for dark theme */
}

.customer-info p {
    font-size: 15px;
    color: #555; /* Dark text for light theme */
    margin-bottom: 6px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .customer-info p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.customer-type {
    display: inline-block;
    background: rgba(30, 144, 255, 0.1);
    color: #1E90FF;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .customer-type {
    background: rgba(255, 255, 255, 0.1);
    color: #1E90FF;
}

.partnership-badge {
    display: inline-block;
    background: linear-gradient(135deg, #1E90FF, #2C3E50);
    color: #ffffff; /* Always white on badges */
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.3);
}

/* Contact Section */
.contact {
    background: linear-gradient(135deg, #f8fafe 0%, #ffffff 100%);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .contact {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: #ffffff; /* Light background for light theme */
    border-radius: 16px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .contact-card {
    background: #2a2a2a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.1);
    border-color: rgba(30, 144, 255, 0.2);
}

[data-color-scheme="dark"] .contact-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.contact-icon {
    font-size: 32px;
    min-width: 48px;
    animation: pulse 2s ease-in-out infinite;
}

.contact-details h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .contact-details h4 {
    color: #ffffff; /* White text for dark theme */
}

.contact-details p {
    font-size: 16px;
    color: #555; /* Dark text for light theme */
    margin-bottom: 6px;
    line-height: 1.6;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .contact-details p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.contact-meta {
    font-size: 14px;
    color: #1E90FF;
    font-weight: 500;
}

.contact-form-container {
    background: #ffffff; /* Light background for light theme */
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .contact-form-container {
    background: #2a2a2a; /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.form-header {
    margin-bottom: 32px;
    text-align: center;
}

.form-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .form-header h3 {
    color: #ffffff; /* White text for dark theme */
}

.form-header p {
    font-size: 16px;
    color: #666; /* Dark text for light theme */
    line-height: 1.6;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .form-header p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

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

.form-label {
    font-size: 15px;
    font-weight: 600;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .form-label {
    color: #ffffff; /* White text for dark theme */
}

.form-control {
    padding: 16px;
    border: 2px solid rgba(30, 144, 255, 0.1);
    border-radius: 12px;
    font-size: 16px;
    background: #ffffff; /* Light background for light theme */
    color: #2C3E50; /* Dark text for light theme */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

[data-color-scheme="dark"] .form-control {
    background-color: #1a1a1a; /* Dark background for dark theme */
    color: #ffffff; /* White text for dark theme */
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.form-control:focus {
    outline: none;
    border-color: #1E90FF;
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.1);
    transform: translateY(-2px);
}

.form-control:hover {
    border-color: rgba(30, 144, 255, 0.3);
}

[data-color-scheme="dark"] .form-control:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Google Maps Section */
.maps-section {
    margin-top: 80px;
}

.maps-title {
    font-size: 32px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .maps-title {
    color: #ffffff; /* White text for dark theme */
}

.maps-subtitle {
    font-size: 18px;
    color: #666; /* Dark text for light theme */
    margin-bottom: 40px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .maps-subtitle {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.maps-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(44, 62, 80, 0.1);
    border: 1px solid rgba(30, 144, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .maps-container {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}

.maps-overlay {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 10;
}

.location-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95); /* Light background for light theme */
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(30, 144, 255, 0.1);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.1);
    max-width: 350px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .location-card {
    background: rgba(42, 42, 42, 0.95); /* Dark background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.location-icon {
    font-size: 28px;
    min-width: 32px;
}

.location-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2C3E50; /* Dark text for light theme */
    margin-bottom: 8px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .location-info h4 {
    color: #ffffff; /* White text for dark theme */
}

.location-info p {
    font-size: 14px;
    color: #555; /* Dark text for light theme */
    line-height: 1.5;
    margin-bottom: 12px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-color-scheme="dark"] .location-info p {
    color: rgba(255, 255, 255, 0.8); /* Light white for dark theme */
}

.location-actions .btn {
    padding: 8px 16px;
    font-size: 14px;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #2C3E50 0%, #1E90FF 100%);
    color: #ffffff; /* Always white in footer */
    padding: 80px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-brand h4 {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff; /* Always white in footer */
}

.brand-tagline {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9); /* Always white in footer */
    margin: 0;
}

.company-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8); /* Always white in footer */
    line-height: 1.6;
    margin: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff; /* Always white in footer */
    margin-bottom: 20px;
}

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

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

.footer-section a {
    color: rgba(255, 255, 255, 0.8); /* Always white in footer */
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-section a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.footer-bottom {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7); /* Always white in footer */
    font-size: 14px;
    line-height: 1.6;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes textShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes patternMove {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -30px); }
    66% { transform: translate(-20px, 20px); }
}

@keyframes engineeringFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(-3deg); }
    75% { transform: translateY(-20px) rotate(2deg); }
}

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

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

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

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced scroll animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .about-content,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-title {
        font-size: 42px;
    }

    .section-title {
        font-size: 36px;
    }

    .maps-overlay {
        position: static;
        margin-top: 20px;
    }

    .location-card {
        max-width: none;
    }

    .solutions-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto;
        row-gap: 36px;
        padding: 32px 0;
    }

    .solutions-track::before {
        display: none;
    }

    .solution-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .solution-connector,
    .solution-dot {
        display: none;
    }

    .solution-item:nth-child(odd) .solution-diamond,
    .solution-item:nth-child(even) .solution-diamond,
    .solution-item:nth-child(odd) .solution-content,
    .solution-item:nth-child(even) .solution-content {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-container {
        padding: 12px 16px;
    }

    .nav-brand {
        gap: 8px;
        font-size: 15px;
        max-width: calc(100% - 88px);
    }

    .brand-name {
        white-space: normal;
        line-height: 1.2;
    }

    .brand-logo {
        width: 36px;
        height: 36px;
    }

    .nav-controls {
        gap: 10px;
    }

    .theme-toggle {
        padding: 6px;
        font-size: 16px;
    }
    
    .nav-menu {
        position: fixed;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, rgba(44, 62, 80, 0.98) 0%, rgba(30, 144, 255, 0.98) 100%);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 24px;
        gap: 20px;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateY(-100vh);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 8px 32px rgba(44, 62, 80, 0.3);
    }
    
    .nav-menu.active {
        transform: translateY(0);
    }

    .nav-submenu {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 4px 0 0 12px;
        margin: 0;
    }

    .nav-sublink {
        padding: 6px 0;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 16px;
    }
    
    .hero-features {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .services-grid,
    .customers-grid {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }

    .solutions-track {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .section-title {
        font-size: 28px;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-label {
        font-size: 12px;
        letter-spacing: 0.3px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
    }

    section {
        padding: 80px 0;
    }

    section[id] {
        scroll-margin-top: 90px;
    }

    .contact-form-container {
        padding: 24px;
    }

    .card-content {
        grid-template-columns: 1fr;
    }

    .engineering-elements {
        display: none;
    }
}

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

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-description {
        font-size: 16px;
    }

    .section-title {
        font-size: 24px;
    }

    .service-card,
    .capability-card,
    .customer-category {
        padding: 24px 20px;
    }

    .hero-content {
        padding: 100px 0 36px;
    }

    .value-item {
        flex-direction: column;
        text-align: center;
    }

    .company-values {
        gap: 16px;
    }

    .maps-container iframe {
        height: 300px;
    }

    .solutions-track {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .solution-item {
        min-height: 0;
    }
}

/* Smooth transition for all theme changes */
* {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced scroll animation classes */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

.scroll-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-slide-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.scroll-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-slide-right.animated {
    opacity: 1;
    transform: translateX(0);
}

.scroll-scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-scale-in.animated {
    opacity: 1;
    transform: scale(1);
}